i18n: removes useTranslate hook (#106556)

* i18n: removes useTranslate hook

* chore: fix duplicate imports

* chore: fix import sorting and hook dependencies

contribute/internationalization.md

@@ -75,9 +75,8 @@ const ErrorMessage = ({ id, message }) => <Trans i18nKey={`errors.${id}`}>There
 Sometimes you may need to translate a string cannot be represented in JSX, such as `placeholder` props. Use the `t` macro for this.
 
 ```jsx
-import { useTranslate } from "@grafana/i18n"
+import { t } from "@grafana/i18n"
 
-const { t } = useTranslate();
 const placeholder = t('form.username-placeholder','Username');
 
 return <input type="value" placeholder={placeholder}>
@@ -211,9 +210,8 @@ import { Trans } from '@grafana/i18n';
 ```
 
 ```js
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 
-const { t } = useTranslate();
 const translatedString = t('inbox.heading', 'You got {{count}} messages', { count: messages.length });
 ```
 

packages/grafana-i18n/src/i18n.tsx

@@ -192,11 +192,6 @@ export const t: TFunction = (id: string, defaultMessage: string, values?: Record
   return tFunc(id, defaultMessage, values);
 };
 
-export function useTranslate() {
-  initDefaultI18nInstance();
-  return { t };
-}
-
 export function Trans(props: TransProps) {
   initDefaultI18nInstance();
   const Component = transComponent ?? I18NextTrans;

packages/grafana-i18n/src/index.ts

@@ -22,6 +22,6 @@ export {
   PSEUDO_LOCALE,
   DEFAULT_LANGUAGE,
 } from './constants';
-export { initPluginTranslations, Trans, useTranslate } from './i18n';
+export { initPluginTranslations, t, Trans } from './i18n';
 export type { ResourceLoader, Resources, TFunction, TransProps } from './types';
 export { formatDate, formatDuration, formatDateRange } from './dates';

packages/grafana-i18n/src/internal/index.ts

@@ -17,5 +17,4 @@ export {
   getLanguage,
   getResolvedLanguage,
   initializeI18n,
-  t,
 } from '../i18n';

public/app/api/clients/provisioning/index.ts

@@ -1,4 +1,4 @@
-import { t } from '@grafana/i18n/internal';
+import { t } from '@grafana/i18n';
 import { isFetchError } from '@grafana/runtime';
 import { notifyApp } from 'app/core/actions';
 import { createSuccessNotification, createErrorNotification } from 'app/core/copy/appNotification';

public/app/core/components/AccessControl/AddPermission.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 
-import { Trans } from '@grafana/i18n';
-import { t } from '@grafana/i18n/internal';
+import { Trans, t } from '@grafana/i18n';
 import { Button, Select, Stack } from '@grafana/ui';
 import { CloseButton } from 'app/core/components/CloseButton/CloseButton';
 import { ServiceAccountPicker } from 'app/core/components/Select/ServiceAccountPicker';

public/app/core/components/AccessControl/PermissionListItem.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { Box, Button, Icon, Select, Tooltip, useStyles2 } from '@grafana/ui';
 
 import { ResourcePermission } from './types';
@@ -16,7 +16,7 @@ interface Props {
 
 export const PermissionListItem = ({ item, permissionLevels, canSet, onRemove, onChange }: Props) => {
   const styles = useStyles2(getStyles);
-  const { t } = useTranslate();
+
   return (
     <tr>
       <td>{getAvatar(item)}</td>

public/app/core/components/AccessControl/Permissions.tsx

@@ -4,8 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Trans } from '@grafana/i18n';
-import { t } from '@grafana/i18n/internal';
+import { Trans, t } from '@grafana/i18n';
 import { Text, Box, Button, useStyles2, Space } from '@grafana/ui';
 import { SlideDown } from 'app/core/components/Animations/SlideDown';
 import { getBackendSrv } from 'app/core/services/backend_srv';

public/app/core/components/AppChrome/AppChromeService.tsx

@@ -2,7 +2,7 @@ import { useObservable } from 'react-use';
 import { BehaviorSubject } from 'rxjs';
 
 import { AppEvents, NavModel, NavModelItem, PageLayoutType, UrlQueryValue } from '@grafana/data';
-import { t } from '@grafana/i18n/internal';
+import { t } from '@grafana/i18n';
 import { config, locationService, reportInteraction } from '@grafana/runtime';
 import appEvents from 'app/core/app_events';
 import store from 'app/core/store';

public/app/core/components/AppChrome/ExtensionSidebar/ExtensionToolbarItemButton.test.tsx

@@ -1,26 +1,18 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 
-import { useTranslate } from '@grafana/i18n';
-
 import { ExtensionToolbarItemButton } from './ExtensionToolbarItemButton';
 
 // Mock the useTranslate hook
 jest.mock('@grafana/i18n', () => ({
-  useTranslate: jest.fn(),
-}));
-
-describe('ExtensionToolbarItemButton', () => {
-  const mockTranslate = (_: string, fallback: string, values?: Record<string, string>) => {
+  t: (_: string, fallback: string, values?: Record<string, string>) => {
     if (values) {
       return fallback.replace('{{title}}', values.title);
     }
     return fallback;
-  };
-
-  beforeEach(() => {
-    (useTranslate as jest.Mock).mockReturnValue({ t: mockTranslate });
-  });
+  },
+}));
 
+describe('ExtensionToolbarItemButton', () => {
   it('renders open button with default tooltip when no title is provided', () => {
     render(<ExtensionToolbarItemButton isOpen={false} />);
 

public/app/core/components/AppChrome/ExtensionSidebar/ExtensionToolbarItemButton.tsx

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { ToolbarButton, useStyles2 } from '@grafana/ui';
 
 interface ToolbarItemButtonProps {
@@ -16,7 +16,6 @@ function ExtensionToolbarItemButtonComponent(
   ref: React.ForwardedRef<HTMLButtonElement>
 ) {
   const styles = useStyles2(getStyles);
-  const { t } = useTranslate();
 
   if (isOpen) {
     // render button to close the sidebar

public/app/core/components/AppChrome/History/HistoryContainer.tsx

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { useToggle } from 'react-use';
 
 import { GrafanaTheme2, store } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { Drawer, ToolbarButton, useStyles2 } from '@grafana/ui';
 import { appEvents } from 'app/core/app_events';
 import { RecordHistoryEntryEvent } from 'app/types/events';
@@ -47,7 +47,6 @@ export function HistoryContainer() {
       };
     });
   }, []);
-  const { t } = useTranslate();
 
   return (
     <>

public/app/core/components/AppChrome/History/HistoryWrapper.tsx

@@ -3,7 +3,7 @@ import moment from 'moment';
 import { useState } from 'react';
 
 import { FieldType, GrafanaTheme2, store } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { Button, Card, IconButton, Space, Stack, Text, useStyles2, Box, Sparkline, useTheme2, Icon } from '@grafana/ui';
 import { formatDate } from 'app/core/internationalization/dates';
 
@@ -13,7 +13,6 @@ import { HistoryEntry } from '../types';
 import { logClickUnifiedHistoryEntryEvent, logUnifiedHistoryShowMoreEvent } from './eventsTracking';
 
 export function HistoryWrapper({ onClose }: { onClose: () => void }) {
-  const { t } = useTranslate();
   const history = store.getObject<HistoryEntry[]>(HISTORY_LOCAL_STORAGE_KEY, []).filter((entry) => {
     return moment(entry.time).isAfter(moment().subtract(2, 'day').startOf('day'));
   });
@@ -89,7 +88,7 @@ function HistoryEntryAppView({ entry, isSelected, onClick }: ItemProps) {
   const styles = useStyles2(getStyles);
   const theme = useTheme2();
   const [isExpanded, setIsExpanded] = useState(isSelected && entry.views.length > 0);
-  const { t } = useTranslate();
+
   const { breadcrumbs, views, time, url, sparklineData } = entry;
   const expandedLabel = isExpanded
     ? t('nav.history-wrapper.collapse', 'Collapse')

public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx

@@ -5,7 +5,7 @@ import { useLocation } from 'react-router-dom-v5-compat';
 
 import { GrafanaTheme2, NavModelItem } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { config, reportInteraction } from '@grafana/runtime';
 import { ScrollContainer, useStyles2 } from '@grafana/ui';
 import { useGrafana } from 'app/core/context/GrafanaContext';
@@ -37,7 +37,7 @@ export const MegaMenu = memo(
     const state = chrome.useState();
     const [patchPreferences] = usePatchUserPreferencesMutation();
     const pinnedItems = usePinnedItems();
-    const { t } = useTranslate();
+
     // Remove profile + help from tree
     const navItems = navTree
       .filter((item) => item.id !== 'profile' && item.id !== 'help')

public/app/core/components/AppChrome/MegaMenu/MegaMenuHeader.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { IconButton, Stack, ToolbarButton, useTheme2 } from '@grafana/ui';
 import { useGrafana } from 'app/core/context/GrafanaContext';
 
@@ -22,7 +22,7 @@ export function MegaMenuHeader({ handleMegaMenu, handleDockedMenu, onClose }: Pr
   const theme = useTheme2();
   const { chrome } = useGrafana();
   const state = chrome.useState();
-  const { t } = useTranslate();
+
   const styles = getStyles(theme);
 
   return (

public/app/core/components/AppChrome/MegaMenu/MegaMenuItem.tsx

@@ -5,7 +5,7 @@ import { useLocation } from 'react-router-dom-v5-compat';
 import { useLocalStorage } from 'react-use';
 
 import { FeatureState, GrafanaTheme2, NavModelItem, toIconName } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { useStyles2, Text, IconButton, Icon, Stack, FeatureBadge } from '@grafana/ui';
 import { useGrafana } from 'app/core/context/GrafanaContext';
 
@@ -58,7 +58,6 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick, onPin, isPi
       });
     }
   }, [isActive]);
-  const { t } = useTranslate();
 
   if (!link.url) {
     return null;

public/app/core/components/AppChrome/MegaMenu/MegaMenuItemText.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { config } from '@grafana/runtime';
 import { Icon, IconButton, Link, useTheme2 } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
@@ -20,7 +20,7 @@ export interface Props {
 
 export function MegaMenuItemText({ children, isActive, onClick, target, url, onPin, isPinned }: Props) {
   const theme = useTheme2();
-  const { t } = useTranslate();
+
   const styles = getStyles(theme, isActive);
   const LinkComponent = !target && url.startsWith('/') ? Link : 'a';
 

public/app/core/components/AppChrome/MegaMenu/utils.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 
 import { NavModelItem } from '@grafana/data';
-import { t } from '@grafana/i18n/internal';
+import { t } from '@grafana/i18n';
 import { config, reportInteraction } from '@grafana/runtime';
 import { MEGA_MENU_TOGGLE_ID } from 'app/core/constants';
 import { HOME_NAV_ID } from 'app/core/reducers/navModel';

public/app/core/components/AppChrome/News/NewsDrawer.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { IconButton, Drawer, useStyles2, Text } from '@grafana/ui';
 import { DEFAULT_FEED_URL } from 'app/plugins/panel/news/constants';
 import grotNewsSvg from 'img/grot-news.svg';
@@ -16,7 +16,7 @@ interface NewsContainerProps {
 
 export function NewsContainer({ onClose }: NewsContainerProps) {
   const styles = useStyles2(getStyles);
-  const { t } = useTranslate();
+
   return (
     <Drawer
       title={

public/app/core/components/AppChrome/News/NewsWrapper.tsx

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { useMeasure } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { useStyles2 } from '@grafana/ui';
 import { News } from 'app/plugins/panel/news/component/News';
 import { useNewsFeed } from 'app/plugins/panel/news/useNewsFeed';
@@ -20,7 +20,6 @@ export function NewsWrapper({ feedUrl }: NewsWrapperProps) {
   useEffect(() => {
     getNews();
   }, [getNews]);
-  const { t } = useTranslate();
 
   if (state.error) {
     return <div className={styles.innerWrapper}>{state.error && state.error.message}</div>;

public/app/core/components/AppChrome/OrganizationSwitcher/OrganizationSelect.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { useMemo, useState } from 'react';
 
 import { SelectableValue, GrafanaTheme2 } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { Icon, Select, useStyles2 } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
 import { UserOrg } from 'app/types';
@@ -11,7 +11,7 @@ import { OrganizationBaseProps } from './types';
 
 export function OrganizationSelect({ orgs, onSelectChange }: OrganizationBaseProps) {
   const styles = useStyles2(getStyles);
-  const { t } = useTranslate();
+
   const { orgId } = contextSrv.user;
 
   const options = useMemo(

public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { reportInteraction } from '@grafana/runtime';
 import { Menu, Dropdown, ToolbarButton } from '@grafana/ui';
 import { getExternalUserMngLinkUrl } from 'app/features/users/utils';
@@ -16,7 +16,7 @@ export interface Props {}
 export const QuickAdd = ({}: Props) => {
   const navBarTree = useSelector((state) => state.navBarTree);
   const [isOpen, setIsOpen] = useState(false);
-  const { t } = useTranslate();
+
   const createActions = useMemo(() => {
     const actions = findCreateActions(navBarTree);
 
@@ -33,7 +33,7 @@ export const QuickAdd = ({}: Props) => {
     }
 
     return actions;
-  }, [navBarTree, t]);
+  }, [navBarTree]);
   const showQuickAdd = createActions.length > 0;
 
   if (!showQuickAdd) {

public/app/core/components/AppChrome/ReturnToPrevious/DismissableButton.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { Button, ButtonGroup, useStyles2 } from '@grafana/ui';
 
 export interface DismissableButtonProps {
@@ -13,7 +13,7 @@ export interface DismissableButtonProps {
 
 export const DismissableButton = ({ label, onClick, onDismiss }: DismissableButtonProps) => {
   const styles = useStyles2(getStyles);
-  const { t } = useTranslate();
+
   return (
     <ButtonGroup className={styles.buttonGroup}>
       <Button

public/app/core/components/AppChrome/ReturnToPrevious/ReturnToPrevious.tsx

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { locationService } from '@grafana/runtime';
 import { useStyles2 } from '@grafana/ui';
 import { useGrafana } from 'app/core/context/GrafanaContext';
@@ -27,7 +27,7 @@ export const ReturnToPrevious = ({ href, title }: ReturnToPreviousProps) => {
   const handleOnDismiss = useCallback(() => {
     chrome.clearReturnToPrevious('dismissed');
   }, [chrome]);
-  const { t } = useTranslate();
+
   return (
     <div className={styles.returnToPrevious} data-testid={selectors.components.ReturnToPrevious.buttonGroup}>
       <DismissableButton

public/app/core/components/AppChrome/TopBar/ProfileButton.tsx

@@ -3,7 +3,7 @@ import { cloneDeep } from 'lodash';
 import { useToggle } from 'react-use';
 
 import { GrafanaTheme2, NavModelItem } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { config } from '@grafana/runtime';
 import { Dropdown, Menu, MenuItem, ToolbarButton, useStyles2 } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
@@ -24,7 +24,7 @@ export function ProfileButton({ profileNode, onToggleKioskMode }: Props) {
   const node = enrichWithInteractionTracking(cloneDeep(profileNode), false);
   const [showNewsDrawer, onToggleShowNewsDrawer] = useToggle(false);
   const [showThemeDrawer, onToggleThemeDrawer] = useToggle(false);
-  const { t } = useTranslate();
+
   if (!node) {
     return null;
   }

public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 import { GrafanaTheme2, NavModelItem } from '@grafana/data';
 import { Components } from '@grafana/e2e-selectors';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { ScopesContextValue } from '@grafana/runtime';
 import { Dropdown, Icon, Stack, ToolbarButton, useStyles2 } from '@grafana/ui';
 import { config } from 'app/core/config';
@@ -64,7 +64,7 @@ export const SingleTopBar = memo(function SingleTopBar({
   const breadcrumbs = buildBreadcrumbs(sectionNav, pageNav, homeNav);
   const unifiedHistoryEnabled = config.featureToggles.unifiedHistory;
   const isSmallScreen = !useMediaQueryMinWidth('sm');
-  const { t } = useTranslate();
+
   return (
     <>
       <div className={styles.layout}>

public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx

@@ -4,7 +4,7 @@ import React, { useMemo } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { getInputStyles, Icon, Text, ToolbarButton, useStyles2 } from '@grafana/ui';
 import { getFocusStyles } from '@grafana/ui/internal';
 import { useMediaQueryMinWidth } from 'app/core/hooks/useMediaQueryMinWidth';
@@ -19,7 +19,7 @@ export const TopSearchBarCommandPaletteTrigger = React.memo(() => {
   }));
 
   const isLargeScreen = useMediaQueryMinWidth('lg');
-  const { t } = useTranslate();
+
   const onOpenSearch = () => {
     kbar.toggle();
   };
@@ -48,7 +48,7 @@ interface PretendTextInputProps {
 function PretendTextInput({ onClick }: PretendTextInputProps) {
   const styles = useStyles2(getStyles);
   const modKey = useMemo(() => getModKey(), []);
-  const { t } = useTranslate();
+
   // We want the desktop command palette trigger to look like a search box,
   // but it actually behaves like a button - you active it and it performs an
   // action. You don't actually type into it.

public/app/core/components/BouncingLoader/BouncingLoader.tsx

@@ -1,13 +1,13 @@
 import { css, keyframes } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { useStyles2 } from '@grafana/ui';
 import grafanaIconSvg from 'img/grafana_icon.svg';
 
 export function BouncingLoader() {
   const styles = useStyles2(getStyles);
-  const { t } = useTranslate();
+
   return (
     <div
       className={styles.container}

public/app/core/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { useStyles2 } from '@grafana/ui';
 
 import { BreadcrumbItem } from './BreadcrumbItem';
@@ -14,7 +14,7 @@ export interface Props {
 
 export function Breadcrumbs({ breadcrumbs, className }: Props) {
   const styles = useStyles2(getStyles);
-  const { t } = useTranslate();
+
   return (
     <nav aria-label={t('navigation.breadcrumbs.aria-label', 'Breadcrumbs')} className={className}>
       <ol className={styles.breadcrumbs}>

public/app/core/components/CloseButton/CloseButton.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { IconButton, useStyles2 } from '@grafana/ui';
 
 type Props = {
@@ -13,7 +13,6 @@ type Props = {
 
 export const CloseButton = ({ onClick, 'aria-label': ariaLabel, style }: Props) => {
   const styles = useStyles2(getStyles);
-  const { t } = useTranslate();
 
   return (
     <IconButton

public/app/core/components/FolderFilter/FolderFilter.tsx

@@ -3,7 +3,7 @@ import debounce from 'debounce-promise';
 import { useCallback, useMemo, useState } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { AsyncMultiSelect, Icon, Button, useStyles2 } from '@grafana/ui';
 import { config } from 'app/core/config';
 import { getBackendSrv } from 'app/core/services/backend_srv';
@@ -21,7 +21,6 @@ export function FolderFilter({ onChange, maxMenuHeight }: FolderFilterProps): JS
   const [loading, setLoading] = useState(false);
   const getOptions = useCallback((searchString: string) => getFoldersAsOptions(searchString, setLoading), []);
   const debouncedLoadOptions = useMemo(() => debounce(getOptions, 300), [getOptions]);
-  const { t } = useTranslate();
 
   const [value, setValue] = useState<Array<SelectableValue<FolderInfo>>>([]);
   const onSelectOptionChange = useCallback(

public/app/core/components/Footer/Footer.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { memo } from 'react';
 
 import { GrafanaTheme2, LinkTarget } from '@grafana/data';
-import { t } from '@grafana/i18n/internal';
+import { t } from '@grafana/i18n';
 import { config } from '@grafana/runtime';
 import { Icon, IconName, useStyles2 } from '@grafana/ui';
 

public/app/core/components/ForgottenPassword/ChangePassword.tsx

@@ -2,7 +2,7 @@ import { SyntheticEvent, useState } from 'react';
 import { useForm } from 'react-hook-form';
 
 import { selectors } from '@grafana/e2e-selectors';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { config } from '@grafana/runtime';
 import { Tooltip, Field, Button, Alert, useStyles2, Stack } from '@grafana/ui';
 
@@ -27,7 +27,7 @@ interface PasswordDTO {
 
 export const ChangePassword = ({ onSubmit, onSkip, showDefaultPasswordWarning }: Props) => {
   const styles = useStyles2(getStyles);
-  const { t } = useTranslate();
+
   const [displayValidationLabels, setDisplayValidationLabels] = useState(false);
   const [pristine, setPristine] = useState(true);
 

public/app/core/components/ForgottenPassword/ForgottenPassword.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { getBackendSrv } from '@grafana/runtime';
 import { Field, Input, Button, Legend, Container, useStyles2, LinkButton, Stack } from '@grafana/ui';
 import config from 'app/core/config';
@@ -30,7 +30,6 @@ export const ForgottenPassword = () => {
     register,
     formState: { errors },
   } = useForm<EmailDTO>();
-  const { t } = useTranslate();
 
   const sendEmail = async (formModel: EmailDTO) => {
     const res = await getBackendSrv().post('/api/user/password/send-reset-email', formModel);

public/app/core/components/FormPrompt/FormPrompt.tsx

@@ -3,7 +3,7 @@ import history from 'history';
 import { useEffect, useState } from 'react';
 import { Navigate } from 'react-router-dom-v5-compat';
 
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { Button, Modal } from '@grafana/ui';
 
 import { Prompt } from './Prompt';
@@ -96,8 +96,6 @@ interface UnsavedChangesModalProps {
 }
 
 const UnsavedChangesModal = ({ onDiscard, onBackToForm, isOpen }: UnsavedChangesModalProps) => {
-  const { t } = useTranslate();
-
   return (
     <Modal
       isOpen={isOpen}

public/app/core/components/InviteUserButton/InviteUserButton.tsx

@@ -1,11 +1,9 @@
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { Button } from '@grafana/ui';
 
 import { performInviteUserClick } from './utils';
 
 export function InviteUserButton() {
-  const { t } = useTranslate();
-
   return (
     <Button
       icon="add-user"

public/app/core/components/Layers/LayerDragDropList.tsx

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { Icon, IconButton, useStyles2 } from '@grafana/ui';
 
 import { LayerName } from './LayerName';
@@ -38,7 +38,7 @@ export const LayerDragDropList = <T extends LayerElement>({
   verifyLayerNameUniqueness,
 }: LayerDragDropListProps<T>) => {
   const style = useStyles2(getStyles);
-  const { t } = useTranslate();
+
   const getRowStyle = (isSelected: boolean) => {
     return isSelected ? `${style.row} ${style.sel}` : style.row;
   };

public/app/core/components/Layers/LayerName.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { Icon, Input, FieldValidationMessage, useStyles2 } from '@grafana/ui';
 
 export interface LayerNameProps {
@@ -18,7 +18,6 @@ export const LayerName = ({ name, onChange, verifyLayerNameUniqueness, overrideS
 
   const [isEditing, setIsEditing] = useState<boolean>(false);
   const [validationError, setValidationError] = useState<string | null>(null);
-  const { t } = useTranslate();
 
   const onEditLayer = (event: React.SyntheticEvent) => {
     setIsEditing(true);

public/app/core/components/Login/LoginCtrl.tsx

@@ -1,6 +1,6 @@
 import { PureComponent } from 'react';
 
-import { t } from '@grafana/i18n/internal';
+import { t } from '@grafana/i18n';
 import { FetchError, getBackendSrv, isFetchError, locationService } from '@grafana/runtime';
 import config from 'app/core/config';
 

public/app/core/components/Login/LoginForm.tsx

@@ -4,7 +4,7 @@ import { useForm } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { Button, Input, Field, useStyles2 } from '@grafana/ui';
 
 import { PasswordField } from '../PasswordField/PasswordField';
@@ -28,7 +28,7 @@ export const LoginForm = ({ children, onSubmit, isLoggingIn, passwordHint, login
     register,
     formState: { errors },
   } = useForm<FormModel>({ mode: 'onChange' });
-  const { t } = useTranslate();
+
   return (
     <div className={styles.wrapper}>
       <form onSubmit={handleSubmit(onSubmit)}>

public/app/core/components/Login/LoginPage.tsx

@@ -3,7 +3,7 @@ import { css } from '@emotion/css';
 
 // Components
 import { GrafanaTheme2 } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { config } from '@grafana/runtime';
 import { Alert, LinkButton, Stack, useStyles2 } from '@grafana/ui';
 import { Branding } from 'app/core/components/Branding/Branding';
@@ -20,7 +20,7 @@ import { UserSignup } from './UserSignup';
 
 const LoginPage = () => {
   const styles = useStyles2(getStyles);
-  const { t } = useTranslate();
+
   document.title = Branding.AppTitle;
 
   return (

public/app/core/components/Login/PasswordlessConfirmationForm.tsx

@@ -4,7 +4,7 @@ import { useForm } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { locationService } from '@grafana/runtime';
 import { Button, Input, Field, useStyles2 } from '@grafana/ui';
 import { Branding } from 'app/core/components/Branding/Branding';
@@ -55,7 +55,6 @@ export const PasswordlessConfirmation = ({ onSubmit, isLoggingIn }: Props) => {
       setValue('name', queryValues.get('name') || '');
     }
   }, [setValue, handleSubmit, onSubmit, setSignup]);
-  const { t } = useTranslate();
 
   return (
     <div className={styles.wrapper}>

public/app/core/components/Login/PasswordlessLoginForm.tsx

@@ -4,7 +4,7 @@ import { useForm } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { Button, Input, Field, useStyles2 } from '@grafana/ui';
 
 import { PasswordlessFormModel } from './LoginCtrl';
@@ -22,7 +22,7 @@ export const PasswordlessLoginForm = ({ onSubmit, isLoggingIn }: Props) => {
     register,
     formState: { errors },
   } = useForm<PasswordlessFormModel>({ mode: 'onChange' });
-  const { t } = useTranslate();
+
   return (
     <div className={styles.wrapper}>
       <form onSubmit={handleSubmit(onSubmit)}>

public/app/core/components/NestedFolderPicker/FolderRepo.tsx

@@ -1,4 +1,4 @@
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { Badge } from '@grafana/ui';
 import { useIsProvisionedInstance } from 'app/features/provisioning/hooks/useIsProvisionedInstance';
 import { NestedFolderDTO } from 'app/features/search/service/types';
@@ -10,7 +10,6 @@ export interface Props {
 
 export function FolderRepo({ folder }: Props) {
   const isProvisionedInstance = useIsProvisionedInstance();
-  const { t } = useTranslate();
 
   if (!folder || ('parentUID' in folder && folder.parentUID) || !folder.managedBy || isProvisionedInstance) {
     return null;

public/app/core/components/NestedFolderPicker/NestedFolderPicker.tsx

@@ -6,7 +6,7 @@ import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
 import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { config } from '@grafana/runtime';
 import { Alert, Icon, Input, LoadingBar, Stack, Text, useStyles2 } from '@grafana/ui';
 import { useGetFolderQuery } from 'app/features/browse-dashboards/api/browseDashboardsAPI';
@@ -250,7 +250,6 @@ export function NestedFolderPicker({
     },
     [flatTree]
   );
-  const { t } = useTranslate();
 
   const isLoading = isBrowseLoading || isFetchingSearchResults;
 

public/app/core/components/NestedFolderPicker/Trigger.tsx

@@ -3,7 +3,7 @@ import { forwardRef, ReactNode, ButtonHTMLAttributes } from 'react';
 import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { Icon, getInputStyles, useTheme2, Text } from '@grafana/ui';
 import { getFocusStyles, getMouseFocusStyles } from '@grafana/ui/internal';
 
@@ -21,7 +21,7 @@ function Trigger(
   ref: React.ForwardedRef<HTMLButtonElement>
 ) {
   const theme = useTheme2();
-  const { t } = useTranslate();
+
   const styles = getStyles(theme, invalid);
 
   const handleKeyDown = (event: React.KeyboardEvent<SVGElement>) => {

public/app/core/components/OptionsUI/color.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { useTheme2, useStyles2, ColorPicker, IconButton } from '@grafana/ui';
 import { ColorSwatch } from '@grafana/ui/internal';
 
@@ -28,7 +28,7 @@ interface Props {
 export const ColorValueEditor = ({ value, settings, onChange, details }: Props) => {
   const theme = useTheme2();
   const styles = useStyles2(getStyles);
-  const { t } = useTranslate();
+
   return (
     <ColorPicker color={value ?? ''} onChange={onChange} enableNamedColors={settings?.enableNamedColors !== false}>
       {({ ref, showColorPicker, hideColorPicker }) => {

public/app/core/components/OptionsUI/fieldColor.tsx

@@ -13,7 +13,7 @@ import {
   FieldColorSeriesByMode,
   getFieldColorMode,
 } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { useStyles2, useTheme2, Field, RadioButtonGroup, Select } from '@grafana/ui';
 
 import { ColorValueEditor } from './color';
@@ -23,7 +23,6 @@ type Props = StandardEditorProps<FieldColor | undefined, FieldColorConfigSetting
 export const FieldColorEditor = ({ value, onChange, item, id }: Props) => {
   const theme = useTheme2();
   const styles = useStyles2(getStyles);
-  const { t } = useTranslate();
 
   const colorMode = getFieldColorMode(value?.mode);
   const availableOptions = item.settings?.byValueSupport

public/app/core/components/OptionsUI/units.tsx

@@ -1,14 +1,14 @@
 import { css } from '@emotion/css';
 
 import { StandardEditorProps, GrafanaTheme2, UnitFieldConfigSettings } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { IconButton, UnitPicker, useStyles2 } from '@grafana/ui';
 
 type Props = StandardEditorProps<string, UnitFieldConfigSettings>;
 
 export function UnitValueEditor({ value, onChange, item }: Props) {
   const styles = useStyles2(getStyles);
-  const { t } = useTranslate();
+
   if (item?.settings?.isClearable && value != null) {
     return (
       <div className={styles.wrapper}>

public/app/core/components/Page/EditableTitle.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { isFetchError } from '@grafana/runtime';
 import { Field, IconButton, Input, useStyles2, Text } from '@grafana/ui';
 
@@ -53,7 +53,6 @@ export const EditableTitle = ({ value, onEdit }: Props) => {
     },
     [onEdit, value]
   );
-  const { t } = useTranslate();
 
   return !isEditing ? (
     <div className={styles.textContainer}>

public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { useCallback, useMemo, useState } from 'react';
 
 import { GrafanaTheme2, PanelPluginMeta, SelectableValue } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { Icon, Button, MultiSelect, useStyles2 } from '@grafana/ui';
 import { getAllPanelPluginMeta } from 'app/features/panel/state/util';
 
@@ -30,7 +30,7 @@ export const PanelTypeFilter = ({ onChange: propsOnChange, maxMenuHeight }: Prop
     [propsOnChange]
   );
   const styles = useStyles2(getStyles);
-  const { t } = useTranslate();
+
   const selectOptions = {
     defaultOptions: true,
     getOptionLabel: (i: SelectableValue<PanelPluginMeta>) => i.label,

public/app/core/components/PasswordField/PasswordField.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useState } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { Input, IconButton } from '@grafana/ui';
 import { InputProps } from '@grafana/ui/internal';
 
@@ -9,7 +9,7 @@ interface Props extends Omit<InputProps, 'type'> {}
 
 export const PasswordField = forwardRef<HTMLInputElement, Props>((props, ref) => {
   const [showPassword, setShowPassword] = useState(false);
-  const { t } = useTranslate();
+
   return (
     <Input
       {...props}

public/app/core/components/PluginHelp/PluginHelp.tsx

@@ -1,7 +1,7 @@
 import { useAsync } from 'react-use';
 
 import { renderMarkdown } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { getBackendSrv } from '@grafana/runtime';
 import { LoadingPlaceholder } from '@grafana/ui';
 
@@ -10,8 +10,6 @@ interface Props {
 }
 
 export function PluginHelp({ pluginId }: Props) {
-  const { t } = useTranslate();
-
   const { value, loading, error } = useAsync(async () => {
     return getBackendSrv().get(`/api/plugins/${pluginId}/markdown/query_help`);
   }, []);

public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx

@@ -4,7 +4,7 @@ import { MouseEventHandler } from 'react';
 import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { Icon, IconButton, useStyles2, Stack } from '@grafana/ui';
 
 export interface QueryOperationRowHeaderProps {
@@ -42,7 +42,7 @@ export const QueryOperationRowHeader = ({
   expanderMessages,
 }: QueryOperationRowHeaderProps) => {
   const styles = useStyles2(getStyles);
-  const { t } = useTranslate();
+
   let tooltipMessage = isContentVisible
     ? t('query-operation.header.collapse-row', 'Collapse query row')
     : t('query-operation.header.expand-row', 'Expand query row');

public/app/core/components/RolePicker/RoleMenuGroupOption.tsx

@@ -2,7 +2,7 @@ import { cx } from '@emotion/css';
 import { FormEvent, memo } from 'react';
 import * as React from 'react';
 
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { Checkbox, Portal, useStyles2, useTheme2 } from '@grafana/ui';
 import { getSelectStyles } from '@grafana/ui/internal';
 
@@ -47,7 +47,7 @@ export const RoleMenuGroupOption = memo(
       const theme = useTheme2();
       const styles = getSelectStyles(theme);
       const customStyles = useStyles2(getStyles);
-      const { t } = useTranslate();
+
       const wrapperClassName = cx(
         styles.option,
         isFocused && styles.optionFocused,

public/app/core/components/RolePicker/RoleMenuOption.tsx

@@ -1,7 +1,7 @@
 import { cx } from '@emotion/css';
 import { forwardRef, FormEvent } from 'react';
 
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { Checkbox, Icon, Tooltip, useStyles2, useTheme2 } from '@grafana/ui';
 import { getSelectStyles } from '@grafana/ui/internal';
 import { Role } from 'app/types';
@@ -24,7 +24,7 @@ export const RoleMenuOption = forwardRef<HTMLDivElement, React.PropsWithChildren
     const theme = useTheme2();
     const styles = getSelectStyles(theme);
     const customStyles = useStyles2(getStyles);
-    const { t } = useTranslate();
+
     disabled = disabled || mapped;
     let disabledMessage = '';
     if (disabled) {

public/app/core/components/RolePicker/RolePickerInput.tsx

@@ -3,7 +3,7 @@ import { FormEvent, HTMLProps, useEffect, useRef } from 'react';
 import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { useStyles2, getInputStyles, sharedInputStyle, Tooltip, Icon, Spinner } from '@grafana/ui';
 import { getFocusStyles } from '@grafana/ui/internal';
 
@@ -44,7 +44,6 @@ export const RolePickerInput = ({
 }: InputProps): JSX.Element => {
   const styles = useStyles2(getRolePickerInputStyles, false, !!isFocused, !!disabled, false, width);
   const inputRef = useRef<HTMLInputElement | null>(null);
-  const { t } = useTranslate();
 
   useEffect(() => {
     if (isFocused) {

public/app/core/components/RolePicker/RolePickerMenu.tsx

@@ -1,7 +1,7 @@
 import { css, cx } from '@emotion/css';
 import { useEffect, useRef, useState } from 'react';
 
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { Button, ScrollContainer, Stack, TextLink, useStyles2, useTheme2 } from '@grafana/ui';
 import { getSelectStyles } from '@grafana/ui/internal';
 import { OrgRole, Role } from 'app/types';
@@ -138,8 +138,6 @@ export const RolePickerMenu = ({
     });
   }, [options]);
 
-  const { t } = useTranslate();
-
   const getSelectedGroupOptions = (group: string) => {
     const selectedGroupOptions = [];
     for (const role of selectedOptions) {

public/app/core/components/RolePicker/RolePickerSubMenu.tsx

@@ -1,6 +1,6 @@
 import { cx } from '@emotion/css';
 
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { Button, ScrollContainer, Stack, useStyles2, useTheme2 } from '@grafana/ui';
 import { getSelectStyles } from '@grafana/ui/internal';
 import { Role } from 'app/types';
@@ -30,7 +30,7 @@ export const RolePickerSubMenu = ({
   const theme = useTheme2();
   const styles = getSelectStyles(theme);
   const customStyles = useStyles2(getStyles);
-  const { t } = useTranslate();
+
   const onClearInternal = async () => {
     if (onClear) {
       onClear();

public/app/core/components/RolePickerDrawer/RolePickerBadges.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { useStyles2, Badge, Stack } from '@grafana/ui';
 import { OrgUser } from 'app/types';
 
@@ -27,7 +27,7 @@ export const RolePickerBadges = ({ disabled, user }: Props) => {
       roles: user.roles,
     },
   });
-  const { t } = useTranslate();
+
   const { watch } = methods;
 
   const drawerControl = () => {

public/app/core/components/RolePickerDrawer/RolePickerDrawer.tsx

@@ -1,7 +1,7 @@
 import { Controller, useFormContext } from 'react-hook-form';
 
 import { toOption } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { Drawer, Field, RadioButtonGroup, TextLink } from '@grafana/ui';
 import { OrgRole } from 'app/types';
 
@@ -29,7 +29,6 @@ export const RolePickerDrawer = ({ onClose }: Props) => {
   const methods = useFormContext();
   const { control, getValues, setValue } = methods;
   const [name, roles] = getValues(['name', 'roles']);
-  const { t } = useTranslate();
 
   return (
     <Drawer title={name} subtitle={drawerSubtitle} onClose={onClose}>

public/app/core/components/Select/OldFolderPicker.tsx

@@ -6,7 +6,7 @@ import { useAsync } from 'react-use';
 
 import { AppEvents, GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { reportInteraction } from '@grafana/runtime';
 import { ActionMeta, AsyncVirtualizedSelect, Input, InputActionMeta, useStyles2 } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
@@ -281,8 +281,6 @@ export function OldFolderPicker(props: Props) {
     [customAdd?.disallowValues, customAdd?.isAllowedValue, newFolderValue, createNewFolder, folder?.title, rootName]
   );
 
-  const { t } = useTranslate();
-
   const onNewFolderChange = (e: FormEvent<HTMLInputElement>) => {
     const value = e.currentTarget.value;
     setNewFolderValue(value);

public/app/core/components/Select/OrgPicker.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useAsyncFn } from 'react-use';
 
 import { SelectableValue } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { getBackendSrv } from '@grafana/runtime';
 import { AsyncSelect } from '@grafana/ui';
 import { Organization, UserOrg } from 'app/types';
@@ -49,7 +49,6 @@ export function OrgPicker({ onSelected, className, inputId, autoFocus, excludeOr
       return allOrgs;
     }
   });
-  const { t } = useTranslate();
 
   return (
     <AsyncSelect

public/app/core/components/Select/ServiceAccountPicker.tsx

@@ -3,7 +3,7 @@ import { isNil } from 'lodash';
 import { Component } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { t } from '@grafana/i18n/internal';
+import { t } from '@grafana/i18n';
 import { getBackendSrv } from '@grafana/runtime';
 import { AsyncSelect } from '@grafana/ui';
 import { ServiceAccountDTO, ServiceAccountsState } from 'app/types';

public/app/core/components/Select/SortPicker.tsx

@@ -1,7 +1,7 @@
 import { useAsync } from 'react-use';
 
 import { SelectableValue } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { Icon, Select } from '@grafana/ui';
 import { DEFAULT_SORT } from 'app/features/search/constants';
 import { getGrafanaSearcher } from 'app/features/search/service/searcher';
@@ -28,7 +28,6 @@ export function SortPicker({ onChange, value, placeholder, filter, getSortOption
     }
     return vals;
   }, [getSortOptions, filter]);
-  const { t } = useTranslate();
 
   if (options.loading) {
     return null;

public/app/core/components/Select/TeamPicker.tsx

@@ -3,7 +3,7 @@ import { isNil } from 'lodash';
 import { Component } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { t } from '@grafana/i18n/internal';
+import { t } from '@grafana/i18n';
 import { getBackendSrv } from '@grafana/runtime';
 import { AsyncSelect } from '@grafana/ui';
 import { Team } from 'app/types';

public/app/core/components/Select/UserPicker.tsx

@@ -3,7 +3,7 @@ import { isNil } from 'lodash';
 import { Component } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { t } from '@grafana/i18n/internal';
+import { t } from '@grafana/i18n';
 import { getBackendSrv } from '@grafana/runtime';
 import { AsyncSelect } from '@grafana/ui';
 import { OrgUser } from 'app/types';

public/app/core/components/SharedPreferences/SharedPreferences.tsx

@@ -4,8 +4,7 @@ import * as React from 'react';
 
 import { FeatureState, ThemeRegistryItem } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { PSEUDO_LOCALE, Trans } from '@grafana/i18n';
-import { t } from '@grafana/i18n/internal';
+import { PSEUDO_LOCALE, t, Trans } from '@grafana/i18n';
 import { config, reportInteraction } from '@grafana/runtime';
 import { Preferences as UserPreferencesDTO } from '@grafana/schema/src/raw/preferences/x/preferences_types.gen';
 import {

public/app/core/components/Signup/SignupPage.tsx

@@ -1,6 +1,6 @@
 import { useForm } from 'react-hook-form';
 
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { getBackendSrv } from '@grafana/runtime';
 import { Field, Input, Button, LinkButton, Stack } from '@grafana/ui';
 import { getConfig } from 'app/core/config';
@@ -36,7 +36,7 @@ export const SignupPage = ({ queryParams }: Props) => {
     register,
     getValues,
   } = useForm<SignupDTO>({ defaultValues: { email: queryParams.email, code: queryParams.code } });
-  const { t } = useTranslate();
+
   const onSubmit = async (formData: SignupDTO) => {
     if (formData.name === '') {
       delete formData.name;

public/app/core/components/Signup/VerifyEmail.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { getBackendSrv } from '@grafana/runtime';
 import { Field, Input, Button, Legend, Container, LinkButton, Stack } from '@grafana/ui';
 import { getConfig } from 'app/core/config';
@@ -20,7 +20,7 @@ export const VerifyEmail = () => {
     formState: { errors },
   } = useForm<EmailDTO>();
   const [emailSent, setEmailSent] = useState(false);
-  const { t } = useTranslate();
+
   const onSubmit = (formModel: EmailDTO) => {
     getBackendSrv()
       .post('/api/user/signup', formModel)

public/app/core/components/TagFilter/TagFilter.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { components, MultiValueRemoveProps } from 'react-select';
 
 import { escapeStringForRegex, GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { Icon, MultiSelect, useStyles2 } from '@grafana/ui';
 
 import { TagBadge, getStyles as getTagBadgeStyles } from './TagBadge';
@@ -55,7 +55,7 @@ export const TagFilter = ({
 
   // Necessary to force re-render to keep tag options up to date / relevant
   const selectKey = useMemo(() => tags.join(), [tags]);
-  const { t } = useTranslate();
+
   const onLoadOptions = useCallback(async () => {
     const options = await tagOptions();
     return options.map((option) => {

public/app/core/components/TagFilter/TagOption.tsx

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import { OptionProps } from 'react-select';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { useStyles2 } from '@grafana/ui';
 
 import { TagBadge } from './TagBadge';
@@ -15,7 +15,7 @@ export interface TagSelectOption {
 
 export const TagOption = ({ data, className, label, isFocused, innerProps }: OptionProps<TagSelectOption>) => {
   const styles = useStyles2(getStyles);
-  const { t } = useTranslate();
+
   return (
     <div
       className={cx(styles.option, isFocused && styles.optionFocused)}

public/app/core/components/ThemeSelector/ThemeCard.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 
 import { FeatureState, GrafanaTheme2, ThemeRegistryItem } from '@grafana/data';
-import { TFunction, useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { FeatureBadge, RadioButtonDot, useStyles2 } from '@grafana/ui';
 
 import { ThemePreview } from '../Theme/ThemePreview';
@@ -14,9 +14,8 @@ interface ThemeCardProps {
 }
 
 export function ThemeCard({ themeOption, isExperimental, isSelected, onSelect }: ThemeCardProps) {
-  const { t } = useTranslate();
   const theme = themeOption.build();
-  const label = getTranslatedThemeName(themeOption, t);
+  const label = getTranslatedThemeName(themeOption);
   const styles = useStyles2(getStyles);
 
   return (
@@ -69,7 +68,7 @@ const getStyles = (theme: GrafanaTheme2) => {
   };
 };
 
-function getTranslatedThemeName(theme: ThemeRegistryItem, t: TFunction) {
+function getTranslatedThemeName(theme: ThemeRegistryItem) {
   switch (theme.id) {
     case 'dark':
       return t('shared.preferences.theme.dark-label', 'Dark');

public/app/core/components/ThemeSelector/ThemeSelectorDrawer.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2, ThemeRegistryItem } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { config, reportInteraction } from '@grafana/runtime';
 import { Drawer, TextLink, useStyles2, useTheme2 } from '@grafana/ui';
 import { changeTheme } from 'app/core/services/theme';
@@ -17,7 +17,7 @@ export function ThemeSelectorDrawer({ onClose }: Props) {
   const styles = useStyles2(getStyles);
   const themes = getSelectableThemes();
   const currentTheme = useTheme2();
-  const { t } = useTranslate();
+
   const onChange = (theme: ThemeRegistryItem) => {
     reportInteraction('grafana_preferences_theme_changed', {
       toTheme: theme.id,

public/app/core/components/TimePicker/TimePickerWithHistory.tsx

@@ -1,7 +1,7 @@
 import { uniqBy } from 'lodash';
 
 import { AppEvents, DateTime, TimeRange, isDateTime, rangeUtil } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { TimeRangePickerProps, TimeRangePicker } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
 
@@ -19,8 +19,6 @@ interface TimePickerHistoryItem {
 }
 
 export const TimePickerWithHistory = (props: Props) => {
-  const { t } = useTranslate();
-
   return (
     <LocalStorageValueProvider<unknown> storageKey={LOCAL_STORAGE_KEY} defaultValue={[]}>
       {(values, onSaveToStore) => {

public/app/core/components/Upgrade/UpgradeBox.tsx

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import { HTMLAttributes, useEffect } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { reportExperimentView } from '@grafana/runtime';
 import { Button, Icon, LinkButton, useStyles2 } from '@grafana/ui';
 
@@ -32,8 +32,6 @@ export const UpgradeBox = ({
     reportExperimentView(`feature-highlights-${featureId}`, 'test', eventVariant);
   }, [eventVariant, featureId]);
 
-  const { t } = useTranslate();
-
   return (
     <div className={cx(styles.box, className)} {...htmlProps}>
       <Icon name={'rocket'} className={styles.icon} />

public/app/core/components/ValidationLabels/ValidationLabels.tsx

@@ -1,7 +1,7 @@
 import { css, cx } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { t } from '@grafana/i18n/internal';
+import { t } from '@grafana/i18n';
 import { Box, Icon, Text, useStyles2 } from '@grafana/ui';
 import config from 'app/core/config';
 

public/app/core/components/VersionHistory/VersionHistoryComparison.tsx

@@ -2,7 +2,7 @@ import { identity } from 'lodash';
 import { useState } from 'react';
 
 import { dateTimeFormatTimeAgo } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { Box, Button, Divider, EmptyState, Icon, Stack, Text } from '@grafana/ui';
 import { DiffGroup } from 'app/features/dashboard-scene/settings/version-history/DiffGroup';
 import { DiffViewer } from 'app/features/dashboard-scene/settings/version-history/DiffViewer';
@@ -66,7 +66,7 @@ export const VersionHistoryComparison = <T extends DiffArgument>({
   const diff = jsonDiff(preprocessVersion(oldVersion), preprocessVersion(newVersion));
   const noHumanReadableDiffs = Object.entries(diff).length === 0;
   const [showJsonDiff, setShowJsonDiff] = useState(noHumanReadableDiffs);
-  const { t } = useTranslate();
+
   return (
     <Stack gap={2} direction="column">
       <Box>

public/app/core/components/help/HelpModal.tsx

@@ -2,11 +2,11 @@ import { css } from '@emotion/css';
 import { useMemo } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { TFunction, Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { Grid, Modal, useStyles2, Text } from '@grafana/ui';
 import { getModKey } from 'app/core/utils/browser';
 
-const getShortcuts = (modKey: string, t: TFunction) => {
+const getShortcuts = (modKey: string) => {
   return [
     {
       category: t('help-modal.shortcuts-category.global', 'Global'),
@@ -165,10 +165,9 @@ export interface HelpModalProps {
 
 export const HelpModal = ({ onDismiss }: HelpModalProps): JSX.Element => {
   const styles = useStyles2(getStyles);
-  const { t } = useTranslate();
 
   const modKey = useMemo(() => getModKey(), []);
-  const shortcuts = useMemo(() => getShortcuts(modKey, t), [modKey, t]);
+  const shortcuts = useMemo(() => getShortcuts(modKey), [modKey]);
   return (
     <Modal title={t('help-modal.title', 'Shortcuts')} isOpen onDismiss={onDismiss} onClickBackdrop={onDismiss}>
       <Grid columns={{ xs: 1, sm: 2 }} gap={3} tabIndex={0}>

public/app/core/navigation/GrafanaRouteError.tsx

@@ -3,7 +3,7 @@ import { ErrorInfo, useEffect } from 'react';
 import { useLocation } from 'react-router-dom-v5-compat';
 
 import { GrafanaTheme2, locationUtil, PageLayoutType } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { Button, ErrorWithStack, useStyles2 } from '@grafana/ui';
 
 import { Page } from '../components/Page/Page';
@@ -24,7 +24,6 @@ export function GrafanaRouteError({ error, errorInfo }: Props) {
       window.location.href = locationUtil.getUrlForPartial(location, { chunkNotFound: true });
     }
   }, [location, isChunkLoadingError]);
-  const { t } = useTranslate();
 
   // Would be good to know the page navId here but needs a pretty big refactoring
 

public/app/core/utils/navBarItem-translations.ts

@@ -1,4 +1,4 @@
-import { t } from '@grafana/i18n/internal';
+import { t } from '@grafana/i18n';
 import { config } from '@grafana/runtime';
 
 // Maps the ID of the nav item to a translated phrase to later pass to <Trans />

public/app/core/utils/richHistory.ts

@@ -8,7 +8,7 @@ import {
   urlUtil,
   serializeStateToUrlParam,
 } from '@grafana/data';
-import { t } from '@grafana/i18n/internal';
+import { t } from '@grafana/i18n';
 import { getDataSourceSrv } from '@grafana/runtime';
 import { notifyApp } from 'app/core/actions';
 import { createErrorNotification, createWarningNotification } from 'app/core/copy/appNotification';

public/app/core/utils/shortLinks.ts

@@ -1,7 +1,7 @@
 import memoizeOne from 'memoize-one';
 
 import { AbsoluteTimeRange, LogRowModel, UrlQueryMap } from '@grafana/data';
-import { t } from '@grafana/i18n/internal';
+import { t } from '@grafana/i18n';
 import { getBackendSrv, config, locationService } from '@grafana/runtime';
 import { sceneGraph, SceneTimeRangeLike, VizPanel } from '@grafana/scenes';
 import { notifyApp } from 'app/core/actions';

public/app/features/actions/ActionEditor.tsx

@@ -9,7 +9,7 @@ import {
   VariableSuggestion,
   ActionVariable,
 } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import {
   Switch,
   Field,
@@ -40,7 +40,7 @@ const LABEL_WIDTH = 13;
 export const ActionEditor = memo(({ index, value, onChange, suggestions, showOneClick }: ActionEditorProps) => {
   const styles = useStyles2(getStyles);
   const theme = useTheme2();
-  const { t } = useTranslate();
+
   const onTitleChange = (title: string) => {
     onChange(index, { ...value, title });
   };

public/app/features/actions/ActionVariablesEditor.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import { ActionVariable, ActionVariableType } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { IconButton, Input, Stack, Combobox, ComboboxOption } from '@grafana/ui';
 
 interface Props {
@@ -14,8 +14,6 @@ export const ActionVariablesEditor = ({ value, onChange }: Props) => {
   const [name, setName] = useState('');
   const [type, setType] = useState<ActionVariableType>(ActionVariableType.String);
 
-  const { t } = useTranslate();
-
   const changeKey = (key: string) => {
     setKey(key);
   };

public/app/features/actions/ParamsEditor.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { useEffect, useState } from 'react';
 
 import { contentTypeOptions, GrafanaTheme2, VariableSuggestion } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { IconButton, Input, Stack, Select, useStyles2 } from '@grafana/ui';
 
 import { SuggestionsInput } from '../transformers/suggestionsInput/SuggestionsInput';
@@ -33,7 +33,6 @@ export const ParamsEditor = ({ value, onChange, suggestions, contentTypeHeader =
 
   // forces re-init of first SuggestionsInput(s), since they are stateful and don't respond to 'value' prop changes to be able to clear them :(
   const [entryKey, setEntryKey] = useState(Math.random().toString());
-  const { t } = useTranslate();
 
   const changeParamValue = (paramValue: string) => {
     setParamValue(paramValue);

public/app/features/admin/AdminEditOrgPage.tsx

@@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom-v5-compat';
 import { useAsyncFn } from 'react-use';
 
 import { NavModelItem } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { Field, Input, Button, Legend, Alert } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { contextSrv } from 'app/core/core';
@@ -51,8 +51,6 @@ const AdminEditOrgPage = () => {
     fetchOrgUsers(page);
   }, [fetchOrg, fetchOrgUsers, page]);
 
-  const { t } = useTranslate();
-
   const onUpdateOrgName = async ({ orgName }: OrgNameDTO) => {
     await updateOrgName(orgName, orgId);
   };

public/app/features/admin/AdminFeatureTogglesPage.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { useAsync } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { useStyles2, Icon } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 
@@ -15,7 +15,7 @@ export default function AdminFeatureTogglesPage() {
   const togglesApi = getTogglesAPI();
   const featureState = useAsync(() => togglesApi.getFeatureToggles(), [reload]);
   const styles = useStyles2(getStyles);
-  const { t } = useTranslate();
+
   const handleUpdateSuccess = () => {
     setReload(reload + 1);
   };

public/app/features/admin/AdminFeatureTogglesTable.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef } from 'react';
 
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { Switch, InteractiveTable, Tooltip, type CellProps, Button, ConfirmModal, type SortByFn } from '@grafana/ui';
 
 import { FeatureToggle, getTogglesAPI } from './AdminFeatureTogglesAPI';
@@ -37,7 +37,7 @@ export function AdminFeatureTogglesTable({ featureToggles, allowEditing, onUpdat
   const [localToggles, setLocalToggles] = useState<FeatureToggle[]>(featureToggles);
   const [isSaving, setIsSaving] = useState(false);
   const [showSaveModel, setShowSaveModal] = useState(false);
-  const { t } = useTranslate();
+
   const togglesApi = getTogglesAPI();
 
   const handleToggleChange = (toggle: FeatureToggle, newValue: boolean) => {

public/app/features/admin/AdminOrgsTable.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import Skeleton from 'react-loading-skeleton';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { Button, ConfirmModal, useStyles2 } from '@grafana/ui';
 import { SkeletonComponent, attachSkeleton } from '@grafana/ui/unstable';
 import { contextSrv } from 'app/core/core';
@@ -32,7 +32,7 @@ function AdminOrgsTableComponent({ orgs, onDelete }: Props) {
   const canDeleteOrgs = contextSrv.hasPermission(AccessControlAction.OrgsDelete);
 
   const [deleteOrg, setDeleteOrg] = useState<Organization>();
-  const { t } = useTranslate();
+
   const deleteOrgName = deleteOrg?.name;
   return (
     <table className="filter-table form-inline filter-table--hover">

public/app/features/admin/OrgRolePicker.tsx

@@ -1,5 +1,5 @@
 import { OrgRole } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { Select } from '@grafana/ui';
 
 interface Props {
@@ -16,8 +16,6 @@ const basicRoles = Object.values(OrgRole).filter((r) => r !== OrgRole.None);
 const options = basicRoles.map((r) => ({ label: r, value: r }));
 
 export function OrgRolePicker({ value, onChange, 'aria-label': ariaLabel, inputId, autoFocus, ...restProps }: Props) {
-  const { t } = useTranslate();
-
   return (
     <Select
       inputId={inputId}

public/app/features/admin/UpgradePage.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 
 import { GrafanaTheme2, NavModel } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { LinkButton, useStyles2 } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import checkmarkSvg from 'img/licensing/checkmark.svg';
@@ -108,8 +108,6 @@ const CallToAction = () => {
 };
 
 const ServiceInfo = () => {
-  const { t } = useTranslate();
-
   return (
     <div>
       <h4>
@@ -169,8 +167,6 @@ const FeatureInfo = () => {
 };
 
 const FeatureListing = () => {
-  const { t } = useTranslate();
-
   return (
     <List>
       <Item title={t('admin.feature-listing.title-data-source-permissions', 'Data source permissions')} />

public/app/features/admin/UserAdminPage.tsx

@@ -3,7 +3,7 @@ import { connect, ConnectedProps } from 'react-redux';
 import { useParams } from 'react-router-dom-v5-compat';
 
 import { NavModelItem } from '@grafana/data';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { featureEnabled } from '@grafana/runtime';
 import { Stack } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
@@ -60,7 +60,6 @@ export const UserAdminPage = ({
   revokeAllSessions,
   syncLdapUser,
 }: Props) => {
-  const { t } = useTranslate();
   const { id = '' } = useParams();
   useEffect(() => {
     loadAdminUserPage(id);

public/app/features/admin/UserCreatePage.tsx

@@ -3,7 +3,7 @@ import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom-v5-compat';
 
 import { NavModelItem } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { getBackendSrv } from '@grafana/runtime';
 import { Button, Input, Field } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
@@ -40,7 +40,6 @@ const UserCreatePage = () => {
     },
     [navigate]
   );
-  const { t } = useTranslate();
 
   return (
     <Page navId="global-users" pageNav={pageNav}>

public/app/features/admin/UserLdapSyncInfo.tsx

@@ -1,8 +1,7 @@
 import { PureComponent } from 'react';
 
 import { dateTimeFormat } from '@grafana/data';
-import { Trans } from '@grafana/i18n';
-import { t } from '@grafana/i18n/internal';
+import { Trans, t } from '@grafana/i18n';
 import { Button, LinkButton } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 import { AccessControlAction, SyncInfo, UserDTO } from 'app/types';

public/app/features/admin/UserListAdminPage.tsx

@@ -4,7 +4,7 @@ import { connect, ConnectedProps } from 'react-redux';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { LinkButton, RadioButtonGroup, useStyles2, FilterInput, EmptyState } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { contextSrv } from 'app/core/core';
@@ -70,8 +70,6 @@ const UserListAdminPageUnConnected = ({
     fetchUsers();
   }, [fetchUsers]);
 
-  const { t } = useTranslate();
-
   return (
     <Page.Contents>
       <div className={styles.actionBar} data-testid={selectors.container}>

public/app/features/admin/UserListAnonymousPage.tsx

@@ -4,7 +4,7 @@ import { connect, ConnectedProps } from 'react-redux';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { RadioButtonGroup, useStyles2, FilterInput } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 
@@ -54,7 +54,6 @@ const UserListAnonymousDevicesPageUnConnected = ({
   useEffect(() => {
     fetchUsersAnonymousDevices();
   }, [fetchUsersAnonymousDevices]);
-  const { t } = useTranslate();
 
   return (
     <Page.Contents>

public/app/features/admin/UserListPage.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
-import { useTranslate } from '@grafana/i18n';
+import { t } from '@grafana/i18n';
 import { config } from '@grafana/runtime';
 import { useStyles2, TabsBar, Tab } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
@@ -28,8 +28,6 @@ enum TabView {
 const selectors = e2eSelectors.pages.UserListPage;
 
 const PublicDashboardsTab = ({ view, setView }: { view: TabView | null; setView: (v: TabView | null) => void }) => {
-  const { t } = useTranslate();
-
   return (
     <Tab
       label={
@@ -65,7 +63,6 @@ export default function UserListPage() {
     }
     return null;
   });
-  const { t } = useTranslate();
 
   const showAdminAndOrgTabs = hasAccessToOrgUsers && hasAccessToAdminUsers;
 

public/app/features/admin/UserListPublicDashboardPage/DashboardsListModalButton.tsx

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { config } from '@grafana/runtime';
 import { Button, LoadingPlaceholder, Modal, ModalsController, useStyles2 } from '@grafana/ui';
 import {
@@ -17,7 +17,6 @@ export const DashboardsListModal = ({ email, onDismiss }: { email: string; onDis
   const styles = useStyles2(getStyles);
 
   const { data: dashboards, isLoading } = useGetActiveUserDashboardsQuery(email);
-  const { t } = useTranslate();
 
   return (
     <Modal
@@ -84,8 +83,6 @@ export const DashboardsListModal = ({ email, onDismiss }: { email: string; onDis
 };
 
 export const DashboardsListModalButton = ({ email }: { email: string }) => {
-  const { t } = useTranslate();
-
   const translatedDashboardListModalButtonText = t(
     'public-dashboard-users-access-list.dashboard-modal.open-dashboard-list-text',
     'Open dashboards list'

public/app/features/admin/UserListPublicDashboardPage/DeleteUserModalButton.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Trans, useTranslate } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { config } from '@grafana/runtime';
 import { Button, Modal, ModalsController, useStyles2 } from '@grafana/ui';
 import { SessionUser } from 'app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboardUtils';
@@ -11,7 +11,7 @@ import { useRevokeAllAccessMutation } from '../../dashboard/api/publicDashboardA
 const DeleteUserModal = ({ user, hideModal }: { user: SessionUser; hideModal: () => void }) => {
   const [revokeAllAccess] = useRevokeAllAccessMutation();
   const styles = useStyles2(getStyles);
-  const { t } = useTranslate();
+
   const onRevokeAccessClick = () => {
     revokeAllAccess({ email: user.email });
     hideModal();
@@ -61,8 +61,6 @@ const DeleteUserModal = ({ user, hideModal }: { user: SessionUser; hideModal: ()
 };
 
 export const DeleteUserModalButton = ({ user }: { user: SessionUser }) => {
-  const { t } = useTranslate();
-
   const translatedDeleteUserText = t(
     'public-dashboard-users-access-list.delete-user-modal.delete-user-button-text',
     'Delete user'