slice-machine-ui 1.19.3-dev-next-release.3 → 1.19.3-dev-environments.6

package/src/features/legacyState/actions/getLegacySliceMachineState.ts

@@ -0,0 +1,53 @@
+import ServerState from "@models/server/ServerState";
+import { Slices } from "@lib/models/common/Slice";
+import { CustomTypes } from "@lib/models/common/CustomType";
+import { managerClient } from "@src/managerClient";
+
+export async function getLegacySliceMachineState() {
+  const rawState = await managerClient.getState();
+
+  // `rawState` from the client contains non-SM-specific models. We need to
+  // transform the data to something SM recognizes.
+  const state: ServerState = {
+    ...rawState,
+    libraries: rawState.libraries.map((library) => {
+      return {
+        ...library,
+        components: library.components.map((component) => {
+          return {
+            ...component,
+            model: Slices.toSM(component.model),
+
+            // Replace screnshot Blobs with URLs.
+            screenshots: Object.fromEntries(
+              Object.entries(component.screenshots).map(
+                ([variationID, screenshot]) => {
+                  return [
+                    variationID,
+                    {
+                      ...screenshot,
+                      url: URL.createObjectURL(screenshot.data),
+                    },
+                  ];
+                },
+              ),
+            ),
+          };
+        }),
+      };
+    }),
+    customTypes: rawState.customTypes.map((customTypeModel) => {
+      return CustomTypes.toSM(customTypeModel);
+    }),
+    remoteCustomTypes: rawState.remoteCustomTypes.map(
+      (remoteCustomTypeModel) => {
+        return CustomTypes.toSM(remoteCustomTypeModel);
+      },
+    ),
+    remoteSlices: rawState.remoteSlices.map((remoteSliceModel) => {
+      return Slices.toSM(remoteSliceModel);
+    }),
+  };
+
+  return state;
+}

package/src/features/legacyState/useLegacySliceMachineState.ts

@@ -0,0 +1,7 @@
+import { useRequest } from "@prismicio/editor-support/Suspense";
+
+import { getLegacySliceMachineState } from "./actions/getLegacySliceMachineState";
+
+export function useLegacySliceMachineState() {
+  return useRequest(getLegacySliceMachineState, []);
+}

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

