Use wrapping for audit log when in deployment settings

code-asher · code-asher · commit c7743960fe22 · 2024-07-25T13:59:49.000-08:00
Otherwise the input is teeny tiny and barely fits a few characters.
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,28 @@ 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.
+      // TODO: The customizable width on menus was added so they would fit on
+      //       the old page (without a sidebar); if we end up keeping the audit
+      //       log in the new spot then the width code can be removed since we
+      //       have to take a different approach with the sidebar.  For now
+      //       leaving it here in case the page moves back.
+      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} />
           )}
         </>
       }
