blocks ux enhancements (#3158)

zesty-io · Jan 27, 2025 · c80aa67 · c80aa67
1 parent 1d5c1d0
commit c80aa67
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "start:stage": "npm run serve:webpack -- --node-env stage --mode=development",
     "task:clean": "rimraf build",
     "task:webpack": "cross-env NODE_OPTIONS='--max_old_space_size=4096' webpack --progress --config src/shell/webpack.config.js",
-    "test": "./node_modules/.bin/cypress run --headless --browser chrome --reporter list",
+    "test": "./node_modules/.bin/cypress run --headless --browser electron --reporter list",
     "test:open": "./node_modules/.bin/cypress open"
   },
   "dependencies": {

diff --git a/src/apps/active-preview/Preview.js b/src/apps/active-preview/Preview.js
@@ -24,6 +24,7 @@ import {
   ZoomInRounded,
   DangerousRounded,
 } from "@mui/icons-material";
+import { useLocalStorage } from "react-use";
 
 // import { Meta } from "./components/Meta";
 import { JSONPreview } from "./components/JSONPreview";
@@ -87,7 +88,7 @@ export function Preview(props) {
   const [anchorEl, setAnchorEl] = useState(null);
   const [scaleAnchorEl, setScaleAnchorEl] = useState(null);
   const [saving, setSaving] = useState(false);
-  const [zoom, setZoom] = useState(() => {
+  const [zoom, setZoom] = useLocalStorage("zoom", () => {
     return isInIframe() ? 0.35 : 1;
   });
   const [hasErrors, setHasErrors] = useState(false);

diff --git a/src/apps/blocks/components/CreateVariantDialog.tsx b/src/apps/blocks/components/CreateVariantDialog.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { KeyboardEvent, useState } from "react";
 import {
   Box,
   Button,
@@ -64,6 +64,12 @@ export const CreateVariantDialog = ({
     onClose();
   };
 
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Enter") {
+      handleVariantCreate();
+    }
+  };
+
   return (
     <Dialog open onClose={onClose} fullWidth maxWidth="xs">
       <DialogTitle>
@@ -92,6 +98,7 @@ export const CreateVariantDialog = ({
           fullWidth
           data-cy="variant-name-input"
           onFocus={(evt) => evt.target.select()}
+          onKeyDown={handleKeyDown}
         />
       </DialogContent>
       <DialogActions>

diff --git a/src/apps/schema/src/app/components/CreateModelDialogue.tsx b/src/apps/schema/src/app/components/CreateModelDialogue.tsx
@@ -86,7 +86,6 @@ export const CreateModelDialogue = ({ onClose, modelType = "" }: Props) => {
   const [type, setType] = useState(modelType);
   const dispatch = useDispatch();
   const history = useHistory();
-  const { pathname } = useLocation();
   const [model, updateModel] = useReducer(
     (prev: Partial<ContentModel>, next: any) => {
       const newModel = { ...prev, ...next };
@@ -105,7 +104,7 @@ export const CreateModelDialogue = ({ onClose, modelType = "" }: Props) => {
       type: modelType,
       description: "",
       parentZUID: null,
-      listed: true,
+      listed: modelType === "block" ? false : true,
     }
   );
 
@@ -206,9 +205,7 @@ export const CreateModelDialogue = ({ onClose, modelType = "" }: Props) => {
   useEffect(() => {
     // Only navigate to schema page once initial content is created for templateset & og_image field is created for block
     if ((isContentItemCreated || isOgImageFieldCreated) && createModelData) {
-      history.push(
-        `/${pathname?.split("/")?.[1] || "schema"}/${createModelData.data.ZUID}`
-      );
+      history.push(`/schema/${createModelData.data.ZUID}`);
       onClose();
     }
   }, [isContentItemCreated, createModelData, isOgImageFieldCreated]);
@@ -282,7 +279,18 @@ export const CreateModelDialogue = ({ onClose, modelType = "" }: Props) => {
                     data-cy={`model-type-${modelType.key}`}
                     selected={type === modelType.key}
                     key={modelType.key}
-                    onClick={() => setType(modelType.key)}
+                    onClick={() => {
+                      setType(modelType.key);
+                      if (modelType.key === "block") {
+                        updateModel({
+                          listed: false,
+                        });
+                      } else {
+                        updateModel({
+                          listed: true,
+                        });
+                      }
+                    }}
                     sx={{
                       borderRadius: "8px",
                       borderStyle: "solid",
@@ -492,7 +500,7 @@ export const CreateModelDialogue = ({ onClose, modelType = "" }: Props) => {
               <Box display="flex" gap={1}>
                 <Checkbox
                   sx={{ width: "24px", height: "24px" }}
-                  defaultChecked
+                  checked={!!model?.listed}
                   onChange={(event) =>
                     updateModel({ listed: event.target.checked })
                   }

diff --git a/src/apps/schema/src/app/components/DuplicateModelDialogue.tsx b/src/apps/schema/src/app/components/DuplicateModelDialogue.tsx
@@ -322,7 +322,7 @@ export const DuplicateModelDialogue = ({ onClose, model }: Props) => {
           <Box display="flex" gap={1}>
             <Checkbox
               sx={{ width: "24px", height: "24px" }}
-              defaultChecked
+              checked={!!model?.listed}
               onChange={(event) =>
                 updateNewModel({ listed: event.target.checked })
               }

diff --git a/src/apps/schema/src/app/views/AllModels.tsx b/src/apps/schema/src/app/views/AllModels.tsx
@@ -19,9 +19,8 @@ export const AllModels = () => {
   const triggerCreate = new URLSearchParams(location.search).get(
     "triggerCreate"
   );
-  const [showCreateModelDialogue, setShowCreateModelDialogue] = useState(
-    triggerCreate === "true" ? true : false
-  );
+  const [showCreateModelDialogue, setShowCreateModelDialogue] =
+    useState(triggerCreate);
   const searchRef = useRef(null);
 
   return (
@@ -77,7 +76,7 @@ export const AllModels = () => {
               variant="contained"
               size="small"
               startIcon={<AddRoundedIcon />}
-              onClick={() => setShowCreateModelDialogue(true)}
+              onClick={() => setShowCreateModelDialogue("true")}
               data-cy="create-model-button-all-models"
             >
               Create Model
@@ -91,9 +90,14 @@ export const AllModels = () => {
           />
         </Box>
       </Box>
-      {showCreateModelDialogue && (
+      {!!showCreateModelDialogue && (
         <CreateModelDialogue
-          onClose={() => setShowCreateModelDialogue(false)}
+          modelType={
+            showCreateModelDialogue !== "true"
+              ? showCreateModelDialogue
+              : undefined
+          }
+          onClose={() => setShowCreateModelDialogue("")}
         />
       )}
     </>