Use wrapping for audit log when in deployment settings

code-asher · code-asher · commit dc2918369493 · 2024-07-25T16:27:44.000-08:00
Otherwise the input is teeny tiny and barely fits a few characters.
diff --git a/site/src/components/Filter/SelectFilter.tsx b/site/src/components/Filter/SelectFilter.tsx
@@ -52,7 +52,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
       <SelectMenuTrigger>
         <SelectMenuButton
           startIcon={selectedOption?.startIcon}
-          css={{ width }}
+          css={{ width, flexGrow: 1 }}
           aria-label={label}
         >
           {selectedOption?.label ?? placeholder}
diff --git a/site/src/components/Filter/filter.tsx b/site/src/components/Filter/filter.tsx
@@ -142,6 +142,8 @@ type FilterProps = {
   error?: unknown;
   options?: ReactNode;
   presets: PresetFilter[];
+  /** Set to true if there is not much horizontal space. */
+  compact?: boolean;
 };
 
 export const Filter: FC<FilterProps> = ({
@@ -154,6 +156,7 @@ export const Filter: FC<FilterProps> = ({
   learnMoreLabel2,
   learnMoreLink2,
   presets,
+  compact,
 }) => {
   const theme = useTheme();
   // Storing local copy of the filter query so that it can be updated more
@@ -184,7 +187,10 @@ export const Filter: FC<FilterProps> = ({
         display: "flex",
         gap: 8,
         marginBottom: 16,
-        flexWrap: "nowrap",
+        // For now compact just means immediately wrapping, but maybe we should
+        // have a collapsible section or consolidate into one menu or something.
+        // TODO: Remove separate compact mode once multi-org is stable.
+        flexWrap: compact ? "wrap" : "nowrap",
 
         [theme.breakpoints.down("md")]: {
           flexWrap: "wrap",
diff --git a/site/src/pages/AuditPage/AuditFilter.tsx b/site/src/pages/AuditPage/AuditFilter.tsx
@@ -51,22 +51,23 @@ interface AuditFilterProps {
 }
 
 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")}
       presets={PRESET_FILTERS}
       isLoading={menus.user.isInitializing}
       filter={filter}
       error={error}
+      // There is not much space with the sidebar and four filters, so in this
+      // case we will use the compact mode.
+      compact={Boolean(menus.organization)}
       options={
         <>
-          <ResourceTypeMenu width={width} menu={menus.resourceType} />
-          <ActionMenu width={width} menu={menus.action} />
-          <UserMenu width={width} menu={menus.user} />
+          <ResourceTypeMenu menu={menus.resourceType} />
+          <ActionMenu menu={menus.action} />
+          <UserMenu menu={menus.user} />
           {menus.organization && (
-            <OrganizationsMenu width={width} menu={menus.organization} />
+            <OrganizationsMenu menu={menus.organization} />
           )}
         </>
       }

Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({`
`52`	`52`	`<SelectMenuTrigger>`
`53`	`53`	`<SelectMenuButton`
`54`	`54`	`startIcon={selectedOption?.startIcon}`
`55`		`- css={{ width }}`
	`55`	`+ css={{ width, flexGrow: 1 }}`
`56`	`56`	`aria-label={label}`
`57`	`57`	`>`
`58`	`58`	`{selectedOption?.label ?? placeholder}`