feat: Add column visibility filters to routing insights table (#17715)

* add table as a child callback to we can pass it to columnVisibility

* add back failed bookings component

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

@@ -1,12 +1,12 @@
 "use client";
 
 import {
+  FailedBookingsByField,
   RoutingFormResponsesTable,
   RoutingKPICards,
-  FailedBookingsByField,
 } from "@calcom/features/insights/components";
 import { FiltersProvider } from "@calcom/features/insights/context/FiltersProvider";
-import { Filters } from "@calcom/features/insights/filters";
+import { RoutingInsightsFilters } from "@calcom/features/insights/filters/routing/FilterBar";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import InsightsLayout from "./layout";
@@ -17,12 +17,18 @@ export default function InsightsPage() {
   return (
     <InsightsLayout>
       <FiltersProvider>
-        <Filters showRoutingFilters />
-
         <div className="mb-4 space-y-4">
-          <RoutingKPICards />
-
-          <RoutingFormResponsesTable />
+          <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>
 
           <FailedBookingsByField />
 

packages/features/insights/components/RoutingFormResponsesTable.tsx

@@ -216,7 +216,11 @@ function BookingStatusCell({
 
 export type RoutingFormTableType = ReturnType<typeof useReactTable<RoutingFormTableRow>>;
 
-export function RoutingFormResponsesTable() {
+export function RoutingFormResponsesTable({
+  children,
+}: {
+  children?: React.ReactNode | ((table: RoutingFormTableType) => React.ReactNode);
+}) {
   const { t } = useLocale();
   const { filter } = useFilterContext();
   const tableContainerRef = useRef<HTMLDivElement>(null);
@@ -442,8 +446,9 @@ export function RoutingFormResponsesTable() {
             fetchMoreOnBottomReached(e.target as HTMLDivElement);
           }
         }}
-        isPending={isFetching && !data}
-      />
+        isPending={isFetching && !data}>
+        {typeof children === "function" ? children(table) : children}
+      </DataTable>
     </div>
   );
 }

packages/features/insights/filters/routing/FilterBar.tsx

@@ -0,0 +1,76 @@
+import type { RoutingFormTableType } from "@calcom/features/insights/components/RoutingFormResponsesTable";
+import { useFilterContext } from "@calcom/features/insights/context/provider";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button, Icon, Tooltip, DataTableFilters } from "@calcom/ui";
+
+import { BookingStatusFilter } from "../BookingStatusFilter";
+import { DateSelect } from "../DateSelect";
+import { RoutingDownload } from "../Download";
+import { FilterType } from "../FilterType";
+import { RoutingFormFieldFilter } from "../RoutingFormFieldFilter";
+import { RoutingFormFilterList } from "../RoutingFormFilterList";
+import { TeamAndSelfList } from "../TeamAndSelfList";
+import { UserListInTeam } from "../UsersListInTeam";
+
+const ClearFilters = () => {
+  const { t } = useLocale();
+  const { filter, clearFilters } = useFilterContext();
+  const { selectedFilter } = filter;
+
+  if (!selectedFilter || selectedFilter?.length < 1) return null;
+
+  return (
+    <Tooltip content={t("clear_filters")}>
+      <Button
+        variant="icon"
+        color="secondary"
+        target="_blank"
+        rel="noreferrer"
+        className="min-w-24 h-[38px] border-0"
+        onClick={() => {
+          clearFilters();
+        }}>
+        <Icon name="x" className="mr-1 h-4 w-4" />
+        {t("clear")}
+      </Button>
+    </Tooltip>
+  );
+};
+
+export const RoutingInsightsFilters = ({ table }: { table: RoutingFormTableType }) => {
+  const { filter } = useFilterContext();
+  const { selectedFilter } = filter;
+
+  // Get all filters that relate to the routing form
+  const routingFormFieldIds = selectedFilter
+    ? selectedFilter.map((filter) => {
+        if (filter.startsWith("rf_")) return filter.substring(3);
+      })
+    : [];
+
+  return (
+    <div className="mt-6 flex w-full flex-col gap-2 sm:flex-row sm:flex-wrap sm:justify-between">
+      <div className="flex flex-wrap gap-2 sm:flex-row sm:justify-start">
+        <TeamAndSelfList omitOrg={true} />
+
+        <UserListInTeam />
+
+        <RoutingFormFilterList />
+        <BookingStatusFilter />
+        {routingFormFieldIds.map((fieldId) => {
+          if (fieldId) return <RoutingFormFieldFilter key={fieldId} fieldId={fieldId} />;
+        })}
+
+        <FilterType showRoutingFilters={true} />
+
+        <ClearFilters />
+      </div>
+
+      <div className="flex flex-col-reverse sm:flex-row sm:flex-nowrap sm:justify-between">
+        <RoutingDownload />
+        <DateSelect />
+        <DataTableFilters.ColumnVisibilityButton table={table} />
+      </div>
+    </div>
+  );
+};