Markup DataSourcePicker for translations (components used in Explore only) (#75400)

* feat: added markup for data source picker title

* feat: added markup for builtin data source list

* feat: added markup for datasource list

* chore: generated markup files

* feat: added markup for new data source button

* chore: generated markup files

* fix: fixed prefix names

* chore: updated markup files

* fix: removed extra spaces

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

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { LinkButton, ButtonVariant } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
+import { Trans } from 'app/core/internationalization';
 import { ROUTES as CONNECTIONS_ROUTES } from 'app/features/connections/constants';
 import { AccessControlAction } from 'app/types';
 
@@ -23,7 +24,7 @@ export function AddNewDataSourceButton({ variant, onClick }: AddNewDataSourceBut
       onClick={onClick}
       target="_blank"
     >
-      Configure a new data source
+      <Trans i18nKey="data-source-picker.add-new-data-source">Configure a new data source</Trans>
     </LinkButton>
   );
 }

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

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { DataSourceInstanceSettings } from '@grafana/data';
 import { DataSourceRef } from '@grafana/schema';
+import { t } from 'app/core/internationalization';
 
 import { useDatasources } from '../../hooks';
 
@@ -9,9 +10,12 @@ import { DataSourceCard } from './DataSourceCard';
 import { isDataSourceMatch } from './utils';
 
 const CUSTOM_DESCRIPTIONS_BY_UID: Record<string, string> = {
-  grafana: 'Discover visualizations using mock data',
-  '-- Mixed --': 'Use multiple data sources',
-  '-- Dashboard --': 'Reuse query results from other visualizations',
+  grafana: t('data-source-picker.built-in-list.description-grafana', 'Discover visualizations using mock data'),
+  '-- Mixed --': t('data-source-picker.built-in-list.description-mixed', 'Use multiple data sources'),
+  '-- Dashboard --': t(
+    'data-source-picker.built-in-list.description-dashboard',
+    'Reuse query results from other visualizations'
+  ),
 };
 
 interface BuiltInDataSourceListProps {

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

@@ -5,6 +5,7 @@ import { Observable } from 'rxjs';
 import { DataSourceInstanceSettings, DataSourceRef, GrafanaTheme2 } from '@grafana/data';
 import { getTemplateSrv } from '@grafana/runtime';
 import { useStyles2, useTheme2 } from '@grafana/ui';
+import { Trans } from 'app/core/internationalization';
 
 import { useDatasources, useKeyboardNavigatableList, useRecentlyUsedDataSources } from '../../hooks';
 
@@ -98,7 +99,9 @@ function EmptyState({ className, onClickCTA }: { className?: string; onClickCTA?
   const styles = useStyles2(getEmptyStateStyles);
   return (
     <div className={cx(className, styles.container)}>
-      <p className={styles.message}>No data sources found</p>
+      <p className={styles.message}>
+        <Trans i18nKey="data-source-picker.list.no-data-source-message">No data sources found</Trans>
+      </p>
       <AddNewDataSourceButton onClick={onClickCTA} />
     </div>
   );

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

@@ -14,6 +14,7 @@ import {
   Input,
   Icon,
 } from '@grafana/ui';
+import { t, Trans } from 'app/core/internationalization';
 import * as DFImport from 'app/features/dataframe-import';
 import { GrafanaQuery } from 'app/plugins/datasource/grafana/types';
 import { getFileDropToQueryHandler } from 'app/plugins/datasource/grafana/utils';
@@ -143,7 +144,7 @@ export function DataSourceModal({
 
   return (
     <Modal
-      title="Select data source"
+      title={t('data-source-picker.modal.title', 'Select data source')}
       closeOnEscape={true}
       closeOnBackdropClick={true}
       isOpen={true}
@@ -159,7 +160,7 @@ export function DataSourceModal({
           className={styles.searchInput}
           value={search}
           prefix={<Icon name="search" />}
-          placeholder="Search data source"
+          placeholder={t('data-source-picker.modal.input-placeholder', 'Select data source')}
           onChange={(e) => {
             setSearch(e.currentTarget.value);
             reportSearchUsageOnce();
@@ -211,7 +212,11 @@ export function DataSourceModal({
           )}
         </div>
         <div className={styles.newDSSection}>
-          <span className={styles.newDSDescription}>Open a new tab and configure a data source</span>
+          <span className={styles.newDSDescription}>
+            <Trans i18nKey="data-source-picker.modal.configure-new-data-source">
+              Open a new tab and configure a data source
+            </Trans>
+          </span>
           <AddNewDataSourceButton
             variant="secondary"
             onClick={() => {

public/locales/de-DE/grafana.json

@@ -314,6 +314,20 @@
     }
   },
   "data-source-picker": {
+    "add-new-data-source": "",
+    "built-in-list": {
+      "description-dashboard": "",
+      "description-grafana": "",
+      "description-mixed": ""
+    },
+    "list": {
+      "no-data-source-message": ""
+    },
+    "modal": {
+      "configure-new-data-source": "",
+      "input-placeholder": "",
+      "title": ""
+    },
     "open-advanced-button": ""
   },
   "data-sources": {

public/locales/en-US/grafana.json

@@ -314,6 +314,20 @@
     }
   },
   "data-source-picker": {
+    "add-new-data-source": "Configure a new data source",
+    "built-in-list": {
+      "description-dashboard": "Reuse query results from other visualizations",
+      "description-grafana": "Discover visualizations using mock data",
+      "description-mixed": "Use multiple data sources"
+    },
+    "list": {
+      "no-data-source-message": "No data sources found"
+    },
+    "modal": {
+      "configure-new-data-source": "Open a new tab and configure a data source",
+      "input-placeholder": "Select data source",
+      "title": "Select data source"
+    },
     "open-advanced-button": "Open advanced data source picker"
   },
   "data-sources": {

public/locales/es-ES/grafana.json

@@ -319,6 +319,20 @@
     }
   },
   "data-source-picker": {
+    "add-new-data-source": "",
+    "built-in-list": {
+      "description-dashboard": "",
+      "description-grafana": "",
+      "description-mixed": ""
+    },
+    "list": {
+      "no-data-source-message": ""
+    },
+    "modal": {
+      "configure-new-data-source": "",
+      "input-placeholder": "",
+      "title": ""
+    },
     "open-advanced-button": ""
   },
   "data-sources": {

public/locales/fr-FR/grafana.json

@@ -319,6 +319,20 @@
     }
   },
   "data-source-picker": {
+    "add-new-data-source": "",
+    "built-in-list": {
+      "description-dashboard": "",
+      "description-grafana": "",
+      "description-mixed": ""
+    },
+    "list": {
+      "no-data-source-message": ""
+    },
+    "modal": {
+      "configure-new-data-source": "",
+      "input-placeholder": "",
+      "title": ""
+    },
     "open-advanced-button": ""
   },
   "data-sources": {

public/locales/pseudo-LOCALE/grafana.json

@@ -314,6 +314,20 @@
     }
   },
   "data-source-picker": {
+    "add-new-data-source": "Cőʼnƒįģūřę ä ʼnęŵ đäŧä şőūřčę",
+    "built-in-list": {
+      "description-dashboard": "Ŗęūşę qūęřy řęşūľŧş ƒřőm őŧĥęř vįşūäľįžäŧįőʼnş",
+      "description-grafana": "Đįşčővęř vįşūäľįžäŧįőʼnş ūşįʼnģ mőčĸ đäŧä",
+      "description-mixed": "Ůşę mūľŧįpľę đäŧä şőūřčęş"
+    },
+    "list": {
+      "no-data-source-message": "Ńő đäŧä şőūřčęş ƒőūʼnđ"
+    },
+    "modal": {
+      "configure-new-data-source": "Øpęʼn ä ʼnęŵ ŧäþ äʼnđ čőʼnƒįģūřę ä đäŧä şőūřčę",
+      "input-placeholder": "Ŝęľęčŧ đäŧä şőūřčę",
+      "title": "Ŝęľęčŧ đäŧä şőūřčę"
+    },
     "open-advanced-button": "Øpęʼn äđväʼnčęđ đäŧä şőūřčę pįčĸęř"
   },
   "data-sources": {

public/locales/zh-Hans/grafana.json

@@ -309,6 +309,20 @@
     }
   },
   "data-source-picker": {
+    "add-new-data-source": "",
+    "built-in-list": {
+      "description-dashboard": "",
+      "description-grafana": "",
+      "description-mixed": ""
+    },
+    "list": {
+      "no-data-source-message": ""
+    },
+    "modal": {
+      "configure-new-data-source": "",
+      "input-placeholder": "",
+      "title": ""
+    },
     "open-advanced-button": ""
   },
   "data-sources": {