slice-machine-ui 2.18.1-alpha.jp-unauthorized-error.3 → 2.18.1-alpha.jp-unauthorized-error-improvement.1

package/src/errorBoundaries.tsx

@@ -0,0 +1,150 @@
+import {
+  BlankSlate,
+  BlankSlateDescription,
+  BlankSlateIcon,
+  BlankSlateTitle,
+  Box,
+  ErrorBoundary as EditorUiErrorBoundary,
+  Text,
+} from "@prismicio/editor-ui";
+import {
+  isInvalidActiveEnvironmentError,
+  isUnauthenticatedError,
+  isUnauthorizedError,
+} from "@slicemachine/manager/client";
+import Link from "next/link";
+import {
+  type ComponentPropsWithoutRef,
+  type FC,
+  PropsWithChildren,
+  useCallback,
+  useRef,
+} from "react";
+
+import { ReloadLogoutButton } from "@/features/auth/LogoutButton";
+import { useAuthStatus } from "@/hooks/useAuthStatus";
+
+type DefaultErrorBoundaryProps = Pick<
+  // TODO(DT-1979): Export the `ErrorBoundaryProps` type from `@prismicio/editor-ui`.
+  ComponentPropsWithoutRef<typeof EditorUiErrorBoundary>,
+  "children" | "renderError"
+>;
+
+export const DefaultErrorBoundary: FC<DefaultErrorBoundaryProps> = (props) => {
+  const errorRef = useRef<unknown>();
+  const authStatus = useAuthStatus();
+  return (
+    <EditorUiErrorBoundary
+      {...props}
+      onError={(error) => {
+        errorRef.current = error;
+      }}
+      ref={useCallback(
+        (errorBoundary: EditorUiErrorBoundary | null) => {
+          if (errorBoundary === null) return;
+          const error = errorRef.current;
+          if (isUnauthenticatedError(error) || isUnauthorizedError(error)) {
+            errorRef.current = undefined;
+            errorBoundary.reset();
+          }
+        },
+        /* eslint-disable-next-line react-hooks/exhaustive-deps --
+         * Whenever `authStatus` changes, we want to `reset` the `errorBoundary`
+         * if an authentication or authorization error has been caught.
+         **/
+        [authStatus],
+      )}
+    />
+  );
+};
+
+export function AppStateErrorBoundary(props: PropsWithChildren) {
+  return (
+    <EditorUiErrorBoundary
+      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>
+              <RenderErrorDescription error={error} />
+            </BlankSlate>
+          </Box>
+        );
+      }}
+    >
+      {props.children}
+    </EditorUiErrorBoundary>
+  );
+}
+
+function RenderErrorDescription(args: { error: unknown }) {
+  const { error } = args;
+
+  if (isUnauthorizedError(error)) {
+    return (
+      <CommonErrorBox>
+        <Box flexDirection="column" gap={8} alignItems="center">
+          <Text variant="h3" align="center">
+            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>
+        <ReloadLogoutButton sx={{ alignSelf: "center" }} />
+      </CommonErrorBox>
+    );
+  }
+
+  if (isInvalidActiveEnvironmentError(error)) {
+    return (
+      <CommonErrorBox>
+        <Box flexDirection="column" gap={8} alignItems="center">
+          <Text variant="h3" align="center">
+            Your current environment is invalid.
+          </Text>
+          <Text align="center">
+            Check with your repository administrator that you have permissions
+            and correctly configured your environment for the current
+            repository. For more details, consult the{" "}
+            <Link href="https://prismic.io/docs/environments" target="_blank">
+              documentation
+            </Link>
+            .
+          </Text>
+        </Box>
+        <ReloadLogoutButton sx={{ alignSelf: "center" }} />
+      </CommonErrorBox>
+    );
+  }
+
+  return <BlankSlateDescription>{JSON.stringify(error)}</BlankSlateDescription>;
+}
+
+function CommonErrorBox(args: { children: React.ReactNode }) {
+  const { children } = args;
+
+  return (
+    <Box
+      flexDirection="column"
+      alignItems="center"
+      gap={16}
+      margin={{ top: 8 }}
+      maxWidth={768}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/features/auth/LogoutButton.tsx

@@ -1,52 +1,34 @@
 import { Button, Icon, IconButton, Tooltip } from "@prismicio/editor-ui";
 import { SX } from "@prismicio/editor-ui/dist/theme";
 import * as Sentry from "@sentry/nextjs";
-import { ReactNode } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/router";
+import { toast } from "react-toastify";
 
-import { clearAuth as managerLogout, getState } from "@/apiClient";
-import { invalidateActiveEnvironmentData } from "@/features/environments/useActiveEnvironment";
-import { invalidateEnvironmentsData } from "@/features/environments/useEnvironments";
+import { clearAuth, getState } from "@/apiClient";
+import { GetActiveEnvironmentQueryKey } from "@/features/environments/useActiveEnvironment";
+import { GetEnvironmentsQueryKey } from "@/features/environments/useEnvironments";
 import useSliceMachineActions from "@/modules/useSliceMachineActions";
 
-interface LogoutButtonProps {
-  children?: ReactNode;
-  onLogoutSuccess?: () => void;
-  isLoading?: boolean;
-  sx?: SX;
-}
-
-export function LogoutButton(props: LogoutButtonProps) {
-  const { children, onLogoutSuccess, isLoading, sx } = props;
-
+export function EnvironmentLogoutButton() {
   const { refreshState } = useSliceMachineActions();
+  const queryClient = useQueryClient();
 
   async function onClick() {
-    await managerLogout();
+    await clearAuth();
 
     const serverState = await getState();
     refreshState(serverState);
-
     Sentry.setUser({ id: serverState.env.shortId });
 
-    // refresh queries to update the UI
-    invalidateEnvironmentsData();
-    invalidateActiveEnvironmentData();
+    await Promise.all([
+      queryClient.invalidateQueries({ queryKey: GetEnvironmentsQueryKey }),
+      queryClient.invalidateQueries({
+        queryKey: GetActiveEnvironmentQueryKey,
+      }),
+    ]);
 
-    onLogoutSuccess?.();
-  }
-
-  if (children !== undefined) {
-    return (
-      <Button
-        onClick={() => void onClick()}
-        renderEndIcon={() => <Icon name="logout" size="extraSmall" />}
-        color="grey"
-        loading={isLoading}
-        sx={sx}
-      >
-        {children}
-      </Button>
-    );
+    toast.success("Logged out");
   }
 
   return (
@@ -55,9 +37,33 @@ export function LogoutButton(props: LogoutButtonProps) {
         icon="logout"
         onClick={() => void onClick()}
         hiddenLabel="Log out"
-        loading={isLoading}
-        sx={sx}
       />
     </Tooltip>
   );
 }
+
+interface ReloadLogoutButtonProps {
+  sx?: SX;
+}
+
+export function ReloadLogoutButton(props: ReloadLogoutButtonProps) {
+  const { sx } = props;
+  const router = useRouter();
+
+  async function onClick() {
+    await clearAuth();
+    Sentry.setUser({ id: undefined });
+    router.reload();
+  }
+
+  return (
+    <Button
+      onClick={() => void onClick()}
+      renderEndIcon={() => <Icon name="logout" size="extraSmall" />}
+      color="grey"
+      sx={sx}
+    >
+      Log out
+    </Button>
+  );
+}

package/src/features/builder/fields/contentRelationship/ContentRelationshipFieldPicker.tsx

@@ -30,7 +30,7 @@ import {
 } from "@prismicio/types-internal/lib/customtypes";
 import { useEffect } from "react";
 
-import { ErrorBoundary } from "@/ErrorBoundary";
+import { DefaultErrorBoundary } from "@/errorBoundaries";
 import {
   revalidateGetCustomTypes,
   useCustomTypes as useCustomTypesRequest,
@@ -226,7 +226,7 @@ export function ContentRelationshipFieldPicker(
   props: ContentRelationshipFieldPickerProps,
 ) {
   return (
-    <ErrorBoundary
+    <DefaultErrorBoundary
       renderError={() => (
         <Box alignItems="center" gap={8}>
           <Icon name="alert" size="small" color="tomato10" />
@@ -254,7 +254,7 @@ export function ContentRelationshipFieldPicker(
       >
         <ContentRelationshipFieldPickerContent {...props} />
       </AnimatedSuspense>
-    </ErrorBoundary>
+    </DefaultErrorBoundary>
   );
 }
 

package/src/features/changes/StatusBadge.tsx

@@ -73,7 +73,7 @@ function getStatusBadgeContent(
             "Data from the remote repository could not be fetched (no internet connection).",
         };
       }
-      if (args.authStatus === AuthStatus.UNAUTHORIZED) {
+      if (args.authStatus === AuthStatus.UNAUTHENTICATED) {
         return {
           badgeColor: "grey",
           badgeTitle: "Unknown",
@@ -81,14 +81,6 @@ function getStatusBadgeContent(
             "Data from the remote repository could not be fetched (not connected to Prismic).",
         };
       }
-      if (args.authStatus === AuthStatus.FORBIDDEN) {
-        return {
-          badgeColor: "grey",
-          badgeTitle: "Unknown",
-          tooltipContent:
-            "Data from the remote repository could not be fetched (you don't have access to the repository).",
-        };
-      }
     }
     default: {
       return {

package/src/features/customTypes/customTypesBuilder/PageSnippetDialog/PageSnippetDialog.tsx

@@ -4,7 +4,7 @@ import { FC, Suspense } from "react";
 
 import { telemetry } from "@/apiClient";
 import { ContentTabs } from "@/components/ContentTabs";
-import { ErrorBoundary } from "@/ErrorBoundary";
+import { DefaultErrorBoundary } from "@/errorBoundaries";
 import { MarkdownRenderer } from "@/features/documentation/MarkdownRenderer";
 import { useDocumentation } from "@/features/documentation/useDocumentation";
 import { useOnboarding } from "@/features/onboarding/useOnboarding";
@@ -68,7 +68,7 @@ type PageSnippetDialogProps = { model: CustomType };
 export const PageSnippetDialog: FC<PageSnippetDialogProps> = ({ model }) => {
   return (
     <div>
-      <ErrorBoundary>
+      <DefaultErrorBoundary>
         <Suspense
           fallback={
             <Button color="grey" startIcon="code">
@@ -78,7 +78,7 @@ export const PageSnippetDialog: FC<PageSnippetDialogProps> = ({ model }) => {
         >
           <PageSnippetContent model={model} />
         </Suspense>
-      </ErrorBoundary>
+      </DefaultErrorBoundary>
     </div>
   );
 };

package/src/features/customTypes/customTypesTable/CustomTypesTablePage.tsx

@@ -9,7 +9,7 @@ import Head from "next/head";
 import { type FC, Suspense, useState } from "react";
 
 import { BreadcrumbItem } from "@/components/Breadcrumb";
-import { ErrorBoundary } from "@/ErrorBoundary";
+import { DefaultErrorBoundary } from "@/errorBoundaries";
 import { CUSTOM_TYPES_MESSAGES } from "@/features/customTypes/customTypesMessages";
 import {
   AppLayout,
@@ -42,7 +42,7 @@ export const CustomTypesTablePage: FC<CustomTypesTablePageProps> = ({
           Machine
         </title>
       </Head>
-      <ErrorBoundary
+      <DefaultErrorBoundary
         renderError={() => (
           <AppLayout>
             <AppLayoutContent>
@@ -119,7 +119,7 @@ export const CustomTypesTablePage: FC<CustomTypesTablePageProps> = ({
             </AppLayoutContent>
           </AppLayout>
         </Suspense>
-      </ErrorBoundary>
+      </DefaultErrorBoundary>
     </>
   );
 };

package/src/features/environments/actions/useSetEnvironment.ts

@@ -0,0 +1,22 @@
+import { revalidateData } from "@prismicio/editor-support/Suspense";
+import { Environment } from "@slicemachine/manager/client";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { getState } from "@/apiClient";
+import { GetActiveEnvironmentQueryKey } from "@/features/environments/useActiveEnvironment";
+import { managerClient } from "@/managerClient";
+
+export function useSetEnvironment() {
+  const queryClient = useQueryClient();
+
+  return async (environment: Pick<Environment, "domain">) => {
+    await managerClient.project.updateEnvironment({
+      environment: environment.domain,
+    });
+
+    void Promise.all([
+      queryClient.invalidateQueries({ queryKey: GetActiveEnvironmentQueryKey }),
+      revalidateData(getState, []),
+    ]);
+  };
+}

package/src/features/environments/useActiveEnvironment.ts

@@ -1,14 +1,22 @@
-import {
-  invalidateFetcherData,
-  useRequest,
-} from "@prismicio/editor-support/Suspense";
+import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 
 import { getActiveEnvironment } from "./actions/getActiveEnvironment";
 
-export function invalidateActiveEnvironmentData() {
-  invalidateFetcherData(getActiveEnvironment);
-}
+export const GetActiveEnvironmentQueryKey = ["getActiveEnvironment"];
+
+export function useActiveEnvironment(options?: { suspense?: boolean }) {
+  const { suspense } = options ?? {};
+
+  const hook = suspense === true ? useSuspenseQuery : useQuery;
+
+  const { data, error, ...rest } = hook({
+    queryKey: GetActiveEnvironmentQueryKey,
+    queryFn: () => getActiveEnvironment(),
+  });
 
-export function useActiveEnvironment() {
-  return useRequest(getActiveEnvironment, []);
+  return {
+    activeEnvironment: data?.activeEnvironment,
+    error: data?.error ?? error ?? undefined,
+    ...rest,
+  };
 }

package/src/features/environments/useEnvironments.ts

@@ -1,14 +1,17 @@
-import {
-  invalidateFetcherData,
-  useRequest,
-} from "@prismicio/editor-support/Suspense";
+import { useQuery } from "@tanstack/react-query";
 
 import { getEnvironments } from "./actions/getEnvironments";
 
-export function invalidateEnvironmentsData() {
-  invalidateFetcherData(getEnvironments);
-}
+export const GetEnvironmentsQueryKey = ["getEnvironments"];
 
 export function useEnvironments() {
-  return useRequest(getEnvironments, []);
+  const { data, error, ...rest } = useQuery({
+    queryKey: GetEnvironmentsQueryKey,
+    queryFn: () => getEnvironments(),
+  });
+  return {
+    environments: data?.environments,
+    error: data?.error ?? error ?? undefined,
+    ...rest,
+  };
 }

package/src/features/labs/labsList/LabsPage.tsx

@@ -3,7 +3,7 @@ import Head from "next/head";
 import { type FC, ReactNode, Suspense } from "react";
 
 import { BreadcrumbItem } from "@/components/Breadcrumb";
-import { ErrorBoundary } from "@/ErrorBoundary";
+import { DefaultErrorBoundary } from "@/errorBoundaries";
 import {
   AppLayout,
   AppLayoutBreadcrumb,
@@ -19,7 +19,7 @@ export const LabsPage: FC = () => {
       <Head>
         <title>Labs - Slice Machine</title>
       </Head>
-      <ErrorBoundary
+      <DefaultErrorBoundary
         renderError={() => (
           <LabsPageLayout>
             <Box alignItems="center" justifyContent="center">
@@ -42,7 +42,7 @@ export const LabsPage: FC = () => {
             <LabsList />
           </LabsPageLayout>
         </Suspense>
-      </ErrorBoundary>
+      </DefaultErrorBoundary>
     </>
   );
 };

package/src/features/navigation/Navigation.tsx

@@ -1,15 +1,22 @@
-import { ActionList, Box, Separator, Skeleton } from "@prismicio/editor-ui";
+import {
+  ActionList,
+  Badge,
+  Box,
+  Separator,
+  Skeleton,
+} from "@prismicio/editor-ui";
 import { useRouter } from "next/router";
 import { Suspense } from "react";
 
 import { telemetry } from "@/apiClient";
-import { ErrorBoundary } from "@/ErrorBoundary";
+import { DefaultErrorBoundary } from "@/errorBoundaries";
 import { CUSTOM_TYPES_CONFIG } from "@/features/customTypes/customTypesConfig";
 import { CUSTOM_TYPES_MESSAGES } from "@/features/customTypes/customTypesMessages";
 import { RepositoryInfo } from "@/features/navigation/RepositoryInfo";
 import { OnboardingGuide } from "@/features/onboarding";
 import { useAdapterName } from "@/hooks/useAdapterName";
 import { useMarketingContent } from "@/hooks/useMarketingContent";
+import { CodeIcon } from "@/icons/CodeIcon";
 import { FolderIcon } from "@/icons/FolderIcon";
 import { LightningIcon } from "@/icons/Lightning";
 import { MenuBookIcon } from "@/icons/MenuBookIcon";
@@ -79,20 +86,20 @@ export function Navigation() {
           />
         </ActionList>
 
-        <ErrorBoundary>
+        <DefaultErrorBoundary>
           <Suspense>
             <UpdateInfo />
           </Suspense>
-        </ErrorBoundary>
+        </DefaultErrorBoundary>
       </Box>
 
       <Box flexDirection="column">
         <ActionList variant="compact">
-          <ErrorBoundary>
+          <DefaultErrorBoundary>
             <Suspense>
               <OnboardingGuide />
             </Suspense>
-          </ErrorBoundary>
+          </DefaultErrorBoundary>
           <NavigationItem
             title="Documentation"
             href={documentationLink}
@@ -106,17 +113,33 @@ export function Navigation() {
             }}
           />
 
+          <NavigationItem
+            title="Prismic MCP"
+            href="https://prismic.io/docs/ai#code-with-prismics-mcp-server"
+            target="_blank"
+            Icon={CodeIcon}
+            RightElement={<Badge title="New" color="indigo" />}
+            tooltip="Connect Prismic MCP to your editor (like Cursor) for AI-powered coding."
+            onClick={() => {
+              void telemetry.track({
+                event: "sidebar:link-clicked",
+                link_name: "prismic_mcp",
+                source: "slice_machine_sidebar",
+              });
+            }}
+          />
+
           <NavigationItem
             title="Changelog"
             href="/changelog"
             Icon={LightningIcon}
             active={router.asPath.startsWith("/changelog")}
             RightElement={
-              <ErrorBoundary>
+              <DefaultErrorBoundary>
                 <Suspense fallback={<Skeleton height={16} />}>
                   <SliceMachineVersion />
                 </Suspense>
-              </ErrorBoundary>
+              </DefaultErrorBoundary>
             }
           />
         </ActionList>

package/src/features/navigation/NavigationItem.tsx

@@ -13,6 +13,7 @@ type NavigationItemPropsBase = {
   active?: boolean;
   Icon: FC<SVGProps<SVGSVGElement>>;
   RightElement?: ReactNode;
+  tooltip?: string;
 };
 
 type NavigationLinkItemProps = NavigationItemPropsBase & {
@@ -32,7 +33,8 @@ type NavigationButtonItemProps = NavigationItemPropsBase & {
 type NavigationItemProps = NavigationLinkItemProps | NavigationButtonItemProps;
 
 export function NavigationItem(props: NavigationItemProps) {
-  const { title, href, target, active, Icon, RightElement, onClick } = props;
+  const { title, href, target, active, Icon, RightElement, onClick, tooltip } =
+    props;
 
   const isCollapsed = useMediaQuery({ max: "medium" });
 
@@ -45,7 +47,7 @@ export function NavigationItem(props: NavigationItemProps) {
       textVariant="normal"
       backgroundColor="transparent"
       renderStartIcon={ItemIcon}
-      endAdornment={RightElement}
+      endAdornment={isCollapsed ? undefined : RightElement}
       selected={active}
     >
       {isCollapsed ? null : title}
@@ -53,7 +55,11 @@ export function NavigationItem(props: NavigationItemProps) {
   );
 
   return (
-    <Tooltip content={title} side="right" visible={isCollapsed}>
+    <Tooltip
+      content={Boolean(tooltip) ? tooltip ?? "" : title}
+      side="right"
+      visible={Boolean(tooltip) ? undefined : isCollapsed}
+    >
       {href !== undefined ? (
         <Link
           href={href}

package/src/features/navigation/SliceMachineVersion.tsx

@@ -1,14 +1,9 @@
-import { Text, useMediaQuery } from "@prismicio/editor-ui";
+import { Text } from "@prismicio/editor-ui";
 
 import { useSliceMachineRunningVersion } from "@/hooks/useSliceMachineRunningVersion";
 
 export function SliceMachineVersion() {
   const sliceMachineRunningVersion = useSliceMachineRunningVersion();
-  const isCollapsed = useMediaQuery({ max: "medium" });
-
-  if (isCollapsed) {
-    return null;
-  }
 
   return (
     <Text

package/src/features/slices/sliceBuilder/FloatingBackButton.tsx

@@ -2,7 +2,7 @@ import { Box, Button, ButtonGroup } from "@prismicio/editor-ui";
 import { useRouter } from "next/router";
 import { type FC, Suspense, useState } from "react";
 
-import { ErrorBoundary } from "@/ErrorBoundary";
+import { DefaultErrorBoundary } from "@/errorBoundaries";
 import { useCustomType } from "@/features/customTypes/customTypesBuilder/useCustomType";
 import {
   CUSTOM_TYPES_CONFIG,
@@ -17,7 +17,7 @@ export const FloatingBackButton: FC = () => {
   const { source } = useRouteChange();
   const sourceCustomTypeId = getSourceCustomTypeId(source);
   return sourceCustomTypeId !== undefined ? (
-    <ErrorBoundary>
+    <DefaultErrorBoundary>
       <Suspense>
         <Box
           bottom={32}
@@ -29,7 +29,7 @@ export const FloatingBackButton: FC = () => {
           <BackButton sourceCustomTypeId={sourceCustomTypeId} />
         </Box>
       </Suspense>
-    </ErrorBoundary>
+    </DefaultErrorBoundary>
   ) : null;
 };
 

package/src/features/slices/sliceBuilder/McpPromoLink.tsx

@@ -0,0 +1,29 @@
+import { Button } from "@prismicio/editor-ui";
+
+import { telemetry } from "@/apiClient";
+
+export const McpPromoLink = () => {
+  return (
+    <Button
+      asChild
+      invisible
+      color="grey"
+      endIcon="openInNew"
+      sx={{ alignSelf: "center" }}
+      onClick={() => {
+        void telemetry.track({
+          event: "mcp:promo-link-clicked",
+          source: "slice_editor",
+          target: "docs",
+        });
+      }}
+    >
+      <a
+        href="https://prismic.io/docs/ai#code-with-prismics-mcp-server"
+        target="_blank"
+      >
+        Boost your workflow in Cursor with Prismic MCP
+      </a>
+    </Button>
+  );
+};

package/src/features/sync/actions/pushChanges.ts

@@ -29,6 +29,7 @@ export async function pushChanges(
     type: "Slice" as const,
     libraryID: sliceChange.slice.from,
     status: sliceChange.status,
+    variationImageUrlMap: sliceChange.variationImageUrlMap,
   }));
   const customTypeChanges = changedCustomTypes.map((customTypeChange) => ({
     id: customTypeChange.customType.id,