refactor(changes): Remove changes saga and store

packages/manager/src/index.ts

@@ -13,7 +13,7 @@ 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, Limit } from "./managers/prismicRepository/types";
 
 export type {
 	PrismicAuthManager,

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}

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 { Limit } 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?: Limit;
+  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={{

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 { Limit } 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?: Limit;
+  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}

packages/slice-machine/components/DeleteDocumentsDrawer/index.tsx

@@ -1,3 +1,2 @@
 export { SoftDeleteDocumentsDrawer } from "./SoftDeleteDocumentsDrawer";
 export { HardDeleteDocumentsDrawer } from "./HardDeleteDocumentsDrawer";
-export { ReferencesErrorDrawer } from "./ReferencesErrorDrawer";

packages/slice-machine/components/SliceMachineDrawer/index.tsx

@@ -1,23 +1,21 @@
 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<{
   isOpen: boolean;
   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={() => (