fix: update filter styles on org member list (#19918)

Co-authored-by: Alex van Andel <me@alexvanandel.com>

apps/web/modules/bookings/views/bookings-listing-view.tsx

@@ -391,8 +391,9 @@ function BookingsContent({ status }: BookingsProps) {
                 variant="compact"
                 ToolbarLeft={
                   <>
-                    <DataTableFilters.AddFilterButton table={table} />
+                    <DataTableFilters.AddFilterButton table={table} hideWhenFilterApplied />
                     <DataTableFilters.ActiveFilters table={table} />
+                    <DataTableFilters.AddFilterButton table={table} variant="sm" showWhenFilterApplied />
                     <DataTableFilters.ClearFiltersButton />
                   </>
                 }

apps/web/modules/insights/insights-view.tsx

@@ -54,8 +54,9 @@ function InsightsPageContent() {
         className="flex flex-wrap items-center gap-2"
         data-testid={`insights-filters-${isAll}-${teamId}-${userId}`}>
         <OrgTeamsFilter />
-        <DataTableFilters.AddFilterButton table={table} />
+        <DataTableFilters.AddFilterButton table={table} hideWhenFilterApplied />
         <DataTableFilters.ActiveFilters table={table} />
+        <DataTableFilters.AddFilterButton table={table} variant="sm" showWhenFilterApplied />
         <DataTableFilters.ClearFiltersButton exclude={["createdAt"]} />
         <div className="grow" />
         <Download />

packages/features/data-table/components/DataTableToolbar.tsx

@@ -52,7 +52,7 @@ function SearchBarComponent<TData>(
     return (
       <Input
         ref={ref}
-        className={`max-w-64 mb-0 mr-auto rounded-md ${className ?? ""}`}
+        className={`max-w-48 ${className ?? ""}`}
         placeholder="Search"
         value={searchTerm}
         onChange={(event) => setSearchTerm(event.target.value.trim())}
@@ -68,7 +68,7 @@ function SearchBarComponent<TData>(
   return (
     <Input
       ref={ref}
-      className="max-w-64 mb-0 mr-auto rounded-md"
+      className="max-w-48"
       placeholder="Search"
       value={(table.getColumn(searchKey)?.getFilterValue() as string) ?? ""}
       onChange={(event) => {

packages/features/data-table/components/filters/AddFilterButton.tsx

@@ -17,16 +17,25 @@ import {
   CommandEmpty,
   CommandItem,
   Icon,
+  Tooltip,
 } from "@calcom/ui";
 
 import { useDataTable, useFilterableColumns } from "../../hooks";
 
 export interface AddFilterButtonProps<TData> {
   table: Table<TData>;
+  variant?: "base" | "sm";
+  hideWhenFilterApplied?: boolean;
+  showWhenFilterApplied?: boolean;
 }
 
 function AddFilterButtonComponent<TData>(
-  { table }: AddFilterButtonProps<TData>,
+  {
+    table,
+    variant = "base",
+    hideWhenFilterApplied = false,
+    showWhenFilterApplied = false,
+  }: AddFilterButtonProps<TData>,
   ref: React.Ref<HTMLButtonElement>
 ) {
   const { t } = useLocale();
@@ -43,19 +52,39 @@ function AddFilterButtonComponent<TData>(
     [activeFilters, setActiveFilters]
   );
 
+  if (hideWhenFilterApplied && activeFilters?.length > 0) {
+    return null;
+  }
+
+  if (showWhenFilterApplied && activeFilters?.length === 0) {
+    return null;
+  }
+
   return (
     <div className="flex items-center space-x-2">
       <Popover>
-        <PopoverTrigger asChild>
-          <Button
-            ref={ref}
-            color="secondary"
-            data-testid="add-filter-button"
-            StartIcon="sliders-horizontal"
-            className="h-full">
-            {t("filter")}
-          </Button>
-        </PopoverTrigger>
+        {variant === "base" && (
+          <PopoverTrigger asChild>
+            <Button
+              ref={ref}
+              color="secondary"
+              data-testid="add-filter-button"
+              StartIcon="sliders-horizontal"
+              className="h-full">
+              {t("filter")}
+            </Button>
+          </PopoverTrigger>
+        )}
+        {variant === "sm" && (
+          <Tooltip content={t("add_filter")}>
+            <PopoverTrigger asChild>
+              <Button ref={ref} color="secondary" data-testid="add-filter-button" className="h-full">
+                <span className="sr-only">{t("filter")}</span>
+                <Icon name="plus" />
+              </Button>
+            </PopoverTrigger>
+          </Tooltip>
+        )}
         <PopoverContent className="w-[200px] p-0" align="start">
           <Command>
             <CommandInput placeholder={t("search")} />

packages/features/data-table/components/filters/ClearFiltersButton.tsx

@@ -17,7 +17,6 @@ export const ClearFiltersButton = ({ exclude }: { exclude?: string[] }) => {
         data-testid="clear-filters-button"
         target="_blank"
         rel="noreferrer"
-        className="min-w-24"
         StartIcon="x"
         onClick={() => clearAll(exclude)}>
         {t("clear")}

packages/features/data-table/components/filters/FilterPopover.tsx

@@ -136,7 +136,7 @@ export function FilterPopover({ column }: FilterPopoverProps) {
       <PopoverTrigger asChild>
         <Button
           color="secondary"
-          className="items-center"
+          className="h-[34px] items-center"
           StartIcon={icon}
           EndIcon="chevron-down"
           data-testid={`filter-popover-trigger-${column.id}`}>

packages/features/data-table/components/filters/NumberFilterOptions.tsx

@@ -3,7 +3,7 @@
 import { useForm, Controller } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Form, Input, Select, Button } from "@calcom/ui";
+import { Form, NumberInput, Select, Button } from "@calcom/ui";
 
 import { useFilterValue, useDataTable } from "../../hooks";
 import type { FilterableColumn } from "../../lib/types";
@@ -48,7 +48,7 @@ export function NumberFilterOptions({ column }: NumberFilterOptionsProps) {
             name="operatorOption"
             control={form.control}
             render={({ field: { value } }) => (
-              <div className="-mt-2 flex items-center gap-2">
+              <div className="flex items-center gap-2">
                 <Select
                   className="basis-1/3"
                   options={numberFilterOperatorOptions}
@@ -60,12 +60,12 @@ export function NumberFilterOptions({ column }: NumberFilterOptionsProps) {
                     }
                   }}
                 />
-                <Input type="number" className="mt-2 basis-2/3" {...form.register("operand")} />
+                <NumberInput className="h-[38px] basis-2/3" {...form.register("operand")} />
               </div>
             )}
           />
 
-          <div className="bg-subtle -mx-3 mb-2 h-px" role="separator" />
+          <div className="bg-subtle -mx-3 my-2 h-px" role="separator" />
 
           <div className="flex items-center justify-between">
             <Button

packages/features/insights/components/RoutingFormResponsesTable.tsx

@@ -134,8 +134,9 @@ export function RoutingFormResponsesTable() {
           ToolbarLeft={
             <>
               <OrgTeamsFilter />
-              <DataTableFilters.AddFilterButton table={table} />
+              <DataTableFilters.AddFilterButton table={table} hideWhenFilterApplied />
               <DataTableFilters.ActiveFilters table={table} />
+              <DataTableFilters.AddFilterButton table={table} variant="sm" showWhenFilterApplied />
               <DataTableFilters.ClearFiltersButton exclude={["createdAt"]} />
             </>
           }

packages/features/users/components/UserTable/UserListTable.tsx

@@ -555,11 +555,13 @@ function UserListTableContent() {
         isFetching={isFetching}
         totalDBRowCount={totalDBRowCount}
         ToolbarLeft={
-          <DataTableToolbar.SearchBar
-            table={table}
-            onSearch={(value) => setDebouncedSearchTerm(value)}
-            className="sm:max-w-64 max-w-full"
-          />
+          <>
+            <DataTableToolbar.SearchBar table={table} onSearch={(value) => setDebouncedSearchTerm(value)} />
+            <DataTableFilters.AddFilterButton table={table} hideWhenFilterApplied />
+            <DataTableFilters.ActiveFilters table={table} />
+            <DataTableFilters.AddFilterButton table={table} variant="sm" showWhenFilterApplied />
+            <DataTableFilters.ClearFiltersButton />
+          </>
         }
         ToolbarRight={
           <>
@@ -572,7 +574,6 @@ function UserListTableContent() {
               data-testid="export-members-button">
               {t("download")}
             </DataTableToolbar.CTA>
-            <DataTableFilters.AddFilterButton table={table} />
             <DataTableFilters.ColumnVisibilityButton table={table} />
             {adminOrOwner && (
               <DataTableToolbar.CTA
@@ -593,10 +594,6 @@ function UserListTableContent() {
             )}
           </>
         }>
-        <div className="flex gap-2 justify-self-start">
-          <DataTableFilters.ActiveFilters table={table} />
-        </div>
-
         {numberOfSelectedRows >= 2 && dynamicLinkVisible && (
           <DataTableSelectionBar.Root className="!bottom-16 md:!bottom-20">
             <DynamicLink table={table} domain={domain} />