feat(auto-save): Auto-save on custom / page type builder

prismicio · Dec 28, 2023 · b412472 · b412472
1 parent 1b9bef7
commit b412472
Show file tree

Hide file tree

Showing 69 changed files with 2,183 additions and 2,700 deletions.
diff --git a/packages/slice-machine/components/Forms/CreateSliceModal/CreateSliceModal.tsx b/packages/slice-machine/components/Forms/CreateSliceModal/CreateSliceModal.tsx
@@ -15,10 +15,7 @@ import { InputBox } from "../components/InputBox";
 
 type CreateSliceModalProps = {
   onClose: () => void;
-  onSuccess: (
-    newSlice: SharedSlice,
-    libraryName: string,
-  ) => Promise<void> | void;
+  onSuccess: (newSlice: SharedSlice, libraryName: string) => void;
   localLibraries: readonly LibraryUI[];
   remoteSlices: ReadonlyArray<SliceSM>;
 };
@@ -49,7 +46,7 @@ export const CreateSliceModal: FC<CreateSliceModalProps> = ({
         // Update Redux store
         createSliceSuccess(serverState.libraries);
 
-        await onSuccess(newSlice, libraryName);
+        onSuccess(newSlice, libraryName);
       },
     });
   };

diff --git a/packages/slice-machine/components/Forms/RenameCustomTypeModal/RenameCustomTypeModal.tsx b/packages/slice-machine/components/Forms/RenameCustomTypeModal/RenameCustomTypeModal.tsx
@@ -6,13 +6,14 @@ 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 { 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;
@@ -29,15 +30,18 @@ export const RenameCustomTypeModal: React.FC<RenameCustomTypeModalProps> = ({
 }) => {
   const customTypeName = customType?.label ?? "";
   const customTypeId = customType?.id ?? "";
-  const { renameAvailableCustomTypeSuccess, renameSelectedCustomType } =
-    useSliceMachineActions();
+  const { renameAvailableCustomTypeSuccess } = useSliceMachineActions();
+  const { setCustomType } = useCustomTypeState();
 
   const [isRenaming, setIsRenaming] = useState(false);
 
   const handleOnSubmit = async (values: { customTypeName: string }) => {
     setIsRenaming(true);
     if (isChangesLocal) {
-      renameSelectedCustomType(values.customTypeName);
+      setCustomType({
+        ...customType,
+        label: values.customTypeName,
+      });
     } else {
       await renameCustomType({
         model: customType,

diff --git a/packages/slice-machine/components/ItemHeader/index.tsx b/packages/slice-machine/components/ItemHeader/index.tsx
@@ -22,6 +22,7 @@ const ItemHeader: React.FC<{
     />
     <Text
       as="p"
+      data-cy="item-header-text"
       sx={{
         py: 0,
         px: 1,

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

diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/SlicesTemplatesModal.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/SlicesTemplatesModal.tsx
@@ -18,7 +18,7 @@ import { sliceTemplatesComingSoon } from "./sliceTemplatesComingSoon";
 interface UpdateSliceModalProps {
   formId: string;
   close: () => void;
-  onSuccess: (slices: SharedSlice[]) => Promise<void>;
+  onSuccess: (slices: SharedSlice[]) => void;
   availableSlicesTemplates: SliceTemplate[];
   localLibraries: readonly LibraryUI[];
 }
@@ -69,7 +69,7 @@ export const SlicesTemplatesModal: FC<UpdateSliceModalProps> = ({
                 ) as Promise<SharedSlice>[],
             );
 
-            await onSuccess(slices);
+            onSuccess(slices);
           },
         });
       }}

diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModal.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModal.tsx
@@ -9,7 +9,7 @@ import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
 interface UpdateSliceModalProps {
   formId: string;
   close: () => void;
-  onSubmit: (slices: SharedSlice[]) => Promise<void>;
+  onSubmit: (slices: SharedSlice[]) => 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[];
-        void onSubmit(slices);
+        onSubmit(slices);
       }}
       initialValues={{
         sliceKeys: [],

diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/index.tsx b/packages/slice-machine/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 { initCustomTypeStore, saveCustomTypeSuccess } =
-    useSliceMachineActions();
+  const { setCustomType } = useCustomTypeState();
+
   const localLibraries: readonly LibraryUI[] = libraries.filter(
     (library) => library.isLocal,
   );
@@ -197,14 +197,6 @@ 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 ? (
@@ -299,13 +291,13 @@ const SliceZone: React.FC<SliceZoneProps> = ({
         <UpdateSliceZoneModal
           formId={`tab-slicezone-form-${tabId}`}
           availableSlices={availableSlicesToAdd}
-          onSubmit={async (slices: SharedSlice[]) => {
-            const newCustomType = await addSlicesToSliceZone({
+          onSubmit={(slices: SharedSlice[]) => {
+            const newCustomType = addSlicesToSliceZone({
               customType,
               tabId,
               slices,
             });
-            onAddSlicesToSliceZone(newCustomType);
+            setCustomType(CustomTypes.fromSM(newCustomType));
             closeUpdateSliceZoneModal();
             redirectToEditMode();
             toast.success("Slice(s) added to slice zone");
@@ -318,13 +310,13 @@ const SliceZone: React.FC<SliceZoneProps> = ({
           formId={`tab-slicezone-form-${tabId}`}
           availableSlicesTemplates={availableSlicesTemplates}
           localLibraries={localLibraries}
-          onSuccess={async (slices: SharedSlice[]) => {
-            const newCustomType = await addSlicesToSliceZone({
+          onSuccess={(slices: SharedSlice[]) => {
+            const newCustomType = addSlicesToSliceZone({
               customType,
               tabId,
               slices,
             });
-            onAddSlicesToSliceZone(newCustomType);
+            setCustomType(CustomTypes.fromSM(newCustomType));
             closeSlicesTemplatesModal();
             redirectToEditMode();
             toast.success(
@@ -350,13 +342,13 @@ const SliceZone: React.FC<SliceZoneProps> = ({
       )}
       {localLibraries?.length !== 0 && isCreateSliceModalOpen && (
         <CreateSliceModal
-          onSuccess={async (newSlice: SharedSlice) => {
-            const newCustomType = await addSlicesToSliceZone({
+          onSuccess={(newSlice: SharedSlice) => {
+            const newCustomType = addSlicesToSliceZone({
               customType,
               tabId,
               slices: [newSlice],
             });
-            onAddSlicesToSliceZone(newCustomType);
+            setCustomType(CustomTypes.fromSM(newCustomType));
             closeCreateSliceModal();
             redirectToEditMode();
             toast.success(

diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/TabModal/update.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/TabModal/update.tsx
@@ -10,11 +10,13 @@ const UpdateCustomTypeForm = ({
   onSubmit,
   close,
   tabIds,
+  initialTabKey,
 }: {
   isOpen: boolean;
   onSubmit: (values: { id: string }) => void;
   close: () => void;
   tabIds: ReadonlyArray<string>;
+  initialTabKey: string;
 }) => {
   return (
     <ModalFormCard
@@ -29,7 +31,7 @@ const UpdateCustomTypeForm = ({
         close();
       }}
       initialValues={{
-        id: "",
+        id: initialTabKey,
       }}
       validate={({ id }) => {
         if (!id) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,6 +22,7 @@ const ItemHeader: React.FC<{ @@
         />
         <Text
           as="p"
+          data-cy="item-header-text"
           sx={{
             py: 0,
             px: 1,
@@ Expand Down @@