fix: reset button loading status when field has errors (#2439)

zesty-io · Jan 9, 2024 · 63649f1 · 63649f1
1 parent b38f68f
commit 63649f1
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/ItemEdit.js b/src/apps/content-editor/src/app/views/ItemEdit/ItemEdit.js
@@ -352,7 +352,11 @@ export default function ItemEdit() {
               component="section"
               sx={{ display: "flex", flexDirection: "column", height: "100%" }}
             >
-              <ItemEditHeader onSave={save} saving={saving} />
+              <ItemEditHeader
+                onSave={save}
+                saving={saving}
+                hasError={Object.keys(fieldErrors)?.length}
+              />
               <Switch>
                 <Route
                   exact

diff --git a/...content-editor/src/app/views/ItemEdit/components/ItemEditHeader/ItemEditHeaderActions.tsx b/...content-editor/src/app/views/ItemEdit/components/ItemEditHeader/ItemEditHeaderActions.tsx
@@ -55,11 +55,13 @@ const ITEM_STATES = {
 type ItemEditHeaderActionsProps = {
   saving: boolean;
   onSave: () => void;
+  hasError: boolean;
 };
 
 export const ItemEditHeaderActions = ({
   saving,
   onSave,
+  hasError,
 }: ItemEditHeaderActionsProps) => {
   const { modelZUID, itemZUID } = useParams<{
     modelZUID: string;
@@ -183,6 +185,12 @@ export const ItemEditHeaderActions = ({
     }
   }, [item, scheduleAfterSave, saving, activePublishing]);
 
+  useEffect(() => {
+    if (!saving && hasError) {
+      setPublishAfterSave(false);
+    }
+  }, [hasError, saving]);
+
   return (
     <>
       <Tooltip

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/index.tsx b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/index.tsx
@@ -77,8 +77,9 @@ export type ContentItemWithDirtyAndPublishing = ContentItem & {
 type HeaderProps = {
   saving: boolean;
   onSave: () => void;
+  hasError: boolean;
 };
-export const ItemEditHeader = ({ saving, onSave }: HeaderProps) => {
+export const ItemEditHeader = ({ saving, onSave, hasError }: HeaderProps) => {
   const { modelZUID, itemZUID } = useParams<{
     modelZUID: string;
     itemZUID: string;
@@ -164,7 +165,11 @@ export const ItemEditHeader = ({ saving, onSave }: HeaderProps) => {
                 <ContentCopyRounded fontSize="small" />
               </IconButton>
               {type !== "dataset" && <PreviewMenu />}
-              <ItemEditHeaderActions saving={saving} onSave={onSave} />
+              <ItemEditHeaderActions
+                saving={saving}
+                onSave={onSave}
+                hasError={hasError}
+              />
             </Box>
           </Box>
           <Box