From 4cd8dbbab413b2213b604f61df056fbaec0a1a2c Mon Sep 17 00:00:00 2001
From: Eunjae Lee <hey@eunjae.dev>
Date: Wed, 2 Apr 2025 10:36:42 +0200
Subject: [PATCH] feat: support Filter Segment in other pages (#20461)

* feat: support Filter Segment in other pages

* minor changes to the behaviors

* remove comment

* fix type error

* fix e2e test
---
 .../(use-page-wrapper)/insights/layout.tsx    |  7 ++++-
 .../bookings/views/bookings-listing-view.tsx  | 11 +++++---
 apps/web/playwright/out-of-office.e2e.ts      |  2 --
 .../features/data-table/DataTableProvider.tsx |  6 +++--
 .../components/filters/AddFilterButton.tsx    | 20 ++++++++++----
 .../components/filters/FilterBar.tsx          | 18 +++++++++++++
 .../data-table/components/filters/index.ts    |  2 ++
 .../features/data-table/components/index.ts   |  3 +--
 .../data-table/components/segment/index.ts    |  7 +++++
 .../components/RoutingFormResponsesTable.tsx  | 27 ++++++++++++-------
 .../outOfOffice/OutOfOfficeEntriesList.tsx    | 12 ++++++---
 .../UserTable/PlatformManagedUsersTable.tsx   | 24 +++++++++--------
 .../components/UserTable/UserListTable.tsx    | 16 +++++------
 13 files changed, 107 insertions(+), 48 deletions(-)
 create mode 100644 packages/features/data-table/components/filters/FilterBar.tsx
 create mode 100644 packages/features/data-table/components/segment/index.ts

diff --git a/apps/web/app/(use-page-wrapper)/insights/layout.tsx b/apps/web/app/(use-page-wrapper)/insights/layout.tsx
index c20180c2ff..ccf32c60fe 100644
--- a/apps/web/app/(use-page-wrapper)/insights/layout.tsx
+++ b/apps/web/app/(use-page-wrapper)/insights/layout.tsx
@@ -1,5 +1,6 @@
 import { getTranslate } from "app/_utils";
 
+import { CTA_CONTAINER_CLASS_NAME } from "@calcom/features/data-table/lib/utils";
 import Shell from "@calcom/features/shell/Shell";
 
 import UpgradeTipWrapper from "./UpgradeTipWrapper";
@@ -8,7 +9,11 @@ export default async function InsightsLayout({ children }: { children: React.Rea
   const t = await getTranslate();
   return (
     <div>
-      <Shell withoutMain={false} heading={t("insights")} subtitle={t("insights_subtitle")}>
+      <Shell
+        withoutMain={false}
+        heading={t("insights")}
+        subtitle={t("insights_subtitle")}
+        actions={<div className={`mb-2 flex items-center gap-2 ${CTA_CONTAINER_CLASS_NAME}`} />}>
         <UpgradeTipWrapper>{children}</UpgradeTipWrapper>
       </Shell>
     </div>
diff --git a/apps/web/modules/bookings/views/bookings-listing-view.tsx b/apps/web/modules/bookings/views/bookings-listing-view.tsx
index f5992b5cb4..08e521660d 100644
--- a/apps/web/modules/bookings/views/bookings-listing-view.tsx
+++ b/apps/web/modules/bookings/views/bookings-listing-view.tsx
@@ -10,6 +10,7 @@ import {
   DataTableProvider,
   DataTableWrapper,
   DataTableFilters,
+  DataTableSegment,
   ColumnFilterType,
   useFilterValue,
   ZMultiSelectFilterValue,
@@ -374,10 +375,14 @@ function BookingsContent({ status }: BookingsProps) {
                 paginationMode="standard"
                 ToolbarLeft={
                   <>
-                    <DataTableFilters.AddFilterButton table={table} hideWhenFilterApplied />
-                    <DataTableFilters.ActiveFilters table={table} />
-                    <DataTableFilters.AddFilterButton table={table} variant="sm" showWhenFilterApplied />
+                    <DataTableFilters.FilterBar table={table} />
+                  </>
+                }
+                ToolbarRight={
+                  <>
                     <DataTableFilters.ClearFiltersButton />
+                    <DataTableSegment.SaveButton />
+                    <DataTableSegment.Select />
                   </>
                 }
                 LoaderView={<SkeletonLoader />}
diff --git a/apps/web/playwright/out-of-office.e2e.ts b/apps/web/playwright/out-of-office.e2e.ts
index 1e6cc250d3..e984c968ac 100644
--- a/apps/web/playwright/out-of-office.e2e.ts
+++ b/apps/web/playwright/out-of-office.e2e.ts
@@ -676,7 +676,6 @@ test.describe("Out of office", () => {
       );
       await page.locator('[data-testid="add-filter-button"]').click();
       await page.locator('[data-testid="add-filter-item-dateRange"]').click();
-      await page.locator('[data-testid="add-filter-button"]').click();
       await page.locator('[data-testid="filter-popover-trigger-dateRange"]').click();
 
       await expect(page.locator('[data-testid="date-range-options-tdy"]')).toBeVisible(); //Today
@@ -777,7 +776,6 @@ test.describe("Out of office", () => {
         );
         await page.locator('[data-testid="add-filter-item-dateRange"]').click();
         await entriesListRespPromise;
-        await page.locator('[data-testid="add-filter-button"]').click(); //close popover
 
         //1 OOO record should be visible for member3, end=currentDate-4days
         expect(await page.locator('[data-testid^="table-redirect-"]').count()).toBe(1);
diff --git a/packages/features/data-table/DataTableProvider.tsx b/packages/features/data-table/DataTableProvider.tsx
index df6bcd7fc6..3eb5cdba7f 100644
--- a/packages/features/data-table/DataTableProvider.tsx
+++ b/packages/features/data-table/DataTableProvider.tsx
@@ -15,10 +15,11 @@ import {
   type FilterSegmentOutput,
   type ActiveFilters,
 } from "./lib/types";
+import { CTA_CONTAINER_CLASS_NAME } from "./lib/utils";
 
 export type DataTableContextType = {
   tableIdentifier: string;
-  ctaContainerRef?: React.RefObject<HTMLDivElement>;
+  ctaContainerRef: React.RefObject<HTMLDivElement>;
 
   activeFilters: ActiveFilters;
   clearAll: (exclude?: string[]) => void;
@@ -69,7 +70,7 @@ export function DataTableProvider({
   tableIdentifier: _tableIdentifier,
   children,
   defaultPageSize = DEFAULT_PAGE_SIZE,
-  ctaContainerClassName,
+  ctaContainerClassName = CTA_CONTAINER_CLASS_NAME,
 }: DataTableProviderProps) {
   const [activeFilters, setActiveFilters] = useQueryState(
     "activeFilters",
@@ -110,6 +111,7 @@ export function DataTableProvider({
 
   const clearAll = useCallback(
     (exclude?: string[]) => {
+      setSegmentIdAndSaveToLocalStorage(null);
       setPageIndex(null);
       setActiveFilters((prev) => {
         const remainingFilters = prev.filter((filter) => exclude?.includes(filter.f));
diff --git a/packages/features/data-table/components/filters/AddFilterButton.tsx b/packages/features/data-table/components/filters/AddFilterButton.tsx
index d45c34c2fb..e39fcccbba 100644
--- a/packages/features/data-table/components/filters/AddFilterButton.tsx
+++ b/packages/features/data-table/components/filters/AddFilterButton.tsx
@@ -3,7 +3,7 @@
 import { type Table } from "@tanstack/react-table";
 // eslint-disable-next-line no-restricted-imports
 import startCase from "lodash/startCase";
-import { forwardRef } from "react";
+import { forwardRef, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
@@ -32,8 +32,12 @@ function AddFilterButtonComponent<TData>(
 ) {
   const { t } = useLocale();
   const { activeFilters, addFilter } = useDataTable();
+  const [open, setOpen] = useState(false);
 
   const filterableColumns = useFilterableColumns(table);
+  const availableColumns = filterableColumns.filter(
+    (column) => !activeFilters?.some((filter) => filter.f === column.id)
+  );
 
   if (hideWhenFilterApplied && activeFilters?.length > 0) {
     return null;
@@ -43,9 +47,13 @@ function AddFilterButtonComponent<TData>(
     return null;
   }
 
+  if (variant === "sm" && availableColumns.length === 0) {
+    return null;
+  }
+
   return (
     <div className="flex items-center space-x-2">
-      <Popover>
+      <Popover open={open} onOpenChange={setOpen}>
         {variant === "base" && (
           <PopoverTrigger asChild>
             <Button
@@ -73,16 +81,18 @@ function AddFilterButtonComponent<TData>(
             <CommandInput placeholder={t("search")} />
             <CommandList>
               <CommandEmpty>{t("no_columns_found")}</CommandEmpty>
-              {filterableColumns.map((column) => {
+              {availableColumns.map((column) => {
                 const showHiddenIndicator =
                   !table.getColumn(column.id)?.getIsVisible() &&
                   table.initialState.columnVisibility?.[column.id] !== false;
 
-                if (activeFilters?.some((filter) => filter.f === column.id)) return null;
                 return (
                   <CommandItem
                     key={column.id}
-                    onSelect={() => addFilter(column.id)}
+                    onSelect={() => {
+                      addFilter(column.id);
+                      setOpen(false);
+                    }}
                     className="flex items-center justify-between px-4 py-2"
                     data-testid={`add-filter-item-${column.id}`}>
                     <span>{startCase(column.title)}</span>
diff --git a/packages/features/data-table/components/filters/FilterBar.tsx b/packages/features/data-table/components/filters/FilterBar.tsx
new file mode 100644
index 0000000000..df2161141e
--- /dev/null
+++ b/packages/features/data-table/components/filters/FilterBar.tsx
@@ -0,0 +1,18 @@
+import { type Table } from "@tanstack/react-table";
+
+import { ActiveFilters } from "./ActiveFilters";
+import { AddFilterButton } from "./AddFilterButton";
+
+interface FilterBarProps<TData> {
+  table: Table<TData>;
+}
+
+export function FilterBar<TData>({ table }: FilterBarProps<TData>) {
+  return (
+    <>
+      <AddFilterButton table={table} hideWhenFilterApplied />
+      <ActiveFilters table={table} />
+      <AddFilterButton table={table} variant="sm" showWhenFilterApplied />
+    </>
+  );
+}
diff --git a/packages/features/data-table/components/filters/index.ts b/packages/features/data-table/components/filters/index.ts
index 4070e28bbb..fc95faf7f1 100644
--- a/packages/features/data-table/components/filters/index.ts
+++ b/packages/features/data-table/components/filters/index.ts
@@ -5,6 +5,7 @@ import { AddFilterButton } from "./AddFilterButton";
 import { ClearFiltersButton } from "./ClearFiltersButton";
 import { ColumnVisibilityButton } from "./ColumnVisibilityButton";
 import { DateRangeFilter } from "./DateRangeFilter";
+import { FilterBar } from "./FilterBar";
 
 // Update the export to include ActiveFilters
 export const DataTableFilters = {
@@ -12,6 +13,7 @@ export const DataTableFilters = {
   AddFilterButton,
   ActiveFilters,
   ClearFiltersButton,
+  FilterBar,
 };
 
 export { DateRangeFilter };
diff --git a/packages/features/data-table/components/index.ts b/packages/features/data-table/components/index.ts
index 5a420fa0e3..9d856f8230 100644
--- a/packages/features/data-table/components/index.ts
+++ b/packages/features/data-table/components/index.ts
@@ -6,5 +6,4 @@ export { DataTable } from "./DataTable";
 export { DataTableSkeleton } from "./DataTableSkeleton";
 export { DataTableWrapper } from "./DataTableWrapper";
 export type { DataTableProps } from "./DataTable";
-export { FilterSegmentSelect } from "./segment/FilterSegmentSelect";
-export { SaveFilterSegmentButton } from "./segment/SaveFilterSegmentButton";
+export { DataTableSegment } from "./segment";
diff --git a/packages/features/data-table/components/segment/index.ts b/packages/features/data-table/components/segment/index.ts
new file mode 100644
index 0000000000..626d78e9a2
--- /dev/null
+++ b/packages/features/data-table/components/segment/index.ts
@@ -0,0 +1,7 @@
+import { FilterSegmentSelect } from "./FilterSegmentSelect";
+import { SaveFilterSegmentButton } from "./SaveFilterSegmentButton";
+
+export const DataTableSegment = {
+  SaveButton: SaveFilterSegmentButton,
+  Select: FilterSegmentSelect,
+};
diff --git a/packages/features/insights/components/RoutingFormResponsesTable.tsx b/packages/features/insights/components/RoutingFormResponsesTable.tsx
index 53ddc74b8e..e8b69331d0 100644
--- a/packages/features/insights/components/RoutingFormResponsesTable.tsx
+++ b/packages/features/insights/components/RoutingFormResponsesTable.tsx
@@ -3,6 +3,7 @@
 import { useReactTable, getCoreRowModel, getSortedRowModel } from "@tanstack/react-table";
 // eslint-disable-next-line no-restricted-imports
 import { useMemo, useEffect } from "react";
+import { createPortal } from "react-dom";
 
 import {
   DataTableWrapper,
@@ -10,6 +11,7 @@ import {
   DataTableSkeleton,
   useDataTable,
   DateRangeFilter,
+  DataTableSegment,
   ColumnFilterType,
   convertMapToFacetedValues,
   type FilterableColumn,
@@ -49,9 +51,9 @@ export function RoutingFormResponsesTable() {
 
   const getInsightsFacetedUniqueValues = useInsightsFacetedUniqueValues({ headers, userId, teamId, isAll });
 
-  const { sorting, limit, offset, updateFilter } = useDataTable();
+  const { sorting, limit, offset, ctaContainerRef, updateFilter } = useDataTable();
 
-  const { data, isFetching, isPending, isLoading } = trpc.viewer.insights.routingFormResponses.useQuery({
+  const { data, isPending } = trpc.viewer.insights.routingFormResponses.useQuery({
     teamId,
     startDate,
     endDate,
@@ -123,23 +125,30 @@ export function RoutingFormResponsesTable() {
           LoaderView={<DataTableSkeleton columns={4} columnWidths={[200, 200, 250, 250]} />}
           ToolbarLeft={
             <>
+              <DataTableFilters.ColumnVisibilityButton table={table} />
               <OrgTeamsFilter />
-              <DataTableFilters.AddFilterButton table={table} hideWhenFilterApplied />
-              <DataTableFilters.ActiveFilters table={table} />
-              <DataTableFilters.AddFilterButton table={table} variant="sm" showWhenFilterApplied />
-              <DataTableFilters.ClearFiltersButton exclude={["createdAt"]} />
+              <DataTableFilters.FilterBar table={table} />
             </>
           }
           ToolbarRight={
             <>
-              <DateRangeFilter column={createdAtColumn} />
-              <RoutingFormResponsesDownload sorting={sorting} />
-              <DataTableFilters.ColumnVisibilityButton table={table} />
+              <DataTableFilters.ClearFiltersButton exclude={["createdAt"]} />
+              <DataTableSegment.SaveButton />
+              <DataTableSegment.Select />
             </>
           }>
           <RoutingKPICards />
         </DataTableWrapper>
       </div>
+
+      {ctaContainerRef.current &&
+        createPortal(
+          <>
+            <DateRangeFilter column={createdAtColumn} />
+            <RoutingFormResponsesDownload sorting={sorting} />
+          </>,
+          ctaContainerRef.current
+        )}
     </>
   );
 }
diff --git a/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx b/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx
index 261becf825..215f8a08e1 100644
--- a/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx
+++ b/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx
@@ -19,6 +19,7 @@ import {
   useFilterValue,
   ZDateRangeFilterValue,
   DataTableFilters,
+  DataTableSegment,
 } from "@calcom/features/data-table";
 import ServerTrans from "@calcom/lib/components/ServerTrans";
 import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
@@ -345,12 +346,17 @@ function OutOfOfficeEntriesListContent() {
         totalRowCount={totalRowCount}
         tableContainerRef={tableContainerRef}
         paginationMode="infinite"
-        ToolbarLeft={<DataTableToolbar.SearchBar table={table} onSearch={(value) => setSearchTerm(value)} />}
+        ToolbarLeft={
+          <>
+            <DataTableToolbar.SearchBar table={table} onSearch={(value) => setSearchTerm(value)} />
+            <DataTableFilters.FilterBar table={table} />
+          </>
+        }
         ToolbarRight={
           <>
-            <DataTableFilters.AddFilterButton table={table} />
-            <DataTableFilters.ActiveFilters table={table} />
             <DataTableFilters.ClearFiltersButton />
+            <DataTableSegment.SaveButton />
+            <DataTableSegment.Select />
           </>
         }
         EmptyView={
diff --git a/packages/features/users/components/UserTable/PlatformManagedUsersTable.tsx b/packages/features/users/components/UserTable/PlatformManagedUsersTable.tsx
index 149d3c2ae3..4dbda93382 100644
--- a/packages/features/users/components/UserTable/PlatformManagedUsersTable.tsx
+++ b/packages/features/users/components/UserTable/PlatformManagedUsersTable.tsx
@@ -10,6 +10,7 @@ import {
   DataTableToolbar,
   DataTableSelectionBar,
   DataTableFilters,
+  DataTableSegment,
   useColumnFilters,
   useDataTable,
 } from "@calcom/features/data-table";
@@ -287,22 +288,23 @@ function UserListTableContent({ oAuthClientId }: PlatformManagedUsersTableProps)
         totalRowCount={data?.meta?.totalRowCount}
         paginationMode="standard"
         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)}
+              className="sm:max-w-64 max-w-full"
+            />
+            <DataTableFilters.ColumnVisibilityButton table={table} />
+            <DataTableFilters.FilterBar table={table} />
+          </>
         }
         ToolbarRight={
           <>
-            <DataTableFilters.AddFilterButton table={table} />
-            <DataTableFilters.ColumnVisibilityButton table={table} />
+            <DataTableFilters.ClearFiltersButton />
+            <DataTableSegment.SaveButton />
+            <DataTableSegment.Select />
           </>
         }>
-        <div className="flex gap-2 justify-self-start">
-          <DataTableFilters.ActiveFilters table={table} />
-        </div>
-
         {numberOfSelectedRows > 0 && (
           <DataTableSelectionBar.Root className="!bottom-16 justify-center md:w-max">
             <p className="text-brand-subtle px-2 text-center text-xs leading-none sm:text-sm sm:font-medium">
diff --git a/packages/features/users/components/UserTable/UserListTable.tsx b/packages/features/users/components/UserTable/UserListTable.tsx
index f88f4e6954..8225f47591 100644
--- a/packages/features/users/components/UserTable/UserListTable.tsx
+++ b/packages/features/users/components/UserTable/UserListTable.tsx
@@ -13,13 +13,11 @@ import {
   DataTableToolbar,
   DataTableSelectionBar,
   DataTableFilters,
+  DataTableSegment,
   useColumnFilters,
   ColumnFilterType,
   convertFacetedValuesToMap,
-  SaveFilterSegmentButton,
-  FilterSegmentSelect,
   useDataTable,
-  CTA_CONTAINER_CLASS_NAME,
 } from "@calcom/features/data-table";
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
 import { WEBAPP_URL } from "@calcom/lib/constants";
@@ -105,7 +103,7 @@ function reducer(state: UserTableState, action: UserTableAction): UserTableState
 
 export function UserListTable() {
   return (
-    <DataTableProvider defaultPageSize={25} ctaContainerClassName={CTA_CONTAINER_CLASS_NAME}>
+    <DataTableProvider defaultPageSize={25}>
       <UserListTableContent />
     </DataTableProvider>
   );
@@ -535,16 +533,14 @@ function UserListTableContent() {
           <>
             <DataTableToolbar.SearchBar table={table} onSearch={(value) => setDebouncedSearchTerm(value)} />
             <DataTableFilters.ColumnVisibilityButton table={table} />
-            <DataTableFilters.AddFilterButton table={table} hideWhenFilterApplied />
-            <DataTableFilters.ActiveFilters table={table} />
-            <DataTableFilters.AddFilterButton table={table} variant="sm" showWhenFilterApplied />
+            <DataTableFilters.FilterBar table={table} />
           </>
         }
         ToolbarRight={
           <>
             <DataTableFilters.ClearFiltersButton />
-            <SaveFilterSegmentButton />
-            <FilterSegmentSelect />
+            <DataTableSegment.SaveButton />
+            <DataTableSegment.Select />
           </>
         }>
         {numberOfSelectedRows >= 2 && dynamicLinkVisible && (
@@ -586,7 +582,7 @@ function UserListTableContent() {
       {state.changeMemberRole.showModal && <ChangeUserRoleModal dispatch={dispatch} state={state} />}
       {state.editSheet.showModal && <EditUserSheet dispatch={dispatch} state={state} />}
 
-      {ctaContainerRef?.current &&
+      {ctaContainerRef.current &&
         createPortal(
           <div className="flex items-center gap-2">
             <DataTableToolbar.CTA