refactor: admin workspace screens compose layout containers instead of Box

Approval required
JU
2d ago
+501-208

Proposed changes (including videos or screenshots)

ARCH-2592
Follows #43159 (Text). Independent of the account migration in #43160: it branches off develop.

The screens under views/admin/workspace stop laying themselves out with raw Box. The raw layout count drops from 1143 to 1104, and the CI limit drops with it.

  • Card sections no longer use Margins. #43159 left WorkspaceCardSection as a Box because the cards spaced it with <Margins blockEnd>, which only reaches a Box. The space now comes from the parent:
    • WorkspaceCardSection takes a title and lays out the heading and its rows itself.
    • Deployment's label and value pairs get their own component, WorkspaceCardDetail.
    • layout/WorkspaceCardSections spaces the sections apart and keeps the space the old margins left above the controls.
  • Local containers in layout/ folders: WorkspaceCardSections and StatusBulletSlot for the cards, VersionCardSkeletonRow for the version card's loading state, DescriptionListFrame for the instances modal, and RegistrationProse, FeatureBullet, RegistrationAccountNote and ModalFooterNote for the registration modals. None of them repeats in another area yet, so none moves to client/components.
  • Spacing between blocks comes from Stack gaps. Text uses Text. The "Learn more" footer of the registration modal uses ModalFooter justify='space-between'.
  • Headings: the card group titles (Deployment, Users, Types, Uploads, Total rooms, Messages) are now h3 elements, at the same level as the version card's title. They look the same.
  • New stories cover states the local app rarely shows: the users and uploads card, the version card's skeleton and action items, and the five registration modals.

Visual changes:

  • Workspace page inset (own commit, below the refactor): the content sits 24px from the edges instead of 16px, like Subscription, Settings, AI Center and Engagement, so the cards line up with the page title. The 16px gutter between cards is unchanged.

  • Token registration modal: "cloud.rocket.chat > Workspaces" and "Register self-managed" are bold at 700 instead of 600. No font scale has a 600 weight. The closest one is p2b, which the email in step two of the same flow already uses.

No change expected: the workspace page (version card, deployment, users and uploads, rooms and messages cards, and the multiple-instances warning), the instances modal, and the registration, registered, setup step one and step two modals.

Visual check: before/after screenshots of the running app: the refactor commits leave the workspace page (1440px and 800px) and the instances modal identical; the inset commit moves the cards 8px in on each side, matching the Subscription page edge for edge. The token modal's bold weight could not be captured, because the local workspace is registered; it is the second visual change in this pull request.

The two step paragraphs of the token modal set fontScale='p2' themselves instead of inheriting it from the modal, so a change to the modal's text size doesn't reach them.

Issue(s)

Part of the screen layout migration (#43056).

Steps to test or reproduce

  • node scripts/scan-raw-layout.mjs --max 1104
  • Administration › Workspace (/admin/info), at wide and narrow widths. Open Instances in the deployment card.
  • On an unregistered workspace, click Register workspace in the version card. Then open Use token, and Register workspace › step one.
  • Storybook: views/admin/workspace/** for the skeleton, step two and the registered modal.

Further comments

The other layout migration pull requests each lower the same --max line in ci-code-check.yml and prune scripts/spacing-scale/baseline.json. Whichever merges second rebases and takes the lower count.

The "Resend" and "change email" links in step two of the setup modal stay <Box is='a'>. They have an onClick and no href. As plain <a> elements they fail jsx-a11y/anchor-is-valid, and they can't be reached by keyboard. Turning them into buttons will be its own pull request.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Style
    • Refined the layout and typography across admin workspace cards, deployment details, and workspace registration screens. Existing workspace information, registration steps, and actions remain available.
    • Improved the presentation of workspace statistics, status details, and modal content for a more consistent experience.