Skip to content

Feat(size/XXL):BRU 3571 - Overview revamp#45

Open
sachin-bruno wants to merge 9 commits into
opencollection-dev:mainfrom
sachin-bruno:sachin-bruno/feat-BRU-2571-Overview-revamp
Open

Feat(size/XXL):BRU 3571 - Overview revamp#45
sachin-bruno wants to merge 9 commits into
opencollection-dev:mainfrom
sachin-bruno:sachin-bruno/feat-BRU-2571-Overview-revamp

Conversation

@sachin-bruno

@sachin-bruno sachin-bruno commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

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

image

sundram-bruno added a commit to sundram-bruno/opencollection that referenced this pull request Jun 17, 2026
…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>
@sachin-bruno sachin-bruno changed the title Feat(size/XXL):BRU 2571 - Overview revamp Feat(size/XXL):BRU 3571 - Overview revamp Jun 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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,
  };
};

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Delete all the skipped sections since they are no longer present and when reintroduced it will be a revamped version which requires full rework

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move icons to own files. Finally all icons can be exported from a single file as well as independently.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For consistency with existing folder file structure, we don't need index.ts file inside component folders.
Be consistent with ComponentName/ComponentName.ts pattern.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can be deleted

{/* <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) => {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these commented code very soon to be added back. If not, please remove it from the codebase to clean it up

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can be deleted

sundram-bruno added a commit to sundram-bruno/opencollection that referenced this pull request Jun 20, 2026
…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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants