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

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]} />;
   }