[DT-2249] feat: display toast on field create (#1436)

prismicio · Aug 27, 2024 · c3f8e39 · c3f8e39
1 parent 6e5d6ff
commit c3f8e39
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 28 deletions.
diff --git a/packages/slice-machine/src/features/customTypes/customTypesBuilder/CustomTypeProvider.tsx b/packages/slice-machine/src/features/customTypes/customTypesBuilder/CustomTypeProvider.tsx
@@ -20,7 +20,7 @@ import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 type CustomTypeContext = {
   customType: CustomType;
   actionQueueStatus: ActionQueueStatus;
-  setCustomType: (customType: CustomType) => void;
+  setCustomType: (customType: CustomType, onSaveCallback?: () => void) => void;
 };
 
 type CustomTypeProviderProps = {
@@ -46,7 +46,7 @@ export function CustomTypeProvider(props: CustomTypeProviderProps) {
   const { syncChanges } = useAutoSync();
 
   const setCustomType = useCallback(
-    (customType: CustomType) => {
+    (customType: CustomType, onSaveCallback?: () => void) => {
       setCustomTypeState(customType);
       setNextAction(async () => {
         const { errors } = await updateCustomType(customType);
@@ -59,6 +59,7 @@ export function CustomTypeProvider(props: CustomTypeProviderProps) {
         stableSaveCustomTypeSuccess(customType);
 
         syncChanges();
+        onSaveCallback?.();
       });
     },
     [setNextAction, stableSaveCustomTypeSuccess, syncChanges],

diff --git a/packages/slice-machine/src/features/slices/sliceBuilder/SliceBuilderProvider.tsx b/packages/slice-machine/src/features/slices/sliceBuilder/SliceBuilderProvider.tsx
@@ -19,7 +19,7 @@ import useSliceMachineActions from "@/modules/useSliceMachineActions";
 type SliceContext = {
   slice: ComponentUI;
   actionQueueStatus: ActionQueueStatus;
-  setSlice: (slice: ComponentUI) => void;
+  setSlice: (slice: ComponentUI, onSaveCallback?: () => void) => void;
   variation: VariationSM;
 };
 
@@ -57,7 +57,7 @@ export function SliceBuilderProvider(props: SliceBuilderProviderProps) {
   }, [slice, router]);
 
   const setSlice = useCallback(
-    (slice: ComponentUI) => {
+    (slice: ComponentUI, onSaveCallback?: () => void) => {
       setSliceState(slice);
       setNextAction(async () => {
         const { errors: updateSliceErrors } = await updateSlice(slice);
@@ -79,6 +79,7 @@ export function SliceBuilderProvider(props: SliceBuilderProviderProps) {
         stableSaveSliceSuccess({ ...slice, mocks });
 
         syncChanges();
+        onSaveCallback?.();
       });
     },
     [setNextAction, stableSaveSliceSuccess, syncChanges],

diff --git a/packages/slice-machine/src/features/sync/AutoSyncProvider.tsx b/packages/slice-machine/src/features/sync/AutoSyncProvider.tsx
@@ -67,6 +67,9 @@ export const AutoSyncProvider: FC<PropsWithChildren> = (props) => {
   const { activeEnvironment } = useActiveEnvironment();
   const { setNextAction, actionQueueStatus } = useActionQueue({
     actionQueueStatusDelay: 0,
+    // TODO: Fix if we release auto-sync (without feature flag)
+    // When we're creating a new field or adding a slice, the success toast will
+    // prevent the error toast to be visible.
     errorMessage:
       "Failed to sync changes. Check your browser's console for more information.",
   });

diff --git a/packages/slice-machine/src/legacy/lib/builders/CustomTypeBuilder/SliceZone/index.tsx b/packages/slice-machine/src/legacy/lib/builders/CustomTypeBuilder/SliceZone/index.tsx
@@ -296,9 +296,10 @@ const SliceZone: React.FC<SliceZoneProps> = ({
               tabId,
               slices,
             });
-            setCustomType(CustomTypes.fromSM(newCustomType));
+            setCustomType(CustomTypes.fromSM(newCustomType), () => {
+              toast.success("Slice(s) added to slice zone");
+            });
             closeUpdateSliceZoneModal();
-            toast.success("Slice(s) added to slice zone");
           }}
           close={closeUpdateSliceZoneModal}
         />
@@ -314,14 +315,15 @@ const SliceZone: React.FC<SliceZoneProps> = ({
               tabId,
               slices,
             });
-            setCustomType(CustomTypes.fromSM(newCustomType));
+            setCustomType(CustomTypes.fromSM(newCustomType), () => {
+              toast.success(
+                <ToastMessageWithPath
+                  message="Slice template(s) added to slice zone and created at: "
+                  path={`${localLibraries[0].name}/`}
+                />,
+              );
+            });
             closeSlicesTemplatesModal();
-            toast.success(
-              <ToastMessageWithPath
-                message="Slice template(s) added to slice zone and created at: "
-                path={`${localLibraries[0].name}/`}
-              />,
-            );
           }}
           close={closeSlicesTemplatesModal}
         />
@@ -345,14 +347,15 @@ const SliceZone: React.FC<SliceZoneProps> = ({
               tabId,
               slices: [newSlice],
             });
-            setCustomType(CustomTypes.fromSM(newCustomType));
+            setCustomType(CustomTypes.fromSM(newCustomType), () => {
+              toast.success(
+                <ToastMessageWithPath
+                  message="New slice added to slice zone and created at: "
+                  path={`${localLibraries[0].name}/`}
+                />,
+              );
+            });
             closeCreateSliceModal();
-            toast.success(
-              <ToastMessageWithPath
-                message="New slice added to slice zone and created at: "
-                path={`${localLibraries[0].name}/`}
-              />,
-            );
           }}
           localLibraries={localLibraries}
           remoteSlices={remoteSlices}

diff --git a/packages/slice-machine/src/legacy/lib/builders/CustomTypeBuilder/TabZone/index.tsx b/packages/slice-machine/src/legacy/lib/builders/CustomTypeBuilder/TabZone/index.tsx
@@ -7,6 +7,7 @@ import {
 import { FC, Suspense } from "react";
 import type { DropResult } from "react-beautiful-dnd";
 import { flushSync } from "react-dom";
+import { toast } from "react-toastify";
 
 import { telemetry } from "@/apiClient";
 import { List } from "@/components/List";
@@ -71,6 +72,7 @@ type OnSaveFieldProps = {
   apiId: string;
   newKey: string;
   value: TabField;
+  isNewGroupField?: boolean;
 };
 
 const TabZone: FC<TabZoneProps> = ({ tabId }) => {
@@ -132,7 +134,9 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
       sectionId: tabId,
     });
 
-    setCustomType(newCustomType);
+    setCustomType(newCustomType, () => {
+      toast.success(`${field.type === "Group" ? "Group" : "Field"} added`);
+    });
 
     void telemetry.track({
       event: "field:added",
@@ -167,7 +171,12 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
     flushSync(() => setCustomType(newCustomType));
   };
 
-  const onSave = ({ apiId: previousKey, newKey, value }: OnSaveFieldProps) => {
+  const onSave = ({
+    apiId: previousKey,
+    newKey,
+    value,
+    isNewGroupField,
+  }: OnSaveFieldProps) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
     if (ensureWidgetTypeExistence(Widgets, value.type)) {
       return;
@@ -182,7 +191,11 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
       sectionId: tabId,
     });
 
-    setCustomType(newCustomType);
+    setCustomType(newCustomType, () => {
+      if (isNewGroupField === true) {
+        toast.success("Field added");
+      }
+    });
   };
 
   const onCreateOrSave = (props: OnSaveFieldProps) => {

diff --git a/packages/slice-machine/src/legacy/lib/builders/SliceBuilder/FieldZones/index.tsx b/packages/slice-machine/src/legacy/lib/builders/SliceBuilder/FieldZones/index.tsx
@@ -14,6 +14,7 @@ import {
 import { FC, useState } from "react";
 import { DropResult } from "react-beautiful-dnd";
 import { flushSync } from "react-dom";
+import { toast } from "react-toastify";
 
 import { telemetry } from "@/apiClient";
 import { List } from "@/components/List";
@@ -68,6 +69,7 @@ type OnSaveFieldProps = {
   apiId: string;
   newKey: string;
   value: SlicePrimaryFieldSM;
+  isNewGroupField?: boolean;
 };
 
 const FieldZones: FC = () => {
@@ -104,7 +106,7 @@ const FieldZones: FC = () => {
 
   const _onSave = (
     widgetArea: WidgetsArea,
-    { apiId: previousKey, newKey, value }: OnSaveFieldProps,
+    { apiId: previousKey, newKey, value, isNewGroupField }: OnSaveFieldProps,
   ) => {
     const newSlice = updateField({
       slice,
@@ -115,7 +117,11 @@ const FieldZones: FC = () => {
       newField: value as SlicePrimaryWidget,
     });
 
-    setSlice(newSlice);
+    setSlice(newSlice, () => {
+      if (isNewGroupField === true) {
+        toast.success("Group added");
+      }
+    });
   };
 
   const _onSaveNewField = (
@@ -149,7 +155,9 @@ const FieldZones: FC = () => {
         newField.type === GroupFieldType ? Groups.fromSM(newField) : newField,
     });
 
-    setSlice(newSlice);
+    setSlice(newSlice, () => {
+      toast.success(`${widgetTypeName === "Group" ? "Group" : "Field"} added`);
+    });
 
     void telemetry.track({
       event: "field:added",

diff --git a/packages/slice-machine/src/legacy/lib/models/common/widgets/Group/ListItem/index.jsx b/packages/slice-machine/src/legacy/lib/models/common/widgets/Group/ListItem/index.jsx
@@ -66,6 +66,7 @@ export const CustomListItem = ({
       apiId: groupItem.key,
       newKey: groupItem.key,
       value: Groups.toSM(newGroupValue),
+      isNewGroupField: true,
     });
 
     void telemetry.track({

diff --git a/packages/slice-machine/src/legacy/lib/models/common/widgets/Group/index.tsx b/packages/slice-machine/src/legacy/lib/models/common/widgets/Group/index.tsx
@@ -40,10 +40,12 @@ export interface GroupListItemProps<F extends TabField> {
     apiId,
     newKey,
     value,
+    isNewGroupField,
   }: {
     apiId: string;
     newKey: string;
     value: F;
+    isNewGroupField?: boolean;
   }) => void;
   HintElement: JSX.Element;
 }

diff --git a/playwright/pages/components/Menu.ts b/playwright/pages/components/Menu.ts
@@ -25,6 +25,8 @@ export class Menu {
   readonly autoSyncFailed: Locator;
   readonly autoSyncFailedMessage: Locator;
   readonly autoSyncFailedRetry: Locator;
+  readonly fieldAddedSuccessMessage: Locator;
+  readonly groupAddedSuccessMessage: Locator;
 
   constructor(page: Page) {
     /**
@@ -86,6 +88,12 @@ export class Menu {
       { exact: true },
     );
     this.autoSyncFailedRetry = page.getByRole("button", { name: "Retry" });
+    this.fieldAddedSuccessMessage = page.getByText("Field added", {
+      exact: true,
+    });
+    this.groupAddedSuccessMessage = page.getByText("Group added", {
+      exact: true,
+    });
   }
 
   /**

diff --git a/playwright/tests/common/autoSync.spec.ts b/playwright/tests/common/autoSync.spec.ts
@@ -44,7 +44,10 @@ test("I can see the auto-sync succeed when making a change", async ({
   await expect(pageTypesBuilderPage.menu.autoSyncSynced).toBeVisible();
 });
 
-test("I can see the auto-sync succeed after a failed attempt", async ({
+// TODO: Fix if we release auto-sync (without feature flag)
+// When we're creating a new field or adding a slice, the success toast will
+// prevent the error toast to be visible.
+test.skip("I can see the auto-sync succeed after a failed attempt", async ({
   pageTypesBuilderPage,
   reusablePageType,
   procedures,
@@ -101,7 +104,10 @@ test("I can see the auto-sync succeed after a failed attempt", async ({
   await expect(pageTypesBuilderPage.menu.autoSyncSynced).toBeVisible();
 });
 
-test("I can see the auto-sync fail because of an hard limit", async ({
+// TODO: Fix if we release auto-sync (without feature flag)
+// When we're creating a new field or adding a slice, the success toast will
+// prevent the error toast to be visible.
+test.skip("I can see the auto-sync fail because of an hard limit", async ({
   pageTypesBuilderPage,
   reusablePageType,
   procedures,

diff --git a/playwright/tests/pageTypes/pageTypeBuilderFields.spec.ts b/playwright/tests/pageTypes/pageTypeBuilderFields.spec.ts
@@ -60,6 +60,9 @@ test("I can add a rich text field", async ({
     expectedId: "my_rich_text",
   });
 
+  await expect(
+    pageTypesBuilderPage.menu.fieldAddedSuccessMessage,
+  ).toBeVisible();
   await expect(
     pageTypesBuilderPage.getListItemFieldId("my_rich_text"),
   ).toBeVisible();
@@ -125,13 +128,22 @@ test("I can add a sub field within a group field", async ({
     name: "My Group",
     expectedId: "my_group",
   });
+
+  await expect(
+    pageTypesBuilderPage.menu.groupAddedSuccessMessage,
+  ).toBeVisible();
+
   await pageTypesBuilderPage.addStaticField({
     type: "Rich Text",
     name: "My Sub Field",
     expectedId: "my_sub_field",
     groupFieldId: "my_group",
   });
 
+  await expect(
+    pageTypesBuilderPage.menu.fieldAddedSuccessMessage,
+  ).toBeVisible();
+
   await expect(
     pageTypesBuilderPage.getListItemFieldId("my_sub_field", "my_group"),
   ).toBeVisible();