fix: re-implement team filter & people filter components

apps/web/public/static/locales/en/common.json

@@ -2075,7 +2075,7 @@
   "looking_for_more_analytics": "Looking for more analytics?",
   "looking_for_more_insights": "Looking for more Insights?",
   "filters": "Filters",
-  "add_filter": "Add filter",
+  "add_filter": "Filter",
   "add_rule": "Add rule",
   "add_rule_group": "Add rule group",
   "remove_filters": "Clear all filters",

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

@@ -54,7 +54,7 @@ export function DataTableWrapper<TData, TValue>({
       <DataTableToolbar.Root>
         <div className="flex w-full flex-col gap-2 sm:flex-row">
           <div className="flex w-full flex-wrap items-center justify-between gap-2">
-            <div className="flex justify-start gap-2">{ToolbarLeft}</div>
+            <div className="flex items-center justify-start gap-2">{ToolbarLeft}</div>
             <div className="grow" />
             <div className="flex justify-end gap-2">{ToolbarRight}</div>
           </div>

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

@@ -1,5 +1,7 @@
 "use client";
 
+import React from "react";
+
 import type { FilterableColumn } from "../../lib/types";
 import { MultiSelectFilterOptions } from "./MultiSelectFilterOptions";
 import { NumberFilterOptions } from "./NumberFilterOptions";

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

@@ -29,7 +29,7 @@ export function MultiSelectFilterOptions({ column }: MultiSelectFilterOptionsPro
 
   return (
     <Command>
-      <CommandInput placeholder={t("search_options")} />
+      <CommandInput placeholder={t("search")} />
       <CommandList>
         <CommandEmpty>{t("no_options_found")}</CommandEmpty>
         {Array.from(column.options.keys()).map((option) => {

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

@@ -29,7 +29,7 @@ export function SingleSelectFilterOptions({ column }: SingleSelectFilterOptionsP
 
   return (
     <Command>
-      <CommandInput placeholder={t("search_options")} />
+      <CommandInput placeholder={t("search")} />
       <CommandList>
         <CommandEmpty>{t("no_options_found")}</CommandEmpty>
         {Array.from(column.options.keys()).map((option) => {

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

@@ -25,7 +25,7 @@ import {
 } from "@calcom/ui";
 
 import { useDataTable } from "../../hooks";
-import type { FilterableColumn, ExternalFilter } from "../../lib/types";
+import type { FilterableColumn } from "../../lib/types";
 import { FilterOptions } from "./FilterOptions";
 
 interface ColumnVisiblityProps<TData> {
@@ -122,16 +122,14 @@ const ColumnVisibilityButton = forwardRef(ColumnVisibilityButtonComponent) as <T
 // Filters
 interface AddFilterButtonProps<TData> {
   table: Table<TData>;
-  externalFilters?: ExternalFilter[];
 }
 
 function AddFilterButtonComponent<TData>(
-  { table, externalFilters }: AddFilterButtonProps<TData>,
+  { table }: AddFilterButtonProps<TData>,
   ref: React.Ref<HTMLButtonElement>
 ) {
   const { t } = useLocale();
-  const { activeFilters, setActiveFilters, displayedExternalFilters, setDisplayedExternalFilters } =
-    useDataTable();
+  const { activeFilters, setActiveFilters } = useDataTable();
 
   const filterableColumns = useFilterableColumns(table);
 
@@ -148,14 +146,14 @@ function AddFilterButtonComponent<TData>(
     <div className="flex items-center space-x-2">
       <Popover>
         <PopoverTrigger asChild>
-          <Button ref={ref} color="secondary" className="border-dashed">
-            <Icon name="filter" className="mr-2 h-4 w-4" />
+          <Button ref={ref} color="secondary">
+            <Icon name="sliders-horizontal" className="mr-2 h-4 w-4" />
             {t("add_filter")}
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-[200px] p-0" align="start">
           <Command>
-            <CommandInput placeholder={t("search_columns")} />
+            <CommandInput placeholder={t("search")} />
             <CommandList>
               <CommandEmpty>{t("no_columns_found")}</CommandEmpty>
               {filterableColumns.map((column) => {
@@ -169,16 +167,6 @@ function AddFilterButtonComponent<TData>(
                   </CommandItem>
                 );
               })}
-              {(externalFilters || [])
-                .filter((filter) => !displayedExternalFilters.includes(filter.key))
-                .map((filter, index) => (
-                  <CommandItem
-                    key={index}
-                    onSelect={() => setDisplayedExternalFilters((prev) => [...prev, filter.key])}
-                    className="px-4 py-2">
-                    {t(filter.titleKey)}
-                  </CommandItem>
-                ))}
             </CommandList>
           </Command>
         </PopoverContent>
@@ -229,7 +217,6 @@ const AddFilterButton = forwardRef(AddFilterButtonComponent) as <TData>(
 // Add the new ActiveFilters component
 interface ActiveFiltersProps<TData> {
   table: Table<TData>;
-  externalFilters?: ExternalFilter[];
 }
 
 const filterIcons = {
@@ -239,8 +226,8 @@ const filterIcons = {
   single_select: "disc",
 } as const;
 
-function ActiveFilters<TData>({ table, externalFilters }: ActiveFiltersProps<TData>) {
-  const { activeFilters, displayedExternalFilters } = useDataTable();
+function ActiveFilters<TData>({ table }: ActiveFiltersProps<TData>) {
+  const { activeFilters } = useDataTable();
   const filterableColumns = useFilterableColumns(table);
 
   return (
@@ -264,11 +251,6 @@ function ActiveFilters<TData>({ table, externalFilters }: ActiveFiltersProps<TDa
           </Popover>
         );
       })}
-      {(displayedExternalFilters || []).map((key) => {
-        const filter = externalFilters?.find((filter) => filter.key === key);
-        if (!filter) return null;
-        return <Fragment key={key}>{filter.component()}</Fragment>;
-      })}
     </>
   );
 }

packages/features/data-table/lib/context.tsx

@@ -2,7 +2,7 @@
 
 import type { SortingState, OnChangeFn } from "@tanstack/react-table";
 import { useQueryState, parseAsArrayOf, parseAsJson } from "nuqs";
-import { createContext, useCallback, useState, type Dispatch, type SetStateAction } from "react";
+import { createContext, useCallback } from "react";
 import { z } from "zod";
 
 import { type FilterValue, ZFilterValue, ZSorting } from "./types";
@@ -23,10 +23,6 @@ export type DataTableContextType = {
 
   sorting: SortingState;
   setSorting: OnChangeFn<SortingState>;
-
-  displayedExternalFilters: string[];
-  setDisplayedExternalFilters: Dispatch<SetStateAction<string[]>>;
-  removeDisplayedExternalFilter: (key: string) => void;
 };
 
 export const DataTableContext = createContext<DataTableContextType | null>(null);
@@ -41,19 +37,9 @@ export function DataTableProvider({ children }: { children: React.ReactNode }) {
     parseAsArrayOf(parseAsJson(ZSorting.parse)).withDefault([])
   );
 
-  const [displayedExternalFilters, setDisplayedExternalFilters] = useState<string[]>([]);
-
-  const removeDisplayedExternalFilter = useCallback(
-    (key: string) => {
-      setDisplayedExternalFilters((prev) => prev.filter((f) => f !== key));
-    },
-    [setDisplayedExternalFilters]
-  );
-
   const clearAll = useCallback(() => {
     setActiveFilters([]);
-    setDisplayedExternalFilters([]);
-  }, [setActiveFilters, setDisplayedExternalFilters]);
+  }, [setActiveFilters]);
 
   const updateFilter = useCallback(
     (columnId: string, value: FilterValue) => {
@@ -81,9 +67,6 @@ export function DataTableProvider({ children }: { children: React.ReactNode }) {
         removeFilter,
         sorting,
         setSorting,
-        displayedExternalFilters,
-        setDisplayedExternalFilters,
-        removeDisplayedExternalFilter,
       }}>
       {children}
     </DataTableContext.Provider>

packages/features/data-table/lib/types.ts

@@ -17,7 +17,7 @@ export type TextFilterOperator = z.infer<typeof ZTextFilterOperator>;
 
 export const ZSingleSelectFilterValue = z.object({
   type: z.literal("single_select"),
-  data: z.string(),
+  data: z.union([z.string(), z.number()]),
 });
 
 export type SingleSelectFilterValue = z.infer<typeof ZSingleSelectFilterValue>;