Internationalization: Translate VariableInput and VariableOptions components (#58748)

public/app/features/variables/pickers/shared/VariableInput.tsx

@@ -1,5 +1,7 @@
 import React, { PureComponent } from 'react';
 
+import { t } from 'app/core/internationalization';
+
 import { NavigationKey } from '../types';
 
 export interface Props extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'value'> {
@@ -37,7 +39,7 @@ export class VariableInput extends PureComponent<Props> {
         value={value ?? ''}
         onChange={this.onChange}
         onKeyDown={this.onKeyDown}
-        placeholder="Enter variable value"
+        placeholder={t('variable.picker.input', 'Enter variable value')}
       />
     );
   }

public/app/features/variables/pickers/shared/VariableLink.tsx

@@ -4,6 +4,9 @@ import React, { FC, MouseEvent, useCallback } from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { Icon, Tooltip, useStyles2 } from '@grafana/ui';
+import { t } from 'app/core/internationalization';
+
+import { ALL_VARIABLE_TEXT } from '../../constants';
 
 interface Props {
   onClick: () => void;
@@ -65,7 +68,11 @@ interface VariableLinkTextProps {
 
 const VariableLinkText: FC<VariableLinkTextProps> = ({ text }) => {
   const styles = useStyles2(getStyles);
-  return <span className={styles.textAndTags}>{text}</span>;
+  return (
+    <span className={styles.textAndTags}>
+      {text === ALL_VARIABLE_TEXT ? t('variable.picker.link-all', 'All') : text}
+    </span>
+  );
 };
 
 const LoadingIndicator: FC<Pick<Props, 'onCancel'>> = ({ onCancel }) => {

public/app/features/variables/pickers/shared/VariableOptions.tsx

@@ -4,7 +4,9 @@ import React, { PureComponent } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { Tooltip, Themeable2, withTheme2, clearButtonStyles } from '@grafana/ui';
+import { Trans, t } from 'app/core/internationalization';
 
+import { ALL_VARIABLE_VALUE } from '../../constants';
 import { VariableOption } from '../../types';
 
 export interface Props extends React.HTMLProps<HTMLUListElement>, Themeable2 {
@@ -62,6 +64,8 @@ class VariableOptions extends PureComponent<Props> {
     const selectClass = option.selected ? 'variable-option pointer selected' : 'variable-option pointer';
     const highlightClass = index === highlightIndex ? `${selectClass} highlighted` : selectClass;
 
+    const isAllOption = option.value === ALL_VARIABLE_VALUE;
+
     return (
       <li key={`${option.value}`}>
         <button
@@ -73,7 +77,7 @@ class VariableOptions extends PureComponent<Props> {
         >
           <span className="variable-option-icon"></span>
           <span data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts(`${option.text}`)}>
-            {option.text}
+            {isAllOption ? t('variable.picker.option-all', 'All') : option.text}
           </span>
         </button>
       </li>
@@ -87,8 +91,10 @@ class VariableOptions extends PureComponent<Props> {
       return null;
     }
 
+    const tooltipContent = () => <Trans i18nKey="variable.picker.option-tooltip">Clear selections</Trans>;
+
     return (
-      <Tooltip content={'Clear selections'} placement={'top'}>
+      <Tooltip content={tooltipContent} placement={'top'}>
         <button
           className={`${
             selectedValues.length > 1
@@ -102,7 +108,7 @@ class VariableOptions extends PureComponent<Props> {
           data-placement="top"
         >
           <span className="variable-option-icon"></span>
-          Selected ({selectedValues.length})
+          <Trans i18nKey="variable.picker.option-selected-values">Selected</Trans> ({selectedValues.length})
         </button>
       </Tooltip>
     );

public/locales/de-DE/grafana.json

@@ -492,5 +492,14 @@
   },
   "user-sessions": {
     "loading": "Sitzungen werden geladen …"
+  },
+  "variable": {
+    "picker": {
+      "input": "",
+      "link-all": "",
+      "option-all": "",
+      "option-selected-values": "",
+      "option-tooltip": ""
+    }
   }
 }

public/locales/en-US/grafana.json

@@ -492,5 +492,14 @@
   },
   "user-sessions": {
     "loading": "Loading sessions..."
+  },
+  "variable": {
+    "picker": {
+      "input": "Enter variable value",
+      "link-all": "All",
+      "option-all": "All",
+      "option-selected-values": "Selected",
+      "option-tooltip": "Clear selections"
+    }
   }
 }

public/locales/es-ES/grafana.json

@@ -492,5 +492,14 @@
   },
   "user-sessions": {
     "loading": "Cargando sesiones..."
+  },
+  "variable": {
+    "picker": {
+      "input": "",
+      "link-all": "",
+      "option-all": "",
+      "option-selected-values": "",
+      "option-tooltip": ""
+    }
   }
 }

public/locales/fr-FR/grafana.json

@@ -492,5 +492,14 @@
   },
   "user-sessions": {
     "loading": "Chargement des sessions..."
+  },
+  "variable": {
+    "picker": {
+      "input": "",
+      "link-all": "",
+      "option-all": "",
+      "option-selected-values": "",
+      "option-tooltip": ""
+    }
   }
 }

public/locales/pseudo-LOCALE/grafana.json

@@ -492,5 +492,14 @@
   },
   "user-sessions": {
     "loading": "Ŀőäđįʼnģ şęşşįőʼnş..."
+  },
+  "variable": {
+    "picker": {
+      "input": "Ēʼnŧęř väřįäþľę väľūę",
+      "link-all": "Åľľ",
+      "option-all": "Åľľ",
+      "option-selected-values": "Ŝęľęčŧęđ",
+      "option-tooltip": "Cľęäř şęľęčŧįőʼnş"
+    }
   }
 }

public/locales/zh-Hans/grafana.json

@@ -492,5 +492,14 @@
   },
   "user-sessions": {
     "loading": "正在加载会话..."
+  },
+  "variable": {
+    "picker": {
+      "input": "",
+      "link-all": "",
+      "option-all": "",
+      "option-selected-values": "",
+      "option-tooltip": ""
+    }
   }
 }