diff --git a/packages/grafana-i18n/src/i18n.tsx b/packages/grafana-i18n/src/i18n.tsx
index 6a5f3f25c05..0a737a95fcc 100644
--- a/packages/grafana-i18n/src/i18n.tsx
+++ b/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(),
diff --git a/packages/grafana-i18n/src/types.ts b/packages/grafana-i18n/src/types.ts
index 52dc6d856bb..d952fb3e4a1 100644
--- a/packages/grafana-i18n/src/types.ts
+++ b/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;
 }
 
 /**
diff --git a/packages/grafana-ui/src/components/Actions/ActionButton.tsx b/packages/grafana-ui/src/components/Actions/ActionButton.tsx
index 00db7579dfd..f9ee2c39a25 100644
--- a/packages/grafana-ui/src/components/Actions/ActionButton.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/Actions/VariablesInputModal.tsx b/packages/grafana-ui/src/components/Actions/VariablesInputModal.tsx
index 53c3a283068..6524ebe4ec6 100644
--- a/packages/grafana-ui/src/components/Actions/VariablesInputModal.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx
index 5d74780eac4..56b81d14351 100644
--- a/packages/grafana-ui/src/components/Alert/Alert.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.tsx b/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.tsx
index 637af988c80..f53670b73a6 100644
--- a/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx
index dbbd20f2963..80194b56136 100644
--- a/packages/grafana-ui/src/components/Card/Card.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/Carousel/Carousel.tsx b/packages/grafana-ui/src/components/Carousel/Carousel.tsx
index 8e3ff3d4d38..8e55e744a3e 100644
--- a/packages/grafana-ui/src/components/Carousel/Carousel.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.tsx
index 44762c2bbdb..9918a77d1b9 100644
--- a/packages/grafana-ui/src/components/Cascader/Cascader.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx
index 94a49f35f04..dc8bf238ed8 100644
--- a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
index 02b62d54573..c8c9f441978 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx
index 4b6d2a29d9f..5ddd263d447 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx
+++ b/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 {
diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx
index d4cfbe381c5..5fd64e37772 100644
--- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
index 1757bf7c7ac..2c0350d9329 100644
--- a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Combobox/Combobox.tsx b/packages/grafana-ui/src/components/Combobox/Combobox.tsx
index 90ea3b2a69f..90865d8cb4f 100644
--- a/packages/grafana-ui/src/components/Combobox/Combobox.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Combobox/MessageRows.tsx b/packages/grafana-ui/src/components/Combobox/MessageRows.tsx
index 6d01a560f22..a2d45162c01 100644
--- a/packages/grafana-ui/src/components/Combobox/MessageRows.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx b/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx
index a8dd52a5fc3..4545a828325 100644
--- a/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Combobox/ValuePill.tsx b/packages/grafana-ui/src/components/Combobox/ValuePill.tsx
index ab157dde6b0..157438b65ad 100644
--- a/packages/grafana-ui/src/components/Combobox/ValuePill.tsx
+++ b/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 {
diff --git a/packages/grafana-ui/src/components/Combobox/useOptions.ts b/packages/grafana-ui/src/components/Combobox/useOptions.ts
index d35b8157b7a..8b70f96b053 100644
--- a/packages/grafana-ui/src/components/Combobox/useOptions.ts
+++ b/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';
diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx
index ca47414b3b7..5ddfd473700 100644
--- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx
+++ b/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 {
diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmContent.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmContent.tsx
index e2849a9338a..16c93cd6a37 100644
--- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmContent.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
index 48bd9a26730..5cbf57d48a4 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinkEditorModalContent.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinkEditorModalContent.tsx
index 4dce8241cad..990625d5bdb 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinkEditorModalContent.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditorBase.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditorBase.tsx
index e36444feab7..778cce834c1 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditorBase.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItemBase.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItemBase.tsx
index b541f412f43..2f505e3bd1b 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItemBase.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx b/packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx
index 7a6956e36e3..a59a374799c 100644
--- a/packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx
index 7a36fe63e49..a71a5979f58 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx
+++ b/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>
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx
index f4519057cb4..b9957730a14 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx b/packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx
index 45cb22863ff..86f00684e1b 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx
index 44d78d9c7a2..49e2abf2a2a 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
index 993291bbfeb..e57f7747494 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx
index 3d0a68738c6..9a7ddb5d705 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx
index 56e82d8a494..6004fff49e6 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx
+++ b/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>
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx
index fcd5a5ee00c..b5a1537edd8 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx
index 6b4cb6c77b0..9e553274cfc 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx
index 58e7bb2d87a..7e49593d860 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
index 1f0e8fb51e0..3888b76f6c4 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx
index e134e941b77..0615f729206 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarFooter.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarFooter.tsx
index 3cc79b765ee..0e9964b700e 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarFooter.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarHeader.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarHeader.tsx
index 8c02a21cee4..8253770e4b5 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarHeader.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
index b446ce24b8d..0bf13180e1a 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
index d00a679a9e9..69fe98c09d5 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx
index bef32e7005e..87a751ca1a1 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx
index d7877a958cc..acf2680adc0 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeSyncButton.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeSyncButton.tsx
index 467aa123905..7325ec93de9 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeSyncButton.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx
index 5af07dfe798..f41279cb983 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
index 399cecca5be..5af570c7fe9 100644
--- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/FeatureBadge/FeatureBadge.tsx b/packages/grafana-ui/src/components/FeatureBadge/FeatureBadge.tsx
index 8265ada629b..6a67913e453 100644
--- a/packages/grafana-ui/src/components/FeatureBadge/FeatureBadge.tsx
+++ b/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 {
diff --git a/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx b/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx
index 479d91d99a8..1d27de173a1 100644
--- a/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx b/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx
index 8d08665ddf1..b13066621c6 100644
--- a/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx b/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
index 2cbdd552ef5..528d4a7e193 100644
--- a/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/FilterInput/FilterInput.tsx b/packages/grafana-ui/src/components/FilterInput/FilterInput.tsx
index 41bb49be85d..93a238e7d97 100644
--- a/packages/grafana-ui/src/components/FilterInput/FilterInput.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/InteractiveTable/Expander/index.tsx b/packages/grafana-ui/src/components/InteractiveTable/Expander/index.tsx
index 59451b5c4a8..346d18b38fb 100644
--- a/packages/grafana-ui/src/components/InteractiveTable/Expander/index.tsx
+++ b/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({
diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx
index 7bc1f6e61ab..be53d365b5c 100644
--- a/packages/grafana-ui/src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldValueMatcher.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldValueMatcher.tsx
index cd7ffcb2257..70bddcbe257 100644
--- a/packages/grafana-ui/src/components/MatchersUI/FieldValueMatcher.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/Menu/MenuItem.tsx b/packages/grafana-ui/src/components/Menu/MenuItem.tsx
index 0f39c690c37..1c2fdd6c3e8 100644
--- a/packages/grafana-ui/src/components/Menu/MenuItem.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/Modal/Modal.tsx b/packages/grafana-ui/src/components/Modal/Modal.tsx
index ea35cc7948f..5ce59a89fca 100644
--- a/packages/grafana-ui/src/components/Modal/Modal.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx b/packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx
index a4875ca978a..bdeca4ee5c2 100644
--- a/packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
index 18199350164..c010ded3766 100644
--- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Pagination/Pagination.tsx b/packages/grafana-ui/src/components/Pagination/Pagination.tsx
index 394f267b894..70c447e059c 100644
--- a/packages/grafana-ui/src/components/Pagination/Pagination.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx b/packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx
index 19fc83fa6d6..bb83665428d 100644
--- a/packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
index 1e98084081b..79ed1581344 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx
index e56d8c6302f..5be2a7913f3 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx
index 36c02708329..22d300bfacc 100644
--- a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx b/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx
index 8989060a759..fb52282f923 100644
--- a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx b/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx
index a8fe446c181..804b1bbe92f 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Select/MultiValue.tsx b/packages/grafana-ui/src/components/Select/MultiValue.tsx
index fb8c3104660..987d34a1290 100644
--- a/packages/grafana-ui/src/components/Select/MultiValue.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx
index c573eda0ae8..0eb6a1fefeb 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
index 713e2865f53..bb12cf4dcfb 100644
--- a/packages/grafana-ui/src/components/Select/SelectMenu.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Spinner/Spinner.tsx b/packages/grafana-ui/src/components/Spinner/Spinner.tsx
index ed50dbf7cde..78905e29eec 100644
--- a/packages/grafana-ui/src/components/Spinner/Spinner.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Table/CellActions.tsx b/packages/grafana-ui/src/components/Table/CellActions.tsx
index 6efb5c68243..e2fe8a658ba 100644
--- a/packages/grafana-ui/src/components/Table/CellActions.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Table/TableCellInspector.tsx b/packages/grafana-ui/src/components/Table/TableCellInspector.tsx
index 8de4a8178f5..ed7f9111773 100644
--- a/packages/grafana-ui/src/components/Table/TableCellInspector.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/RowExpander.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/RowExpander.tsx
index 85ac8b4cdb7..95e29ce17f3 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/Cells/RowExpander.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx
index aacf5bb6071..a3a57a5564c 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterList.tsx b/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterList.tsx
index 0089b125caf..783c25f0691 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterList.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterPopup.tsx b/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterPopup.tsx
index 93322747d46..d11d66cf2e0 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterPopup.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
index 91bfc448e03..22ed8d6105c 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts b/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts
index 8e6d662f19f..dccddd89bd8 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Table/TableRT/FilterList.tsx b/packages/grafana-ui/src/components/Table/TableRT/FilterList.tsx
index 47cba0739ed..273f97d684f 100644
--- a/packages/grafana-ui/src/components/Table/TableRT/FilterList.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Table/TableRT/FilterPopup.tsx b/packages/grafana-ui/src/components/Table/TableRT/FilterPopup.tsx
index cebbf3eae9a..f860f0ce830 100644
--- a/packages/grafana-ui/src/components/Table/TableRT/FilterPopup.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/Table/TableRT/RowExpander.tsx b/packages/grafana-ui/src/components/Table/TableRT/RowExpander.tsx
index 78cef901c25..26d1c681589 100644
--- a/packages/grafana-ui/src/components/Table/TableRT/RowExpander.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/Table/TableRT/Table.tsx b/packages/grafana-ui/src/components/Table/TableRT/Table.tsx
index d90df5c7f5a..4df81505431 100644
--- a/packages/grafana-ui/src/components/Table/TableRT/Table.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx b/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx
index e4ef3bfaff3..f4a3e11e755 100644
--- a/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/Tags/TagList.tsx b/packages/grafana-ui/src/components/Tags/TagList.tsx
index ed15b032479..68e70c02c36 100644
--- a/packages/grafana-ui/src/components/Tags/TagList.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/TagsInput/TagItem.tsx b/packages/grafana-ui/src/components/TagsInput/TagItem.tsx
index 4ed082f2c9a..a5c47722e6f 100644
--- a/packages/grafana-ui/src/components/TagsInput/TagItem.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
index 1ecd72ed50c..808e5245ae0 100644
--- a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx b/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx
index b1d42be8bee..035fe22b6b6 100644
--- a/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx
+++ b/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';
 
diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
index 924c5e723f4..000713c57c4 100644
--- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx b/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
index 4b25e07f172..2709bfa067c 100644
--- a/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
+++ b/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 {
diff --git a/packages/grafana-ui/src/components/UsersIndicator/UserIcon.tsx b/packages/grafana-ui/src/components/UsersIndicator/UserIcon.tsx
index 8d9cf905db2..3d8dd97f962 100644
--- a/packages/grafana-ui/src/components/UsersIndicator/UserIcon.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.tsx b/packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.tsx
index 16ca77cd69c..44518ce25c7 100644
--- a/packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx
index 52b2aa5d60d..335cf4309e9 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx b/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx
index 30013bbd58b..5d191cf81ae 100644
--- a/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx
+++ b/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';
 
 /**
diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipFooter.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipFooter.tsx
index 267c09bed9c..db5d1e88c37 100644
--- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipFooter.tsx
+++ b/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';
diff --git a/packages/grafana-ui/src/options/builder/axis.tsx b/packages/grafana-ui/src/options/builder/axis.tsx
index f539a55a0fc..725c1d24689 100644
--- a/packages/grafana-ui/src/options/builder/axis.tsx
+++ b/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'];
 
diff --git a/packages/grafana-ui/src/options/builder/stacking.tsx b/packages/grafana-ui/src/options/builder/stacking.tsx
index 2fc840f0284..4695571a236 100644
--- a/packages/grafana-ui/src/options/builder/stacking.tsx
+++ b/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,
diff --git a/packages/grafana-ui/src/utils/i18n.tsx b/packages/grafana-ui/src/utils/i18n.tsx
deleted file mode 100644
index 83fcce10b8b..00000000000
--- a/packages/grafana-ui/src/utils/i18n.tsx
+++ /dev/null
@@ -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);
-};