[Content] Show error blurb on save button click (#2843)

Fixes #2826 Fixes #2820 Makes sure that the error blurb is shown when the save button is clicked and there are field errors https://github.com/user-attachments/assets/823b064c-b9ae-4f67-928b-77c63e5892f8
zesty-io · Jul 19, 2024 · b6e457b · b6e457b
1 parent 0a358cf
commit b6e457b
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 19 deletions.
diff --git a/cypress/e2e/schema/field.spec.js b/cypress/e2e/schema/field.spec.js
@@ -66,13 +66,27 @@ describe("Schema: Fields", () => {
         cy.waitOn("/bin/1-6c9618c-r26pt/groups", () => {
           cy.waitOn("/v1/content/models", () => {
             cy.visit("/schema/6-ce80dbfe90-ptjpm6/fields");
+
+            cy.getBySelector("create_new_content_item").click();
+
+            cy.contains("Multi Page Model").click();
+            cy.contains("Next").click();
+            cy.contains("Display Name")
+              .next()
+              .type(`Cypress Test Model ${timestamp}`);
+            cy.get(".MuiDialog-container").within(() => {
+              cy.contains("Create Model").click();
+            });
+            cy.intercept("POST", "/models");
+            cy.intercept("GET", "/models");
           });
         });
       }
     );
   });
 
   it("Opens Add Field Modal via button click", () => {
+    cy.wait(3000);
     // Open the modal
     cy.getBySelector(SELECTORS.ADD_FIELD_BTN).should("exist").click();
     cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("exist");
@@ -89,7 +103,9 @@ describe("Schema: Fields", () => {
     const fieldName = `text_${timestamp}`;
 
     // Open the add field modal
-    cy.getBySelector(SELECTORS.ADD_FIELD_BTN).should("exist").click();
+    cy.getBySelector(SELECTORS.ADD_FIELD_BTN)
+      .should("exist")
+      .click({ force: true });
     cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("exist");
 
     // Select Text field
@@ -143,7 +159,9 @@ describe("Schema: Fields", () => {
     const fieldName = `dropdown_${timestamp}`;
 
     // Open the add field modal
-    cy.getBySelector(SELECTORS.ADD_FIELD_BTN).should("exist").click();
+    cy.getBySelector(SELECTORS.ADD_FIELD_BTN)
+      .should("exist")
+      .click({ force: true });
     cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("exist");
 
     // Select Dropdown field
@@ -200,7 +218,9 @@ describe("Schema: Fields", () => {
     const fieldName = `media_${timestamp}`;
 
     // Open the add field modal
-    cy.getBySelector(SELECTORS.ADD_FIELD_BTN).should("exist").click();
+    cy.getBySelector(SELECTORS.ADD_FIELD_BTN)
+      .should("exist")
+      .click({ force: true });
     cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("exist");
 
     // Select Media field
@@ -232,7 +252,9 @@ describe("Schema: Fields", () => {
     const fieldName = `boolean_${timestamp}`;
 
     // Open the add field modal
-    cy.getBySelector(SELECTORS.ADD_FIELD_BTN).should("exist").click();
+    cy.getBySelector(SELECTORS.ADD_FIELD_BTN)
+      .should("exist")
+      .click({ force: true });
     cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("exist");
 
     // Select Boolean field
@@ -284,7 +306,9 @@ describe("Schema: Fields", () => {
     const fieldName = `one_to_one_${timestamp}`;
 
     // Open the add field modal
-    cy.getBySelector(SELECTORS.ADD_FIELD_BTN).should("exist").click();
+    cy.getBySelector(SELECTORS.ADD_FIELD_BTN)
+      .should("exist")
+      .click({ force: true });
     cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("exist");
 
     // Select one-to-one relationship field
@@ -306,7 +330,7 @@ describe("Schema: Fields", () => {
     // Select a related field
     cy.getBySelector(SELECTORS.AUTOCOMPLETE_FIELED_ZUID)
       .should("exist")
-      .type("title");
+      .click();
     cy.get("[role=listbox] [role=option]").first().click();
 
     // Navigate to rules tab and add default value
@@ -348,7 +372,9 @@ describe("Schema: Fields", () => {
     };
 
     // Open the add field modal
-    cy.getBySelector(SELECTORS.ADD_FIELD_BTN).should("exist").click();
+    cy.getBySelector(SELECTORS.ADD_FIELD_BTN)
+      .should("exist")
+      .click({ force: true });
     cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("exist");
 
     // Select number field
@@ -386,7 +412,9 @@ describe("Schema: Fields", () => {
 
   it("Shows error messages during field creation", () => {
     // Open the add field modal
-    cy.getBySelector(SELECTORS.ADD_FIELD_BTN).should("exist").click();
+    cy.getBySelector(SELECTORS.ADD_FIELD_BTN)
+      .should("exist")
+      .click({ force: true });
     cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("exist");
 
     // Select Text field
@@ -407,7 +435,7 @@ describe("Schema: Fields", () => {
     // Click end of list button
     cy.getBySelector(SELECTORS.ADD_FIELD_BTN_END_OF_LIST)
       .should("exist")
-      .click();
+      .click({ force: true });
 
     // Verify modal
     cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("exist");
@@ -422,7 +450,7 @@ describe("Schema: Fields", () => {
     cy.getBySelector(SELECTORS.ADD_FIELD_BTN_IN_BETWEEN)
       .first()
       .should("exist")
-      .click();
+      .click({ force: true });
 
     // Verify modal
     cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("exist");
@@ -434,7 +462,9 @@ describe("Schema: Fields", () => {
 
   it("Switches tabs in Add Field Modal", () => {
     // Open the modal
-    cy.getBySelector(SELECTORS.ADD_FIELD_BTN).should("exist").click();
+    cy.getBySelector(SELECTORS.ADD_FIELD_BTN)
+      .should("exist")
+      .click({ force: true });
     cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("exist");
 
     // Select single text field
@@ -457,7 +487,9 @@ describe("Schema: Fields", () => {
 
   it("Can navigate back to fields selection view", () => {
     // Open the modal
-    cy.getBySelector(SELECTORS.ADD_FIELD_BTN).should("exist").click();
+    cy.getBySelector(SELECTORS.ADD_FIELD_BTN)
+      .should("exist")
+      .click({ force: true });
     cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("exist");
 
     // Select single text field
@@ -477,7 +509,9 @@ describe("Schema: Fields", () => {
 
   it("Can filter fields in field selection view", () => {
     // Open the modal
-    cy.getBySelector(SELECTORS.ADD_FIELD_BTN).should("exist").click();
+    cy.getBySelector(SELECTORS.ADD_FIELD_BTN)
+      .should("exist")
+      .click({ force: true });
     cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("exist");
 
     // Verify that field selection screen is loaded
@@ -507,7 +541,9 @@ describe("Schema: Fields", () => {
     const fieldName = `field_to_filter_${timestamp}`;
 
     // Open the add field modal
-    cy.getBySelector(SELECTORS.ADD_FIELD_BTN).should("exist").click();
+    cy.getBySelector(SELECTORS.ADD_FIELD_BTN)
+      .should("exist")
+      .click({ force: true });
     cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("exist");
 
     // Select a field
@@ -556,7 +592,9 @@ describe("Schema: Fields", () => {
     const fieldName = `update_me_${timestamp}`;
 
     // Open the add field modal
-    cy.getBySelector(SELECTORS.ADD_FIELD_BTN).should("exist").click();
+    cy.getBySelector(SELECTORS.ADD_FIELD_BTN)
+      .should("exist")
+      .click({ force: true });
     cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("exist");
 
     // Select Text field
@@ -612,7 +650,9 @@ describe("Schema: Fields", () => {
     const fieldName = `deactivate_me_${timestamp}`;
 
     // Open the add field modal
-    cy.getBySelector(SELECTORS.ADD_FIELD_BTN).should("exist").click();
+    cy.getBySelector(SELECTORS.ADD_FIELD_BTN)
+      .should("exist")
+      .click({ force: true });
     cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("exist");
 
     // Select Text field
@@ -671,7 +711,9 @@ describe("Schema: Fields", () => {
     const fieldName = `deactivate_me_via_modal_${timestamp}`;
 
     // Open the add field modal
-    cy.getBySelector(SELECTORS.ADD_FIELD_BTN).should("exist").click();
+    cy.getBySelector(SELECTORS.ADD_FIELD_BTN)
+      .should("exist")
+      .click({ force: true });
     cy.getBySelector(SELECTORS.ADD_FIELD_MODAL).should("exist");
 
     // Select Text field

diff --git a/src/apps/content-editor/src/app/views/ItemCreate/ItemCreate.tsx b/src/apps/content-editor/src/app/views/ItemCreate/ItemCreate.tsx
@@ -297,7 +297,6 @@ export const ItemCreate = () => {
     } finally {
       if (isMounted.current) {
         setSaving(false);
-        setSaveClicked(false);
       }
     }
   };

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/ItemEdit.js b/src/apps/content-editor/src/app/views/ItemEdit/ItemEdit.js
@@ -331,7 +331,6 @@ export default function ItemEdit() {
     } finally {
       if (isMounted.current) {
         setSaving(false);
-        setSaveClicked(false);
       }
     }
   }