slice-machine-ui 1.22.3-beta.1 → 1.22.3-beta.3

package/src/features/customTypes/customTypesBuilder/CustomTypesBuilderPage.tsx

@@ -1,4 +1,4 @@
-import { Button, Box } from "@prismicio/editor-ui";
+import { Box } from "@prismicio/editor-ui";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { type FC, useEffect } from "react";
@@ -13,23 +13,19 @@ import {
   AppLayoutHeader,
 } from "@components/AppLayout";
 import { CustomTypeBuilder } from "@lib/builders/CustomTypeBuilder";
-import { type CustomTypeSM, CustomTypes } from "@lib/models/common/CustomType";
-import { hasLocal, hasRemote } from "@lib/models/common/ModelData";
+import { CustomTypeSM, CustomTypes } from "@lib/models/common/CustomType";
+import { hasLocal } from "@lib/models/common/ModelData";
 import { readBuilderPageDynamicSegment } from "@src/features/customTypes/customTypesConfig";
 import { selectCustomTypeById } from "@src/modules/availableCustomTypes";
-import { LoadingKeysEnum } from "@src/modules/loading/types";
-import { isLoading } from "@src/modules/loading";
-import {
-  isSelectedCustomTypeTouched,
-  selectCurrentCustomType,
-} from "@src/modules/selectedCustomType";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import type { SliceMachineStoreType } from "@src/redux/type";
+import { getFormat } from "@src/domain/customType";
+import { AutoSaveStatusIndicator } from "@src/features/autoSave/AutoSaveStatusIndicator";
 
 import { CUSTOM_TYPES_CONFIG } from "../customTypesConfig";
 import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 import { EditDropdown } from "../EditDropdown";
 import { PageSnippetDialog } from "./PageSnippetDialog";
+import { CustomTypeProvider } from "./CustomTypeProvider";
 
 export const CustomTypesBuilderPage: FC = () => {
   const router = useRouter();
@@ -42,8 +38,6 @@ export const CustomTypesBuilderPage: FC = () => {
     }),
   );
 
