feat: refactor filters on insights response table (#17796)

* feat: improve text filters (WIP)

* move function to bottom

* apply some styles

* fix selection of TextFilterOptions

* rename value to operand

* remove unused file

* merge filters/filters into filters/utils

* fix regression of not putting url params correctly

* move makeWhereClause to filters/utils

* fix negative, empty, and not empty operators

* fix initial filtering from search state (url)

* fix type errors

* do not send an empty array to query

* update yarn.lock

* i18n for text filter operators

* extract logic as useColumnFilters()

* add missing import

* fix type error

* revert yarn.lock

* use i18n

* insensitive text match

* move data-table to @calcom/features

* fix type errors

* fix type errors

* fix type errors

* feat: support DataTable filters for Insights Routing WIP

* remove unused filters

* remove additionalFilters and fix types

* clean up filter components

* support icons for ActiveFilters

* support filters on json

* fix filter ui

* fix type error and clean up

* revert changes

* revert change

* clean up

* revert change

* fix compatibility with insights booking page

* remove unused params

* fix type errors

* update yarn.lock

* fix field filter and adjust ui

* chore: update yarn.lock

* fix text filter

* add Clear Filters button

* add more test data

---------

Co-authored-by: Udit Takkar <udit222001@gmail.com>

Author: eunjae-lee

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

@@ -1,34 +1,19 @@
 "use client";
 
-import {
-  FailedBookingsByField,
-  RoutingFormResponsesTable,
-  RoutingKPICards,
-} from "@calcom/features/insights/components";
+import { FailedBookingsByField, RoutingFormResponsesTable } from "@calcom/features/insights/components";
 import { FiltersProvider } from "@calcom/features/insights/context/FiltersProvider";
-import { RoutingInsightsFilters } from "@calcom/features/insights/filters/routing/FilterBar";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import InsightsLayout from "./layout";
 
-export default function InsightsPage() {
+export default function InsightsRoutingFormResponsesPage() {
   const { t } = useLocale();
 
   return (
     <InsightsLayout>
       <FiltersProvider>
         <div className="mb-4 space-y-4">
-          <RoutingFormResponsesTable>
-            {/* We now render the "filters and KPI as a children of the table but we still need to pass the table instance to it so we can access column status in the toolbar.*/}
-            {(table) => (
-              <div className="header mb-4">
-                <div className="flex items-center justify-between">
-                  <RoutingInsightsFilters table={table} />
-                </div>
-                <RoutingKPICards />
-              </div>
-            )}
-          </RoutingFormResponsesTable>
+          <RoutingFormResponsesTable />
 
           <FailedBookingsByField />
 

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

@@ -2822,6 +2822,8 @@
   "rr_distribution_method_balanced_description": "We will monitor how many bookings have been made with each host and compare this with others, disabling some hosts that are too far ahead so bookings are evenly distributed.",
   "exclude_emails_that_contain": "Exclude emails that contain ...",
   "exclude_emails_match_found_error_message": "Please enter a valid work email address",
+  "search_columns": "Search columns",
+  "search_options": "Search options",
   "disable_org_url_label": "Disable public organization profile and redirect",
   "disable_org_url_description": "Redirects {{orgSlug}}.cal.com to {{destination}}",
   "single_select": "Single Select",

packages/features/apps/AdminAppsList.tsx

@@ -158,7 +158,7 @@ const AdminAppsList = ({
     <form
       {...rest}
       className={
-        classNames?.form ?? "max-w-80 bg-default mb-4 rounded-md px-0 pt-0 md:max-w-full md:px-8 md:pt-10"
+        classNames?.form ?? "bg-default mb-4 max-w-80 rounded-md px-0 pt-0 md:max-w-full md:px-8 md:pt-10"
       }
       onSubmit={(e) => {
         e.preventDefault();

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

@@ -10,6 +10,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { ButtonProps } from "@calcom/ui";
 import { Button, Input } from "@calcom/ui";
 
+import { useColumnFilters } from "../lib/utils";
+
 interface DataTableToolbarProps extends ComponentPropsWithoutRef<"div"> {
   children: React.ReactNode;
 }
@@ -89,7 +91,8 @@ function ClearFiltersButtonComponent<TData>(
   ref: React.Ref<HTMLButtonElement>
 ) {
   const { t } = useLocale();
-  const isFiltered = table.getState().columnFilters.length > 0;
+  const columnFilters = useColumnFilters();
+  const isFiltered = columnFilters.length > 0;
   if (!isFiltered) return null;
   return (
     <Button

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

@@ -35,7 +35,7 @@ export function FilterOptions<TData>({ column, filter, state, setState, table }:
     table.getColumn(columnId)?.setFilterValue(undefined);
   };
 
-  if (column.filterType === "text") {
+  if (column.type === "text") {
     return (
       <TextFilterOptions
         column={column}
@@ -44,7 +44,7 @@ export function FilterOptions<TData>({ column, filter, state, setState, table }:
         removeFilter={removeFilter}
       />
     );
-  } else if (column.filterType === "select") {
+  } else if (column.type === "select") {
     return (
       <MultiSelectFilterOptions
         column={column}

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

@@ -15,7 +15,7 @@ import {
 import type { FilterableColumn, SelectFilterValue } from "../../lib/types";
 
 export type MultiSelectFilterOptionsProps = {
-  column: FilterableColumn;
+  column: Extract<FilterableColumn, { type: "select" }>;
   filterValue?: SelectFilterValue;
   setFilterValue: (value: SelectFilterValue) => void;
   removeFilter: (columnId: string) => void;
@@ -36,27 +36,30 @@ export function MultiSelectFilterOptions({
         <CommandEmpty>{t("no_options_found")}</CommandEmpty>
         {Array.from(column.options.keys()).map((option) => {
           if (!option) return null;
+          const { label: optionLabel, value: optionValue } =
+            typeof option === "string" ? { label: option, value: option } : option;
+
           return (
             <CommandItem
-              key={option}
+              key={optionValue}
               onSelect={() => {
-                const newFilterValue = filterValue?.includes(option)
-                  ? filterValue?.filter((value) => value !== option)
-                  : [...(filterValue || []), option];
+                const newFilterValue = filterValue?.includes(optionValue)
+                  ? filterValue?.filter((value) => value !== optionValue)
+                  : [...(filterValue || []), optionValue];
                 setFilterValue(newFilterValue);
               }}>
               <div
                 className={classNames(
                   "border-subtle mr-2 flex h-4 w-4 items-center justify-center rounded-sm border",
-                  Array.isArray(filterValue) && (filterValue as string[])?.includes(option)
+                  Array.isArray(filterValue) && (filterValue as string[])?.includes(optionValue)
                     ? "bg-primary"
                     : "opacity-50"
                 )}>
-                {Array.isArray(filterValue) && (filterValue as string[])?.includes(option) && (
+                {Array.isArray(filterValue) && (filterValue as string[])?.includes(optionValue) && (
                   <Icon name="check" className="text-primary-foreground h-4 w-4" />
                 )}
               </div>
-              {option}
+              {optionLabel}
             </CommandItem>
           );
         })}

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

@@ -26,7 +26,7 @@ const useTextFilterOperatorOptions = (): TextFilterOperatorOption[] => {
 };
 
 export type TextFilterOptionsProps = {
-  column: FilterableColumn;
+  column: Extract<FilterableColumn, { type: "text" }>;
   filterValue?: TextFilterValue;
   setFilterValue: (value: TextFilterValue) => void;
   removeFilter: (columnId: string) => void;

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

@@ -23,7 +23,7 @@ import {
 } from "@calcom/ui";
 
 import type { FilterableColumn } from "../../lib/types";
-import { useFiltersSearchState } from "../../lib/utils";
+import { convertToTitleCase, useFiltersState } from "../../lib/utils";
 import { FilterOptions } from "./FilterOptions";
 
 interface ColumnVisiblityProps<TData> {
@@ -118,35 +118,24 @@ const ColumnVisibilityButton = forwardRef(ColumnVisibilityButtonComponent) as <T
 ) => ReturnType<typeof ColumnVisibilityButtonComponent>;
 
 // Filters
-interface FilterButtonProps<TData> {
+interface AddFilterButtonProps<TData> {
   table: Table<TData>;
   omit?: string[];
 }
 
-function FilterButtonComponent<TData>(
-  { table, omit }: FilterButtonProps<TData>,
+function AddFilterButtonComponent<TData>(
+  { table, omit }: AddFilterButtonProps<TData>,
   ref: React.Ref<HTMLButtonElement>
 ) {
   const { t } = useLocale();
-  const [_state, _setState] = useFiltersSearchState();
-
-  const activeFilters = _state.activeFilters;
-  const columns = table
-    .getAllColumns()
-    .filter((column) => column.getCanFilter())
-    .filter((column) => !omit?.includes(column.id));
-
-  const filterableColumns = useMemo(() => {
-    return columns.map((column) => ({
-      id: column.id,
-      title: typeof column.columnDef.header === "string" ? column.columnDef.header : column.id,
-      options: column.getFacetedUniqueValues(),
-    }));
-  }, [columns]);
+  const { state, setState } = useFiltersState();
+
+  const activeFilters = state.activeFilters;
+  const filterableColumns = useFilterableColumns(table, omit);
 
   const handleAddFilter = (columnId: string) => {
     if (!activeFilters?.some((filter) => filter.f === columnId)) {
-      _setState({ activeFilters: [...activeFilters, { f: columnId, v: [] }] });
+      setState({ activeFilters: [...activeFilters, { f: columnId, v: [] }] });
     }
   };
 
@@ -167,8 +156,11 @@ function FilterButtonComponent<TData>(
               {filterableColumns.map((column) => {
                 if (activeFilters?.some((filter) => filter.f === column.id)) return null;
                 return (
-                  <CommandItem key={column.id} onSelect={() => handleAddFilter(column.id)}>
-                    {column.title}
+                  <CommandItem
+                    key={column.id}
+                    onSelect={() => handleAddFilter(column.id)}
+                    className="px-4 py-2">
+                    {convertToTitleCase(column.title)}
                   </CommandItem>
                 );
               })}
@@ -180,50 +172,80 @@ function FilterButtonComponent<TData>(
   );
 }
 
-const FilterButton = forwardRef(FilterButtonComponent) as <TData>(
-  props: FilterButtonProps<TData> & { ref?: React.Ref<HTMLButtonElement>; omit?: string[] }
-) => ReturnType<typeof FilterButtonComponent>;
+function useFilterableColumns<TData>(table: Table<TData>, omit?: string[]) {
+  const columns = useMemo(
+    () =>
+      table
+        .getAllColumns()
+        .filter((column) => column.getCanFilter())
+        .filter((column) => !omit?.includes(column.id)),
+    [table.getAllColumns(), omit]
+  );
+
+  const filterableColumns = useMemo<FilterableColumn[]>(
+    () =>
+      columns
+        .map((column) => {
+          const type = column.columnDef.meta?.filter?.type || "select";
+          const base = {
+            id: column.id,
+            title: typeof column.columnDef.header === "string" ? column.columnDef.header : column.id,
+            ...(column.columnDef.meta?.filter || {}),
+            type,
+          };
+          if (type === "select") {
+            return {
+              ...base,
+              options: column.getFacetedUniqueValues(),
+            };
+          } else if (type === "text") {
+            return {
+              ...base,
+            };
+          }
+        })
+        .filter((column): column is FilterableColumn => Boolean(column)),
+    [columns]
+  );
+
+  return filterableColumns;
+}
+
+const AddFilterButton = forwardRef(AddFilterButtonComponent) as <TData>(
+  props: AddFilterButtonProps<TData> & { ref?: React.Ref<HTMLButtonElement>; omit?: string[] }
+) => ReturnType<typeof AddFilterButtonComponent>;
 
 // Add the new ActiveFilters component
 interface ActiveFiltersProps<TData> {
   table: Table<TData>;
 }
 
 function ActiveFilters<TData>({ table }: ActiveFiltersProps<TData>) {
-  const [_state, _setState] = useFiltersSearchState();
-
-  const columns = table.getAllColumns().filter((column) => column.getCanFilter());
+  const { state, setState } = useFiltersState();
 
-  const filterableColumns = useMemo<FilterableColumn[]>(() => {
-    return columns.map((column) => {
-      return {
-        id: column.id,
-        title: typeof column.columnDef.header === "string" ? column.columnDef.header : column.id,
-        filterType: column.columnDef.meta?.filterType || "select",
-        options: column.getFacetedUniqueValues(),
-      };
-    });
-  }, [columns]);
+  const filterableColumns = useFilterableColumns(table);
 
   return (
     <>
-      {(_state.activeFilters || []).map((filter) => {
+      {state.activeFilters.map((filter) => {
         const column = filterableColumns.find((col) => col.id === filter.f);
         if (!column) return null;
+        const icon = column.icon || (column.type === "text" ? "file-text" : "layers");
         return (
           <Popover key={column.id}>
             <PopoverTrigger asChild>
               <Button color="secondary">
-                {column.title}
+                <Icon name={icon} className="mr-2 h-4 w-4" />
+                {convertToTitleCase(column.title)}
                 <Icon name="chevron-down" className="ml-2 h-4 w-4" />
               </Button>
             </PopoverTrigger>
             <PopoverContent className="p-0" align="start">
               <FilterOptions
                 column={column}
                 filter={filter}
-                state={_state}
-                setState={_setState}
+                state={state}
+                setState={setState}
                 table={table}
               />
             </PopoverContent>
@@ -235,4 +257,4 @@ function ActiveFilters<TData>({ table }: ActiveFiltersProps<TData>) {
 }
 
 // Update the export to include ActiveFilters
-export const DataTableFilters = { ColumnVisibilityButton, FilterButton, ActiveFilters };
+export const DataTableFilters = { ColumnVisibilityButton, AddFilterButton, ActiveFilters };