slice-machine-ui 1.22.2-alpha.xru-auto-save-type-builder.5 → 1.22.2-beta.10

package/components/Forms/CreateSliceModal/CreateSliceModal.tsx

@@ -15,7 +15,10 @@ import { InputBox } from "../components/InputBox";
 
 type CreateSliceModalProps = {
   onClose: () => void;
-  onSuccess: (newSlice: SharedSlice, libraryName: string) => void;
+  onSuccess: (
+    newSlice: SharedSlice,
+    libraryName: string,
+  ) => Promise<void> | void;
   localLibraries: readonly LibraryUI[];
   remoteSlices: ReadonlyArray<SliceSM>;
 };
@@ -46,7 +49,7 @@ export const CreateSliceModal: FC<CreateSliceModalProps> = ({
         // Update Redux store
         createSliceSuccess(serverState.libraries);
 
-        onSuccess(newSlice, libraryName);
+        await onSuccess(newSlice, libraryName);
       },
     });
   };

package/components/Forms/RenameCustomTypeModal/RenameCustomTypeModal.tsx

@@ -6,14 +6,13 @@ import { InputBox } from "../components/InputBox";
 import { useSelector } from "react-redux";
 import { SliceMachineStoreType } from "@src/redux/type";
 import { FormikErrors } from "formik";
-
 import { selectAllCustomTypeLabels } from "@src/modules/availableCustomTypes";
+
 import { CustomType } from "@prismicio/types-internal/lib/customtypes";
 import { CustomTypeFormat } from "@slicemachine/manager";
 import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
 
 import { renameCustomType } from "@src/features/customTypes/actions/renameCustomType";
