fix: re-implement filter components in /insights/routing #18655

eunjae-lee · 2025-01-14T14:49:34Z

What does this PR do?

Fixes CAL-5012

Cloned TeamAndSelfList into OrgTeamsFilter and removed implementation regarding useFilterContext()
Cloned ClearFilters into DataTableFilters.ClearFiltersButton and removed implementation regarding useFilterContext()
Removed custom "Routing Form" and "People" filter components and use proper tanstack filter system.
Removed externalFilters-related code from useDataTable(). It was a temporary way to keep "Routing Form" and "People" filter as-is.

Screenshot.2025-01-14.at.17.17.33.mp4

Mandatory Tasks (DO NOT REMOVE)

I have self-reviewed the code (A decent size PR without self-review might be rejected).
N/A - I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

All the filters work the same on /insights/routing

linear · 2025-01-14T14:49:37Z

CAL-5013 Improve team filter component

vercel · 2025-01-14T14:49:41Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
cal	⬜️ Ignored (Inspect)	Visit Preview		Jan 16, 2025 3:06pm
calcom-web-canary	⬜️ Ignored (Inspect)	Visit Preview		Jan 16, 2025 3:06pm

linear · 2025-01-14T15:56:35Z

CAL-5012 Redesign filters

eunjae-lee · 2025-01-14T16:29:53Z

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

  table: Table<TData>;
-  externalFilters?: ExternalFilter[];
 }


externalFilters is no longer needed as I've migrated Routing Form and People filter properly.

eunjae-lee · 2025-01-14T16:31:35Z

packages/features/insights/components/RoutingFormResponsesTable.tsx

