0049: frontend: Support distribution product versions

[illume]

Summary

Add an optional distribution product version for branded Headlamp builds while
retaining the underlying Headlamp version and Git commit in the version dialog.
The top-bar menu uses the distribution version when configured and keeps the
existing Headlamp version fallback otherwise.

This is independent and does not depend on another Headlamp PR.

Changes

• read REACT_APP_HEADLAMP_PRODUCT_VERSION through documented product-info
  helpers
• show distinct product and Headlamp versions only when they differ
• preserve the existing single-version dialog when the product version is
  absent or empty
• translate complete product-version labels with product-name interpolation
• widen the dialog so product labels and commit identifiers remain readable
• add focused unit and end-to-end coverage before the implementation commit

Improvements over the existing changes

The downstream patch covered only the configured helper value. This version
adds tests for configured, absent, empty, matching, distinct, and unnamed
products so fallback behavior is explicit and changed decision modules reach
92.85% branch coverage. It also centralizes the top-bar fallback in
getDisplayVersion, translates labels without assuming English word order,
extracts the new keys across all 18 locale catalogs, adds TSDoc for the new
TypeScript API, verifies the user-visible dialog path in the e2e suite, and
widens the dialog because the added labels otherwise broke in the middle of
words.

Source history

• Azure source PR: build: replace Headlamp submodule with source package Azure/aks-desktop#823
• Original About-dialog commit:
  Azure/aks-desktop@d68693b
• Original top-bar commit:
  Azure/aks-desktop@067bf68
• The existing Headlamp version dialog originated in:
  Show build version on frontend #640

The two original Azure commits are in rebased downstream history without an
originating Azure merge PR association, so unrelated PRs that later inherited
the commits are intentionally not listed.

Testing

• npm test -- --run (213 files, 2,791 tests passed)
• focused Istanbul coverage: 92.85% branches overall; 100% for
  getProductInfo.ts; 91.66% for VersionDialog.tsx
• npm run tsc
• npm run build
• focused ESLint and Prettier checks
• npx playwright test tests/headlamp.spec.ts --list (14 tests discovered,
  including the new version-dialog test)
• Storybook before/after verification at 960 x 640

The Playwright test was compiled and discovered locally but not executed because
no Headlamp server was running and the local test Kubernetes API endpoint was
unavailable. CI provides the required e2e environment.

Screenshots

Before

After: configured distribution version

Assisted by copilot

[kubernetes-prow]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: illume

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [illume]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[Copilot]

Pull request overview

Adds distribution-specific product versions while retaining Headlamp build details.

Changes:

• Adds product-version helpers and top-bar fallback behavior.
• Displays distinct product and Headlamp versions in a wider dialog.
• Adds unit, snapshot, and end-to-end coverage.

Two issues remain: empty product versions behave inconsistently, and the generic product label bypasses localization. Automated checks passed.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
frontend/src/helpers/getProductInfo.ts	Adds product and display-version helpers.
frontend/src/helpers/getProductInfo.test.ts	Tests helper behavior.
frontend/src/components/App/VersionDialog.tsx	Displays product and Headlamp versions.
frontend/src/components/App/VersionDialog.test.tsx	Tests dialog variants.
frontend/src/components/App/TopBar.tsx	Uses the display version.
frontend/src/components/App/TopBar.test.tsx	Updates helper mocks.
frontend/src/components/App/__snapshots__/VersionDialog.VersionDialog.stories.storyshot	Records the wider dialog.
e2e-tests/tests/headlamp.spec.ts	Verifies the version-dialog path.

---

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