fix: re-implement team filter & people filter components

Author: eunjae-lee

apps/web/public/icons/sprite.svg

@@ -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",

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

@@ -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/DataTableWrapper.tsx

@@ -1,11 +1,17 @@
 "use client";
 
+import React from "react";
+
 import type { FilterableColumn } from "../../lib/types";
 import { MultiSelectFilterOptions } from "./MultiSelectFilterOptions";
 import { NumberFilterOptions } from "./NumberFilterOptions";
 import { SingleSelectFilterOptions } from "./SingleSelectFilterOptions";
 import { TextFilterOptions } from "./TextFilterOptions";
 
+const customFilterComponents: React.ComponentType<{ column: FilterableColumn }> = {};
+
+export type CustomFilterComponent = keyof typeof customFilterComponents;
+
 export type FilterOptionsProps = {
   column: FilterableColumn;
 };
@@ -19,6 +25,9 @@ export function FilterOptions({ column }: FilterOptionsProps) {
     return <SingleSelectFilterOptions column={column} />;
   } else if (column.type === "number") {
     return <NumberFilterOptions column={column} />;
+  } else if (column.type === "custom" && customFilterComponents[column.component]) {
+    const Component = customFilterComponents[column.component];
+    return <Component column={column} />;
   } else {
     return null;
   }

packages/features/data-table/components/filters/FilterOptions.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/MultiSelectFilterOptions.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/SingleSelectFilterOptions.tsx

@@ -148,14 +148,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) => {

packages/features/data-table/components/filters/index.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/context.tsx

@@ -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>;
@@ -74,6 +74,10 @@ export type ColumnFilterType = "single_select" | "multi_select" | "text" | "numb
 export type ColumnFilterMeta = {
   type?: ColumnFilterType;
   icon?: IconName;
+} & {
+  type: "custom";
+  icon?: IconName;
+  component: CustomFilterComponent;
 };
 
 export type FilterableColumn = {