slice-machine-ui 1.21.2-dev-next-release.2 → 1.21.2

package/components/ChangesEmptyState/AuthErrorPage.tsx

@@ -1,36 +1,52 @@
+import React, { FC } from "react";
+import { Box, Button, Text, TextLink } from "@prismicio/editor-ui";
+
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import React from "react";
-import { Button, Flex, Text } from "theme-ui";
+import { AuthStatus } from "@src/modules/userContext/types";
+
+export type AuthErrorPageProps = {
+  authStatus: AuthStatus.UNAUTHORIZED | AuthStatus.FORBIDDEN;
+};
 
-export const AuthErrorPage = () => {
+export const AuthErrorPage: FC<AuthErrorPageProps> = (props) => {
+  const { authStatus } = props;
   const { openLoginModal } = useSliceMachineActions();
+
   return (
-    <Flex sx={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
-      <Flex
-        sx={{
-          flexDirection: "column",
-          alignItems: "center",
-          transform: "translateY(-50%)",
-        }}
-      >
-        <Text
-          sx={{
-            fontWeight: 600,
-            fontSize: "24px",
-            lineHeight: "32px",
-            mb: "8px",
-            mt: "2px",
-          }}
-        >
-          Could not access your repository
-        </Text>
-        <Text sx={{ fontSize: "13px", lineHeight: "24px" }}>
-          You need to log in to Prismic in order to push your changes.
-        </Text>
-        <Button sx={{ mt: "24px" }} onClick={() => openLoginModal()}>
-          Log in to Prismic
-        </Button>
-      </Flex>
-    </Flex>
+    <Box
+      flexDirection="column"
+      height="100%"
+      alignItems="center"
+      justifyContent="center"
+      gap={8}
+    >
+      {authStatus === AuthStatus.FORBIDDEN ? (
+        <>
+          <Text variant="h3">It seems like you are logged out</Text>
+          <Text>Log in to connect to your repository.</Text>
+        </>
+      ) : (
+        <>
+          <Text variant="h3">
+            It seems like you don't have access to this repository
+          </Text>
+          <Text>
+            Check that the repository name is correct, then contact your
+            repository administrator.
+          </Text>
+        </>
+      )}
+      <Text>
+        If that doesn't work, it's possible that Slice Machine is having trouble
+        accessing Prismic's servers.{" "}
+        <TextLink href="https://community.prismic.io/">
+          Contact our support team
+        </TextLink>
+        .
+      </Text>
+      {authStatus === AuthStatus.FORBIDDEN && (
+        <Button onClick={() => openLoginModal()}>Log in to Prismic</Button>
+      )}
+    </Box>
   );
 };

package/components/Navigation/Environment.tsx

@@ -1,19 +1,19 @@
 import { Environment as EnvironmentType } from "@slicemachine/manager/client";
 
 import { telemetry } from "@src/apiClient";
-
 import { useEnvironments } from "@src/features/environments/useEnvironments";
 import { setEnvironment } from "@src/features/environments/actions/setEnvironment";
 import { useActiveEnvironment } from "@src/features/environments/useActiveEnvironment";
 import { getLegacySliceMachineState } from "@src/features/legacyState/actions/getLegacySliceMachineState";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-
 import { SideNavEnvironmentSelector } from "@src/components/SideNav";
+import { useNetwork } from "@src/hooks/useNetwork";
 
 export function Environment() {
   const { environments, error: useEnvironmentsError } = useEnvironments();
   const { activeEnvironment } = useActiveEnvironment();
   const { refreshState, openLoginModal } = useSliceMachineActions();
+  const isOnline = useNetwork();
 
   async function onSelect(environment: EnvironmentType) {
     void telemetry.track({
@@ -28,6 +28,10 @@ export function Environment() {
     refreshState(legacySliceMachineState);
   }
 
+  if (!isOnline) {
+    return <SideNavEnvironmentSelector variant="offline" />;
+  }
+
   if (useEnvironmentsError === undefined) {
     return (
       <SideNavEnvironmentSelector
@@ -47,7 +51,11 @@ export function Environment() {
   ) {
     return (
       <SideNavEnvironmentSelector
-        variant="unauthorized"
+        variant={
+          useEnvironmentsError.name === "UnauthenticatedError"
+            ? "unauthenticated"
+            : "unauthorized"
+        }
         onLogInClick={() => openLoginModal()}
       />
     );

package/components/Navigation/index.tsx

@@ -48,7 +48,14 @@ const Navigation: FC = () => {
 
   return (
     <SideNav>
-      <ErrorBoundary onError={console.error}>
+      <ErrorBoundary
+        onError={(error) => {
+          console.error(
+            `An error occurred while rendering the environments switch`,
+            error,
+          );
+        }}
+      >
         <Suspense>
           <Environment />
         </Suspense>

package/out/404.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cf7719d67ec45489.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cf7719d67ec45489.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-f8ca304572f8be54.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/rN76VAX6aeevNZTdoisFL/_buildManifest.js" defer=""></script><script src="/_next/static/rN76VAX6aeevNZTdoisFL/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"rN76VAX6aeevNZTdoisFL","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
+<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cf7719d67ec45489.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cf7719d67ec45489.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-02e85fec42f453b0.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/MdTAsVD-20JKDPs1agyRg/_buildManifest.js" defer=""></script><script src="/_next/static/MdTAsVD-20JKDPs1agyRg/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"MdTAsVD-20JKDPs1agyRg","runtimeConfig":{"sentryEnvironment":"production"},"nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>

package/out/_next/static/{rN76VAX6aeevNZTdoisFL → MdTAsVD-20JKDPs1agyRg}/_buildManifest.js

@@ -1 +1 @@
-self.__BUILD_MANIFEST=function(s,c,a,e,t,i,n,u,l,f){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[c,i,n,"static/chunks/pages/index-d8e3a2c0d712904f.js"],"/_error":["static/chunks/pages/_error-69b4f498bafdd188.js"],"/changelog":["static/chunks/870-0c7a8a9622de78b7.js","static/chunks/pages/changelog-4b8369d91d82b28b.js"],"/changes":[a,"static/chunks/8eec4907-b712959d9f984b68.js","static/chunks/918-38d08f1e885b222d.js",s,e,"static/css/78250665d395ea50.css","static/chunks/pages/changes-64686146a8087d29.js"],"/custom-types":[c,i,n,"static/chunks/pages/custom-types-2f5664d9492b13fb.js"],"/custom-types/[customTypeId]":[u,s,c,t,l,f,"static/chunks/pages/custom-types/[customTypeId]-3a37eb3373bb8823.js"],"/labs":["static/chunks/pages/labs-2922105ab714d32a.js"],"/page-types/[pageTypeId]":[u,s,c,t,l,f,"static/chunks/pages/page-types/[pageTypeId]-733f3890c0466a05.js"],"/slices":[a,s,e,"static/css/58a89606d9ca9093.css","static/chunks/pages/slices-93b7af2624c85b8e.js"],"/slices/[lib]/[sliceName]/[variation]":[a,s,e,t,"static/css/31841735992dea23.css","static/chunks/pages/slices/[lib]/[sliceName]/[variation]-3d8beb33e88d9e35.js"],"/slices/[lib]/[sliceName]/[variation]/simulator":[a,"static/chunks/72585f70-28b4d7d5384b3703.js","static/chunks/18539003-5d8b6a04053638af.js","static/chunks/505-fa47e200ac3a012d.js","static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-7b17cb59d0db03b5.js"],sortedPages:["/","/_app","/_error","/changelog","/changes","/custom-types","/custom-types/[customTypeId]","/labs","/page-types/[pageTypeId]","/slices","/slices/[lib]/[sliceName]/[variation]","/slices/[lib]/[sliceName]/[variation]/simulator"]}}("static/chunks/958-7352113230cf4059.js","static/chunks/550-abf97d3008006056.js","static/chunks/c8eae200-966ce352f7b5d2b9.js","static/chunks/80-72d903b2a0bd5dc3.js","static/chunks/482-2b96f646465808a7.js","static/chunks/840-6e00e3fb69984e18.js","static/css/b0be58d878c0fac3.css","static/chunks/474-9a64c602aba34ae5.js","static/chunks/904-41d6e45ae563ffc0.js","static/css/5d18ccf403d4649a.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
+self.__BUILD_MANIFEST=function(s,c,a,e,t,i,n,u,l,b){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[c,i,n,"static/chunks/pages/index-d8e3a2c0d712904f.js"],"/_error":["static/chunks/pages/_error-69b4f498bafdd188.js"],"/changelog":["static/chunks/870-0c7a8a9622de78b7.js","static/chunks/pages/changelog-4b8369d91d82b28b.js"],"/changes":[a,"static/chunks/8eec4907-b712959d9f984b68.js","static/chunks/918-38d08f1e885b222d.js",s,e,"static/css/78250665d395ea50.css","static/chunks/pages/changes-58e202426cfeb11f.js"],"/custom-types":[c,i,n,"static/chunks/pages/custom-types-2f5664d9492b13fb.js"],"/custom-types/[customTypeId]":[u,s,c,t,l,b,"static/chunks/pages/custom-types/[customTypeId]-3a37eb3373bb8823.js"],"/labs":["static/chunks/pages/labs-2922105ab714d32a.js"],"/page-types/[pageTypeId]":[u,s,c,t,l,b,"static/chunks/pages/page-types/[pageTypeId]-733f3890c0466a05.js"],"/slices":[a,s,e,"static/css/58a89606d9ca9093.css","static/chunks/pages/slices-93b7af2624c85b8e.js"],"/slices/[lib]/[sliceName]/[variation]":[a,s,e,t,"static/css/31841735992dea23.css","static/chunks/pages/slices/[lib]/[sliceName]/[variation]-3d8beb33e88d9e35.js"],"/slices/[lib]/[sliceName]/[variation]/simulator":[a,"static/chunks/72585f70-28b4d7d5384b3703.js","static/chunks/18539003-5d8b6a04053638af.js","static/chunks/505-fa47e200ac3a012d.js","static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-7b17cb59d0db03b5.js"],sortedPages:["/","/_app","/_error","/changelog","/changes","/custom-types","/custom-types/[customTypeId]","/labs","/page-types/[pageTypeId]","/slices","/slices/[lib]/[sliceName]/[variation]","/slices/[lib]/[sliceName]/[variation]/simulator"]}}("static/chunks/958-7352113230cf4059.js","static/chunks/550-abf97d3008006056.js","static/chunks/c8eae200-966ce352f7b5d2b9.js","static/chunks/80-72d903b2a0bd5dc3.js","static/chunks/482-2b96f646465808a7.js","static/chunks/840-6e00e3fb69984e18.js","static/css/b0be58d878c0fac3.css","static/chunks/474-9a64c602aba34ae5.js","static/chunks/904-41d6e45ae563ffc0.js","static/css/5d18ccf403d4649a.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();