M8F-288: Display tenant name prominently in SideNav using Business icon

[sonal-aot]

JIRA Ticket

M8F-288

Description

Display the current tenant prominently in the sidebar so users can quickly identify which tenant context they are operating in. A business icon and the tenant name (sourced from the m8flow_tenant_name claim in the Keycloak JWT via UserService.getTenantName()) are now rendered directly under the m8flow logo in the expanded side navigation, in the format <business icon> Tenant: <tenant-name>.

The row is only shown when:

• The side nav is expanded (hidden in collapsed mode to avoid clutter)
• A tenant name is present on the decoded ID token

Type

• Feature
• Bug fix
• Documentation
• Other

Changes

• Backend
• Frontend
• Documentation

Files modified:

• m8flow-frontend/src/components/SideNav.tsx
  • Imported the Business icon from @mui/icons-material.
  • Added a tenant row beneath <SpiffLogo /> showing <Business /> Tenant: {tenantId}, using the existing t("tenant") translation key (already localized in en/es/fr/de/pt/cs/fi/zh).
  • Capitalized tenant name via textTransform: "capitalize" and styled with text.secondary color for a subtle, hierarchy-aware look.

Testing

• Log in as a user whose JWT carries m8flow_tenant_name — verify the tenant row renders under the logo.
• Collapse the sidebar — verify the tenant row hides along with the logo.
• Log in as a user with no tenant claim — verify nothing renders (no empty "Tenant:" row).
• Switch languages (e.g., to es) — verify the label changes to the localized term (e.g., "Inquilino").
• Toggle dark mode — verify the icon and text remain legible.

Related Issues

Closes #M8F-288

[github-actions]

PR Agent Review

Blocking issues

No blocking issues found in this diff.

Non-blocking suggestions

• Potential UX/text rendering issue: textTransform: "capitalize" on the tenant value may alter the displayed tenant ID/name (e.g., acme-corp -> Acme-corp, ABC -> Abc). If tenantId is an identifier, this can be misleading. Consider applying capitalization only to the localized label (t("tenant")) or removing capitalization entirely.
• i18n formatting: "{t("tenant")}: {tenantId}" hardcodes punctuation/order. For better localization, consider a single translation key with interpolation, e.g. t("tenantWithValue", { tenant: tenantId }).
• Long value handling: If tenantId can be long, this may overflow/clutter the nav header. Consider adding truncation styles (maxWidth, overflow: hidden, textOverflow: "ellipsis", whiteSpace: "nowrap").

Recommended tests

• Add/adjust component tests for conditional rendering:
  • Renders tenant row when tenantId is present (data-testid="nav-tenant-name" exists).
  • Does not render tenant row when tenantId is absent/falsy.
• Add a test ensuring the label/value are displayed as expected (including not unintentionally mutating tenant casing if you remove capitalize).
• Add a visual/regression test (or snapshot) for long tenant IDs to verify layout doesn’t break in the SideNav header.

Generated by model gpt-5.3-codex on PR updates via OpenAI Responses API.