refactor(changes): Remove pushChanges saga and store (#1270)

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,

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: {

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"

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<

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 { 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={{

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}

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

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