Feature: Schema Enhancements (#2178)

* fix: add dynamic spacing bellow end of list button

* task: show placeholder when no values are available

* task: change dropdown menu icon

* task: add duplicate and delete buttons on model details tab

* task: add last modified sorting

* task: change label to display label

* task: fontweight update

Author: finnar-bin

src/apps/media/src/app/components/Header.tsx

@@ -11,7 +11,7 @@ import {
   Stack,
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import MoreHorizRoundedIcon from "@mui/icons-material/MoreHorizRounded";
 import CreateNewFolderIcon from "@mui/icons-material/CreateNewFolder";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
@@ -301,7 +301,7 @@ export const Header = ({
                   sx={{ height: "fit-content" }}
                   aria-label="Open folder menu"
                 >
-                  <ArrowDropDownRoundedIcon fontSize="small" />
+                  <MoreHorizRoundedIcon fontSize="small" />
                 </IconButton>
               ) : null}
               <Menu anchorEl={anchorEl} open={open} onClose={closeMenu}>

src/apps/media/src/app/components/Sidebar/index.tsx

@@ -30,7 +30,7 @@ export const Sidebar = ({ lockedToGroupId, isSelectDialog }: Props) => {
           pb: 1,
         }}
       >
-        <Typography variant="h4">
+        <Typography variant="h4" fontWeight={600}>
           {isSelectDialog && "Insert from"} Media
         </Typography>
         <SearchBox />

src/apps/schema/src/app/components/FieldList.tsx

@@ -215,7 +215,7 @@ export const FieldList = ({ onNewFieldModalClick }: Props) => {
               borderBottom="1px solid"
               borderColor="grey.200"
             >
-              <Typography variant="h6" mb={1}>
+              <Typography variant="h6" mb={1} fontWeight={600}>
                 System Fields
               </Typography>
               <Typography variant="body2" color="text.secondary">
@@ -309,7 +309,7 @@ export const FieldList = ({ onNewFieldModalClick }: Props) => {
                   </Box>
                 );
               })}
