fix: clean up fields columns on /insights/routing (#19062)

* fix: clean up fields columns on /insights/routing

* remove duplicates

* move implementation to the backend

Author: eunjae-lee

packages/features/insights/components/RoutingFormResponsesTable.tsx

@@ -29,7 +29,7 @@ import classNames from "@calcom/lib/classNames";
 import { useCopy } from "@calcom/lib/hooks/useCopy";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { BookingStatus } from "@calcom/prisma/enums";
-import { RoutingFormFieldType, isValidRoutingFormFieldType } from "@calcom/routing-forms/lib/FieldTypes";
+import { RoutingFormFieldType } from "@calcom/routing-forms/lib/FieldTypes";
 import { trpc, type RouterOutputs } from "@calcom/trpc";
 import {
   Badge,
@@ -258,7 +258,7 @@ export function RoutingFormResponsesTable() {
     useInsightsParameters();
 
   const {
-    data: headersRaw,
+    data: headers,
     isLoading: isHeadersLoading,
     isSuccess: isHeadersSuccess,
   } = trpc.viewer.insights.routingFormResponsesHeaders.useQuery({
@@ -268,11 +268,6 @@ export function RoutingFormResponsesTable() {
     routingFormId,
   });
 
-  const headers = useMemo(() => {
-    if (!headersRaw) return;
-    return headersRaw.filter((header) => header.label && isValidRoutingFormFieldType(header.type));
-  }, [headersRaw]);
-
   const { data: forms } = trpc.viewer.insights.getRoutingFormsForFilters.useQuery({
     userId,
     teamId,

packages/features/insights/server/routing-events.ts

@@ -4,6 +4,10 @@ import mapKeys from "lodash/mapKeys";
 // eslint-disable-next-line no-restricted-imports
 import startCase from "lodash/startCase";
 
+import {
+  RoutingFormFieldType,
+  isValidRoutingFormFieldType,
+} from "@calcom/app-store/routing-forms/lib/FieldTypes";
 import { zodFields as routingFormFieldsSchema } from "@calcom/app-store/routing-forms/zod";
 import dayjs from "@calcom/dayjs";
 import type { ColumnFilter, TypedColumnFilter } from "@calcom/features/data-table";
@@ -617,14 +621,38 @@ class RoutingEventsInsights {
     });
 
     const fields = routingFormFieldsSchema.parse(routingForms.map((f) => f.fields).flat());
-    const headers = fields?.map((f) => {
-      return {
-        id: f.id,
-        label: f.label,
-        type: f.type,
-        options: f.options,
-      };
-    });
+    const ids = new Set<string>();
+    const headers = (fields || [])
+      .map((f) => {
+        return {
+          id: f.id,
+          label: f.label,
+          type: f.type,
+          options: f.options,
+        };
+      })
+      .filter((field) => {
+        if (!field.label || !isValidRoutingFormFieldType(field.type)) {
+          return false;
+        }
+        if (
+          field.type === RoutingFormFieldType.SINGLE_SELECT ||
+          field.type === RoutingFormFieldType.MULTI_SELECT
+        ) {
+          return field.options && field.options.length > 0;
+        }
+        return true;
+      })
+      .filter((field) => {
+        // Remove duplicate fields
+        // because we aggregate fields from multiple routing forms.
+        if (ids.has(field.id)) {
+          return false;
+        } else {
+          ids.add(field.id);
+          return true;
+        }
+      });
 
     return headers;
   }