DEVPROD-7675: Avoid exposing /login route in non-development builds (#…

…195)

apps/parsley/src/App.tsx

@@ -6,6 +6,7 @@ import routes from "constants/routes";
 import { GlobalProviders } from "context";
 import Content from "pages";
 import { Login } from "pages/Login";
+import { isDevelopmentBuild } from "utils/environmentVariables";
 
 const App = () => (
   <ErrorBoundary>
@@ -14,7 +15,9 @@ const App = () => (
       <GlobalProviders>
         <AppWrapper>
           <Routes>
-            <Route element={<Login />} path={routes.login} />
+            {isDevelopmentBuild() && (
+              <Route element={<Login />} path={routes.login} />
+            )}
             <Route element={<Content />} path="/*" />
           </Routes>
         </AppWrapper>

apps/spruce/src/App.tsx

@@ -12,11 +12,14 @@ import { routes } from "constants/routes";
 import { ContextProviders } from "context/Providers";
 import GQLWrapper from "gql/GQLWrapper";
 import { Login } from "pages/Login";
+import { isDevelopmentBuild, isLocal } from "utils/environmentVariables";
 
 const browserRouter = createBrowserRouter(
   createRoutesFromElements(
     <>
-      <Route path={routes.login} element={<Login />} />
+      {(isDevelopmentBuild() || isLocal()) && (
+        <Route path={routes.login} element={<Login />} />
+      )}
       <Route
         path="/*"
         element={

apps/spruce/src/components/styles/Layout.tsx

@@ -20,7 +20,7 @@ export const PageWrapper = styled.div`
   padding: ${size.m} ${size.l};
 `;
 
-export const PageGrid = styled.section`
+export const PageGrid = styled.div`
   display: grid;
   grid-template-areas:
     "header header"

apps/spruce/src/pages/404/NotFound.stories.tsx

@@ -1,15 +1,15 @@
 import { CustomStoryObj, CustomMeta } from "test_utils/types";
 
-import NotFound from "./NotFound";
+import NotFoundSvg from "./NotFoundSvg";
 
 export default {
-  component: NotFound,
-} satisfies CustomMeta<typeof NotFound>;
+  component: NotFoundSvg,
+} satisfies CustomMeta<typeof NotFoundSvg>;
 
-export const Default404: CustomStoryObj<typeof NotFound> = {
+export const Default404: CustomStoryObj<typeof NotFoundSvg> = {
   render: () => (
     <div style={{ height: "100%", width: "100%" }}>
-      <NotFound />
+      <NotFoundSvg />
     </div>
   ),
 };

apps/spruce/src/pages/404/NotFound.tsx

@@ -1,7 +1,11 @@
-import notFound from "./notFound.svg";
+import { Suspense, lazy } from "react";
 
-const NotFound = () => (
-  <img src={notFound} alt="Page not found" data-cy="404" />
+const NotFoundSvg = lazy(() => import("./NotFoundSvg"));
+
+const NotFound: React.FC = () => (
+  <Suspense fallback={<div>Loading</div>}>
+    <NotFoundSvg />
+  </Suspense>
 );
 
 export default NotFound;

apps/spruce/src/pages/404/NotFoundSvg.tsx

@@ -0,0 +1,13 @@
+import notFound from "./notFound.svg";
+
+// It's not possible to lazy load an SVG, so we wrap the SVG in a React component.
+const NotFoundSvg: React.FC = () => (
+  <img
+    alt="Page not found"
+    data-cy="404"
+    src={notFound}
+    style={{ height: "inherit", width: "100%", objectFit: "cover" }}
+  />
+);
+
+export default NotFoundSvg;

apps/spruce/src/pages/404/__snapshots__/NotFound_Default404.storyshot

@@ -6,6 +6,7 @@
       alt="Page not found"
       data-cy="404"
       src="/src/pages/404/notFound.svg"
+      style="height: inherit; width: 100%; object-fit: cover;"
     />
   </div>
 </div>

apps/spruce/src/utils/environmentVariables.ts

@@ -48,6 +48,12 @@ export const isDevelopmentBuild: () => boolean = () =>
 export const isProductionBuild = (): boolean =>
   process.env.NODE_ENV === "production";
 
+/**
+ * `isLocal()` indicates if the current build is a local build.
+ * @returns `true` if the current build is a local build.
+ */
+export const isLocal = () => getReleaseStage() === "local";
+
 /**
  * `isBeta()` indicates if the current build is a build meant for a beta deployment.
  * @returns `true` if the current build is a beta build.

apps/spruce/src/utils/request.ts

@@ -1,9 +1,8 @@
-import { routes } from "constants/routes";
 import { getUiUrl } from "./environmentVariables";
 import { reportError } from "./errorReporting";
 
 export const shouldLogoutAndRedirect = (statusCode: number) =>
-  statusCode === 401 && window.location.pathname !== routes.login;
+  statusCode === 401;
 
 export const post = async (url: string, body: unknown) => {
   try {