Dashboard: All strings displayed in the UI should be externalised

Created on 28 Aug 2019 · 4Comments · Source: tektoncd/dashboard

Expected Behavior

It should be possible to customise / translate all strings displayed in the UI (excluding user data or error messages provided by the environment).

Actual Behavior

Many strings are still hard-coded in the components instead of using react-intl.

Additional Info

We have begun extracting strings as described, this process should be completed and all new strings added using react-intl to avoid building up additional debt.

Some of the components that have been migrated to @tektoncd/dashboard-components have been partially updated and need to be revisited to ensure no hardcoded strings remain.

We also need to ensure the process for adding new strings is clearly documented in https://github.com/tektoncd/dashboard/blob/master/DEVELOPMENT.md or other appropriate location. Tooling should also be added to avoid manual steps to build the externalised list of current strings.

`@tektoncd/dashboard-components`

[x] ~~Breadcrumbs~~ (likely to be removed in design update, 'Import Tekton Resources' is the only string that would need to be extracted otherwise)
[x] CancelButton
[x] ErrorBoundary
[x] Header
[x] KeyValueList
[x] LabelFilter
[x] Log
[x] LogoutButton
[x] PageErrorBoundary
[x] PipelineResources
[x] PipelineRun
[x] PipelineRuns
[x] Rerun
[x] ResourceTable
[x] RunDropdown
[x] RunHeader
[x] Spinner
[x] Step
[x] StepDefinition
- Parameters, Input Resources, Output Resources
[x] StepDetails
[x] StepDetailsHeader
[x] StepStatus
[x] Tab
[x] Table
[x] Tabs
[x] Task
[x] TaskRuns
[x] TaskSkeleton
[x] TaskTree
[x] Trigger
[x] ViewYAML

`src/components`

[x] PipelineResourcesModal
- [x] GitResourceFields
- [x] UniversalFields
[x] SecretsDeleteModal
[x] SecretsModal
- [x] BasicAuthFields
- [x] UniversalFields
[x] TextInput
[x] TooltipDropdown

`src/containers`

[x] App
[x] ClusterTasks
[x] CreatePipelineRun
[x] CustomResourceDefinition
[x] EventListener
[x] EventListeners
[x] Extension
[x] Extensions
[x] ImportResources
[x] NamespacesDropdown
[x] PipelineResource
[x] PipelineResources
[x] PipelineResourcesDropdown
[x] PipelineResourcesModal
[x] PipelineRun
[x] PipelineRuns
[x] Pipelines
[x] PipelinesDropdown
[x] ResourceList
[x] Secrets
[x] SecretsModal
[x] ServiceAccount
[x] ServiceAccounts
[x] ServiceAccountsDropdown
[x] SideNav
- Tekton resources, Import Tekton resources
[x] TaskRun
[x] TaskRuns
[x] Tasks
[x] TriggerBinding
[x] TriggerBindings
[x] TriggerTemplate
[x] TriggerTemplates

Carbon components

Some Carbon components provide default strings internally, such as the '{n} rows selected' batch selection text on a DataTable. Translations for these strings can be overridden by providing a custom translateWithId function as a prop to these components, to convert the provided translationKeys into the desired string using any i18n library / approach.

[x] DataTable. Default implementation below:

const translationKeys = {
expandRow: 'carbon.table.row.expand',
collapseRow: 'carbon.table.row.collapse',
expandAll: 'carbon.table.all.expand',
collapseAll: 'carbon.table.all.collapse',
selectAll: 'carbon.table.all.select',
unselectAll: 'carbon.table.all.unselect',
selectRow: 'carbon.table.row.select',
unselectRow: 'carbon.table.row.unselect',
};

const defaultTranslations = {
/* NOT CURRENTLY USED IN DASHBOARD
[translationKeys.expandAll]: 'Expand all rows',
[translationKeys.collapseAll]: 'Collapse all rows',
[translationKeys.expandRow]: 'Expand current row',
[translationKeys.collapseRow]: 'Collapse current row',
*/
[translationKeys.selectAll]: 'Select all rows',
[translationKeys.unselectAll]: 'Unselect all rows',
[translationKeys.selectRow]: 'Select row',
[translationKeys.unselectRow]: 'Unselect row',
};

const translateWithId = id => defaultTranslations[id];

[x] TableBatchActions. Default implementation below:

const translationKeys = {
'carbon.table.batch.cancel': 'Cancel',
'carbon.table.batch.items.selected': 'items selected',
'carbon.table.batch.item.selected': 'item selected',
};

const translateWithId = (id, state) => {
if (id === 'carbon.table.batch.cancel') {
  return translationKeys[id];
}
return `${state.totalSelected} ${translationKeys[id]}`;
};

[x] ~~TableHeader for sort arrows, not currently used in dashboard~~ tracked in https://github.com/tektoncd/dashboard/issues/842
[x] ComboBox - passed to ListBox.Selection and ListBox.MenuIcon
[x] Dropdown - passed to ListBox.MenuIcon

[x] ListBoxMenuIcon

export const translationIds = {
'close.menu': 'close.menu',
'open.menu': 'open.menu',
};

const defaultTranslations = {
[translationIds['close.menu']]: 'Close menu',
[translationIds['open.menu']]: 'Open menu',
};

[x] ListBoxSelection

export const translationIds = {
'clear.all': 'clear.all',
'clear.selection': 'clear.selection',
};

const defaultTranslations = {
[translationIds['clear.all']]: 'Clear all selected items',
[translationIds['clear.selection']]: 'Clear selected item',
};

Source

AlanGreene

All 4 comments

Had a look through this one to check the latest status, so I see the following and updated checkboxes accordingly

https://github.com/tektoncd/dashboard/blob/master/src/containers/CreatePipelineRun/CreatePipelineRun.js now has lots of intl strings

https://github.com/tektoncd/dashboard/blob/master/src/containers/ImportResources/ImportResources.js looks good too

https://github.com/tektoncd/dashboard/blob/master/src/containers/NamespacesDropdown/NamespacesDropdown.js still needs work

https://github.com/tektoncd/dashboard/blob/master/src/containers/PipelineResourcesDropdown/PipelineResourcesDropdown.js ditto

https://github.com/tektoncd/dashboard/blob/master/src/containers/PipelineResourcesModal/PipelineResourcesModal.js done

https://github.com/tektoncd/dashboard/blob/master/src/containers/PipelinesDropdown/PipelinesDropdown.js needs work

https://github.com/tektoncd/dashboard/blob/master/src/containers/ResourceList/ResourceList.js needs work

https://github.com/tektoncd/dashboard/blob/master/src/containers/ServiceAccountsDropdown/ServiceAccountsDropdown.js needs work

a-roberts on 3 Mar 2020

👍1

we're nearly there

AlanGreene on 3 Mar 2020

@steveodonovan pointed out that we missed some strings in the Carbon DataTable that don't follow the standard process of passing them as props, added details to the end of the description. There are likely others, doing a quick scan of the Carbon repo now and will update the description with other matches.

AlanGreene on 3 Mar 2020

👍1

PR open for the last of the strings.

There are a few remaining strings that I've deliberately omitted:

'key' and 'value' placeholders on Create PipelineRun and Create TaskRun label inputs
'secret-name' placeholder on Create Secret (UniversalFields)
'username' placeholder on Create Secret (PasswordType)

These inputs only accept a limited set of characters, so including translations here would likely confuse users.

We may revisit this in future to provide translated helper text or documentation in a user guide, but for now the placeholder values will remain untranslated.

AlanGreene on 28 May 2020

👍1

Was this page helpful?

0 / 5 - 0 ratings