i18n: use @grafana/i18n within @grafana/ui (#106691)

packages/grafana-i18n/src/i18n.tsx

@@ -11,6 +11,17 @@ import { ResourceLoader, Resources, TFunction, TransProps, TransType } from './t
 let tFunc: I18NextTFunction<string[], undefined> | undefined;
 let transComponent: TransType;
 
+function initTFuncAndTransComponent({ id, ns }: { id?: string; ns?: string[] } = {}) {
+  if (id) {
+    tFunc = getI18nInstance().getFixedT(null, id);
+    transComponent = (props: TransProps) => <I18NextTrans shouldUnescape ns={id} {...props} />;
+    return;
+  }
+
+  tFunc = getI18nInstance().t;
+  transComponent = (props: TransProps) => <I18NextTrans shouldUnescape ns={ns} {...props} />;
+}
+
 // exported for testing
 export async function loadPluginResources(id: string, language: string, loaders?: ResourceLoader[]) {
   if (!loaders?.length) {
@@ -41,8 +52,7 @@ export function initDefaultI18nInstance() {
     returnEmptyString: false,
     lng: DEFAULT_LANGUAGE, // this should be the locale of the phrases in our source JSX
   });
-  tFunc = getI18nInstance().t;
-  transComponent = (props: TransProps) => <I18NextTrans shouldUnescape {...props} />;
+  initTFuncAndTransComponent();
   return initPromise;
 }
 
@@ -63,8 +73,7 @@ export async function initPluginTranslations(id: string, loaders?: ResourceLoade
   initDefaultReactI18nInstance();
 
   const language = getResolvedLanguage();
-  tFunc = getI18nInstance().getFixedT(null, id);
-  transComponent = (props: TransProps) => <I18NextTrans shouldUnescape ns={id} {...props} />;
+  initTFuncAndTransComponent({ id });
 
   await loadPluginResources(id, language, loaders);
 
@@ -136,8 +145,7 @@ async function initTranslations({
 
   await getI18nInstance().init(options);
 
-  tFunc = getI18nInstance().t;
-  transComponent = (props: TransProps) => <I18NextTrans shouldUnescape ns={ns} {...props} />;
+  initTFuncAndTransComponent({ ns });
 
   return {
     language: getResolvedLanguage(),

packages/grafana-i18n/src/types.ts

@@ -46,6 +46,10 @@ interface TransProps {
    * Values to interpolate into the translation
    */
   values?: Record<string, unknown>;
+  /**
+   * Class name for the Trans component
+   */
+  className?: string;
 }
 
 /**

packages/grafana-ui/src/components/Actions/ActionButton.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 
 import { ActionModel, Field, ActionVariableInput } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useTheme2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { Button, ButtonProps } from '../Button/Button';
 import { ConfirmModal } from '../ConfirmModal/ConfirmModal';
 

packages/grafana-ui/src/components/Actions/VariablesInputModal.tsx

@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
 
 import { ActionModel, ActionVariableInput } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { Button } from '../Button/Button';
 import { Field } from '../Forms/Field';
 import { FieldSet } from '../Forms/FieldSet';

packages/grafana-ui/src/components/Alert/Alert.tsx

@@ -4,10 +4,10 @@ import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { t } from '@grafana/i18n';
 
 import { useTheme2 } from '../../themes/ThemeContext';
 import { IconName } from '../../types/icon';
-import { t } from '../../utils/i18n';
 import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
 import { Box } from '../Layout/Box/Box';

packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.tsx

@@ -3,8 +3,9 @@ import { debounce } from 'lodash';
 import { useCallback, useMemo, useRef } from 'react';
 import * as React from 'react';
 
+import { Trans } from '@grafana/i18n';
+
 import { useStyles2 } from '../../themes/ThemeContext';
-import { Trans } from '../../utils/i18n';
 import { Field, FieldProps } from '../Forms/Field';
 import { InlineToast } from '../InlineToast/InlineToast';
 

packages/grafana-ui/src/components/Card/Card.tsx

@@ -3,10 +3,10 @@ import { memo, cloneElement, FC, useMemo, useContext, ReactNode } from 'react';
 import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
 import { getFocusStyles } from '../../themes/mixins';
-import { t } from '../../utils/i18n';
 
 import { CardContainer, CardContainerProps, getCardContainerStyles } from './CardContainer';
 

packages/grafana-ui/src/components/Carousel/Carousel.tsx

@@ -5,9 +5,9 @@ import { OverlayContainer, useOverlay } from '@react-aria/overlays';
 import { useState, useEffect, useRef } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { Alert } from '../Alert/Alert';
 import { clearButtonStyles } from '../Button/Button';
 import { IconButton } from '../IconButton/IconButton';

packages/grafana-ui/src/components/Cascader/Cascader.tsx

@@ -5,10 +5,10 @@ import { PureComponent } from 'react';
 import * as React from 'react';
 
 import { SelectableValue } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { withTheme2 } from '../../themes/ThemeContext';
 import { Themeable2 } from '../../types/theme';
-import { t } from '../../utils/i18n';
 import { Icon } from '../Icon/Icon';
 import { IconButton } from '../IconButton/IconButton';
 import { Input } from '../Input/Input';

packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx

@@ -3,9 +3,9 @@ import { useCallback, useRef, useState, useEffect } from 'react';
 import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { Button, ButtonProps } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
 import { InlineToast } from '../InlineToast/InlineToast';

packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx

@@ -4,11 +4,11 @@ import { Component } from 'react';
 import * as React from 'react';
 
 import { GrafanaTheme2, colorManipulator } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { withTheme2 } from '../../themes/ThemeContext';
 import { stylesFactory } from '../../themes/stylesFactory';
 import { Themeable2 } from '../../types/theme';
-import { t } from '../../utils/i18n';
 import { Tab } from '../Tabs/Tab';
 import { TabsBar } from '../Tabs/TabsBar';
 import { PopoverContentProps } from '../Tooltip/types';

packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx

@@ -5,9 +5,9 @@ import tinycolor from 'tinycolor2';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { t } from '@grafana/i18n';
 
 import { useTheme2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 
 /** @internal */
 export enum ColorSwatchVariant {

packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx

@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2, useTheme2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 
 import { ColorSwatch } from './ColorSwatch';
 import NamedColorsGroup from './NamedColorsGroup';

packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx

@@ -1,5 +1,6 @@
+import { t } from '@grafana/i18n';
+
 import { withTheme2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { InlineField } from '../Forms/InlineField';
 import { InlineSwitch } from '../Switch/Switch';
 import { PopoverContentProps } from '../Tooltip/types';

packages/grafana-ui/src/components/Combobox/Combobox.tsx

@@ -3,8 +3,9 @@ import { useVirtualizer, type Range } from '@tanstack/react-virtual';
 import { useCombobox } from 'downshift';
 import React, { useCallback, useId, useMemo } from 'react';
 
+import { t } from '@grafana/i18n';
+
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { Icon } from '../Icon/Icon';
 import { AutoSizeInput } from '../Input/AutoSizeInput';
 import { Input, Props as InputProps } from '../Input/Input';

packages/grafana-ui/src/components/Combobox/MessageRows.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 
-import { Trans } from '../../utils/i18n';
+import { Trans } from '@grafana/i18n';
+
 import { Icon } from '../Icon/Icon';
 import { Box } from '../Layout/Box/Box';
 import { Stack } from '../Layout/Stack/Stack';

packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx

@@ -2,8 +2,9 @@ import { cx } from '@emotion/css';
 import { useCombobox, useMultipleSelection } from 'downshift';
 import { useCallback, useMemo, useState } from 'react';
 
+import { t } from '@grafana/i18n';
+
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { Icon } from '../Icon/Icon';
 import { Box } from '../Layout/Box/Box';
 import { Portal } from '../Portal/Portal';

packages/grafana-ui/src/components/Combobox/ValuePill.tsx

@@ -2,9 +2,9 @@ import { css } from '@emotion/css';
 import { forwardRef } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { IconButton } from '../IconButton/IconButton';
 
 interface ValuePillProps {

packages/grafana-ui/src/components/Combobox/useOptions.ts

@@ -4,7 +4,7 @@
 import { debounce } from 'lodash';
 import { useState, useCallback, useMemo } from 'react';
 
-import { t } from '../../utils/i18n';
+import { t } from '@grafana/i18n';
 
 import { fuzzyFind, itemToString } from './filter';
 import { ComboboxOption } from './types';

packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx

@@ -3,10 +3,10 @@ import { ReactElement, useEffect, useRef, useState } from 'react';
 import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { Trans } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
 import { ComponentSize } from '../../types/size';
-import { Trans } from '../../utils/i18n';
 import { Button, ButtonVariant } from '../Button/Button';
 
 export interface Props {

packages/grafana-ui/src/components/ConfirmModal/ConfirmContent.tsx

@@ -5,9 +5,9 @@ import { useForm } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { Button, ButtonVariant } from '../Button/Button';
 import { Field } from '../Forms/Field';
 import { Input } from '../Input/Input';

packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx

@@ -2,9 +2,9 @@ import { css } from '@emotion/css';
 import { memo, ChangeEvent } from 'react';
 
 import { VariableSuggestion, GrafanaTheme2, DataLink } from '@grafana/data';
+import { t, Trans } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t, Trans } from '../../utils/i18n';
 import { Field } from '../Forms/Field';
 import { Input } from '../Input/Input';
 import { Switch } from '../Switch/Switch';

packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinkEditorModalContent.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 
 import { DataFrame, DataLink, VariableSuggestion } from '@grafana/data';
+import { Trans } from '@grafana/i18n';
 
-import { Trans } from '../../../utils/i18n';
 import { Button } from '../../Button/Button';
 import { Modal } from '../../Modal/Modal';
 import { DataLinkEditor } from '../DataLinkEditor';

packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditorBase.tsx

@@ -4,9 +4,9 @@ import { cloneDeep } from 'lodash';
 import { useEffect, useState } from 'react';
 
 import { Action, DataFrame, DataLink, GrafanaTheme2 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../../themes/ThemeContext';
-import { t } from '../../../utils/i18n';
 import { Button } from '../../Button/Button';
 import { Modal } from '../../Modal/Modal';
 

packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItemBase.tsx

@@ -2,9 +2,9 @@ import { css, cx } from '@emotion/css';
 import { Draggable } from '@hello-pangea/dnd';
 
 import { Action, DataFrame, DataLink, GrafanaTheme2 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../../themes/ThemeContext';
-import { t } from '../../../utils/i18n';
 import { Badge } from '../../Badge/Badge';
 import { Icon } from '../../Icon/Icon';
 import { IconButton } from '../../IconButton/IconButton';

packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx

@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
 
 import { Field, GrafanaTheme2, LinkModel } from '@grafana/data';
+import { Trans } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { Trans } from '../../utils/i18n';
 import { Icon } from '../Icon/Icon';
 
 import { DataLinkButton } from './DataLinkButton';

packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx

@@ -1,7 +1,7 @@
 import { DataSourceJsonData, DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import { t, Trans } from '@grafana/i18n';
 
 import { InlineSwitch } from '../../components/Switch/Switch';
-import { t, Trans } from '../../utils/i18n';
 import { InlineField } from '../Forms/InlineField';
 
 export interface Props<T extends DataSourceJsonData>

packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 
+import { t } from '@grafana/i18n';
+
 import { InlineField } from '../../components/Forms/InlineField';
-import { t } from '../../utils/i18n';
 import { FormField } from '../FormField/FormField';
 import { SecretFormField } from '../SecretFormField/SecretFormField';
 

packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx

@@ -1,6 +1,7 @@
 import { ChangeEvent, MouseEvent } from 'react';
 
-import { Trans } from '../../utils/i18n';
+import { Trans } from '@grafana/i18n';
+
 import { Button } from '../Button/Button';
 import { InlineField } from '../Forms/InlineField';
 import { InlineFieldRow } from '../Forms/InlineFieldRow';

packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx

@@ -3,9 +3,9 @@ import { uniqueId } from 'lodash';
 import { PureComponent } from 'react';
 
 import { DataSourceSettings } from '@grafana/data';
+import { t, Trans } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t, Trans } from '../../utils/i18n';
 import { Button } from '../Button/Button';
 import { FormField } from '../FormField/FormField';
 import { Icon } from '../Icon/Icon';

packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx

@@ -3,9 +3,9 @@ import { useState, useCallback, useId, useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { t, Trans } from '@grafana/i18n';
 
 import { useTheme2 } from '../../themes/ThemeContext';
-import { t, Trans } from '../../utils/i18n';
 import { Alert } from '../Alert/Alert';
 import { Button } from '../Button/Button';
 import { Field } from '../Forms/Field';

packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx

@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { InlineField } from '../Forms/InlineField';
 import { Stack } from '../Layout/Stack/Stack';
 import { InlineSwitch } from '../Switch/Switch';

packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx

@@ -1,7 +1,7 @@
 import { DataSourceJsonData, DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import { t, Trans } from '@grafana/i18n';
 
 import { InlineSwitch } from '../../components/Switch/Switch';
-import { t, Trans } from '../../utils/i18n';
 import { InlineField } from '../Forms/InlineField';
 
 export interface Props<T extends DataSourceJsonData>

packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx

@@ -2,8 +2,8 @@ import { css, cx } from '@emotion/css';
 import * as React from 'react';
 
 import { KeyValue } from '@grafana/data';
+import { t, Trans } from '@grafana/i18n';
 
-import { t, Trans } from '../../utils/i18n';
 import { FormField } from '../FormField/FormField';
 import { Icon } from '../Icon/Icon';
 import { Tooltip } from '../Tooltip/Tooltip';

packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx

@@ -19,9 +19,9 @@ import {
   TimeZone,
 } from '@grafana/data';
 import { Components } from '@grafana/e2e-selectors';
+import { t, Trans } from '@grafana/i18n';
 
 import { useStyles2, useTheme2 } from '../../../themes/ThemeContext';
-import { t, Trans } from '../../../utils/i18n';
 import { Button } from '../../Button/Button';
 import { InlineField } from '../../Forms/InlineField';
 import { Icon } from '../../Icon/Icon';

packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx

@@ -6,9 +6,9 @@ import { useOverlay } from '@react-aria/overlays';
 import { FormEvent, useCallback, useRef, useState } from 'react';
 
 import { RelativeTimeRange, GrafanaTheme2, TimeOption } from '@grafana/data';
+import { t, Trans } from '@grafana/i18n';
 
 import { useStyles2 } from '../../../themes/ThemeContext';
-import { Trans, t } from '../../../utils/i18n';
 import { Button } from '../../Button/Button';
 import { Field } from '../../Forms/Field';
 import { Icon } from '../../Icon/Icon';

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx

@@ -16,9 +16,9 @@ import {
   getTimeZoneInfo,
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { t, Trans } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t, Trans } from '../../utils/i18n';
 import { ButtonGroup } from '../Button/ButtonGroup';
 import { getModalStyles } from '../Modal/getModalStyles';
 import { getPortalContainer } from '../Portal/Portal';

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx

@@ -3,9 +3,9 @@ import { useCallback } from 'react';
 import Calendar, { CalendarType } from 'react-calendar';
 
 import { GrafanaTheme2, dateTimeParse, DateTime, TimeZone } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../../themes/ThemeContext';
-import { t } from '../../../utils/i18n';
 import { Icon } from '../../Icon/Icon';
 import { getWeekStart, WeekStart } from '../WeekStartPicker';
 import { adjustDateForReactCalendar } from '../utils/adjustDateForReactCalendar';

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarFooter.tsx

@@ -1,4 +1,5 @@
-import { Trans } from '../../../utils/i18n';
+import { Trans } from '@grafana/i18n';
+
 import { Button } from '../../Button/Button';
 import { Stack } from '../../Layout/Stack/Stack';
 

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarHeader.tsx

@@ -1,6 +1,6 @@
 import { selectors } from '@grafana/e2e-selectors';
+import { t, Trans } from '@grafana/i18n';
 
-import { Trans, t } from '../../../utils/i18n';
 import { IconButton } from '../../IconButton/IconButton';
 import { Stack } from '../../Layout/Stack/Stack';
 

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx

@@ -3,10 +3,10 @@ import { memo, useMemo, useState } from 'react';
 
 import { GrafanaTheme2, isDateTime, rangeUtil, RawTimeRange, TimeOption, TimeRange, TimeZone } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { t, Trans } from '@grafana/i18n';
 
 import { useStyles2, useTheme2 } from '../../../themes/ThemeContext';
 import { getFocusStyles } from '../../../themes/mixins';
-import { t, Trans } from '../../../utils/i18n';
 import { FilterInput } from '../../FilterInput/FilterInput';
 import { Icon } from '../../Icon/Icon';
 import { WeekStart } from '../WeekStartPicker';

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx

@@ -5,9 +5,9 @@ import * as React from 'react';
 
 import { getTimeZoneInfo, GrafanaTheme2, TimeZone } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { t, Trans } from '@grafana/i18n';
 
 import { useStyles2 } from '../../../themes/ThemeContext';
-import { t, Trans } from '../../../utils/i18n';
 import { Button } from '../../Button/Button';
 import { Combobox } from '../../Combobox/Combobox';
 import { Field } from '../../Forms/Field';

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx

@@ -14,9 +14,9 @@ import {
   TimeZone,
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { t, Trans } from '@grafana/i18n';
 
 import { useStyles2 } from '../../../themes/ThemeContext';
-import { t, Trans } from '../../../utils/i18n';
 import { Button } from '../../Button/Button';
 import { Field } from '../../Forms/Field';
 import { Icon } from '../../Icon/Icon';

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx

@@ -2,9 +2,9 @@ import { css } from '@emotion/css';
 import { useRef, ReactNode } from 'react';
 
 import { GrafanaTheme2, TimeOption } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../../themes/ThemeContext';
-import { t } from '../../../utils/i18n';
 
 import { TimePickerTitle } from './TimePickerTitle';
 import { TimeRangeOption } from './TimeRangeOption';

packages/grafana-ui/src/components/DateTimePickers/TimeSyncButton.tsx

@@ -1,4 +1,5 @@
-import { t } from '../../utils/i18n';
+import { t } from '@grafana/i18n';
+
 import { ToolbarButton } from '../ToolbarButton/ToolbarButton';
 import { Tooltip } from '../Tooltip/Tooltip';
 

packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx

@@ -10,8 +10,8 @@ import {
   TimeZone,
   InternalTimeZones,
 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
-import { t } from '../../utils/i18n';
 import { Select } from '../Select/Select';
 
 import { TimeZoneGroup } from './TimeZonePicker/TimeZoneGroup';

packages/grafana-ui/src/components/Drawer/Drawer.tsx

@@ -8,9 +8,9 @@ import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { getDragStyles } from '../DragHandle/DragHandle';
 import { IconButton } from '../IconButton/IconButton';
 import { ScrollContainer } from '../ScrollContainer/ScrollContainer';

packages/grafana-ui/src/components/FeatureBadge/FeatureBadge.tsx

@@ -1,6 +1,6 @@
 import { FeatureState } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
-import { t } from '../../utils/i18n';
 import { Badge, BadgeProps } from '../Badge/Badge';
 
 export interface FeatureBadgeProps {

packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx

@@ -4,9 +4,9 @@ import { ReactNode, useCallback, useState } from 'react';
 import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection, useDropzone, ErrorCode } from 'react-dropzone';
 
 import { formattedValueToString, getValueFormat, GrafanaTheme2 } from '@grafana/data';
+import { t, Trans } from '@grafana/i18n';
 
 import { useTheme2 } from '../../themes/ThemeContext';
-import { t, Trans } from '../../utils/i18n';
 import { Alert } from '../Alert/Alert';
 import { Icon } from '../Icon/Icon';
 

packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx

@@ -1,10 +1,10 @@
 import { css } from '@emotion/css';
 
 import { formattedValueToString, getValueFormat, GrafanaTheme2 } from '@grafana/data';
+import { t, Trans } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
 import { trimFileName } from '../../utils/file';
-import { t, Trans } from '../../utils/i18n';
 import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
 import { IconButton } from '../IconButton/IconButton';

packages/grafana-ui/src/components/FileUpload/FileUpload.tsx

@@ -5,12 +5,12 @@ import { v4 as uuidv4 } from 'uuid';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
 import { getFocusStyles } from '../../themes/mixins';
 import { ComponentSize } from '../../types/size';
 import { trimFileName } from '../../utils/file';
-import { t } from '../../utils/i18n';
 import { getButtonStyles } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
 

packages/grafana-ui/src/components/FilterInput/FilterInput.tsx

@@ -1,8 +1,8 @@
 import { forwardRef, useRef, HTMLProps } from 'react';
 
 import { escapeStringForRegex, unEscapeStringFromRegex } from '@grafana/data';
+import { Trans } from '@grafana/i18n';
 
-import { Trans } from '../../utils/i18n';
 import { useCombinedRefs } from '../../utils/useCombinedRefs';
 import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';

packages/grafana-ui/src/components/InteractiveTable/Expander/index.tsx

@@ -1,7 +1,8 @@
 import { css } from '@emotion/css';
 import { CellProps, HeaderProps } from 'react-table';
 
-import { t } from '../../../utils/i18n';
+import { t } from '@grafana/i18n';
+
 import { IconButton } from '../../IconButton/IconButton';
 
 const expanderContainerStyles = css({

packages/grafana-ui/src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx

@@ -2,8 +2,8 @@ import { memo, useCallback } from 'react';
 import * as React from 'react';
 
 import { FieldMatcherID, fieldMatchers } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
-import { t } from '../../utils/i18n';
 import { Input } from '../Input/Input';
 
 import { MatcherUIProps, FieldMatcherUIRegistryItem } from './types';

packages/grafana-ui/src/components/MatchersUI/FieldValueMatcher.tsx

@@ -11,10 +11,10 @@ import {
   SelectableValue,
   GrafanaTheme2,
 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 import { ComparisonOperation } from '@grafana/schema';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { Input } from '../Input/Input';
 import { Select } from '../Select/Select';
 

packages/grafana-ui/src/components/Menu/MenuItem.tsx

@@ -3,11 +3,11 @@ import { ReactElement, useCallback, useState, useRef, useImperativeHandle, CSSPr
 import * as React from 'react';
 
 import { GrafanaTheme2, LinkTarget } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
 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';
 

packages/grafana-ui/src/components/Modal/Modal.tsx

@@ -5,9 +5,10 @@ import { OverlayContainer, useOverlay } from '@react-aria/overlays';
 import { PropsWithChildren, useRef } from 'react';
 import * as React from 'react';
 
+import { t } from '@grafana/i18n';
+
 import { useStyles2 } from '../../themes/ThemeContext';
 import { IconName } from '../../types/icon';
-import { t } from '../../utils/i18n';
 import { IconButton } from '../IconButton/IconButton';
 import { Stack } from '../Layout/Stack/Stack';
 

packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx

@@ -2,9 +2,9 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { useAsyncDependency } from '../../utils/useAsyncDependency';
 import { ErrorWithStack } from '../ErrorBoundary/ErrorWithStack';
 import { LoadingPlaceholder } from '../LoadingPlaceholder/LoadingPlaceholder';

packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx

@@ -3,11 +3,11 @@ import { memo, Children, ReactNode } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
 import { getFocusStyles } from '../../themes/mixins';
 import { IconName } from '../../types/icon';
-import { t } from '../../utils/i18n';
 import { Icon } from '../Icon/Icon';
 import { IconButton } from '../IconButton/IconButton';
 import { Link } from '../Link/Link';

packages/grafana-ui/src/components/Pagination/Pagination.tsx

@@ -1,8 +1,9 @@
 import { css, cx } from '@emotion/css';
 import { useMemo } from 'react';
 
+import { t } from '@grafana/i18n';
+
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { Button, ButtonVariant } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
 

packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx

@@ -2,9 +2,9 @@ import { css, cx, keyframes } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { Icon } from '../Icon/Icon';
 import { Tooltip } from '../Tooltip/Tooltip';
 

packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx

@@ -5,11 +5,11 @@ import { useMeasure, useToggle } from 'react-use';
 
 import { GrafanaTheme2, LoadingState } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { t } from '@grafana/i18n';
 
 import { useStyles2, useTheme2 } from '../../themes/ThemeContext';
 import { getFocusStyles } from '../../themes/mixins';
 import { DelayRender } from '../../utils/DelayRender';
-import { t } from '../../utils/i18n';
 import { usePointerDistance } from '../../utils/usePointerDistance';
 import { useElementSelection } from '../ElementSelectionContext/ElementSelectionContext';
 import { Icon } from '../Icon/Icon';

packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx

@@ -2,8 +2,8 @@ import { cx } from '@emotion/css';
 import { ReactElement, useCallback } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
+import { t } from '@grafana/i18n';
 
-import { t } from '../../utils/i18n';
 import { Dropdown } from '../Dropdown/Dropdown';
 import { ToolbarButton } from '../ToolbarButton/ToolbarButton';
 import { TooltipPlacement } from '../Tooltip/types';

packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx

@@ -4,8 +4,8 @@ import { PureComponent } from 'react';
 
 import { SelectableValue, parseDuration } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { t } from '@grafana/i18n';
 
-import { t } from '../../utils/i18n';
 import { ButtonGroup } from '../Button/ButtonGroup';
 import { ButtonSelect } from '../Dropdown/ButtonSelect';
 import { ToolbarButton, ToolbarButtonVariant } from '../ToolbarButton/ToolbarButton';

packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx

@@ -3,7 +3,8 @@ import { omit } from 'lodash';
 import { InputHTMLAttributes } from 'react';
 import * as React from 'react';
 
-import { Trans } from '../../utils/i18n';
+import { Trans } from '@grafana/i18n';
+
 import { Button } from '../Button/Button';
 import { FormField } from '../FormField/FormField';
 import { Field } from '../Forms/Field';

packages/grafana-ui/src/components/Segment/SegmentAsync.tsx

@@ -6,9 +6,9 @@ import { useAsyncFn } from 'react-use';
 import { type AsyncState } from 'react-use/lib/useAsync';
 
 import { SelectableValue } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { InlineLabel } from '../Forms/InlineLabel';
 
 import { SegmentSelect } from './SegmentSelect';

packages/grafana-ui/src/components/Select/MultiValue.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 
+import { t } from '@grafana/i18n';
+
 import { useTheme2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { IconButton, Props as IconButtonProps } from '../IconButton/IconButton';
 
 import { getSelectStyles } from './getSelectStyles';

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -12,9 +12,9 @@ import { default as AsyncCreatable } from 'react-select/async-creatable';
 import Creatable from 'react-select/creatable';
 
 import { SelectableValue, toOption } from '@grafana/data';
+import { t, Trans } from '@grafana/i18n';
 
 import { useTheme2 } from '../../themes/ThemeContext';
-import { t, Trans } from '../../utils/i18n';
 import { Icon } from '../Icon/Icon';
 
 import { CustomInput } from './CustomInput';

packages/grafana-ui/src/components/Select/SelectMenu.tsx

@@ -6,9 +6,9 @@ import { FixedSizeList as List } from 'react-window';
 
 import { SelectableValue, toIconName } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { t, Trans } from '@grafana/i18n';
 
 import { useTheme2 } from '../../themes/ThemeContext';
-import { t, Trans } from '../../utils/i18n';
 import { clearButtonStyles } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
 import { ScrollContainer } from '../ScrollContainer/ScrollContainer';

packages/grafana-ui/src/components/Spinner/Spinner.tsx

@@ -3,10 +3,10 @@ import * as React from 'react';
 import SVG from 'react-inlinesvg';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
 import { IconSize, isIconSize } from '../../types/icon';
-import { t } from '../../utils/i18n';
 import { spin } from '../../utils/keyframes';
 import { Icon } from '../Icon/Icon';
 import { getIconRoot, getIconSubDir } from '../Icon/utils';

packages/grafana-ui/src/components/Table/CellActions.tsx

@@ -1,8 +1,9 @@
 import { useCallback } from 'react';
 import * as React from 'react';
 
+import { t } from '@grafana/i18n';
+
 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/types';

packages/grafana-ui/src/components/Table/TableCellInspector.tsx

@@ -1,7 +1,8 @@
 import { isString } from 'lodash';
 import { useState } from 'react';
 
-import { t, Trans } from '../../utils/i18n';
+import { t, Trans } from '@grafana/i18n';
+
 import { ClipboardButton } from '../ClipboardButton/ClipboardButton';
 import { Drawer } from '../Drawer/Drawer';
 import { Stack } from '../Layout/Stack/Stack';

packages/grafana-ui/src/components/Table/TableNG/Cells/RowExpander.tsx

@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../../../themes/ThemeContext';
-import { t } from '../../../../utils/i18n';
 import { Icon } from '../../../Icon/Icon';
 import { RowExpanderNGProps } from '../types';
 

packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx

@@ -4,10 +4,10 @@ import { Geometry } from 'ol/geom';
 import { ReactNode, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { FieldType, GrafanaTheme2, isDataFrame, isTimeSeriesFrame } from '@grafana/data';
+import { t } from '@grafana/i18n';
 import { TableAutoCellOptions, TableCellDisplayMode } from '@grafana/schema';
 
 import { useStyles2 } from '../../../../themes/ThemeContext';
-import { t } from '../../../../utils/i18n';
 import { IconButton } from '../../../IconButton/IconButton';
 // import { GeoCell } from '../../Cells/GeoCell';
 import { TableCellInspectorMode } from '../../TableCellInspector';

packages/grafana-ui/src/components/Table/TableNG/Filter/FilterList.tsx

@@ -4,9 +4,9 @@ import * as React from 'react';
 import { FixedSizeList as List, ListChildComponentProps } from 'react-window';
 
 import { GrafanaTheme2, formattedValueToString, getValueFormat, SelectableValue } from '@grafana/data';
+import { Trans } from '@grafana/i18n';
 
 import { useStyles2, useTheme2 } from '../../../../themes/ThemeContext';
-import { Trans } from '../../../../utils/i18n';
 import { Checkbox } from '../../../Forms/Checkbox';
 import { Label } from '../../../Forms/Label';
 import { Stack } from '../../../Layout/Stack/Stack';

packages/grafana-ui/src/components/Table/TableNG/Filter/FilterPopup.tsx

@@ -2,9 +2,9 @@ import { css } from '@emotion/css';
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { Field, GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { t, Trans } from '@grafana/i18n';
 
 import { useStyles2, useTheme2 } from '../../../../themes/ThemeContext';
-import { t, Trans } from '../../../../utils/i18n';
 import { Button } from '../../../Button/Button';
 import { ClickOutsideWrapper } from '../../../ClickOutsideWrapper/ClickOutsideWrapper';
 import { ButtonSelect } from '../../../Dropdown/ButtonSelect';

packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx

@@ -16,10 +16,10 @@ import {
   GrafanaTheme2,
   ReducerID,
 } from '@grafana/data';
+import { t, Trans } from '@grafana/i18n';
 import { TableCellDisplayMode } from '@grafana/schema';
 
 import { useStyles2, useTheme2 } from '../../../themes/ThemeContext';
-import { t, Trans } from '../../../utils/i18n';
 import { ContextMenu } from '../../ContextMenu/ContextMenu';
 import { MenuItem } from '../../Menu/MenuItem';
 import { Pagination } from '../../Pagination/Pagination';

packages/grafana-ui/src/components/Table/TableNG/utils.test.ts

@@ -12,6 +12,7 @@ import {
   LinkModel,
   ValueLinkConfig,
 } from '@grafana/data';
+import { Trans } from '@grafana/i18n';
 import {
   BarGaugeDisplayMode,
   TableCellBackgroundDisplayMode,
@@ -19,7 +20,6 @@ import {
   TableCellHeight,
 } from '@grafana/schema';
 
-import { Trans } from '../../../utils/i18n';
 import { PanelContext } from '../../PanelChrome';
 
 import { mapFrameToDataGrid, myRowRenderer } from './TableNG';

packages/grafana-ui/src/components/Table/TableRT/FilterList.tsx

@@ -4,9 +4,9 @@ import * as React from 'react';
 import { FixedSizeList as List, ListChildComponentProps } from 'react-window';
 
 import { GrafanaTheme2, formattedValueToString, getValueFormat, SelectableValue } from '@grafana/data';
+import { t, Trans } from '@grafana/i18n';
 
 import { useStyles2, useTheme2 } from '../../../themes/ThemeContext';
-import { t, Trans } from '../../../utils/i18n';
 import { ButtonSelect } from '../../Dropdown/ButtonSelect';
 import { FilterInput } from '../../FilterInput/FilterInput';
 import { Checkbox } from '../../Forms/Checkbox';

packages/grafana-ui/src/components/Table/TableRT/FilterPopup.tsx

@@ -3,9 +3,9 @@ import { useCallback, useMemo, useState } from 'react';
 import * as React from 'react';
 
 import { Field, GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { t, Trans } from '@grafana/i18n';
 
 import { useStyles2, useTheme2 } from '../../../themes/ThemeContext';
-import { t, Trans } from '../../../utils/i18n';
 import { Button } from '../../Button/Button';
 import { ClickOutsideWrapper } from '../../ClickOutsideWrapper/ClickOutsideWrapper';
 import { Label } from '../../Forms/Label';

packages/grafana-ui/src/components/Table/TableRT/RowExpander.tsx

@@ -1,4 +1,5 @@
-import { t } from '../../../utils/i18n';
+import { t } from '@grafana/i18n';
+
 import { Icon } from '../../Icon/Icon';
 import { GrafanaTableRow } from '../types';
 

packages/grafana-ui/src/components/Table/TableRT/Table.tsx

@@ -12,10 +12,10 @@ import { VariableSizeList } from 'react-window';
 
 import { FieldType, ReducerID, getRowUniqueId, getFieldMatcher } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { Trans } from '@grafana/i18n';
 import { TableCellHeight } from '@grafana/schema';
 
 import { useTheme2 } from '../../../themes/ThemeContext';
-import { Trans } from '../../../utils/i18n';
 import { CustomScrollbar } from '../../CustomScrollbar/CustomScrollbar';
 import { Pagination } from '../../Pagination/Pagination';
 import { TableCellInspector } from '../TableCellInspector';

packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx

@@ -4,11 +4,11 @@ import { PureComponent } from 'react';
 import * as React from 'react';
 
 import { DataFrame, CSVConfig, readCSV, GrafanaTheme2 } from '@grafana/data';
+import { t, Trans } from '@grafana/i18n';
 
 import { withTheme2 } from '../../themes/ThemeContext';
 import { stylesFactory } from '../../themes/stylesFactory';
 import { Themeable2 } from '../../types/theme';
-import { t, Trans } from '../../utils/i18n';
 import { Icon } from '../Icon/Icon';
 import { TextArea } from '../TextArea/TextArea';
 

packages/grafana-ui/src/components/Tags/TagList.tsx

@@ -2,10 +2,10 @@ import { css, cx } from '@emotion/css';
 import { forwardRef, memo } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2, useTheme2 } from '../../themes/ThemeContext';
 import { IconName } from '../../types/icon';
-import { t } from '../../utils/i18n';
 import { SkeletonComponent, attachSkeleton } from '../../utils/skeleton';
 
 import { OnTagClick, Tag } from './Tag';

packages/grafana-ui/src/components/TagsInput/TagItem.tsx

@@ -2,9 +2,9 @@ import { css, cx } from '@emotion/css';
 import { useMemo } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { getTagColorsFromName } from '../../utils/tags';
 import { IconButton } from '../IconButton/IconButton';
 

packages/grafana-ui/src/components/TagsInput/TagsInput.tsx

@@ -3,9 +3,9 @@ import { useCallback, useState, forwardRef } from 'react';
 import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { Trans } from '@grafana/i18n';
 
 import { useStyles2, useTheme2 } from '../../themes/ThemeContext';
-import { Trans } from '../../utils/i18n';
 import { Button } from '../Button/Button';
 import { Input } from '../Input/Input';
 

packages/grafana-ui/src/components/Toggletip/Toggletip.tsx

@@ -16,9 +16,9 @@ import { Placement } from '@popperjs/core';
 import { memo, cloneElement, isValidElement, useRef, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2, useTheme2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { buildTooltipTheme, getPlacement } from '../../utils/tooltipUtils';
 import { IconButton } from '../IconButton/IconButton';
 

packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx

@@ -5,9 +5,9 @@ import { useOverlay } from '@react-aria/overlays';
 import { Children, forwardRef, HTMLAttributes, useState, useRef, useLayoutEffect, createRef } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useTheme2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { getPortalContainer } from '../Portal/Portal';
 
 import { ToolbarButton } from './ToolbarButton';

packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx

@@ -1,8 +1,8 @@
 import { PureComponent } from 'react';
 
 import { getValueFormats, SelectableValue } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
-import { t } from '../../utils/i18n';
 import { Cascader, CascaderOption } from '../Cascader/Cascader';
 
 export interface UnitPickerProps {

packages/grafana-ui/src/components/UsersIndicator/UserIcon.tsx

@@ -2,9 +2,9 @@ import { css, cx } from '@emotion/css';
 import { useMemo, PropsWithChildren } from 'react';
 
 import { dateTime, DateTimeInput, GrafanaTheme2 } from '@grafana/data';
+import { t, Trans } from '@grafana/i18n';
 
 import { useTheme2 } from '../../themes/ThemeContext';
-import { t, Trans } from '../../utils/i18n';
 import { Tooltip } from '../Tooltip/Tooltip';
 
 import { UserView } from './types';

packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.tsx

@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 
 import { UserIcon } from './UserIcon';
 import { UserView } from './types';

packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx

@@ -3,10 +3,10 @@ import { useCallback } from 'react';
 import * as React from 'react';
 
 import { formattedValueToString, GrafanaTheme2 } from '@grafana/data';
+import { Trans } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
 import { hoverColor } from '../../themes/mixins';
-import { Trans } from '../../utils/i18n';
 
 import { VizLegendSeriesIcon } from './VizLegendSeriesIcon';
 import { VizLegendItem } from './types';

packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx

@@ -2,9 +2,9 @@ import { css, cx } from '@emotion/css';
 import * as React from 'react';
 
 import { GrafanaTheme2, GraphSeriesValue } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { t } from '../../utils/i18n';
 import { SeriesIcon } from '../VizLegend/SeriesIcon';
 
 /**

packages/grafana-ui/src/components/VizTooltip/VizTooltipFooter.tsx

@@ -2,9 +2,9 @@ import { css } from '@emotion/css';
 import { useMemo } from 'react';
 
 import { ActionModel, Field, GrafanaTheme2, LinkModel, ThemeSpacingTokens } from '@grafana/data';
+import { Trans } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { Trans } from '../../utils/i18n';
 import { ActionButton } from '../Actions/ActionButton';
 import { Button } from '../Button/Button';
 import { DataLinkButton } from '../DataLinks/DataLinkButton';

packages/grafana-ui/src/options/builder/axis.tsx

@@ -5,6 +5,7 @@ import {
   SelectableValue,
   StandardEditorProps,
 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 import { AxisColorMode, AxisConfig, AxisPlacement, ScaleDistribution, ScaleDistributionConfig } from '@grafana/schema';
 
 import { Field } from '../../components/Forms/Field';
@@ -13,7 +14,6 @@ import { Input } from '../../components/Input/Input';
 import { Stack } from '../../components/Layout/Stack/Stack';
 import { Select } from '../../components/Select/Select';
 import { graphFieldOptions } from '../../components/uPlot/config';
-import { t } from '../../utils/i18n';
 
 const category = ['Axis'];
 

packages/grafana-ui/src/options/builder/stacking.tsx

@@ -5,6 +5,7 @@ import {
   identityOverrideProcessor,
   SelectableValue,
 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 import { GraphFieldConfig, StackingConfig, StackingMode } from '@grafana/schema';
 
 import { RadioButtonGroup } from '../../components/Forms/RadioButtonGroup/RadioButtonGroup';
@@ -12,7 +13,6 @@ import { IconButton } from '../../components/IconButton/IconButton';
 import { Input } from '../../components/Input/Input';
 import { Stack } from '../../components/Layout/Stack/Stack';
 import { graphFieldOptions } from '../../components/uPlot/config';
-import { t } from '../../utils/i18n';
 
 export const StackingEditor = ({
   value,

packages/grafana-ui/src/utils/i18n.tsx

@@ -1,47 +0,0 @@
-import i18next from 'i18next';
-import { ReactElement } from 'react';
-import { Trans as I18NextTrans, initReactI18next } from 'react-i18next'; // eslint-disable-line no-restricted-imports
-
-// We want to translate grafana-ui without introducing any breaking changes for consumers
-// who use grafana-ui outside of grafana (such as grafana.com self serve). The other struggle
-// is that grafana-ui does not require a top-level provider component, so we don't get the
-// chance to do the mandatory i18next setup that <Trans /> and t() requires
-//
-// We wrap <Trans /> and t() and do a simple check if it hasn't already been set up
-// (Grafana will init i18next in app.ts), and just set it up with a minimal config
-// to use the default phrases in the source jsx.
-
-// Creates a default, english i18next instance when running outside of grafana.
-// we don't support changing the locale of grafana ui when outside of Grafana
-function initI18n() {
-  // resources is undefined by default and set either by grafana app.ts or here
-  if (typeof i18next.options.resources !== 'object') {
-    i18next.use(initReactI18next).init({
-      resources: {},
-      returnEmptyString: false,
-      lng: 'en-US', // this should be the locale of the phrases in our source JSX
-    });
-  }
-}
-
-type I18NextTransType = typeof I18NextTrans;
-type I18NextTransProps = Parameters<I18NextTransType>[0];
-
-interface TransProps extends I18NextTransProps {
-  i18nKey: string;
-  className?: string;
-}
-
-export const Trans = (props: TransProps): ReactElement => {
-  initI18n();
-  return <I18NextTrans {...props} />;
-};
-
-// Reassign t() so i18next-parser doesn't warn on dynamic key, and we can have 'failOnWarnings' enabled
-const tFunc = i18next.t;
-
-export const t = (id: string, defaultMessage: string, values?: Record<string, unknown>) => {
-  initI18n();
-
-  return tFunc(id, defaultMessage, values);
-};