Move audit page to /deployment/audit with multi-org

code-asher · code-asher · commit 2c49c585815f · 2024-07-25T16:27:41.000-08:00
The existing link remains but will redirect to the new URL.
diff --git a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
@@ -10,7 +10,7 @@ import {
   PopoverTrigger,
   usePopover,
 } from "components/Popover/Popover";
-import { USERS_LINK } from "modules/navigation";
+import { AUDIT_LINK, USERS_LINK } from "modules/navigation";
 
 interface DeploymentDropdownProps {
   canViewDeployment: boolean;
@@ -114,7 +114,7 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
       {canViewAllUsers && (
         <MenuItem
           component={NavLink}
-          to={USERS_LINK}
+          to={canViewOrganizations ? `/deployment${USERS_LINK}` : USERS_LINK}
           css={styles.menuItem}
           onClick={onPopoverClose}
         >
@@ -124,7 +124,7 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
       {canViewAuditLog && (
         <MenuItem
           component={NavLink}
-          to="/audit"
+          to={canViewOrganizations ? `/deployment${AUDIT_LINK}` : AUDIT_LINK}
           css={styles.menuItem}
           onClick={onPopoverClose}
         >
diff --git a/site/src/modules/navigation.ts b/site/src/modules/navigation.ts
@@ -2,6 +2,8 @@
  * @fileoverview TODO: centralize navigation code here! URL constants, URL formatting, all of it
  */
 
+export const AUDIT_LINK = "/audit";
+
 export const USERS_LINK = `/users?filter=${encodeURIComponent(
   "status:active",
 )}`;
diff --git a/site/src/pages/AuditPage/AuditPage.tsx b/site/src/pages/AuditPage/AuditPage.tsx
@@ -1,6 +1,6 @@
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams, Navigate, useLocation } from "react-router-dom";
 import { paginatedAudits } from "api/queries/audits";
 import { useFilter } from "components/Filter/filter";
 import { useUserFilterMenu } from "components/Filter/UserFilter";
@@ -19,6 +19,8 @@ import { AuditPageView } from "./AuditPageView";
 const AuditPage: FC = () => {
   const { audit_log: isAuditLogVisible } = useFeatureVisibility();
   const { experiments } = useDashboard();
+  const location = useLocation();
+  const isMultiOrg = experiments.includes("multi-organization");
 
   /**
    * There is an implicit link between auditsQuery and filter via the
@@ -70,6 +72,13 @@ const AuditPage: FC = () => {
       }),
   });
 
+  // TODO: Once multi-org is stable, we can could place this redirect into the
+  //       router directly, if we still need to maintain it (for users who are
+  //       typing the old URL manually or have it bookmarked).
+  if (isMultiOrg && location.pathname !== "/deployment/audit") {
+    return <Navigate to={`/deployment/audit${location.search}`} replace />;
+  }
+
   return (
     <>
       <Helmet>
@@ -82,17 +91,15 @@ const AuditPage: FC = () => {
         isAuditLogVisible={isAuditLogVisible}
         auditsQuery={auditsQuery}
         error={auditsQuery.error}
-        showOrgDetails={experiments.includes("multi-organization")}
+        showOrgDetails={isMultiOrg}
         filterProps={{
           filter,
           error: auditsQuery.error,
           menus: {
             user: userMenu,
             action: actionMenu,
             resourceType: resourceTypeMenu,
-            organization: experiments.includes("multi-organization")
-              ? organizationsMenu
-              : undefined,
+            organization: isMultiOrg ? organizationsMenu : undefined,
           },
         }}
       />
diff --git a/site/src/pages/AuditPage/AuditPageView.tsx b/site/src/pages/AuditPage/AuditPageView.tsx
@@ -57,8 +57,20 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
   const isEmpty = !isLoading && auditLogs?.length === 0;
 
   return (
-    <Margins>
-      <PageHeader>
+    <Margins
+      css={{
+        // When acting as a deployment settings page, there is already padding.
+        // TODO: When multi-org is stable we should move this to the deployment
+        //       settings dir, use the standard header, and remove these margins.
+        padding: showOrgDetails ? 0 : undefined,
+      }}
+    >
+      <PageHeader
+        css={{
+          // When acting as a deployment settings page, there is already padding.
+          paddingTop: showOrgDetails ? 0 : undefined,
+        }}
+      >
         <PageHeaderTitle>
           <Stack direction="row" spacing={1} alignItems="center">
             <span>{Language.title}</span>
diff --git a/site/src/pages/ManagementSettingsPage/Sidebar.tsx b/site/src/pages/ManagementSettingsPage/Sidebar.tsx
@@ -9,7 +9,7 @@ import { Sidebar as BaseSidebar } from "components/Sidebar/Sidebar";
 import { Stack } from "components/Stack/Stack";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { type ClassName, useClassName } from "hooks/useClassName";
-import { USERS_LINK } from "modules/navigation";
+import { AUDIT_LINK, USERS_LINK } from "modules/navigation";
 import { useOrganizationSettings } from "./ManagementSettingsLayout";
 
 export const Sidebar: FC = () => {
@@ -81,6 +81,9 @@ const DeploymentSettingsNavigation: FC = () => {
           <SidebarNavSubItem href={USERS_LINK.slice(1)}>
             Users
           </SidebarNavSubItem>
+          <SidebarNavSubItem href={AUDIT_LINK.slice(1)}>
+            Auditing
+          </SidebarNavSubItem>
         </Stack>
       )}
     </div>
diff --git a/site/src/router.tsx b/site/src/router.tsx
@@ -409,6 +409,7 @@ export const router = createBrowserRouter(
             <Route path="workspace-proxies" element={<WorkspaceProxyPage />} />
             <Route path="users" element={<UsersPage />} />
             <Route path="users/create" element={<CreateUserPage />} />
+            <Route path="audit" element={<AuditPage />} />
           </Route>
 
           <Route path="/settings" element={<UserSettingsLayout />}>
