From bac62a7df17e0c228200ceeb4b22f17b211c681d Mon Sep 17 00:00:00 2001
From: Xavier Rutayisire <xavier.rutayisire@gmail.com>
Date: Mon, 29 Jan 2024 20:46:30 +0100
Subject: [PATCH] refactor(slices): Remove deleteSliceSaga

---
 .../components/DeleteSliceModal/index.tsx     |  58 ++--
 packages/slice-machine/pages/slices.tsx       |  12 +-
 packages/slice-machine/src/apiClient.ts       |   6 -
 packages/slice-machine/src/domain/slice.ts    |  28 ++
 .../features/slices/actions/createSlice.ts    |  34 +--
 .../features/slices/actions/deleteSlice.ts    |  33 +++
 .../src/modules/availableCustomTypes/index.ts |   6 +-
 .../src/modules/loading/types.ts              |   1 -
 .../slice-machine/src/modules/modal/types.ts  |   1 -
 .../slice-machine/src/modules/slices/index.ts | 121 ++------
 .../src/modules/useSliceMachineActions.ts     |  35 +--
 .../availableCustomTypes/index.test.ts        |  89 ------
 .../test/src/modules/slices.test.ts           | 268 +-----------------
 13 files changed, 150 insertions(+), 542 deletions(-)
 create mode 100644 packages/slice-machine/src/features/slices/actions/deleteSlice.ts

diff --git a/packages/slice-machine/components/DeleteSliceModal/index.tsx b/packages/slice-machine/components/DeleteSliceModal/index.tsx
index 52511e5e80..eddf9289a6 100644
--- a/packages/slice-machine/components/DeleteSliceModal/index.tsx
+++ b/packages/slice-machine/components/DeleteSliceModal/index.tsx
@@ -1,46 +1,54 @@
+import { useState } from "react";
+import { MdOutlineDelete } from "react-icons/md";
+import { Close, Flex, Heading, Paragraph, Text, useThemeUI } from "theme-ui";
+
 import SliceMachineModal from "@components/SliceMachineModal";
-import { useSelector } from "react-redux";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { isModalOpen } from "@src/modules/modal";
-import { ModalKeysEnum } from "@src/modules/modal/types";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { Close, Flex, Heading, Paragraph, Text, useThemeUI } from "theme-ui";
 import Card from "@components/Card";
-import { MdOutlineDelete } from "react-icons/md";
 import { Button } from "@components/Button";
-import { LoadingKeysEnum } from "@src/modules/loading/types";
-import { isLoading } from "@src/modules/loading";
+import { deleteSlice } from "@src/features/slices/actions/deleteSlice";
 
 type DeleteSliceModalProps = {
+  isModalOpen: boolean;
+  libName: string;
   sliceId: string;
   sliceName: string;
-  libName: string;
+  onCloseModal: () => void;
 };
 
 export const DeleteSliceModal: React.FunctionComponent<
   DeleteSliceModalProps