@@ -263,43 +261,56 @@ export function RoutingFormResponsesTableContent() {
  const { t } = useLocale();
  const { filter } = useFilterContext();


Now, we rely on useFilterContext() only for the date selectors. All the other parameters are managed below.

eunjae-lee · 2025-01-14T16:33:10Z

packages/features/insights/components/RoutingFormResponsesTable.tsx

+      columnHelper.accessor("formId", {
+        id: "formId",
+        header: t("routing_forms"),
+        enableColumnFilter: true,
+        enableSorting: false,
+        meta: {
+          filter: { type: "single_select" },
+        },
+        cell: () => null,
+      }),
+      columnHelper.accessor("bookingUserId", {
+        id: "bookingUserId",
+        header: t("people"),
+        enableColumnFilter: true,
+        enableSorting: false,
+        meta: {
+          filter: { type: "single_select" },
+        },
+        cell: () => null,
+      }),


these are hidden columns but they exist to feed the filterable columns to the tanstack table.

eunjae-lee · 2025-01-14T16:34:10Z

packages/features/insights/components/RoutingFormResponsesTable.tsx

@@ -582,7 +630,7 @@ export function RoutingFormResponsesTableContent() {
            <DataTableFilters.ColumnVisibilityButton table={table} />
          </>
        }>
-        <RoutingKPICards />
+        <RoutingKPICards given={{ isAll, teamId, userId }} />


We caxn provide isAll, teamId, userId to this component, so that it won't attempt to read them from useFilterContext().

eunjae-lee · 2025-01-14T16:36:11Z

packages/features/insights/filters/OrgTeamsFilter.tsx

+export type OrgTeamsType = "org" | "team" | "yours";
+
+// This is a cleaned-up version of TeamAndSelfList.
+export const OrgTeamsFilter = ({


This button is not a part of "Add Filters" button and its "ActiveFilters". It exists separately on the left-most side.

eunjae-lee · 2025-01-14T16:37:15Z

packages/features/insights/filters/RoutingFormFilterList.tsx

-    );
-  }
-);
+export const RoutingFormFilterList = memo(() => {


removed showOnlyWhenSelectedInContext as it's no longer needed

eunjae-lee · 2025-01-14T16:37:33Z

packages/features/insights/filters/UserListInTeam.tsx

-  showOnlyWhenSelectedInContext?: boolean;
-  onClear?: () => void;
-}) => {
+export const UserListInTeam = ({ onClear }: { onClear?: () => void }) => {


Removed showOnlyWhenSelectedInContext as it's no longer needed

eunjae-lee · 2025-01-14T16:38:24Z

packages/features/insights/server/trpc-router.ts

This file has no logic change. Just a bit cleaned up for readability.

graphite-app · 2025-01-14T16:50:11Z

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (01/14/25)

1 reviewer was added to this PR based on Keith Williams's automation.

github-actions · 2025-01-14T23:32:07Z

E2E results are ready!

Workflow #44081.1 latest results

sean-brydon

As discussed in DMs: Lets add the selected filters back to ensure we dont have any regression

eunjae-lee · 2025-01-16T14:21:30Z

new implementation!

Screenshot.2025-01-16.at.15.20.12.mp4

keithwillcode added consumer core area: core, team members only labels Jan 14, 2025

vercel bot had a problem deploying to Preview – api January 14, 2025 14:53 Failure

eunjae-lee force-pushed the eunjae/cal-5013-improve-team-filter-component branch from 7fb53c5 to 46c7c11 Compare January 14, 2025 15:03

vercel bot deployed to Preview – api January 14, 2025 15:10 View deployment

eunjae-lee force-pushed the eunjae/cal-5013-improve-team-filter-component branch from 46c7c11 to b698f40 Compare January 14, 2025 15:18

vercel bot deployed to Preview – api January 14, 2025 15:24 View deployment

eunjae-lee force-pushed the eunjae/cal-5013-improve-team-filter-component branch from b698f40 to 2dbcb73 Compare January 14, 2025 15:39

vercel bot deployed to Preview – api January 14, 2025 15:45 View deployment

eunjae-lee force-pushed the eunjae/cal-5013-improve-team-filter-component branch from 2dbcb73 to 96e21a0 Compare January 14, 2025 16:05

vercel bot deployed to Preview – api January 14, 2025 16:12 View deployment

eunjae-lee changed the title ~~fix: re-implement team filter & people filter components~~ fix: clean up filter logic in /insights/routing Jan 14, 2025

eunjae-lee commented Jan 14, 2025

View reviewed changes

eunjae-lee marked this pull request as ready for review January 14, 2025 16:46

dosubot bot added insights area: insights, analytics routing-forms area: routing forms, routing, forms labels Jan 14, 2025

graphite-app bot requested a review from a team January 14, 2025 16:47

eunjae-lee force-pushed the eunjae/cal-5013-improve-team-filter-component branch from 96e21a0 to 2cf0187 Compare January 14, 2025 16:48

vercel bot deployed to Preview – api January 14, 2025 16:55 View deployment

fix: re-implement team filter & people filter components

26a4e15

eunjae-lee force-pushed the eunjae/cal-5013-improve-team-filter-component branch from 2cf0187 to 26a4e15 Compare January 14, 2025 16:58

vercel bot deployed to Preview – api January 14, 2025 17:04 View deployment

Merge branch 'main' into eunjae/cal-5013-improve-team-filter-component

8c3771c

hbjORbj added the ready-for-e2e label Jan 14, 2025

vercel bot deployed to Preview – api January 14, 2025 23:18 View deployment

sean-brydon requested changes Jan 15, 2025

View reviewed changes

github-actions bot marked this pull request as draft January 15, 2025 10:36

implement DateRangeFilter

acc5c7f

eunjae-lee changed the title ~~fix: clean up filter logic in /insights/routing~~ fix: implement filter components in /insights/routing Jan 16, 2025

eunjae-lee changed the title ~~fix: implement filter components in /insights/routing~~ fix: re-implement filter components in /insights/routing Jan 16, 2025

vercel bot had a problem deploying to Preview – api January 16, 2025 14:17 Failure

show selected filter values

30d0dee

eunjae-lee force-pushed the eunjae/cal-5013-improve-team-filter-component branch from a51a903 to 30d0dee Compare January 16, 2025 15:06

vercel bot had a problem deploying to Preview – api January 16, 2025 15:10 Failure

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: re-implement filter components in /insights/routing #18655

fix: re-implement filter components in /insights/routing #18655

eunjae-lee commented Jan 14, 2025 •

edited

Loading

linear bot commented Jan 14, 2025

vercel bot commented Jan 14, 2025 •

edited

Loading

linear bot commented Jan 14, 2025

eunjae-lee Jan 14, 2025

eunjae-lee Jan 14, 2025

eunjae-lee Jan 14, 2025

eunjae-lee Jan 14, 2025

eunjae-lee Jan 14, 2025

eunjae-lee Jan 14, 2025

eunjae-lee Jan 14, 2025

eunjae-lee Jan 14, 2025

graphite-app bot commented Jan 14, 2025

github-actions bot commented Jan 14, 2025

sean-brydon left a comment

eunjae-lee commented Jan 16, 2025

		@@ -263,43 +261,56 @@ export function RoutingFormResponsesTableContent() {
		const { t } = useLocale();
		const { filter } = useFilterContext();

fix: re-implement filter components in /insights/routing #18655

Are you sure you want to change the base?

fix: re-implement filter components in /insights/routing #18655

Conversation

eunjae-lee commented Jan 14, 2025 • edited Loading

What does this PR do?

Mandatory Tasks (DO NOT REMOVE)

How should this be tested?

linear bot commented Jan 14, 2025

vercel bot commented Jan 14, 2025 • edited Loading

linear bot commented Jan 14, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

graphite-app bot commented Jan 14, 2025

Graphite Automations

github-actions bot commented Jan 14, 2025

E2E results are ready!

sean-brydon left a comment

Choose a reason for hiding this comment

eunjae-lee commented Jan 16, 2025

eunjae-lee commented Jan 14, 2025 •

edited

Loading

vercel bot commented Jan 14, 2025 •

edited

Loading