Stage Release

src/apps/content-editor/src/app/components/Editor/Field/Field.tsx

@@ -71,6 +71,7 @@ import {
 import { ResolvedOption } from "./ResolvedOption";
 import { LinkOption } from "./LinkOption";
 import { FieldTypeMedia } from "../../FieldTypeMedia";
+import { debounce } from "lodash";
 
 const AIFieldShell = withAI(FieldShell);
 
@@ -203,6 +204,22 @@ export const Field = ({
   const value = item?.data?.[name];
   const version = item?.meta?.version;
   const fieldData = fields?.find((field) => field.ZUID === ZUID);
+  const [inputValue, setInputValue] = useState(value || "");
+
+  const debouncedOnChange = useMemo(() => debounce(onChange, 300), [onChange]);
+
+  const deferredChange = useCallback(
+    (value, name) => {
+      setInputValue(value);
+      debouncedOnChange(value, name);
+    },
+    [debouncedOnChange]
+  );
+
+  // Keep local input value in sync with global field value
+  useEffect(() => {
+    setInputValue(value || "");
+  }, [value]);
 
   useEffect(() => {
     if (datatype !== "date" && datatype !== "datetime") {
@@ -288,7 +305,7 @@ export const Field = ({
           ZUID={fieldData?.ZUID}
           name={fieldData?.name || name}
           label={fieldData?.label || label}
-          valueLength={(value as string)?.length ?? 0}
+          valueLength={(inputValue as string)?.length ?? 0}
           settings={
             fieldData || {
               name: name,
@@ -304,11 +321,11 @@ export const Field = ({
           minLength={minLength}
           errors={errors}
           aiType="text"
-          value={value}
+          value={inputValue}
         >
           <TextField
-            value={value}
-            onChange={(evt) => onChange(evt.target.value, name)}
+            value={inputValue}
+            onChange={(evt) => deferredChange(evt.target.value, name)}
             fullWidth
             inputProps={{
               name: fieldData?.name || name,
@@ -322,12 +339,12 @@ export const Field = ({
       return (
         <FieldShell
           settings={fieldData}
-          valueLength={(value as string)?.length ?? 0}
+          valueLength={(inputValue as string)?.length ?? 0}
           errors={errors}
         >
           <TextField
-            value={value}
-            onChange={(evt) => onChange(evt.target.value, name)}
+            value={inputValue}
+            onChange={(evt) => deferredChange(evt.target.value, name)}
             fullWidth
             error={errors && Object.values(errors)?.some((error) => !!error)}
           />
@@ -338,14 +355,14 @@ export const Field = ({
       return (
         <FieldShell
           settings={fieldData}
-          valueLength={(value as string)?.length ?? 0}
+          valueLength={(inputValue as string)?.length ?? 0}
           errors={errors}
           maxLength={maxLength}
           withLengthCounter
         >
           <TextField
-            value={value}
-            onChange={(evt) => onChange(evt.target.value, name)}
+            value={inputValue}
+            onChange={(evt) => deferredChange(evt.target.value, name)}
             fullWidth
             type="url"
             error={errors && Object.values(errors)?.some((error) => !!error)}
@@ -377,7 +394,7 @@ export const Field = ({
           ZUID={fieldData?.ZUID}
           name={fieldData?.name}
           label={fieldData?.label}
-          valueLength={(value as string)?.length ?? 0}
+          valueLength={(inputValue as string)?.length ?? 0}
           settings={fieldData}
           onChange={(evt: ChangeEvent<HTMLInputElement>) =>
             onChange(evt.target.value, name)
@@ -387,11 +404,11 @@ export const Field = ({
           aiType="word"
           maxLength={maxLength}
           minLength={minLength}
-          value={value}
+          value={inputValue}
         >
           <TextField
-            value={value}
-            onChange={(evt) => onChange(evt.target.value, name)}
+            value={inputValue}
+            onChange={(evt) => deferredChange(evt.target.value, name)}
             fullWidth
             multiline
             rows={6}
@@ -424,7 +441,7 @@ export const Field = ({
               name={name}
               value={value}
               version={version}
-              onChange={onChange}
+              onChange={deferredChange}
               onSave={onSave}
               onCharacterCountChange={(charCount: number) =>
                 setCharacterCount(charCount)
@@ -448,22 +465,22 @@ export const Field = ({
             ZUID={fieldData?.ZUID}
             name={fieldData?.name}
             label={fieldData?.label}
-            valueLength={(value as string)?.length ?? 0}
+            valueLength={(inputValue as string)?.length ?? 0}
             settings={fieldData}
             onChange={onChange}
             errors={errors}
             aiType="word"
             datatype={fieldData?.datatype}
             editorType={editorType}
             onEditorChange={(value: EditorType) => setEditorType(value)}
-            value={value}
+            value={inputValue}
           >
             <FieldTypeEditor
               // @ts-ignore component not typed
               name={name}
-              value={value}
+              value={inputValue}
               version={version}
-              onChange={onChange}
+              onChange={deferredChange}
               datatype={datatype}
               mediaBrowser={(opts: any) => {
                 setImageModal(opts);
@@ -789,6 +806,7 @@ export const Field = ({
               relatedModelZUID={relatedModelZUID}
               relatedFieldZUID={relatedFieldZUID}
               onChange={onChange}
+              fieldLabel={fieldData?.label}
             />
             {/**
             <FieldTypeOneToOne
@@ -860,6 +878,7 @@ export const Field = ({
               relatedModelZUID={relatedModelZUID}
               relatedFieldZUID={relatedFieldZUID}
               onChange={onChange}
+              fieldLabel={fieldData?.label}
             />
             {/**
             <FieldTypeOneToMany
@@ -918,10 +937,10 @@ export const Field = ({
       return (
         <FieldShell settings={fieldData} errors={errors}>
           <FieldTypeNumber
-            value={+value || 0}
+            value={+inputValue || 0}
             name={name}
             required={required}
-            onChange={onChange}
+            onChange={deferredChange}
             hasError={errors && Object.values(errors)?.some((error) => !!error)}
           />
         </FieldShell>
@@ -937,8 +956,8 @@ export const Field = ({
           <FieldTypeCurrency
             name={name}
             currency={settings?.currency ?? "USD"}
-            value={String(value)}
-            onChange={onChange}
+            value={String(inputValue)}
+            onChange={deferredChange}
             error={errors && Object.values(errors)?.some((error) => !!error)}
           />
         </FieldShell>

src/apps/content-editor/src/app/views/ItemEdit/ItemEdit.js

@@ -57,6 +57,10 @@ import { FreestyleWrapper } from "./FreestyleWrapper";
 import { Meta } from "./Meta";
 import { FieldError } from "../../components/Editor/FieldError";
 import { AIGeneratorProvider } from "../../../../../../shell/components/withAi/AIGeneratorProvider";
+import {
+  fetchItemPublishings,
+  fetchItems,
+} from "../../../../../../shell/store/content";
 
 const selectItemHeadTags = createSelector(
   (state) => state.headTags,
@@ -416,6 +420,7 @@ export default function ItemEdit() {
     } finally {
       if (isMounted.current) {
         setSaving(false);
+        dispatch(fetchItemPublishings());
       }
     }
   }

src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/ItemEditHeaderActions.tsx

@@ -89,7 +89,7 @@ export const ItemEditHeaderActions = ({
   const [isConfirmPublishModalOpen, setIsConfirmPublishModalOpen] =
     useState(false);
   const [relatedItemsToPublish, setRelatedItemsToPublish] = useState<
-    ContentItem[]
+    ContentItemWithDirtyAndPublishing[]
   >([]);
   const [isPublishing, setIsPublishing] = useState(false);
   const item = useSelector(
@@ -184,10 +184,11 @@ export const ItemEditHeaderActions = ({
           if (!!item) {
             const draftVersion = item?.meta?.version;
             const publishedVersion = item?.publishing?.version || 0;
+            const scheduledVersion = item?.scheduling?.version || 0;
 
             if (
-              draftVersion > publishedVersion &&
-              !item?.scheduling?.isScheduled
+              draftVersion > publishedVersion ||
+              scheduledVersion > publishedVersion
             ) {
               return {
                 ...item,
@@ -225,45 +226,60 @@ export const ItemEditHeaderActions = ({
 
   const handlePublish = async () => {
     setIsPublishing(true);
-    // If item is scheduled, delete the scheduled publishing first
-    if (itemState === ITEM_STATES.scheduled) {
-      await deleteItemPublishing({
-        modelZUID,
-        itemZUID,
-        publishingZUID: item?.scheduling?.ZUID,
-      });
-    }
+    try {
+      // Delete scheduled publishings first
+      const deleteScheduledPromises = [
+        // Delete main item's scheduled publishing if it exists
+        itemState === ITEM_STATES.scheduled &&
+          deleteItemPublishing({
+            modelZUID,
+            itemZUID,
+            publishingZUID: item?.scheduling?.ZUID,
+          }),
+        // Delete related items' scheduled publishings if they exist
+        ...relatedItemsToPublish
+          .filter((item) => !!item.scheduling?.ZUID)
+          .map((item) =>
+            deleteItemPublishing({
+              modelZUID: item.meta.contentModelZUID,
+              itemZUID: item.meta.ZUID,
+              publishingZUID: item.scheduling.ZUID,
+            })
+          ),
+      ].filter((item) => !!item);
+
+      await Promise.all(deleteScheduledPromises);
 
-    Promise.allSettled([
-      createPublishing({
-        modelZUID,
-        itemZUID,
-        body: {
-          version: item?.meta.version,
-          publishAt: "now",
-          unpublishAt: "never",
-        },
-      }),
-      relatedItemsToPublish.map((item) => {
-        return createPublishing({
-          modelZUID: item.meta.contentModelZUID,
-          itemZUID: item.meta.ZUID,
+      // Proceed with publishing
+      await Promise.allSettled([
+        createPublishing({
+          modelZUID,
+          itemZUID,
           body: {
-            version: item.meta.version,
+            version: item?.meta.version,
             publishAt: "now",
             unpublishAt: "never",
           },
-        });
-      }),
-    ])
-      .then(() => {
-        // Retain non rtk-query fetch of item publishing for legacy code
-        dispatch(fetchItemPublishings());
-      })
-      .finally(() => {
-        setIsPublishing(false);
-        setIsConfirmPublishModalOpen(false);
-      });
+        }),
+        ...relatedItemsToPublish.map((item) =>
+          createPublishing({
+            modelZUID: item.meta.contentModelZUID,
+            itemZUID: item.meta.ZUID,
+            body: {
+              version: item.meta.version,
+              publishAt: "now",
+              unpublishAt: "never",
+            },
+          })
+        ),
+      ]);
+
+      // Retain non rtk-query fetch of item publishing for legacy code
+      dispatch(fetchItemPublishings());
+    } finally {
+      setIsPublishing(false);
+      setIsConfirmPublishModalOpen(false);
+    }
   };
 
   const handleUnpublish = async () => {
@@ -649,15 +665,15 @@ export const ItemEditHeaderActions = ({
               <Typography variant="body2" fontWeight={600}>
                 Also publish related items
               </Typography>
-              <Typography variant="body3">
+              <Typography variant="body3" color="text.secondary">
                 This will publish all items selected in the list below
               </Typography>
               <List disablePadding sx={{ mt: 1 }}>
                 {unpublishedRelatedItems.map((item, index) => (
                   <UnpublishedRelatedItem
                     key={item.meta.ZUID}
                     contentItem={item}
-                    divider={unpublishedRelatedItems?.length > index + 1}
+                    divider
                     selected={relatedItemsToPublish.some(
                       (i) => i.meta.ZUID === item.meta.ZUID
                     )}

src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/UnpublishedRelatedItem.tsx

@@ -23,7 +23,7 @@ type UnpublishedRelatedItemProps = {
   contentItem: ContentItemWithRelatedZUIDs;
   onChange: (payload: {
     action: "add" | "remove";
-    contentItem: ContentItem;
+    contentItem: ContentItemWithDirtyAndPublishing;
   }) => void;
   selected: boolean;
   divider?: boolean;
@@ -79,15 +79,27 @@ export const UnpublishedRelatedItem = ({
 
   return (
     <ListItem disableGutters dense divider={divider}>
-      <ListItemIcon>
+      <ListItemIcon
+        sx={{
+          minWidth: 0,
+        }}
+      >
         <Checkbox
           checked={selected}
+          disableRipple
           onChange={(evt) =>
             onChange({
               contentItem,
               action: evt.target.checked ? "add" : "remove",
             })
           }
+          sx={{
+            pl: 0,
+            pr: 2,
+            "&:hover": {
+              bgcolor: "transparent",
+            },
+          }}
         />
       </ListItemIcon>
       {!!imageFieldName &&