slice-machine-ui 2.18.1-alpha.jp-unauthorized-error-improvement.8 → 2.18.1-alpha.jp-remove-shared-onboarding-experiment.2

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

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

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

package/src/modules/userContext/index.ts

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

package/src/modules/userContext/types.ts

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

package/src/pages/_app.tsx

@@ -13,33 +13,34 @@ import "@/styles/starry-night.css";
 import "@/styles/tabs.css";
 import "@/styles/toaster.css";
 
-import { ThemeProvider, TooltipProvider } from "@prismicio/editor-ui";
 import {
-  isInvalidActiveEnvironmentError,
-  isUnauthorizedError,
-} from "@slicemachine/manager/client";
-import { useSuspenseQuery } from "@tanstack/react-query";
-import { ConnectedRouter as StoreConnectedRouter } from "connected-next-router";
+  Box,
+  DefaultErrorMessage,
+  ThemeProvider,
+  TooltipProvider,
+} from "@prismicio/editor-ui";
+import { ConnectedRouter } from "connected-next-router";
 import type { NextPage } from "next";
 import type { AppContext, AppInitialProps } from "next/app";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 import Router from "next/router";
-import { type FC, type ReactNode, Suspense, useEffect } from "react";
+import { type FC, type ReactNode, Suspense, useEffect, useState } from "react";
 import { Provider } from "react-redux";
+import type { Store } from "redux";
+import type { Persistor } from "redux-persist/es/types";
 import { PersistGate } from "redux-persist/integration/react";
 import { ThemeProvider as ThemeUIThemeProvider, useThemeUI } from "theme-ui";
 
 import { getState } from "@/apiClient";
-import { useActiveEnvironment } from "@/features/environments/useActiveEnvironment";
-import { AppStateErrorBoundary } from "@/features/errorBoundaries";
+import { ErrorBoundary } from "@/ErrorBoundary";
 import { AutoSyncProvider } from "@/features/sync/AutoSyncProvider";
 import { RouteChangeProvider } from "@/hooks/useRouteChange";
 import SliceMachineApp from "@/legacy/components/App";
 import LoadingPage from "@/legacy/components/LoadingPage";
 import ToastContainer from "@/legacy/components/ToasterContainer";
 import { normalizeFrontendCustomTypes } from "@/legacy/lib/models/common/normalizers/customType";
-import { QueryClientProvider } from "@/queryClient";
+import type ServerState from "@/legacy/lib/models/server/ServerState";
 import configureStore from "@/redux/store";
 import theme from "@/theme";
 
@@ -67,10 +68,50 @@ const RemoveDarkMode: FC<RemoveDarkModeProps> = ({ children }) => {
   return <>{children}</>;
 };
 
