Skip to content

Commit 2266301

Browse files
feat: implement system filter segments for data tables (calcom#22939)
* feat: implement default filter segments for data tables - Add defaultSegmentId column to UserFilterSegmentPreference table - Support mixed segment ID types (number for user segments, string for default segments) - Add DefaultFilterSegment and CombinedFilterSegment types - Update useSegments hook to handle default segments with date range recalculation - Modify FilterSegmentSelect to group and display default segments separately - Add default segments to bookings view (My Bookings, Upcoming Bookings) - Prevent editing/deleting of default segments in SaveFilterSegmentButton - Update DataTableProvider to support defaultSegments prop - Update parsers and repository to handle mixed segment ID types Implements frontend-only default segments as specified in the requirements. Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * chore: update ESLint dependencies to resolve configuration issues - Update eslint-config-next and @typescript-eslint packages to latest versions - Fix dependency compatibility issues that were blocking pre-commit hooks Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * revert eslint change * some changes * refactor: implement discriminated union for segment types - Update SegmentIdentifier to use discriminated union with 'custom' vs 'default' types - Refactor setSegmentId to accept object parameters: { id: string; type: 'default' } | { id: number; type: 'custom' } - Update type definitions with DefaultFilterSegment, CustomFilterSegment, and CombinedFilterSegment - Modify useSegments hook to handle new segment type structure - Update FilterSegmentSelect component to work with discriminated unions - Refactor database preference handling to store segment type alongside ID - Add proper type safety throughout the data flow - Remove description property from DefaultFilterSegment type Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * fix: update unit test to expect discriminated union format for preferredSegmentId The test was expecting preferredSegmentId to be a number, but after the discriminated union refactor it now returns { id: number, type: 'custom' } for custom segments. Updated the assertion to use toEqual() for deep object comparison. Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * fix: correct SegmentIdentifier type to exclude undefined - Remove null from SegmentIdentifier type definition since null/undefined indicate absence of identifier - Update DataTableProvider and useSegments to handle SegmentIdentifier | null properly - Fix type safety while maintaining discriminated union functionality - Ensure setAndPersistSegmentId accepts null values for clearing segments Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * remove unused segment * a little update * feat: add default- prefix to default segment IDs for clearer type identification - Update 'my_bookings' to 'default-my_bookings' - Update 'upcoming-bookings' to 'default-upcoming-bookings' - Makes it easier to verify segment type by looking at the ID string - Maintains all existing discriminated union functionality Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * refactor: rename segment types from default/custom to system/user for better semantics Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * fix: update unit test to expect 'user' type instead of 'custom' in discriminated union Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * fix: complete type renaming from default/custom to system/user across all component files Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * refactor: update segment ID prefix from default- to system- to match type naming Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * remove unused segment * some fixes * revert schema change * rename defaultSegmentId to systemSegmentId * renaming * fix save button * remove as any * clean up prisma migrations * type fixes * many fixes * remove icon property * fix infinite rendering * fix race condition * re-visiting useSegments implementation WIP * extract useElementByClassName * add e2e tests * fix a bug that the created segment was not selected automatically * add useSegments to /insights and fix e2e test * fix type error * fix type error * apply feedback --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
1 parent 30b0012 commit 2266301

23 files changed

Lines changed: 827 additions & 353 deletions

File tree

apps/web/app/(use-page-wrapper)/(main-nav)/bookings/[status]/page.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
import { ShellMainAppDir } from "app/(use-page-wrapper)/(main-nav)/ShellMainAppDir";
22
import type { PageProps } from "app/_types";
33
import { _generateMetadata, getTranslate } from "app/_utils";
4+
import { cookies, headers } from "next/headers";
45
import { redirect } from "next/navigation";
56
import { z } from "zod";
67

8+
import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
9+
10+
import { buildLegacyRequest } from "@lib/buildLegacyCtx";
11+
712
import { validStatuses } from "~/bookings/lib/validStatuses";
813
import BookingsList from "~/bookings/views/bookings-listing-view";
914

@@ -26,10 +31,11 @@ const Page = async ({ params }: PageProps) => {
2631
redirect("/bookings/upcoming");
2732
}
2833
const t = await getTranslate();
34+
const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
2935

3036
return (
3137
<ShellMainAppDir heading={t("bookings")} subtitle={t("bookings_description")}>
32-
<BookingsList status={parsed.data.status} />
38+
<BookingsList status={parsed.data.status} userId={session?.user?.id} />
3339
</ShellMainAppDir>
3440
);
3541
};

