Carlos Florêncio
102 lines
4.4 KiB
Markdown
102 lines
4.4 KiB
Markdown
---
|
|
id: "12b-github-parity-page"
|
|
title: "Rebuild Bitbucket page with GitHub list parity"
|
|
status: completed
|
|
wave: 3b
|
|
depends_on: ["12-plugin-ui-native-registrations"]
|
|
plan: "plan.md"
|
|
spec: "../../specs/integrations/requirements/bitbucket-plugin.md"
|
|
---
|
|
|
|
# Task 12b: Rebuild Bitbucket page with GitHub list parity
|
|
|
|
## Intent
|
|
|
|
Replace the live-evaluation desktop split workbench with the first-party `/github`
|
|
page's list-first hierarchy while retaining plugin-owned review depth, watches, Cloud
|
|
and Data Center capability handling, and native mobile parity.
|
|
|
|
## Confirmed cause
|
|
|
|
`ui/src/bundle.ts` renders `.bb-desktop-panes`, permanently allocating a narrow queue
|
|
and an empty review pane. `apps/web/app/github/github-page-client.tsx` instead composes
|
|
`PresetsScopeBar`, `ListToolbar`, one padded full-width `PRList`, and an optional
|
|
pagination footer. Source, installed, and served plugin asset hashes matched during
|
|
reproduction, so stale files did not cause the reported layout.
|
|
|
|
## Owned paths
|
|
|
|
- Attached `kdlbs/kandev-plugin-bitbucket` worktree:
|
|
- `ui/src/bundle.ts`
|
|
- `ui/src/view-models.ts`
|
|
- `ui/plugin.css`
|
|
- `ui/bundle.js`
|
|
- `ui/test/registrations.test.ts`
|
|
- `ui/test/view-models.test.ts`
|
|
- `ui/e2e/desktop-packaged-plugin.spec.ts`
|
|
- `ui/e2e/mobile-packaged-plugin.spec.ts`
|
|
|
|
## Implementation
|
|
|
|
1. Add tested review-query URL helpers so `/bitbucket?review=<canonical-key>` is a
|
|
reloadable focused-detail state and Back returns to `/bitbucket`.
|
|
2. Replace `.bb-desktop-panes` with a full-height list layout matching GitHub's order:
|
|
desktop scope pills, compact title/count + repository/query + refresh/watch toolbar,
|
|
then one padded, bordered, divided result list.
|
|
3. Match GitHub row density and anatomy: provider-colored PR state icon, linked title,
|
|
repository/number and readable author metadata, restrained status, compact Task and
|
|
Review affordances. Hide provider-opaque account identifiers from display.
|
|
4. Reuse `ReviewDetailPanel` as focused page content and native task ReviewPanel; do
|
|
not duplicate review action logic.
|
|
5. Keep phone composition one-dimensional: compact list toolbar, filter Drawer,
|
|
direct focused detail, 44px controls, safe-area padding, and one scroll owner.
|
|
|
|
## Mobile design contract
|
|
|
|
- Desktop outcome: scan full-width results and launch a task, open Bitbucket, or open
|
|
focused review without a permanent detail pane.
|
|
- Mobile entry: `/bitbucket`; closest exemplar is `/github` list/filter hierarchy plus
|
|
`apps/web/components/kanban-with-preview.tsx` direct detail navigation.
|
|
- Hierarchy: topbar → compact toolbar → PR list → focused review. Primary row action is
|
|
Review; filters/actions are temporary Drawers.
|
|
- Scroll: list or focused review owns vertical scroll, never both; viewport-bound
|
|
content uses `100dvh`, overscroll containment, and bottom safe-area clearance.
|
|
- Shared query/filter/review state and view-model helpers serve both compositions.
|
|
|
|
## RED tests
|
|
|
|
- `ui/test/view-models.test.ts`: review URL encoding/decoding and opaque-author display.
|
|
- `ui/test/registrations.test.ts`: GitHub-parity markers exist and permanent split-pane
|
|
markers do not.
|
|
- Desktop Playwright: full-width list exists, no review pane exists initially, Review
|
|
changes URL and focuses detail, Back restores list.
|
|
- Mobile Playwright: same URL/back outcome, filter/action Drawers remain contained,
|
|
touch targets remain at least 44px, and document has no horizontal overflow.
|
|
|
|
## Verification
|
|
|
|
```sh
|
|
npm test
|
|
npm run typecheck
|
|
npm run lint
|
|
npm run e2e
|
|
test -z "$(gofmt -l .)"
|
|
git diff --check
|
|
```
|
|
|
|
Completed verification: 27 Vitest checks plus typecheck/build passed; seven packaged
|
|
desktop/mobile Playwright scenarios passed against the live Cloud-connected instance.
|
|
Fresh desktop and mobile documents rendered without browser console errors.
|
|
|
|
Then copy only `ui/bundle.js` and `ui/plugin.css` into the running disposable plugin
|
|
installation, hard-reload a fresh document, and capture `/github` and `/bitbucket` at
|
|
identical desktop/mobile viewport sizes. Do not replace the live plugin server binary.
|
|
|
|
## Risks
|
|
|
|
- Bitbucket queue actions currently expose a bounded result set without total/cursor;
|
|
match GitHub's list hierarchy but do not fabricate pagination totals.
|
|
- Review query keys must remain encoded and must not become a host-specific route.
|
|
- Cloud can return canonical opaque account IDs; presentation must omit those rather
|
|
than exposing unreadable identifiers or changing authorization identity semantics.
|