From 17d9d09509f9cc870ea11776fbb302fa853f999d Mon Sep 17 00:00:00 2001
From: Xavier Rutayisire <xavier.rutayisire@gmail.com>
Date: Wed, 24 Jan 2024 17:09:52 +0100
Subject: [PATCH] refactor(changes): Remove pushChanges saga and store (#1270)

---
 packages/manager/src/index.ts                 |   5 +-
 .../PrismicRepositoryManager.ts               |  20 +-
 .../src/managers/prismicRepository/types.ts   |  12 +-
 .../manager/src/managers/telemetry/types.ts   |   4 +-
 .../CustomTypeTable/changesPage.tsx           |   1 +
 .../HardDeleteDocumentsDrawer.tsx             |  34 +--
 .../ReferencesErrorDrawer.tsx                 |  92 ------
 .../SoftDeleteDocumentsDrawer.tsx             |  34 +--
 .../DeleteDocumentsDrawer/index.tsx           |   1 -
 .../components/SliceMachineDrawer/index.tsx   |  10 +-
 .../lib/models/common/TransactionalPush.ts    |  10 -
 packages/slice-machine/pages/changes.tsx      |  95 +++++--
 .../features/changes/actions/pushChanges.ts   |  66 +++++
 .../actions}/trackPushChangesSuccess.ts       |  28 +-
 .../src/modules/loading/types.ts              |   1 -
 .../slice-machine/src/modules/modal/types.ts  |   3 -
 .../src/modules/pushChangesSaga/index.ts      | 191 -------------
 .../src/modules/useSliceMachineActions.ts     |  21 +-
 .../src/modules/userContext/index.ts          |   9 +-
 packages/slice-machine/src/redux/reducer.ts   |   2 -
 packages/slice-machine/src/redux/saga.ts      |   2 -
 packages/slice-machine/src/redux/type.ts      |   2 -
 .../test/src/modules/pushChangesSaga.test.ts  | 261 ------------------
 playwright/tests/changes/changes.spec.ts      |  10 +-
 24 files changed, 214 insertions(+), 700 deletions(-)
 delete mode 100644 packages/slice-machine/components/DeleteDocumentsDrawer/ReferencesErrorDrawer.tsx
 delete mode 100644 packages/slice-machine/lib/models/common/TransactionalPush.ts
 create mode 100644 packages/slice-machine/src/features/changes/actions/pushChanges.ts
 rename packages/slice-machine/src/{modules/pushChangesSaga => features/changes/actions}/trackPushChangesSuccess.ts (80%)
 delete mode 100644 packages/slice-machine/src/modules/pushChangesSaga/index.ts
 delete mode 100644 packages/slice-machine/test/src/modules/pushChangesSaga.test.ts

diff --git a/packages/manager/src/index.ts b/packages/manager/src/index.ts
index 4851d0e0ab..dcdba4d486 100644
--- a/packages/manager/src/index.ts
+++ b/packages/manager/src/index.ts
@@ -13,7 +13,10 @@ export { createSliceMachineManager } from "./managers/createSliceMachineManager"
 export { createSliceMachineManagerMiddleware } from "./managers/createSliceMachineManagerMiddleware";
 export type { CreateSliceMachineManagerMiddlewareArgs } from "./managers/createSliceMachineManagerMiddleware";
 
