## What does this PR do? When a filter segment is selected and the user clicks it again to deselect, this PR now clears all active filters in addition to deselecting the segment. Previously, deselecting a segment only called `setSegmentId(null)`, which removed the segment selection but left the filters in place. Now it calls `clearAll()` which clears both the segment selection and all active filters. ## Mandatory Tasks (DO NOT REMOVE) - [x] I have self-reviewed the code (A decent size PR without self-review might be rejected). - [x] I have updated the developer docs in /docs if this PR makes changes that would require a [documentation change](https://cal.com/docs). N/A - no documentation changes needed. - [x] I confirm automated tests are in place that prove my fix is effective or that my feature works. ## How should this be tested? 1. Go to a page with DataTable and filter segments (e.g., Bookings page or Organization Members page) 2. Select a filter segment (e.g., "My Bookings" system segment or a user-created segment) 3. Verify filters are applied (URL contains `activeFilters`) 4. Click the same segment again to deselect it 5. Verify the segment is deselected AND all filters are cleared (URL should no longer contain `activeFilters`) An e2e test has been added to `filter-segment.e2e.ts`: - `Deselecting a segment clears all active filters` ## Checklist - [x] My code follows the style guidelines of this project - [x] I have checked if my changes generate no new warnings ## Human Review Checklist - [ ] Verify that calling `clearAll()` instead of `setSegmentId(null)` is the intended behavior (clears both segment selection and all active filters) - [ ] Consider if there are use cases where users might want to keep filters when deselecting a segment --- > **Link to Devin run**: https://app.devin.ai/sessions/44f22b80d9c442bdb334d04dac2b476d > **Requested by**: @eunjae-lee
121 lines
4.2 KiB
TypeScript
121 lines
4.2 KiB
TypeScript
import type { Page } from "@playwright/test";
|
|
import { expect } from "@playwright/test";
|
|
|
|
import { addFilter, expectSegmentCleared, expectSegmentSelected, selectSegment } from "./filter-helpers";
|
|
import { test } from "./lib/fixtures";
|
|
|
|
test.describe.configure({ mode: "parallel" });
|
|
|
|
test.afterEach(async ({ users }) => {
|
|
await users.deleteAll();
|
|
});
|
|
|
|
/**
|
|
* Navigate to bookings page with specific status
|
|
*/
|
|
async function navigateToBookings(page: Page, status = "upcoming") {
|
|
// Wait for the bookings API response like existing tests do
|
|
const bookingsGetResponse = page.waitForResponse((response) =>
|
|
/\/api\/trpc\/bookings\/get.*/.test(response.url())
|
|
);
|
|
await page.goto(`/bookings/${status}`, { waitUntil: "domcontentloaded" });
|
|
await bookingsGetResponse;
|
|
}
|
|
|
|
test.describe("System Segments", () => {
|
|
test.describe("Core Functionality", () => {
|
|
test("My Bookings system segment filters to current user's bookings only", async ({ page, users }) => {
|
|
const user1 = await users.create({ username: "user1" });
|
|
|
|
// Create some bookings for user (this would need booking setup)
|
|
// For now, we'll test the filter application
|
|
await user1.apiLogin();
|
|
await navigateToBookings(page);
|
|
|
|
await selectSegment(page, "My Bookings");
|
|
await expectSegmentSelected(page, "My Bookings");
|
|
|
|
// Verify the userId filter is applied (check URL or filter indicators)
|
|
const url = page.url();
|
|
expect(url).toContain("activeFilters");
|
|
});
|
|
|
|
test("System segments show only Duplicate option in submenu", async ({ page, users }) => {
|
|
const user = await users.create();
|
|
await user.apiLogin();
|
|
|
|
await navigateToBookings(page);
|
|
|
|
await page.getByTestId("filter-segment-select").first().click();
|
|
await page
|
|
.locator('[data-testid="filter-segment-select-content"] [role="menuitem"]')
|
|
.filter({ hasText: "My Bookings" })
|
|
.locator('[data-testid="filter-segment-select-submenu-button"]')
|
|
.click();
|
|
|
|
const submenu = page.getByTestId("filter-segment-select-submenu-content");
|
|
await expect(submenu.getByText("Duplicate")).toBeVisible();
|
|
await expect(submenu.getByText("Rename")).toBeHidden();
|
|
await expect(submenu.getByText("Delete")).toBeHidden();
|
|
});
|
|
});
|
|
|
|
test.describe("State Persistence", () => {
|
|
test("System segment selection persists across page visits", async ({ page, users }) => {
|
|
const owner = await users.create(undefined, { hasTeam: true });
|
|
await owner.apiLogin();
|
|
|
|
// Visit bookings page and select system segment
|
|
await navigateToBookings(page);
|
|
await selectSegment(page, "My Bookings");
|
|
await expectSegmentSelected(page, "My Bookings");
|
|
|
|
// Revisit the page - should preserve selection
|
|
await navigateToBookings(page);
|
|
await expectSegmentSelected(page, "My Bookings");
|
|
});
|
|
|
|
test("Cleared system segment state persists (no default selection after manual clear)", async ({
|
|
page,
|
|
users,
|
|
}) => {
|
|
const owner = await users.create(undefined, { hasTeam: true });
|
|
await owner.apiLogin();
|
|
|
|
await navigateToBookings(page);
|
|
|
|
// Select system segment
|
|
await selectSegment(page, "My Bookings");
|
|
await expectSegmentSelected(page, "My Bookings");
|
|
|
|
// Unselect system segment
|
|
await selectSegment(page, "My Bookings");
|
|
|
|
// Revisit the page - should NOT have any segment selected
|
|
await navigateToBookings(page);
|
|
await expectSegmentCleared(page);
|
|
});
|
|
});
|
|
|
|
test.describe("Auto-clear Behavior", () => {
|
|
test("Manual filter clears system segment selection", async ({ page, users }) => {
|
|
const user = await users.create(undefined, { hasTeam: true });
|
|
await user.apiLogin();
|
|
|
|
await navigateToBookings(page);
|
|
|
|
// Select system segment
|
|
await selectSegment(page, "My Bookings");
|
|
await expectSegmentSelected(page, "My Bookings");
|
|
|
|
// Apply manual filter - this should clear system segment
|
|
await addFilter(page, "eventTypeId");
|
|
await page.keyboard.press("Escape");
|
|
await expectSegmentCleared(page);
|
|
|
|
// Verify filter is still applied
|
|
await expect(page.getByTestId("filter-popover-trigger-eventTypeId")).toBeVisible();
|
|
});
|
|
});
|
|
});
|