Feature: Sidebar parent model update (#2291)

* task: add update model component to sidebar

* task: save parent model changes

* task: enable deselecting parent model

* task: tooltip string prop

* task: fix ts error

Author: finnar-bin

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

@@ -367,6 +367,7 @@ export const CreateModelDialogue = ({ onClose, modelType = "" }: Props) => {
                     parentZUID: value,
                   })
                 }
+                tooltip="Selecting a parent affects default routing and content navigation in the UI"
               />
               <Box>
                 <InputLabel>

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

@@ -8,6 +8,7 @@ import {
   Typography,
   Link,
   Tooltip,
+  Select,
 } from "@mui/material";
 import SaveRoundedIcon from "@mui/icons-material/SaveRounded";
 import LoadingButton from "@mui/lab/LoadingButton";
@@ -16,6 +17,7 @@ import CheckIcon from "@mui/icons-material/Check";
 import InfoRoundedIcon from "@mui/icons-material/InfoRounded";
 import { ContentModel } from "../../../../../shell/services/types";
 import { useUpdateContentModelMutation } from "../../../../../shell/services/instance";
+import { SelectModelParentInput } from "./SelectModelParentInput";
 
 interface Props {
   model: ContentModel;
@@ -24,15 +26,31 @@ interface Props {
 export const FieldsListRight = ({ model }: Props) => {
   const [description, setDescription] = useState("");
   const [isCopied, setIsCopied] = useState(null);
+  const [newParentZUID, setNewParentZUID] = useState(null);
+  const [showSaveParentModelButton, setshowSaveParentModelButton] =
+    useState(false);
 
-  const [updateContentModel, { isLoading }] = useUpdateContentModelMutation();
+  useEffect(() => {
+    if (model?.parentZUID) {
+      setNewParentZUID(model.parentZUID === "0" ? null : model.parentZUID);
+    }
+  }, [model]);
+
+  const [updateContentModel, { isLoading, isSuccess }] =
+    useUpdateContentModelMutation();
 
   useEffect(() => {
     if (model?.description) {
       setDescription(model?.description || "");
     }
   }, [model]);
 
+  useEffect(() => {
+    if (isSuccess) {
+      setshowSaveParentModelButton(false);
+    }
+  }, [isSuccess]);
+
   const handleCopyClick = (data: string) => {
     navigator?.clipboard
       ?.writeText(data)
@@ -47,11 +65,28 @@ export const FieldsListRight = ({ model }: Props) => {
       });
   };
 
-  const handleSave = () => {
-    const body = {
-      ...model,
-      description,
-    };
+  const handleSave = (type: "description" | "parentZUID") => {
+    let body = { ...model };
+
+    switch (type) {
+      case "description":
+        body = {
+          ...body,
+          description,
+        };
+        break;
+
+      case "parentZUID":
+        body = {
+          ...body,
+          parentZUID: newParentZUID ?? "0",
+        };
+        break;
+
+      default:
+        break;
+    }
+
     updateContentModel({
       ZUID: model.ZUID,
       body,
@@ -140,6 +175,29 @@ export const FieldsListRight = ({ model }: Props) => {
           ),
         }}
       />
+      <Box mt={3}>
+        <SelectModelParentInput
+          modelType={model?.type}
+          value={newParentZUID}
+          onChange={(value) => {
+            setshowSaveParentModelButton(value !== model?.parentZUID);
+            setNewParentZUID(value);
+          }}
+          label="Model Parent"
+        />
+        {showSaveParentModelButton && (
+          <LoadingButton
+            color="primary"
+            loading={isLoading}
+            variant="contained"
+            onClick={() => handleSave("parentZUID")}
+            sx={{ mt: 1.5 }}
+          >
+            Save
+          </LoadingButton>
+        )}
+      </Box>
+
       <InputLabel sx={{ mt: 3 }}>
         Description
         <Tooltip
@@ -166,7 +224,7 @@ export const FieldsListRight = ({ model }: Props) => {
           startIcon={<SaveRoundedIcon />}
           loadingPosition="start"
           variant="contained"
-          onClick={handleSave}
+          onClick={() => handleSave("description")}
           sx={{ mt: 1.5 }}
         >
           Save

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

@@ -14,12 +14,16 @@ type SelectModelParentInputProps = {
   value: string;
   onChange: (value: string) => void;
   modelType: ModelType;
+  label?: string;
+  tooltip?: string;
 };
 
 export const SelectModelParentInput = ({
   value,
   onChange,
   modelType,
+  label = "Select Model Parent",
+  tooltip = "",
 }: SelectModelParentInputProps) => {
   const { data: navItems } = useGetContentNavItemsQuery();
 
@@ -43,16 +47,15 @@ export const SelectModelParentInput = ({
   return (
     <Box>
       <InputLabel>
-        Select Model Parent
-        <Tooltip
-          placement="top"
-          title="Selecting a parent affects default routing and content navigation in the UI"
-        >
-          <InfoRoundedIcon
-            sx={{ ml: 1, width: "10px", height: "10px" }}
-            color="action"
-          />
-        </Tooltip>
+        {label}
+        {tooltip && (
+          <Tooltip placement="top" title={tooltip}>
+            <InfoRoundedIcon
+              sx={{ ml: 1, width: "10px", height: "10px" }}
+              color="action"
+            />
+          </Tooltip>
+        )}
       </InputLabel>
       <Autocomplete
         fullWidth

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

@@ -81,6 +81,7 @@ export const UpdateParentModelDialogue = ({ onClose, model }: Props) => {
           modelType={model.type}
           value={newParentZUID}
           onChange={(value) => setNewParentZUID(value)}
+          tooltip="Selecting a parent affects default routing and content navigation in the UI"
         />
       </DialogContent>
       <DialogActions>