slice-machine-ui 2.18.1-beta.6 → 2.18.1-beta.8

package/src/features/errorBoundaries/AppStateErrorBoundary.tsx

@@ -0,0 +1,108 @@
+import {
+  BlankSlate,
+  BlankSlateDescription,
+  BlankSlateIcon,
+  BlankSlateTitle,
+  Box,
+  ErrorBoundary as EditorUiErrorBoundary,
+  Text,
+} from "@prismicio/editor-ui";
+import {
+  isInvalidActiveEnvironmentError,
+  isUnauthorizedError,
+} from "@slicemachine/manager/client";
+import Link from "next/link";
+import { PropsWithChildren } from "react";
+
+import { ReloadLogoutButton } from "@/features/auth/LogoutButton";
+
+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/{ErrorBoundary.tsx → features/errorBoundaries/DefaultErrorBoundary.tsx}

@@ -12,13 +12,13 @@ import {
 
 import { useAuthStatus } from "@/hooks/useAuthStatus";
 
-type ErrorBoundaryProps = Pick<
+type DefaultErrorBoundaryProps = Pick<
   // TODO(DT-1979): Export the `ErrorBoundaryProps` type from `@prismicio/editor-ui`.
   ComponentPropsWithoutRef<typeof EditorUiErrorBoundary>,
   "children" | "renderError"
 >;
 
-export const ErrorBoundary: FC<ErrorBoundaryProps> = (props) => {
+export const DefaultErrorBoundary: FC<DefaultErrorBoundaryProps> = (props) => {
   const errorRef = useRef<unknown>();
   const authStatus = useAuthStatus();
   return (

package/src/features/errorBoundaries/index.ts

@@ -0,0 +1,2 @@
+export { AppStateErrorBoundary } from "./AppStateErrorBoundary";
+export { DefaultErrorBoundary } from "./DefaultErrorBoundary";

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 "@/features/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

@@ -9,9 +9,9 @@ import { useRouter } from "next/router";
 import { Suspense } from "react";
 
 import { telemetry } from "@/apiClient";
-import { ErrorBoundary } from "@/ErrorBoundary";
 import { CUSTOM_TYPES_CONFIG } from "@/features/customTypes/customTypesConfig";
 import { CUSTOM_TYPES_MESSAGES } from "@/features/customTypes/customTypesMessages";
+import { DefaultErrorBoundary } from "@/features/errorBoundaries";
 import { RepositoryInfo } from "@/features/navigation/RepositoryInfo";
 import { OnboardingGuide } from "@/features/onboarding";
 import { useAdapterName } from "@/hooks/useAdapterName";
@@ -86,21 +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}
@@ -136,11 +135,11 @@ export function Navigation() {
             Icon={LightningIcon}
             active={router.asPath.startsWith("/changelog")}
             RightElement={
-              <ErrorBoundary>
+              <DefaultErrorBoundary>
                 <Suspense fallback={<Skeleton height={16} />}>
                   <SliceMachineVersion />
                 </Suspense>
-              </ErrorBoundary>
+              </DefaultErrorBoundary>
             }
           />
         </ActionList>

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

@@ -2,13 +2,13 @@ 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 { useCustomType } from "@/features/customTypes/customTypesBuilder/useCustomType";
 import {
   CUSTOM_TYPES_CONFIG,
   matchesBuilderPagePathname,
   readBuilderPageDynamicSegment,
 } from "@/features/customTypes/customTypesConfig";
+import { DefaultErrorBoundary } from "@/features/errorBoundaries";
 import { type Route, useRouteChange } from "@/hooks/useRouteChange";
 import { CloseIcon } from "@/icons/CloseIcon";
 import { UndoIcon } from "@/icons/UndoIcon";
@@ -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/sync/AutoSyncProvider.tsx

@@ -83,7 +83,7 @@ export const AutoSyncProvider: FC<PropsWithChildren> = (props) => {
 
         // We default to a full user logged in with internet access if not provider.
         // This is useful when we want to sync changes right after the user logs in.
-        loggedIn = isOnline && authStatus === AuthStatus.AUTHORIZED,
+        loggedIn = isOnline && authStatus === AuthStatus.AUTHENTICATED,
       } = args;
 
       if (!loggedIn || environment?.kind !== "dev") {
@@ -240,7 +240,7 @@ function getAutoSyncStatus(args: GetAutoSyncStatusArgs): AutoSyncStatus {
     return "offline";
   }
 
-  if (authStatus !== AuthStatus.AUTHORIZED) {
+  if (authStatus !== AuthStatus.AUTHENTICATED) {
     return "not-logged-in";
   }
 

package/src/features/sync/getUnSyncChanges.ts

@@ -149,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.AUTHENTICATED;
 
   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 "@/features/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();
@@ -100,7 +108,7 @@ const LoginModal: React.FunctionComponent = () => {
         ),
       );
       const { changedCustomTypes, changedSlices } = getUnSyncedChanges({
-        authStatus: AuthStatus.AUTHORIZED,
+        authStatus: AuthStatus.AUTHENTICATED,
         customTypes,
         isOnline: true,
         libraries: serverState.libraries,
@@ -127,7 +135,7 @@ const LoginModal: React.FunctionComponent = () => {
 
   return (
     <SliceMachineModal
-      isOpen={isOpen}
+      isOpen={isLoginLoading || isOpen}
       shouldCloseOnOverlayClick
       onRequestClose={closeModals}
       contentLabel={"login_modal"}