fix: apply routing form filter by default on /insights/routing (#19535)

* fix: mandate routing form filter on /insights/routing

* add e2e test

* update e2e test

* fix e2e test

* add comment

apps/web/playwright/insights-routing.e2e.ts

@@ -0,0 +1,40 @@
+import { test } from "./lib/fixtures";
+
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("Insights > Routing", () => {
+  test("applies routing form filter by default", async ({ page, users, routingForms }) => {
+    const owner = await users.create(undefined, {
+      hasTeam: true,
+      isUnpublished: true,
+      isOrg: true,
+      hasSubteam: true,
+    });
+    await owner.apiLogin();
+
+    const membership = await owner.getOrgMembership();
+
+    const formName = "Test Form 1234";
+    await routingForms.create({
+      name: formName,
+      userId: owner.id,
+      teamId: membership.teamId,
+      fields: [
+        {
+          type: "text",
+          label: "Name",
+          identifier: "name",
+          required: true,
+        },
+      ],
+    });
+
+    await page.goto(`/insights/routing`);
+    await page.locator('[data-testid="filter-popover-trigger-formId"]').getByText(formName).waitFor();
+
+    // The routing form filter is persisted
+    // even if user tries to clear it.
+    await page.locator('[data-testid="clear-filters-button"]').click();
+    await page.locator('[data-testid="filter-popover-trigger-formId"]').getByText(formName).waitFor();
+  });
+});

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

@@ -31,7 +31,7 @@ export function MultiSelectFilterOptions({ column }: MultiSelectFilterOptionsPro
     <Command data-testid={`multi-select-options-${column.id}`}>
       <CommandInput placeholder={t("search")} />
       <CommandList>
-        <CommandEmpty>{t("no_options_found")}</CommandEmpty>
+        <CommandEmpty>{t("no_options_available")}</CommandEmpty>
         {column.options.map((option, index) => {
           if (!option) return null;
           const {

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

@@ -31,7 +31,7 @@ export function SingleSelectFilterOptions({ column }: SingleSelectFilterOptionsP
     <Command data-testid={`single-select-options-${column.id}`}>
       <CommandInput placeholder={t("search")} />
       <CommandList>
-        <CommandEmpty>{t("no_options_found")}</CommandEmpty>
+        <CommandEmpty>{t("no_options_available")}</CommandEmpty>
         {column.options.map((option, index) => {
           if (!option) return null;
           const {

packages/features/insights/components/RoutingFormResponsesTable.tsx

@@ -8,7 +8,7 @@ import {
   getSortedRowModel,
 } from "@tanstack/react-table";
 // eslint-disable-next-line no-restricted-imports
-import { useMemo } from "react";
+import { useMemo, useEffect } from "react";
 
 import {
   DataTableWrapper,
@@ -17,6 +17,7 @@ import {
   useDataTable,
   DateRangeFilter,
   ColumnFilterType,
+  convertMapToFacetedValues,
   type FilterableColumn,
 } from "@calcom/features/data-table";
 import { trpc } from "@calcom/trpc";
@@ -54,7 +55,7 @@ export function RoutingFormResponsesTable() {
 
   const getInsightsFacetedUniqueValues = useInsightsFacetedUniqueValues({ headers, userId, teamId, isAll });
 
-  const { sorting } = useDataTable();
+  const { sorting, updateFilter } = useDataTable();
 
   const { data, fetchNextPage, isFetching, isPending, hasNextPage, isLoading } =
     trpc.viewer.insights.routingFormResponses.useInfiniteQuery(
@@ -104,6 +105,19 @@ export function RoutingFormResponsesTable() {
     getFacetedUniqueValues: getInsightsFacetedUniqueValues,
   });
 
+  useEffect(() => {
+    if (routingFormId) {
+      return;
+    }
+    const routingForms = convertMapToFacetedValues(getInsightsFacetedUniqueValues(table, "formId")());
+    const newRoutingFormId = routingForms?.[0]?.value;
+    if (newRoutingFormId) {
+      // if routing form filter is not set, set it to the first form
+      // this also prevents user from clearing the routing form filter
+      updateFilter("formId", { type: ColumnFilterType.SINGLE_SELECT, data: newRoutingFormId });
+    }
+  }, [table, getInsightsFacetedUniqueValues, routingFormId]);
+
   if ((isHeadersLoading && !headers) || ((isFetching || isLoading) && !data)) {
     return <DataTableSkeleton columns={4} columnWidths={[200, 200, 250, 250]} />;
   }