Skip to content

Commit 10276e3

Browse files
ToolboxAidToolboxAid
committed
Polish Project Journey DB viewer template navigation and note tree layout - PR_26157_005-project-journey-db-viewer-template-polish
1 parent fd9e67f commit 10276e3

10 files changed

Lines changed: 285 additions & 103 deletions

File tree

‎admin/db-viewer.html‎

Lines changed: 42 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -16,57 +16,65 @@
1616
<main data-admin-only="true">
1717
<section class="page-title">
1818
<div class="container">
19-
<div class="kicker">Admin Only</div>
20-
<h1>DB Viewer</h1>
19+
<div class="kicker">Admin Only / Mock DB</div>
20+
<h1>Mock DB Project Journey Tables</h1>
2121
<p class="lede">Read-only mock DB dump for project tables, relationships, and data diagnostics.</p>
2222
</div>
2323
</section>
2424
<section class="section">
25-
<div class="container account-panel">
26-
<aside class="side-menu" aria-label="Admin pages">
27-
<a href="admin/analytics.html">Analytics</a>
28-
<a href="admin/branding.html">Branding</a>
29-
<a href="admin/controls.html">Controls</a>
30-
<a class="active" aria-current="page" href="admin/db-viewer.html">DB Viewer</a>
31-
<a href="admin/design-system.html">Design System</a>
32-
<a href="toolbox/environments/index.html">Environments</a>
33-
<a href="toolbox/game-migration/index.html">Game Migration</a>
34-
<a href="admin/grouping-colors.html">Grouping Colors</a>
35-
<a href="admin/moderation.html">Moderation</a>
36-
<a href="admin/notes.html">Notes</a>
37-
<a href="toolbox/platform-settings/index.html">Platform Settings</a>
38-
<a href="admin/ratings.html">Ratings</a>
39-
<a href="admin/roles.html">Roles</a>
40-
<a href="admin/site-settings.html">Site Settings</a>
41-
<a href="admin/themes.html">Themes</a>
42-
<a href="admin/tools-progress.html">Tools Progress</a>
43-
<a href="admin/users.html">Users</a>
44-
</aside>
45-
<article class="card" aria-labelledby="admin-db-viewer-title" data-admin-db-viewer>
46-
<div class="card-body content-stack">
25+
<div class="container container--tool-wide">
26+
<div class="tool-workspace tool-workspace--wide">
27+
<aside class="tool-column tool-group-build">
28+
<div class="tool-column-header">
29+
<h2>DB Viewer</h2>
30+
</div>
31+
<div class="accordion-stack">
32+
<details class="vertical-accordion" open>
33+
<summary>Scope</summary>
34+
<div class="accordion-body content-stack">
35+
<p>Project Journey mock DB records are displayed as a read-only human-readable dump.</p>
36+
<p>Use the diagnostics panel to confirm table attribution, relationships, and table bleed checks.</p>
37+
</div>
38+
</details>
39+
</div>
40+
</aside>
41+
<div data-tool-display-mode data-asset-root="assets/theme-v2/images" data-tool-slug="admin-db-viewer" data-tool-icon-src="assets/theme-v2/images/image-missing.svg" data-tool-character-src="assets/theme-v2/images/image-missing.svg"></div>
42+
<section class="tool-center-panel content-stack" aria-labelledby="admin-db-viewer-title" data-admin-db-viewer>
4743
<div class="content-cluster">
4844
<div>
4945
<div class="kicker">Mock DB</div>
5046
<h2 id="admin-db-viewer-title">Project Journey Tables</h2>
5147
</div>
5248
<span class="status" role="status" data-admin-db-status>Loading mock DB records.</span>
5349
</div>
54-
<section class="callout content-stack content-stack--compact" aria-labelledby="admin-db-diagnostics-title">
55-
<h3 id="admin-db-diagnostics-title">Diagnostics</h3>
56-
<div class="content-stack content-stack--compact" data-admin-db-diagnostics></div>
57-
</section>
58-
<section class="callout content-stack content-stack--compact" aria-labelledby="admin-db-relationships-title">
59-
<h3 id="admin-db-relationships-title">Relationships</h3>
60-
<div class="content-stack content-stack--compact" data-admin-db-relationships></div>
61-
</section>
6250
<section class="content-stack" aria-label="Mock DB tables" data-admin-db-tables></section>
63-
</div>
64-
</article>
51+
</section>
52+
<aside class="tool-column tool-group-build">
53+
<div class="tool-column-header">
54+
<h2>DB Inspector</h2>
55+
</div>
56+
<div class="accordion-stack">
57+
<details class="vertical-accordion" open>
58+
<summary>Diagnostics</summary>
59+
<div class="accordion-body">
60+
<div class="content-stack content-stack--compact" data-admin-db-diagnostics></div>
61+
</div>
62+
</details>
63+
<details class="vertical-accordion" open>
64+
<summary>Relationships</summary>
65+
<div class="accordion-body">
66+
<div class="content-stack content-stack--compact" data-admin-db-relationships></div>
67+
</div>
68+
</details>
69+
</div>
70+
</aside>
71+
</div>
6572
</div>
6673
</section>
6774
</main>
6875
<div data-partial="footer"></div>
6976
<script src="assets/theme-v2/js/gamefoundry-partials.js" defer></script>
77+
<script src="assets/theme-v2/js/tool-display-mode.js" defer></script>
7078
<script type="module" src="admin/db-viewer.js"></script>
7179
</body>
7280

