68c94dfa3a
* docs: define product and design direction * style: establish restrained workbench primitives * refactor: declutter board and task topbars * style: align dockview panel chrome * fix: align task topbar vcs control sizing * refactor: surface integrations navigation * fix: repair integrations and task creation workflow * refactor: include linear in integrations navigation * style: restore familiar workbench tones * fix: add dockview tab breathing room * fix: show configured integration shortcuts * fix: hover open integrations menu * fix: stabilize integrations hover menu * fix: align home and dockview topbars * fix: normalize home topbar controls * fix: compact home topbar height * fix: simplify home chrome and split buttons * fix: move integrations to left chrome * fix: restore home stats shortcut * fix: add dockview tab breathing room * fix: border home stats button * fix: streamline dockview topbar actions * fix: align task split button seam * fix: address review feedback * fix: restore topbar e2e affordances * fix: stabilize workflow e2e isolation * fix: add task topbar action overflow * fix: address PR review feedback
80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
import { test, expect } from "../../fixtures/test-base";
|
|
import type { Page } from "@playwright/test";
|
|
|
|
type TopbarMetrics = {
|
|
workflowRight: number;
|
|
actionsLeft: number;
|
|
actionsRight: number;
|
|
headerRight: number;
|
|
};
|
|
|
|
async function readTopbarMetrics(page: Page) {
|
|
return page.evaluate<TopbarMetrics | null>(() => {
|
|
const header = document.querySelector('[data-testid="task-topbar"]');
|
|
const workflow = document.querySelector('[data-testid="workflow-stepper"]');
|
|
const actions = document.querySelector('[data-testid="topbar-action-overflow"]');
|
|
if (!header || !workflow || !actions) return null;
|
|
|
|
const headerRect = header.getBoundingClientRect();
|
|
const workflowRect = workflow.getBoundingClientRect();
|
|
const actionsRect = actions.getBoundingClientRect();
|
|
|
|
return {
|
|
workflowRight: workflowRect.right,
|
|
actionsLeft: actionsRect.left,
|
|
actionsRight: actionsRect.right,
|
|
headerRight: headerRect.right,
|
|
};
|
|
});
|
|
}
|
|
|
|
test.describe("Task topbar overflow", () => {
|
|
test("keeps contextual PR actions inline before quick chat overflows", async ({
|
|
testPage,
|
|
apiClient,
|
|
seedData,
|
|
}) => {
|
|
await testPage.setViewportSize({ width: 1100, height: 720 });
|
|
|
|
const task = await apiClient.createTask(
|
|
seedData.workspaceId,
|
|
"Responsive topbar PR review task",
|
|
{
|
|
workflow_id: seedData.workflowId,
|
|
workflow_step_id: seedData.startStepId,
|
|
repository_ids: [seedData.repositoryId],
|
|
},
|
|
);
|
|
|
|
await apiClient.mockGitHubAssociateTaskPR({
|
|
task_id: task.id,
|
|
owner: "testorg",
|
|
repo: "testrepo",
|
|
pr_number: 761,
|
|
pr_url: "https://github.com/testorg/testrepo/pull/761",
|
|
pr_title: "Responsive topbar overflow",
|
|
head_branch: "feature/topbar-overflow",
|
|
base_branch: "main",
|
|
author_login: "test-user",
|
|
additions: 23,
|
|
deletions: 3,
|
|
});
|
|
|
|
await testPage.goto(`/t/${task.id}`);
|
|
|
|
await expect(testPage.getByTestId("task-topbar")).toBeVisible({ timeout: 10_000 });
|
|
await expect(testPage.getByTestId("pr-topbar-button")).toBeVisible({ timeout: 15_000 });
|
|
await expect(testPage.getByTestId("topbar-action-overflow-trigger")).toBeVisible({
|
|
timeout: 10_000,
|
|
});
|
|
|
|
const metrics = await readTopbarMetrics(testPage);
|
|
expect(metrics).not.toBeNull();
|
|
expect(metrics!.workflowRight).toBeLessThanOrEqual(metrics!.actionsLeft + 1);
|
|
expect(metrics!.actionsRight).toBeLessThanOrEqual(metrics!.headerRight + 1);
|
|
|
|
await testPage.getByTestId("topbar-action-overflow-trigger").click();
|
|
await expect(testPage.getByRole("button", { name: "Chat" })).toBeVisible();
|
|
});
|
|
});
|