From d82a877f6569b4a61d49dfa34ae52a52c10ab108 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Mon, 17 Mar 2025 12:27:40 +0000 Subject: [PATCH] GrafanaUI: Mark up or ignore remaining grafana-ui translations (#102203) * markup or ignore remaining grafana-ui translations * fix unit tests, commit betterer results which somehow didn't get autocommitted?! :o * fix SharedPreferences unit test * fix remaining unit tests * fix azure e2e test * better solution --- .betterer.results | 99 ++----------------- e2e/cloud-plugins-suite/azure-monitor.spec.ts | 5 +- .../src/components/DataSourcePicker.test.tsx | 4 +- .../DataLinks/DataLinkSuggestions.tsx | 2 +- .../components/FileDropzone/FileDropzone.tsx | 8 +- .../components/FileDropzone/FileListItem.tsx | 11 ++- .../src/components/FileUpload/FileUpload.tsx | 3 +- .../InteractiveTable/Expander/index.tsx | 3 +- .../FieldNameByRegexMatcherEditor.tsx | 9 +- .../MatchersUI/FieldValueMatcher.tsx | 5 +- .../src/components/Menu/MenuItem.tsx | 3 +- .../Monaco/ReactMonacoEditorLazy.tsx | 10 +- .../src/components/PanelChrome/PanelMenu.tsx | 5 +- .../src/components/Select/MultiValue.tsx | 11 ++- .../src/components/Select/SelectBase.tsx | 10 +- .../src/components/Select/SelectMenu.tsx | 6 +- .../src/components/Table/CellActions.tsx | 17 +++- .../src/components/Table/FilterList.tsx | 16 ++- .../src/components/Table/FilterPopup.tsx | 4 +- .../components/Table/TableCellInspector.tsx | 4 +- .../TableInputCSV/TableInputCSV.tsx | 4 +- .../src/components/Tags/TagList.tsx | 3 +- .../src/components/TagsInput/TagItem.tsx | 3 +- .../components/TagsInput/TagsInput.test.tsx | 4 +- .../src/components/Toggletip/Toggletip.tsx | 3 +- .../ToolbarButton/ToolbarButtonRow.tsx | 3 +- .../src/components/UnitPicker/UnitPicker.tsx | 3 +- .../components/UsersIndicator/UserIcon.tsx | 4 +- .../UsersIndicator/UsersIndicator.tsx | 6 +- .../src/components/VizTooltip/SeriesTable.tsx | 3 +- .../grafana-ui/src/options/builder/axis.tsx | 6 +- .../src/options/builder/stacking.tsx | 11 ++- .../SharedPreferences.test.tsx | 4 +- .../pages/DashboardScenePage.test.tsx | 2 +- .../FieldToConfigMappingEditor.test.tsx | 2 +- .../ArgQueryEditor/ArgQueryEditor.test.tsx | 2 +- .../LogGroups/LogGroupsSelector.test.tsx | 2 +- .../SearchTraceQLEditor/SearchField.test.tsx | 2 +- public/locales/en-US/grafana.json | 71 ++++++++++++- 39 files changed, 213 insertions(+), 160 deletions(-) diff --git a/.betterer.results b/.betterer.results index 6849eaed996..c5c5835206e 100644 --- a/.betterer.results +++ b/.betterer.results @@ -548,9 +548,6 @@ exports[`better eslint`] = { "packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"] - ], "packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] @@ -559,15 +556,6 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], - "packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"] - ], - "packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"] - ], - "packages/grafana-ui/src/components/FileUpload/FileUpload.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"] - ], "packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "1"], @@ -585,67 +573,39 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "1"], [0, 0, 0, "Unexpected any. Specify a different type.", "2"] ], - "packages/grafana-ui/src/components/InteractiveTable/Expander/index.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"] - ], "packages/grafana-ui/src/components/JSONFormatter/json_explorer/json_explorer.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], - "packages/grafana-ui/src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"] - ], "packages/grafana-ui/src/components/MatchersUI/FieldValueMatcher.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"], - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "1"], - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "2"] + [0, 0, 0, "Do not use any type assertions.", "0"] ], "packages/grafana-ui/src/components/MatchersUI/fieldMatchersUI.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], - "packages/grafana-ui/src/components/Menu/MenuItem.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"] - ], "packages/grafana-ui/src/components/Modal/ModalsContext.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"], [0, 0, 0, "Unexpected any. Specify a different type.", "2"], [0, 0, 0, "Unexpected any. Specify a different type.", "3"] ], - "packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"], - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "1"] - ], "packages/grafana-ui/src/components/PanelChrome/PanelContext.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], - "packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"], - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "1"] - ], "packages/grafana-ui/src/components/PanelChrome/index.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], "packages/grafana-ui/src/components/Segment/SegmentSelect.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "packages/grafana-ui/src/components/Select/MultiValue.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"] - ], "packages/grafana-ui/src/components/Select/SelectBase.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "1"], - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "2"], - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "3"], + [0, 0, 0, "Unexpected any. Specify a different type.", "2"], + [0, 0, 0, "Unexpected any. Specify a different type.", "3"], [0, 0, 0, "Unexpected any. Specify a different type.", "4"], - [0, 0, 0, "Unexpected any. Specify a different type.", "5"], - [0, 0, 0, "Unexpected any. Specify a different type.", "6"], - [0, 0, 0, "Unexpected any. Specify a different type.", "7"] - ], - "packages/grafana-ui/src/components/Select/SelectMenu.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"], - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "1"] + [0, 0, 0, "Unexpected any. Specify a different type.", "5"] ], "packages/grafana-ui/src/components/Select/ValueContainer.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] @@ -691,21 +651,11 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "1"], [0, 0, 0, "Unexpected any. Specify a different type.", "2"] ], - "packages/grafana-ui/src/components/Table/CellActions.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"], - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "1"], - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "2"] - ], "packages/grafana-ui/src/components/Table/Filter.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], - "packages/grafana-ui/src/components/Table/FilterList.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"], - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "1"] - ], "packages/grafana-ui/src/components/Table/FilterPopup.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"], - [0, 0, 0, "Unexpected any. Specify a different type.", "1"] + [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], "packages/grafana-ui/src/components/Table/FooterRow.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], @@ -726,8 +676,7 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "3"] ], "packages/grafana-ui/src/components/Table/TableCellInspector.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"], - [0, 0, 0, "Unexpected any. Specify a different type.", "1"] + [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], "packages/grafana-ui/src/components/Table/reducer.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], @@ -746,33 +695,9 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "4"], [0, 0, 0, "Unexpected any. Specify a different type.", "5"] ], - "packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"] - ], "packages/grafana-ui/src/components/Tags/Tag.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "packages/grafana-ui/src/components/Tags/TagList.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"] - ], - "packages/grafana-ui/src/components/TagsInput/TagItem.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"] - ], - "packages/grafana-ui/src/components/Toggletip/Toggletip.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"] - ], - "packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"] - ], - "packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"] - ], - "packages/grafana-ui/src/components/UsersIndicator/UserIcon.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"] - ], - "packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"] - ], "packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx:5381": [ [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"] ], @@ -784,9 +709,6 @@ exports[`better eslint`] = { [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "1"] ], - "packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"] - ], "packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] @@ -815,18 +737,9 @@ exports[`better eslint`] = { [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], - "packages/grafana-ui/src/options/builder/axis.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"], - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "1"], - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "2"] - ], "packages/grafana-ui/src/options/builder/hideSeries.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "packages/grafana-ui/src/options/builder/stacking.tsx:5381": [ - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"], - [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "1"] - ], "packages/grafana-ui/src/slate-plugins/braces.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], diff --git a/e2e/cloud-plugins-suite/azure-monitor.spec.ts b/e2e/cloud-plugins-suite/azure-monitor.spec.ts index 1c6db341089..23de1596f79 100644 --- a/e2e/cloud-plugins-suite/azure-monitor.spec.ts +++ b/e2e/cloud-plugins-suite/azure-monitor.spec.ts @@ -222,10 +222,7 @@ describe('Azure monitor datasource', () => { queriesForm: () => { e2eSelectors.queryEditor.header.select().find('input').type('Azure Resource Graph{enter}'); cy.wait(1000); // Need to wait for code editor to completely load - e2eSelectors.queryEditor.argsQueryEditor.subscriptions - .input() - .find('[aria-label="select-clear-value"]') - .click(); + e2eSelectors.queryEditor.argsQueryEditor.subscriptions.input().find('[aria-label="Clear value"]').click(); e2eSelectors.queryEditor.argsQueryEditor.subscriptions.input().find('input').type('datasources{enter}'); e2e.components.CodeEditor.container().type( "Resources | where resourceGroup == 'cloud-plugins-e2e-test-azmon' | project name, resourceGroup" diff --git a/packages/grafana-runtime/src/components/DataSourcePicker.test.tsx b/packages/grafana-runtime/src/components/DataSourcePicker.test.tsx index 6480a2644dc..6f7ceb6da00 100644 --- a/packages/grafana-runtime/src/components/DataSourcePicker.test.tsx +++ b/packages/grafana-runtime/src/components/DataSourcePicker.test.tsx @@ -11,7 +11,7 @@ describe('DataSourcePicker', () => { const onClear = jest.fn(); const select = render(); - const clearButton = select.getByLabelText('select-clear-value'); + const clearButton = select.getByLabelText('Clear value'); await userEvent.click(clearButton); expect(onClear).toHaveBeenCalled(); }); @@ -20,7 +20,7 @@ describe('DataSourcePicker', () => { const select = render(); expect(() => { - select.getByLabelText('select-clear-value'); + select.getByLabelText('Clear value'); }).toThrowError(); }); diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx index 2e6ca8d215a..9d943c4e0c3 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx @@ -87,7 +87,7 @@ export const DataLinkSuggestions = ({ suggestions, ...otherProps }: DataLinkSugg - + {errors.map((error) => { switch (error.code) { case ErrorCode.FileTooLarge: diff --git a/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx b/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx index 4b69dc72219..4af1d39bdd1 100644 --- a/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx +++ b/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx @@ -4,7 +4,7 @@ import { formattedValueToString, getValueFormat, GrafanaTheme2 } from '@grafana/ import { useStyles2 } from '../../themes'; import { trimFileName } from '../../utils/file'; -import { Trans } from '../../utils/i18n'; +import { t, Trans } from '../../utils/i18n'; import { Button } from '../Button'; import { Icon } from '../Icon/Icon'; import { IconButton } from '../IconButton/IconButton'; @@ -26,7 +26,14 @@ export function FileListItem({ file: customFile, removeFile }: FileListItemProps return ( <> {error.message} - {retryUpload && } + {retryUpload && ( + + )} {removeFile && ( diff --git a/packages/grafana-ui/src/components/InteractiveTable/Expander/index.tsx b/packages/grafana-ui/src/components/InteractiveTable/Expander/index.tsx index e40d34d4ae8..ac9a4563f67 100644 --- a/packages/grafana-ui/src/components/InteractiveTable/Expander/index.tsx +++ b/packages/grafana-ui/src/components/InteractiveTable/Expander/index.tsx @@ -1,6 +1,7 @@ import { css } from '@emotion/css'; import { CellProps, HeaderProps } from 'react-table'; +import { t } from '../../../utils/i18n'; import { IconButton } from '../../IconButton/IconButton'; const expanderContainerStyles = css({ @@ -13,7 +14,7 @@ export function ExpanderCell({ row, __rowID }: CellProps >((props [onChange] ); - return ; + return ( + + ); }); FieldNameByRegexMatcherEditor.displayName = 'FieldNameByRegexMatcherEditor'; diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldValueMatcher.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldValueMatcher.tsx index 3efd06c618e..f5d28b03df7 100644 --- a/packages/grafana-ui/src/components/MatchersUI/FieldValueMatcher.tsx +++ b/packages/grafana-ui/src/components/MatchersUI/FieldValueMatcher.tsx @@ -14,6 +14,7 @@ import { import { ComparisonOperation } from '@grafana/schema'; import { useStyles2 } from '../../themes'; +import { t } from '../../utils/i18n'; import { Input } from '../Input/Input'; import { Select } from '../Select/Select'; @@ -70,7 +71,7 @@ export const FieldValueMatcherEditor = ({ options, onChange }: Props) => { value={reducer.current} options={reducer.options} onChange={onSetReducer} - placeholder="Select field reducer" + placeholder={t('grafana-ui.field-value-matcher.select-field-placeholder', 'Select field reducer')} /> {opts.reducer && !isBool && ( <> @@ -78,7 +79,7 @@ export const FieldValueMatcherEditor = ({ options, onChange }: Props) => { value={comparisonOperationOptions.find((v) => v.value === opts.op)} options={comparisonOperationOptions} onChange={onChangeOp} - aria-label={'Comparison operator'} + aria-label={t('grafana-ui.field-value-matcher.operator-label', 'Comparison operator')} width={19} /> diff --git a/packages/grafana-ui/src/components/Menu/MenuItem.tsx b/packages/grafana-ui/src/components/Menu/MenuItem.tsx index c2a4654113a..f295b8eb22b 100644 --- a/packages/grafana-ui/src/components/Menu/MenuItem.tsx +++ b/packages/grafana-ui/src/components/Menu/MenuItem.tsx @@ -7,6 +7,7 @@ import { GrafanaTheme2, LinkTarget } from '@grafana/data'; import { useStyles2 } from '../../themes'; import { getFocusStyles } from '../../themes/mixins'; import { IconName } from '../../types/icon'; +import { t } from '../../utils/i18n'; import { Icon } from '../Icon/Icon'; import { Stack } from '../Layout/Stack/Stack'; @@ -180,7 +181,7 @@ export const MenuItem = React.memo(
{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 {