@@ -46,6 +46,7 @@ export const ConvertLegacySliceAsNewSliceDialog: FC<DialogProps> = ({
           validateOnChange
           validateOnMount
           initialValues={{
+            _init: false,
             from: libraries[0]?.name,
             sliceName: pascalize(slice.key),
           }}
@@ -59,7 +60,7 @@ export const ConvertLegacySliceAsNewSliceDialog: FC<DialogProps> = ({
           {(formik) => {
             return (
               <form id="convert-legacy-slice-as-new-slice-dialog">
-                <Box flexDirection="column">
+                <Box display="flex" flexDirection="column">
                   <ScrollArea
                     className={styles.scrollArea}
                     style={{ width: 448 }}
@@ -74,7 +75,7 @@ export const ConvertLegacySliceAsNewSliceDialog: FC<DialogProps> = ({
                       This will not migrate your component. You will need to do
                       that manually.
                     </Text>
-                    <Box flexDirection="column" gap={4}>
+                    <Box display="flex" flexDirection="column" gap={4}>
                       <label className={styles.label}>
                         <Text variant="bold">Display name*</Text>
                         {typeof formik.errors.sliceName === "string" ? (
@@ -101,7 +102,7 @@ export const ConvertLegacySliceAsNewSliceDialog: FC<DialogProps> = ({
                         A display name for the slice
                       </Text>
                     </Box>
-                    <Box flexDirection="column" gap={4}>
+                    <Box display="flex" flexDirection="column" gap={4}>
                       <label className={styles.label}>
                         <Text variant="bold">Slice library*</Text>
                         {typeof formik.errors.from === "string" ? (

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

@@ -9,7 +9,6 @@ import {
   Icon,
   IconButton,
   Text,
-  Tooltip,
   tokens,
 } from "@prismicio/editor-ui";
 import Link from "next/link";
@@ -53,12 +52,7 @@ type SharedSliceCardProps = {
 );
 
 type Action =
-  | {
-      type: "menu";
-      onRemove: () => void;
-      onRename: () => void;
-      removeDisabled?: boolean;
-    }
+  | { type: "menu"; onRemove?: () => void; onRename?: () => void }
   | { type: "remove"; onRemove: () => void }
   | ({ type: "status" } & Omit<StatusBadgeProps, "modelType">);
 
@@ -169,6 +163,14 @@ export const SharedSliceCard: FC<SharedSliceCardProps> = (props) => {
                 align="end"
                 data-cy="slice-action-icon-dropdown"
               >
+                {action.onRename ? (
+                  <DropdownMenuItem
+                    onSelect={action.onRename}
+                    startIcon={<Icon name="edit" />}
+                  >
+                    Rename
+                  </DropdownMenuItem>
+                ) : undefined}
                 {canUpdateScreenshot && disableOverlay ? (
                   <DropdownMenuItem
                     onSelect={onUpdateScreenshot}
@@ -177,29 +179,15 @@ export const SharedSliceCard: FC<SharedSliceCardProps> = (props) => {
                     Update screenshot
                   </DropdownMenuItem>
                 ) : undefined}
-                <DropdownMenuItem
-                  onSelect={action.onRename}
-                  startIcon={<Icon name="edit" />}
-                >
-                  Rename
-                </DropdownMenuItem>
-                {action.removeDisabled === true && hasVariationId ? (
-                  <Tooltip
-                    content="The slice needs to have at least one variation."
-                    side="bottom"
-                    stableMount
-                  >
-                    <RemoveDropdownMenuItem
-                      disabled
-                      onSelect={action.onRemove}
-                    />
-                  </Tooltip>
-                ) : (
-                  <RemoveDropdownMenuItem
-                    disabled={action.removeDisabled === true}
+                {action.onRemove ? (
+                  <DropdownMenuItem
+                    color="tomato"
                     onSelect={action.onRemove}
-                  />
-                )}
+                    startIcon={<Icon name="delete" />}
+                  >
+                    Delete
+                  </DropdownMenuItem>
+                ) : undefined}
               </DropdownMenuContent>
             </DropdownMenu>
           ) : action.type === "remove" ? (
@@ -255,18 +243,3 @@ const UpdateScreenshotButton: FC<UpdateScreenshotButtonProps> = (props) => (
     Update screenshot
   </Button>
 );
-
-type RemoveDropdownMenuItemProps = {
-  disabled: boolean;
-  onSelect: () => void;
-};
-
-const RemoveDropdownMenuItem: FC<RemoveDropdownMenuItemProps> = (props) => (
-  <DropdownMenuItem
-    {...props}
-    color="tomato"
-    startIcon={<Icon name="delete" />}
-  >
-    Delete
-  </DropdownMenuItem>
-);

package/src/modules/environment/index.ts

@@ -15,7 +15,7 @@ import { SliceSM } from "@lib/models/common/Slice";
 import { CustomTypeSM } from "@lib/models/common/CustomType";
 import ErrorWithStatus from "@lib/models/common/ErrorWithStatus";
 import { AuthStatus } from "../userContext/types";
-import * as apiClient from "@src/apiClient";
+import { getChangelogApiClient } from "@src/apiClient";
 import { call, fork, put, takeLatest } from "redux-saga/effects";
 import { withLoader } from "../loading";
 import { LoadingKeysEnum } from "../loading/types";
@@ -142,7 +142,7 @@ export function* getChangelogSaga(): Generator<
   PackageChangelog
 > {
   try {
-    const changelog = yield call(apiClient.getChangelog);
+    const changelog = yield call(getChangelogApiClient);
     yield put(getChangelogCreator.success({ changelog }));
   } catch {
     yield put(getChangelogCreator.failure());

package/src/modules/screenshots/sagas.ts

@@ -9,7 +9,10 @@ import { getType } from "typesafe-actions";
 import { withLoader } from "../loading";
 import { LoadingKeysEnum } from "../loading/types";
 import { generateSliceCustomScreenshotCreator } from "./actions";
-import { generateSliceCustomScreenshot, telemetry } from "@src/apiClient";
+import {
+  generateSliceCustomScreenshotApiClient,
+  telemetry,
+} from "@src/apiClient";
 import { openToasterCreator, ToasterType } from "@src/modules/toaster";
 
 export function* generateSliceCustomScreenshotSaga({
@@ -22,12 +25,12 @@ export function* generateSliceCustomScreenshotSaga({
     form.append("libraryName", component.from);
     form.append("sliceName", component.model.name);
     form.append("variationId", variationId);
-    const response = (yield call(generateSliceCustomScreenshot, {
+    const response = (yield call(generateSliceCustomScreenshotApiClient, {
       libraryName: component.from,
       sliceId: component.model.id,
       variationId,
       file,
-    })) as SagaReturnType<typeof generateSliceCustomScreenshot>;
+    })) as SagaReturnType<typeof generateSliceCustomScreenshotApiClient>;
 
     if (!response?.url) {
       throw Error("No screenshot saved");

package/src/modules/selectedSlice/actions.ts

@@ -1,6 +1,5 @@
 import { ActionType, createAction, createAsyncAction } from "typesafe-actions";
 import { NestableWidget } from "@prismicio/types-internal/lib/customtypes";
-import type { SliceBuilderState } from "@builders/SliceBuilder";
 import { ComponentUI } from "@lib/models/common/ComponentUI";
 import { renameSliceCreator } from "../slices";
 import { SelectedSliceStoreType } from "./types";
@@ -18,7 +17,6 @@ export type SelectedSliceActions =
   | ActionType<typeof updateSliceWidgetMockCreator>
   | ActionType<typeof deleteSliceWidgetMockCreator>
   | ActionType<typeof updateSliceCreator>
-  | ActionType<typeof updateAndSaveSliceCreator>
   | ActionType<typeof copyVariationSliceCreator>
   | ActionType<typeof renameSliceCreator>
   | ActionType<typeof refreshStateCreator>
@@ -88,17 +86,14 @@ export const updateSliceCreator = createAsyncAction(
 )<
   {
     component: ComponentUI;
-    setSliceBuilderState: (sliceBuilderState: SliceBuilderState) => void;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    setData: (data: any) => void;
   },
   {
     component: ComponentUI;
   }
 >();
 
-export const updateAndSaveSliceCreator = createAction("SLICE/UPDATE_AND_SAVE")<{
-  component: ComponentUI;
-}>();
-
 export const copyVariationSliceCreator = createAction("SLICE/COPY_VARIATION")<{
   key: string;
   name: string;

package/src/modules/selectedSlice/reducer.ts

@@ -6,7 +6,6 @@ import {
   copyVariationSliceCreator,
   initSliceStoreCreator,
   removeSliceWidgetCreator,
-  updateAndSaveSliceCreator,
   reorderSliceWidgetCreator,
   replaceSliceWidgetCreator,
   SelectedSliceActions,
@@ -156,11 +155,7 @@ export const selectedSliceReducer: Reducer<
         model: renamedSlice,
       };
     }
-    case getType(updateAndSaveSliceCreator): {
-      return prevState
-        ? { ...prevState, ...action.payload.component }
-        : prevState;
-    }
+
     case getType(updateSelectedSliceMocks): {
       if (!prevState) return prevState;
       const { mocks } = action.payload;

package/src/modules/selectedSlice/sagas.ts

@@ -10,32 +10,40 @@ import { getType } from "typesafe-actions";
 import { withLoader } from "../loading";
 import { LoadingKeysEnum } from "../loading/types";
 import { updateSliceCreator } from "./actions";
-import { readSliceMocks, updateSlice } from "@src/apiClient";
+import { readSliceMocks, updateSliceApiClient } from "@src/apiClient";
 import { openToasterCreator, ToasterType } from "@src/modules/toaster";
 import { SliceToastMessage } from "@components/ToasterContainer";
 
 export function* updateSliceSaga({
   payload,
 }: ReturnType<typeof updateSliceCreator.request>) {
-  const { component, setSliceBuilderState } = payload;
+  const { component, setData } = payload;
 
   try {
-    setSliceBuilderState({ loading: true, done: false });
-    const { errors } = (yield call(updateSlice, component)) as SagaReturnType<
-      typeof updateSlice
-    >;
+    setData({
+      loading: true,
+      done: false,
+      error: null,
+      status: null,
+      message: null,
+    });
+    const { errors } = (yield call(
+      updateSliceApiClient,
+      component,
+    )) as SagaReturnType<typeof updateSliceApiClient>;
     if (errors.length > 0) {
-      return setSliceBuilderState({
+      return setData({
         loading: false,
         done: true,
-        error: true,
+        error: errors,
         message: errors[0].message,
+        status: 500,
       });
     }
-    setSliceBuilderState({
+    setData({
       loading: false,
       done: true,
-      error: false,
+      error: null,
       message: SliceToastMessage({
         path: `${component.from}/${component.model.name}/model.json`,
       }),

package/src/modules/slices/index.ts

@@ -25,10 +25,7 @@ import { modalCloseCreator } from "@src/modules/modal";
 import { refreshStateCreator } from "@src/modules/environment";
 import { SliceMachineStoreType } from "@src/redux/type";
 import { openToasterCreator, ToasterType } from "@src/modules/toaster";
-import {
-  updateAndSaveSliceCreator,
-  updateSliceCreator,
-} from "../selectedSlice/actions";
+import { updateSliceCreator } from "../selectedSlice/actions";
 import { generateSliceCustomScreenshotCreator } from "../screenshots/actions";
 import { selectSliceById } from "../selectedSlice/selectors";
 import { SlicesStoreType } from "./types";
@@ -79,7 +76,6 @@ type SlicesActions =
   | ActionType<typeof renameSliceCreator>
   | ActionType<typeof deleteSliceCreator>
   | ActionType<typeof updateSliceCreator>
-  | ActionType<typeof updateAndSaveSliceCreator>
   | ActionType<typeof generateSliceCustomScreenshotCreator>
   | ActionType<typeof updateSliceMock>;
 
@@ -161,24 +157,6 @@ export const slicesReducer: Reducer<SlicesStoreType | null, SlicesActions> = (
 
       return { ...state, libraries: newLibraries };
     }
-    case getType(updateAndSaveSliceCreator): {
-      const { component: newComponent } = action.payload;
-      return {
-        ...state,
-        libraries: state.libraries.map((library) =>
-          library.name === newComponent.from
-            ? {
-                ...library,
-                components: library.components.map((component) =>
-                  component.model.id === newComponent.model.id
-                    ? newComponent
-                    : component,
-                ),
-              }
-            : library,
-        ),
-      };
-    }
     case getType(generateSliceCustomScreenshotCreator.success): {
       const { component, screenshot, variationId } = action.payload;
 

package/src/modules/toaster/utils.tsx

@@ -1,13 +1,16 @@
-import type { ReactNode } from "react";
-
 import { ToasterType } from "../toaster";
 
-export type ToastPayload =
-  | { done: true; message: ReactNode; error: boolean }
-  | { done: false };
+export interface ToastPayload {
+  loading: boolean;
+  done: boolean;
+  warning: boolean;
+  message: string;
+  status: number;
+  error: Error | null;
+}
 
 export const handleRemoteResponse =
-  (addToast: (message: ReactNode, type: ToasterType) => void) =>
+  (addToast: (message: string, type: ToasterType) => void) =>
   (payload: ToastPayload) => {
     if (payload.done) {
       addToast(
@@ -16,6 +19,9 @@ export const handleRemoteResponse =
           if (payload.error) {
             return ToasterType.ERROR;
           }
+          if (payload.warning) {
+            return ToasterType.WARNING;
+          }
           return ToasterType.SUCCESS;
         })(),
       );

package/src/modules/useSliceMachineActions.ts

@@ -45,7 +45,6 @@ import {
   cleanupCustomTypeStoreCreator,
   renameSelectedCustomTypeLabel,
 } from "./selectedCustomType";
-import type { SliceBuilderState } from "@builders/SliceBuilder";
 import {
   CustomTypeSM,
   CustomTypes,
@@ -63,7 +62,6 @@ import {
   removeSliceWidgetCreator,
   reorderSliceWidgetCreator,
   replaceSliceWidgetCreator,
-  updateAndSaveSliceCreator,
   updateSliceCreator,
   updateSliceWidgetMockCreator,
 } from "./selectedSlice/actions";
@@ -379,20 +377,17 @@ const useSliceMachineActions = () => {
 
   const updateSlice = (
     component: ComponentUI,
-    setSliceBuilderState: (sliceBuilderState: SliceBuilderState) => void,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    setData: (data: any) => void,
   ) => {
     dispatch(
       updateSliceCreator.request({
         component,
-        setSliceBuilderState,
+        setData,
       }),
     );
   };
 
-  const updateAndSaveSlice = (component: ComponentUI) => {
-    dispatch(updateAndSaveSliceCreator({ component }));
-  };
-
   const copyVariationSlice = (
     key: string,
     name: string,
@@ -502,7 +497,6 @@ const useSliceMachineActions = () => {
     deleteSliceWidgetMock,
     generateSliceCustomScreenshot,
     updateSlice,
-    updateAndSaveSlice,
     copyVariationSlice,
     createSliceSuccess,
     renameSlice,

package/test/pages/slices.test.tsx

@@ -167,18 +167,14 @@ describe("slices", () => {
       },
     });
 
-    const createOneButton = document.querySelector('[data-cy="create-slice"]');
+    const createOneButton = await screen.findByTestId("create-slice");
     await act(async () => {
-      if (createOneButton) {
-        fireEvent.click(createOneButton);
-      }
+      fireEvent.click(createOneButton);
     });
 
-    const nameInput = document.querySelector('[data-cy="slice-name-input"]');
+    const nameInput = await screen.findByPlaceholderText(/slice api id/i);
     await act(async () => {
-      if (nameInput) {
-        fireEvent.change(nameInput, { target: { value: "FooBar" } });
-      }
+      fireEvent.change(nameInput, { target: { value: "FooBar" } });
     });
 
     const createSliceModal = screen.getByLabelText("Create a new slice");

package/test/src/modules/__fixtures__/serverState.ts

@@ -36,6 +36,8 @@ export const dummyServerState: Pick<
         "https://0yyeb2g040.execute-api.us-east-1.amazonaws.com/prod/",
       PrismicOembed: "https://oembed.prismic.io",
       PrismicUnsplash: "https://unsplash.prismic.io",
+      SliceMachineV1:
+        "https://21vvgrh0s6.execute-api.us-east-1.amazonaws.com/v1/",
     },
     shortId: "shortId",
     supportsSliceSimulator: true,

package/test/src/modules/selectedSlice/sagas.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from "vitest";
 import { testSaga } from "redux-saga-test-plan";
 import { updateSliceSaga } from "@src/modules/selectedSlice/sagas";
 import { updateSliceCreator } from "@src/modules/selectedSlice/actions";
-import { readSliceMocks, updateSlice } from "@src/apiClient";
+import { readSliceMocks, updateSliceApiClient } from "@src/apiClient";
 import { openToasterCreator, ToasterType } from "@src/modules/toaster";
 import { getSelectedSliceDummyData } from "./__testutils__/getSelectedSliceDummyData";
 
@@ -11,7 +11,7 @@ const { dummySliceState } = getSelectedSliceDummyData();
 describe("[Selected Slice sagas]", () => {
   describe("[updateSliceSaga]", () => {
     it("should call the api and dispatch the success action", () => {
-      const mockSetSliceBuilderState = vi.fn<
+      const mockSetData = vi.fn<
         {
           error: boolean;
           done: boolean;
@@ -28,12 +28,11 @@ describe("[Selected Slice sagas]", () => {
         updateSliceSaga,
         updateSliceCreator.request({
           component: dummySliceState,
-          // @ts-expect-error - Issue with `message` type
-          setSliceBuilderState: mockSetSliceBuilderState,
+          setData: mockSetData,
         }),
       );
 
-      saga.next().call(updateSlice, dummySliceState);
+      saga.next().call(updateSliceApiClient, dummySliceState);
 
       saga.next({ errors: [] }).call(readSliceMocks, {
         libraryID: dummySliceState.from,
@@ -48,25 +47,24 @@ describe("[Selected Slice sagas]", () => {
 
       saga.next().isDone();
 
-      const mockSetSliceBuilderStateCalls =
-        mockSetSliceBuilderState.mock.lastCall?.[0];
-      expect(mockSetSliceBuilderStateCalls?.error).toBe(false);
-      expect(mockSetSliceBuilderStateCalls?.done).toBe(true);
-      expect(mockSetSliceBuilderStateCalls?.loading).toBe(false);
-      expect(mockSetSliceBuilderStateCalls?.message.props.message).toBe(
+      const mockSetDataCalls = mockSetData.mock.lastCall?.[0];
+      expect(mockSetDataCalls?.error).toBe(null);
+      expect(mockSetDataCalls?.done).toBe(true);
+      expect(mockSetDataCalls?.loading).toBe(false);
+      expect(mockSetDataCalls?.message.props.message).toBe(
         "Slice saved successfully at ",
       );
-      expect(mockSetSliceBuilderStateCalls?.message.props.path).toBe(
+      expect(mockSetDataCalls?.message.props.path).toBe(
         "slices/libName/DummySlice/model.json",
       );
     });
     it("should open a error toaster on internal error", () => {
-      const mockSetSliceBuilderState = vi.fn();
+      const mockSetData = vi.fn();
       const saga = testSaga(
         updateSliceSaga,
         updateSliceCreator.request({
           component: dummySliceState,
-          setSliceBuilderState: mockSetSliceBuilderState,
+          setData: mockSetData,
         }),
       ).next();
 

package/test/src/modules/toaster/utils.test.ts

@@ -12,9 +12,12 @@ describe("[Toaster utils]", () => {
     it("should call addToast function on an success", () => {
       const addToastFakeFunction = vi.fn();
       const toastPayload: ToastPayload = {
+        loading: false,
         done: true,
+        warning: false,
         message: "message",
-        error: false,
+        status: 200,
+        error: null,
       };
       handleRemoteResponse(addToastFakeFunction)(toastPayload);
 
@@ -26,18 +29,46 @@ describe("[Toaster utils]", () => {
 
     it("shouldn't call addToast function on an unfinished request", () => {
       const addToastFakeFunction = vi.fn();
-      const toastPayload: ToastPayload = { done: false };
+      const toastPayload: ToastPayload = {
+        loading: false,
+        done: false,
+        warning: false,
+        message: "message",
+        status: 200,
+        error: null,
+      };
       handleRemoteResponse(addToastFakeFunction)(toastPayload);
 
       expect(addToastFakeFunction).toHaveBeenCalledTimes(0);
     });
 
+    it("shouldn't call addToast function on request with warnings", () => {
+      const addToastFakeFunction = vi.fn();
+      const toastPayload: ToastPayload = {
+        loading: false,
+        done: true,
+        warning: true,
+        message: "message",
+        status: 200,
+        error: null,
+      };
+      handleRemoteResponse(addToastFakeFunction)(toastPayload);
+
+      expect(addToastFakeFunction).toHaveBeenCalledWith(
+        "message",
+        ToasterType.WARNING,
+      );
+    });
+
     it("shouldn't call addToast function on a request with errors", () => {
       const addToastFakeFunction = vi.fn();
       const toastPayload: ToastPayload = {
+        loading: false,
         done: true,
+        warning: true,
         message: "message",
-        error: true,
+        status: 200,
+        error: new Error(),
       };
       handleRemoteResponse(addToastFakeFunction)(toastPayload);