[Schema] Auto-populate relational field name & label (#3221)

Auto-populate field name and label based on the selected related model Resolves #3186 [Schema---hello-world-test-123---Zesty-io---zesty-pw---Manager.webm](https://github.com/user-attachments/assets/f8ecb82a-cd4c-4cd1-8b64-46cc8074de1f)
zesty-io · Feb 19, 2025 · 1edccf4 · 1edccf4
1 parent ed23dbe
commit 1edccf4
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 22 deletions.
diff --git a/cypress/e2e/schema/field.spec.js b/cypress/e2e/schema/field.spec.js
@@ -308,9 +308,6 @@ describe("Schema: Fields", () => {
   it("Creates a One-to-one relationship field", () => {
     cy.intercept("**/fields?showDeleted=true").as("getFields");
 
-    const fieldLabel = `One to One ${timestamp}`;
-    const fieldName = `one_to_one_${timestamp}`;
-
     // Open the add field modal
     cy.getBySelector(SELECTORS.ADD_FIELD_BTN)
       .should("exist")
@@ -320,9 +317,6 @@ describe("Schema: Fields", () => {
     // Select one-to-one relationship field
     cy.getBySelector(SELECTORS.FIELD_SELECT_ONE_TO_ONE).should("exist").click();
 
-    // Fill up fields
-    cy.getBySelector(SELECTORS.INPUT_LABEL).should("exist").type(fieldLabel);
-
     // Select a related model
     cy.getBySelector(SELECTORS.AUTOCOMPLETE_MODEL_ZUID)
       .should("exist")
@@ -359,7 +353,9 @@ describe("Schema: Fields", () => {
     cy.wait("@getFields");
 
     // Check if field exists
-    cy.getBySelector(`Field_${fieldName}`).should("exist");
+    cy.getBySelector(
+      "Field_cypress_test__group_with_visible_fields_in_list_"
+    ).should("exist");
   });
 
   it("Creates a currency field", () => {

diff --git a/src/apps/schema/src/app/components/AddFieldModal/views/FieldForm.tsx b/src/apps/schema/src/app/components/AddFieldModal/views/FieldForm.tsx
@@ -700,30 +700,35 @@ export const FieldForm = ({
     inputName: string;
     value: FormValue;
   }) => {
-    const isAutoPopulateName = inputName === "label" && !isUpdateField;
+    const modelName =
+      inputName === "relatedModelZUID" && !!value
+        ? allModels?.find((model) => model.ZUID === value)?.label
+        : "";
 
     // Form data update
     setFormData((prevData) => ({
       ...prevData,
       [inputName]:
         inputName === "name" ? convertLabelValue(value as string) : value,
-    }));
 
-    // Auto populate "name" when "label" field changes
-    if (isAutoPopulateName) {
-      setFormData((prevData) => ({
-        ...prevData,
-        name: convertLabelValue(value as string),
-      }));
-    }
+      // Auto populate "name" when "label" field changes
+      ...(inputName === "label" &&
+        !isUpdateField && {
+          name: convertLabelValue(value as string),
+        }),
 
-    // Reset relatedFieldZUID when model zuid changes
-    if (inputName === "relatedModelZUID") {
-      setFormData((prevData) => ({
-        ...prevData,
+      // Reset relatedFieldZUID when model zuid changes
+      ...(inputName === "relatedModelZUID" && {
         relatedFieldZUID: "",
-      }));
-    }
+      }),
+
+      // Auto populate "name" and "label" when relatedModelZUID changes
+      ...(inputName === "relatedModelZUID" &&
+        !isUpdateField && {
+          name: convertLabelValue(modelName),
+          label: modelName,
+        }),
+    }));
   };
 
   const handleAddAnotherField = () => {