IS-11630 DevOps Dashboard plugin: page structure and a static Database Clients section (M2a)

[aleixsuau]

Part of IS-11630 (DevOps Dashboard 2). Stacked on #277 — review only this PR's four commits.

Start here: Backstage in five minutes — a short intro to the framework built from this plugin's own code (Angular analogies included). It ships in this PR and makes the rest of the diff read itself.

What this adds

The devops-dashboard frontend plugin, with:

• A DevOps Dashboard page and its sidebar entry.
• A Database Clients tab that renders a static mock of the section, built with Backstage UI components. The rows are hard-coded; only the search works (client-side). The mock settles the section's shape before the data layer lands (M2b/M3).
• e2e tests (Playwright) that sign in through Curity for real and assert the page structure. This is also the first automated coverage of the M1 sign-in flow.
• A Backstage intro doc (docs/backstage-intro.md) — the team's five-minute onboarding to the frontend system; the app and repo READMEs link to it.

Review by commit

1. Add the devops-dashboard plugin… — scaffold output plus the page/sub-page structure (no demo code committed).
2. Add e2e coverage… — Playwright specs + shared signInToCurity helper; ignoreHTTPSErrors is needed because the dev Curity TLS certs are self-signed.
3. Mock the Database Clients section… — the static section, the i18n dictionary, and the reusable matchesIdOrName search util.
4. Add a Backstage intro doc… — the onboarding doc plus README pointers (docs only, no code).

How to test

Prerequisites are the same as #277 (dev server running with the devops_dashboard_backstage client registered, LWA vite server on 8443).

cd src/devops-dashboard-backstage-app
yarn install
git apply dev-secrets.patch   # creates the gitignored app-config.local.yaml
yarn start

Open http://localhost:3000/devops-dashboard — sign-in starts automatically; the Database Clients tab shows the mock (three rows, working search).

Run the e2e tests against the running app:

yarn test:e2e

(If you moved the app to another port in app-config.local.yaml, pass it: PLAYWRIGHT_URL=http://localhost:<port> yarn test:e2e.)

[Copilot]

Pull request overview

Adds a new Backstage devops-dashboard frontend plugin to the DevOps Dashboard Backstage app, including initial page/tab structure, a static “Database Clients” mock section, and Playwright e2e coverage for the Curity sign-in + page rendering flow.

Changes:

• Introduces the @internal/backstage-plugin-devops-dashboard plugin with a DevOps Dashboard page and a “Database Clients” sub-page/tab.
• Implements a static mock Database Clients table using @backstage/ui Table + useTable, including client-side search and i18n messages.
• Adds Playwright e2e tests and shared Curity sign-in helper; updates Playwright config to support port overrides and self-signed TLS in the sign-in popup.

Reviewed changes

Copilot reviewed 18 out of 19 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/devops-dashboard-backstage-app/yarn.lock	Adds workspace plugin and related dev/test dependencies to the lockfile.
src/devops-dashboard-backstage-app/plugins/devops-dashboard/src/utils/matchesIdOrName.ts	Adds a reusable client-side search helper for table search.
src/devops-dashboard-backstage-app/plugins/devops-dashboard/src/setupTests.ts	Sets up Testing Library jest-dom matchers for plugin tests.
src/devops-dashboard-backstage-app/plugins/devops-dashboard/src/routes.ts	Declares route refs for the plugin’s root page and DB clients sub-page.
src/devops-dashboard-backstage-app/plugins/devops-dashboard/src/plugin.tsx	Defines the plugin, page blueprint, and sub-page blueprint wiring.
src/devops-dashboard-backstage-app/plugins/devops-dashboard/src/plugin.test.ts	Adds a minimal unit test to ensure the plugin exports successfully.
src/devops-dashboard-backstage-app/plugins/devops-dashboard/src/index.ts	Exports the plugin as the package default export for discovery.
src/devops-dashboard-backstage-app/plugins/devops-dashboard/src/i18n/index.ts	Introduces the translation ref and message dictionary for user-facing text.
src/devops-dashboard-backstage-app/plugins/devops-dashboard/src/components/DbClientsSection/index.ts	Exports the Database Clients section component.
src/devops-dashboard-backstage-app/plugins/devops-dashboard/src/components/DbClientsSection/DbClientsSection.tsx	Implements the static Database Clients mock UI (table + search + description).
src/devops-dashboard-backstage-app/plugins/devops-dashboard/README.md	Documents plugin purpose, requirements, and installation steps.
src/devops-dashboard-backstage-app/plugins/devops-dashboard/package.json	Adds the plugin package manifest and Backstage plugin metadata.
src/devops-dashboard-backstage-app/plugins/devops-dashboard/e2e-tests/plugin.test.ts	Adds e2e coverage for the plugin page, tab, searchbox, and table row header.
src/devops-dashboard-backstage-app/plugins/devops-dashboard/dev/index.tsx	Adds a dev app entry to run the plugin in isolation via frontend dev utils.
src/devops-dashboard-backstage-app/plugins/devops-dashboard/.eslintrc.js	Adds standard Backstage CLI ESLint config for the plugin package.
src/devops-dashboard-backstage-app/playwright.config.ts	Updates Playwright config to honor PLAYWRIGHT_URL and ignore self-signed TLS errors.
src/devops-dashboard-backstage-app/packages/app/package.json	Adds the plugin dependency to the host Backstage app package.
src/devops-dashboard-backstage-app/packages/app/e2e-tests/app.test.ts	Updates app e2e test to authenticate through Curity before assertions.
src/devops-dashboard-backstage-app/e2e-test-utils.ts	Adds a shared signInToCurity helper for Playwright tests.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.