{hasShortcut && (
-
+
{shortcut}
)}
diff --git a/packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx b/packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx
index 4946ead2ba5..f5dc860567c 100644
--- a/packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx
+++ b/packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx
@@ -4,6 +4,7 @@ import { GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { useStyles2 } from '../../themes';
+import { t } from '../../utils/i18n';
import { useAsyncDependency } from '../../utils/useAsyncDependency';
import { ErrorWithStack } from '../ErrorBoundary/ErrorWithStack';
import { LoadingPlaceholder } from '../LoadingPlaceholder/LoadingPlaceholder';
@@ -22,13 +23,18 @@ export const ReactMonacoEditorLazy = (props: ReactMonacoEditorProps) => {
);
if (loading) {
- return
;
+ return (
+
+ );
}
if (error) {
return (
diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx
index d11fd2d4243..5116b76e41c 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx
@@ -3,6 +3,7 @@ import { ReactElement, useCallback } from 'react';
import { selectors } from '@grafana/e2e-selectors';
+import { t } from '../../utils/i18n';
import { Dropdown } from '../Dropdown/Dropdown';
import { ToolbarButton } from '../ToolbarButton';
import { TooltipPlacement } from '../Tooltip';
@@ -40,8 +41,8 @@ export function PanelMenu({
return (
) => {
const theme = useTheme2();
const styles = getSelectStyles(theme);
- return ;
+ return (
+
+ );
};
diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx
index 6a173554360..899a9a460d8 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx
@@ -1,4 +1,3 @@
-import { t } from 'i18next';
import { isArray, negate } from 'lodash';
import { ComponentProps, useCallback, useEffect, useRef, useState } from 'react';
import * as React from 'react';
@@ -15,7 +14,7 @@ import Creatable from 'react-select/creatable';
import { SelectableValue, toOption } from '@grafana/data';
import { useTheme2 } from '../../themes';
-import { Trans } from '../../utils/i18n';
+import { t, Trans } from '../../utils/i18n';
import { Icon } from '../Icon/Icon';
import { Spinner } from '../Spinner/Spinner';
@@ -351,7 +350,7 @@ export function SelectBase({
{
e.preventDefault();
@@ -369,7 +368,10 @@ export function SelectBase({
},
NoOptionsMessage() {
return (
-
+
{noOptionsMessage}
);
diff --git a/packages/grafana-ui/src/components/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
index e19c8d87546..779b737ef15 100644
--- a/packages/grafana-ui/src/components/Select/SelectMenu.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
@@ -8,7 +8,7 @@ import { SelectableValue, toIconName } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { useTheme2 } from '../../themes/ThemeContext';
-import { Trans } from '../../utils/i18n';
+import { t, Trans } from '../../utils/i18n';
import { clearButtonStyles } from '../Button';
import { Icon } from '../Icon/Icon';
import { ScrollContainer } from '../ScrollContainer/ScrollContainer';
@@ -52,7 +52,7 @@ export const SelectMenu = ({
data-testid={selectors.components.Select.menu}
className={styles.menu}
style={{ maxHeight }}
- aria-label="Select options menu"
+ aria-label={t('grafana-ui.select.menu-label', 'Select options menu')}
>
{toggleAllOptions && (
@@ -185,7 +185,7 @@ export const VirtualizedSelectMenu = ({
className={styles.menu}
height={heightEstimate}
width={widthEstimate}
- aria-label="Select options menu"
+ aria-label={t('grafana-ui.select.menu-label', 'Select options menu')}
itemCount={flattenedChildren.length}
itemSize={VIRTUAL_LIST_ITEM_HEIGHT}
>
diff --git a/packages/grafana-ui/src/components/Table/CellActions.tsx b/packages/grafana-ui/src/components/Table/CellActions.tsx
index 8c70d56a481..8adfe7e9747 100644
--- a/packages/grafana-ui/src/components/Table/CellActions.tsx
+++ b/packages/grafana-ui/src/components/Table/CellActions.tsx
@@ -2,6 +2,7 @@ import { useCallback } from 'react';
import * as React from 'react';
import { IconSize } from '../../types/icon';
+import { t } from '../../utils/i18n';
import { IconButton } from '../IconButton/IconButton';
import { Stack } from '../Layout/Stack/Stack';
import { TooltipPlacement } from '../Tooltip';
@@ -58,7 +59,7 @@ export function CellActions({
{inspectEnabled && (
{
if (setInspectCell) {
setInspectCell({ value: cell.value, mode: previewMode });
@@ -68,10 +69,20 @@ export function CellActions({
/>
)}
{showFilters && (
-
+
)}
{showFilters && (
-
+
)}
diff --git a/packages/grafana-ui/src/components/Table/FilterList.tsx b/packages/grafana-ui/src/components/Table/FilterList.tsx
index cce379ce575..9aa254062cc 100644
--- a/packages/grafana-ui/src/components/Table/FilterList.tsx
+++ b/packages/grafana-ui/src/components/Table/FilterList.tsx
@@ -7,7 +7,7 @@ import { GrafanaTheme2, formattedValueToString, getValueFormat, SelectableValue
import { ButtonSelect, Checkbox, FilterInput, Label, Stack } from '..';
import { useStyles2, useTheme2 } from '../../themes';
-import { Trans } from '../../utils/i18n';
+import { t, Trans } from '../../utils/i18n';
interface Props {
values: SelectableValue[];
@@ -172,7 +172,13 @@ export const FilterList = ({
return (
- {!showOperators && }
+ {!showOperators && (
+
+ )}
{showOperators && (
-
+
)}
{items.length > 0 ? (
diff --git a/packages/grafana-ui/src/components/Table/FilterPopup.tsx b/packages/grafana-ui/src/components/Table/FilterPopup.tsx
index 30a3cf0d021..f80f9fb0627 100644
--- a/packages/grafana-ui/src/components/Table/FilterPopup.tsx
+++ b/packages/grafana-ui/src/components/Table/FilterPopup.tsx
@@ -6,7 +6,7 @@ import { Field, GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Button, ClickOutsideWrapper, IconButton, Label, Stack } from '..';
import { useStyles2, useTheme2 } from '../../themes';
-import { Trans } from '../../utils/i18n';
+import { t, Trans } from '../../utils/i18n';
import { FilterList } from './FilterList';
import { TableStyles } from './styles';
@@ -75,7 +75,7 @@ export const FilterPopup = ({
{
setMatchCase((s) => !s);
diff --git a/packages/grafana-ui/src/components/Table/TableCellInspector.tsx b/packages/grafana-ui/src/components/Table/TableCellInspector.tsx
index c9a78b51d53..21d8a5cde81 100644
--- a/packages/grafana-ui/src/components/Table/TableCellInspector.tsx
+++ b/packages/grafana-ui/src/components/Table/TableCellInspector.tsx
@@ -1,7 +1,7 @@
import { isString } from 'lodash';
import { useState } from 'react';
-import { Trans } from '../../utils/i18n';
+import { t, Trans } from '../../utils/i18n';
import { ClipboardButton } from '../ClipboardButton/ClipboardButton';
import { Drawer } from '../Drawer/Drawer';
import { Stack } from '../Layout/Stack/Stack';
@@ -68,7 +68,7 @@ export function TableCellInspector({ value, onDismiss, mode }: TableCellInspecto
);
return (
-
+
text} style={{ marginLeft: 'auto', width: '200px' }}>
Copy to Clipboard
diff --git a/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx b/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx
index c9559c8d07b..75a231b840e 100644
--- a/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx
+++ b/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx
@@ -7,7 +7,7 @@ import { DataFrame, CSVConfig, readCSV, GrafanaTheme2 } from '@grafana/data';
import { stylesFactory, withTheme2 } from '../../themes';
import { Themeable2 } from '../../types/theme';
-import { Trans } from '../../utils/i18n';
+import { t, Trans } from '../../utils/i18n';
import { Icon } from '../Icon/Icon';
import { TextArea } from '../TextArea/TextArea';
@@ -74,7 +74,7 @@ export class UnThemedTableInputCSV extends PureComponent {