Feat(size/XXL):BRU 3571 - Overview revamp#45
Conversation
…RU-3572) Structure + naming only — no behavior, props, or visual change. Adopts the house convention from PR opencollection-dev#45 (each component a folder with <Name>.tsx + <Name>.spec.tsx + StyledWrapper.ts + index.ts; pure utils in src/utils; hooks in src/hooks; shared glyphs in src/assets/icons.tsx). Moves: - Promote shared primitives to top-level src/components/: IconButton/, InitialsAvatar/, OpenInBrunoButton/ (reusable across lanes). - Keep Topbar/, Topbar/Brand/, Topbar/MobileOverflow/ as their own folders. - Split the single Topbar/StyledWrapper.ts into per-component StyledWrapper.ts. - Pure utils -> src/utils: buildBrunoDeepLink, getInitials (+ .spec.ts). - Hooks -> src/hooks: useTopbarLayout, useCanRunBrunoApp (+ .spec.ts). - Raw glyphs -> src/assets/icons.tsx (SearchIcon, HamburgerIcon, OverflowIcon, BrunoGlyph). Matches PR opencollection-dev#45's icons.tsx style/baseIconProps; see the file's reconciliation note for the (mechanical) merge with opencollection-dev#45's glyph set. - *.test.ts -> *.spec.ts(x); add a colocated render spec per component. IconButton consolidation: - Single canonical src/components/IconButton/ (icon-only button primitive, aria-label required). Removed the duplicate, unused IconButton from ui/MinimalComponents.tsx (the other exports there are untouched) and the local copy in Topbar/icons.tsx. All callers import the shared path. Dev scaffolding removed from shipped src/ + package root: deleted src/topbarHarness.tsx, src/deviceCheck.tsx, topbar-harness.html, topbar-device-check.html. The e2e harness is now gated behind dev.tsx (?view=topbar-harness); e2e navigates there instead of the html. Public API unchanged: Topbar still exports from src/components/Topbar (index.ts re-export) for BRU-3188. OpenCollection updated to import buildBrunoDeepLink from src/utils. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
There was a problem hiding this comment.
This file will eventually becomes large and less readable. Lets split it up based on sections of the page.
// folder structure
e2e/
├── tests/
├── pages/
│ ├── BasePage.ts
├── locators/
│ ├── headers.locators.ts
│ └── environments.locators.ts
│ └── locators.locators.ts // common, also exports all locators, like an index file
├── utils/
│ ├── helpers.ts
│ └── api-client.ts
// index locator
import { Page } from '@playwright/test';
import { buildOverviewHeaderLocators } from './header.builder';
export const buildOverviewLocators = (page: Page) => {
const root = () => page.getByTestId('overview');
// build the sub-builder once
const header = buildOverviewHeaderLocators(page);
return {
/** The Overview page root. */
root,
/** Headline: version label + collection name. */
header,
};
};
There was a problem hiding this comment.
Delete all the skipped sections since they are no longer present and when reintroduced it will be a revamped version which requires full rework
There was a problem hiding this comment.
Move icons to own files. Finally all icons can be exported from a single file as well as independently.
There was a problem hiding this comment.
For consistency with existing folder file structure, we don't need index.ts file inside component folders.
Be consistent with ComponentName/ComponentName.ts pattern.
| {/* <div className="all-endpoints-view h-full overflow-y-auto" style={{ maxWidth: '100%' }}> */} | ||
| {/* Render all collection items */} | ||
| {allItems.map((item, index) => { | ||
| {/* {allItems.map((item, index) => { |
There was a problem hiding this comment.
Are these commented code very soon to be added back. If not, please remove it from the codebase to clean it up
…U-3572) Team standard (reversed from the earlier 4-file pattern): component folders have no index.ts barrel; consumers import the concrete file directly. - Delete the 6 barrels this PR added: Topbar/, Topbar/Brand/, Topbar/MobileOverflow/, IconButton/, InitialsAvatar/, OpenInBrunoButton/. - Repoint every importer at the concrete module (e.g. '../Topbar' -> '../Topbar/Topbar', '../IconButton' -> '../IconButton/IconButton'), switching the barrel's named re-exports back to the components' default exports. Touches Topbar.tsx, Brand.tsx, MobileOverflow.tsx, OpenCollection.tsx (mount) and dev.tsx (harness). Behavior/visual unchanged. icons split + e2e locators restructure deferred to mirror PR opencollection-dev#45 once it lands (icons.tsx already notes the reconciliation). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Problem
The collection landing is minimal. The collection docs, summary stats, environments, collection configuration, and version metadata aren't presented as a proper overview.
Proposed Solution
A collection overview page with the collection docs (markdown), summary stats (endpoint, resource-group, and environment counts), the environments list (marking the default and showing each variable count), version metadata, and a Collection Configuration section grouping the collection-root headers, auth, script, variables, and tests. The configuration layout mirrors the request and folder pages.
https://usebruno.atlassian.net/browse/BRU-3571