-function App(props: AppContextWithComponentLayout & AppInitialProps) {
-  const { Component } = props;
+function App({
+  Component,
+  pageProps,
+}: AppContextWithComponentLayout & AppInitialProps) {
+  const [serverState, setServerState] = useState<ServerState | null>(null);
+  const [smStore, setSMStore] = useState<{
+    store: Store;
+    persistor: Persistor;
+  } | null>(null);
 
-  const ComponentLayout = Component.CustomLayout ?? SliceMachineApp;
+  useEffect(() => {
+    async function getInitialState() {
+      const serverState = await getState();
+      setServerState(serverState);
+    }
+    void getInitialState();
+  }, []);
+
+  useEffect(() => {
+    if (!serverState || smStore) {
+      return;
+    }
+
+    const normalizedCustomTypes = normalizeFrontendCustomTypes(
+      serverState.customTypes,
+      serverState.remoteCustomTypes,
+    );
+
+    const { store, persistor } = configureStore({
+      environment: serverState.env,
+      availableCustomTypes: {
+        ...normalizedCustomTypes,
+      },
+      slices: {
+        libraries: serverState.libraries,
+        remoteSlices: serverState.remoteSlices,
+      },
+    });
+
+    setSMStore({ store, persistor });
+  }, [serverState, smStore]);
+
+  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+  const ComponentLayout = Component.CustomLayout || SliceMachineApp;
 
   return (
     <>
@@ -78,89 +119,50 @@ function App(props: AppContextWithComponentLayout & AppInitialProps) {
         <title>Slice Machine</title>
       </Head>
       <ThemeUIThemeProvider theme={theme}>
-        <QueryClientProvider>
-          <RemoveDarkMode>
-            <ThemeProvider mode="light">
-              <TooltipProvider>
-                <AppStateErrorBoundary>
-                  <Suspense fallback={<LoadingPage />}>
-                    <AppStateValidator>
-                      <AppStateWrapper>
-                        <AutoSyncProvider>
-                          <ComponentLayout>
-                            <Component {...props.pageProps} />
-                          </ComponentLayout>
-                        </AutoSyncProvider>
-                      </AppStateWrapper>
-                    </AppStateValidator>
-                  </Suspense>
-                </AppStateErrorBoundary>
-                <ToastContainer />
-              </TooltipProvider>
-            </ThemeProvider>
-          </RemoveDarkMode>
-        </QueryClientProvider>
+        <RemoveDarkMode>
+          <ThemeProvider mode="light">
+            <TooltipProvider>
+              {!smStore || !serverState ? (
+                <LoadingPage />
+              ) : (
+                <Provider store={smStore.store}>
+                  <ConnectedRouter Router={Router}>
+                    <PersistGate loading={null} persistor={smStore.persistor}>
+                      <ErrorBoundary
+                        renderError={() => (
+                          <Box
+                            justifyContent="center"
+                            width="100%"
+                            padding={80}
+                          >
+                            <DefaultErrorMessage
+                              title="Error"
+                              description="An error occurred while rendering the app."
+                            />
+                          </Box>
+                        )}
+                      >
+                        <Suspense fallback={<LoadingPage />}>
+                          <AutoSyncProvider>
+                            <RouteChangeProvider>
+                              <ComponentLayout>
+                                <Component {...pageProps} />
+                              </ComponentLayout>
+                            </RouteChangeProvider>
+                          </AutoSyncProvider>
+                        </Suspense>
+                      </ErrorBoundary>
+                    </PersistGate>
+                  </ConnectedRouter>
+                  <ToastContainer />
+                </Provider>
+              )}
+            </TooltipProvider>
+          </ThemeProvider>
+        </RemoveDarkMode>
       </ThemeUIThemeProvider>
     </>
   );
 }
 
-/** This is where we should check for unwanted states that should prevent the
- * user from using the app, and trigger the {@link AppStateErrorBoundary} to
- * display something explaining why. */
-function AppStateValidator(props: { children: ReactNode }) {
-  const activeEnvironment = useActiveEnvironment({ suspense: true });
-
-  if (
-    // We're using the fetchEnvironments request to check this because it can
-    // return an SMUnauthorizedError or SMInvalidActiveEnvironmentError
-    // according to the API response, so we handle both cases with just one
-    // request. We also perform the request in other parts of the app, so it can
-    // reuse its cache.
-    isUnauthorizedError(activeEnvironment.error) ||
-    isInvalidActiveEnvironmentError(activeEnvironment.error)
-  ) {
-    throw activeEnvironment.error;
-  }
-
-  return <>{props.children}</>;
-}
-
-function AppStateWrapper({ children }: { children: ReactNode }) {
-  const { data: state } = useSuspenseQuery({
-    queryKey: ["getInitialState"],
-    queryFn: async () => {
-      const serverState = await getState();
-      const { store, persistor } = configureStore({
-        environment: serverState.env,
-        availableCustomTypes: {
-          ...normalizeFrontendCustomTypes(
-            serverState.customTypes,
-            serverState.remoteCustomTypes,
-          ),
-        },
-        slices: {
-          libraries: serverState.libraries,
-          remoteSlices: serverState.remoteSlices,
-        },
-      });
-
-      return { serverState, store, persistor };
-    },
-    // avoid refetching
-    staleTime: Infinity,
-    gcTime: Infinity,
-  });
-
-  return (
-    <Provider store={state.store}>
-      <StoreConnectedRouter Router={Router}>
-        <PersistGate loading={null} persistor={state.persistor}>
-          <RouteChangeProvider>{children}</RouteChangeProvider>
-        </PersistGate>
-      </StoreConnectedRouter>
-    </Provider>
-  );
-}
-
 export default dynamic(() => Promise.resolve(App), { ssr: false });

package/src/pages/changes.tsx

@@ -25,8 +25,8 @@ import {
   AppLayoutHeader,
 } from "@/legacy/components/AppLayout";
 import {
+  AuthErrorPage,
   OfflinePage,
-  UnauthenticatedView,
 } from "@/legacy/components/ChangesEmptyState";
 import { ChangesItems } from "@/legacy/components/ChangesItems";
 import {
@@ -114,8 +114,8 @@ const Changes: React.FunctionComponent = () => {
     if (!isOnline) {
       return <OfflinePage />;
     }
-    if (authStatus === AuthStatus.UNAUTHENTICATED) {
-      return <UnauthenticatedView />;
+    if (authStatus === AuthStatus.FORBIDDEN) {
+      return <AuthErrorPage authStatus={authStatus} />;
     }
     if (numberOfChanges === 0) {
       return (
@@ -160,7 +160,8 @@ const Changes: React.FunctionComponent = () => {
               disabled={
                 numberOfChanges === 0 ||
                 !isOnline ||
-                authStatus !== AuthStatus.AUTHENTICATED ||
+                authStatus === AuthStatus.UNAUTHORIZED ||
+                authStatus === AuthStatus.FORBIDDEN ||
                 isSyncing
               }
               loading={isSyncing}

package/test/__testutils__/index.tsx

@@ -5,8 +5,7 @@ import { Provider } from "react-redux";
 import { AnyAction, Store } from "redux";
 import { BaseStyles, ThemeProvider as ThemeUIThemeProvider } from "theme-ui";
 
-import { DefaultErrorBoundary } from "@/features/errorBoundaries";
-import { QueryClientProvider } from "@/queryClient";
+import { ErrorBoundary } from "@/ErrorBoundary";
 
 import configureStore from "../../src/redux/store";
 import type { SliceMachineStoreType } from "../../src/redux/type";
@@ -45,17 +44,15 @@ function render(
     children: any;
   }) {
     return (
-      <QueryClientProvider>
-        <ThemeUIThemeProvider theme={theme}>
-          <TooltipProvider>
-            <BaseStyles>
-              <Provider store={store}>
-                <DefaultErrorBoundary>{children}</DefaultErrorBoundary>
-              </Provider>
-            </BaseStyles>
-          </TooltipProvider>
-        </ThemeUIThemeProvider>
-      </QueryClientProvider>
+      <ThemeUIThemeProvider theme={theme}>
+        <TooltipProvider>
+          <BaseStyles>
+            <Provider store={store}>
+              <ErrorBoundary>{children}</ErrorBoundary>
+            </Provider>
+          </BaseStyles>
+        </TooltipProvider>
+      </ThemeUIThemeProvider>
     );
   }
   return {

package/out/_next/static/0C8VxwongjXZwHPchBnOi/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(s,c,a,e,t,i,b,d,n,u,h,l,f,k,j,p,g,o,r,m){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[s,e,p,g,"static/chunks/pages/index-0d8cb369de720a35.js"],"/_error":["static/chunks/pages/_error-fedd2c6ebd3d27b9.js"],"/changelog":[c,t,"static/chunks/870-a72b74312773efea.js","static/chunks/pages/changelog-3901f2fc937d9648.js"],"/changes":[c,i,"static/chunks/8eec4907-b712959d9f984b68.js","static/chunks/918-fa4f2563cb5fd014.js",a,d,"static/css/d98ebc475f8423a3.css","static/chunks/pages/changes-c58a60af39167147.js"],"/custom-types":[s,e,p,g,"static/chunks/pages/custom-types-5acd56959b60346f.js"],"/custom-types/[customTypeId]":[c,n,u,h,l,s,t,b,f,o,a,e,k,j,r,m,"static/chunks/pages/custom-types/[customTypeId]-816acb31b652239b.js"],"/labs":["static/chunks/pages/labs-dd04033db23a58f3.js"],"/page-types/[pageTypeId]":[c,n,u,h,l,s,t,b,f,o,a,e,k,j,r,m,"static/chunks/pages/page-types/[pageTypeId]-669d5479e81b638b.js"],"/slices":[c,i,s,b,a,d,j,"static/css/efa5152b7c0f35c0.css","static/chunks/pages/slices-bf63f937b184b470.js"],"/slices/[lib]/[sliceName]/[variation]":[c,i,n,u,h,l,s,t,b,f,a,k,d,"static/css/cdee5b195444f185.css","static/chunks/pages/slices/[lib]/[sliceName]/[variation]-e6bc7cc6186d6a0f.js"],"/slices/[lib]/[sliceName]/[variation]/simulator":[i,"static/chunks/72585f70-28b4d7d5384b3703.js","static/chunks/429-1137c819c2bf6b66.js","static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-f237aaa755dc9a99.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/397-e6c340070a3bcb41.js","static/chunks/59b4e022-ef680789f7cc9b11.js","static/chunks/34-50c64778da33cff6.js","static/chunks/647-4379a741c8d85d9e.js","static/chunks/183-4ea255b867ff171b.js","static/chunks/c8eae200-966ce352f7b5d2b9.js","static/chunks/50-586dc7ab5e584e76.js","static/chunks/658-8231c0b729e0124a.js","static/chunks/f36c6662-1f3a854183168b10.js","static/chunks/4c744e84-480e426e4b1cfef3.js","static/chunks/065a3ddb-9a38ca0d60f0bf2f.js","static/chunks/1cc2734a-09fb3b997ad1eb70.js","static/chunks/349-7118116b93278f73.js","static/chunks/630-eae75e90b30f201a.js","static/chunks/907-445266211c48b1a5.js","static/chunks/248-a9c33f7fbe2da2f1.js","static/css/4e475d945cf8a890.css","static/chunks/422-c9192a1dbdd2ae0e.js","static/chunks/489-a046ae0fa4f74435.js","static/css/56f2a6684a524374.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();