-import { useCustomTypeState } from "@src/features/customTypes/customTypesBuilder/CustomTypeProvider";
 
 interface RenameCustomTypeModalProps {
   isChangesLocal: boolean;
@@ -30,18 +29,15 @@ export const RenameCustomTypeModal: React.FC<RenameCustomTypeModalProps> = ({
 }) => {
   const customTypeName = customType?.label ?? "";
   const customTypeId = customType?.id ?? "";
-  const { renameAvailableCustomTypeSuccess } = useSliceMachineActions();
-  const { setCustomType } = useCustomTypeState();
+  const { renameAvailableCustomTypeSuccess, renameSelectedCustomType } =
+    useSliceMachineActions();
 
   const [isRenaming, setIsRenaming] = useState(false);
 
   const handleOnSubmit = async (values: { customTypeName: string }) => {
     setIsRenaming(true);
     if (isChangesLocal) {
-      setCustomType({
-        ...customType,
-        label: values.customTypeName,
-      });
+      renameSelectedCustomType(values.customTypeName);
     } else {
       await renameCustomType({
         model: customType,

package/components/ItemHeader/index.tsx

@@ -22,7 +22,6 @@ const ItemHeader: React.FC<{
     />
     <Text
       as="p"
-      data-cy="item-header-text"
       sx={{
         py: 0,
         px: 1,

package/components/ListItem/index.tsx

@@ -34,7 +34,6 @@ interface ListItemProps<F extends TabField, S extends AnyObjectSchema> {
   CustomEditElements?: JSX.Element[];
   widget: Widget<F, S>;
   draggableId: string;
-  dataCy: string;
   isRepeatableCustomType?: boolean;
   children: React.ReactNode;
 }
@@ -51,7 +50,6 @@ function ListItem<F extends TabField, S extends AnyObjectSchema>({
   CustomEditElements,
   widget,
   draggableId,
-  dataCy,
   isRepeatableCustomType,
   children,
 }: ListItemProps<F, S>): JSX.Element {
@@ -68,7 +66,6 @@ function ListItem<F extends TabField, S extends AnyObjectSchema>({
         {(provided) => (
           <Fragment>
             <Li
-              data-cy={dataCy}
               ref={provided.innerRef}
               {...provided.draggableProps}
               Component={Box}
@@ -120,7 +117,7 @@ function ListItem<F extends TabField, S extends AnyObjectSchema>({
                         <SliceMachineIconButton
                           size={22}
                           Icon={AiOutlineEdit}
-                          label="Edit field"
+                          label="Edit slice field"
                           sx={{ cursor: "pointer", color: theme.colors?.icons }}
                           onClick={() =>
                             enterEditMode(
@@ -137,7 +134,7 @@ function ListItem<F extends TabField, S extends AnyObjectSchema>({
                           <Menu>
                             <MenuButton
                               className="sliceMenuButton"
-                              data-cy="field-menu-button"
+                              data-cy="slice-menu-button"
                               style={{
                                 padding: "0",
                                 cursor: "pointer",

package/lib/builders/CustomTypeBuilder/SliceZone/SlicesTemplatesModal.tsx

@@ -18,7 +18,7 @@ import { sliceTemplatesComingSoon } from "./sliceTemplatesComingSoon";
 interface UpdateSliceModalProps {
   formId: string;
   close: () => void;
-  onSuccess: (slices: SharedSlice[]) => void;
+  onSuccess: (slices: SharedSlice[]) => Promise<void>;
   availableSlicesTemplates: SliceTemplate[];
   localLibraries: readonly LibraryUI[];
 }
@@ -69,7 +69,7 @@ export const SlicesTemplatesModal: FC<UpdateSliceModalProps> = ({
                 ) as Promise<SharedSlice>[],
             );
 
-            onSuccess(slices);
+            await onSuccess(slices);
           },
         });
       }}

package/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModal.tsx

@@ -9,7 +9,7 @@ import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
 interface UpdateSliceModalProps {
   formId: string;
   close: () => void;
-  onSubmit: (slices: SharedSlice[]) => void;
+  onSubmit: (slices: SharedSlice[]) => Promise<void>;
   availableSlices: ReadonlyArray<ComponentUI>;
 }
 
@@ -37,7 +37,7 @@ const UpdateSliceZoneModal: React.FC<UpdateSliceModalProps> = ({
               availableSlices.find((s) => s.model.id === sliceKey)?.model,
           )
           .filter((slice) => slice !== undefined) as SharedSlice[];
-        onSubmit(slices);
+        void onSubmit(slices);
       }}
       initialValues={{
         sliceKeys: [],

package/lib/builders/CustomTypeBuilder/SliceZone/index.tsx

@@ -31,9 +31,9 @@ import {
 } from "@src/modules/slices";
 import type { SliceMachineStoreType } from "@src/redux/type";
 import { useSlicesTemplates } from "@src/features/slicesTemplates/useSlicesTemplates";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { addSlicesToSliceZone } from "@src/features/slices/actions/addSlicesToSliceZone";
 import { ToastMessageWithPath } from "@components/ToasterContainer";
-import { useCustomTypeState } from "@src/features/customTypes/customTypesBuilder/CustomTypeProvider";
 
 import { DeleteSliceZoneModal } from "./DeleteSliceZoneModal";
 import UpdateSliceZoneModal from "./UpdateSliceZoneModal";
@@ -121,8 +121,8 @@ const SliceZone: React.FC<SliceZoneProps> = ({
       slices: getFrontendSlices(store),
     }),
   );
-  const { setCustomType } = useCustomTypeState();
-
+  const { initCustomTypeStore, saveCustomTypeSuccess } =
+    useSliceMachineActions();
   const localLibraries: readonly LibraryUI[] = libraries.filter(
     (library) => library.isLocal,
   );
@@ -197,6 +197,14 @@ const SliceZone: React.FC<SliceZoneProps> = ({
     setIsSlicesTemplatesModalOpen(false);
   };
 
+  const onAddSlicesToSliceZone = (newCustomType: CustomTypeSM) => {
+    // Reset selected custom type store to update slice zone and saving status
+    initCustomTypeStore(newCustomType, newCustomType);
+
+    // Update available custom type store with new custom type
+    saveCustomTypeSuccess(CustomTypes.fromSM(newCustomType));
+  };
+
   return (
     <>
       {query.newPageType === undefined ? (
@@ -291,13 +299,13 @@ const SliceZone: React.FC<SliceZoneProps> = ({
         <UpdateSliceZoneModal
           formId={`tab-slicezone-form-${tabId}`}
           availableSlices={availableSlicesToAdd}
-          onSubmit={(slices: SharedSlice[]) => {
-            const newCustomType = addSlicesToSliceZone({
+          onSubmit={async (slices: SharedSlice[]) => {
+            const newCustomType = await addSlicesToSliceZone({
               customType,
               tabId,
               slices,
             });
-            setCustomType(CustomTypes.fromSM(newCustomType));
+            onAddSlicesToSliceZone(newCustomType);
             closeUpdateSliceZoneModal();
             redirectToEditMode();
             toast.success("Slice(s) added to slice zone");
@@ -310,13 +318,13 @@ const SliceZone: React.FC<SliceZoneProps> = ({
           formId={`tab-slicezone-form-${tabId}`}
           availableSlicesTemplates={availableSlicesTemplates}
           localLibraries={localLibraries}
-          onSuccess={(slices: SharedSlice[]) => {
-            const newCustomType = addSlicesToSliceZone({
+          onSuccess={async (slices: SharedSlice[]) => {
+            const newCustomType = await addSlicesToSliceZone({
               customType,
               tabId,
               slices,
             });
-            setCustomType(CustomTypes.fromSM(newCustomType));
+            onAddSlicesToSliceZone(newCustomType);
             closeSlicesTemplatesModal();
             redirectToEditMode();
             toast.success(
@@ -342,13 +350,13 @@ const SliceZone: React.FC<SliceZoneProps> = ({
       )}
       {localLibraries?.length !== 0 && isCreateSliceModalOpen && (
         <CreateSliceModal
-          onSuccess={(newSlice: SharedSlice) => {
-            const newCustomType = addSlicesToSliceZone({
+          onSuccess={async (newSlice: SharedSlice) => {
+            const newCustomType = await addSlicesToSliceZone({
               customType,
               tabId,
               slices: [newSlice],
             });
-            setCustomType(CustomTypes.fromSM(newCustomType));
+            onAddSlicesToSliceZone(newCustomType);
             closeCreateSliceModal();
             redirectToEditMode();
             toast.success(

package/lib/builders/CustomTypeBuilder/TabModal/update.tsx

@@ -10,13 +10,11 @@ const UpdateCustomTypeForm = ({
   onSubmit,
   close,
   tabIds,
-  initialTabKey,
 }: {
   isOpen: boolean;
   onSubmit: (values: { id: string }) => void;
   close: () => void;
   tabIds: ReadonlyArray<string>;
-  initialTabKey: string;
 }) => {
   return (
     <ModalFormCard
@@ -31,7 +29,7 @@ const UpdateCustomTypeForm = ({
         close();
       }}
       initialValues={{
-        id: initialTabKey,
+        id: "",
       }}
       validate={({ id }) => {
         if (!id) {

package/lib/builders/CustomTypeBuilder/TabZone/index.tsx

@@ -1,74 +1,67 @@
 import { Box, ErrorBoundary, ProgressCircle } from "@prismicio/editor-ui";
 import { FC, Suspense } from "react";
-import { flushSync } from "react-dom";
 import type { DropResult } from "react-beautiful-dnd";
+import { useSelector } from "react-redux";
 import type { AnyObjectSchema } from "yup";
 import { useRouter } from "next/router";
 
 import ctBuilderArray from "@lib/models/common/widgets/ctBuilderArray";
-import {
-  TabSM,
-  type TabField,
-  type TabFields,
-  CustomTypes,
-  TabFieldsModel,
+import type {
+  CustomTypeSM,
+  TabField,
+  TabFields,
 } from "@lib/models/common/CustomType";
-import type { AnyWidget } from "@lib/models/common/widgets/Widget";
+import type { SlicesSM } from "@lib/models/common/Slices";
 import { ensureDnDDestination, ensureWidgetTypeExistence } from "@lib/utils";
 import { List } from "@src/components/List";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import type { SliceMachineStoreType } from "@src/redux/type";
 import { telemetry } from "@src/apiClient";
 import { transformKeyAccessor } from "@utils/str";
-import { useCustomTypeState } from "@src/features/customTypes/customTypesBuilder/CustomTypeProvider";
-import {
-  createSectionSliceZone,
-  deleteSectionSliceZone,
-  deleteSliceZoneSlice,
-  addField,
-  deleteField,
-  reorderField,
-  updateField,
-} from "@src/domain/customType";
 
 import * as Widgets from "../../../../lib/models/common/widgets/withGroup";
+import { selectCurrentPoolOfFields } from "../../../../src/modules/selectedCustomType";
+import type { Widget } from "../../../models/common/widgets/Widget";
 import EditModal from "../../common/EditModal";
 import Zone from "../../common/Zone";
 import SliceZone from "../SliceZone";
-import {
-  Group,
-  NestableWidget,
-  UID,
-} from "@prismicio/types-internal/lib/customtypes";
 
 interface TabZoneProps {
+  customType: CustomTypeSM;
   tabId: string;
+  sliceZone?: SlicesSM | null | undefined;
+  fields: TabFields;
 }
 
-type PoolOfFields = ReadonlyArray<{ key: string; value: TabField }>;
-
-const TabZone: FC<TabZoneProps> = ({ tabId }) => {
-  const { customType, setCustomType } = useCustomTypeState();
-  const customTypeSM = CustomTypes.toSM(customType);
-  const sliceZone = customTypeSM.tabs.find((tab) => tab.key === tabId)
-    ?.sliceZone;
-  const fields: TabFields =
-    customTypeSM.tabs.find((tab) => tab.key === tabId)?.value ?? [];
+const TabZone: FC<TabZoneProps> = ({
+  customType,
+  tabId,
+  fields,
+  sliceZone,
+}) => {
+  const {
+    deleteCustomTypeField,
+    addCustomTypeField,
+    reorderCustomTypeField,
+    replaceCustomTypeField,
+    createSliceZone,
+    deleteSliceZone,
+    deleteCustomTypeSharedSlice,
+  } = useSliceMachineActions();
 
   const { query } = useRouter();
-  const poolOfFields = customTypeSM.tabs.reduce<PoolOfFields>(
-    (acc: PoolOfFields, curr: TabSM) => {
-      return [...acc, ...curr.value];
-    },
-    [],
-  );
 
-  const onDeleteItem = (fieldId: string) => {
-    const newCustomType = deleteField({
-      customType,
-      fieldId,
-      sectionId: tabId,
-    });
+  const { poolOfFields } = useSelector((store: SliceMachineStoreType) => ({
+    poolOfFields: selectCurrentPoolOfFields(store),
+  }));
 
-    setCustomType(newCustomType);
+  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+  if (!poolOfFields) {
+    return null;
+  }
+
+  const onDeleteItem = (fieldId: string) => {
+    deleteCustomTypeField(tabId, fieldId);
   };
 
   const onSaveNewField = ({
@@ -87,67 +80,27 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
     // @ts-expect-error We have to create a widget map or a service instead of using export name
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const widget: Widget<TabField, AnyObjectSchema> = Widgets[widgetTypeName];
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment
-    const field: TabField = widget.create(label);
-
-    if (
-      field.type === "Range" ||
-      field.type === "IntegrationFields" ||
-      field.type === "Separator"
-    ) {
-      throw new Error(`Unsupported Field Type: ${field.type}`);
-    }
-
-    const CurrentWidget: AnyWidget = Widgets[field.type];
-
-    try {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-      CurrentWidget.schema.validateSync(field, { stripUnknown: false });
-    } catch (error) {
-      throw new Error(`Add field: Model is invalid for field "${field.type}".`);
-    }
-
-    const newField: NestableWidget | UID | Group = TabFieldsModel.fromSM(field);
-    const newCustomType = addField({
-      customType,
-      newField,
-      newFieldId: id,
-      sectionId: tabId,
-    });
-
-    setCustomType(newCustomType);
-
     void telemetry.track({
       event: "custom-type:field-added",
       id,
       name: customType.id,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
       type: widget.TYPE_NAME,
       zone: "static",
     });
+    addCustomTypeField(tabId, id, widget.create(label));
   };
 
   const onDragEnd = (result: DropResult) => {
     if (ensureDnDDestination(result)) {
       return;
     }
-
-    const { source, destination } = result;
-    if (!destination) {
-      return;
-    }
-
-    const newCustomType = reorderField({
-      customType,
-      sourceIndex: source.index,
-      destinationIndex: destination.index,
-      sectionId: tabId,
-    });
-
-    // When removing redux and replacing it by a simple useState, react-beautiful-dnd (that is deprecated library) was making the fields flickering on reorder.
-    // The problem seems to come from the react non-synchronous way to handle our state update that didn't work well with the library.
-    // It's a hack and since it's used on an old pure JavaScript code with a deprecated library it will be removed when updating the UI of the fields.
-    flushSync(() => setCustomType(newCustomType));
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+    reorderCustomTypeField(
+      tabId,
+      result.source.index,
+      // @ts-expect-error We have to change the typeGuard above to cast properly the "result" property
+      result.destination.index,
+    );
   };
 
   const onSave = ({
@@ -164,39 +117,19 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
     if (ensureWidgetTypeExistence(Widgets, value.type)) {
       return;
     }
-
-    const newField: NestableWidget | UID | Group = TabFieldsModel.fromSM(value);
-    const newCustomType = updateField({
-      customType,
-      previousFieldId: previousKey,
-      newFieldId: newKey,
-      newField,
-      sectionId: tabId,
-    });
-
-    setCustomType(newCustomType);
+    replaceCustomTypeField(tabId, previousKey, newKey, value);
   };
 
   const onCreateSliceZone = () => {
-    const newCustomType = createSectionSliceZone(customType, tabId);
-
-    setCustomType(newCustomType);
+    createSliceZone(tabId);
   };
 
   const onDeleteSliceZone = () => {
-    const newCustomType = deleteSectionSliceZone(customType, tabId);
-
-    setCustomType(newCustomType);
+    deleteSliceZone(tabId);
   };
 
   const onRemoveSharedSlice = (sliceId: string) => {
-    const newCustomType = deleteSliceZoneSlice({
-      customType,
-      sectionId: tabId,
-      sliceId,
-    });
-
-    setCustomType(newCustomType);
+    deleteCustomTypeSharedSlice(tabId, sliceId);
   };
 
   return (
@@ -236,13 +169,13 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
                 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument
                 `data${transformKeyAccessor(key)}`
               }
-              dataCy="static-zone-content"
+              dataCy="ct-static-zone"
               isRepeatableCustomType={customType.repeatable}
             />
           ) : undefined}
 
           <SliceZone
-            customType={customTypeSM}
+            customType={customType}
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
             tabId={tabId}
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment