plugins/aks-desktop: i18n: Add missing translations#416
Conversation
illume
force-pushed
the
msi18n
branch
3 times, most recently
from
7b2019c to
a4702c0
Compare
There was a problem hiding this comment.
Pull request overview
This PR expands i18n coverage in plugins/aks-desktop by wrapping user-facing strings with useTranslation().t() and updates locale JSON files accordingly, while also reducing screen reader noise by hiding decorative icons inside button controls.
Changes:
- Wrapped UI strings (labels, tooltips, aria-labels, placeholders, alerts) across components/hooks with
t(), and updated hook dependency arrays wheretis referenced. - Added/moved translation keys across
plugins/aks-desktop/locales/*/translation.json(including English source strings inen). - Added
aria-hidden="true"to many decorative Iconify icons within buttons/icon buttons.
Reviewed changes
Copilot reviewed 46 out of 46 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| plugins/aks-desktop/src/hooks/useAzureContext.ts | Localizes Azure context error strings and adds t to effect deps. |
| plugins/aks-desktop/src/hooks/useAzureContext.test.ts | Mocks useTranslation for updated hook behavior. |
| plugins/aks-desktop/src/components/Scaling/hooks/useDeployments.ts | Localizes error string and adds t to effect deps. |
| plugins/aks-desktop/src/components/Scaling/hooks/useDeployments.test.ts | Extends Headlamp mock to include useTranslation. |
| plugins/aks-desktop/src/components/MetricsTab/MetricsTab.tsx | Localizes “Metrics Unavailable” alert title. |
| plugins/aks-desktop/src/components/Logo/Logo.tsx | Localizes the logo aria-label. |
| plugins/aks-desktop/src/components/GitHubPipeline/hooks/useDeploymentHealth.ts | Localizes watcher error strings and adds t to effect deps. |
| plugins/aks-desktop/src/components/GitHubPipeline/components/WorkloadIdentitySetup.tsx | Localizes UI strings and hides decorative startIcons. |
| plugins/aks-desktop/src/components/GitHubPipeline/components/WizardShell.tsx | Localizes wizard shell text and hides decorative close icon. |
| plugins/aks-desktop/src/components/GitHubPipeline/components/RepoSelector.tsx | Localizes placeholders/errors and adds t to callback deps. |
| plugins/aks-desktop/src/components/GitHubPipeline/components/PipelineConfiguredScreen.tsx | Localizes status copy while preserving <strong> formatting. |
| plugins/aks-desktop/src/components/GitHubPipeline/components/PRStatusScreen.tsx | Localizes status screen text, elapsed time formatting, and button labels. |
| plugins/aks-desktop/src/components/GitHubPipeline/components/GitHubAuthStatusButton.tsx | Localizes tooltip/button strings and hides decorative GitHub icons. |
| plugins/aks-desktop/src/components/GitHubPipeline/components/DeploymentStatusScreen.tsx | Localizes stage labels, status copy, and hides decorative icons in controls. |
| plugins/aks-desktop/src/components/GitHubPipeline/components/ConnectSourceStep.tsx | Localizes auth/permissions copy and hides decorative icons in controls. |
| plugins/aks-desktop/src/components/GitHubPipeline/GitHubPipelineWizard.tsx | Localizes loading/error UI strings and hides decorative startIcon. |
| plugins/aks-desktop/src/components/Deployments/hooks/usePipelineRuns.ts | Localizes error string and adds t to callback deps. |
| plugins/aks-desktop/src/components/Deployments/PipelineCard.tsx | Localizes pipeline card copy, tooltips, and aria-labels. |
| plugins/aks-desktop/src/components/DeployWizard/components/ConfigureContainer.tsx | Localizes labels/aria-labels/tooltips and hides decorative info icons (most cases). |
| plugins/aks-desktop/src/components/DeployTab/hooks/useClusterDeployStatus.ts | Localizes watcher error strings and adds t to effect deps. |
| plugins/aks-desktop/src/components/DeployTab/components/PipelineDeployDialog.tsx | Localizes dialog content and hides decorative icons. |
| plugins/aks-desktop/src/components/DeployTab/components/ClusterDeployCard.tsx | Localizes table headers/actions and hides decorative icons. |
| plugins/aks-desktop/src/components/DeployTab/DeployTab.tsx | Localizes empty/heading text. |
| plugins/aks-desktop/src/components/CreateAKSProject/components/ClusterConfigurePanel.tsx | Localizes cluster configuration UI/errors and adds t to callback deps. |
| plugins/aks-desktop/src/components/CreateAKSProject/components/ClusterConfigurePanel.test.tsx | Mocks useTranslation for updated component behavior. |
| plugins/aks-desktop/src/components/CreateAKSProject/components/AccessStep.tsx | Localizes email placeholder. |
| plugins/aks-desktop/src/components/ConfigurePipeline/ConfigurePipelineButton.tsx | Localizes button/loading text and hides decorative icon. |
| plugins/aks-desktop/locales/zh-Hant/translation.json | Adds/moves keys used by newly localized UI strings. |
| plugins/aks-desktop/locales/zh-Hans/translation.json | Adds/moves keys used by newly localized UI strings. |
| plugins/aks-desktop/locales/tr/translation.json | Adds/moves keys used by newly localized UI strings. |
| plugins/aks-desktop/locales/sv/translation.json | Adds/moves keys used by newly localized UI strings. |
| plugins/aks-desktop/locales/ru/translation.json | Adds/moves keys used by newly localized UI strings. |
| plugins/aks-desktop/locales/pt-PT/translation.json | Adds/moves keys used by newly localized UI strings. |
| plugins/aks-desktop/locales/pt-BR/translation.json | Adds/moves keys used by newly localized UI strings. |
| plugins/aks-desktop/locales/pl/translation.json | Adds/moves keys used by newly localized UI strings. |
| plugins/aks-desktop/locales/nl/translation.json | Adds/moves keys used by newly localized UI strings. |
| plugins/aks-desktop/locales/ko/translation.json | Adds/moves keys used by newly localized UI strings. |
| plugins/aks-desktop/locales/ja/translation.json | Adds/moves keys used by newly localized UI strings. |
| plugins/aks-desktop/locales/it/translation.json | Adds/moves keys used by newly localized UI strings. |
| plugins/aks-desktop/locales/id/translation.json | Adds/moves keys used by newly localized UI strings. |
| plugins/aks-desktop/locales/fr/translation.json | Adds/moves keys used by newly localized UI strings. |
| plugins/aks-desktop/locales/es/translation.json | Adds/moves keys used by newly localized UI strings. |
| plugins/aks-desktop/locales/en/translation.json | Adds English source strings for newly localized UI. |
| plugins/aks-desktop/locales/de/translation.json | Adds/moves keys used by newly localized UI strings. |
| plugins/aks-desktop/locales/cs/translation.json | Adds/moves keys used by newly localized UI strings. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
illume
changed the title
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 46 out of 46 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 46 out of 46 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
illume
force-pushed
the
msi18n
branch
2 times, most recently
from
b6d8e15 to
32510bc
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 46 out of 46 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 48 out of 48 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
illume
changed the title
illume
changed the title
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 50 out of 50 changed files in this pull request and generated 2 comments.
Comments suppressed due to low confidence (1)
plugins/aks-desktop/src/components/GitHubPipeline/components/WizardShell.tsx:100
getStepLabels(t)returns translated strings, and the stepper uses those translated labels as React keys (key={label}). Keys should be stable and not depend on locale/translation (translations can change or collide), otherwise React may remount steps unexpectedly or warn about duplicate keys. Consider mapping over a stable list of step IDs (e.g., ['connect-source', ...]) and deriving the translated label separately, using the ID as the key.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 50 out of 50 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (1)
plugins/aks-desktop/src/components/GitHubPipeline/components/DeploymentStatusScreen.tsx:173
getWorkflowBadgeLabel(...)returns hard-coded English status strings (e.g., "Succeeded", "Failed", "Running"), but the value is rendered directly as the Chip label and is not passed throught(). Those labels won’t be translatable / extracted by the i18n tooling. Consider either (a) changinggetWorkflowBadgeLabelto accepttand return translated labels, or (b) returning stable i18n keys fromgetWorkflowBadgeLabeland translating at the call site (and adding the keys to the locale JSON files).
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
|
rebased against main |
Description
Wraps all hard-coded user-facing strings in the
plugins/aks-desktopfolder withuseTranslationt()for i18n support. Covers aria-labels, tooltips, placeholders, JSX text content, status labels, and error messages across components and hooks. Preserves existing JSX formatting (<code>,<strong>) for technical identifiers and emphasized text by translating surrounding text fragments separately. Addsaria-hidden="true"to all decorative Iconify icons inside buttons and icon buttons to prevent screen reader noise. Ensurestis included in alluseEffect/useCallbackdependency arrays where it is referenced.Several components used the t(variable) anti-pattern — passing dynamically-referenced strings through t() (e.g., t(phase.label), t(stage.label), t(health.label)) — which the i18next-parser can't statically extract. All 11 instances across 9 source files have been refactored so that every t() call now uses a string literal argument, making all translation keys visible to the static extraction tool (npm run i18n).
Type of Change
Related Issues
Changes Made
Components (21 files):
Logo.tsx— aria-labelDeployTab.tsx,ClusterDeployCard.tsx,PipelineDeployDialog.tsx— table headers, buttons, alerts, tooltips, dialog title;<strong>formatting preserved for workflow filename and repo name;aria-hidden="true"on decorative icons (pencil, open-in-new, replay, rocket-launch)PipelineCard.tsx— card text, button, tooltip, aria-labelWizardShell.tsx— step labels (translated at render viat(label)), aria-label, heading, alert; addedaria-hidden="true"to decorative close iconGitHubAuthStatusButton.tsx— tooltip titles (includingt('GitHub: {{username}}', { username })interpolation), button text, fallback text;aria-hidden="true"on both GitHub startIconsConnectSourceStep.tsx,RepoSelector.tsx— permissions, placeholders, aria-labels, template literals converted tot()interpolation;aria-hidden="true"on open-in-new startIcon;tadded touseCallbackdependency array forfetchReposDeploymentStatusScreen.tsx— stage labels, namespace/pipeline labels, pod status with proper singular/plural handling, buttons;aria-hidden="true"on open-in-new IconButton icon, open-in-new and refresh startIconsPipelineConfiguredScreen.tsx,PRStatusScreen.tsx— status titles, descriptions, elapsed time (including{{minutes}} mininterpolation);<strong>formatting preserved for repo name;aria-hidden="true"on open-in-new startIconWorkloadIdentitySetup.tsx— step labels, resource descriptions, alerts;<code>formatting preserved for owner/repo and branch identifiers;aria-hidden="true"on shield-check and refresh startIconsGitHubPipelineWizard.tsx— loading spinner messages, footer buttons, error fallback;aria-hidden="true"on robot-outline/source-pull startIconConfigurePipelineButton.tsx— button text;aria-hidden="true"on pipe startIconConfigureContainer.tsx— 5 aria-labels (using translated label in interpolation); technical placeholders (registry/image:tag,/healthz,/ready,/startup) kept as untranslated literals;aria-hidden="true"on all 5 decorative info icons inside IconButtonsAccessStep.tsx— placeholderClusterConfigurePanel.tsx— addon labels, alert titles, button states; network policy info preserved as JSX with<code>formatting; error messages use singlet()calls with{{error}}and{{addonKey}}interpolation;tadded touseCallbackdependency array forpollForCompletionMetricsTab.tsx— AlertTitleHooks (6 files):
useAzureContext.ts— error messages passed tosetError();tadded touseEffectdependency arrayuseDeploymentHealth.ts— error messages passed tosetError();tadded touseEffectdependency arrayusePipelineRuns.ts— error messages passed tosetError();tadded touseCallbackdependency arrayuseClusterDeployStatus.ts— error messages passed tosetError();tadded touseEffectdependency arrayuseDeployments.ts— error messages passed tosetError();tadded touseEffectdependency arrayRepoSelector.tsx(fetchReposcallback) — error message passed tosetError();tadded touseCallbackdependency arrayAccessibility improvements (16 files):
aria-hidden="true"to all decorative Iconify<Icon>components inside buttons, icon buttons, and tooltip-labeled controls where the parent element already provides the accessible name via button text, tooltip, or aria-labelConfigureContainer.tsx(CPU request, CPU limit, memory request, memory limit, target CPU utilization), pipe icon inConfigurePipelineButton.tsx, and rocket-launch icon inClusterDeployCard.tsxTesting
Test Cases
npm run tsc— zero errorsnpm run lint— zero warningsnpm run format— all files formattedScreenshots/Videos
N/A — no visual changes; strings render identically via identity
t()in English locale and all JSX formatting (<code>,<strong>) is preserved.Checklist
Breaking Changes
None. All changes are additive — wrapping existing strings with
t()which returns the key as-is for the default (English) locale.Performance Impact
Documentation Updates