-> = ({ sliceId, sliceName, libName }) => {
-  const { isSliceModalOpen, isDeletingSlice } = useSelector(
-    (store: SliceMachineStoreType) => ({
-      isSliceModalOpen: isModalOpen(store, ModalKeysEnum.DELETE_SLICE),
-      isDeletingSlice: isLoading(store, LoadingKeysEnum.DELETE_SLICE),
-    }),
-  );
+> = ({ sliceId, sliceName, libName, isModalOpen, onCloseModal }) => {
+  const [isDeleting, setIsDeleting] = useState(false);
+  const { deleteSliceSuccess } = useSliceMachineActions();
+  const { theme } = useThemeUI();
 
-  const { closeModals, deleteSlice } = useSliceMachineActions();
+  const onDelete = async () => {
+    setIsDeleting(true);
 
-  const { theme } = useThemeUI();
+    await deleteSlice({
+      sliceID: sliceId,
+      sliceName,
+      libraryID: libName,
+      onSuccess: () => {
+        deleteSliceSuccess(sliceId, libName);
+      },
+    });
+
+    onCloseModal();
+    setIsDeleting(false);
+  };
 
   return (
     <SliceMachineModal
-      isOpen={isSliceModalOpen}
+      isOpen={isModalOpen}
       shouldCloseOnOverlayClick={true}
       style={{
         content: {
           maxWidth: 612,
         },
       }}
-      onRequestClose={closeModals}
+      onRequestClose={onCloseModal}
     >
       <Card
         bodySx={{
@@ -79,7 +87,7 @@ export const DeleteSliceModal: React.FunctionComponent<
                 Delete Slice
               </Heading>
             </Flex>
-            <Close type="button" onClick={closeModals} />
+            <Close type="button" onClick={onCloseModal} />
           </Flex>
         )}
         Footer={() => (
@@ -96,7 +104,7 @@ export const DeleteSliceModal: React.FunctionComponent<
             <Button
               label="Cancel"
               variant="secondary"
-              onClick={() => closeModals()}
+              onClick={onCloseModal}
               sx={{
                 mr: "10px",
                 fontWeight: "bold",
@@ -107,9 +115,11 @@ export const DeleteSliceModal: React.FunctionComponent<
             <Button
               label="Delete"
               variant="danger"
-              isLoading={isDeletingSlice}
+              isLoading={isDeleting}
               sx={{ minHeight: 39, minWidth: 78 }}
-              onClick={() => deleteSlice(sliceId, sliceName, libName)}
+              onClick={() => {
+                void onDelete();
+              }}
             />
           </Flex>
         )}
diff --git a/packages/slice-machine/pages/slices.tsx b/packages/slice-machine/pages/slices.tsx
index eb8f9eb498..72a1568b36 100644
--- a/packages/slice-machine/pages/slices.tsx
+++ b/packages/slice-machine/pages/slices.tsx
@@ -33,8 +33,7 @@ import { SliceToastMessage } from "@components/ToasterContainer";
 
 const SlicesIndex: React.FunctionComponent = () => {
   const router = useRouter();
-  const { openRenameSliceModal, openDeleteSliceModal } =
-    useSliceMachineActions();
+  const { openRenameSliceModal } = useSliceMachineActions();
 
   const { modalPayload, onOpenModal } = useScreenshotChangesModal();
 
@@ -47,6 +46,7 @@ const SlicesIndex: React.FunctionComponent = () => {
     }),
   );
   const [isCreateSliceModalOpen, setIsCreateSliceModalOpen] = useState(false);
+  const [isDeleteSliceModalOpen, setIsDeleteSliceModalOpen] = useState(false);
 
   const localLibraries: LibraryUI[] = libraries.filter(
     (library) => library.isLocal,
@@ -65,6 +65,10 @@ const SlicesIndex: React.FunctionComponent = () => {
 
   const [sliceForEdit, setSliceForEdit] = useState<ComponentUI>();
 
+  const openDeleteSliceModal = () => {
+    setIsDeleteSliceModalOpen(true);
+  };
+
   return (
     <>
       <Head>
@@ -246,6 +250,10 @@ const SlicesIndex: React.FunctionComponent = () => {
             sliceId={sliceForEdit?.model.id ?? ""}
             sliceName={sliceForEdit?.model.name ?? ""}
             libName={sliceForEdit?.from ?? ""}
+            isModalOpen={isDeleteSliceModalOpen}
+            onCloseModal={() => {
+              setIsDeleteSliceModalOpen(false);
+            }}
           />
         </AppLayoutContent>
       </AppLayout>
diff --git a/packages/slice-machine/src/apiClient.ts b/packages/slice-machine/src/apiClient.ts
index 733749df0d..78fbee0002 100644
--- a/packages/slice-machine/src/apiClient.ts
+++ b/packages/slice-machine/src/apiClient.ts
@@ -99,12 +99,6 @@ export const renameSlice = async (
   });
 };
 
-export const deleteSlice = async (sliceId: string, libName: string) =>
-  await managerClient.slices.deleteSlice({
-    libraryID: libName,
-    sliceID: sliceId,
-  });
-
 export const renameSliceVariation = async (
   slice: ComponentUI,
   variation: VariationSM,
diff --git a/packages/slice-machine/src/domain/slice.ts b/packages/slice-machine/src/domain/slice.ts
index 50485c28e7..3a3c55d13d 100644
--- a/packages/slice-machine/src/domain/slice.ts
+++ b/packages/slice-machine/src/domain/slice.ts
@@ -1,11 +1,13 @@
 import type {
   CompositeSlice,
   LegacySlice,
+  SharedSlice,
 } from "@prismicio/types-internal/lib/customtypes/widgets/slices";
 import { NestableWidget } from "@prismicio/types-internal/lib/customtypes";
 
 import type { ComponentUI } from "@lib/models/common/ComponentUI";
 import type { VariationSM, WidgetsArea } from "@lib/models/common/Slice";
+import { pascalize, snakelize } from "@lib/utils/str";
 
 type CopySliceVariationArgs = {
   copiedVariation: VariationSM;
@@ -46,6 +48,8 @@ type ReorderFieldArgs = {
   destinationIndex: number;
 };
 
+const DEFAULT_VARIATION_ID = "default";
+
 export function countMissingScreenshots(slice: ComponentUI): number {
   return slice.model.variations.length - Object.keys(slice.screenshots).length;
 }
@@ -243,3 +247,27 @@ export function reorderField(args: ReorderFieldArgs): ComponentUI {
     },
   };
 }
+
+export function buildEmptySliceModel(sliceName: string): SharedSlice {
+  return {
+    id: snakelize(sliceName),
+    type: "SharedSlice",
+    name: sliceName,
+    description: sliceName,
+    variations: [
+      {
+        id: DEFAULT_VARIATION_ID,
+        name: pascalize(DEFAULT_VARIATION_ID),
+        // Property not used yet. Fallback to "...".
+        docURL: "...",
+        // "initial" is fine here as default value.
+        version: "initial",
+        description: pascalize(DEFAULT_VARIATION_ID),
+        // Empty string is fine, we don't want to save imageUrl.
+        // We don't want to compare local and remote image with imageUrl.
+        // It will be striped anyway when doing the comparison.
+        imageUrl: "",
+      },
+    ],
+  };
+}
diff --git a/packages/slice-machine/src/features/slices/actions/createSlice.ts b/packages/slice-machine/src/features/slices/actions/createSlice.ts
index a65211ad01..5a9581740e 100644
--- a/packages/slice-machine/src/features/slices/actions/createSlice.ts
+++ b/packages/slice-machine/src/features/slices/actions/createSlice.ts
@@ -1,9 +1,10 @@
 import { toast } from "react-toastify";
 import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
 
-import { pascalize, snakelize } from "@lib/utils/str";
+import { pascalize } from "@lib/utils/str";
 import { managerClient } from "@src/managerClient";
 import { telemetry } from "@src/apiClient";
+import { buildEmptySliceModel } from "@src/domain/slice";
 
 type CreateSliceArgs = {
   sliceName: string;
@@ -12,8 +13,9 @@ type CreateSliceArgs = {
 };
 
 export async function createSlice(args: CreateSliceArgs) {
+  const { sliceName, libraryName, onSuccess } = args;
+
   try {
-    const { sliceName, libraryName, onSuccess } = args;
     const newSlice = buildEmptySliceModel(sliceName);
     const { errors } = await managerClient.slices.createSlice({
       libraryID: libraryName,
@@ -33,34 +35,8 @@ export async function createSlice(args: CreateSliceArgs) {
 
     await onSuccess(newSlice);
   } catch (e) {
-    const errorMessage = "Internal Error: Slice not created";
+    const errorMessage = `An unexpected error happened while creating slice ${sliceName}.`;
     console.error(errorMessage, e);
     toast.error(errorMessage);
   }
 }
-
-const DEFAULT_VARIATION_ID = "default";
-
-function buildEmptySliceModel(sliceName: string): SharedSlice {
-  return {
-    id: snakelize(sliceName),
-    type: "SharedSlice",
-    name: sliceName,
-    description: sliceName,
-    variations: [
-      {
-        id: DEFAULT_VARIATION_ID,
-        name: pascalize(DEFAULT_VARIATION_ID),
-        // Property not used yet. Fallback to "...".
-        docURL: "...",
-        // "initial" is fine here as default value.
-        version: "initial",
-        description: pascalize(DEFAULT_VARIATION_ID),
-        // Empty string is fine, we don't want to save imageUrl.
-        // We don't want to compare local and remote image with imageUrl.
-        // It will be striped anyway when doing the comparison.
-        imageUrl: "",
-      },
-    ],
-  };
-}
diff --git a/packages/slice-machine/src/features/slices/actions/deleteSlice.ts b/packages/slice-machine/src/features/slices/actions/deleteSlice.ts
new file mode 100644
index 0000000000..3bcdcfa9ad
--- /dev/null
+++ b/packages/slice-machine/src/features/slices/actions/deleteSlice.ts
@@ -0,0 +1,33 @@
+import { toast } from "react-toastify";
+
+import { managerClient } from "@src/managerClient";
+
+type DeleteSliceArgs = {
+  sliceName: string;
+  sliceID: string;
+  libraryID: string;
+  onSuccess: () => void;
+};
+
+export async function deleteSlice(args: DeleteSliceArgs) {
+  const { sliceName, sliceID, libraryID, onSuccess } = args;
+
+  try {
+    const { errors } = await managerClient.slices.deleteSlice({
+      libraryID,
+      sliceID,
+    });
+
+    if (errors.length > 0) {
+      throw errors;
+    }
+
+    onSuccess();
+
+    toast.success(`Successfully deleted Slice “${sliceName}”`);
+  } catch (e) {
+    const errorMessage = `An unexpected error happened while deleting “${sliceName}”.`;
+    console.error(errorMessage, e);
+    toast.error(errorMessage);
+  }
+}
diff --git a/packages/slice-machine/src/modules/availableCustomTypes/index.ts b/packages/slice-machine/src/modules/availableCustomTypes/index.ts
index 89aeee58f3..719553a9cc 100644
--- a/packages/slice-machine/src/modules/availableCustomTypes/index.ts
+++ b/packages/slice-machine/src/modules/availableCustomTypes/index.ts
@@ -9,7 +9,7 @@ import {
   normalizeFrontendCustomTypes,
 } from "@lib/models/common/normalizers/customType";
 import { omit } from "lodash";
-import { deleteSliceCreator } from "../slices";
+import { sliceDeleteSuccess } from "../slices";
 import { filterSliceFromCustomType } from "@lib/utils/shared/customTypes";
 import {
   LocalOrRemoteCustomType,
@@ -47,7 +47,7 @@ type CustomTypesActions =
   | ActionType<typeof customTypeRenameSuccess>
   | ActionType<typeof customTypeSaveSuccess>
   | ActionType<typeof customTypeDeleteSuccess>
-  | ActionType<typeof deleteSliceCreator.success>;
+  | ActionType<typeof sliceDeleteSuccess>;
 
 // Selectors
 export const selectAllCustomTypes = (
@@ -152,7 +152,7 @@ export const availableCustomTypesReducer: Reducer<
       return state;
     }
 
-    case getType(deleteSliceCreator.success): {
+    case getType(sliceDeleteSuccess): {
       const sliceId = action.payload.sliceId;
 
       const customTypesUpdated: AvailableCustomTypesStoreType = Object.entries(
diff --git a/packages/slice-machine/src/modules/loading/types.ts b/packages/slice-machine/src/modules/loading/types.ts
index bca6cba9db..3c8a8cbff5 100644
--- a/packages/slice-machine/src/modules/loading/types.ts
+++ b/packages/slice-machine/src/modules/loading/types.ts
@@ -7,7 +7,6 @@ export enum LoadingKeysEnum {
   CHECK_SIMULATOR_IFRAME = "CHECK_SIMULATOR_IFRAME",
   RENAME_SLICE = "RENAME_SLICE",
   GENERATE_SLICE_CUSTOM_SCREENSHOT = "GENERATE_SLICE_CUSTOM_SCREENSHOT",
-  DELETE_SLICE = "DELETE_SLICE",
   SIMULATOR_SAVE_MOCK = "SIMULATOR_SAVE_MOCK",
   CHANGELOG = "CHANGELOG",
 }
diff --git a/packages/slice-machine/src/modules/modal/types.ts b/packages/slice-machine/src/modules/modal/types.ts
index 6baf99d8ed..1fc97697ef 100644
--- a/packages/slice-machine/src/modules/modal/types.ts
+++ b/packages/slice-machine/src/modules/modal/types.ts
@@ -3,7 +3,6 @@ export enum ModalKeysEnum {
   RENAME_SLICE = "RENAME_SLICE",
   SCREENSHOT_PREVIEW = "SCREENSHOT_PREVIEW",
   SCREENSHOTS = "SCREENSHOTS",
-  DELETE_SLICE = "DELETE_SLICE",
   SIMULATOR_SETUP = "SIMULATOR_SETUP",
 }
 
diff --git a/packages/slice-machine/src/modules/slices/index.ts b/packages/slice-machine/src/modules/slices/index.ts
index b7914e3d08..a096d69df6 100644
--- a/packages/slice-machine/src/modules/slices/index.ts
+++ b/packages/slice-machine/src/modules/slices/index.ts
@@ -4,14 +4,7 @@ import {
   createAsyncAction,
   getType,
 } from "typesafe-actions";
-import {
-  call,
-  fork,
-  put,
-  SagaReturnType,
-  select,
-  takeLatest,
-} from "redux-saga/effects";
+import { call, fork, put, select, takeLatest } from "redux-saga/effects";
 import { Reducer } from "redux";
 
 import { LocalOrRemoteSlice } from "@lib/models/common/ModelData";
@@ -20,7 +13,7 @@ import { SliceSM } from "@lib/models/common/Slice";
 import { LibraryUI } from "@models/common/LibraryUI";
 import { withLoader } from "@src/modules/loading";
 import { LoadingKeysEnum } from "@src/modules/loading/types";
-import { deleteSlice, renameSlice, SaveSliceMockRequest } from "@src/apiClient";
+import { renameSlice, SaveSliceMockRequest } from "@src/apiClient";
 import { modalCloseCreator } from "@src/modules/modal";
 import { refreshStateCreator } from "@src/modules/environment";
 import { SliceMachineStoreType } from "@src/redux/type";
@@ -28,10 +21,9 @@ import { openToasterCreator, ToasterType } from "@src/modules/toaster";
 import { SlicesStoreType } from "./types";
 import { ComponentUI, ScreenshotUI } from "@lib/models/common/ComponentUI";
 import { selectSliceById } from "./selector";
-import { ScreenshotGenerationMethod } from "@lib/models/common/Screenshots";
 
 // Action Creators
-export const createSlice = createAction("SLICES/CREATE_SLICE")<{
+export const sliceCreateSuccess = createAction("SLICES/CREATE_SUCCESS")<{
   libraries: Readonly<LibraryUI[]>;
 }>();
 
@@ -51,61 +43,29 @@ export const renameSliceCreator = createAsyncAction(
   }
 >();
 
-export const deleteSliceCreator = createAsyncAction(
-  "SLICES/DELETE.REQUEST",
-  "SLICES/DELETE.RESPONSE",
-  "SLICES/DELETE.FAILURE",
-)<
-  {
-    sliceId: string;
-    sliceName: string;
-    libName: string;
-  },
-  {
-    sliceId: string;
-    sliceName: string;
-    libName: string;
-  }
->();
+export const sliceDeleteSuccess = createAction("SLICES/DELETE_SUCCESS")<{
+  sliceId: string;
+  libName: string;
+}>();
 
-export const updateSliceCreator = createAsyncAction(
-  "SLICE/UPDATE.REQUEST",
-  "SLICE/UPDATE.RESPONSE",
-  "SLICE/UPDATE.FAILURE",
-)<
-  {
-    component: ComponentUI;
-    setSliceBuilderState: () => void;
-  },
-  {
-    component: ComponentUI;
-  }
->();
+export const updateSlice = createAction("SLICE/UPDATE")<{
+  component: ComponentUI;
+}>();
 
-export const generateSliceCustomScreenshotCreator = createAsyncAction(
-  "SLICE/GENERATE_CUSTOM_SCREENSHOT.REQUEST",
-  "SLICE/GENERATE_CUSTOM_SCREENSHOT.RESPONSE",
-  "SLICE/GENERATE_CUSTOM_SCREENSHOT.FAILURE",
-)<
-  {
-    variationId: string;
-    component: ComponentUI;
-    file: Blob;
-    method: ScreenshotGenerationMethod;
-  },
-  { variationId: string; screenshot: ScreenshotUI; component: ComponentUI }
->();
+export const sliceGenerateCustomScreenshotSuccess = createAction(
+  "SLICE/GENERATE_CUSTOM_SCREENSHOT_SUCCESS",
+)<{ variationId: string; screenshot: ScreenshotUI; component: ComponentUI }>();
 
 export const updateSliceMock =
   createAction("SLICE/UPDATE_MOCK")<SaveSliceMockRequest>();
 
 type SlicesActions =
   | ActionType<typeof refreshStateCreator>
-  | ActionType<typeof createSlice>
+  | ActionType<typeof sliceCreateSuccess>
   | ActionType<typeof renameSliceCreator>
-  | ActionType<typeof deleteSliceCreator>
-  | ActionType<typeof updateSliceCreator>
-  | ActionType<typeof generateSliceCustomScreenshotCreator>
+  | ActionType<typeof sliceDeleteSuccess>
+  | ActionType<typeof updateSlice>
+  | ActionType<typeof sliceGenerateCustomScreenshotSuccess>
   | ActionType<typeof updateSliceMock>;
 
 // Selectors
@@ -143,7 +103,7 @@ export const slicesReducer: Reducer<SlicesStoreType | null, SlicesActions> = (
         libraries: action.payload.libraries,
         remoteSlices: action.payload.remoteSlices,
       };
-    case getType(createSlice):
+    case getType(sliceCreateSuccess):
       return {
         ...state,
         libraries: action.payload.libraries,
@@ -169,7 +129,7 @@ export const slicesReducer: Reducer<SlicesStoreType | null, SlicesActions> = (
         libraries: newLibs,
       };
     }
-    case getType(updateSliceCreator.success): {
+    case getType(updateSlice): {
       const newComponentUI = action.payload.component;
 
       const newLibraries = state.libraries.map((library) => {
@@ -186,7 +146,7 @@ export const slicesReducer: Reducer<SlicesStoreType | null, SlicesActions> = (
 
       return { ...state, libraries: newLibraries };
     }
-    case getType(generateSliceCustomScreenshotCreator.success): {
+    case getType(sliceGenerateCustomScreenshotSuccess): {
       const { component, screenshot, variationId } = action.payload;
 
       const newLibraries = state.libraries.map((library) => {
@@ -209,7 +169,7 @@ export const slicesReducer: Reducer<SlicesStoreType | null, SlicesActions> = (
 
       return { ...state, libraries: newLibraries };
     }
-    case getType(deleteSliceCreator.success): {
+    case getType(sliceDeleteSuccess): {
       const { libName, sliceId } = action.payload;
       const newLibs = state.libraries.map((library) => {
         if (library.name !== libName) return library;
@@ -303,48 +263,9 @@ function* watchRenameSlice() {
   );
 }
 
-export function* deleteSliceSaga({
-  payload,
-}: ReturnType<typeof deleteSliceCreator.request>) {
-  const { libName, sliceId, sliceName } = payload;
-  try {
-    const result = (yield call(
-      deleteSlice,
-      sliceId,
-      libName,
-    )) as SagaReturnType<typeof deleteSlice>;
-    if (result.errors.length > 0) {
-      throw result.errors;
-    }
-    yield put(deleteSliceCreator.success(payload));
-    yield put(
-      openToasterCreator({
-        content: `Successfully deleted Slice “${sliceName}”`,
-        type: ToasterType.SUCCESS,
-      }),
-    );
-  } catch (e) {
-    yield put(
-      openToasterCreator({
-        content: "An unexpected error happened while deleting your slice.",
-        type: ToasterType.ERROR,
-      }),
-    );
-  }
-  yield put(modalCloseCreator());
-}
-
-function* watchDeleteSlice() {
-  yield takeLatest(
-    getType(deleteSliceCreator.request),
-    withLoader(deleteSliceSaga, LoadingKeysEnum.DELETE_SLICE),
-  );
-}
-
 // Saga Exports
 export function* watchSliceSagas() {
   yield fork(watchRenameSlice);
-  yield fork(watchDeleteSlice);
 }
 
 type RenameSliceModelArgs = {
diff --git a/packages/slice-machine/src/modules/useSliceMachineActions.ts b/packages/slice-machine/src/modules/useSliceMachineActions.ts
index fa0fe0d765..605ecc24f7 100644
--- a/packages/slice-machine/src/modules/useSliceMachineActions.ts
+++ b/packages/slice-machine/src/modules/useSliceMachineActions.ts
@@ -25,11 +25,11 @@ import {
   customTypeSaveSuccess,
 } from "./availableCustomTypes";
 import {
-  createSlice,
-  deleteSliceCreator,
-  generateSliceCustomScreenshotCreator,
+  sliceCreateSuccess,
+  sliceDeleteSuccess,
+  sliceGenerateCustomScreenshotSuccess,
   renameSliceCreator,
-  updateSliceCreator,
+  updateSlice,
 } from "./slices";
 import { UserContextStoreType, UserReviewType } from "./userContext/types";
 import { GenericToastTypes, openToasterCreator } from "./toaster";
@@ -65,8 +65,6 @@ const useSliceMachineActions = () => {
     dispatch(modalOpenCreator({ modalKey: ModalKeysEnum.RENAME_SLICE }));
   const openScreenshotPreviewModal = () =>
     dispatch(modalOpenCreator({ modalKey: ModalKeysEnum.SCREENSHOT_PREVIEW }));
-  const openDeleteSliceModal = () =>
-    dispatch(modalOpenCreator({ modalKey: ModalKeysEnum.DELETE_SLICE }));
   const openSimulatorSetupModal = () =>
     dispatch(modalOpenCreator({ modalKey: ModalKeysEnum.SIMULATOR_SETUP }));
 
@@ -114,15 +112,6 @@ const useSliceMachineActions = () => {
       }),
     );
 
-  const deleteSlice = (sliceId: string, sliceName: string, libName: string) =>
-    dispatch(
-      deleteSliceCreator.request({
-        sliceId,
-        sliceName,
-        libName,
-      }),
-    );
-
   // Toaster store
   const openToaster = (
     content: string | React.ReactNode,
@@ -190,7 +179,7 @@ const useSliceMachineActions = () => {
    */
   const saveSliceSuccess = (component: ComponentUI) => {
     dispatch(
-      updateSliceCreator.success({
+      updateSlice({
         component,
       }),
     );
@@ -201,7 +190,7 @@ const useSliceMachineActions = () => {
     component: ComponentUI,
   ) => {
     dispatch(
-      generateSliceCustomScreenshotCreator.success({
+      sliceGenerateCustomScreenshotSuccess({
         variationId,
         screenshot,
         component,
@@ -209,7 +198,14 @@ const useSliceMachineActions = () => {
     );
   };
   const createSliceSuccess = (libraries: readonly LibraryUI[]) =>
-    dispatch(createSlice({ libraries }));
+    dispatch(sliceCreateSuccess({ libraries }));
+  const deleteSliceSuccess = (sliceId: string, libName: string) =>
+    dispatch(
+      sliceDeleteSuccess({
+        sliceId,
+        libName,
+      }),
+    );
 
   /**
    * Changes module
@@ -235,7 +231,7 @@ const useSliceMachineActions = () => {
     saveSliceCustomScreenshotSuccess,
     createSliceSuccess,
     renameSlice,
-    deleteSlice,
+    deleteSliceSuccess,
     sendAReview,
     skipReview,
     setUpdatesViewed,
@@ -243,7 +239,6 @@ const useSliceMachineActions = () => {
     setSeenSimulatorToolTip,
     setSeenChangesToolTip,
     openScreenshotPreviewModal,
-    openDeleteSliceModal,
     openSimulatorSetupModal,
     openRenameSliceModal,
     closeModals,
diff --git a/packages/slice-machine/test/src/modules/availableCustomTypes/index.test.ts b/packages/slice-machine/test/src/modules/availableCustomTypes/index.test.ts
index f14b4cb27c..4611425057 100644
--- a/packages/slice-machine/test/src/modules/availableCustomTypes/index.test.ts
+++ b/packages/slice-machine/test/src/modules/availableCustomTypes/index.test.ts
@@ -3,8 +3,6 @@ import { describe, expect, it } from "vitest";
 import { availableCustomTypesReducer } from "@src/modules/availableCustomTypes";
 import { AvailableCustomTypesStoreType } from "@src/modules/availableCustomTypes/types";
 import { refreshStateCreator } from "@src/modules/environment";
-import { CustomTypeSM } from "@lib/models/common/CustomType";
-import { deleteSliceCreator } from "@src/modules/slices";
 
 import { dummyServerState } from "../__fixtures__/serverState";
 
@@ -47,92 +45,5 @@ describe("[Available Custom types module]", () => {
         },
       });
     });
-
-    it("should update the custom types state given SLICES/DELETE.SUCCESS action", () => {
-      const sliceToDeleteId = "slice_id";
-      const mockCustomTypeToUpdate: CustomTypeSM = {
-        id: "id",
-        label: "lama",
-        repeatable: false,
-        status: true,
-        format: "custom",
-        tabs: [
-          {
-            key: "Main",
-            value: [],
-            sliceZone: {
-              key: "slices",
-              value: [
-                {
-                  key: sliceToDeleteId,
-                  value: {
-                    type: "SharedSlice",
-                  },
-                },
-                {
-                  key: "slice_2",
-                  value: {
-                    type: "SharedSlice",
-                  },
-                },
-              ],
-            },
-          },
-        ],
-      };
-
-      const originalState = { ...dummyCustomTypesState };
-
-      originalState["id"] = {
-        local: mockCustomTypeToUpdate,
-        remote: mockCustomTypeToUpdate,
-      };
-      const action = deleteSliceCreator.success({
-        sliceId: sliceToDeleteId,
-        sliceName: "slice_name",
-        libName: "lib",
-      });
-
-      const result = availableCustomTypesReducer(
-        originalState,
-        action,
-      ) as AvailableCustomTypesStoreType;
-
-      expect(
-        Object.values(result).flatMap((localAndRemote) => {
-          return Object.values(localAndRemote);
-        }),
-      ).not.toContain(undefined);
-
-      expect(result).toEqual({
-        id: {
-          local: {
-            id: "id",
-            label: "lama",
-            repeatable: false,
-            status: true,
-            format: "custom",
-            tabs: [
-              {
-                key: "Main",
-                value: [],
-                sliceZone: {
-                  key: "slices",
-                  value: [
-                    {
-                      key: "slice_2",
-                      value: {
-                        type: "SharedSlice",
-                      },
-                    },
-                  ],
-                },
-              },
-            ],
-          },
-          remote: mockCustomTypeToUpdate,
-        },
-      });
-    });
   });
 });
diff --git a/packages/slice-machine/test/src/modules/slices.test.ts b/packages/slice-machine/test/src/modules/slices.test.ts
index eddef3626e..5b0983ca64 100644
--- a/packages/slice-machine/test/src/modules/slices.test.ts
+++ b/packages/slice-machine/test/src/modules/slices.test.ts
@@ -1,21 +1,8 @@
 // @vitest-environment jsdom
 
 import { describe, expect, it } from "vitest";
-import {
-  slicesReducer,
-  deleteSliceCreator,
-  // getFrontendSlices,
-  deleteSliceSaga,
-} from "@src/modules/slices";
-import { testSaga } from "redux-saga-test-plan";
-
-import { deleteSlice } from "@src/apiClient";
-import { modalCloseCreator } from "@src/modules/modal";
+import { slicesReducer } from "@src/modules/slices";
 import { SlicesStoreType } from "@src/modules/slices/types";
-import { openToasterCreator, ToasterType } from "@src/modules/toaster";
-import { LibraryUI } from "@lib/models/common/LibraryUI";
-// import { generateComponentUI, generateLibraryUI, generateSliceSM } from "./__fixtures__/sliceUtilsFactory";
-// import { SliceMachineStoreType } from "@src/redux/type";
 
 const dummySlicesState: SlicesStoreType = {
   libraries: [],
@@ -35,258 +22,5 @@ describe("[Slices module]", () => {
         dummySlicesState,
       );
     });
-
-    it("should update the slice state given SLICES/DELETE.SUCCESS action", () => {
-      const sliceIdToDelete = "id";
-      const sliceNameToDelete = "slice-name";
-      const libName = "libName";
-
-      const originalState = { ...dummySlicesState };
-
-      originalState["libraries"] = [
-        {
-          name: libName,
-          isLocal: true,
-          components: [
-            { model: { id: sliceIdToDelete } },
-            { model: { id: "second-slice" } },
-          ],
-        },
-      ] as unknown as LibraryUI[];
-
-      const action = deleteSliceCreator.success({
-        sliceId: sliceIdToDelete,
-        libName,
-        sliceName: sliceNameToDelete,
-      });
-
-      const result = slicesReducer(originalState, action);
-
-      const expectState = { ...originalState };
-      expectState["libraries"] = [
-        {
-          name: libName,
-          isLocal: true,
-          components: [{ model: { id: "second-slice" } }],
-        },
-      ] as unknown as LibraryUI[];
-
-      expect(result).toEqual(expectState);
-    });
   });
-
-  // describe("[renameSliceSaga]", () => {
-  //   it("should call the api and dispatch the good actions", () => {
-  //     const actionPayload = {
-  //       sliceId: "MySlice",
-  //       libName: "MyLib/Components",
-  //       newSliceName: "MyNewSlice",
-  //     };
-  //     const saga = testSaga(
-  //       renameSliceSaga,
-  //       renameSliceCreator.request(actionPayload)
-  //     );
-
-  //     saga
-  //       .next()
-  //       .call(
-  //         renameSlice,
-  //         actionPayload.sliceId,
-  //         actionPayload.newSliceName,
-  //         actionPayload.libName
-  //       );
-  //     saga.next().put(
-  //       renameSliceCreator.success({
-  //         libName: actionPayload.libName,
-  //         sliceId: actionPayload.sliceId,
-  //         newSliceName: actionPayload.newSliceName,
-  //       })
-  //     );
-  //     saga.next().put(modalCloseCreator());
-  //     saga.next().put(
-  //       openToasterCreator({
-  //         content: "Slice name updated",
-  //         type: ToasterType.SUCCESS,
-  //       })
-  //     );
-  //     saga.next().isDone();
-  //   });
-  // });
-
-  describe("[deleteSliceSaga]", () => {
-    it("should call the api and dispatch the good actions on success", () => {
-      const actionPayload = {
-        sliceId: "id",
-        sliceName: "name",
-        libName: "lib",
-      };
-      const saga = testSaga(
-        deleteSliceSaga,
-        deleteSliceCreator.request(actionPayload),
-      );
-
-      saga
-        .next()
-        .call(deleteSlice, actionPayload.sliceId, actionPayload.libName);
-      saga.next({ errors: [] }).put(deleteSliceCreator.success(actionPayload));
-      saga.next().put(
-        openToasterCreator({
-          content: `Successfully deleted Slice “${actionPayload.sliceName}”`,
-          type: ToasterType.SUCCESS,
-        }),
-      );
-
-      saga.next().put(modalCloseCreator());
-      saga.next().isDone();
-    });
-    it("should call the api and dispatch the good actions on unknown failure", () => {
-      const actionPayload = {
-        sliceId: "id",
-        sliceName: "name",
-        libName: "lib",
-      };
-      const saga = testSaga(
-        deleteSliceSaga,
-        deleteSliceCreator.request(actionPayload),
-      );
-
-      saga
-        .next()
-        .call(deleteSlice, actionPayload.sliceId, actionPayload.libName);
-      saga.throw(new Error()).put(
-        openToasterCreator({
-          content: "An unexpected error happened while deleting your slice.",
-          type: ToasterType.ERROR,
-        }),
-      );
-
-      saga.next().put(modalCloseCreator());
-      saga.next().isDone();
-    });
-  });
-
-  // describe("[Selectors]", () => {
-  //   describe.only("getLocallyDeletedSlices", () => {
-  //     it("works as expected", () => {
-  //       const l1 = generateLibraryUI({
-  //         components: [
-  //           generateComponentUI({
-  //             model: generateSliceSM({ id: "1" }),
-  //           }),
-  //           generateComponentUI({
-  //             model: generateSliceSM({ id: "2" }),
-  //           }),
-  //           generateComponentUI({
-  //             model: generateSliceSM({ id: "3" }),
-  //           }),
-  //         ],
-  //       });
-  //       const l2 = generateLibraryUI({
-  //         components: [
-  //           generateComponentUI({
-  //             model: generateSliceSM({ id: "4" }),
-  //           }),
-  //           generateComponentUI({
-  //             model: generateSliceSM({ id: "5" }),
-  //           }),
-  //         ],
-  //       });
-
-  //       const remoteSlices = [
-  //         generateSliceSM({ id: "1" }),
-  //         generateSliceSM({ id: "3" }),
-  //         generateSliceSM({ id: "4" }),
-  //         generateSliceSM({ id: "6" }),
-  //       ];
-
-  //       const frontendSlices = getFrontendSlices({
-  //         slices: { libraries: [l1, l2], remoteSlices },
-  //       } as unknown as SliceMachineStoreType);
-
-  //       // it combines slices from all the local libraries
-  //       // it combines local and remote only libraries
-  //       // it maps the correct remote slice if found
-  //       expect(frontendSlices.length).toEqual(6);
-  //       expect(frontendSlices.map((s) => s.local?.id)).toEqual([
-  //         "1",
-  //         "2",
-  //         "3",
-  //         "4",
-  //         "5",
-  //         undefined,
-  //       ]);
-  //       expect(frontendSlices.map((s) => s.remote?.id)).toEqual([
-  //         "1",
-  //         undefined,
-  //         "3",
-  //         "4",
-  //         undefined,
-  //         "6",
-  //       ]);
-  //     });
-  //   });
-  // });
 });
-
-// describe("[utils]", () => {
-//   const PREV_NAME = "SliceName";
-//   const NEW_NAME = "SliceRenamed";
-//   it("test renameScreenshots", () => {
-//     const initialPaths: Record<string, ScreenshotUI> = {
-//       "default-variation": createScreenshotUI(PREV_NAME, "default-variation"),
-//       "other-variation": createScreenshotUI(PREV_NAME, "other-variation"),
-//     };
-//     const expectedRenamedPaths: Record<string, ScreenshotUI> = {
-//       "default-variation": createScreenshotUI(NEW_NAME, "default-variation"),
-//       "other-variation": createScreenshotUI(NEW_NAME, "other-variation"),
-//     };
-//     expect(renameScreenshots(initialPaths, PREV_NAME, NEW_NAME)).toEqual(
-//       expectedRenamedPaths
-//     );
-//   });
-
-//   it("test renameScreenshotUrls", () => {
-//     const initialUrls: Screenshots = {
-//       "default-variation": {
-//         hash: "xxx",
-//         path: `../../e2e-projects/next/.slicemachine/assets/slices/ecommerce/${PREV_NAME}/default-variation/preview.png`,
-//         url: `http://localhost:9999/api/__preview?q=..%2F..%2Fe2e-projects%2Fnext%2F.slicemachine%2Fassets%2Fslices%2Fecommerce%2F${PREV_NAME}%2Fdefault-slice%2Fpreview.png&uniq=0.39230892472268586`,
-//       },
-//       "other-variation": {
-//         hash: "xxx",
-//         path: `../../e2e-projects/next/.slicemachine/assets/slices/ecommerce/${PREV_NAME}/other-variation/preview.png`,
-//         url: `http://localhost:9999/api/__preview?q=..%2F..%2Fe2e-projects%2Fnext%2F.slicemachine%2Fassets%2Fslices%2Fecommerce%2F${PREV_NAME}%2Fdefault-slice%2Fpreview.png&uniq=0.39230892472268586`,
-//       },
-//     };
-//     const expectedRenamedUrls: Screenshots = {
-//       "default-variation": {
-//         hash: "xxx",
-//         path: `../../e2e-projects/next/.slicemachine/assets/slices/ecommerce/${NEW_NAME}/default-variation/preview.png`,
-//         url: `http://localhost:9999/api/__preview?q=..%2F..%2Fe2e-projects%2Fnext%2F.slicemachine%2Fassets%2Fslices%2Fecommerce%2F${NEW_NAME}%2Fdefault-slice%2Fpreview.png&uniq=0.39230892472268586`,
-//       },
-//       "other-variation": {
-//         hash: "xxx",
-//         path: `../../e2e-projects/next/.slicemachine/assets/slices/ecommerce/${NEW_NAME}/other-variation/preview.png`,
-//         url: `http://localhost:9999/api/__preview?q=..%2F..%2Fe2e-projects%2Fnext%2F.slicemachine%2Fassets%2Fslices%2Fecommerce%2F${NEW_NAME}%2Fdefault-slice%2Fpreview.png&uniq=0.39230892472268586`,
-//       },
-//     };
-//     expect(renameScreenshots(initialUrls, PREV_NAME, NEW_NAME)).toEqual(
-//       expectedRenamedUrls
-//     );
-//   });
-//   it("test renameModel", () => {
-//     const initialModel: SliceSM = {
-//       id: "slice_id",
-//       name: PREV_NAME,
-//       type: "SharedSlice",
-//       variations: [],
-//     };
-//     const expectedModel: SliceSM = {
-//       id: "slice_id",
-//       name: NEW_NAME,
-//       type: "SharedSlice",
-//       variations: [],
-//     };
-//     expect(renameModel(initialModel, NEW_NAME)).toEqual(expectedModel);
-//   });
-// });