-export type { Environment } from "./managers/prismicRepository/types";
+export type {
+	Environment,
+	PushChangesLimit,
+} from "./managers/prismicRepository/types";
 
 export type {
 	PrismicAuthManager,
diff --git a/packages/manager/src/managers/prismicRepository/PrismicRepositoryManager.ts b/packages/manager/src/managers/prismicRepository/PrismicRepositoryManager.ts
index 3815160517..badf117b1a 100644
--- a/packages/manager/src/managers/prismicRepository/PrismicRepositoryManager.ts
+++ b/packages/manager/src/managers/prismicRepository/PrismicRepositoryManager.ts
@@ -23,13 +23,13 @@ import {
 	BulkBody,
 	ChangeTypes,
 	ClientError,
-	Limit,
-	LimitType,
+	PushChangesLimit,
+	PushChangesLimitType,
 	PrismicRepository,
 	PrismicRepositoryRole,
 	PrismicRepositoryUserAgent,
 	PrismicRepositoryUserAgents,
-	RawLimit,
+	PushChangesRawLimit,
 	TransactionalMergeArgs,
 	TransactionalMergeReturnType,
 	FrameworkWroomTelemetryID,
@@ -421,7 +421,7 @@ export class PrismicRepositoryManager extends BaseManager {
 					return this._decodeLimitOrThrow(
 						await response.json(),
 						response.status,
-						LimitType.SOFT,
+						PushChangesLimitType.SOFT,
 					);
 				case 204:
 					return null;
@@ -431,7 +431,7 @@ export class PrismicRepositoryManager extends BaseManager {
 					return this._decodeLimitOrThrow(
 						await response.json(),
 						response.status,
-						LimitType.HARD,
+						PushChangesLimitType.HARD,
 					);
 				case 400:
 					const text = await response.text();
@@ -509,9 +509,9 @@ export class PrismicRepositoryManager extends BaseManager {
 	private _decodeLimitOrThrow(
 		potentialLimit: unknown,
 		statusCode: number,
-		limitType: LimitType,
-	): Limit | null {
-		return fold<t.Errors, RawLimit, Limit | null>(
+		limitType: PushChangesLimitType,
+	): PushChangesLimit | null {
+		return fold<t.Errors, PushChangesRawLimit, PushChangesLimit | null>(
 			() => {
 				const error: ClientError = {
 					status: statusCode,
@@ -521,12 +521,12 @@ export class PrismicRepositoryManager extends BaseManager {
 				};
 				throw error;
 			},
-			(rawLimit: RawLimit) => {
+			(rawLimit: PushChangesRawLimit) => {
 				const limit = { ...rawLimit, type: limitType };
 
 				return limit;
 			},
-		)(RawLimit.decode(potentialLimit));
+		)(PushChangesRawLimit.decode(potentialLimit));
 	}
 
 	private async _fetch(args: {
diff --git a/packages/manager/src/managers/prismicRepository/types.ts b/packages/manager/src/managers/prismicRepository/types.ts
index c0c59fc752..5ffca8c79c 100644
--- a/packages/manager/src/managers/prismicRepository/types.ts
+++ b/packages/manager/src/managers/prismicRepository/types.ts
@@ -85,7 +85,7 @@ export interface BulkBody extends Record<string, unknown> {
 	changes: AllChangeTypes[];
 }
 
-export const RawLimit = t.type({
+export const PushChangesRawLimit = t.type({
 	details: t.type({
 		customTypes: t.array(
 			t.type({
@@ -96,13 +96,13 @@ export const RawLimit = t.type({
 		),
 	}),
 });
-export type RawLimit = t.TypeOf<typeof RawLimit>;
-export enum LimitType {
+export type PushChangesRawLimit = t.TypeOf<typeof PushChangesRawLimit>;
+export enum PushChangesLimitType {
 	SOFT = "SOFT",
 	HARD = "HARD",
 }
-export type Limit = RawLimit & {
-	type: LimitType;
+export type PushChangesLimit = PushChangesRawLimit & {
+	type: PushChangesLimitType;
 };
 
 export interface ClientError {
@@ -130,7 +130,7 @@ export type TransactionalMergeArgs = {
 	changes: (CustomTypeChange | SliceChange)[];
 };
 
-export type TransactionalMergeReturnType = Limit | null;
+export type TransactionalMergeReturnType = PushChangesLimit | null;
 
 /**
  * Framework id sent to Segment from wroom. Property used for the "framework"
diff --git a/packages/manager/src/managers/telemetry/types.ts b/packages/manager/src/managers/telemetry/types.ts
index 144f95ec77..1d3c4a31af 100644
--- a/packages/manager/src/managers/telemetry/types.ts
+++ b/packages/manager/src/managers/telemetry/types.ts
@@ -1,5 +1,5 @@
 import { CustomTypeFormat } from "../customTypes/types";
-import type { LimitType } from "../prismicRepository/types";
+import type { PushChangesLimitType } from "../prismicRepository/types";
 
 export const SegmentEventType = {
 	command_init_start: "command:init:start",
@@ -248,7 +248,7 @@ type ChangesPushedSegmentEvent = SegmentEvent<
 
 type ChangesLimitReachSegmentEvent = SegmentEvent<
 	typeof SegmentEventType.changes_limitReach,
-	{ limitType: LimitType }
+	{ limitType: PushChangesLimitType }
 >;
 
 type EditorWidgetUsedSegmentEvent = SegmentEvent<
diff --git a/packages/slice-machine/components/CustomTypeTable/changesPage.tsx b/packages/slice-machine/components/CustomTypeTable/changesPage.tsx
index c0d17609a1..6af2fc36d7 100644
--- a/packages/slice-machine/components/CustomTypeTable/changesPage.tsx
+++ b/packages/slice-machine/components/CustomTypeTable/changesPage.tsx
@@ -90,6 +90,7 @@ export const CustomTypeTable: React.FC<CustomTypeTableProps> = ({
               tabIndex={0}
               className="disabled"
               data-cy={`custom-type-${customType.remote.id}`}
+              key={customType.remote.id}
             >
               <CustomTypeChangeRow
                 ct={customType.remote}
diff --git a/packages/slice-machine/components/DeleteDocumentsDrawer/HardDeleteDocumentsDrawer.tsx b/packages/slice-machine/components/DeleteDocumentsDrawer/HardDeleteDocumentsDrawer.tsx
index 9e81cdbf29..e6e344331a 100644
--- a/packages/slice-machine/components/DeleteDocumentsDrawer/HardDeleteDocumentsDrawer.tsx
+++ b/packages/slice-machine/components/DeleteDocumentsDrawer/HardDeleteDocumentsDrawer.tsx
@@ -1,40 +1,28 @@
 import React from "react";
 
 import { Text } from "theme-ui";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { Button } from "@components/Button";
 import { useSelector } from "react-redux";
 import { SliceMachineStoreType } from "@src/redux/type";
-import { ModalKeysEnum } from "@src/modules/modal/types";
-import { isModalOpen } from "@src/modules/modal";
 import { selectAllCustomTypes } from "@src/modules/availableCustomTypes";
 import { isRemoteOnly } from "@lib/models/common/ModelData";
-import { ToasterType } from "@src/modules/toaster";
 import { getModelId } from "@lib/models/common/ModelData";
 import { AssociatedDocumentsCard } from "./AssociatedDocumentsCard";
 import { SliceMachineDrawerUI } from "@components/SliceMachineDrawer";
+import { PushChangesLimit } from "@slicemachine/manager";
 
 export const HardDeleteDocumentsDrawer: React.FunctionComponent<{
   pushChanges: (confirmDeleteDocuments: boolean) => void;
-}> = ({ pushChanges }) => {
-  const { isDeleteDocumentsDrawerOpen, remoteOnlyCustomTypes, modalData } =
-    useSelector((store: SliceMachineStoreType) => ({
-      isDeleteDocumentsDrawerOpen: isModalOpen(
-        store,
-        ModalKeysEnum.HARD_DELETE_DOCUMENTS_DRAWER,
-      ),
+  modalData?: PushChangesLimit;
+  onClose: () => void;
+}> = ({ pushChanges, modalData, onClose }) => {
+  const { remoteOnlyCustomTypes } = useSelector(
+    (store: SliceMachineStoreType) => ({
       remoteOnlyCustomTypes: selectAllCustomTypes(store).filter(isRemoteOnly),
-      modalData: store.pushChanges,
-    }));
-
-  const { closeModals, openToaster } = useSliceMachineActions();
-
-  if (!isDeleteDocumentsDrawerOpen) return null;
+    }),
+  );
 
-  if (modalData?.type !== "HARD") {
-    openToaster("No change data", ToasterType.ERROR);
-    return null;
-  }
+  if (modalData?.type !== "HARD") return null;
 
   const associatedDocumentsCards = modalData.details.customTypes.map(
     (customTypeDetail) => {
@@ -57,14 +45,14 @@ export const HardDeleteDocumentsDrawer: React.FunctionComponent<{
 
   return (
     <SliceMachineDrawerUI
-      isOpen={isDeleteDocumentsDrawerOpen}
+      isOpen={modalData.type === "HARD"}
       title="Manual action required"
+      onClose={onClose}
       footer={
         <Button
           label="Try again"
           variant="primary"
           onClick={() => {
-            closeModals();
             pushChanges(false);
           }}
           sx={{
diff --git a/packages/slice-machine/components/DeleteDocumentsDrawer/ReferencesErrorDrawer.tsx b/packages/slice-machine/components/DeleteDocumentsDrawer/ReferencesErrorDrawer.tsx
deleted file mode 100644
index b44924bc4d..0000000000
--- a/packages/slice-machine/components/DeleteDocumentsDrawer/ReferencesErrorDrawer.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from "react";
-import { Text } from "theme-ui";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { Button } from "@components/Button";
-import { useSelector } from "react-redux";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { ModalKeysEnum } from "@src/modules/modal/types";
-import { isModalOpen } from "@src/modules/modal";
-import { getModelId, hasLocal } from "@lib/models/common/ModelData";
-import { CustomTypesReferencesCard } from "./AssociatedDocumentsCard";
-import { ToasterType } from "@src/modules/toaster";
-import { selectAllCustomTypes } from "@src/modules/availableCustomTypes";
-import { SliceMachineDrawerUI } from "@components/SliceMachineDrawer";
-
-export const ReferencesErrorDrawer: React.FunctionComponent<{
-  pushChanges: (confirmDeleteDocuments: boolean) => void;
-}> = ({ pushChanges }) => {
-  const { isOpen, modalData, localCustomTypes } = useSelector(
-    (store: SliceMachineStoreType) => ({
-      isOpen: isModalOpen(store, ModalKeysEnum.REFERENCES_MISSING_DRAWER),
-      localCustomTypes: selectAllCustomTypes(store).filter(hasLocal),
-      modalData: store.pushChanges,
-    }),
-  );
-  const { closeModals, openToaster } = useSliceMachineActions();
-
-  if (!isOpen) return null;
-
-  if (modalData?.details === undefined) {
-    openToaster("No change data", ToasterType.ERROR);
-    return null;
-  }
-
-  const hasMoreThanOne = modalData?.details.customTypes.length > 1;
-
-  const associatedDocumentsCards = modalData.details.customTypes.map(
-    (customTypeDetail) => {
-      const customType = localCustomTypes.find(
-        (customType) => getModelId(customType) === customTypeDetail.id,
-      );
-      if (customType === undefined) return null;
-
-      return (
-        <CustomTypesReferencesCard
-          format={customType.local.format}
-          id={customType.local.id}
-          name={customType.local.label ?? customType.local.id}
-        />
-      );
-    },
-  );
-
-  return (
-    <SliceMachineDrawerUI
-      isOpen={isOpen}
-      title={"Missing Slices"}
-      footer={
-        <>
-          <Button
-            label="Try again"
-            variant="primary"
-            onClick={() => {
-              closeModals();
-              pushChanges(false);
-            }}
-            sx={{
-              fontWeight: "bold",
-              color: "white",
-              borderRadius: 6,
-              width: "100%",
-            }}
-          />
-        </>
-      }
-      explanations={
-        <>
-          <Text sx={{ fontWeight: "bold", mb: 1, lineHeight: "24px" }}>
-            You have{hasMoreThanOne ? "" : " a"} type
-            {hasMoreThanOne ? "s" : ""} that reference{" "}
-            {hasMoreThanOne ? "" : "s"} one or more missing Slices
-          </Text>
-          <Text sx={{ mb: 24 }}>
-            Before pushing, remove references to any missing Slices by opening{" "}
-            the affected type{hasMoreThanOne ? "s" : ""} and clicking the{" "}
-            <b>Save</b> button.
-          </Text>
-          {associatedDocumentsCards}
-        </>
-      }
-    />
-  );
-};
diff --git a/packages/slice-machine/components/DeleteDocumentsDrawer/SoftDeleteDocumentsDrawer.tsx b/packages/slice-machine/components/DeleteDocumentsDrawer/SoftDeleteDocumentsDrawer.tsx
index b2e022826c..ab914c4caf 100644
--- a/packages/slice-machine/components/DeleteDocumentsDrawer/SoftDeleteDocumentsDrawer.tsx
+++ b/packages/slice-machine/components/DeleteDocumentsDrawer/SoftDeleteDocumentsDrawer.tsx
@@ -1,17 +1,14 @@
 import React, { useState } from "react";
 import { Flex, Text, Checkbox, ThemeUIStyleObject, Label } from "theme-ui";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { Button } from "@components/Button";
 import { useSelector } from "react-redux";
 import { SliceMachineStoreType } from "@src/redux/type";
-import { ModalKeysEnum } from "@src/modules/modal/types";
-import { isModalOpen } from "@src/modules/modal";
 import { isRemoteOnly } from "@lib/models/common/ModelData";
 import { selectAllCustomTypes } from "@src/modules/availableCustomTypes";
-import { ToasterType } from "@src/modules/toaster";
 import { getModelId } from "@lib/models/common/ModelData";
 import { AssociatedDocumentsCard } from "./AssociatedDocumentsCard";
 import { SliceMachineDrawerUI } from "@components/SliceMachineDrawer";
+import { PushChangesLimit } from "@slicemachine/manager";
 
 const ConfirmationDialogue: React.FC<{
   isConfirmed: boolean;
@@ -43,27 +40,18 @@ const ConfirmationDialogue: React.FC<{
 
 export const SoftDeleteDocumentsDrawer: React.FunctionComponent<{
   pushChanges: (confirmDeleteDocuments: boolean) => void;
-}> = ({ pushChanges }) => {
+  modalData?: PushChangesLimit;
+  onClose: () => void;
+}> = ({ pushChanges, modalData, onClose }) => {
   const [confirmDeleteDocuments, setConfirmDeleteDocuments] = useState(false);
 
-  const { isDeleteDocumentsDrawerOpen, remoteOnlyCustomTypes, modalData } =
-    useSelector((store: SliceMachineStoreType) => ({
-      isDeleteDocumentsDrawerOpen: isModalOpen(
-        store,
-        ModalKeysEnum.SOFT_DELETE_DOCUMENTS_DRAWER,
-      ),
+  const { remoteOnlyCustomTypes } = useSelector(
+    (store: SliceMachineStoreType) => ({
       remoteOnlyCustomTypes: selectAllCustomTypes(store).filter(isRemoteOnly),
-      modalData: store.pushChanges,
-    }));
-
-  const { closeModals, openToaster } = useSliceMachineActions();
-
-  if (!isDeleteDocumentsDrawerOpen) return null;
+    }),
+  );
 
-  if (modalData?.type !== "SOFT") {
-    openToaster("No change data", ToasterType.ERROR);
-    return null;
-  }
+  if (modalData?.type !== "SOFT") return null;
 
   const associatedDocumentsCards = modalData.details.customTypes.map(
     (customTypeDetail) => {
@@ -86,8 +74,9 @@ export const SoftDeleteDocumentsDrawer: React.FunctionComponent<{
 
   return (
     <SliceMachineDrawerUI
-      isOpen={isDeleteDocumentsDrawerOpen}
+      isOpen={modalData.type === "SOFT"}
       title="Confirm deletion"
+      onClose={onClose}
       footer={
         <>
           <ConfirmationDialogue
@@ -101,7 +90,6 @@ export const SoftDeleteDocumentsDrawer: React.FunctionComponent<{
             label="Push changes"
             variant="primary"
             onClick={() => {
-              closeModals();
               pushChanges(confirmDeleteDocuments);
             }}
             disabled={!confirmDeleteDocuments}
diff --git a/packages/slice-machine/components/DeleteDocumentsDrawer/index.tsx b/packages/slice-machine/components/DeleteDocumentsDrawer/index.tsx
index 7d4e6fab4a..b16f5babec 100644
--- a/packages/slice-machine/components/DeleteDocumentsDrawer/index.tsx
+++ b/packages/slice-machine/components/DeleteDocumentsDrawer/index.tsx
@@ -1,3 +1,2 @@
 export { SoftDeleteDocumentsDrawer } from "./SoftDeleteDocumentsDrawer";
 export { HardDeleteDocumentsDrawer } from "./HardDeleteDocumentsDrawer";
-export { ReferencesErrorDrawer } from "./ReferencesErrorDrawer";
diff --git a/packages/slice-machine/components/SliceMachineDrawer/index.tsx b/packages/slice-machine/components/SliceMachineDrawer/index.tsx
index bd2c0befe1..64d0b8542a 100644
--- a/packages/slice-machine/components/SliceMachineDrawer/index.tsx
+++ b/packages/slice-machine/components/SliceMachineDrawer/index.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import Drawer from "rc-drawer";
 import { Close, Flex, Heading } from "theme-ui";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import Card from "@components/Card";
 
 export const SliceMachineDrawerUI: React.FunctionComponent<{
@@ -9,15 +8,14 @@ export const SliceMachineDrawerUI: React.FunctionComponent<{
   title: string;
   footer: React.ReactNode;
   explanations: React.ReactNode;
-}> = ({ isOpen, title, footer, explanations }) => {
-  const { closeModals } = useSliceMachineActions();
-
+  onClose: () => void;
+}> = ({ isOpen, title, footer, explanations, onClose }) => {
   return (
     <Drawer
       placement="right"
       open={isOpen}
       level={null}
-      onClose={closeModals}
+      onClose={onClose}
       width={496}
     >
       <Card
@@ -54,7 +52,7 @@ export const SliceMachineDrawerUI: React.FunctionComponent<{
                 {title}
               </Heading>
             </Flex>
-            <Close type="button" onClick={() => closeModals()} />
+            <Close type="button" onClick={() => onClose()} />
           </Flex>
         )}
         Footer={() => (
diff --git a/packages/slice-machine/lib/models/common/TransactionalPush.ts b/packages/slice-machine/lib/models/common/TransactionalPush.ts
deleted file mode 100644
index dc5dced4c5..0000000000
--- a/packages/slice-machine/lib/models/common/TransactionalPush.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export type PushChangesPayload = {
-  confirmDeleteDocuments: boolean;
-};
-
-export type InvalidCustomTypeResponse = {
-  type: "INVALID_CUSTOM_TYPES";
-  details: {
-    customTypes: { id: string }[];
-  };
-};
diff --git a/packages/slice-machine/pages/changes.tsx b/packages/slice-machine/pages/changes.tsx
index 2d333ab7ac..b9798a2324 100644
--- a/packages/slice-machine/pages/changes.tsx
+++ b/packages/slice-machine/pages/changes.tsx
@@ -1,9 +1,8 @@
 import { Button } from "@prismicio/editor-ui";
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo, useState } from "react";
+import { toast } from "react-toastify";
 import Head from "next/head";
 import { BaseStyles } from "theme-ui";
-import { useSelector } from "react-redux";
-import { SliceMachineStoreType } from "../src/redux/type";
 import {
   AppLayout,
   AppLayoutActions,
@@ -18,19 +17,19 @@ import { NoChangesBlankSlate } from "@src/features/changes/BlankSlates";
 
 import { AuthStatus } from "@src/modules/userContext/types";
 import { unSyncStatuses, useUnSyncChanges } from "@src/hooks/useUnSyncChanges";
-import { isLoading } from "@src/modules/loading";
-import { LoadingKeysEnum } from "@src/modules/loading/types";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import {
   SoftDeleteDocumentsDrawer,
   HardDeleteDocumentsDrawer,
-  ReferencesErrorDrawer,
 } from "@components/DeleteDocumentsDrawer";
 import { hasLocal } from "@lib/models/common/ModelData";
 import {
   ChangedCustomType,
   ChangedSlice,
 } from "@lib/models/common/ModelStatus";
+import { PushChangesLimit } from "@slicemachine/manager";
+import { pushChanges } from "@src/features/changes/actions/pushChanges";
+import { getState } from "@src/apiClient";
 
 const Changes: React.FunctionComponent = () => {
   const {
@@ -59,28 +58,57 @@ const Changes: React.FunctionComponent = () => {
     return { changedSlices, changedCustomTypes };
   }, [unSyncedSlices, unSyncedCustomTypes, modelsStatuses]);
 
-  const { pushChanges, closeModals } = useSliceMachineActions();
+  const { pushChangesSuccess, refreshState } = useSliceMachineActions();
+  const [isSyncing, setIsSyncing] = useState(false);
+  const [openModalData, setOpenModalData] = useState<
+    PushChangesLimit | undefined
+  >(undefined);
 
-  const { isSyncing } = useSelector((store: SliceMachineStoreType) => ({
-    isSyncing: isLoading(store, LoadingKeysEnum.CHANGES_PUSH),
-  }));
+  const numberOfChanges = unSyncedSlices.length + unSyncedCustomTypes.length;
 
-  useEffect(() => {
-    return () => {
-      closeModals();
-    };
-    // Do not remote the eslint disable, fixing the eslint warning creates a bug that prevent from opening all modals
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const onPush = async (confirmDeleteDocuments: boolean) => {
+    try {
+      setIsSyncing(true);
+      setOpenModalData(undefined);
 
-  const numberOfChanges = unSyncedSlices.length + unSyncedCustomTypes.length;
+      const limit = await pushChanges({
+        confirmDeleteDocuments,
+        changedSlices,
+        changedCustomTypes,
+      });
+
+      if (limit !== undefined) {
+        setOpenModalData(limit);
+      } else {
+        // TODO(DT-1737): Remove the use of global getState
+        const serverState = await getState();
+        refreshState({
+          env: serverState.env,
+          remoteCustomTypes: serverState.remoteCustomTypes,
+          customTypes: serverState.customTypes,
+          libraries: serverState.libraries,
+          remoteSlices: serverState.remoteSlices,
+          clientError: serverState.clientError,
+        });
 
-  const onPush = (confirmDeleteDocuments: boolean) =>
-    pushChanges({
-      confirmDeleteDocuments: confirmDeleteDocuments,
-      changedSlices,
-      changedCustomTypes,
-    });
+        // Update last sync value in local storage
+        pushChangesSuccess();
+
+        toast.success("All slices and types have been pushed");
+      }
+    } catch (error) {
+      console.error(
+        "Something went wrong when manually pushing your changes",
+        error,
+      );
+
+      toast.error(
+        "Something went wrong when pushing your changes. Check your terminal logs.",
+      );
+    }
+
+    setIsSyncing(false);
+  };
 
   const PageContent = useMemo(() => {
     if (!isOnline) {
@@ -123,7 +151,7 @@ const Changes: React.FunctionComponent = () => {
           <AppLayoutBreadcrumb folder="Changes" />
           <AppLayoutActions>
             <Button
-              onClick={() => onPush(false)} // not deleting documents by default
+              onClick={() => void onPush(false)} // not deleting documents by default
               loading={isSyncing}
               disabled={
                 numberOfChanges === 0 ||
@@ -141,9 +169,20 @@ const Changes: React.FunctionComponent = () => {
         <AppLayoutContent>
           <BaseStyles sx={{ display: "flex", flexDirection: "column" }}>
             {PageContent}
-            <SoftDeleteDocumentsDrawer pushChanges={onPush} />
-            <HardDeleteDocumentsDrawer pushChanges={onPush} />
-            <ReferencesErrorDrawer pushChanges={onPush} />
+            <SoftDeleteDocumentsDrawer
+              pushChanges={(confirmDeleteDocuments) =>
+                void onPush(confirmDeleteDocuments)
+              }
+              modalData={openModalData}
+              onClose={() => setOpenModalData(undefined)}
+            />
+            <HardDeleteDocumentsDrawer
+              pushChanges={(confirmDeleteDocuments) =>
+                void onPush(confirmDeleteDocuments)
+              }
+              modalData={openModalData}
+              onClose={() => setOpenModalData(undefined)}
+            />
           </BaseStyles>
         </AppLayoutContent>
       </AppLayout>
diff --git a/packages/slice-machine/src/features/changes/actions/pushChanges.ts b/packages/slice-machine/src/features/changes/actions/pushChanges.ts
new file mode 100644
index 0000000000..384febc983
--- /dev/null
+++ b/packages/slice-machine/src/features/changes/actions/pushChanges.ts
@@ -0,0 +1,66 @@
+import { pushChanges as pushChangesCall, telemetry } from "@src/apiClient";
+import {
+  ChangedCustomType,
+  ChangedSlice,
+} from "@lib/models/common/ModelStatus";
+import { PushChangesLimit } from "@slicemachine/manager";
+
+import { trackPushChangesSuccess } from "./trackPushChangesSuccess";
+
+type PushChangesArgs = {
+  changedSlices: ReadonlyArray<ChangedSlice>;
+  changedCustomTypes: ReadonlyArray<ChangedCustomType>;
+  confirmDeleteDocuments?: boolean;
+};
+
+export async function pushChanges(
+  args: PushChangesArgs,
+): Promise<PushChangesLimit | undefined> {
+  const {
+    changedSlices,
+    changedCustomTypes,
+    confirmDeleteDocuments = false,
+  } = args;
+
+  const startTime = Date.now();
+  const sliceChanges = changedSlices.map((sliceChange) => ({
+    id: sliceChange.slice.model.id,
+    type: "Slice" as const,
+    libraryID: sliceChange.slice.from,
+    status: sliceChange.status,
+  }));
+  const customTypeChanges = changedCustomTypes.map((customTypeChange) => ({
+    id: customTypeChange.customType.id,
+    type: "CustomType" as const,
+    status: customTypeChange.status,
+  }));
+
+  // Creating a new payload with the correct format
+  const pushPayload = {
+    confirmDeleteDocuments,
+    changes: [...sliceChanges, ...customTypeChanges],
+  };
+
+  const response = await pushChangesCall(pushPayload);
+
+  if (response) {
+    // Tracking when a limit has been reached
+    void telemetry.track({
+      event: "changes:limit-reach",
+      limitType: response.type,
+    });
+
+    return response;
+  }
+
+  trackPushChangesSuccess({
+    changedCustomTypes,
+    changedSlices,
+    // Currently, we only pass confirmDeleteDocuments when the user
+    // has confirmed the deletion of documents
+    hasDeletedDocuments: confirmDeleteDocuments,
+    startTime,
+  });
+
+  return undefined;
+}
diff --git a/packages/slice-machine/src/modules/pushChangesSaga/trackPushChangesSuccess.ts b/packages/slice-machine/src/features/changes/actions/trackPushChangesSuccess.ts
similarity index 80%
rename from packages/slice-machine/src/modules/pushChangesSaga/trackPushChangesSuccess.ts
rename to packages/slice-machine/src/features/changes/actions/trackPushChangesSuccess.ts
index 1c94336c03..e45a6e9f91 100644
--- a/packages/slice-machine/src/modules/pushChangesSaga/trackPushChangesSuccess.ts
+++ b/packages/slice-machine/src/features/changes/actions/trackPushChangesSuccess.ts
@@ -1,17 +1,21 @@
-import { ChangesPushSagaPayload } from ".";
+import {
+  ChangedCustomType,
+  ChangedSlice,
+  ModelStatus,
+} from "@lib/models/common/ModelStatus";
 import { telemetry } from "@src/apiClient";
 import { countMissingScreenshots } from "@src/domain/slice";
-import { ModelStatus } from "@lib/models/common/ModelStatus";
 
-type trackingParameters = ChangesPushSagaPayload & { startTime: number };
+type TrackPushChangesSuccessArgs = {
+  changedSlices: ReadonlyArray<ChangedSlice>;
+  changedCustomTypes: ReadonlyArray<ChangedCustomType>;
+  hasDeletedDocuments: boolean;
+  startTime: number;
+};
 
-export function trackPushChangesSuccess(params: trackingParameters) {
-  const {
-    startTime,
-    confirmDeleteDocuments,
-    changedCustomTypes,
-    changedSlices,
-  } = params;
+export function trackPushChangesSuccess(args: TrackPushChangesSuccessArgs) {
+  const { startTime, hasDeletedDocuments, changedCustomTypes, changedSlices } =
+    args;
 
   const customTypesStats = changedCustomTypes.reduce<{
     customTypesCreated: number;
@@ -80,14 +84,14 @@ export function trackPushChangesSuccess(params: trackingParameters) {
   );
   const duration = Date.now() - startTime;
 
-  return telemetry.track({
+  void telemetry.track({
     event: "changes:pushed",
     ...customTypesStats,
     ...slicesStats,
     total: total,
     missingScreenshots,
     duration: duration,
-    hasDeletedDocuments: confirmDeleteDocuments,
+    hasDeletedDocuments,
     _includeEnvironmentKind: true,
   });
 }
diff --git a/packages/slice-machine/src/modules/loading/types.ts b/packages/slice-machine/src/modules/loading/types.ts
index a4f851d9e4..4b097f7cbe 100644
--- a/packages/slice-machine/src/modules/loading/types.ts
+++ b/packages/slice-machine/src/modules/loading/types.ts
@@ -10,7 +10,6 @@ export enum LoadingKeysEnum {
   RENAME_SLICE = "RENAME_SLICE",
   GENERATE_SLICE_CUSTOM_SCREENSHOT = "GENERATE_SLICE_CUSTOM_SCREENSHOT",
   SAVE_SLICE = "SAVE_SLICE",
-  CHANGES_PUSH = "CHANGES_PUSH",
   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 ca98e147e5..babb8be865 100644
--- a/packages/slice-machine/src/modules/modal/types.ts
+++ b/packages/slice-machine/src/modules/modal/types.ts
@@ -5,9 +5,6 @@ export enum ModalKeysEnum {
   SCREENSHOT_PREVIEW = "SCREENSHOT_PREVIEW",
   SCREENSHOTS = "SCREENSHOTS",
   DELETE_SLICE = "DELETE_SLICE",
-  SOFT_DELETE_DOCUMENTS_DRAWER = "SOFT_DELETE_DOCUMENTS_DRAWER",
-  HARD_DELETE_DOCUMENTS_DRAWER = "HARD_DELETE_DOCUMENTS_DRAWER",
-  REFERENCES_MISSING_DRAWER = "REFERENCES_MISSING_DRAWER",
   SIMULATOR_SETUP = "SIMULATOR_SETUP",
 }
 
diff --git a/packages/slice-machine/src/modules/pushChangesSaga/index.ts b/packages/slice-machine/src/modules/pushChangesSaga/index.ts
deleted file mode 100644
index ac24e6c826..0000000000
--- a/packages/slice-machine/src/modules/pushChangesSaga/index.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-import { getState, pushChanges, telemetry } from "../../apiClient";
-import {
-  call,
-  fork,
-  put,
-  SagaReturnType,
-  takeLatest,
-} from "redux-saga/effects";
-import {
-  ActionType,
-  createAsyncAction,
-  getType,
-  Reducer,
-} from "typesafe-actions";
-import { withLoader } from "../loading";
-import { openToasterCreator, ToasterType } from "../toaster";
-import { modalOpenCreator } from "../modal";
-import { ModalKeysEnum } from "../modal/types";
-import { LoadingKeysEnum } from "../loading/types";
-import { refreshStateCreator } from "../environment";
-import {
-  InvalidCustomTypeResponse,
-  PushChangesPayload,
-} from "@lib/models/common/TransactionalPush";
-import { trackPushChangesSuccess } from "./trackPushChangesSuccess";
-import {
-  isUnauthenticatedError,
-  isUnauthorizedError,
-  SliceMachineManagerClient,
-} from "@slicemachine/manager/client";
-import {
-  ChangedCustomType,
-  ChangedSlice,
-} from "@lib/models/common/ModelStatus";
-
-export type ChangesPushSagaPayload = PushChangesPayload & {
-  changedSlices: ReadonlyArray<ChangedSlice>;
-  changedCustomTypes: ReadonlyArray<ChangedCustomType>;
-};
-
-type Limit = NonNullable<
-  Awaited<
-    ReturnType<SliceMachineManagerClient["prismicRepository"]["pushChanges"]>
-  >
->;
-
-export const changesPushCreator = createAsyncAction(
-  "PUSH_CHANGES.REQUEST",
-  "PUSH_CHANGES.RESPONSE",
-  "PUSH_CHANGES.FAILURE",
-)<ChangesPushSagaPayload, undefined, Limit | InvalidCustomTypeResponse>();
-
-export const sortDocumentLimits = (limit: Readonly<Limit>) => ({
-  ...limit,
-  details: {
-    ...limit.details,
-    customTypes: [...limit.details.customTypes].sort(
-      (doc1, doc2) => doc2.numberOfDocuments - doc1.numberOfDocuments,
-    ),
-  },
-});
-
-const MODAL_KEY_MAP = {
-  ["INVALID_CUSTOM_TYPES"]: ModalKeysEnum.REFERENCES_MISSING_DRAWER,
-  ["SOFT"]: ModalKeysEnum.SOFT_DELETE_DOCUMENTS_DRAWER,
-  ["HARD"]: ModalKeysEnum.HARD_DELETE_DOCUMENTS_DRAWER,
-};
-
-export function* changesPushSaga({
-  payload,
-}: ReturnType<typeof changesPushCreator.request>): Generator {
-  const startTime = Date.now();
-  const { changedSlices, changedCustomTypes } = payload;
-
-  const sliceChanges = changedSlices.map((sliceChange) => ({
-    id: sliceChange.slice.model.id,
-    type: "Slice" as const,
-    libraryID: sliceChange.slice.from,
-    status: sliceChange.status,
-  }));
-  const customTypeChanges = changedCustomTypes.map((customTypeChange) => ({
-    id: customTypeChange.customType.id,
-    type: "CustomType" as const,
-    status: customTypeChange.status,
-  }));
-
-  // Creating a new payload with the correct format
-  const pushPayload = {
-    confirmDeleteDocuments: payload.confirmDeleteDocuments,
-    changes: [...sliceChanges, ...customTypeChanges],
-  };
-
-  try {
-    const response = (yield call(pushChanges, pushPayload)) as SagaReturnType<
-      typeof pushChanges
-    >;
-
-    if (response) {
-      // sending failure event
-      yield put(changesPushCreator.failure(sortDocumentLimits(response)));
-      // Tracking when a limit has been reached
-      void telemetry.track({
-        event: "changes:limit-reach",
-        limitType: response.type,
-      });
-      // Open the corresponding drawer
-      yield put(
-        modalOpenCreator({
-          modalKey: MODAL_KEY_MAP[response.type],
-        }),
-      );
-      return;
-    }
-
-    const serverState = (yield call(getState)) as SagaReturnType<
-      typeof getState
-    >;
-    yield put(
-      refreshStateCreator({
-        env: serverState.env,
-        remoteCustomTypes: serverState.remoteCustomTypes,
-        localCustomTypes: serverState.customTypes,
-        libraries: serverState.libraries,
-        remoteSlices: serverState.remoteSlices,
-        clientError: serverState.clientError,
-      }),
-    );
-
-    // Tracking the success of the push
-    void trackPushChangesSuccess({ ...payload, startTime });
-
-    // Send global success event
-    yield put(changesPushCreator.success());
-
-    // Display success toaster
-    yield put(
-      openToasterCreator({
-        content: "All slices and types have been pushed",
-        type: ToasterType.SUCCESS,
-      }),
-    );
-  } catch (error) {
-    if (isUnauthenticatedError(error) || isUnauthorizedError(error)) {
-      yield put(modalOpenCreator({ modalKey: ModalKeysEnum.LOGIN }));
-      return;
-    }
-    // TODO: handle auth errors
-    yield put(
-      openToasterCreator({
-        content:
-          "Something went wrong when pushing your changes. Check your terminal logs.",
-        type: ToasterType.ERROR,
-      }),
-    );
-  }
-}
-
-function* watchChangesPush() {
-  yield takeLatest(
-    getType(changesPushCreator.request),
-    withLoader(changesPushSaga, LoadingKeysEnum.CHANGES_PUSH),
-  );
-}
-
-// Saga Exports
-export function* watchChangesPushSagas() {
-  yield fork(watchChangesPush);
-}
-
-// Reducer
-export type PushChangesStoreType = Readonly<
-  Limit | InvalidCustomTypeResponse | null
->;
-type PushChangesActions = ActionType<typeof changesPushCreator>;
-
-export const pushChangesReducer: Reducer<
-  PushChangesStoreType,
-  PushChangesActions
-> = (state = null, action) => {
-  switch (action.type) {
-    case getType(changesPushCreator.request):
-    case getType(changesPushCreator.success):
-      return null;
-
-    case getType(changesPushCreator.failure): {
-      return action.payload;
-    }
-    default:
-      return state;
-  }
-};
diff --git a/packages/slice-machine/src/modules/useSliceMachineActions.ts b/packages/slice-machine/src/modules/useSliceMachineActions.ts
index 155b3e78c9..1c48b42959 100644
--- a/packages/slice-machine/src/modules/useSliceMachineActions.ts
+++ b/packages/slice-machine/src/modules/useSliceMachineActions.ts
@@ -10,6 +10,7 @@ import {
   hasSeenTutorialsToolTipCreator,
   hasSeenSimulatorToolTipCreator,
   hasSeenChangesToolTipCreator,
+  changesPushSuccessCreator,
 } from "./userContext";
 import { getChangelogCreator, refreshStateCreator } from "./environment";
 import {
@@ -35,7 +36,6 @@ import { GenericToastTypes, openToasterCreator } from "./toaster";
 import { CustomTypes } from "@lib/models/common/CustomType";
 import { CustomType } from "@prismicio/types-internal/lib/customtypes";
 import { ComponentUI, ScreenshotUI } from "../../lib/models/common/ComponentUI";
-import { ChangesPushSagaPayload, changesPushCreator } from "./pushChangesSaga";
 import { saveSliceMockCreator } from "./simulator";
 import { SaveSliceMockRequest } from "@src/apiClient";
 import { CustomTypeFormat } from "@slicemachine/manager";
@@ -70,18 +70,6 @@ const useSliceMachineActions = () => {
     dispatch(modalOpenCreator({ modalKey: ModalKeysEnum.SCREENSHOT_PREVIEW }));
   const openDeleteSliceModal = () =>
     dispatch(modalOpenCreator({ modalKey: ModalKeysEnum.DELETE_SLICE }));
-  const openDeleteDocumentsDrawer = () =>
-    dispatch(
-      modalOpenCreator({
-        modalKey: ModalKeysEnum.SOFT_DELETE_DOCUMENTS_DRAWER,
-      }),
-    );
-  const openDeleteDocumentsDrawerOverLimit = () =>
-    dispatch(
-      modalOpenCreator({
-        modalKey: ModalKeysEnum.HARD_DELETE_DOCUMENTS_DRAWER,
-      }),
-    );
   const openSimulatorSetupModal = () =>
     dispatch(modalOpenCreator({ modalKey: ModalKeysEnum.SIMULATOR_SETUP }));
 
@@ -203,8 +191,7 @@ const useSliceMachineActions = () => {
       }),
     );
 
-  const pushChanges = (payload: ChangesPushSagaPayload) =>
-    dispatch(changesPushCreator.request(payload));
+  const pushChangesSuccess = () => dispatch(changesPushSuccessCreator());
 
   // Toaster store
   const openToaster = (
@@ -238,8 +225,6 @@ const useSliceMachineActions = () => {
     checkSimulatorSetup,
     connectToSimulatorFailure,
     connectToSimulatorSuccess,
-    openDeleteDocumentsDrawer,
-    openDeleteDocumentsDrawerOverLimit,
     connectToSimulatorIframe,
     refreshState,
     openScreenshotsModal,
@@ -270,9 +255,9 @@ const useSliceMachineActions = () => {
     openRenameSliceModal,
     closeModals,
     openToaster,
-    pushChanges,
     saveSliceMock,
     getChangelog,
+    pushChangesSuccess,
   };
 };
 
diff --git a/packages/slice-machine/src/modules/userContext/index.ts b/packages/slice-machine/src/modules/userContext/index.ts
index e0cb54fc54..976f5bf5dc 100644
--- a/packages/slice-machine/src/modules/userContext/index.ts
+++ b/packages/slice-machine/src/modules/userContext/index.ts
@@ -9,7 +9,6 @@ import {
 } from "@src/modules/userContext/types";
 import { refreshStateCreator } from "../environment";
 import ErrorWithStatus from "@lib/models/common/ErrorWithStatus";
-import { changesPushCreator } from "../pushChangesSaga";
 
 // NOTE: Be careful every key written in this store is persisted in the localstorage
 
@@ -54,6 +53,10 @@ export const hasSeenChangesToolTipCreator = createAction(
   "USER_CONTEXT/VIEW_CHANGES_TOOL_TIP",
 )();
 
+export const changesPushSuccessCreator = createAction(
+  "USER_CONTEXT/CHANGES_PUSH_SUCCESS",
+)();
+
 type userContextActions = ActionType<
   | typeof sendAReviewCreator
   | typeof skipReviewCreator
@@ -62,7 +65,7 @@ type userContextActions = ActionType<
   | typeof hasSeenSimulatorToolTipCreator
   | typeof hasSeenChangesToolTipCreator
   | typeof refreshStateCreator
-  | typeof changesPushCreator.success
+  | typeof changesPushSuccessCreator
 >;
 
 // Selectors
@@ -137,7 +140,7 @@ export const userContextReducer: Reducer<
         authStatus: getAuthStatus(action.payload.clientError),
       };
     }
-    case getType(changesPushCreator.success): {
+    case getType(changesPushSuccessCreator): {
       return {
         ...state,
         lastSyncChange: Date.now(),
diff --git a/packages/slice-machine/src/redux/reducer.ts b/packages/slice-machine/src/redux/reducer.ts
index 3904ee0f64..0a5f20b9cc 100644
--- a/packages/slice-machine/src/redux/reducer.ts
+++ b/packages/slice-machine/src/redux/reducer.ts
@@ -12,7 +12,6 @@ import { simulatorReducer } from "@src/modules/simulator";
 import { availableCustomTypesReducer } from "@src/modules/availableCustomTypes";
 import { slicesReducer } from "@src/modules/slices";
 import { routerReducer } from "connected-next-router";
-import { pushChangesReducer } from "@src/modules/pushChangesSaga";
 
 /** Creates the main reducer */
 const createReducer = (): Reducer =>
@@ -25,7 +24,6 @@ const createReducer = (): Reducer =>
     availableCustomTypes: availableCustomTypesReducer,
     slices: slicesReducer,
     router: routerReducer,
-    pushChanges: pushChangesReducer,
   });
 
 export default createReducer;
diff --git a/packages/slice-machine/src/redux/saga.ts b/packages/slice-machine/src/redux/saga.ts
index d21c98b01f..5c82d80d90 100644
--- a/packages/slice-machine/src/redux/saga.ts
+++ b/packages/slice-machine/src/redux/saga.ts
@@ -4,7 +4,6 @@ import { watchSimulatorSagas } from "@src/modules/simulator";
 import { watchAvailableCustomTypesSagas } from "@src/modules/availableCustomTypes";
 import { watchSliceSagas } from "@src/modules/slices";
 import { watchToasterSagas } from "@src/modules/toaster";
-import { watchChangesPushSagas } from "@src/modules/pushChangesSaga";
 import { watchChangelogSagas } from "@src/modules/environment";
 
 // Single entry point to start all Sagas at once
@@ -13,6 +12,5 @@ export default function* rootSaga() {
   yield fork(watchAvailableCustomTypesSagas);
   yield fork(watchSliceSagas);
   yield fork(watchToasterSagas);
-  yield fork(watchChangesPushSagas);
   yield fork(watchChangelogSagas);
 }
diff --git a/packages/slice-machine/src/redux/type.ts b/packages/slice-machine/src/redux/type.ts
index d3f1b1412b..311c0b02a4 100644
--- a/packages/slice-machine/src/redux/type.ts
+++ b/packages/slice-machine/src/redux/type.ts
@@ -6,7 +6,6 @@ import { SimulatorStoreType } from "@src/modules/simulator/types";
 import { AvailableCustomTypesStoreType } from "@src/modules/availableCustomTypes/types";
 import { SlicesStoreType } from "@src/modules/slices/types";
 import { RouterState } from "connected-next-router/types";
-import { PushChangesStoreType } from "@src/modules/pushChangesSaga";
 
 export type SliceMachineStoreType = {
   modal: ModalStoreType;
@@ -17,5 +16,4 @@ export type SliceMachineStoreType = {
   availableCustomTypes: AvailableCustomTypesStoreType;
   slices: SlicesStoreType;
   router: RouterState;
-  pushChanges: PushChangesStoreType;
 };
diff --git a/packages/slice-machine/test/src/modules/pushChangesSaga.test.ts b/packages/slice-machine/test/src/modules/pushChangesSaga.test.ts
deleted file mode 100644
index fc0deb89b6..0000000000
--- a/packages/slice-machine/test/src/modules/pushChangesSaga.test.ts
+++ /dev/null
@@ -1,261 +0,0 @@
-import { describe, test } from "vitest";
-import { Analytics } from "@segment/analytics-node";
-import "@testing-library/jest-dom";
-import { TestApi, testSaga } from "redux-saga-test-plan";
-import {
-  ChangesPushSagaPayload,
-  changesPushCreator,
-  changesPushSaga,
-} from "../../../src/modules/pushChangesSaga";
-
-import { refreshStateCreator } from "@src/modules/environment";
-import { setupServer } from "msw/node";
-import { getState, pushChanges } from "../../../src/apiClient";
-import { modalOpenCreator } from "../../../src/modules/modal";
-import { ModalKeysEnum } from "../../../src/modules/modal/types";
-import { openToasterCreator, ToasterType } from "../../../src/modules/toaster";
-import { dummyServerState } from "./__fixtures__/serverState";
-import { ModelStatus } from "@lib/models/common/ModelStatus";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { CustomTypeSM } from "@lib/models/common/CustomType";
-
-enum LimitType {
-  SOFT = "SOFT",
-  HARD = "HARD",
-}
-
-class CustomAxiosError extends Error {
-  isAxiosError: boolean;
-  response?: {
-    data: any;
-    status: number;
-    statusText?: string;
-    headers?: any;
-    config?: any;
-  };
-
-  constructor(status: number) {
-    super();
-    this.isAxiosError = true;
-    this.response = { data: {}, status };
-  }
-}
-
-const server = setupServer();
-beforeAll(() => server.listen());
-afterEach(() => server.resetHandlers());
-afterAll(() => server.close());
-
-const changesPayload: ChangesPushSagaPayload = {
-  confirmDeleteDocuments: false,
-  changedSlices: [
-    {
-      slice: {
-        model: { id: "slice1", variations: [{ id: "var1" }] },
-        screenshots: { var1: { hash: "__HASH__" } },
-        from: "library1",
-      } as unknown as ComponentUI,
-      status: ModelStatus.New,
-    },
-  ],
-  changedCustomTypes: [
-    {
-      customType: { id: "customType1" } as CustomTypeSM,
-      status: ModelStatus.Modified,
-    },
-  ],
-};
-
-const pushChangesApiPayload = {
-  confirmDeleteDocuments: false,
-  changes: [
-    {
-      id: "slice1",
-      status: ModelStatus.New,
-      libraryID: "library1",
-      type: "Slice",
-    },
-    {
-      id: "customType1",
-      status: ModelStatus.Modified,
-      type: "CustomType",
-    },
-  ],
-};
-
-describe("[pushChanges module]", () => {
-  describe("[changesPushSaga]", () => {
-    let saga: TestApi;
-
-    beforeEach(() => {
-      saga = testSaga(
-        changesPushSaga,
-        changesPushCreator.request(changesPayload),
-      );
-    });
-    test("Pushes changes when API response is OK display success toaster", async () => {
-      saga.next().call(pushChanges, pushChangesApiPayload);
-
-      saga.next(null).call(getState);
-
-      saga.next(dummyServerState).put(
-        refreshStateCreator({
-          env: dummyServerState.env,
-          remoteCustomTypes: dummyServerState.remoteCustomTypes,
-          localCustomTypes: dummyServerState.customTypes,
-          libraries: dummyServerState.libraries,
-          remoteSlices: [],
-          clientError: undefined,
-        }),
-      );
-
-      saga.next().put(changesPushCreator.success());
-
-      saga.next().put(
-        openToasterCreator({
-          content: "All slices and types have been pushed",
-          type: ToasterType.SUCCESS,
-        }),
-      );
-
-      saga.next().isDone();
-
-      // Wait for network request to be performed
-      await new Promise((resolve) => setTimeout(resolve, 100));
-      expect(Analytics.prototype.track).toHaveBeenCalledOnce();
-    });
-
-    test.each([
-      [LimitType.HARD, ModalKeysEnum.HARD_DELETE_DOCUMENTS_DRAWER],
-      [LimitType.SOFT, ModalKeysEnum.SOFT_DELETE_DOCUMENTS_DRAWER],
-    ])(
-      "Displays delete limit modal when there is a %s limit response",
-      async (limitType, expectedModalKey) => {
-        saga.next().call(pushChanges, pushChangesApiPayload);
-
-        // This test will also verify that the details are sorted in descending order.
-        saga
-          .next({
-            type: limitType,
-            details: {
-              customTypes: [
-                {
-                  id: "CT1",
-                  numberOfDocuments: 2000,
-                  url: "url",
-                },
-                {
-                  id: "CT2",
-                  numberOfDocuments: 3000,
-                  url: "url",
-                },
-              ],
-            },
-          })
-          .put(
-            changesPushCreator.failure({
-              type: limitType,
-              details: {
-                customTypes: [
-                  {
-                    id: "CT2",
-                    numberOfDocuments: 3000,
-                    url: "url",
-                  },
-                  {
-                    id: "CT1",
-                    numberOfDocuments: 2000,
-                    url: "url",
-                  },
-                ],
-              },
-            }),
-          );
-
-        saga.next().put(
-          modalOpenCreator({
-            modalKey: expectedModalKey,
-          }),
-        );
-
-        saga.next().isDone();
-
-        // Wait for network request to be performed
-        await new Promise((resolve) => setTimeout(resolve, 100));
-        expect(Analytics.prototype.track).toHaveBeenCalledOnce();
-      },
-    );
-
-    test("Displays an error toaster when there is an API error on push", () => {
-      saga.next().call(pushChanges, pushChangesApiPayload);
-
-      saga.throw(new Error()).put(
-        openToasterCreator({
-          content:
-            "Something went wrong when pushing your changes. Check your terminal logs.",
-          type: ToasterType.ERROR,
-        }),
-      );
-
-      saga.next().isDone();
-    });
-
-    // TODO: unskip when auth error is handled
-    test.skip.each([[401], [403]])(
-      "when there's a %s error while pushing a slice it should stop and open the login model",
-      (errorCode) => {
-        saga.next().call(pushChanges, pushChangesApiPayload);
-
-        const customError = new CustomAxiosError(errorCode);
-
-        saga
-          .throw(customError)
-          .put(modalOpenCreator({ modalKey: ModalKeysEnum.LOGIN }));
-
-        saga.next().isDone();
-      },
-    );
-
-    // TODO: unskip when invalid references are handled
-    test.skip("when there's INVALID_CUSTOM_TYPES response, open the references drawer", () => {
-      saga.next().call(pushChanges, {
-        confirmDeleteDocuments: false,
-        changes: [
-          { id: "slice1", status: ModelStatus.New, type: "Slice" },
-          {
-            id: "customType1",
-            status: ModelStatus.Modified,
-            type: "CustomType",
-          },
-        ],
-      });
-
-      saga
-        .next({
-          status: 200,
-          data: {
-            type: "INVALID_CUSTOM_TYPES",
-            details: {
-              customTypes: [{ id: "CT1" }, { id: "CT2" }],
-            },
-          },
-        })
-        .put(
-          changesPushCreator.failure({
-            type: "INVALID_CUSTOM_TYPES",
-            details: {
-              customTypes: [{ id: "CT1" }, { id: "CT2" }],
-            },
-          }),
-        );
-
-      saga.next().put(
-        modalOpenCreator({
-          modalKey: ModalKeysEnum.REFERENCES_MISSING_DRAWER,
-        }),
-      );
-
-      saga.next().isDone();
-    });
-  });
-});
diff --git a/playwright/tests/changes/changes.spec.ts b/playwright/tests/changes/changes.spec.ts
index f49b5f6203..4eda02c5d5 100644
--- a/playwright/tests/changes/changes.spec.ts
+++ b/playwright/tests/changes/changes.spec.ts
@@ -128,9 +128,13 @@ test.run()(
       remoteSlices: [],
       clientError: undefined,
     }));
-    procedures.mock("prismicRepository.pushChanges", () => new Error("Error"), {
-      execute: false,
-    });
+    procedures.mock(
+      "prismicRepository.pushChanges",
+      () => {
+        throw new Error("Error");
+      },
+      { execute: false },
+    );
 
     await changesPage.goto();
     await expect(changesPage.loginButton).not.toBeVisible();