From 4b414b10548b7f88b88d02f79c2be19800253092 Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Thu, 22 May 2025 09:49:35 +0800
Subject: [PATCH 1/5] Enable button by default, remove none option and add
 error handling when clicking create without selecting a model

---
 .../components/CreateContentItemDialog.tsx    | 39 ++++++++++++-------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/shell/components/CreateContentItemDialog.tsx b/src/shell/components/CreateContentItemDialog.tsx
index b0832861b..03bcb2fe9 100644
--- a/src/shell/components/CreateContentItemDialog.tsx
+++ b/src/shell/components/CreateContentItemDialog.tsx
@@ -34,10 +34,8 @@ export const CreateContentItemDialog = ({
 }: Props) => {
   const { data: models } = useGetContentModelsQuery();
   const history = useHistory();
-  const [selectedModel, setSelectedModel] = useState({
-    label: "None",
-    ZUID: "",
-  });
+  const [selectedModel, setSelectedModel] = useState(null);
+  const [hasError, setHasError] = useState(false);
 
   const sortedModels = useMemo(() => {
     if (models?.length) {
@@ -65,8 +63,12 @@ export const CreateContentItemDialog = ({
   }, [models, limitTo]);
 
   const onCreateClick = () => {
-    onClose();
-    history.push("/content/" + selectedModel.ZUID + "/new");
+    if (!selectedModel?.ZUID) {
+      setHasError(true);
+    } else {
+      onClose();
+      history.push("/content/" + selectedModel.ZUID + "/new");
+    }
   };
 
   return (
@@ -101,6 +103,7 @@ export const CreateContentItemDialog = ({
         <InputLabel sx={{ mb: 0.5 }}>Select Model</InputLabel>
         <Autocomplete
           data-cy="create_new_content_item_input"
+          openOnFocus
           size="small"
           fullWidth
           value={selectedModel}
@@ -108,10 +111,6 @@ export const CreateContentItemDialog = ({
           options={
             sortedModels
               ? [
-                  {
-                    label: "None",
-                    ZUID: "",
-                  },
                   {
                     label: "Internal/External Link",
                     ZUID: "link",
@@ -120,10 +119,25 @@ export const CreateContentItemDialog = ({
                 ]
               : []
           }
-          renderInput={(params) => <TextField {...params} hiddenLabel />}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              placeholder="Select"
+              hiddenLabel
+              autoFocus
+              error={hasError}
+              helperText={hasError && "Please select a Model to proceed."}
+            />
+          )}
           getOptionLabel={(option: any) => option.label}
           isOptionEqualToValue={(option, value) => option.ZUID === value.ZUID}
-          onChange={(event, newValue) => setSelectedModel(newValue)}
+          onChange={(event, newValue) => {
+            if (!!newValue?.ZUID) {
+              setHasError(false);
+            }
+
+            setSelectedModel(newValue);
+          }}
           onKeyDown={(evt) => {
             if (evt.key.toLowerCase() === "enter" && !!selectedModel?.ZUID) {
               evt.preventDefault();
@@ -145,7 +159,6 @@ export const CreateContentItemDialog = ({
           data-cy="create_new_content_item_btn"
           variant="contained"
           color="primary"
-          disabled={!selectedModel.ZUID}
           onClick={onCreateClick}
         >
           Create

From a7c08c79474ae7c0faeedd773a81012b8d8a3cb4 Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Thu, 22 May 2025 09:50:07 +0800
Subject: [PATCH 2/5] remove unused imports

---
 src/shell/components/CreateContentItemDialog.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/shell/components/CreateContentItemDialog.tsx b/src/shell/components/CreateContentItemDialog.tsx
index 03bcb2fe9..38434227c 100644
--- a/src/shell/components/CreateContentItemDialog.tsx
+++ b/src/shell/components/CreateContentItemDialog.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import {
   Box,
   Button,
@@ -10,12 +10,9 @@ import {
   InputLabel,
   Autocomplete,
   Typography,
-  Avatar,
 } from "@mui/material";
 import EditRoundedIcon from "@mui/icons-material/EditRounded";
 import { useHistory } from "react-router";
-import { ThemeProvider } from "@mui/material/styles";
-import { theme } from "@zesty-io/material";
 import { cloneDeep } from "lodash";
 
 import { useGetContentModelsQuery } from "../services/instance";

From 497b4b88fdfad136ae437ac407477ec128e0857b Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Thu, 22 May 2025 09:54:27 +0800
Subject: [PATCH 3/5] Add error handling for create item without model
 selection

---
 cypress/e2e/content/navigation.spec.js           | 7 +++++++
 src/shell/components/CreateContentItemDialog.tsx | 6 +++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/cypress/e2e/content/navigation.spec.js b/cypress/e2e/content/navigation.spec.js
index d130ed4b2..fcc3f08e1 100644
--- a/cypress/e2e/content/navigation.spec.js
+++ b/cypress/e2e/content/navigation.spec.js
@@ -19,6 +19,13 @@ describe("Navigation through content editor", () => {
     cy.get(".ModalAligner--ptdt-.Open--M5j6S button.Close--kVpCO").click();
   });
 
+  it("Should not navigate to the create item page if no model is selected", () => {
+    cy.getBySelector("create_new_content_item").should("exist").click();
+    cy.getBySelector("create_new_content_item_btn").click({ force: true });
+    cy.contains("Please select a Model to proceed.").should("exist");
+    cy.getBySelector("discard_new_content_item_btn").should("exist").click();
+  });
+
   it("Creates a new item from the menu", () => {
     cy.getBySelector("create_new_content_item").should("exist").click();
     cy.getBySelector("create_new_content_item_dialog").should("exist");
diff --git a/src/shell/components/CreateContentItemDialog.tsx b/src/shell/components/CreateContentItemDialog.tsx
index 38434227c..95cfec766 100644
--- a/src/shell/components/CreateContentItemDialog.tsx
+++ b/src/shell/components/CreateContentItemDialog.tsx
@@ -149,7 +149,11 @@ export const CreateContentItemDialog = ({
         />
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} color="inherit">
+        <Button
+          data-cy="discard_new_content_item_btn"
+          onClick={onClose}
+          color="inherit"
+        >
           Discard
         </Button>
         <Button

From 7b00a670be065790b158a684e014feb4e3dc25f8 Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Thu, 22 May 2025 10:52:21 +0800
Subject: [PATCH 4/5] Add fallback values for primary text

---
 .../components/ItemEditHeader/UnpublishedRelatedItem.tsx      | 3 ++-
 .../src/app/views/ItemList/DialogContentItem.tsx              | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/UnpublishedRelatedItem.tsx b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/UnpublishedRelatedItem.tsx
index 072f4419a..8125bafa7 100644
--- a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/UnpublishedRelatedItem.tsx
+++ b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/UnpublishedRelatedItem.tsx
@@ -140,7 +140,8 @@ export const UnpublishedRelatedItem = ({
         primary={
           fieldValue ||
           contentItem?.web?.metaTitle ||
-          contentItem?.web?.metaLinkText
+          contentItem?.web?.metaLinkText ||
+          contentItem?.meta?.ZUID
         }
         secondary={contentItem?.web?.metaDescription}
         primaryTypographyProps={{
diff --git a/src/apps/content-editor/src/app/views/ItemList/DialogContentItem.tsx b/src/apps/content-editor/src/app/views/ItemList/DialogContentItem.tsx
index 023a34f05..40cd838e3 100644
--- a/src/apps/content-editor/src/app/views/ItemList/DialogContentItem.tsx
+++ b/src/apps/content-editor/src/app/views/ItemList/DialogContentItem.tsx
@@ -102,7 +102,9 @@ export const DialogContentItem = ({ item }: DialogContentItemProps) => {
           secondaryTypographyProps={{
             noWrap: true,
           }}
-          primary={item?.web?.metaTitle}
+          primary={
+            item?.web?.metaTitle || item?.web?.metaLinkText || item?.meta?.ZUID
+          }
           secondary={item?.web?.metaDescription}
         />
       </ListItem>

From 59e4956bcc52e60b6923da2bbffa18320d471d55 Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Thu, 22 May 2025 13:21:48 +0800
Subject: [PATCH 5/5] Updated the logic to determine how the hero image is
 selected

---
 .../app/views/ItemList/DialogContentItem.tsx  | 112 ++++++++++--------
 1 file changed, 65 insertions(+), 47 deletions(-)

diff --git a/src/apps/content-editor/src/app/views/ItemList/DialogContentItem.tsx b/src/apps/content-editor/src/app/views/ItemList/DialogContentItem.tsx
index 40cd838e3..e27d7e1ac 100644
--- a/src/apps/content-editor/src/app/views/ItemList/DialogContentItem.tsx
+++ b/src/apps/content-editor/src/app/views/ItemList/DialogContentItem.tsx
@@ -36,62 +36,29 @@ export const DialogContentItem = ({ item }: DialogContentItemProps) => {
     bins?.map((bin) => bin.id),
     { skip: !bins?.length }
   );
+
+  const imageFields = useMemo(() => {
+    if (!fields?.length) return [];
+
+    return fields?.filter((field) => field.datatype === "images");
+  }, [fields]);
+
   const heroImage = useMemo(() => {
-    let image = (
-      item?.data?.[
-        fields?.find((field) => field.datatype === "images")?.name
-      ] as string
-    )?.split(",")?.[0];
+    if (!imageFields?.length || !item?.data) return null;
+
+    let image = String(item.data[imageFields[0]?.name])?.split(",")?.[0];
+
     if (image?.startsWith("3-")) {
       image = files?.find((file) => file.id === image)?.thumbnail;
     }
 
     return image;
-  }, [fields, item, files]);
+  }, [imageFields, item, files]);
 
   return (
     <List disablePadding>
-      <ListItem dense disableGutters divider>
-        {!!heroImage ? (
-          <ListItemAvatar>
-            <Avatar
-              sx={{
-                width: 40,
-                height: 40,
-                borderRadius: 1,
-                backgroundColor: (theme) => theme.palette.grey[100],
-              }}
-              src={heroImage}
-              imgProps={{
-                style: {
-                  objectFit: "contain",
-                },
-              }}
-            >
-              <Typography variant="body2" color="text.secondary">
-                NA
-              </Typography>
-            </Avatar>
-          </ListItemAvatar>
-        ) : (
-          <Stack
-            sx={{
-              backgroundColor: "grey.100",
-              width: 40,
-              height: 40,
-              minWidth: 40,
-              minHeight: 40,
-              alignItems: "center",
-              justifyContent: "center",
-              overflow: "hidden",
-              mr: 2,
-              my: 0.5,
-              borderRadius: 1,
-            }}
-          >
-            <ImageRounded fontSize="small" color="action" />
-          </Stack>
-        )}
+      <ListItem dense disableGutters divider sx={{ minHeight: 49 }}>
+        {!!imageFields?.length && <HeroImage imageURL={heroImage} />}
         <ListItemText
           primaryTypographyProps={{
             variant: "body2",
@@ -106,8 +73,59 @@ export const DialogContentItem = ({ item }: DialogContentItemProps) => {
             item?.web?.metaTitle || item?.web?.metaLinkText || item?.meta?.ZUID
           }
           secondary={item?.web?.metaDescription}
+          sx={{ ml: !imageFields?.length ? 2 : 0 }}
         />
       </ListItem>
     </List>
   );
 };
+
+type HeroImageProps = {
+  imageURL: string;
+};
+const HeroImage = ({ imageURL }: HeroImageProps) => {
+  if (imageURL) {
+    return (
+      <ListItemAvatar>
+        <Avatar
+          sx={{
+            width: 40,
+            height: 40,
+            borderRadius: 1,
+            backgroundColor: (theme) => theme.palette.grey[100],
+          }}
+          src={imageURL}
+          imgProps={{
+            style: {
+              objectFit: "contain",
+            },
+          }}
+        >
+          <Typography variant="body2" color="text.secondary">
+            NA
+          </Typography>
+        </Avatar>
+      </ListItemAvatar>
+    );
+  }
+
+  return (
+    <Stack
+      sx={{
+        backgroundColor: "grey.100",
+        width: 40,
+        height: 40,
+        minWidth: 40,
+        minHeight: 40,
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+        mr: 2,
+        my: 0.5,
+        borderRadius: 1,
+      }}
+    >
+      <ImageRounded fontSize="small" color="action" />
+    </Stack>
+  );
+};