From 56c75cc5422a85c694ce68334d75eb54c2ca4d84 Mon Sep 17 00:00:00 2001 From: Aditi Patel Date: Mon, 25 Sep 2023 03:38:17 -0500 Subject: [PATCH] I18n: Markup `ExploreToolbar` component (#74292) * chore: markup explore-split-toolbar and data-source-dropdown * chore: markup explore-refesh-picker * fix: apostrophe in empty-recent-list paragraph * chore: added markup for add to dashboard * fix: corrected prefix * fix: typos * chore: updated markup prefixes in all other languages * chore: added i18n markup for aria-labels * i18n files generated * i18n aria-label added for Add to Dashboard * fix: fixed prefixes according to the grafana guidelines * chore: generated i18n json files * fix: fixed prefixes * fix: apos; entity rendering * chore: updated markup files * chore: updated markup Locale file * fix: updated prefix names * chore: updated markup files * fix: updated markup prefix for data-source-picker * fix: trimmed extra spaces * chore: updated markup files * fix: added back translation phrases * fix: Updated prefix name in DataSourceDropdown.tsx * fix: created addToDashboard variable with translation markup --- .../TimeRangePicker/TimePickerContent.tsx | 15 ++++---- .../components/picker/DataSourceDropdown.tsx | 3 +- .../app/features/explore/ExploreToolbar.tsx | 34 +++++++++++++------ .../extensions/AddToDashboard/index.tsx | 7 ++-- public/locales/de-DE/grafana.json | 21 +++++++++++- public/locales/en-US/grafana.json | 21 +++++++++++- public/locales/es-ES/grafana.json | 21 +++++++++++- public/locales/fr-FR/grafana.json | 21 +++++++++++- public/locales/pseudo-LOCALE/grafana.json | 21 +++++++++++- public/locales/zh-Hans/grafana.json | 21 +++++++++++- 10 files changed, 159 insertions(+), 26 deletions(-) diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx index 7b68b579a7e..40c321f158c 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx @@ -216,16 +216,17 @@ const FullScreenForm = (props: FormProps) => { const EmptyRecentList = memo(() => { const theme = useTheme2(); const styles = getEmptyListStyles(theme); + const emptyRecentListText = t( + 'time-picker.content.empty-recent-list-info', + "It looks like you haven't used this time picker before. As soon as you enter some time intervals, recently used intervals will appear here." + ); return (
- -
- - It looks like you haven't used this time picker before. As soon as you enter some time intervals, - recently used intervals will appear here. - -
+
+ {emptyRecentListText} +
+
- Open advanced data source picker + Open advanced data source picker )} diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx index bf1d41aed84..1a321374020 100644 --- a/public/app/features/explore/ExploreToolbar.tsx +++ b/public/app/features/explore/ExploreToolbar.tsx @@ -7,6 +7,7 @@ import { DataSourceInstanceSettings, RawTimeRange } from '@grafana/data'; import { reportInteraction } from '@grafana/runtime'; import { defaultIntervals, PageToolbar, RefreshPicker, SetInterval, ToolbarButton, ButtonGroup } from '@grafana/ui'; import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate'; +import { t, Trans } from 'app/core/internationalization'; import { createAndCopyShortLink } from 'app/core/utils/shortLinks'; import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker'; import { StoreState, useDispatch, useSelector } from 'app/types/store'; @@ -65,6 +66,10 @@ export function ExploreToolbar({ exploreId, topOfViewRef, onChangeTime }: Props) [isLargerPane, exploreId, panes] ); + const refreshPickerLabel = loading + ? t('explore.toolbar.refresh-picker-cancel', 'Cancel') + : t('explore.toolbar.refresh-picker-run', 'Run query'); + const onCopyShortLink = () => { createAndCopyShortLink(global.location.href); reportInteraction('grafana_explore_shortened_link_clicked'); @@ -121,17 +126,17 @@ export function ExploreToolbar({ exploreId, topOfViewRef, onChangeTime }: Props) actions={[ ,
, ]} />
- Split + Split ) : ( - - Close + + Close ), @@ -198,8 +212,8 @@ export function ExploreToolbar({ exploreId, topOfViewRef, onChangeTime }: Props) onIntervalChanged={onChangeRefreshInterval} value={refreshInterval} isLoading={loading} - text={showSmallTimePicker ? undefined : loading ? 'Cancel' : 'Run query'} - tooltip={showSmallTimePicker ? (loading ? 'Cancel' : 'Run query') : undefined} + text={showSmallTimePicker ? undefined : refreshPickerLabel} + tooltip={showSmallTimePicker ? refreshPickerLabel : undefined} intervals={contextSrv.getValidIntervals(defaultIntervals)} isLive={isLive} onRefresh={() => onRunQuery(loading)} diff --git a/public/app/features/explore/extensions/AddToDashboard/index.tsx b/public/app/features/explore/extensions/AddToDashboard/index.tsx index 816d4a0c895..59a2fc35450 100644 --- a/public/app/features/explore/extensions/AddToDashboard/index.tsx +++ b/public/app/features/explore/extensions/AddToDashboard/index.tsx @@ -1,6 +1,7 @@ import React, { useCallback, useState } from 'react'; import { Modal, ToolbarButton } from '@grafana/ui'; +import { t } from 'app/core/internationalization'; import { useSelector } from 'app/types'; import { getExploreItemSelector } from '../../state/selectors'; @@ -18,16 +19,18 @@ export const AddToDashboard = ({ exploreId }: Props) => { const explorePaneHasQueries = !!useSelector(selectExploreItem)?.queries?.length; const onClose = useCallback(() => setIsOpen(false), []); + const addToDashboardLabel = t('explore.add-to-dashboard', 'Add to dashboard'); + return ( <> setIsOpen(true)} - aria-label="Add to dashboard" + aria-label={addToDashboardLabel} disabled={!explorePaneHasQueries} > - Add to dashboard + {addToDashboardLabel} {isOpen && ( diff --git a/public/locales/de-DE/grafana.json b/public/locales/de-DE/grafana.json index 8809a2424af..63c2e952fde 100644 --- a/public/locales/de-DE/grafana.json +++ b/public/locales/de-DE/grafana.json @@ -215,11 +215,29 @@ "unmark-favorite": "Markierung als Favorit entfernen" } }, + "data-source-picker": { + "open-advanced-button": "" + }, "data-sources": { "datasource-add-button": { "label": "" } }, + "explore": { + "add-to-dashboard": "", + "toolbar": { + "aria-label": "", + "copy-shortened-link": "", + "refresh-picker-cancel": "", + "refresh-picker-run": "", + "split-close": "", + "split-close-tooltip": "", + "split-narrow": "", + "split-title": "", + "split-tooltip": "", + "split-widen": "" + } + }, "folder-picker": { "loading": "Ordner werden geladen …" }, @@ -848,7 +866,8 @@ "select-time": "Einen Zeitbereich auswählen" }, "content": { - "empty-recent-list": "<0><0>Es sieht so aus, als hätten Sie diesen Zeit-Auswähler noch nie benutzt. Sobald Sie einige Zeitintervalle eingeben, werden hier die zuletzt verwendeten Intervalle angezeigt.<1><0>Lesen Sie die Dokumentation<1>, um mehr darüber zu erfahren, wie Sie benutzerdefinierte Zeitbereiche eingeben können.", + "empty-recent-list-docs": "<0><0>Lesen Sie die Dokumentation<1>, um mehr darüber zu erfahren, wie Sie benutzerdefinierte Zeitbereiche eingeben können.", + "empty-recent-list-info": "Es sieht so aus, als hätten Sie diesen Zeit-Auswähler noch nie benutzt. Sobald Sie einige Zeitintervalle eingeben, werden hier die zuletzt verwendeten Intervalle angezeigt.", "filter-placeholder": "Schnellbereiche suchen" }, "footer": { diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index d25c14e18a5..fd96032ef5e 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -215,11 +215,29 @@ "unmark-favorite": "Unmark as favorite" } }, + "data-source-picker": { + "open-advanced-button": "Open advanced data source picker" + }, "data-sources": { "datasource-add-button": { "label": "Add new data source" } }, + "explore": { + "add-to-dashboard": "Add to dashboard", + "toolbar": { + "aria-label": "Explore toolbar", + "copy-shortened-link": "Copy shortened link", + "refresh-picker-cancel": "Cancel", + "refresh-picker-run": "Run query", + "split-close": "Close", + "split-close-tooltip": "Close split pane", + "split-narrow": "Narrow pane", + "split-title": "Split", + "split-tooltip": "Split the pane", + "split-widen": "Widen pane" + } + }, "folder-picker": { "loading": "Loading folders..." }, @@ -848,7 +866,8 @@ "select-time": "Select a time range" }, "content": { - "empty-recent-list": "<0><0>It looks like you haven't used this time picker before. As soon as you enter some time intervals, recently used intervals will appear here.<1><0>Read the documentation<1> to find out more about how to enter custom time ranges.", + "empty-recent-list-docs": "<0><0>Read the documentation<1> to find out more about how to enter custom time ranges.", + "empty-recent-list-info": "It looks like you haven't used this time picker before. As soon as you enter some time intervals, recently used intervals will appear here.", "filter-placeholder": "Search quick ranges" }, "footer": { diff --git a/public/locales/es-ES/grafana.json b/public/locales/es-ES/grafana.json index eb8e6f1c773..3535a6124c8 100644 --- a/public/locales/es-ES/grafana.json +++ b/public/locales/es-ES/grafana.json @@ -220,11 +220,29 @@ "unmark-favorite": "Deshacer marca como favorito" } }, + "data-source-picker": { + "open-advanced-button": "" + }, "data-sources": { "datasource-add-button": { "label": "" } }, + "explore": { + "add-to-dashboard": "", + "toolbar": { + "aria-label": "", + "copy-shortened-link": "", + "refresh-picker-cancel": "", + "refresh-picker-run": "", + "split-close": "", + "split-close-tooltip": "", + "split-narrow": "", + "split-title": "", + "split-tooltip": "", + "split-widen": "" + } + }, "folder-picker": { "loading": "Cargando carpetas..." }, @@ -853,7 +871,8 @@ "select-time": "Seleccionar un intervalo de tiempo" }, "content": { - "empty-recent-list": "<0><0>Parece que no ha utilizado antes este selector de tiempo. En cuanto introduzca algún intervalo de tiempo, los intervalos que haya usado recientemente aparecerán aquí./0><1><0>Lea la documentación<1> para saber más sobre cómo introducir intervalos de tiempo personalizados.", + "empty-recent-list-docs": "<0><0>Lea la documentación<1> para saber más sobre cómo introducir intervalos de tiempo personalizados.", + "empty-recent-list-info": "Parece que no ha utilizado antes este selector de tiempo. En cuanto introduzca algún intervalo de tiempo, los intervalos que haya usado recientemente aparecerán aquí.", "filter-placeholder": "Buscar intervalos rápidos" }, "footer": { diff --git a/public/locales/fr-FR/grafana.json b/public/locales/fr-FR/grafana.json index 05bfcb26f84..4634fe3681a 100644 --- a/public/locales/fr-FR/grafana.json +++ b/public/locales/fr-FR/grafana.json @@ -220,11 +220,29 @@ "unmark-favorite": "Supprimer des favoris" } }, + "data-source-picker": { + "open-advanced-button": "" + }, "data-sources": { "datasource-add-button": { "label": "" } }, + "explore": { + "add-to-dashboard": "", + "toolbar": { + "aria-label": "", + "copy-shortened-link": "", + "refresh-picker-cancel": "", + "refresh-picker-run": "", + "split-close": "", + "split-close-tooltip": "", + "split-narrow": "", + "split-title": "", + "split-tooltip": "", + "split-widen": "" + } + }, "folder-picker": { "loading": "Chargement des dossiers..." }, @@ -853,7 +871,8 @@ "select-time": "Sélectionner une plage de temps" }, "content": { - "empty-recent-list": "<0><0>Il semble que vous n'ayez jamais utilisé ce sélecteur de temps dans le passé. Lorsque vous commencerez à utiliser des plages de temps, celles récemment utilisées apparaîtront ici. /0><1><0>Lisez la documentation<1> pour savoir comment entrer des plages de temps personnalisées.", + "empty-recent-list-docs": "<0><0>Lisez la documentation<1> pour savoir comment entrer des plages de temps personnalisées.", + "empty-recent-list-info": "Il semble que vous n'ayez jamais utilisé ce sélecteur de temps dans le passé. Lorsque vous commencerez à utiliser des plages de temps, celles récemment utilisées apparaîtront ici.", "filter-placeholder": "Rechercher dans les plages rapides" }, "footer": { diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json index 6cad22e9d37..155506d7813 100644 --- a/public/locales/pseudo-LOCALE/grafana.json +++ b/public/locales/pseudo-LOCALE/grafana.json @@ -215,11 +215,29 @@ "unmark-favorite": "Ůʼnmäřĸ äş ƒävőřįŧę" } }, + "data-source-picker": { + "open-advanced-button": "" + }, "data-sources": { "datasource-add-button": { "label": "Åđđ ʼnęŵ đäŧä şőūřčę" } }, + "explore": { + "add-to-dashboard": "Åđđ ŧő đäşĥþőäřđ", + "toolbar": { + "aria-label": "Ēχpľőřę ŧőőľþäř", + "copy-shortened-link": "Cőpy şĥőřŧęʼnęđ ľįʼnĸ", + "refresh-picker-cancel": "Cäʼnčęľ", + "refresh-picker-run": "Ŗūʼn qūęřy", + "split-close": "Cľőşę", + "split-close-tooltip": "Cľőşę şpľįŧ päʼnę", + "split-narrow": "Ńäřřőŵ päʼnę", + "split-title": "Ŝpľįŧ", + "split-tooltip": "Ŝpľįŧ ŧĥę päʼnę", + "split-widen": "Ŵįđęʼn päʼnę" + } + }, "folder-picker": { "loading": "Ŀőäđįʼnģ ƒőľđęřş..." }, @@ -848,7 +866,8 @@ "select-time": "Ŝęľęčŧ ä ŧįmę řäʼnģę" }, "content": { - "empty-recent-list": "<0><0>Ĩŧ ľőőĸş ľįĸę yőū ĥävęʼn&äpőş;ŧ ūşęđ ŧĥįş ŧįmę pįčĸęř þęƒőřę. Åş şőőʼn äş yőū ęʼnŧęř şőmę ŧįmę įʼnŧęřväľş, řęčęʼnŧľy ūşęđ įʼnŧęřväľş ŵįľľ äppęäř ĥęřę.<1><0>Ŗęäđ ŧĥę đőčūmęʼnŧäŧįőʼn<1> ŧő ƒįʼnđ őūŧ mőřę äþőūŧ ĥőŵ ŧő ęʼnŧęř čūşŧőm ŧįmę řäʼnģęş.", + "empty-recent-list-docs": "<0><0>Ŗęäđ ŧĥę đőčūmęʼnŧäŧįőʼn<1> ŧő ƒįʼnđ őūŧ mőřę äþőūŧ ĥőŵ ŧő ęʼnŧęř čūşŧőm ŧįmę řäʼnģęş.", + "empty-recent-list-info": "Ĩŧ ľőőĸş ľįĸę yőū ĥävęʼn'ŧ ūşęđ ŧĥįş ŧįmę pįčĸęř þęƒőřę. Åş şőőʼn äş yőū ęʼnŧęř şőmę ŧįmę įʼnŧęřväľş, řęčęʼnŧľy ūşęđ įʼnŧęřväľş ŵįľľ äppęäř ĥęřę.", "filter-placeholder": "Ŝęäřčĥ qūįčĸ řäʼnģęş" }, "footer": { diff --git a/public/locales/zh-Hans/grafana.json b/public/locales/zh-Hans/grafana.json index 9dfb9d50719..63075f2923f 100644 --- a/public/locales/zh-Hans/grafana.json +++ b/public/locales/zh-Hans/grafana.json @@ -210,11 +210,29 @@ "unmark-favorite": "取消标记为收藏" } }, + "data-source-picker": { + "open-advanced-button": "" + }, "data-sources": { "datasource-add-button": { "label": "" } }, + "explore": { + "add-to-dashboard": "", + "toolbar": { + "aria-label": "", + "copy-shortened-link": "", + "refresh-picker-cancel": "", + "refresh-picker-run": "", + "split-close": "", + "split-close-tooltip": "", + "split-narrow": "", + "split-title": "", + "split-tooltip": "", + "split-widen": "" + } + }, "folder-picker": { "loading": "正在加载文件夹..." }, @@ -843,7 +861,8 @@ "select-time": "选择时间范围" }, "content": { - "empty-recent-list": "<0><0>看起来您之前没有使用过这个时间选择器。一旦您输入了某些时间间隔，最近使用的间隔就会出现在此处。<1><0>阅读文档<1>，了解如何输入自定义时间范围的更多信息。", + "empty-recent-list-docs": "<0><0>阅读文档<1>，了解如何输入自定义时间范围的更多信息。", + "empty-recent-list-info": "看起来您之前没有使用过这个时间选择器。一旦您输入了某些时间间隔，最近使用的间隔就会出现在此处。", "filter-placeholder": "搜索快速范围" }, "footer": {