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

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 (
     <div className={styles.container}>
-      <Trans i18nKey="time-picker.content.empty-recent-list">
-        <div>
-          <span>
-            It looks like you haven&apos;t used this time picker before. As soon as you enter some time intervals,
-            recently used intervals will appear here.
-          </span>
-        </div>
+      <div>
+        <span>{emptyRecentListText}</span>
+      </div>
+      <Trans i18nKey="time-picker.content.empty-recent-list-docs">
         <div>
           <a
             className={styles.link}

public/app/features/datasources/components/picker/DataSourceDropdown.tsx

@@ -12,6 +12,7 @@ import { reportInteraction } from '@grafana/runtime';
 import { DataQuery, DataSourceRef } from '@grafana/schema';
 import { Button, CustomScrollbar, Icon, Input, ModalsController, Portal, useStyles2 } from '@grafana/ui';
 import config from 'app/core/config';
+import { Trans } from 'app/core/internationalization';
 import { useKeyNavigationListener } from 'app/features/search/hooks/useSearchKeyboardSelection';
 import { defaultFileUploadQuery, GrafanaQuery } from 'app/plugins/datasource/grafana/types';
 
@@ -406,7 +407,7 @@ function Footer({ onClose, onChange, onClickAddCSV, ...props }: FooterProps) {
             ref={props.footerRef}
             onKeyDown={isUploadFileEnabled ? onKeyDownFirstButton : onKeyDownLastButton}
           >
-            Open advanced data source picker
+            <Trans i18nKey="data-source-picker.open-advanced-button">Open advanced data source picker</Trans>
             <Icon name="arrow-right" />
           </Button>
         )}

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={[
             <DashNavButton
               key="share"
-              tooltip="Copy shortened link"
+              tooltip={t('explore.toolbar.copy-shortened-link', 'Copy shortened link')}
               icon="share-alt"
               onClick={onCopyShortLink}
-              aria-label="Copy shortened link"
+              aria-label={t('explore.toolbar.copy-shortened-link', 'Copy shortened link')}
             />,
             <div style={{ flex: 1 }} key="spacer" />,
           ]}
         />
       </div>
       <PageToolbar
-        aria-label="Explore toolbar"
+        aria-label={t('explore.toolbar.aria-label', 'Explore toolbar')}
         leftItems={[
           <DataSourcePicker
             key={`${exploreId}-ds-picker`}
@@ -149,25 +154,34 @@ export function ExploreToolbar({ exploreId, topOfViewRef, onChangeTime }: Props)
             <ToolbarButton
               variant="canvas"
               key="split"
-              tooltip="Split the pane"
+              tooltip={t('explore.toolbar.split-tooltip', 'Split the pane')}
               onClick={onOpenSplitView}
               icon="columns"
               disabled={isLive}
             >
-              Split
+              <Trans i18nKey="explore.toolbar.split-title">Split</Trans>
             </ToolbarButton>
           ) : (
             <ButtonGroup key="split-controls">
               <ToolbarButton
                 variant="canvas"
-                tooltip={`${isLargerPane ? 'Narrow' : 'Widen'} pane`}
+                tooltip={
+                  isLargerPane
+                    ? t('explore.toolbar.split-narrow', 'Narrow pane')
+                    : t('explore.toolbar.split-widen', 'Widen pane')
+                }
                 onClick={onClickResize}
                 icon={isLargerPane ? 'gf-movepane-left' : 'gf-movepane-right'}
                 iconOnly={true}
                 className={cx(shouldRotateSplitIcon && rotateIcon)}
               />
-              <ToolbarButton tooltip="Close split pane" onClick={onCloseSplitView} icon="times" variant="canvas">
-                Close
+              <ToolbarButton
+                tooltip={t('explore.toolbar.split-close-tooltip', 'Close split pane')}
+                onClick={onCloseSplitView}
+                icon="times"
+                variant="canvas"
+              >
+                <Trans i18nKey="explore.toolbar.split-close"> Close </Trans>
               </ToolbarButton>
             </ButtonGroup>
           ),
@@ -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)}

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 (
     <>
       <ToolbarButton
         icon="apps"
         variant="canvas"
         onClick={() => setIsOpen(true)}
-        aria-label="Add to dashboard"
+        aria-label={addToDashboardLabel}
         disabled={!explorePaneHasQueries}
       >
-        Add to dashboard
+        {addToDashboardLabel}
       </ToolbarButton>
 
       {isOpen && (

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.</0></0><1><0>Lesen Sie die Dokumentation</0><1>, um mehr darüber zu erfahren, wie Sie benutzerdefinierte Zeitbereiche eingeben können.</1></1>",
+      "empty-recent-list-docs": "<0><0>Lesen Sie die Dokumentation</0><1>, um mehr darüber zu erfahren, wie Sie benutzerdefinierte Zeitbereiche eingeben können.</1></0>",
+      "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": {

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&apos;t used this time picker before. As soon as you enter some time intervals, recently used intervals will appear here.</0></0><1><0>Read the documentation</0><1> to find out more about how to enter custom time ranges.</1></1>",
+      "empty-recent-list-docs": "<0><0>Read the documentation</0><1> to find out more about how to enter custom time ranges.</1></0>",
+      "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": {

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></0><1><0>Lea la documentación</0><1> para saber más sobre cómo introducir intervalos de tiempo personalizados.</1></1>",
+      "empty-recent-list-docs": "<0><0>Lea la documentación</0><1> para saber más sobre cómo introducir intervalos de tiempo personalizados.</1></0>",
+      "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": {

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></0><1><0>Lisez la documentation</0><1> pour savoir comment entrer des plages de temps personnalisées.</1></1>",
+      "empty-recent-list-docs": "<0><0>Lisez la documentation</0><1> pour savoir comment entrer des plages de temps personnalisées.</1></0>",
+      "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": {

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ęäř ĥęřę.</0></0><1><0>Ŗęäđ ŧĥę đőčūmęʼnŧäŧįőʼn</0><1> ŧő ƒįʼnđ őūŧ mőřę äþőūŧ ĥőŵ ŧő ęʼnŧęř čūşŧőm ŧįmę řäʼnģęş.</1></1>",
+      "empty-recent-list-docs": "<0><0>Ŗęäđ ŧĥę đőčūmęʼnŧäŧįőʼn</0><1> ŧő ƒįʼnđ őūŧ mőřę äþőūŧ ĥőŵ ŧő ęʼnŧęř čūşŧőm ŧįmę řäʼnģęş.</1></0>",
+      "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": {

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>看起来您之前没有使用过这个时间选择器。一旦您输入了某些时间间隔，最近使用的间隔就会出现在此处。</0></0><1><0>阅读文档</0><1>，了解如何输入自定义时间范围的更多信息。",
+      "empty-recent-list-docs": "<0><0>阅读文档</0><1>，了解如何输入自定义时间范围的更多信息。</1></0>",
+      "empty-recent-list-info": "看起来您之前没有使用过这个时间选择器。一旦您输入了某些时间间隔，最近使用的间隔就会出现在此处。",
       "filter-placeholder": "搜索快速范围"
     },
     "footer": {