apps/web/modules/bookings/views/bookings-listing-view.tsx

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import { useReactTable, getCoreRowModel, getSortedRowModel, createColumnHelper } from "@tanstack/react-table";
4-
import { useSearchParams } from "next/navigation";
4+
import { useSearchParams, usePathname } from "next/navigation";
55
import { useMemo, useRef } from "react";
66

77
import { WipeMyCalActionButton } from "@calcom/app-store/wipemycalother/components";
@@ -17,6 +17,7 @@ import {
1717
ZMultiSelectFilterValue,
1818
ZDateRangeFilterValue,
1919
ZTextFilterValue,
20+
type SystemFilterSegment,
2021
} from "@calcom/features/data-table";
2122
import { useSegments } from "@calcom/features/data-table/hooks/useSegments";
2223
import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -55,11 +56,45 @@ const descriptionByStatus: Record<BookingListingStatus, string> = {
5556

5657
type BookingsProps = {
5758
status: (typeof validStatuses)[number];
59+
userId?: number;
5860
};
5961

62+
function useSystemSegments(userId?: number) {
63+
const { t } = useLocale();
64+
65+
const systemSegments: SystemFilterSegment[] = useMemo(() => {
66+
if (!userId) return [];
67+
68+
return [
69+
{
70+
id: "my_bookings",
71+
name: t("my_bookings"),
72+
type: "system",
73+
activeFilters: [
74+
{
75+
f: "userId",
76+
v: {
77+
type: ColumnFilterType.MULTI_SELECT,
78+
data: [userId],
79+
},
80+
},
81+
],
82+
perPage: 10,
83+
},
84+
];
85+
}, [userId, t]);
86+
87+
return systemSegments;
88+
}
89+
6090
export default function Bookings(props: BookingsProps) {
91+
const pathname = usePathname();
92+
const systemSegments = useSystemSegments(props.userId);
6193
return (
62-
<DataTableProvider useSegments={useSegments}>
94+
<DataTableProvider
95+
useSegments={useSegments}
96+
systemSegments={systemSegments}
97+
tableIdentifier={pathname || undefined}>
6398
<BookingsContent {...props} />
6499
</DataTableProvider>
65100
);

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
ColumnFilterType,
88
type FilterableColumn,
99
} from "@calcom/features/data-table";
10+
import { useSegments } from "@calcom/features/data-table/hooks/useSegments";
1011
import {
1112
AverageEventDurationChart,
1213
BookingKPICards,
@@ -31,7 +32,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
3132

3233
export default function InsightsPage({ timeZone }: { timeZone: string }) {
3334
return (
34-
<DataTableProvider timeZone={timeZone}>
35+
<DataTableProvider useSegments={useSegments} timeZone={timeZone}>
3536
<InsightsOrgTeamsProvider>
3637
<InsightsPageContent />
3738
</InsightsOrgTeamsProvider>

apps/web/playwright/filter-helpers.ts

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export async function applySelectFilter(page: Page, columnId: string, value: str
3131
}
3232

3333
export async function selectOptionValue(page: Page, columnId: string, value: string) {
34+
await page.getByTestId(`select-filter-options-${columnId}`).getByRole("option", { name: value }).waitFor();
3435
await page.getByTestId(`select-filter-options-${columnId}`).getByRole("option", { name: value }).click();
3536
}
3637

@@ -176,3 +177,71 @@ export async function listSegments(page: Page): Promise<string[]> {
176177
export function locateSelectedSegmentName(page: Page, expectedName: string) {
177178
return page.locator('[data-testid="filter-segment-select"]').filter({ hasText: expectedName });
178179
}
180+
181+
/**
182+
* Check if a system segment is visible in the dropdown
183+
*/
184+
export async function expectSystemSegmentVisible(page: Page, segmentName: string) {
185+
await page.getByTestId("filter-segment-select").click();
186+
await expect(
187+
page.locator('[data-testid="filter-segment-select-content"]').getByText("Default")
188+
).toBeVisible();
189+
await expect(
190+
page
191+
.locator('[data-testid="filter-segment-select-content"] [role="menuitem"]')
192+
.filter({ hasText: segmentName })
193+
).toBeVisible();
194+
await page.keyboard.press("Escape");
195+
}
196+
197+
/**
198+
* Check that no segment is currently selected
199+
*/
200+
export async function expectSegmentCleared(page: Page) {
201+
// Check that no segment is selected (button shows default text)
202+
const segmentSelect = page.getByTestId("filter-segment-select");
203+
const buttonText = await segmentSelect.textContent();
204+
expect(buttonText?.trim()).toEqual("Segment");
205+
}
206+
207+
/**
208+
* Check that a specific segment is currently selected
209+
*/
210+
export async function expectSegmentSelected(page: Page, segmentName: string) {
211+
await expect(locateSelectedSegmentName(page, segmentName)).toBeVisible();
212+
}
213+
214+
/**
215+
* Duplicate an existing segment
216+
*/
217+
export async function duplicateSegment(page: Page, originalName: string, newName: string) {
218+
await openSegmentSubmenu(page, originalName);
219+
await page.getByTestId("filter-segment-select-submenu-content").getByText("Duplicate").click();
220+
await page.getByTestId("duplicate-segment-name").fill(newName);
221+
await page.getByRole("button", { name: "Duplicate" }).click();
222+
await expect(page.getByText("Filter segment duplicated")).toBeVisible();
223+
await page.keyboard.press("Escape");
224+
}
225+
226+
/**
227+
* Rename an existing segment
228+
*/
229+
export async function renameSegment(page: Page, originalName: string, newName: string) {
230+
await openSegmentSubmenu(page, originalName);
231+
await page.getByTestId("filter-segment-select-submenu-content").getByText("Rename").click();
232+
await page.getByTestId("rename-segment-name").fill(newName);
233+
await page.getByRole("button", { name: "Save" }).click();
234+
await expect(page.getByText("Filter segment updated")).toBeVisible();
235+
await page.keyboard.press("Escape");
236+
}
237+
238+
/**
239+
* Check if a segment group (like "Default" or "Personal") is visible
240+
*/
241+
export async function expectSegmentGroupVisible(page: Page, groupName: string) {
242+
await page.getByTestId("filter-segment-select").click();
243+
await expect(
244+
page.locator('[data-testid="filter-segment-select-content"]').getByText(groupName)
245+
).toBeVisible();
246+
await page.keyboard.press("Escape");
247+
}

apps/web/playwright/insights.e2e.ts

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { expect } from "@playwright/test";
33
import { randomString } from "@calcom/lib/random";
44
import prisma from "@calcom/prisma";
55

6-
import { addFilter, openFilter, clearFilters } from "./filter-helpers";
6+
import { clearFilters, applySelectFilter } from "./filter-helpers";
77
import { test } from "./lib/fixtures";
88

99
test.describe.configure({ mode: "parallel" });
@@ -202,25 +202,11 @@ test.describe("Insights", async () => {
202202
await page.locator('[data-testid="org-teams-filter-item"]').nth(1).click();
203203
await page.keyboard.press("Escape");
204204

205-
// Choose User filter item from dropdown
206-
await addFilter(page, "userId");
207-
208-
// Wait for the URL to include userId
209-
await page.waitForURL((url) => url.toString().includes("userId"));
210-
211-
// Click User filter to see a user list
212-
await openFilter(page, "userId");
213-
214-
await page.locator('[data-testid="select-filter-options-userId"]').getByRole("option").nth(0).click();
215-
216-
await page.locator('[data-testid="select-filter-options-userId"]').getByRole("option").nth(1).click();
217-
218-
// press escape button to close the filter
219-
await page.keyboard.press("Escape");
205+
await applySelectFilter(page, "userId", member.username || "");
220206

221207
await clearFilters(page);
222208

223-
await expect(page.url()).not.toContain("userId");
209+
await expect(page).not.toHaveURL(/[?&]userId=/);
224210
});
225211

226212
test("should test download button", async ({ page, users }) => {
Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import { expect } from "@playwright/test";
2+
import type { Page } from "@playwright/test";
3+
4+
import { addFilter, selectSegment, expectSegmentCleared, expectSegmentSelected } from "./filter-helpers";
5+
import { test } from "./lib/fixtures";
6+
7+
test.describe.configure({ mode: "parallel" });
8+
9+
test.afterEach(async ({ users }) => {
10+
await users.deleteAll();
11+
});
12+
13+
/**
14+
* Navigate to bookings page with specific status
15+
*/
16+
async function navigateToBookings(page: Page, status = "upcoming") {
17+
// Wait for the bookings API response like existing tests do
18+
const bookingsGetResponse = page.waitForResponse((response) =>
19+
/\/api\/trpc\/bookings\/get.*/.test(response.url())
20+
);
21+
await page.goto(`/bookings/${status}`, { waitUntil: "domcontentloaded" });
22+
await bookingsGetResponse;
23+
}
24+
25+
test.describe("System Segments", () => {
26+
test.describe("Core Functionality", () => {
27+
test("My Bookings system segment filters to current user's bookings only", async ({ page, users }) => {
28+
const user1 = await users.create({ username: "user1" });
29+
30+
// Create some bookings for user (this would need booking setup)
31+
// For now, we'll test the filter application
32+
await user1.apiLogin();
33+
await navigateToBookings(page);
34+
35+
await selectSegment(page, "My Bookings");
36+
await expectSegmentSelected(page, "My Bookings");
37+
38+
// Verify the userId filter is applied (check URL or filter indicators)
39+
const url = page.url();
40+
expect(url).toContain("activeFilters");
41+
});
42+
43+
test("System segments show only Duplicate option in submenu", async ({ page, users }) => {
44+
const user = await users.create();
45+
await user.apiLogin();
46+
47+
await navigateToBookings(page);
48+
49+
await page.getByTestId("filter-segment-select").click();
50+
await page
51+
.locator('[data-testid="filter-segment-select-content"] [role="menuitem"]')
52+
.filter({ hasText: "My Bookings" })
53+
.locator('[data-testid="filter-segment-select-submenu-button"]')
54+
.click();
55+
56+
const submenu = page.getByTestId("filter-segment-select-submenu-content");
57+
await expect(submenu.getByText("Duplicate")).toBeVisible();
58+
await expect(submenu.getByText("Rename")).toBeHidden();
59+
await expect(submenu.getByText("Delete")).toBeHidden();
60+
});
61+
});
62+
63+
test.describe("State Persistence", () => {
64+
test("System segment selection persists across page visits", async ({ page, users }) => {
65+
const owner = await users.create(undefined, { hasTeam: true });
66+
await owner.apiLogin();
67+
68+
// Visit bookings page and select system segment
69+
await navigateToBookings(page);
70+
await selectSegment(page, "My Bookings");
71+
await expectSegmentSelected(page, "My Bookings");
72+
73+
// Revisit the page - should preserve selection
74+
await navigateToBookings(page);
75+
await expectSegmentSelected(page, "My Bookings");
76+
});
77+
78+
test("Cleared system segment state persists (no default selection after manual clear)", async ({
79+
page,
80+
users,
81+
}) => {
82+
const owner = await users.create(undefined, { hasTeam: true });
83+
await owner.apiLogin();
84+
85+
await navigateToBookings(page);
86+
87+
// Select system segment
88+
await selectSegment(page, "My Bookings");
89+
await expectSegmentSelected(page, "My Bookings");
90+
91+
// Unselect system segment
92+
await selectSegment(page, "My Bookings");
93+
94+
// Revisit the page - should NOT have any segment selected
95+
await navigateToBookings(page);
96+
await expectSegmentCleared(page);
97+
});
98+
});
99+
100+
test.describe("Auto-clear Behavior", () => {
101+
test("Manual filter clears system segment selection", async ({ page, users }) => {
102+
const user = await users.create(undefined, { hasTeam: true });
103+
await user.apiLogin();
104+
105+
await navigateToBookings(page);
106+
107+
// Select system segment
108+
await selectSegment(page, "My Bookings");
109+
await expectSegmentSelected(page, "My Bookings");
110+
111+
// Apply manual filter - this should clear system segment
112+
await addFilter(page, "eventTypeId");
113+
await page.keyboard.press("Escape");
114+
await expectSegmentCleared(page);
115+
116+
// Verify filter is still applied
117+
await expect(page.getByTestId("filter-popover-trigger-eventTypeId")).toBeVisible();
118+
});
119+
});
120+
});

apps/web/public/static/locales/en/common.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3472,6 +3472,7 @@
34723472
"webhook_metadata": "Metadata",
34733473
"stats": "Stats",
34743474
"booking_status": "Booking status",
3475+
"my_bookings": "My Bookings",
34753476
"phone": "Phone",
34763477
"ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
34773478
}

0 commit comments

Comments
 (0)