Fixed incorrect toast messages for IP address pool creation, updates, and errors

changelog/5908.fixed.md

@@ -0,0 +1 @@
+Fixed incorrect toast messages for IP address pool creation, updates, and errors.

frontend/app/src/entities/resource-manager/ui/ip-address-pool-form.tsx

@@ -1,100 +1,88 @@
-import { NUMBER_POOL_OBJECT } from "@/config/constants";
-import { useAuth } from "@/entities/authentication/ui/useAuth";
-import { currentBranchAtom } from "@/entities/branches/stores";
+import { useCurrentBranch } from "@/entities/branches/ui/branches-provider";
 import { IP_ADDRESS_GENERIC } from "@/entities/ipam/constants";
 import { createObject } from "@/entities/nodes/api/createObject";
 import { updateObjectWithId } from "@/entities/nodes/api/updateObjectWithId";
-import { AttributeType, RelationshipType } from "@/entities/nodes/getObjectItemDisplayValue";
-import { nodeSchemasAtom } from "@/entities/schema/stores/schema.atom";
-import { schemaKindLabelState } from "@/entities/schema/stores/schemaKindLabel.atom";
+import { getSchema } from "@/entities/schema/domain/get-schema";
 import { useSchema } from "@/entities/schema/ui/hooks/useSchema";
 import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
-import { Button } from "@/shared/components/buttons/button-primitive";
-import { DEFAULT_FORM_FIELD_VALUE } from "@/shared/components/form/constants";
-import { LabelFormField } from "@/shared/components/form/fields/common";
-import InputField from "@/shared/components/form/fields/input.field";
-import NumberField from "@/shared/components/form/fields/number.field";
-import RelationshipManyField from "@/shared/components/form/fields/relationship-many.field";
-import RelationshipField from "@/shared/components/form/fields/relationship.field";
+import DynamicForm from "@/shared/components/form/dynamic-form";
 import { NodeFormProps } from "@/shared/components/form/node-form";
-import { FormAttributeValue, FormFieldValue } from "@/shared/components/form/type";
-import { getCurrentFieldValue } from "@/shared/components/form/utils/getFieldDefaultValue";
+import { DynamicSelectFieldProps, FormFieldValue } from "@/shared/components/form/type";
 import { getFormFieldsFromSchema } from "@/shared/components/form/utils/getFormFieldsFromSchema";
-import { getRelationshipDefaultValue } from "@/shared/components/form/utils/getRelationshipDefaultValue";
 import { getCreateMutationFromFormData } from "@/shared/components/form/utils/mutations/getCreateMutationFromFormData";
-import { updateFormFieldValue } from "@/shared/components/form/utils/updateFormFieldValue";
-import { isRequired } from "@/shared/components/form/utils/validation";
 import { ALERT_TYPES, Alert } from "@/shared/components/ui/alert";
-import { Badge } from "@/shared/components/ui/badge";
-import {
-  Combobox,
-  ComboboxContent,
-  ComboboxItem,
-  ComboboxList,
-  ComboboxTrigger,
-} from "@/shared/components/ui/combobox";
-import { Form, FormField, FormInput, FormSubmit } from "@/shared/components/ui/form";
-import { datetimeAtom } from "@/shared/stores/time.atom";
 import { stringifyWithoutQuotes } from "@/shared/utils/string";
 import { gql } from "@apollo/client";
-import { useAtomValue } from "jotai";
-import { useState } from "react";
-import { FieldValues, useForm } from "react-hook-form";
+import { useMemo } from "react";
 import { toast } from "react-toastify";
+import { capitalize } from "remeda";
 import { IP_ADDRESS_POOL } from "../constants";
 
 const ADDRESS_DEFAULT_TYPE_FIELD_NAME = "default_address_type";
 
