Duo mode modal enhancements (#2544)

* task: add error dialog when field errors are present * task: dialog style updates
zesty-io · Feb 15, 2024 · 5ab79fe · 5ab79fe
1 parent 7650a8a
commit 5ab79fe
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 25 deletions.
diff --git a/src/apps/active-preview/Preview.js b/src/apps/active-preview/Preview.js
@@ -11,6 +11,7 @@ import {
   Dialog,
   Typography,
   CircularProgress,
+  SvgIcon,
 } from "@mui/material";
 import {
   LinkRounded,
@@ -21,6 +22,7 @@ import {
   CheckRounded,
   SaveRounded,
   ZoomInRounded,
+  DangerousRounded,
 } from "@mui/icons-material";
 
 // import { Meta } from "./components/Meta";
@@ -88,6 +90,7 @@ export function Preview(props) {
   const [zoom, setZoom] = useState(() => {
     return isInIframe() ? 0.35 : 1;
   });
+  const [hasErrors, setHasErrors] = useState(false);
 
   // Track initial version sent. We use this to make a determination
   // on whether current content has changed or the different version was
@@ -138,6 +141,9 @@ export function Preview(props) {
             setInitialVersion(msg.data.version);
           }
         }
+        if (Object(msg.data).hasOwnProperty("hasErrors")) {
+          setHasErrors(msg.data.hasErrors);
+        }
       }
     }
 
@@ -389,15 +395,17 @@ export function Preview(props) {
             open
             PaperProps={{
               sx: {
-                p: 2,
+                p: 2.5,
                 alignItems: "center",
                 gap: 1.5,
+                width: 240,
+                boxSizing: "border-box",
               },
             }}
           >
             <Box
               sx={{
-                backgroundColor: "deepOrange.200",
+                backgroundColor: hasErrors ? "red.100" : "deepOrange.50",
                 borderRadius: "100%",
                 width: "40px",
                 height: "40px",
@@ -406,30 +414,35 @@ export function Preview(props) {
                 alignItems: "center",
               }}
             >
-              <SaveRounded
-                color="primary"
+              <SvgIcon
+                component={hasErrors ? DangerousRounded : SaveRounded}
+                color={hasErrors ? "error" : "primary"}
                 sx={{
                   width: "24px",
                   height: "24px",
                 }}
               />
             </Box>
-            <Typography variant="h6" fontWeight={600}>
-              Save to Update Preview
+            <Typography variant="h6" fontWeight={700} align="center">
+              {hasErrors
+                ? "Resolve invalid field values to save and update preview"
+                : "Save to Update Preview"}
             </Typography>
-            <Button
-              size="small"
-              variant="outlined"
-              onClick={() => {
-                setSaving(true);
-                sendMessage("save");
-              }}
-              sx={{
-                maxWidth: "54px",
-              }}
-            >
-              Save
-            </Button>
+            {!hasErrors && (
+              <Button
+                size="small"
+                variant="outlined"
+                onClick={() => {
+                  setSaving(true);
+                  sendMessage("save");
+                }}
+                sx={{
+                  maxWidth: "54px",
+                }}
+              >
+                Save
+              </Button>
+            )}
           </Dialog>
         )}
 

diff --git a/src/apps/content-editor/src/app/components/Editor/PreviewMode/PreviewMode.js b/src/apps/content-editor/src/app/components/Editor/PreviewMode/PreviewMode.js
@@ -19,7 +19,7 @@ export default function PreviewMode(props) {
   const preview = useRef(null);
 
   // Sends message to preview window to update route
-  function route(itemZUID, version, dirty) {
+  function route(itemZUID, version, dirty, hasErrors) {
     if (preview.current) {
       // if not a string or a string that is not a content item zuid
       // then see if location contains a routable content item
@@ -50,6 +50,7 @@ export default function PreviewMode(props) {
             settings: instanceSettings,
             version: version,
             dirty: dirty,
+            hasErrors,
           },
           origin
         );
@@ -60,19 +61,19 @@ export default function PreviewMode(props) {
   useEffect(() => {
     if (preview.current) {
       // ActivePreview iframe is loading, send route when ready
-      preview.current.addEventListener("load", () =>
-        route(props.itemZUID, props.version, props.dirty)
-      );
+      preview.current.addEventListener("load", () => {
+        route(props.itemZUID, props.version, props.dirty, props.hasErrors);
+      });
 
       // ActivePreview iframe is loaded, send route updates
       const doc =
         preview.current.contentDocument ||
         preview.current.contentWindow.document;
       if (doc.readyState === "complete") {
-        route(props.itemZUID, props.version, props.dirty);
+        route(props.itemZUID, props.version, props.dirty, props.hasErrors);
       }
     }
-  }, [props.itemZUID, props.version, props.dirty]);
+  }, [props.itemZUID, props.version, props.dirty, props.hasErrors]);
 
   useEffect(() => {
     const handleMessage = (event) => {

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Content/Content.js b/src/apps/content-editor/src/app/views/ItemEdit/Content/Content.js
@@ -163,6 +163,7 @@ export default function Content(props) {
             version={props.item.meta.version}
             onClose={() => setShowDuoMode(false)}
             onSave={() => props.onSave()}
+            hasErrors={props.hasErrors}
           />
         </Box>
       )}