slice-machine-ui 2.18.1-alpha.jp-unauthorized-error-improvement.2 → 2.18.1-alpha.lg-remove-changes-tooltip.1

package/src/features/navigation/Navigation.tsx

@@ -9,7 +9,7 @@ import { useRouter } from "next/router";
 import { Suspense } from "react";
 
 import { telemetry } from "@/apiClient";
-import { DefaultErrorBoundary } from "@/errorBoundaries";
+import { ErrorBoundary } from "@/ErrorBoundary";
 import { CUSTOM_TYPES_CONFIG } from "@/features/customTypes/customTypesConfig";
 import { CUSTOM_TYPES_MESSAGES } from "@/features/customTypes/customTypesMessages";
 import { RepositoryInfo } from "@/features/navigation/RepositoryInfo";
@@ -86,20 +86,21 @@ export function Navigation() {
           />
         </ActionList>
 
-        <DefaultErrorBoundary>
+        <ErrorBoundary>
           <Suspense>
             <UpdateInfo />
           </Suspense>
-        </DefaultErrorBoundary>
+        </ErrorBoundary>
       </Box>
 
       <Box flexDirection="column">
         <ActionList variant="compact">
-          <DefaultErrorBoundary>
+          <ErrorBoundary>
             <Suspense>
               <OnboardingGuide />
             </Suspense>
-          </DefaultErrorBoundary>
+          </ErrorBoundary>
+
           <NavigationItem
             title="Documentation"
             href={documentationLink}
@@ -135,11 +136,11 @@ export function Navigation() {
             Icon={LightningIcon}
             active={router.asPath.startsWith("/changelog")}
             RightElement={
-              <DefaultErrorBoundary>
+              <ErrorBoundary>
                 <Suspense fallback={<Skeleton height={16} />}>
                   <SliceMachineVersion />
                 </Suspense>
-              </DefaultErrorBoundary>
+              </ErrorBoundary>
             }
           />
         </ActionList>

package/src/features/navigation/RepositoryInfo.tsx

@@ -14,27 +14,33 @@ export function RepositoryInfo() {
   const isCollapsed = useMediaQuery({ max: "medium" });
 
   return (
-    <Box justifyContent="center" height={48}>
-      {!isCollapsed && (
-        <Box flexGrow={1} flexDirection="column" gap={2} maxWidth="100%">
-          <Text noWrap component="h1" variant="h3">
+    <Box flexDirection="column" gap={2}>
+      <Box
+        justifyContent={isCollapsed ? "center" : "space-between"}
+        alignItems="center"
+        gap={2}
+      >
+        {!isCollapsed && (
+          <Text noWrap variant="h3">
             {repositoryName}
           </Text>
-
-          <Text noWrap component="h2" variant="small" color="grey11">
-            {repositoryDomain}
-          </Text>
-        </Box>
+        )}
+        <Tooltip content="Open Prismic repository" side="right">
+          <IconButton
+            data-testid="prismic-repository-link"
+            sx={{ flexShrink: 0 }}
+            icon="openInNew"
+            onClick={() => {
+              window.open(repositoryUrl, "_blank");
+            }}
+          />
+        </Tooltip>
+      </Box>
+      {!isCollapsed && (
+        <Text noWrap variant="small" color="grey11">
+          {repositoryDomain}
+        </Text>
       )}
-      <Tooltip content="Open Prismic repository" side="right">
-        <IconButton
-          data-testid="prismic-repository-link"
-          icon="openInNew"
-          onClick={() => {
-            window.open(repositoryUrl, "_blank");
-          }}
-        />
-      </Tooltip>
     </Box>
   );
 }

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 { DefaultErrorBoundary } from "@/errorBoundaries";
+import { ErrorBoundary } from "@/ErrorBoundary";
 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 ? (
-    <DefaultErrorBoundary>
+    <ErrorBoundary>
       <Suspense>
         <Box
           bottom={32}
@@ -29,7 +29,7 @@ export const FloatingBackButton: FC = () => {
           <BackButton sourceCustomTypeId={sourceCustomTypeId} />
         </Box>
       </Suspense>
-    </DefaultErrorBoundary>
+    </ErrorBoundary>
   ) : null;
 };
 

package/src/features/sync/getUnSyncChanges.ts

@@ -149,7 +149,9 @@ export const getModelStatus = (args: GetModelStatusArgs): ModelsStatuses => {
   const { slices, customTypes, isOnline, authStatus } = args;
 
   const userHasAccessToModels =
-    isOnline && authStatus === AuthStatus.AUTHORIZED;
+    isOnline &&
+    authStatus != AuthStatus.FORBIDDEN &&
+    authStatus != AuthStatus.UNAUTHORIZED;
 
   const modelsStatuses = {
     slices: computeStatuses(slices, userHasAccessToModels),

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

@@ -1,6 +1,16 @@
-import { Box, Button, ButtonGroup } from "@prismicio/editor-ui";
+import {
+  BlankSlate,
+  BlankSlateDescription,
+  BlankSlateIcon,
+  BlankSlateTitle,
+  Box,
+  Button,
+  ButtonGroup,
+  Text,
+} from "@prismicio/editor-ui";
+import { isUnauthorizedError } from "@slicemachine/manager/client";
 import { useRouter } from "next/router";
-import { FC, PropsWithChildren, Suspense } from "react";
+import { FC, PropsWithChildren, Suspense, useState } from "react";
 
 import { Breadcrumb } from "@/components/Breadcrumb";
 import {
@@ -9,6 +19,8 @@ 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";
 
@@ -17,17 +29,80 @@ export const AppLayout: FC<PropsWithChildren> = ({
   ...otherProps
 }) => {
   return (
-    <Suspense>
-      <PageLayoutWithActiveEnvironment {...otherProps}>
-        <PageLayoutPane>
-          <Navigation />
-        </PageLayoutPane>
-        {children}
-      </PageLayoutWithActiveEnvironment>
-    </Suspense>
+    <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>
   );
 };
 
+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/AuthErrorPage.tsx

@@ -0,0 +1,44 @@
+import { Box, Button, Text } from "@prismicio/editor-ui";
+import React, { FC } from "react";
+
+import { AuthStatus } from "@/modules/userContext/types";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
+
+export type AuthErrorPageProps = {
+  authStatus: AuthStatus.FORBIDDEN;
+};
+
+export const AuthErrorPage: FC<AuthErrorPageProps> = (props) => {
+  const { authStatus } = props;
+  const { openLoginModal } = useSliceMachineActions();
+
+  return (
+    <Box
+      flexDirection="column"
+      height="100%"
+      alignItems="center"
+      justifyContent="center"
+      gap={8}
+    >
+      {authStatus === AuthStatus.FORBIDDEN && (
+        <>
+          <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>
+      {authStatus === AuthStatus.FORBIDDEN && (
+        <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 { DefaultErrorBoundary } from "@/errorBoundaries";
+import { ErrorBoundary } from "@/ErrorBoundary";
 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>
 
-        <DefaultErrorBoundary>
+        <ErrorBoundary>
           <Suspense>
             <DevCollaborationExperiment />
           </Suspense>
-        </DefaultErrorBoundary>
+        </ErrorBoundary>
       </Box>
     </>
   );

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

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

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

@@ -9,13 +9,6 @@ import {
 import { useRouter } from "next/router";
 import { type FC } from "react";
 
-import {
-  HoverCard,
-  HoverCardCloseButton,
-  HoverCardDescription,
-  HoverCardMedia,
-  HoverCardTitle,
-} from "@/components/HoverCard";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
 import { AutoSyncStatusIndicator } from "@/features/sync/components/AutoSyncStatusIndicator";
 import { useUnSyncChanges } from "@/features/sync/useUnSyncChanges";
@@ -23,87 +16,59 @@ import { useAuthStatus } from "@/hooks/useAuthStatus";
 import { useNetwork } from "@/hooks/useNetwork";
 import { ChangesIcon } from "@/icons/ChangesIcon";
 import { AuthStatus } from "@/modules/userContext/types";
-import useSliceMachineActions from "@/modules/useSliceMachineActions";
 
 export const ChangesItem: FC = () => {
-  const { setSeenChangesToolTip } = useSliceMachineActions();
-  const open = useOpenChangesHoverCard();
   const router = useRouter();
   const { autoSyncStatus } = useAutoSync();
   const collapsed = useMediaQuery({ max: "medium" });
 
-  const onClose = () => {
-    setSeenChangesToolTip();
-  };
-
   return (
-    <HoverCard
-      align="start"
-      open={open}
-      openDelay={3000}
-      onClose={onClose}
-      side="right"
-      sideOffset={24}
-      trigger={
-        <Box
-          alignItems={collapsed ? "center" : undefined}
-          flexDirection="column"
-        >
-          {autoSyncStatus === "failed" ||
-          autoSyncStatus === "synced" ||
-          autoSyncStatus === "syncing" ? (
-            <AutoSyncStatusIndicator autoSyncStatus={autoSyncStatus} />
-          ) : collapsed ? (
-            <Tooltip content="Review changes" side="right">
-              <Box position="relative">
-                {/*
-                 * TODO(DT-1942): This should be an IconButton with a link
-                 * component for accessibility
-                 */}
-                <IconButton
-                  icon={<ChangesIcon />}
-                  onClick={() => {
-                    void router.push("/changes");
-                  }}
-                  variant="solid"
-                />
-                <Box
-                  left="100%"
-                  position="absolute"
-                  top={0}
-                  transform="translate(-50%, -50%)"
-                >
-                  <ChangesCount color="purple" />
-                </Box>
-              </Box>
-            </Tooltip>
-          ) : (
-            // TODO(DT-1942): This should be a Button with a link component for
-            // accessibility
-            <Button
-              color="grey"
+    <Box alignItems={collapsed ? "center" : undefined} flexDirection="column">
+      {autoSyncStatus === "failed" ||
+      autoSyncStatus === "synced" ||
+      autoSyncStatus === "syncing" ? (
+        <AutoSyncStatusIndicator autoSyncStatus={autoSyncStatus} />
+      ) : collapsed ? (
+        <Tooltip content="Review changes" side="right">
+          <Box position="relative">
+            {/*
+             * TODO(DT-1942): This should be an IconButton with a link
+             * component for accessibility
+             */}
+            <IconButton
+              icon={<ChangesIcon />}
               onClick={() => {
                 void router.push("/changes");
               }}
-              sx={{ width: "100%" }}
+              variant="solid"
+            />
+            <Box
+              left="100%"
+              position="absolute"
+              top={0}
+              transform="translate(-50%, -50%)"
             >
-              <Box alignItems="center" gap={4}>
-                <Text variant="bold">Review changes</Text>{" "}
-                <ChangesCount color="grey" />
-              </Box>
-            </Button>
-          )}
-        </Box>
-      }
-    >
-      <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>
+              <ChangesCount color="purple" />
+            </Box>
+          </Box>
+        </Tooltip>
+      ) : (
+        // TODO(DT-1942): This should be a Button with a link component for
+        // accessibility
+        <Button
+          color="grey"
+          onClick={() => {
+            void router.push("/changes");
+          }}
+          sx={{ width: "100%" }}
+        >
+          <Box alignItems="center" gap={4}>
+            <Text variant="bold">Review changes</Text>{" "}
+            <ChangesCount color="grey" />
+          </Box>
+        </Button>
+      )}
+    </Box>
   );
 };
 
@@ -117,12 +82,16 @@ export const ChangesCount: FC<ChangesCountProps> = ({ color }) => {
 
   if (
     !isOnline ||
-    authStatus !== AuthStatus.AUTHORIZED ||
-    numberOfChanges === 0
+    authStatus === AuthStatus.UNAUTHORIZED ||
+    authStatus === AuthStatus.FORBIDDEN
   ) {
     return null;
   }
 
+  if (numberOfChanges === 0) {
+    return null;
+  }
+
   const formattedNumberOfChanges = numberOfChanges > 9 ? "+9" : numberOfChanges;
 
   return (
@@ -137,20 +106,3 @@ export const ChangesCount: FC<ChangesCountProps> = ({ color }) => {
     </Box>
   );
 };
-
-// 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/src/legacy/components/Navigation/Environment.tsx

@@ -5,7 +5,7 @@ import {
 import { useState } from "react";
 
 import { getState, telemetry } from "@/apiClient";
-import { useSetEnvironment } from "@/features/environments/actions/useSetEnvironment";
+import { setEnvironment } from "@/features/environments/actions/setEnvironment";
 import { useActiveEnvironment } from "@/features/environments/useActiveEnvironment";
 import { useEnvironments } from "@/features/environments/useEnvironments";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
@@ -28,7 +28,6 @@ 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) {
@@ -106,4 +105,10 @@ export function Environment() {
       />
     );
   }
+
+  if (useEnvironmentsError !== undefined) {
+    throw useEnvironmentsError;
+  }
+
+  throw activeEnvironmentError;
 }

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

@@ -17,8 +17,9 @@ 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 { EnvironmentLogoutButton } from "@/features/auth/LogoutButton";
+import { LogoutButton } from "@/features/auth/LogoutButton";
 import { LoginIcon } from "@/icons/LoginIcon";
 import { LogoIcon } from "@/icons/LogoIcon";
 
@@ -29,7 +30,7 @@ type SideNavEnvironmentSelectorProps = {
   disabled?: boolean;
   environments?: Environment[];
   loading?: boolean;
-  variant?: "default" | "offline" | "unauthenticated";
+  variant?: "default" | "offline" | "unauthorized" | "unauthenticated";
   onLogInClick?: () => void;
   onSelect?: (environment: Environment) => void | Promise<void>;
 };
@@ -140,7 +141,11 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
               />
             ) : undefined}
 
-            {variant === "default" && <EnvironmentLogoutButton />}
+            {variant === "default" && (
+              <LogoutButton
+                onLogoutSuccess={() => toast.success("Logged out")}
+              />
+            )}
           </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 { DefaultErrorBoundary } from "@/errorBoundaries";
+import { ErrorBoundary } from "@/ErrorBoundary";
 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",
               }}
             >
-              <DefaultErrorBoundary
+              <ErrorBoundary
                 renderError={() => (
                   <DefaultErrorMessage
                     title="Editor error"
@@ -315,7 +315,7 @@ const Simulator: FC<SimulatorProps> = ({ slice, variation }) => {
                     />
                   </QueryClientProvider>
                 </Suspense>
-              </DefaultErrorBoundary>
+              </ErrorBoundary>
             </Flex>
           ) : null}
         </Flex>