-interface IpAddressPoolFormProps extends Pick<NodeFormProps, "onSuccess"> {
-  currentObject?: Record<string, AttributeType | RelationshipType>;
-  onCancel?: () => void;
-  onUpdateComplete?: () => void;
-}
+interface IpAddressPoolFormProps extends NodeFormProps {}
 
 export const IpAddressPoolForm = ({
   currentObject,
+  isUpdate,
+  onSubmit,
   onSuccess,
-  onCancel,
-  onUpdateComplete,
+  ...props
 }: IpAddressPoolFormProps) => {
-  const branch = useAtomValue(currentBranchAtom);
-  const date = useAtomValue(datetimeAtom);
-  const { schema } = useSchema(IP_ADDRESS_POOL);
-  const auth = useAuth();
+  const { currentBranch } = useCurrentBranch();
+  const { schema: genericAddressSchema, isGeneric } = useSchema(IP_ADDRESS_GENERIC);
+
+  const fields = useMemo(() => {
+    const schemaFields = getFormFieldsFromSchema({
+      ...props,
+      initialObject: currentObject,
+      isUpdate,
+    });
+
+    if (!genericAddressSchema || !isGeneric) return schemaFields;
+
+    // Replace default_address_type (text) field with a select
+    return schemaFields.map((field) => {
+      if (field.name === ADDRESS_DEFAULT_TYPE_FIELD_NAME) {
+        const items =
+          genericAddressSchema.used_by?.map((kind) => {
+            const { schema } = getSchema(kind);
+
+            if (!schema) {
+              return {
+                key: kind,
+                label: kind,
+              };
+            }
+
+            return {
+              key: kind,
+              label: (
+                <div className="flex items-center justify-between w-full">
+                  <span>{schema.label}</span>
+                  <span className="text-xs text-gray-500">{schema.namespace}</span>
+                </div>
+              ),
+            };
+          }) ?? [];
+
+        const defaultValue =
+          isUpdate && currentObject
+            ? field.defaultValue
+            : items.length === 1
+              ? { source: { type: "user" }, value: items[0]?.key }
+              : field.defaultValue;
 
-  const defaultValues = {
-    name: getCurrentFieldValue("name", currentObject),
-    description: getCurrentFieldValue("description", currentObject),
-    default_prefix_length: getCurrentFieldValue("default_prefix_length", currentObject),
-    resources: getRelationshipDefaultValue({
-      relationshipData: currentObject?.resources,
-    }),
-    ip_namespace: getRelationshipDefaultValue({
-      relationshipData: currentObject?.ip_namespace,
-    }),
-  };
-
-  const fields = getFormFieldsFromSchema({
-    schema,
-    initialObject: currentObject,
-    auth,
-  });
-
-  const form = useForm<FieldValues>({
-    defaultValues,
-  });
-
-  const prefixLenghtAttribute = schema?.attributes?.find((attribute) => {
-    return attribute.name === "default_prefix_length";
-  });
-
-  const resourcesRelatiosnhip = schema?.relationships?.find((relationship) => {
-    return relationship.name === "resources";
-  });
-
-  const namespaceRelationship = schema?.relationships?.find((relationship) => {
-    return relationship.name === "ip_namespace";
-  });
+        return {
+          ...field,
+          type: "select",
+          items,
+          defaultValue,
+        } as DynamicSelectFieldProps;
+      }
+      return field;
+    });
+  }, [props.schema.kind, genericAddressSchema?.kind, currentObject, isUpdate]);
 
   async function handleSubmit(data: Record<string, FormFieldValue>) {
     try {
@@ -125,156 +113,33 @@ export const IpAddressPoolForm = ({
 
       const result = await graphqlClient.mutate({
         mutation,
-        context: {
-          branch: branch?.name,
-          date,
-        },
+        context: { branch: currentBranch.name },
       });
 
-      toast(<Alert type={ALERT_TYPES.SUCCESS} message={"Number pool created"} />, {
-        toastId: "alert-success-number-pool-created",
+      const operationType = isUpdate ? "update" : "create";
+      toast(<Alert type={ALERT_TYPES.SUCCESS} message={`IP address pool ${operationType}d`} />, {
+        toastId: `alert-success-ip-prefix-pool-${operationType}`,
       });
 
-      if (onSuccess) await onSuccess(result?.data?.[`${NUMBER_POOL_OBJECT}Create`]);
-      if (onUpdateComplete) await onUpdateComplete();
+      if (onSuccess) {
+        const resultData = result?.data?.[`${IP_ADDRESS_POOL}${capitalize(operationType)}`];
+        await onSuccess(resultData);
+      }
     } catch (error: unknown) {
-      console.error("An error occurred while creating the object: ", error);
+      console.error(
+        `An error occurred while ${isUpdate ? "updating" : "creating"} the IP address pool:`,
+        error
+      );
     }
   }
 
   return (
-    <div className={"bg-custom-white flex flex-col flex-1 overflow-auto p-4"}>
-      <Form form={form} onSubmit={handleSubmit}>
-        <InputField name="name" label="Name" rules={{ required: true }} />
-        <InputField name="description" label="Description" />
-        <AddressTypesCombobox currentObject={currentObject} />
-        <NumberField
-          name="default_prefix_length"
-          label={prefixLenghtAttribute?.label}
-          description={prefixLenghtAttribute?.description}
-        />
-        <RelationshipManyField
-          name="resources"
-          type="relationship"
-          label={resourcesRelatiosnhip?.label}
-          description={resourcesRelatiosnhip?.description}
-          relationship={{
-            name: "resources",
-            peer: "BuiltinIPPrefix",
-            kind: "Attribute",
-            label: "Resources",
-          }}
-          rules={{ required: true, validate: { required: isRequired } }}
-        />
-        <RelationshipField
-          name="ip_namespace"
-          type="relationship"
-          label={namespaceRelationship?.label}
-          description={namespaceRelationship?.description}
-          relationship={{ peer: "BuiltinIPNamespace", name: "ip_namespace" }}
-          rules={{ required: true, validate: { required: isRequired } }}
-        />
-
-        <div className="text-right">
-          {onCancel && (
-            <Button variant="outline" className="mr-2" onClick={onCancel}>
-              Cancel
-            </Button>
-          )}
-
-          <FormSubmit>Save</FormSubmit>
-        </div>
-      </Form>
-    </div>
-  );
-};
-
-const AddressTypesCombobox = ({
-  currentObject,
-}: { currentObject?: Record<string, AttributeType | RelationshipType> }) => {
-  const { schema } = useSchema(IP_ADDRESS_POOL);
-  const schemaList = useAtomValue(nodeSchemasAtom);
-  const { schema: genericSchema, isGeneric } = useSchema(IP_ADDRESS_GENERIC);
-  const schemaKindName = useAtomValue(schemaKindLabelState);
-  const [open, setOpen] = useState(false);
-
-  const prefixTypeAttribute = schema?.attributes?.find((attribute) => {
-    return attribute.name === ADDRESS_DEFAULT_TYPE_FIELD_NAME;
-  });
-
-  const items =
-    (isGeneric &&
-      genericSchema?.used_by?.map((kind) => {
-        const currentSchema = schemaList.find((schema) => schema.kind === kind);
-
-        return {
-          value: kind,
-          label: schemaKindName[kind],
-          namespace: currentSchema?.namespace,
-        };
-      })) ??
-    [];
-
-  const currentValue = getCurrentFieldValue(ADDRESS_DEFAULT_TYPE_FIELD_NAME, currentObject);
-
-  const defaultValue =
-    (items[0] ?? currentValue)
-      ? { source: { type: "user" }, value: items[0].value }
-      : DEFAULT_FORM_FIELD_VALUE;
-
-  return (
-    <FormField
-      name={ADDRESS_DEFAULT_TYPE_FIELD_NAME}
-      rules={{ required: true, validate: { required: isRequired } }}
-      defaultValue={defaultValue}
-      render={({ field }) => {
-        const fieldData: FormAttributeValue = field.value;
-
-        return (
-          <div className="flex flex-col gap-2">
-            <LabelFormField
-              label={prefixTypeAttribute?.label}
-              required
-              description={prefixTypeAttribute?.description}
-              fieldData={fieldData}
-            />
-
-            <FormInput>
-              <Combobox open={open} onOpenChange={setOpen}>
-                <ComboboxTrigger data-testid="namespace-select">
-                  {items.find((item) => item.value === fieldData?.value)?.label}
-                </ComboboxTrigger>
-
-                <ComboboxContent align="start" fitTriggerWidth={false}>
-                  <ComboboxList className="max-w-md">
-                    {items.map((item) => {
-                      return (
-                        <ComboboxItem
-                          key={item.value}
-                          value={item.value}
-                          selectedValue={fieldData?.value}
-                          onSelect={() => {
-                            const newValue = fieldData?.value === item.value ? null : item.value;
-                            field.onChange(
-                              updateFormFieldValue(newValue ?? null, DEFAULT_FORM_FIELD_VALUE)
-                            );
-                            setOpen(false);
-                          }}
-                        >
-                          <div className="overflow-hidden w-full flex items-center justify-between">
-                            <div className="truncate font-semibold">{item.label}</div>
-                            <Badge className="font-medium">{item.namespace}</Badge>
-                          </div>
-                        </ComboboxItem>
-                      );
-                    })}
-                  </ComboboxList>
-                </ComboboxContent>
-              </Combobox>
-            </FormInput>
-          </div>
-        );
-      }}
+    <DynamicForm
+      fields={fields}
+      onSubmit={(formData: Record<string, FormFieldValue>) =>
+        onSubmit ? onSubmit({ formData, fields }) : handleSubmit(formData)
+      }
+      className="p-4 overflow-auto"
     />
   );
 };

frontend/app/src/shared/components/form/node-form.tsx

@@ -17,7 +17,6 @@ import { DynamicFieldProps, FormFieldValue, NumberPoolData } from "@/shared/comp
 import { getFormFieldsFromSchema } from "@/shared/components/form/utils/getFormFieldsFromSchema";
 import { getCreateMutationFromFormData } from "@/shared/components/form/utils/mutations/getCreateMutationFromFormData";
 import { ALERT_TYPES, Alert } from "@/shared/components/ui/alert";
-import useFilters from "@/shared/hooks/useFilters";
 import { datetimeAtom } from "@/shared/stores/time.atom";
 import { classNames } from "@/shared/utils/common";
 import { stringifyWithoutQuotes } from "@/shared/utils/string";
@@ -58,7 +57,6 @@ export const NodeForm = ({
 }: NodeFormProps) => {
   const branch = useAtomValue(currentBranchAtom);
   const date = useAtomValue(datetimeAtom);
-  const [filters] = useFilters();
   const auth = useAuth();
 
   const { data, loading } = useQuery(GET_FORM_REQUIREMENTS, { variables: { kind: schema.kind } });
@@ -84,7 +82,6 @@ export const NodeForm = ({
     objectTemplate,
     auth,
     isFilterForm,
-    filters,
     pools: numberPools,
     isUpdate,
   });

frontend/app/src/shared/components/form/object-form.tsx

@@ -111,7 +111,7 @@ const ObjectForm = ({ kind, currentProfiles, ...props }: ObjectFormProps) => {
   }
 
   if (kind === IP_ADDRESS_POOL) {
-    return <IpAddressPoolForm {...props} />;
+    return <IpAddressPoolForm schema={schema} {...props} />;
   }
 
   if (kind === IP_PREFIX_POOL) {