-  const { cleanupCustomTypeStore } = useSliceMachineActions();
-
   useEffect(() => {
     // TODO(DT-1801): When creating a custom type, don't redirect to the builder page until the custom type is created
     if (!selectedCustomType || !hasLocal(selectedCustomType)) {
@@ -51,14 +45,6 @@ export const CustomTypesBuilderPage: FC = () => {
     }
   }, [selectedCustomType, router]);
 
-  useEffect(() => {
-    return () => {
-      cleanupCustomTypeStore();
-    };
-    // we don't want to re-run this effect when the cleanupCustomTypeStore is redefined
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   if (!selectedCustomType || !hasLocal(selectedCustomType)) {
     return <AppLayout />;
   }
@@ -70,9 +56,6 @@ export const CustomTypesBuilderPage: FC = () => {
       </Head>
       <CustomTypesBuilderPageWithProvider
         customType={selectedCustomType.local}
-        remoteCustomType={
-          hasRemote(selectedCustomType) ? selectedCustomType.remote : undefined
-        }
       />
     </>
   );
@@ -80,70 +63,54 @@ export const CustomTypesBuilderPage: FC = () => {
 
 type CustomTypesBuilderPageWithProviderProps = {
   customType: CustomTypeSM;
-  remoteCustomType: CustomTypeSM | undefined;
 };
 
 const CustomTypesBuilderPageWithProvider: React.FC<
   CustomTypesBuilderPageWithProviderProps
-> = ({ customType, remoteCustomType }) => {
-  const { initCustomTypeStore, saveCustomType } = useSliceMachineActions();
-
-  useEffect(
-    () => {
-      initCustomTypeStore(customType, remoteCustomType);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      /* leave this empty to prevent local updates to disappear */
-    ],
-  );
-
-  const { currentCustomType, hasPendingModifications, isSavingCustomType } =
-    useSelector((store: SliceMachineStoreType) => ({
-      currentCustomType: selectCurrentCustomType(store),
-      hasPendingModifications: isSelectedCustomTypeTouched(store),
-      isSavingCustomType: isLoading(store, LoadingKeysEnum.SAVE_CUSTOM_TYPE),
-    }));
-
-  if (currentCustomType === null) {
+> = ({ customType: customTypeFromStore }) => {
+  if (customTypeFromStore === null) {
     return <AppLayout />;
   }
-
-  const config = CUSTOM_TYPES_CONFIG[currentCustomType.format];
-  const messages = CUSTOM_TYPES_MESSAGES[currentCustomType.format];
-
   return (
     <AppLayout>
-      <AppLayoutHeader>
-        <AppLayoutBackButton url={config.tablePagePathname} />
-        <AppLayoutBreadcrumb
-          folder={messages.name({ start: true, plural: true })}
-          page={currentCustomType.label ?? currentCustomType.id}
-        />
-        <AppLayoutActions>
-          {currentCustomType.format === "page" ? (
-            <PageSnippetDialog model={CustomTypes.fromSM(currentCustomType)} />
-          ) : undefined}
-          <EditDropdown
-            isChangesLocal
-            format={currentCustomType.format}
-            customType={CustomTypes.fromSM(currentCustomType)}
-          />
-          <Button
-            onClick={saveCustomType}
-            loading={isSavingCustomType}
-            data-testid="builder-save-button"
-            disabled={!hasPendingModifications || isSavingCustomType}
-          >
-            Save
-          </Button>
-        </AppLayoutActions>
-      </AppLayoutHeader>
-      <AppLayoutContent>
-        <Box flexDirection="column" minWidth={0}>
-          <CustomTypeBuilder customType={currentCustomType} />
-        </Box>
-      </AppLayoutContent>
+      <CustomTypeProvider
+        initialCustomType={CustomTypes.fromSM(customTypeFromStore)}
+      >
+        {({ autoSaveStatus, customType, setCustomType }) => {
+          const format = getFormat(customType);
+          const config = CUSTOM_TYPES_CONFIG[customTypeFromStore.format];
+          const messages = CUSTOM_TYPES_MESSAGES[customTypeFromStore.format];
+
+          return (
+            <>
+              <AppLayoutHeader>
+                <AppLayoutBackButton url={config.tablePagePathname} />
+                <AppLayoutBreadcrumb
+                  folder={messages.name({ start: true, plural: true })}
+                  page={customType.label ?? customType.id}
+                />
+                <AppLayoutActions>
+                  <AutoSaveStatusIndicator status={autoSaveStatus} />
+                  {customType.format === "page" ? (
+                    <PageSnippetDialog model={customType} />
+                  ) : undefined}
+                  <EditDropdown
+                    isChangesLocal
+                    format={format}
+                    customType={customType}
+                    setLocalCustomType={setCustomType}
+                  />
+                </AppLayoutActions>
+              </AppLayoutHeader>
+              <AppLayoutContent>
+                <Box flexDirection="column" minWidth={0}>
+                  <CustomTypeBuilder />
+                </Box>
+              </AppLayoutContent>
+            </>
+          );
+        }}
+      </CustomTypeProvider>
     </AppLayout>
   );
 };

package/src/features/customTypes/customTypesMessages.ts

@@ -12,6 +12,8 @@ export const CUSTOM_TYPES_MESSAGES = {
     inputPlaceholder: `ID to query the page type in the API (e.g. 'BlogPost')`,
     blankSlateDescription:
       "Page types are models that your editors will use to create website pages in the Page Builder.",
+    autoSaveFailed:
+      "Failed to save page type. Check your browser's console for more information.",
   },
   custom: {
     name: ({ start, plural }: CustomTypesMessagesNameArgs) =>
@@ -21,5 +23,7 @@ export const CUSTOM_TYPES_MESSAGES = {
     inputPlaceholder: `ID to query the custom type in the API (e.g. 'Author')`,
     blankSlateDescription:
       "Custom types are models that your editors can use to create menus or objects in the Page Builder.",
+    autoSaveFailed:
+      "Failed to save custom type. Check your browser's console for more information.",
   },
 };

package/src/features/slices/actions/addSlicesToSliceZone.ts

@@ -1,8 +1,7 @@
 import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
 
 import { telemetry } from "@src/apiClient";
-import { managerClient } from "@src/managerClient";
-import { CustomTypeSM, CustomTypes } from "@lib/models/common/CustomType";
+import { CustomTypeSM } from "@lib/models/common/CustomType";
 
 export type AddSlicesToSliceZoneArgs = {
   customType: CustomTypeSM;
@@ -10,7 +9,7 @@ export type AddSlicesToSliceZoneArgs = {
   slices: SharedSlice[];
 };
 
-export async function addSlicesToSliceZone({
+export function addSlicesToSliceZone({
   customType,
   tabId,
   slices,
@@ -40,10 +39,6 @@ export async function addSlicesToSliceZone({
     };
   });
 
-  await managerClient.customTypes.updateCustomType({
-    model: CustomTypes.fromSM(newCustomType),
-  });
-
   void telemetry.track({
     event: "custom-type:slice-zone-updated",
     customTypeId: customType.id,

package/src/features/slices/actions/uploadSliceScreenshot.ts

@@ -0,0 +1,45 @@
+import { toast } from "react-toastify";
+
+import { ComponentUI } from "@lib/models/common/ComponentUI";
+import { generateSliceCustomScreenshot, telemetry } from "@src/apiClient";
+
+type UploadSliceScreenshotArgs = {
+  file: File;
+  method: "upload" | "dragAndDrop";
+  slice: ComponentUI;
+  variationId: string;
+};
+
+export async function uploadSliceScreenshot(args: UploadSliceScreenshotArgs) {
+  const { variationId, slice, file, method } = args;
+
+  try {
+    const form = new FormData();
+    form.append("file", file);
+    form.append("libraryName", slice.from);
+    form.append("sliceName", slice.model.name);
+    form.append("variationId", variationId);
+    const { errors, url } = await generateSliceCustomScreenshot({
+      libraryName: slice.from,
+      sliceId: slice.model.id,
+      variationId,
+      file,
+    });
+
+    if (errors.length > 0) {
+      throw errors;
+    }
+
+    void telemetry.track({ event: "screenshot-taken", type: "custom", method });
+
+    return {
+      ...slice,
+      screenshots: { ...slice.screenshots, [variationId]: { url } },
+    };
+  } catch (error) {
+    const message = `Screenshot not saved`;
+    console.error(message, error);
+
+    toast.error(message);
+  }
+}

package/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewVariationDialog.tsx

@@ -1,5 +1,6 @@
 import { useState, type FC } from "react";
 import { Formik } from "formik";
+import { camelCase } from "lodash";
 import {
   Box,
   Dialog,
@@ -13,7 +14,6 @@ import {
   SelectItem,
 } from "@prismicio/editor-ui";
 
-import { Variation } from "@models/common/Variation";
 import { LibraryUI } from "@models/common/LibraryUI";
 
 import * as styles from "./ConvertLegacySliceButton.css";
@@ -51,7 +51,7 @@ export const ConvertLegacySliceAsNewVariationDialog: FC<DialogProps> = ({
           initialValues={{
             libraryID: localSharedSlices[0]?.from,
             sliceID: localSharedSlices[0]?.model.id,
-            variationID: Variation.generateId(slice.key),
+            variationID: camelCase(slice.key),
             variationName: sliceName,
           }}
           validate={(values) => {
@@ -136,7 +136,7 @@ export const ConvertLegacySliceAsNewVariationDialog: FC<DialogProps> = ({
                           };
 
                           if (inferIDFromName) {
-                            values.variationID = Variation.generateId(
+                            values.variationID = camelCase(
                               values.variationName,
                             );
                           }
@@ -156,14 +156,14 @@ export const ConvertLegacySliceAsNewVariationDialog: FC<DialogProps> = ({
                         ) : null}
                       </label>
                       <FormInput
-                        placeholder={Variation.generateId(slice.key)}
+                        placeholder={camelCase(slice.key)}
                         error={typeof formik.errors.variationID === "string"}
                         value={formik.values.variationID}
                         onValueChange={(value) => {
                           setInferIDFromName(false);
                           void formik.setFieldValue(
                             "variationID",
-                            Variation.generateId(value.slice(0, 30)),
+                            camelCase(value.slice(0, 30)),
                           );
                         }}
                         data-cy="variation-id-input"

package/src/features/slices/convertLegacySlice/ConvertLegacySliceButton.tsx

@@ -11,7 +11,6 @@ import {
 
 import { NonSharedSliceInSliceZone } from "@models/common/CustomType/sliceZone";
 import { ComponentUI } from "@models/common/ComponentUI";
-import { CustomTypes } from "@models/common/CustomType";
 import { getLibraries } from "@src/modules/slices";
 import { SliceMachineStoreType } from "@src/redux/type";
 import { managerClient } from "@src/managerClient";
@@ -19,6 +18,7 @@ import { getState, telemetry } from "@src/apiClient";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { ToasterType } from "@src/modules/toaster";
 import { getFieldMappingFingerprint } from "@src/domain/slice";
+import { useCustomTypeState } from "@src/features/customTypes/customTypesBuilder/CustomTypeProvider";
 
 import { NonSharedSliceCardProps } from "../sliceCards/NonSharedSliceCard";
 import { ConvertLegacySliceAsNewSliceDialog } from "./ConvertLegacySliceAsNewSliceDialog";
@@ -36,15 +36,11 @@ export const ConvertLegacySliceButton: FC<ConvertLegacySliceButtonProps> = ({
   slice,
   path,
 }) => {
-  const {
-    refreshState,
-    openToaster,
-    initCustomTypeStore,
-    saveCustomTypeSuccess,
-  } = useSliceMachineActions();
+  const { refreshState, openToaster } = useSliceMachineActions();
 
   const [isLoading, setIsLoading] = useState(false);
   const [dialog, setDialog] = useState<LegacySliceConversionType | undefined>();
+  const { setCustomType } = useCustomTypeState();
 
   const { libraries: allLibraries } = useSelector(
     (store: SliceMachineStoreType) => ({
@@ -159,9 +155,7 @@ export const ConvertLegacySliceButton: FC<ConvertLegacySliceButtonProps> = ({
         break;
     }
 
-    const customTypeSM = CustomTypes.toSM(customType);
-    initCustomTypeStore(customTypeSM, customTypeSM);
-    saveCustomTypeSuccess(customType);
+    setCustomType(customType);
   };
 
   const formProps = {

package/src/features/slices/sliceBuilder/SliceBuilderProvider.tsx

@@ -0,0 +1,110 @@
+import {
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+import { useStableCallback } from "@prismicio/editor-support/React";
+import { useRouter } from "next/router";
+
+import {
+  AutoSaveStatus,
+  useAutoSave,
+} from "@src/features/autoSave/useAutoSave";
+import { ComponentUI } from "@lib/models/common/ComponentUI";
+import { readSliceMocks, updateSlice } from "@src/apiClient";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { VariationSM } from "@lib/models/common/Slice";
+
+type SliceContext = {
+  slice: ComponentUI;
+  autoSaveStatus: AutoSaveStatus;
+  setSlice: (slice: ComponentUI) => void;
+  variation: VariationSM;
+};
+
+type SliceBuilderProviderProps = {
+  children: ReactNode | ((value: SliceContext) => ReactNode);
+  initialSlice: ComponentUI;
+};
+
+const SliceContextValue = createContext<SliceContext | undefined>(undefined);
+
+export function SliceBuilderProvider(props: SliceBuilderProviderProps) {
+  const { children, initialSlice } = props;
+
+  const router = useRouter();
+  const [slice, setSliceState] = useState(initialSlice);
+  const { autoSaveStatus, setNextSave } = useAutoSave({
+    errorMessage:
+      "Failed to save slice. Check your browser's console for more information.",
+  });
+  const { saveSliceSuccess } = useSliceMachineActions();
+  const stableSaveSliceSuccess = useStableCallback(saveSliceSuccess);
+
+  const variation = useMemo(() => {
+    const variationName = router.query.variation;
+    const v = slice.model.variations.find(
+      (variation) => variation.id === variationName,
+    );
+
+    if (v) {
+      return v;
+    }
+
+    throw new Error("Variation not found");
+  }, [slice, router]);
+
+  const setSlice = useCallback(
+    (slice: ComponentUI) => {
+      setSliceState(slice);
+      setNextSave(async () => {
+        const { errors: updateSliceErrors } = await updateSlice(slice);
+
+        if (updateSliceErrors.length > 0) {
+          throw updateSliceErrors;
+        }
+
+        const { errors: readSliceMockErrors, mocks } = await readSliceMocks({
+          libraryID: slice.from,
+          sliceID: slice.model.id,
+        });
+
+        if (readSliceMockErrors.length > 0) {
+          throw readSliceMockErrors;
+        }
+
+        stableSaveSliceSuccess({ ...slice, mocks });
+      });
+    },
+    [setNextSave, stableSaveSliceSuccess],
+  );
+
+  const contextValue: SliceContext = useMemo(
+    () => ({
+      autoSaveStatus,
+      slice,
+      setSlice,
+      variation,
+    }),
+    [autoSaveStatus, slice, setSlice, variation],
+  );
+
+  return (
+    <SliceContextValue.Provider value={contextValue}>
+      {typeof children === "function" ? children(contextValue) : children}
+    </SliceContextValue.Provider>
+  );
+}
+
+export function useSliceState() {
+  const sliceState = useContext(SliceContextValue);
+
+  if (!sliceState) {
+    throw new Error("SliceBuilderProvider not found");
+  }
+
+  return sliceState;
+}

package/src/features/slices/sliceBuilder/actions/deleteVariation.ts

@@ -1,8 +1,6 @@
 import type { NextRouter } from "next/router";
-import type { Dispatch, SetStateAction } from "react";
+import { toast } from "react-toastify";
 
-import type { SliceBuilderState } from "@builders/SliceBuilder";
-import { SliceToastMessage } from "@components/ToasterContainer";
 import type { ComponentUI } from "@lib/models/common/ComponentUI";
 import type { VariationSM } from "@lib/models/common/Slice";
 import {
@@ -16,16 +14,13 @@ import { SLICES_CONFIG } from "@src/features/slices/slicesConfig";
 type DeleteVariationArgs = {
   component: ComponentUI;
   router: NextRouter;
-  setSliceBuilderState: Dispatch<SetStateAction<SliceBuilderState>>;
-  updateAndSaveSlice: (component: ComponentUI) => void;
+  saveSliceSuccess: (component: ComponentUI) => void;
   variation: VariationSM;
 };
 
 export async function deleteVariation(
   args: DeleteVariationArgs,
-): Promise<void> {
-  args.setSliceBuilderState({ loading: true, done: false });
-
+): Promise<ComponentUI> {
   try {
     // The slice may have been edited so we need to update the file system.
     const { errors: updateSliceErrors } = await updateSlice(args.component);
@@ -62,27 +57,16 @@ export async function deleteVariation(
       variationId: slice.variations[0].id,
     });
     await args.router.replace(url);
-    args.updateAndSaveSlice({ ...args.component, model: slice, mocks });
 
-    // Finally, display a success toast.
-    const path = `${args.component.from}/${args.component.model.name}/model.json`;
-    args.setSliceBuilderState({
-      loading: false,
-      done: true,
-      error: false,
-      message: SliceToastMessage({ path }),
-    });
+    const newComponent = { ...args.component, model: slice, mocks };
+    args.saveSliceSuccess(newComponent);
+
+    return newComponent;
   } catch (error) {
     const message = `Could not delete variation \`${args.variation.name}\``;
     console.error(message, error);
 
-    // Display a failure toast.
-    args.setSliceBuilderState({
-      loading: false,
-      done: true,
-      error: true,
-      message,
-    });
+    toast.error(message);
 
     throw error;
   }

package/src/features/slices/sliceBuilder/actions/renameVariation.ts

@@ -1,7 +1,5 @@
-import type { Dispatch, SetStateAction } from "react";
+import { toast } from "react-toastify";
 
-import type { SliceBuilderState } from "@builders/SliceBuilder";
-import { SliceToastMessage } from "@components/ToasterContainer";
 import type { ComponentUI } from "@lib/models/common/ComponentUI";
 import type { VariationSM } from "@lib/models/common/Slice";
 import {
@@ -13,17 +11,14 @@ import {
 
 type RenameVariationArgs = {
   component: ComponentUI;
-  setSliceBuilderState: Dispatch<SetStateAction<SliceBuilderState>>;
-  updateAndSaveSlice: (component: ComponentUI) => void;
+  saveSliceSuccess: (component: ComponentUI) => void;
   variation: VariationSM;
   variationName: string;
 };
 
 export async function renameVariation(
   args: RenameVariationArgs,
-): Promise<void> {
-  args.setSliceBuilderState({ loading: true, done: false });
-
+): Promise<ComponentUI> {
   try {
     // The slice may have been edited so we need to update the file system.
     const { errors: updateSliceErrors } = await updateSlice(args.component);
@@ -53,27 +48,16 @@ export async function renameVariation(
       libraryID: args.component.from,
       sliceID: args.component.model.id,
     });
-    args.updateAndSaveSlice({ ...args.component, model: slice, mocks });
 
-    // Finally, display a success toast.
-    const path = `${args.component.from}/${args.component.model.name}/model.json`;
-    args.setSliceBuilderState({
-      loading: false,
-      done: true,
-      error: false,
-      message: SliceToastMessage({ path }),
-    });
+    const newComponent = { ...args.component, model: slice, mocks };
+    args.saveSliceSuccess(newComponent);
+
+    return newComponent;
   } catch (error) {
     const message = `Could not rename variation \`${args.variation.name}\``;
     console.error(message, error);
 
-    // Display a failure toast.
-    args.setSliceBuilderState({
-      loading: false,
-      done: true,
-      error: true,
-      message,
-    });
+    toast.error(message);
 
     throw error;
   }

package/src/features/slices/sliceCards/SharedSliceCard.tsx

@@ -206,6 +206,7 @@ export const SharedSliceCard: FC<SharedSliceCardProps> = (props) => {
             <IconButton
               icon="close"
               onClick={() => !disabled && action.onRemove()}
+              hiddenLabel="Remove slice"
             />
           ) : action.type === "status" ? (
             <StatusBadge

package/src/hooks/useCurrentSlice.tsx

@@ -1,18 +1,15 @@
+import { useRouter } from "next/router";
+import { useSelector } from "react-redux";
+
 import { ComponentUI } from "@lib/models/common/ComponentUI";
 import { VariationSM } from "@lib/models/common/Slice";
-import { selectCurrentSlice } from "@src/modules/selectedSlice/selectors";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { selectCurrentSlice } from "@src/modules/slices/selector";
 import { SliceMachineStoreType } from "@src/redux/type";
 
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { useSelector } from "react-redux";
-
 type UseCurrentSliceRet = { slice?: ComponentUI; variation?: VariationSM };
 
 const useCurrentSlice = (): UseCurrentSliceRet => {
   const router = useRouter();
-  const { initSliceStore } = useSliceMachineActions();
 
   const { slice } = useSelector((store: SliceMachineStoreType) => ({
     slice: selectCurrentSlice(
@@ -22,14 +19,6 @@ const useCurrentSlice = (): UseCurrentSliceRet => {
     ),
   }));
 
-  useEffect(() => {
-    if (slice) {
-      initSliceStore(slice);
-    } else {
-      void router.replace("/");
-    }
-  }, [initSliceStore, slice, router]);
-
   if (!slice) {
     return {};
   }
@@ -39,7 +28,6 @@ const useCurrentSlice = (): UseCurrentSliceRet => {
   );
 
   if (!variation) {
-    void router.replace("/");
     return {};
   }
 

package/src/hooks/useScreenshotChangesModal.ts

@@ -6,6 +6,7 @@ import { SliceVariationSelector } from "@components/ScreenshotChangesModal";
 type ModalPayload = {
   sliceFilterFn: (s: ComponentUI[]) => ComponentUI[];
   defaultVariationSelector?: SliceVariationSelector;
+  onUploadSuccess?: (newSlice: ComponentUI) => void;
 };
 
 type Payload = {