feat(dashboards-ng): add translation support for widget name, description, and heading#1893
Conversation
There was a problem hiding this comment.
Code Review
This pull request introduces internationalization support for widget metadata by changing the types of name, description, and heading from string to TranslatableString. The widget catalog component has been updated to use the translate pipe in templates and the translateSync method for filtering, alongside the addition of translation keys and unit tests. Feedback highlights the need to remove an unsafe .trim() call on the translatable description property and to shorten translation strings in both English and German to align with UX writing guidelines for conciseness.
…tion, and heading Widget names and descriptions in the catalog now support translation keys, allowing localized widget catalog. The `heading` field in `WidgetConfig` is now typed as `TranslatableString` for consistency with downstream `si-card` components that already apply translation.
8b1abee to
bd75f07
Compare
| wd.name.toLowerCase().includes(searchTerm.trim().toLowerCase()) | ||
| ); | ||
| const term = searchTerm.trim().toLowerCase(); | ||
| this.filteredWidgetCatalog = this.widgetCatalog.filter(wd => { |
There was a problem hiding this comment.
Instead of translating the names on the fly we could cache them in a computed property and use the async method? Maybe we could first migrate widgetCatalog to an signal.
There was a problem hiding this comment.
migrating widgetCatalog to signal will be a breaking change
There was a problem hiding this comment.
Ok, can we create a follow up to migrate the widgetCatalog property to an input?
| const term = searchTerm.trim().toLowerCase(); | ||
| this.filteredWidgetCatalog = this.widgetCatalog.filter(wd => { | ||
| const name = this.translateService.translateSync(wd.name); | ||
| return name.toLowerCase().includes(term); |
There was a problem hiding this comment.
We should validate the search behaviour via test
Widget names and descriptions in the catalog now support translation keys, allowing localized widget catalog.
The
headingfield inWidgetConfigis now typed asTranslatableStringfor consistency with downstreamsi-cardcomponents that already apply translation.Documentation.
Examples.
Dashboards Demo.
Playwright report.
Coverage Reports: