resolves #3356 (#3408)

site/src/AppRouter.tsx

@@ -1,5 +1,5 @@
 import { FC, lazy, Suspense } from "react"
-import { Route, Routes } from "react-router-dom"
+import { Navigate, Route, Routes } from "react-router-dom"
 import { AuthAndFrame } from "./components/AuthAndFrame/AuthAndFrame"
 import { RequireAuth } from "./components/RequireAuth/RequireAuth"
 import { SettingsLayout } from "./components/SettingsLayout/SettingsLayout"
@@ -25,6 +25,7 @@ const WorkspaceAppErrorPage = lazy(
 const TerminalPage = lazy(() => import("./pages/TerminalPage/TerminalPage"))
 const WorkspacesPage = lazy(() => import("./pages/WorkspacesPage/WorkspacesPage"))
 const CreateWorkspacePage = lazy(() => import("./pages/CreateWorkspacePage/CreateWorkspacePage"))
+const AuditPage = lazy(() => import("./pages/AuditPage/AuditPage"))
 
 export const AppRouter: FC = () => (
   <Suspense fallback={<></>}>
@@ -109,6 +110,24 @@ export const AppRouter: FC = () => (
         />
       </Route>
 
+      {/* REMARK: Route under construction
+      Eventually, we should gate this page
+      with permissions and licensing */}
+      <Route path="/audit">
+        <Route
+          index
+          element={
+            process.env.NODE_ENV === "production" ? (
+              <Navigate to="/workspaces" />
+            ) : (
+              <AuthAndFrame>
+                <AuditPage />
+              </AuthAndFrame>
+            )
+          }
+        ></Route>
+      </Route>
+
       <Route path="settings" element={<SettingsLayout />}>
         <Route path="account" element={<AccountPage />} />
         <Route path="security" element={<SecurityPage />} />

site/src/components/NavbarView/NavbarView.test.tsx

@@ -7,6 +7,19 @@ describe("NavbarView", () => {
   const noop = () => {
     return
   }
+
+  const env = process.env
+
+  // REMARK: copying process.env so we don't mutate that object or encounter conflicts between tests
+  beforeEach(() => {
+    process.env = { ...env }
+  })
+
+  // REMARK: restoring process.env
+  afterEach(() => {
+    process.env = env
+  })
+
   it("renders content", async () => {
     // When
     render(<NavbarView user={MockUser} onSignOut={noop} />)
@@ -48,4 +61,21 @@ describe("NavbarView", () => {
     const element = await screen.findByText("B")
     expect(element).toBeDefined()
   })
+
+  it("audit nav link has the correct href", async () => {
+    render(<NavbarView user={MockUser} onSignOut={noop} />)
+    const auditLink = await screen.findByText(navLanguage.audit)
+    expect((auditLink as HTMLAnchorElement).href).toContain("/audit")
+  })
+
+  it("audit nav link is only visible in development", async () => {
+    process.env = {
+      ...env,
+      NODE_ENV: "production",
+    }
+
+    render(<NavbarView user={MockUser} onSignOut={noop} />)
+    const auditLink = screen.queryByText(navLanguage.audit)
+    expect(auditLink).not.toBeInTheDocument()
+  })
 })

site/src/components/NavbarView/NavbarView.tsx

@@ -21,6 +21,7 @@ export const Language = {
   workspaces: "Workspaces",
   templates: "Templates",
   users: "Users",
+  audit: "Audit",
 }
 
 const NavItems: React.FC<{ className?: string; linkClassName?: string }> = ({ className }) => {
@@ -47,6 +48,14 @@ const NavItems: React.FC<{ className?: string; linkClassName?: string }> = ({ cl
           {Language.users}
         </NavLink>
       </ListItem>
+      {/* REMARK: the below link is under-construction  */}
+      {process.env.NODE_ENV !== "production" && (
+        <ListItem button className={styles.item}>
+          <NavLink className={styles.link} to="/audit">
+            {Language.audit}
+          </NavLink>
+        </ListItem>
+      )}
     </List>
   )
 }

site/src/pages/AuditPage/AuditPage.tsx

@@ -0,0 +1,8 @@
+import { FC } from "react"
+
+// REMARK: This page is in-progress and hidden from users
+const AuditPage: FC = () => {
+  return <div>Audit</div>
+}
+
+export default AuditPage