Check multi-org before adding org filter and details

As part of this, make the width adjustable so we only lower it when we have the new filter added.
coder · code-asher · Jul 24, 2024 · Jul 22, 2024 · Jul 22, 2024 · Jul 22, 2024
commit aff7321909dc2833e45038d48bbe6fdd5dd9b91e
diff --git a/site/src/components/Filter/SelectFilter.tsx b/site/src/components/Filter/SelectFilter.tsx
@@ -11,7 +11,7 @@ import {
   SelectMenuIcon,
 } from "components/SelectMenu/SelectMenu";
 
-const BASE_WIDTH = 175;
+const BASE_WIDTH = 200;
 const POPOVER_WIDTH = 320;
 
 export type SelectFilterOption = {
@@ -32,6 +32,7 @@ export type SelectFilterProps = {
   onSelect: (option: SelectFilterOption | undefined) => void;
   // SelectFilterSearch element
   selectFilterSearch?: ReactNode;
+  width?: number;
 };
 
 export const SelectFilter: FC<SelectFilterProps> = ({
@@ -42,6 +43,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
   placeholder,
   emptyText,
   selectFilterSearch,
+  width = BASE_WIDTH,
 }) => {
   const [open, setOpen] = useState(false);
 
@@ -50,7 +52,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
       <SelectMenuTrigger>
         <SelectMenuButton
           startIcon={selectedOption?.startIcon}
-          css={{ width: BASE_WIDTH }}
+          css={{ width }}
           aria-label={label}
         >
           {selectedOption?.label ?? placeholder}
@@ -64,7 +66,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
             // wide as possible.
             width: selectFilterSearch ? "100%" : undefined,
             maxWidth: POPOVER_WIDTH,
-            minWidth: BASE_WIDTH,
+            minWidth: width,
           },
         }}
       >

diff --git a/site/src/components/Filter/UserFilter.tsx b/site/src/components/Filter/UserFilter.tsx
@@ -97,9 +97,10 @@ export type UserFilterMenu = ReturnType<typeof useUserFilterMenu>;
 
 interface UserMenuProps {
   menu: UserFilterMenu;
+  width?: number;
 }
 
