slice-machine-ui 1.23.2-beta.9 → 1.24.0

package/src/hooks/useActionQueue.tsx

@@ -0,0 +1,177 @@
+import {
+  useCallback,
+  useState,
+  useEffect,
+  SetStateAction,
+  Dispatch,
+  useMemo,
+} from "react";
+import { uniqueId } from "lodash";
+import { toast } from "react-toastify";
+import { Box, Button, Text } from "@prismicio/editor-ui";
+
+export type ActionQueueStatus = "pending" | "done" | "failed";
+
+type UseActionQueueArgs = {
+  actionQueueStatusDelay?: number;
+  errorMessage: string;
+  retryDelay?: number;
+  retryMessage?: string;
+};
+
+type UseActionQueueReturnType = {
+  actionQueueStatus: ActionQueueStatus;
+  setNextAction: (nextAction: NextAction) => void;
+};
+
+type ActionQueueStack = {
+  pendingAction: NextAction | undefined;
+  nextAction: NextAction | undefined;
+};
+
+type NextAction = () => Promise<unknown>;
+
+export const useActionQueue = (
+  args: UseActionQueueArgs,
+): UseActionQueueReturnType => {
+  const {
+    actionQueueStatusDelay = 300,
+    errorMessage,
+    retryDelay = 1000,
+    retryMessage = "Retry",
+  } = args;
+
+  const [actionQueueStack, setActionQueueStack] = useState<ActionQueueStack>({
+    pendingAction: undefined,
+    nextAction: undefined,
+  });
+  const [actionQueueStatusActual, setActionQueueStatusActual] =
+    useState<ActionQueueStatus>("done");
+  const [actionQueueStatusDelayed, setActionQueueStatusDelayed] =
+    useState<ActionQueueStatus>(actionQueueStatusActual);
+
+  const setNextAction = useCallback((nextAction: NextAction) => {
+    setActionQueueStack((prevState) => ({
+      ...prevState,
+      nextAction,
+    }));
+  }, []);
+
+  const executeAction = useCallback(
+    async (nextAction?: NextAction) => {
+      if (nextAction) {
+        setActionQueueStatusActual("pending");
+
+        try {
+          await nextAction();
+
+          setActionQueueStatusActual("done");
+        } catch (error) {
+          setActionQueueStatusActual("failed");
+          console.error(errorMessage, error);
+
+          toastError({
+            errorMessage,
+            retryDelay,
+            retryMessage,
+            setActionQueueStatusActual,
+            setActionQueueStack,
+          });
+        }
+      }
+    },
+    [errorMessage, retryDelay, retryMessage],
+  );
+
+  useEffect(() => {
+    if (actionQueueStatusActual === "done" && actionQueueStack.nextAction) {
+      void executeAction(actionQueueStack.nextAction);
+
+      setActionQueueStack({
+        pendingAction: actionQueueStack.nextAction,
+        nextAction: undefined,
+      });
+    }
+  }, [actionQueueStatusActual, actionQueueStack, executeAction]);
+
+  useEffect(() => {
+    if (actionQueueStatusActual === "pending") {
+      setActionQueueStatusDelayed("pending");
+    } else {
+      const delayedTimeout = setTimeout(() => {
+        setActionQueueStatusDelayed(actionQueueStatusActual);
+      }, actionQueueStatusDelay);
+
+      return () => {
+        clearTimeout(delayedTimeout);
+      };
+    }
+
+    return;
+  }, [actionQueueStatusActual, actionQueueStatusDelay]);
+
+  return useMemo(
+    () => ({
+      actionQueueStatus: actionQueueStatusDelayed,
+      setNextAction,
+    }),
+    [actionQueueStatusDelayed, setNextAction],
+  );
+};
+
+type ToastErrorArgs = {
+  errorMessage: string;
+  retryDelay: number;
+  retryMessage: string;
+  setActionQueueStatusActual: Dispatch<SetStateAction<ActionQueueStatus>>;
+  setActionQueueStack: Dispatch<SetStateAction<ActionQueueStack>>;
+};
+
+function toastError(args: ToastErrorArgs) {
+  const {
+    errorMessage,
+    retryDelay,
+    retryMessage,
+    setActionQueueStatusActual,
+    setActionQueueStack,
+  } = args;
+  const toastId = uniqueId();
+
+  toast.error(
+    () => (
+      <Box gap={8} alignItems="center">
+        <Text color="grey1" variant="small">
+          {errorMessage}
+        </Text>
+        <Button
+          size="small"
+          color="grey"
+          onClick={() => {
+            toast.dismiss(toastId);
+
+            // Ensure saving is directly propagated before waiting for the retry
+            setActionQueueStatusActual("pending");
+
+            setTimeout(() => {
+              // By setting the status to done, the effect will be triggered
+              // with the latest action to process.
+              setActionQueueStatusActual("done");
+              setActionQueueStack((prevState) => ({
+                nextAction: prevState.nextAction ?? prevState.pendingAction,
+                pendingAction: undefined,
+              }));
+            }, retryDelay);
+          }}
+        >
+          {retryMessage}
+        </Button>
+      </Box>
+    ),
+    {
+      autoClose: false,
+      closeOnClick: false,
+      draggable: false,
+      toastId,
+    },
+  );
+}

package/src/hooks/useAuthStatus.ts

@@ -0,0 +1,12 @@
+import { useSelector } from "react-redux";
+
+import { getAuthStatus } from "@src/modules/environment";
+import { SliceMachineStoreType } from "@src/redux/type";
+
+export function useAuthStatus() {
+  const { authStatus } = useSelector((store: SliceMachineStoreType) => ({
+    authStatus: getAuthStatus(store),
+  }));
+
+  return authStatus;
+}

package/src/hooks/useUser.ts

@@ -0,0 +1,14 @@
+import { useRequest } from "@prismicio/editor-support/Suspense";
+
+import { managerClient } from "@src/managerClient";
+
+type User = { isLoggedIn: boolean };
+
+export function useUser(): User {
+  return useRequest(getUser, []);
+}
+
+async function getUser(): Promise<User> {
+  const isLoggedIn = await managerClient.user.checkIsLoggedIn();
+  return { isLoggedIn };
+}

package/src/icons/SettingsIcon.tsx

@@ -0,0 +1,19 @@
+import type { FC, SVGProps } from "react";
+
+export const SettingsIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16 12C16 13.1046 15.1046 14 14 14C12.8954 14 12 13.1046 12 12C12 10.8954 12.8954 10 14 10C15.1046 10 16 10.8954 16 12ZM14 9C15.4865 9 16.7205 10.0811 16.9585 11.5H23.5C23.7761 11.5 24 11.7239 24 12C24 12.2761 23.7761 12.5 23.5 12.5H16.9585C16.7205 13.9189 15.4865 15 14 15C12.5135 15 11.2795 13.9189 11.0415 12.5H8.5C8.22386 12.5 8 12.2761 8 12C8 11.7239 8.22386 11.5 8.5 11.5H11.0415C11.2795 10.0811 12.5135 9 14 9ZM21 20C21 21.1046 20.1046 22 19 22C17.8954 22 17 21.1046 17 20C17 18.8954 17.8954 18 19 18C20.1046 18 21 18.8954 21 20ZM16.0415 20.5C16.2795 21.9189 17.5135 23 19 23C20.4865 23 21.7205 21.9189 21.9585 20.5H23.5C23.7761 20.5 24 20.2761 24 20C24 19.7239 23.7761 19.5 23.5 19.5H21.9585C21.7205 18.0811 20.4865 17 19 17C17.5135 17 16.2795 18.0811 16.0415 19.5H8.5C8.22386 19.5 8 19.7239 8 20C8 20.2761 8.22386 20.5 8.5 20.5H16.0415Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/src/icons/SyncFailed.tsx

