slice-machine-ui 2.18.1-alpha.jp-unauthorized-error.4 → 2.18.1-alpha.jp-unauthorized-error-improvement.2

package/src/features/sync/getUnSyncChanges.ts

@@ -3,6 +3,7 @@ import { LibraryUI } from "@/legacy/lib/models/common/LibraryUI";
 import {
   getModelId,
   hasLocal,
+  hasRemote,
   isRemoteOnly,
   LocalOrRemoteCustomType,
   LocalOrRemoteSlice,
@@ -76,11 +77,23 @@ export function getUnSyncedChanges(
   );
 
   const changedSlices = unSyncedSlices
-    .map((s) => ({
-      slice: s,
-      status: modelsStatuses.slices[s.model.id],
-    }))
+    .map((slice) => {
+      const status = modelsStatuses.slices[slice.model.id];
+
+      const imageUrlMap = findRemoteSlice(
+        slices,
+        slice.model.id,
+      )?.variations.reduce<Record<string, string>>((result, variation) => {
+        const { imageUrl } = variation;
+        if (imageUrl === undefined || imageUrl === "") return result;
+        result[variation.id] = imageUrl;
+        return result;
+      }, {});
+
+      return { status, slice, variationImageUrlMap: imageUrlMap ?? {} };
+    })
     .filter((s): s is ChangedSlice => unSyncStatuses.includes(s.status));
+
   const changedCustomTypes = unSyncedCustomTypes
     .map((model) => (hasLocal(model) ? model.local : model.remote))
     .map((ct) => ({
@@ -98,6 +111,11 @@ export function getUnSyncedChanges(
   };
 }
 
+function findRemoteSlice(slices: LocalOrRemoteSlice[], sliceId: string) {
+  const slice = slices.find((s) => hasRemote(s) && s.remote.id === sliceId);
+  return slice && hasRemote(slice) ? slice.remote : undefined;
+}
+
 // ComponentUI are manipulated on all the relevant pages
 // But the data is not available for remote only slices
 // which have been deleted locally
@@ -131,9 +149,7 @@ export const getModelStatus = (args: GetModelStatusArgs): ModelsStatuses => {
   const { slices, customTypes, isOnline, authStatus } = args;
 
   const userHasAccessToModels =
-    isOnline &&
-    authStatus != AuthStatus.FORBIDDEN &&
-    authStatus != AuthStatus.UNAUTHORIZED;
+    isOnline && authStatus === AuthStatus.AUTHORIZED;
 
   const modelsStatuses = {
     slices: computeStatuses(slices, userHasAccessToModels),

package/src/legacy/components/AppLayout/index.tsx

@@ -1,16 +1,6 @@
-import {
-  BlankSlate,
-  BlankSlateDescription,
-  BlankSlateIcon,
-  BlankSlateTitle,
-  Box,
-  Button,
-  ButtonGroup,
-  Text,
-} from "@prismicio/editor-ui";
-import { isUnauthorizedError } from "@slicemachine/manager/client";
+import { Box, Button, ButtonGroup } from "@prismicio/editor-ui";
 import { useRouter } from "next/router";
-import { FC, PropsWithChildren, Suspense, useState } from "react";
+import { FC, PropsWithChildren, Suspense } from "react";
 
 import { Breadcrumb } from "@/components/Breadcrumb";
 import {
@@ -19,8 +9,6 @@ import {
   PageLayoutHeader,
   PageLayoutPane,
 } from "@/components/PageLayout";
-import { ErrorBoundary } from "@/ErrorBoundary";
-import { LogoutButton } from "@/features/auth/LogoutButton";
 import { useActiveEnvironment } from "@/features/environments/useActiveEnvironment";
 import { Navigation } from "@/features/navigation/Navigation";
 
@@ -29,80 +17,17 @@ export const AppLayout: FC<PropsWithChildren> = ({
   ...otherProps
 }) => {
   return (
-    <ErrorBoundary
-      renderError={(error) => {
-        return (
-          <Box
-            position="absolute"
-            top={64}
-            width="100%"
-            justifyContent="center"
-            flexDirection="column"
-          >
-            <BlankSlate>
-              <BlankSlateIcon
-                lineColor="tomato11"
-                backgroundColor="tomato3"
-                name="alert"
-              />
-              <BlankSlateTitle>Failed to load Slice Machine</BlankSlateTitle>
-              <BlankSlateDescription>
-                <RenderError error={error} />
-              </BlankSlateDescription>
-            </BlankSlate>
-          </Box>
-        );
-      }}
-    >
-      <Suspense>
-        <PageLayoutWithActiveEnvironment {...otherProps}>
-          <PageLayoutPane>
-            <Navigation />
-          </PageLayoutPane>
-          {children}
-        </PageLayoutWithActiveEnvironment>
-      </Suspense>
-    </ErrorBoundary>
+    <Suspense>
+      <PageLayoutWithActiveEnvironment {...otherProps}>
+        <PageLayoutPane>
+          <Navigation />
+        </PageLayoutPane>
+        {children}
+      </PageLayoutWithActiveEnvironment>
+    </Suspense>
   );
 };
 
-function RenderError(args: { error: unknown }) {
-  const { error } = args;
-
-  if (isUnauthorizedError(error)) {
-    return <UnauthorizedErrorView />;
-  }
-  return <>{JSON.stringify(error)}</>;
-}
-
-function UnauthorizedErrorView() {
-  const [isLoggingOut, setIsLoggingOut] = useState(false);
-
-  return (
-    <Box flexDirection="column" gap={16} margin={{ top: 8 }}>
-      <Box flexDirection="column" gap={8} alignItems="center">
-        <Text variant="h3" align="center">
-          It seems like you don't have access to this repository
-        </Text>
-        <Text align="center">
-          Check that the repository name is correct, then contact your
-          repository administrator.
-        </Text>
-      </Box>
-      <LogoutButton
-        isLoading={isLoggingOut}
-        onLogoutSuccess={() => {
-          setIsLoggingOut(true);
-          window.location.reload();
-        }}
-        sx={{ alignSelf: "center" }}
-      >
-        Log out
-      </LogoutButton>
-    </Box>
-  );
-}
-
 const environmentTopBorderColorMap = {
   prod: "purple",
   stage: "indigo",

package/src/legacy/components/ChangesEmptyState/UnauthenticatedView.tsx

@@ -0,0 +1,31 @@
+import { Box, Button, Text } from "@prismicio/editor-ui";
+
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
+
+export const UnauthenticatedView = () => {
+  const { openLoginModal } = useSliceMachineActions();
+
+  return (
+    <Box
+      flexDirection="column"
+      height="100%"
+      alignItems="center"
+      justifyContent="center"
+      gap={8}
+    >
+      <Text variant="h3" align="center">
+        It seems like you are logged out
+      </Text>
+      <Text align="center">Log in to connect to your repository.</Text>
+      <Text align="center">
+        If that doesn't work, it's possible that Slice Machine is having trouble
+        accessing Prismic's servers.{" "}
+        <Text href="https://community.prismic.io/">
+          Contact our support team
+        </Text>
+        .
+      </Text>
+      <Button onClick={() => openLoginModal()}>Log in to Prismic</Button>
+    </Box>
+  );
+};

package/src/legacy/components/ChangesEmptyState/index.ts

@@ -1,2 +1,2 @@
-export { AuthErrorPage } from "./AuthErrorPage";
 export { OfflinePage } from "./OfflinePage";
+export { UnauthenticatedView } from "./UnauthenticatedView";

package/src/legacy/components/ChangesItems/ChangesItems.tsx

@@ -3,7 +3,7 @@ import React, { Suspense } from "react";
 import { AiOutlineExclamationCircle } from "react-icons/ai";
 
 import { countMissingScreenshots } from "@/domain/slice";
-import { ErrorBoundary } from "@/ErrorBoundary";
+import { DefaultErrorBoundary } from "@/errorBoundaries";
 import { SharedSliceCard } from "@/features/slices/sliceCards/SharedSliceCard";
 import { ModelsStatuses } from "@/features/sync/getUnSyncChanges";
 import { useScreenshotChangesModal } from "@/hooks/useScreenshotChangesModal";
@@ -146,11 +146,11 @@ export const ChangesItems: React.FC<ChangesItemsProps> = ({
           )}
         </Box>
 
-        <ErrorBoundary>
+        <DefaultErrorBoundary>
           <Suspense>
             <DevCollaborationExperiment />
           </Suspense>
-        </ErrorBoundary>
+        </DefaultErrorBoundary>
       </Box>
     </>
   );

package/src/legacy/components/LoginModal/index.tsx

@@ -1,3 +1,4 @@
+import { useQueryClient } from "@tanstack/react-query";
 import React from "react";
 import Modal from "react-modal";
 import { useSelector } from "react-redux";
@@ -15,8 +16,8 @@ import {
 
 import { checkAuthStatus, clearAuth, getState } from "@/apiClient";
 import { getActiveEnvironment } from "@/features/environments/actions/getActiveEnvironment";
-import { invalidateActiveEnvironmentData } from "@/features/environments/useActiveEnvironment";
-import { invalidateEnvironmentsData } from "@/features/environments/useEnvironments";
+import { GetActiveEnvironmentQueryKey } from "@/features/environments/useActiveEnvironment";
+import { GetEnvironmentsQueryKey } from "@/features/environments/useEnvironments";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
 import { getUnSyncedChanges } from "@/features/sync/getUnSyncChanges";
 import SliceMachineModal from "@/legacy/components/SliceMachineModal";
@@ -54,6 +55,7 @@ const LoginModal: React.FunctionComponent = () => {
   const { syncChanges } = useAutoSync();
   const { closeModals, startLoadingLogin, stopLoadingLogin, refreshState } =
     useSliceMachineActions();
+  const queryClient = useQueryClient();
 
   const prismicBase = preferWroomBase(env.manifest.apiEndpoint);
   const loginRedirectUrl = `${
@@ -79,8 +81,14 @@ const LoginModal: React.FunctionComponent = () => {
       );
 
       // refresh queries to update the UI
-      invalidateEnvironmentsData();
-      invalidateActiveEnvironmentData();
+      await Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: GetEnvironmentsQueryKey,
+        }),
+        queryClient.invalidateQueries({
+          queryKey: GetActiveEnvironmentQueryKey,
+        }),
+      ]);
 
       toast.success("Logged in");
       stopLoadingLogin();
@@ -127,7 +135,7 @@ const LoginModal: React.FunctionComponent = () => {
 
   return (
     <SliceMachineModal
-      isOpen={isOpen}
+      isOpen={isLoginLoading || isOpen}
       shouldCloseOnOverlayClick
       onRequestClose={closeModals}
       contentLabel={"login_modal"}

package/src/legacy/components/Navigation/ChangesItem.tsx

@@ -117,16 +117,12 @@ export const ChangesCount: FC<ChangesCountProps> = ({ color }) => {
 
   if (
     !isOnline ||
-    authStatus === AuthStatus.UNAUTHORIZED ||
-    authStatus === AuthStatus.FORBIDDEN
+    authStatus !== AuthStatus.AUTHORIZED ||
+    numberOfChanges === 0
   ) {
     return null;
   }
 
-  if (numberOfChanges === 0) {
-    return null;
-  }
-
   const formattedNumberOfChanges = numberOfChanges > 9 ? "+9" : numberOfChanges;
 
   return (

package/src/legacy/components/Navigation/Environment.tsx

@@ -5,7 +5,7 @@ import {
 import { useState } from "react";
 
 import { getState, telemetry } from "@/apiClient";
-import { setEnvironment } from "@/features/environments/actions/setEnvironment";
+import { useSetEnvironment } from "@/features/environments/actions/useSetEnvironment";
 import { useActiveEnvironment } from "@/features/environments/useActiveEnvironment";
 import { useEnvironments } from "@/features/environments/useEnvironments";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
@@ -28,6 +28,7 @@ export function Environment() {
   const authStatus = useAuthStatus();
   const [isSwitchingEnv, setIsSwitchingEnv] = useState(false);
   const { autoSyncStatus } = useAutoSync();
+  const setEnvironment = useSetEnvironment();
 
   async function onSelect(environment: EnvironmentType) {
     if (activeEnvironment?.name === environment.name) {
@@ -105,10 +106,4 @@ export function Environment() {
       />
     );
   }
-
-  if (useEnvironmentsError !== undefined) {
-    throw useEnvironmentsError;
-  }
-
-  throw activeEnvironmentError;
 }

package/src/legacy/components/Navigation/SideNavEnvironmentSelector/SideNavEnvironmentSelector.tsx

@@ -17,9 +17,8 @@ import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import type { Environment } from "@slicemachine/manager/client";
 import { clsx } from "clsx";
 import type { FC, ReactNode } from "react";
-import { toast } from "react-toastify";
 
-import { LogoutButton } from "@/features/auth/LogoutButton";
+import { EnvironmentLogoutButton } from "@/features/auth/LogoutButton";
 import { LoginIcon } from "@/icons/LoginIcon";
 import { LogoIcon } from "@/icons/LogoIcon";
 
@@ -30,7 +29,7 @@ type SideNavEnvironmentSelectorProps = {
   disabled?: boolean;
   environments?: Environment[];
   loading?: boolean;
-  variant?: "default" | "offline" | "unauthorized" | "unauthenticated";
+  variant?: "default" | "offline" | "unauthenticated";
   onLogInClick?: () => void;
   onSelect?: (environment: Environment) => void | Promise<void>;
 };
@@ -141,11 +140,7 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
               />
             ) : undefined}
 
-            {variant === "default" && (
-              <LogoutButton
-                onLogoutSuccess={() => toast.success("Logged out")}
-              />
-            )}
+            {variant === "default" && <EnvironmentLogoutButton />}
           </Box>
         </>
       )}

package/src/legacy/components/Simulator/index.tsx

@@ -17,7 +17,7 @@ import { toast } from "react-toastify";
 import { BaseStyles, Box, Flex, Spinner } from "theme-ui";
 
 import { saveSliceMock, telemetry } from "@/apiClient";
-import { ErrorBoundary } from "@/ErrorBoundary";
+import { DefaultErrorBoundary } from "@/errorBoundaries";
 import useThrottle from "@/hooks/useThrottle";
 import ScreenshotPreviewModal from "@/legacy/components/ScreenshotPreviewModal";
 import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
@@ -287,7 +287,7 @@ const Simulator: FC<SimulatorProps> = ({ slice, variation }) => {
                 overflowY: "auto",
               }}
             >
-              <ErrorBoundary
+              <DefaultErrorBoundary
                 renderError={() => (
                   <DefaultErrorMessage
                     title="Editor error"
@@ -315,7 +315,7 @@ const Simulator: FC<SimulatorProps> = ({ slice, variation }) => {
                     />
                   </QueryClientProvider>
                 </Suspense>
-              </ErrorBoundary>
+              </DefaultErrorBoundary>
             </Flex>
           ) : null}
         </Flex>

package/src/legacy/lib/builders/CustomTypeBuilder/TabZone/index.tsx

@@ -20,7 +20,7 @@ import {
   reorderField,
   updateField,
 } from "@/domain/customType";
-import { ErrorBoundary } from "@/ErrorBoundary";
+import { DefaultErrorBoundary } from "@/errorBoundaries";
 import { useCustomTypeState } from "@/features/customTypes/customTypesBuilder/CustomTypeProvider";
 import {
   CustomTypes,
@@ -246,7 +246,7 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
   };
 
   return (
-    <ErrorBoundary>
+    <DefaultErrorBoundary>
       <Suspense
         fallback={
           <Box padding={32}>
@@ -297,7 +297,7 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
           />
         </List>
       </Suspense>
-    </ErrorBoundary>
+    </DefaultErrorBoundary>
   );
 };
 

package/src/legacy/lib/builders/SliceBuilder/index.tsx

@@ -4,6 +4,7 @@ import { type FC } from "react";
 import { BreadcrumbItem } from "@/components/Breadcrumb";
 import { AutoSaveStatusIndicator } from "@/features/autoSave/AutoSaveStatusIndicator";
 import { FloatingBackButton } from "@/features/slices/sliceBuilder/FloatingBackButton";
+import { McpPromoLink } from "@/features/slices/sliceBuilder/McpPromoLink";
 import { useSliceState } from "@/features/slices/sliceBuilder/SliceBuilderProvider";
 import {
   AppLayout,
@@ -35,6 +36,7 @@ export const SliceBuilder: FC = () => {
           <BreadcrumbItem active>{slice.model.name}</BreadcrumbItem>
         </AppLayoutBreadcrumb>
         <AppLayoutActions>
+          <McpPromoLink />
           <AutoSaveStatusIndicator status={actionQueueStatus} />
           <SimulatorButton disabled={actionQueueStatus !== "done"} />
         </AppLayoutActions>

package/src/legacy/lib/models/common/ModelStatus/index.ts

@@ -30,7 +30,12 @@ export type ChangesStatus =
   | ModelStatus.New
   | ModelStatus.Modified;
 
-export type ChangedSlice = { status: ChangesStatus; slice: ComponentUI };
+export type ChangedSlice = {
+  status: ChangesStatus;
+  slice: ComponentUI;
+  /** A map of variation IDs to remote screenshot URLs. */
+  variationImageUrlMap: Record<string, string>;
+};
 export type ChangedCustomType = {
   status: ChangesStatus;
   customType: CustomTypeSM;

package/src/modules/userContext/index.ts

@@ -1,3 +1,4 @@
+import { UnauthenticatedError } from "@slicemachine/manager/client";
 import { Reducer } from "redux";
 import { ActionType, createAction, getType } from "typesafe-actions";
 
@@ -92,10 +93,12 @@ const getAuthStatus = (
     case undefined: {
       return AuthStatus.AUTHORIZED;
     }
-    case 403: {
-      return AuthStatus.UNAUTHORIZED;
-    }
     case 401: {
+      if (clientError.name === new UnauthenticatedError().name) {
+        return AuthStatus.UNAUTHENTICATED;
+      }
+    }
+    case 403: {
       return AuthStatus.FORBIDDEN;
     }
     default: {

package/src/modules/userContext/types.ts

@@ -1,6 +1,6 @@
 export enum AuthStatus {
   AUTHORIZED = "authorized",
-  UNAUTHORIZED = "unauthorized",
+  UNAUTHENTICATED = "unauthenticated",
   FORBIDDEN = "forbidden",
   UNKNOWN = "unknown",
 }