-export const UserMenu: FC<UserMenuProps> = ({ menu }) => {
+export const UserMenu: FC<UserMenuProps> = ({ menu, width }) => {
   return (
     <SelectFilter
       label="Select user"
@@ -116,6 +117,7 @@ export const UserMenu: FC<UserMenuProps> = ({ menu }) => {
           onChange={menu.setQuery}
         />
       }
+      width={width}
     />
   );
 };
diff --git a/site/src/pages/AuditPage/AuditFilter.tsx b/site/src/pages/AuditPage/AuditFilter.tsx
@@ -45,11 +45,14 @@ interface AuditFilterProps {
     user: UserFilterMenu;
     action: ActionFilterMenu;
     resourceType: ResourceTypeFilterMenu;
-    organization: OrganizationsFilterMenu;
+    // The organization menu is only provided in a multi-org setup.
+    organization?: OrganizationsFilterMenu;
   };
 }
 
 export const AuditFilter: FC<AuditFilterProps> = ({ filter, error, menus }) => {
+  // Use a smaller width if including the organization filter.
+  const width = menus.organization && 175;
   return (
     <Filter
       learnMoreLink={docs("/admin/audit-logs#filtering-logs")}
@@ -59,10 +62,12 @@ export const AuditFilter: FC<AuditFilterProps> = ({ filter, error, menus }) => {
       error={error}
       options={
         <>
-          <ResourceTypeMenu {...menus.resourceType} />
-          <ActionMenu {...menus.action} />
-          <UserMenu menu={menus.user} />
-          <OrganizationsMenu menu={menus.organization} />
+          <ResourceTypeMenu width={width} menu={menus.resourceType} />
+          <ActionMenu width={width} menu={menus.action} />
+          <UserMenu width={width} menu={menus.user} />
+          {menus.organization && (
+            <OrganizationsMenu width={width} menu={menus.organization} />
+          )}
         </>
       }
       skeleton={
@@ -97,14 +102,20 @@ export const useActionFilterMenu = ({
 
 export type ActionFilterMenu = ReturnType<typeof useActionFilterMenu>;
 
-const ActionMenu = (menu: ActionFilterMenu) => {
+interface ActionMenuProps {
+  menu: ActionFilterMenu;
+  width?: number;
+}
+
+const ActionMenu: FC<ActionMenuProps> = ({ menu, width }) => {
   return (
     <SelectFilter
       label="Select an action"
       placeholder="All actions"
       options={menu.searchOptions}
       onSelect={menu.selectOption}
       selectedOption={menu.selectedOption ?? undefined}
+      width={width}
     />
   );
 };
@@ -151,14 +162,20 @@ export type ResourceTypeFilterMenu = ReturnType<
   typeof useResourceTypeFilterMenu
 >;
 
-const ResourceTypeMenu = (menu: ResourceTypeFilterMenu) => {
+interface ResourceTypeMenuProps {
+  menu: ResourceTypeFilterMenu;
+  width?: number;
+}
+
+const ResourceTypeMenu: FC<ResourceTypeMenuProps> = ({ menu, width }) => {
   return (
     <SelectFilter
       label="Select a resource type"
       placeholder="All resource types"
       options={menu.searchOptions}
       onSelect={menu.selectOption}
       selectedOption={menu.selectedOption ?? undefined}
+      width={width}
     />
   );
 };
@@ -216,9 +233,13 @@ export type OrganizationsFilterMenu = ReturnType<
 
 interface OrganizationsMenuProps {
   menu: OrganizationsFilterMenu;
+  width?: number;
 }
 
-export const OrganizationsMenu: FC<OrganizationsMenuProps> = ({ menu }) => {
+export const OrganizationsMenu: FC<OrganizationsMenuProps> = ({
+  menu,
+  width,
+}) => {
   return (
     <SelectFilter
       label="Select an organization"
@@ -235,6 +256,7 @@ export const OrganizationsMenu: FC<OrganizationsMenuProps> = ({ menu }) => {
           onChange={menu.setQuery}
         />
       }
+      width={width}
     />
   );
 };
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
@@ -35,11 +35,13 @@ export interface AuditLogRowProps {
   auditLog: AuditLog;
   // Useful for Storybook
   defaultIsDiffOpen?: boolean;
+  showOrgDetails: boolean;
 }
 
 export const AuditLogRow: FC<AuditLogRowProps> = ({
   auditLog,
   defaultIsDiffOpen = false,
+  showOrgDetails,
 }) => {
   const [isDiffOpen, setIsDiffOpen] = useState(defaultIsDiffOpen);
   const diffs = Object.entries(auditLog.diff);
@@ -134,7 +136,7 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
                         </strong>
                       </span>
                     )}
-                    {auditLog.organization && (
+                    {showOrgDetails && auditLog.organization && (
                       <span css={styles.auditLogInfo}>
                         <>Org: </>
                         <Link

diff --git a/site/src/pages/AuditPage/AuditPage.tsx b/site/src/pages/AuditPage/AuditPage.tsx
@@ -6,6 +6,7 @@ import { useFilter } from "components/Filter/filter";
 import { useUserFilterMenu } from "components/Filter/UserFilter";
 import { isNonInitialPage } from "components/PaginationWidget/utils";
 import { usePaginatedQuery } from "hooks/usePaginatedQuery";
+import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { pageTitle } from "utils/page";
 import {
@@ -17,6 +18,7 @@ import { AuditPageView } from "./AuditPageView";
 
 const AuditPage: FC = () => {
   const { audit_log: isAuditLogVisible } = useFeatureVisibility();
+  const { experiments } = useDashboard();
 
   /**
    * There is an implicit link between auditsQuery and filter via the
@@ -80,14 +82,17 @@ const AuditPage: FC = () => {
         isAuditLogVisible={isAuditLogVisible}
         auditsQuery={auditsQuery}
         error={auditsQuery.error}
+        showOrgDetails={experiments.includes("multi-organization")}
         filterProps={{
           filter,
           error: auditsQuery.error,
           menus: {
             user: userMenu,
             action: actionMenu,
             resourceType: resourceTypeMenu,
-            organization: organizationsMenu,
+            organization: experiments.includes("multi-organization")
+              ? organizationsMenu
+              : undefined,
           },
         }}
       />

diff --git a/site/src/pages/AuditPage/AuditPageView.stories.tsx b/site/src/pages/AuditPage/AuditPageView.stories.tsx
@@ -32,7 +32,6 @@ const defaultFilterProps = getDefaultFilterProps<FilterProps>({
     user: MockMenu,
     action: MockMenu,
     resourceType: MockMenu,
-    organization: MockMenu,
   },
 });
 
@@ -43,6 +42,7 @@ const meta: Meta<typeof AuditPageView> = {
     auditLogs: [MockAuditLog, MockAuditLog2, MockAuditLog3],
     isAuditLogVisible: true,
     filterProps: defaultFilterProps,
+    showOrgDetails: false,
   },
 };
 
@@ -92,3 +92,18 @@ export const NotVisible: Story = {
     auditsQuery: mockInitialRenderResult,
   },
 };
+
+export const MultiOrg: Story = {
+  parameters: { chromatic: chromaticWithTablet },
+  args: {
+    showOrgDetails: true,
+    auditsQuery: mockSuccessResult,
+    filterProps: {
+      ...defaultFilterProps,
+      menus: {
+        ...defaultFilterProps.menus,
+        organization: MockMenu,
+      },
+    },
+  },
+};
diff --git a/site/src/pages/AuditPage/AuditPageView.tsx b/site/src/pages/AuditPage/AuditPageView.tsx
@@ -38,6 +38,7 @@ export interface AuditPageViewProps {
   error?: unknown;
   filterProps: ComponentProps<typeof AuditFilter>;
   auditsQuery: PaginationResult;
+  showOrgDetails: boolean;
 }
 
 export const AuditPageView: FC<AuditPageViewProps> = ({
@@ -47,6 +48,7 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
   error,
   filterProps,
   auditsQuery: paginationResult,
+  showOrgDetails,
 }) => {
   const isLoading =
     (auditLogs === undefined || paginationResult.totalRecords === undefined) &&
@@ -117,7 +119,11 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
                           items={auditLogs}
                           getDate={(log) => new Date(log.time)}
                           row={(log) => (
-                            <AuditLogRow key={log.id} auditLog={log} />
+                            <AuditLogRow
+                              key={log.id}
+                              auditLog={log}
+                              showOrgDetails={showOrgDetails}
+                            />
                           )}
                         />
                       )}