@@ -0,0 +1,30 @@
+import type { FC, SVGProps } from "react";
+
+export const SyncFailed: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_11119_1080440)">
+      <path
+        d="M4.43868 8.23554L5.06668 7.9405L5.01013 7.24895C5.00343 7.16706 5 7.08404 5 7C5 5.34315 6.34315 4 8 4C9.20763 4 10.2507 4.71358 10.7266 5.7464L11.1628 6.69299L12.0905 6.21805C12.3622 6.07893 12.6704 6 13 6C14.1046 6 15 6.89543 15 8C15 8.03818 14.9989 8.07605 14.9969 8.1136L14.9552 8.86338L15.6636 9.11245C16.4434 9.38659 17 10.1296 17 11C17 12.1046 16.1046 13 15 13V14C16.6569 14 18 12.6569 18 11C18 9.69203 17.163 8.57956 15.9953 8.16905C15.9984 8.1131 16 8.05673 16 8C16 6.34315 14.6569 5 13 5C12.5961 5 12.2108 5.07982 11.8591 5.22454C11.7827 5.25599 11.7079 5.29049 11.6348 5.32791C11.5887 5.22784 11.5386 5.13 11.4847 5.03459C10.7981 3.81994 9.4948 3 8 3C5.79086 3 4 4.79086 4 7C4 7.11127 4.00454 7.22148 4.01346 7.33046C2.82373 7.88942 2 9.09851 2 10.5C2 12.2632 3.30385 13.7219 5 13.9646V12.95C3.85888 12.7184 3 11.7095 3 10.5C3 9.50045 3.58659 8.63588 4.43868 8.23554Z"
+        fill="#6F6E77"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.32913 10.1715C7.13387 10.3667 7.13387 10.6833 7.32913 10.8786L9.45048 12.9999L7.32906 15.1213C7.1338 15.3166 7.1338 15.6332 7.32906 15.8285C7.52432 16.0237 7.8409 16.0237 8.03616 15.8285L10.1576 13.707L12.2789 15.8283C12.4741 16.0236 12.7907 16.0236 12.986 15.8283C13.1812 15.6331 13.1812 15.3165 12.986 15.1212L10.8647 12.9999L12.9859 10.8787C13.1812 10.6834 13.1812 10.3669 12.9859 10.1716C12.7906 9.97634 12.4741 9.97634 12.2788 10.1716L10.1576 12.2928L8.03624 10.1715C7.84098 9.97621 7.5244 9.97621 7.32913 10.1715Z"
+        fill="#6F6E77"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_11119_1080440">
+        <rect width="20" height="20" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/icons/Synced.tsx

@@ -0,0 +1,19 @@
+import type { FC, SVGProps } from "react";
+
+export const Synced: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M15.5 6L8 15.5L4.5 11"
+      stroke="#6F6E77"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/icons/Syncing.tsx

@@ -0,0 +1,23 @@
+import type { FC, SVGProps } from "react";
+
+export const Syncing: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M4.43868 8.23554L5.06668 7.9405L5.01013 7.24895C5.00343 7.16706 5 7.08404 5 7C5 5.34315 6.34315 4 8 4C9.20763 4 10.2507 4.71358 10.7266 5.7464L11.1628 6.69299L12.0905 6.21805C12.3622 6.07893 12.6704 6 13 6C14.1046 6 15 6.89543 15 8C15 8.03818 14.9989 8.07605 14.9969 8.1136L14.9552 8.86338L15.6636 9.11245C16.4434 9.38659 17 10.1296 17 11C17 12.1046 16.1046 13 15 13V14C16.6569 14 18 12.6569 18 11C18 9.69203 17.163 8.57956 15.9953 8.16905C15.9984 8.1131 16 8.05673 16 8C16 6.34315 14.6569 5 13 5C12.5961 5 12.2108 5.07982 11.8591 5.22454C11.7827 5.25599 11.7079 5.29049 11.6348 5.32791C11.5887 5.22784 11.5386 5.13 11.4847 5.03459C10.7981 3.81994 9.4948 3 8 3C5.79086 3 4 4.79086 4 7C4 7.11127 4.00454 7.22148 4.01346 7.33046C2.82373 7.88942 2 9.09851 2 10.5C2 12.2632 3.30385 13.7219 5 13.9646V12.95C3.85888 12.7184 3 11.7095 3 10.5C3 9.50045 3.58659 8.63588 4.43868 8.23554Z"
+      fill="#6F6E77"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10 9.79289L13.3536 13.1464L12.6464 13.8536L10.5 11.7071V17.5H9.5V11.7071L7.35355 13.8536L6.64645 13.1464L10 9.79289Z"
+      fill="#6F6E77"
+    />
+  </svg>
+);

package/test/__testutils__/index.tsx

@@ -1,6 +1,7 @@
 import { render as rtlRender, RenderOptions } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Store, AnyAction } from "redux";
+import { ErrorBoundary } from "@prismicio/editor-ui";
 
 import { Provider } from "react-redux";
 import type { SliceMachineStoreType } from "../../src/redux/type";