‎assets/theme-v2/css/panels.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -418,6 +418,12 @@ body.tool-focus-mode .tool-display-mode__badge {
418418
color: var(--gold)
419419
}
420420

421+
.tool-stat-divider {
422+
border-top: var(--border-standard);
423+
grid-column: 1 / -1;
424+
min-height: var(--space-0)
425+
}
426+
421427
.brand-color-code {
422428
align-items: center;
423429
display: flex;
@@ -469,6 +475,14 @@ body.tool-focus-mode .tool-display-mode__badge {
469475
white-space: normal
470476
}
471477

478+
.tool-tree-row--single-line .tool-tree-row__content {
479+
flex: 0 1 90%;
480+
max-width: 90%;
481+
overflow: hidden;
482+
text-overflow: ellipsis;
483+
white-space: nowrap
484+
}
485+
472486
.tool-tree-row__action {
473487
flex: 0 0 32px;
474488
margin-left: auto

‎docs_build/dev/reports/playwright_v8_coverage_report.txt‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ Exercised tool entry points detected:
1717
(74%) Theme V2 Shared JS - exercised 2 runtime JS files
1818

1919
Changed runtime JS files covered:
20-
(95%) toolbox/project-journey/project-journey-mock-repository.js - executed lines 855/855; executed functions 72/76
21-
(97%) toolbox/project-journey/project-journey.js - executed lines 739/739; executed functions 73/75
20+
(94%) toolbox/project-journey/project-journey-mock-repository.js - executed lines 864/864; executed functions 74/79
21+
(96%) toolbox/project-journey/project-journey.js - executed lines 802/802; executed functions 80/83
2222

2323
Files with executed line/function counts where available:
2424
(67%) assets/theme-v2/js/tool-display-mode.js - executed lines 201/201; executed functions 10/15
@@ -27,17 +27,16 @@ Files with executed line/function counts where available:
2727
(76%) toolbox/project-workspace/project-workspace-mock-repository.js - executed lines 402/402; executed functions 26/34
2828
(80%) assets/theme-v2/js/gamefoundry-partials.js - executed lines 207/207; executed functions 16/20
2929
(84%) toolbox/toolRegistry.js - executed lines 1788/1788; executed functions 31/37
30-
(95%) toolbox/project-journey/project-journey-mock-repository.js - executed lines 855/855; executed functions 72/76
31-
(97%) toolbox/project-journey/project-journey.js - executed lines 739/739; executed functions 73/75
32-
(98%) admin/db-viewer.js - executed lines 213/213; executed functions 39/40
30+
(94%) toolbox/project-journey/project-journey-mock-repository.js - executed lines 864/864; executed functions 74/79
31+
(96%) toolbox/project-journey/project-journey.js - executed lines 802/802; executed functions 80/83
3332

3433
Uncovered or low-coverage changed JS files:
3534
(100%) none - no low-coverage changed runtime JS files
3635

3736
Changed JS files considered:
37+
(0%) admin/db-viewer.js - changed JS file not collected as browser runtime coverage
3838
(0%) tests/playwright/tools/AdminDbViewer.spec.mjs - changed JS file not collected as browser runtime coverage
3939
(0%) tests/playwright/tools/ProjectJourneyTool.spec.mjs - changed JS file not collected as browser runtime coverage
4040
(80%) assets/theme-v2/js/gamefoundry-partials.js - changed JS file with browser V8 coverage
41-
(95%) toolbox/project-journey/project-journey-mock-repository.js - changed JS file with browser V8 coverage
42-
(97%) toolbox/project-journey/project-journey.js - changed JS file with browser V8 coverage
43-
(98%) admin/db-viewer.js - changed JS file with browser V8 coverage
41+
(94%) toolbox/project-journey/project-journey-mock-repository.js - changed JS file with browser V8 coverage
42+
(96%) toolbox/project-journey/project-journey.js - changed JS file with browser V8 coverage

‎docs_build/dev/reports/project-journey-db-viewer-template-polish-report.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Project Journey DB Viewer Template Polish Report
2+
3+
Generated: 2026-06-06
4+
5+
Status: PASS
6+
7+
## Summary
8+
9+
- Updated `admin/db-viewer.html` to use the reusable tools template structure with left controls, center workspace, ToolDisplayMode, and right inspector columns.
10+
- Preserved the DB Viewer read-only dump behavior, relationship checks, attribution checks, and table bleed diagnostics.
11+
- Added the Project Journey `System Generated` navigation filter and wired mock repository counts to system-created items for that filter.
12+
- Added a reusable Theme V2 statistics divider between Total and Not Started.
13+
- Added a reusable one-line Note Tree row class so status, title, system indicator, and trashcan controls stay aligned.
14+
- Moved Item Details into a standard `tool-form-table` row with the label left of `journeyItemDetailsInput`.
15+
16+
## Legend Handling
17+
18+
- The user's manual Project Journey Status Legend markup and layout were preserved.
19+
- The existing `statusLegend` runtime code remains in place because `[data-journey-status-legend]` is still the active legend target.
20+
- No page-local CSS, tool-local CSS, inline styles, style blocks, script blocks, or inline event handlers were added.
21+
22+
## Validation
23+
24+
- Project Journey targeted Playwright lane: PASS.
25+
- Mock DB Project Journey Tables / DB Viewer Playwright lane: PASS.
26+
- Changed-file/static validation: PASS.
27+
- Full samples smoke: SKIP per instructions.
28+
29+
## Design System Note
30+
31+
- Added reusable Theme V2 classes in `assets/theme-v2/css/panels.css` for a statistics divider and single-line tree row content. These cover shared tool layout gaps without adding local CSS.

‎docs_build/dev/reports/testing_lane_execution_report.md‎

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ Status: PASS
77
## Lanes
88

99
- Project Journey runtime/UI lane: PASS.
10-
- Project Workspace integration handoff coverage: PASS inside the targeted Project Journey spec.
10+
- Mock DB Project Journey Tables / DB Viewer UI lane: PASS.
11+
- Project Workspace handoff coverage: PASS inside the targeted Project Journey spec.
1112
- Toolbox registration/navigation coverage: PASS inside the targeted Project Journey spec.
12-
- Admin DB Viewer lane: PASS.
1313
- Changed-file/static validation: PASS.
1414
- Full samples smoke: SKIP per PR instructions.
1515

@@ -19,28 +19,25 @@ Status: PASS
1919
| --- | --- | --- |
2020
| `node --check toolbox/project-journey/project-journey.js` | PASS | Project Journey runtime syntax passed. |
2121
| `node --check toolbox/project-journey/project-journey-mock-repository.js` | PASS | Project Journey mock DB syntax passed. |
22-
| `node --check admin/db-viewer.js` | PASS | Admin DB Viewer syntax passed. |
22+
| `node --check admin/db-viewer.js` | PASS | DB Viewer syntax passed. |
2323
| `node --check tests/playwright/tools/ProjectJourneyTool.spec.mjs` | PASS | Project Journey Playwright spec syntax passed. |
24-
| `node --check tests/playwright/tools/AdminDbViewer.spec.mjs` | PASS | Admin DB Viewer Playwright spec syntax passed. |
25-
| `npx playwright test tests/playwright/tools/ProjectJourneyTool.spec.mjs tests/playwright/tools/AdminDbViewer.spec.mjs --project=playwright --workers=1 --reporter=list` | PASS | 12 passed in 32.7s. |
26-
| `npm run test:playwright:static -- --targets admin/db-viewer.html,admin/db-viewer.js,admin/notes.html,admin/tools-progress.html,assets/theme-v2/css/panels.css,assets/theme-v2/css/tables.css,assets/theme-v2/js/gamefoundry-partials.js,assets/theme-v2/partials/header-nav.html,toolbox/project-journey/index.html,toolbox/project-journey/project-journey.js,toolbox/project-journey/project-journey-mock-repository.js,tests/playwright/tools/AdminDbViewer.spec.mjs,tests/playwright/tools/ProjectJourneyTool.spec.mjs` | PASS | Static-only lane runner completed for changed files. Generated generic cache reports were restored out of the PR diff. |
27-
| custom changed-file guard scan | PASS | Confirmed no archive/start_of_day paths, no CSS outside Theme V2, no inline styles, no style blocks, no inline scripts, and no inline event handlers in changed HTML. |
28-
| `git diff --check` | PASS | No whitespace errors; Git reported line-ending normalization warnings only. |
29-
30-
## Runtime Coverage
31-
32-
- Verified selected Project Journey Navigation state is visually obvious.
33-
- Verified Summary Table column order and sorting for every column asc/desc.
34-
- Verified Summary Table uses 100% available width with reusable Theme V2 fixed table behavior.
35-
- Verified Add Note adds a Summary Table row and selects the new note.
36-
- Verified note Type dropdown uses custom note types from Add Note Type.
37-
- Verified first item added to an empty note is user-created and editable.
38-
- Verified System Guidance wraps and uses available width.
39-
- Verified system-created items remain protected, template-backed, and non-deletable.
40-
- Verified user-created items remain editable/deletable with confirmation behavior.
41-
- Verified DB Viewer is admin-only, read-only, shows tables/records/relationships, and reports no seeded missing links/table bleed.
24+
| `node --check tests/playwright/tools/AdminDbViewer.spec.mjs` | PASS | DB Viewer Playwright spec syntax passed. |
25+
| `npx playwright test tests/playwright/tools/ProjectJourneyTool.spec.mjs tests/playwright/tools/AdminDbViewer.spec.mjs --reporter=list` | PASS | 12 passed in 29.4s. |
26+
| `npm run test:playwright:static -- --static-report docs_build/dev/reports/static_validation_report.md` | PASS | Static-only lane runner completed; auxiliary static cache report churn was restored out of the PR diff. |
27+
28+
## Targeted Runtime Coverage
29+
30+
- Verified Mock DB Project Journey Tables uses the reusable tools template page structure.
31+
- Verified the DB dump remains human-readable and read-only.
32+
- Verified the Statistics divider appears between Total and Not Started.
33+
- Verified the existing manual Status Legend layout and dynamic legend wiring remain intact.
34+
- Verified obsolete `statusLegend` code was not removed because the current legend element still uses it.
35+
- Verified System Generated filtering shows system-created items and excludes user-created items.
36+
- Verified Note Tree rows keep status, title, forge-bot, and trashcan controls on one line.
37+
- Verified Note Tree content is left-justified and constrained to the reusable 90 percent row-width class.
38+
- Verified Item Details uses the standard tool form table with the label left of `journeyItemDetailsInput`.
4239

4340
## Skipped Lanes
4441

4542
- Full samples smoke was skipped because samples were explicitly out of scope.
46-
- Broad tool/runtime lanes were skipped because targeted Project Journey, Project Workspace handoff, Toolbox registration, Admin DB Viewer, and changed-file/static validation covered the changed surfaces.
43+
- Broad runtime lanes were skipped because the targeted Project Journey, DB Viewer, handoff, registration, and static lanes covered the changed surfaces.

‎tests/playwright/tools/AdminDbViewer.spec.mjs‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,14 @@ test("Admin DB Viewer shows read-only mock DB tables and diagnostics", async ({
5656
const failures = await openRepoPage(page, "/admin/db-viewer.html");
5757

5858
try {
59-
await expect(page.getByRole("heading", { name: "DB Viewer" })).toBeVisible();
59+
await expect(page.getByRole("heading", { name: "Mock DB Project Journey Tables" })).toBeVisible();
6060
await expect(page.locator("[data-admin-only='true']")).toHaveCount(1);
6161
await expect(page.locator("style, [style], script:not([src])")).toHaveCount(0);
6262
await expect(page.locator("nav.nav-links a[data-route='admin-db-viewer']")).toHaveText("DB Viewer");
63-
await expect(page.locator(".side-menu a.active")).toHaveText("DB Viewer");
63+
await expect(page.locator(".tool-workspace--wide")).toBeVisible();
64+
await expect(page.locator(".tool-workspace--wide > .tool-column")).toHaveCount(2);
65+
await expect(page.locator("#toolDisplayMode")).toBeVisible();
66+
await expect(page.locator("[data-admin-db-viewer].tool-center-panel")).toBeVisible();
6467
await expect(page.locator("[data-admin-db-status]")).toHaveText("Read-only mock DB dump loaded for Demo Project.");
6568

6669
await expect(page.locator("[data-admin-db-table='project_journey_items']")).toBeVisible();

0 commit comments

Comments
 (0)