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

[sachin-bruno]

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

[bijin-bruno]

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

[sachin-bruno]

Done

[bijin-bruno]

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

[sachin-bruno]

Done

[bijin-bruno]

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

[sachin-bruno]

Done

[bijin-bruno]

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

[sachin-bruno]

Done

[bijin-bruno]

Can be deleted

[sachin-bruno]

Done

[bijin-bruno]

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

[sachin-bruno]

Done

[bijin-bruno]

can be deleted

[sachin-bruno]

Done

[bijin-bruno]

Let's move all these components under ../components/overview/*

[bijin-bruno]

1. Avoid obvious comments
2. This feels like over-engineering. We can simply expose a section.copyToClipboard() method on the section components that need this functionality. Creating separate section/component classes for simple one-off actions may add unnecessary abstraction.

[bijin-bruno]

Please add a line break above

[bijin-bruno]

reveal is only one side of the action. I think we should use toggleMasked/toggleReveal or some other better name

[bijin-bruno]

Please use // for single line comments and for multiline, use

/** 
 * multiline
 * comments
 */

[bijin-bruno]

Can we find any meaningful name other than markdown?
eg: docMarkdown etc

[bijin-bruno]

I think we can use a default testId as collection-config

export const CollectionConfiguration: React.FC<CollectionConfigurationProps> = ({
  ...
  testId = 'collection-config'
}) => {

[bijin-bruno]

Keep a default testId. Ref: https://github.com/opencollection-dev/opencollection/pull/45/changes#r3465243828
itemTestId can always be an internal extension.

itemTestId = ${testid}-<stat>

[bijin-bruno]

.stat:not(:first-child) { is more readable?

[bijin-bruno]

Can this be moved to ui?

[bijin-bruno]

Please verify light theme

[bijin-bruno]

For the sake of consistency let's kep the name as StyledWrapper and import the same

[bijin-bruno]

Please move this under src/components/CollectionStats