@@ -41,11 +42,13 @@ function render(
     children: any;
   }) {
     return (
-      <ThemeUIThemeProvider theme={theme}>
-        <BaseStyles>
-          <Provider store={store}>{children}</Provider>
-        </BaseStyles>
-      </ThemeUIThemeProvider>
+      <ErrorBoundary>
+        <ThemeUIThemeProvider theme={theme}>
+          <BaseStyles>
+            <Provider store={store}>{children}</Provider>
+          </BaseStyles>
+        </ThemeUIThemeProvider>
+      </ErrorBoundary>
     );
   }
   return {

package/test/src/modules/__fixtures__/serverState.ts

@@ -36,8 +36,7 @@ export const dummyServerState: Pick<
         "https://0yyeb2g040.execute-api.us-east-1.amazonaws.com/prod/",
       PrismicOembed: "https://oembed.prismic.io",
       PrismicUnsplash: "https://unsplash.prismic.io",
-      SliceMachineV1:
-        "https://21vvgrh0s6.execute-api.us-east-1.amazonaws.com/v1/",
+      SliceMachineV1: "https://sm-api.prismic.io/v1/",
     },
     shortId: "shortId",
     supportsSliceSimulator: true,

package/components/Navigation/ChangesListItem.tsx

@@ -1,74 +0,0 @@
-import { type FC } from "react";
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import { SideNavLink, SideNavListItem } from "@src/components/SideNav";
-import { RadarIcon } from "@src/icons/RadarIcon";
-import {
-  HoverCard,
-  HoverCardCloseButton,
-  HoverCardDescription,
-  HoverCardMedia,
-  HoverCardTitle,
-} from "@src/components/HoverCard";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-
-import { ChangesRightElement } from "./ChangesRightElement";
-
-export const ChangesListItem: FC = () => {
-  const { setSeenChangesToolTip } = useSliceMachineActions();
-  const open = useOpenChangesHoverCard();
-  const router = useRouter();
-
-  const onClose = () => {
-    setSeenChangesToolTip();
-  };
-
-  return (
-    <HoverCard
-      open={open}
-      openDelay={3000}
-      onClose={onClose}
-      side="right"
-      sideOffset={24}
-      collisionPadding={280}
-      trigger={
-        <SideNavListItem>
-          <SideNavLink
-            title="Changes"
-            href="/changes"
-            active={router.asPath.startsWith("/changes")}
-            component={Link}
-            Icon={RadarIcon}
-            RightElement={<ChangesRightElement />}
-          />
-        </SideNavListItem>
-      }
-    >
-      <HoverCardTitle>Push your changes</HoverCardTitle>
-      <HoverCardMedia component="image" src="/push.png" />
-      <HoverCardDescription>
-        When you click Save, your changes are saved locally. Then, you can push
-        your models to Prismic from the Changes page.
-      </HoverCardDescription>
-      <HoverCardCloseButton>Got it</HoverCardCloseButton>
-    </HoverCard>
-  );
-};
-
-// TODO(DT-1925): Reactivate this feature
-const useOpenChangesHoverCard = () => {
-  // const { hasSeenChangesToolTip, hasSeenSimulatorToolTip } = useSelector(
-  //   (store: SliceMachineStoreType) => ({
-  //     hasSeenChangesToolTip: userHasSeenChangesToolTip(store),
-  //     hasSeenSimulatorToolTip: userHasSeenSimulatorToolTip(store),
-  //   }),
-  // );
-
-  // return (
-  //   !hasSeenChangesToolTip &&
-  //   hasSeenSimulatorToolTip
-  // );
-
-  return false;
-};

package/components/Navigation/ChangesRightElement.tsx

@@ -1,33 +0,0 @@
-import { FC } from "react";
-
-import { useUnSyncChanges } from "@src/hooks/useUnSyncChanges";
-import { RightElement } from "@src/components/SideNav/SideNav";
-import { AuthStatus } from "@src/modules/userContext/types";
-import { useNetwork } from "@src/hooks/useNetwork";
-
-export const ChangesRightElement: FC = () => {
-  const isOnline = useNetwork();
-  const { unSyncedSlices, unSyncedCustomTypes, authStatus } =
-    useUnSyncChanges();
-  const numberOfChanges = unSyncedSlices.length + unSyncedCustomTypes.length;
-
-  if (
-    !isOnline ||
-    authStatus === AuthStatus.UNAUTHORIZED ||
-    authStatus === AuthStatus.FORBIDDEN
-  ) {
-    return <RightElement>Logged out</RightElement>;
-  }
-
-  if (numberOfChanges === 0) {
-    return null;
-  }
-
-  const formattedNumberOfChanges = numberOfChanges > 9 ? "+9" : numberOfChanges;
-
-  return (
-    <RightElement type="pill" data-cy="changes-number">
-      {formattedNumberOfChanges}
-    </RightElement>
-  );
-};