-              <Box pl={3}>
+              <Box pl={3} mb={!!deactivatedFields?.length ? 2 : 4}>
                 <Button
                   data-cy="EndOfListAddFieldBtn"
                   sx={{
@@ -350,13 +350,7 @@ export const FieldList = ({ onNewFieldModalClick }: Props) => {
 
           {/* INACTIVE FIELDS ARE PRESENT */}
           {Boolean(deactivatedFields?.length) && !search && (
-            <Box
-              mb={2}
-              mt={1.5}
-              display="flex"
-              flexDirection="column"
-              gap={1.5}
-            >
+            <Box mb={2} display="flex" flexDirection="column" gap={1.5}>
               <Box pl={3}>
                 <Typography variant="h6" mb={1}>
                   Deactivated Fields

src/apps/schema/src/app/components/ModelHeader.tsx

@@ -20,12 +20,11 @@ import {
   useGetWebViewsQuery,
 } from "../../../../../shell/services/instance";
 import AddRoundedIcon from "@mui/icons-material/AddRounded";
-import PostAddRoundedIcon from "@mui/icons-material/PostAddRounded";
 import moment from "moment";
 import SplitscreenRoundedIcon from "@mui/icons-material/SplitscreenRounded";
 import InfoRoundedIcon from "@mui/icons-material/InfoRounded";
 import CodeRoundedIcon from "@mui/icons-material/CodeRounded";
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import MoreHorizRoundedIcon from "@mui/icons-material/MoreHorizRounded";
 import DeleteRoundedIcon from "@mui/icons-material/DeleteRounded";
 import DriveFileRenameOutlineRoundedIcon from "@mui/icons-material/DriveFileRenameOutlineRounded";
 import ContentCopyRoundedIcon from "@mui/icons-material/ContentCopyRounded";
@@ -114,7 +113,7 @@ export const ModelHeader = ({ onNewFieldModalClick }: Props) => {
                 sx={{ height: "fit-content" }}
                 data-cy="model-header-menu"
               >
-                <ArrowDropDownRoundedIcon fontSize="small" />
+                <MoreHorizRoundedIcon fontSize="small" />
               </IconButton>
               <Menu
                 anchorEl={anchorEl}

src/apps/schema/src/app/components/ModelInfo/ModelDetails.tsx

@@ -1,5 +1,8 @@
 import { Box, Tooltip, Typography, Button } from "@mui/material";
 import InfoRoundedIcon from "@mui/icons-material/InfoRounded";
+import ContentCopyRoundedIcon from "@mui/icons-material/ContentCopyRounded";
+import DeleteRoundedIcon from "@mui/icons-material/DeleteRounded";
+
 import {
   useGetContentModelsQuery,
   useGetContentNavItemsQuery,
@@ -9,6 +12,8 @@ import { useState } from "react";
 import { RenameModelDialogue } from "../RenameModelDialogue";
 import { UpdateDescriptionModelDialogue } from "../UpdateDescriptionModelDialogue";
 import { UpdateParentModelDialogue } from "../UpdateParentModelDialogue";
+import { DeleteModelDialogue } from "../DeleteModelDialogue";
+import { DuplicateModelDialogue } from "../DuplicateModelDialogue";
 
 type Params = {
   id: string;
@@ -27,7 +32,12 @@ export const ModelDetails = () => {
     (navItem) => navItem.ZUID === model?.parentZUID
   );
   const [showDialogue, setShowDialogue] = useState<
-    "rename" | "updateDescription" | "updateParent" | null
+    | "rename"
+    | "updateDescription"
+    | "updateParent"
+    | "duplicate"
+    | "delete"
+    | null
   >(null);
   const [isCopied, setIsCopied] = useState("");
 
@@ -114,7 +124,11 @@ export const ModelDetails = () => {
             </Tooltip>
           </Box>
           <Box flex={1} py={2}>
-            <Typography>{model?.description}</Typography>
+            {!!model?.description ? (
+              <Typography>{model.description}</Typography>
+            ) : (
+              <Typography color="text.disabled">None</Typography>
+            )}
           </Box>
           <Box py={1.5}>
             <Button
@@ -197,7 +211,11 @@ export const ModelDetails = () => {
             </Tooltip>
           </Box>
           <Box flex={1} py={2}>
-            <Typography>{parentModel?.label}</Typography>
+            {!!parentModel?.label ? (
+              <Typography>{parentModel.label}</Typography>
+            ) : (
+              <Typography color="text.disabled">None</Typography>
+            )}
           </Box>
           <Box display="flex" py={1.5}>
             <Button
@@ -258,6 +276,26 @@ export const ModelDetails = () => {
             </Button>
           </Box>
         </Box>
+        <Box display="flex" alignItems="center" pt={2} gap={2}>
+          <Button
+            size="large"
+            color="inherit"
+            variant="outlined"
+            startIcon={<ContentCopyRoundedIcon color="action" />}
+            onClick={() => setShowDialogue("duplicate")}
+          >
+            Duplicate Model
+          </Button>
+          <Button
+            size="large"
+            color="error"
+            variant="outlined"
+            startIcon={<DeleteRoundedIcon />}
+            onClick={() => setShowDialogue("delete")}
+          >
+            Delete Model
+          </Button>
+        </Box>
       </Box>
       {showDialogue === "rename" && (
         <RenameModelDialogue
@@ -277,6 +315,18 @@ export const ModelDetails = () => {
           model={model}
         />
       )}
+      {showDialogue === "duplicate" && (
+        <DuplicateModelDialogue
+          model={model}
+          onClose={() => setShowDialogue(null)}
+        />
+      )}
+      {showDialogue === "delete" && (
+        <DeleteModelDialogue
+          model={model}
+          onClose={() => setShowDialogue(null)}
+        />
+      )}
     </>
   );
 };

src/apps/schema/src/app/components/Sidebar/ModelList.tsx

@@ -11,6 +11,8 @@ import {
 } from "@mui/material";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import AddIcon from "@mui/icons-material/Add";
+import moment from "moment";
+
 import { ContentModel } from "../../../../../../shell/services/types";
 import { useHistory, useLocation } from "react-router";
 import { useMemo, useState } from "react";
@@ -45,10 +47,15 @@ export const ModelList = ({ title, models, type }: Props) => {
   const sortedModels = useMemo(() => {
     if (!sort) return [...models].reverse();
     return [...models].sort((a, b) => {
-      if (sort === "asc") {
-        return a.label.localeCompare(b.label);
-      } else {
-        return b.label.localeCompare(a.label);
+      switch (sort) {
+        case "asc":
+          return a.label.localeCompare(b.label);
+
+        case "desc":
+          return b.label.localeCompare(a.label);
+
+        case "modified":
+          return moment(b.updatedAt).diff(moment(a.updatedAt));
       }
     });
   }, [sort, models]);
@@ -147,6 +154,14 @@ export const ModelList = ({ title, models, type }: Props) => {
           >
             Last Created
           </MenuItem>
+          <MenuItem
+            onClick={() => {
+              handleClose();
+              setSort("modified");
+            }}
+          >
+            Last Modified
+          </MenuItem>
         </Menu>
       </Box>
       {showCreateModelDialogue && (

src/apps/schema/src/app/components/configs.ts

@@ -216,7 +216,7 @@ const FIELD_COPY_CONFIG: { [key: string]: FieldListData[] } = {
       type: "datetime",
       name: "Date & Time",
       shortDescription: "Track dates along with specific times",
-      description: `This field is for when you want the input to be a data and time. You can customize whether a user can enter a time, day, month, or year or all 4. 
+      description: `This field is for when you want the input to be a data and time. You can customize whether a user can enter a time, day, month, or year or all 4.
 
       Zesty automatically tracks dates and times for date created, date published, and date modified so no additional fields need to be created for these.`,
       commonUses: [
@@ -334,7 +334,7 @@ const COMMON_FIELDS: InputField[] = [
   {
     name: "label",
     type: "input",
-    label: "Label",
+    label: "Display Label",
     required: true,
     fullWidth: true,
     maxLength: 200,