From ce9219e2e9eaf99019ef2df8ad854904c4b205f7 Mon Sep 17 00:00:00 2001
From: minnakt <47064971+minnakt@users.noreply.github.com>
Date: Mon, 24 Jun 2024 11:26:58 -0400
Subject: [PATCH] DEVPROD-7675: Avoid exposing /login route in non-development
 builds (#195)

---
 apps/parsley/src/App.tsx                            |  5 ++++-
 apps/spruce/src/App.tsx                             |  5 ++++-
 apps/spruce/src/components/styles/Layout.tsx        |  2 +-
 apps/spruce/src/pages/404/NotFound.stories.tsx      | 10 +++++-----
 apps/spruce/src/pages/404/NotFound.tsx              | 10 +++++++---
 apps/spruce/src/pages/404/NotFoundSvg.tsx           | 13 +++++++++++++
 .../404/__snapshots__/NotFound_Default404.storyshot |  1 +
 apps/spruce/src/utils/environmentVariables.ts       |  6 ++++++
 apps/spruce/src/utils/request.ts                    |  3 +--
 9 files changed, 42 insertions(+), 13 deletions(-)
 create mode 100644 apps/spruce/src/pages/404/NotFoundSvg.tsx

diff --git a/apps/parsley/src/App.tsx b/apps/parsley/src/App.tsx
index 2b0fdfc2f..f2ee19db9 100644
--- a/apps/parsley/src/App.tsx
+++ b/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>
diff --git a/apps/spruce/src/App.tsx b/apps/spruce/src/App.tsx
index b8a8aa6ba..b85ec32f0 100644
--- a/apps/spruce/src/App.tsx
+++ b/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={
diff --git a/apps/spruce/src/components/styles/Layout.tsx b/apps/spruce/src/components/styles/Layout.tsx
index 2304a7d2f..9d241bbfb 100644
--- a/apps/spruce/src/components/styles/Layout.tsx
+++ b/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"
diff --git a/apps/spruce/src/pages/404/NotFound.stories.tsx b/apps/spruce/src/pages/404/NotFound.stories.tsx
index 6c4bca55e..7b45b6052 100644
--- a/apps/spruce/src/pages/404/NotFound.stories.tsx
+++ b/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>
   ),
 };
diff --git a/apps/spruce/src/pages/404/NotFound.tsx b/apps/spruce/src/pages/404/NotFound.tsx
index f3244d12d..49d2496be 100644
--- a/apps/spruce/src/pages/404/NotFound.tsx
+++ b/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;
diff --git a/apps/spruce/src/pages/404/NotFoundSvg.tsx b/apps/spruce/src/pages/404/NotFoundSvg.tsx
new file mode 100644
index 000000000..9e2e97d6c
--- /dev/null
+++ b/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;
diff --git a/apps/spruce/src/pages/404/__snapshots__/NotFound_Default404.storyshot b/apps/spruce/src/pages/404/__snapshots__/NotFound_Default404.storyshot
index ddb665b02..95d329825 100644
--- a/apps/spruce/src/pages/404/__snapshots__/NotFound_Default404.storyshot
+++ b/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>
\ No newline at end of file
diff --git a/apps/spruce/src/utils/environmentVariables.ts b/apps/spruce/src/utils/environmentVariables.ts
index 50bc173ad..b34ce1a89 100644
--- a/apps/spruce/src/utils/environmentVariables.ts
+++ b/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.
diff --git a/apps/spruce/src/utils/request.ts b/apps/spruce/src/utils/request.ts
index 620f8d87d..1e4a83618 100644
--- a/apps/spruce/src/utils/request.ts
+++ b/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 {