Internationalisation: More markup following manual review (#108232)

* mark up NestedFolderPiker root item

* mark up fieldsbyframerefid

* mark up time picker options

* mark up field types

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

@@ -16,7 +16,7 @@ import { getInputStyles, Input } from '../../Input/Input';
 import { ScrollContainer } from '../../ScrollContainer/ScrollContainer';
 import { TimePickerTitle } from '../TimeRangePicker/TimePickerTitle';
 import { TimeRangeList } from '../TimeRangePicker/TimeRangeList';
-import { quickOptions } from '../options';
+import { getQuickOptions } from '../options';
 
 import {
   isRangeValid,
@@ -39,8 +39,6 @@ type InputState = {
   validation: RangeValidation;
 };
 
-const validOptions = quickOptions.filter((o) => isRelativeFormat(o.from));
-
 /**
  * @internal
  */
@@ -57,6 +55,7 @@ export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps) {
     ref
   );
   const { dialogProps } = useDialog({}, ref);
+  const validOptions = getQuickOptions().filter((o) => isRelativeFormat(o.from));
 
   // the order of middleware is important!
   // see https://floating-ui.com/docs/arrow#order

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

@@ -13,7 +13,7 @@ import { getInputStyles } from '../Input/Input';
 import { TimePickerContent } from './TimeRangePicker/TimePickerContent';
 import { TimeRangeLabel } from './TimeRangePicker/TimeRangeLabel';
 import { WeekStart } from './WeekStartPicker';
-import { quickOptions } from './options';
+import { getQuickOptions } from './options';
 import { isValidTimeRange } from './utils';
 
 export interface TimeRangeInputProps {
@@ -123,7 +123,7 @@ export const TimeRangeInput = ({
               timeZone={timeZone}
               value={isValidTimeRange(value) ? value : getDefaultTimeRange()}
               onChange={onRangeChange}
-              quickOptions={quickOptions}
+              quickOptions={getQuickOptions()}
               onChangeTimeZone={onChangeTimeZone}
               className={styles.content}
               hideTimeZone={hideTimeZone}

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

@@ -28,7 +28,7 @@ import { Tooltip } from '../Tooltip/Tooltip';
 import { TimePickerContent } from './TimeRangePicker/TimePickerContent';
 import { TimeZoneDescription } from './TimeZonePicker/TimeZoneDescription';
 import { WeekStart } from './WeekStartPicker';
-import { quickOptions } from './options';
+import { getQuickOptions } from './options';
 import { useTimeSync } from './utils/useTimeSync';
 
 /** @public */
@@ -189,7 +189,7 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
                 fiscalYearStartMonth={fiscalYearStartMonth}
                 value={value}
                 onChange={onChange}
-                quickOptions={quickRanges || quickOptions}
+                quickOptions={quickRanges || getQuickOptions()}
                 history={history}
                 showHistory
                 widthOverride={widthOverride}

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

@@ -18,7 +18,7 @@ import { TimeZonePicker } from '../TimeZonePicker';
 import { TimeZoneDescription } from '../TimeZonePicker/TimeZoneDescription';
 import { TimeZoneOffset } from '../TimeZonePicker/TimeZoneOffset';
 import { TimeZoneTitle } from '../TimeZonePicker/TimeZoneTitle';
-import { monthOptions } from '../options';
+import { getMonthOptions } from '../options';
 
 interface Props {
   timeZone?: TimeZone;
@@ -146,7 +146,7 @@ export const TimePickerFooter = (props: Props) => {
                 >
                   <Combobox
                     value={fiscalYearStartMonth ?? null}
-                    options={monthOptions}
+                    options={getMonthOptions()}
                     onChange={(value) => {
                       if (onChangeFiscalYearStartMonth) {
                         onChangeFiscalYearStartMonth(value?.value ?? 0);

packages/grafana-ui/src/components/DateTimePickers/options.ts

@@ -1,57 +1,134 @@
 import { TimeOption } from '@grafana/data';
+import { t } from '@grafana/i18n';
 
 import { ComboboxOption } from '../Combobox/types';
 
-export const quickOptions: TimeOption[] = [
-  { from: 'now-5m', to: 'now', display: 'Last 5 minutes' },
-  { from: 'now-15m', to: 'now', display: 'Last 15 minutes' },
-  { from: 'now-30m', to: 'now', display: 'Last 30 minutes' },
-  { from: 'now-1h', to: 'now', display: 'Last 1 hour' },
-  { from: 'now-3h', to: 'now', display: 'Last 3 hours' },
-  { from: 'now-6h', to: 'now', display: 'Last 6 hours' },
-  { from: 'now-12h', to: 'now', display: 'Last 12 hours' },
-  { from: 'now-24h', to: 'now', display: 'Last 24 hours' },
-  { from: 'now-2d', to: 'now', display: 'Last 2 days' },
-  { from: 'now-7d', to: 'now', display: 'Last 7 days' },
-  { from: 'now-30d', to: 'now', display: 'Last 30 days' },
-  { from: 'now-90d', to: 'now', display: 'Last 90 days' },
-  { from: 'now-6M', to: 'now', display: 'Last 6 months' },
-  { from: 'now-1y', to: 'now', display: 'Last 1 year' },
-  { from: 'now-2y', to: 'now', display: 'Last 2 years' },
-  { from: 'now-5y', to: 'now', display: 'Last 5 years' },
-  { from: 'now-1d/d', to: 'now-1d/d', display: 'Yesterday' },
-  { from: 'now-2d/d', to: 'now-2d/d', display: 'Day before yesterday' },
-  { from: 'now-7d/d', to: 'now-7d/d', display: 'This day last week' },
-  { from: 'now-1w/w', to: 'now-1w/w', display: 'Previous week' },
-  { from: 'now-1M/M', to: 'now-1M/M', display: 'Previous month' },
-  { from: 'now-1Q/fQ', to: 'now-1Q/fQ', display: 'Previous fiscal quarter' },
-  { from: 'now-1y/y', to: 'now-1y/y', display: 'Previous year' },
-  { from: 'now-1y/fy', to: 'now-1y/fy', display: 'Previous fiscal year' },
-  { from: 'now/d', to: 'now/d', display: 'Today' },
-  { from: 'now/d', to: 'now', display: 'Today so far' },
-  { from: 'now/w', to: 'now/w', display: 'This week' },
-  { from: 'now/w', to: 'now', display: 'This week so far' },
-  { from: 'now/M', to: 'now/M', display: 'This month' },
-  { from: 'now/M', to: 'now', display: 'This month so far' },
-  { from: 'now/y', to: 'now/y', display: 'This year' },
-  { from: 'now/y', to: 'now', display: 'This year so far' },
-  { from: 'now/fQ', to: 'now', display: 'This fiscal quarter so far' },
-  { from: 'now/fQ', to: 'now/fQ', display: 'This fiscal quarter' },
-  { from: 'now/fy', to: 'now', display: 'This fiscal year so far' },
-  { from: 'now/fy', to: 'now/fy', display: 'This fiscal year' },
+export const getQuickOptions: () => TimeOption[] = () => [
+  { from: 'now-5m', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-5-mins', 'Last 5 minutes') },
+  {
+    from: 'now-15m',
+    to: 'now',
+    display: t('grafana-ui.date-time-pickers.quick-options.last-15-mins', 'Last 15 minutes'),
+  },
+  {
+    from: 'now-30m',
+    to: 'now',
+    display: t('grafana-ui.date-time-pickers.quick-options.last-30-mins', 'Last 30 minutes'),
+  },
+  { from: 'now-1h', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-1-hour', 'Last 1 hour') },
+  { from: 'now-3h', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-3-hours', 'Last 3 hours') },
+  { from: 'now-6h', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-6-hours', 'Last 6 hours') },
+  {
+    from: 'now-12h',
+    to: 'now',
+    display: t('grafana-ui.date-time-pickers.quick-options.last-12-hours', 'Last 12 hours'),
+  },
+  {
+    from: 'now-24h',
+    to: 'now',
+    display: t('grafana-ui.date-time-pickers.quick-options.last-24-hours', 'Last 24 hours'),
+  },
+  { from: 'now-2d', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-2-days', 'Last 2 days') },
+  { from: 'now-7d', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-7-days', 'Last 7 days') },
+  { from: 'now-30d', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-30-days', 'Last 30 days') },
+  { from: 'now-90d', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-90-days', 'Last 90 days') },
+  {
+    from: 'now-6M',
+    to: 'now',
+    display: t('grafana-ui.date-time-pickers.quick-options.last-6-months', 'Last 6 months'),
+  },
+  { from: 'now-1y', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-1-year', 'Last 1 year') },
+  { from: 'now-2y', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-2-years', 'Last 2 years') },
+  { from: 'now-5y', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-5-years', 'Last 5 years') },
+  { from: 'now-1d/d', to: 'now-1d/d', display: t('grafana-ui.date-time-pickers.quick-options.yesterday', 'Yesterday') },
+  {
+    from: 'now-2d/d',
+    to: 'now-2d/d',
+    display: t('grafana-ui.date-time-pickers.quick-options.day-before-yesterday', 'Day before yesterday'),
+  },
+  {
+    from: 'now-7d/d',
+    to: 'now-7d/d',
+    display: t('grafana-ui.date-time-pickers.quick-options.this-day-last-week', 'This day last week'),
+  },
+  {
+    from: 'now-1w/w',
+    to: 'now-1w/w',
+    display: t('grafana-ui.date-time-pickers.quick-options.previous-week', 'Previous week'),
+  },
+  {
+    from: 'now-1M/M',
+    to: 'now-1M/M',
+    display: t('grafana-ui.date-time-pickers.quick-options.previous-month', 'Previous month'),
+  },
+  {
+    from: 'now-1Q/fQ',
+    to: 'now-1Q/fQ',
+    display: t('grafana-ui.date-time-pickers.quick-options.previous-fiscal-quarter', 'Previous fiscal quarter'),
+  },
+  {
+    from: 'now-1y/y',
+    to: 'now-1y/y',
+    display: t('grafana-ui.date-time-pickers.quick-options.previous-year', 'Previous year'),
+  },
+  {
+    from: 'now-1y/fy',
+    to: 'now-1y/fy',
+    display: t('grafana-ui.date-time-pickers.quick-options.previous-fiscal-year', 'Previous fiscal year'),
+  },
+  { from: 'now/d', to: 'now/d', display: t('grafana-ui.date-time-pickers.quick-options.today', 'Today') },
+  { from: 'now/d', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.today-so-far', 'Today so far') },
+  { from: 'now/w', to: 'now/w', display: t('grafana-ui.date-time-pickers.quick-options.this-week', 'This week') },
+  {
+    from: 'now/w',
+    to: 'now',
+    display: t('grafana-ui.date-time-pickers.quick-options.this-week-so-far', 'This week so far'),
+  },
+  { from: 'now/M', to: 'now/M', display: t('grafana-ui.date-time-pickers.quick-options.this-month', 'This month') },
+  {
+    from: 'now/M',
+    to: 'now',
+    display: t('grafana-ui.date-time-pickers.quick-options.this-month-so-far', 'This month so far'),
+  },
+  { from: 'now/y', to: 'now/y', display: t('grafana-ui.date-time-pickers.quick-options.this-year', 'This year') },
+  {
+    from: 'now/y',
+    to: 'now',
+    display: t('grafana-ui.date-time-pickers.quick-options.this-year-so-far', 'This year so far'),
+  },
+  {
+    from: 'now/fQ',
+    to: 'now',
+    display: t('grafana-ui.date-time-pickers.quick-options.this-fiscal-quarter-so-far', 'This fiscal quarter so far'),
+  },
+  {
+    from: 'now/fQ',
+    to: 'now/fQ',
+    display: t('grafana-ui.date-time-pickers.quick-options.this-fiscal-quarter', 'This fiscal quarter'),
+  },
+  {
+    from: 'now/fy',
+    to: 'now',
+    display: t('grafana-ui.date-time-pickers.quick-options.this-fiscal-year-so-far', 'This fiscal year so far'),
+  },
+  {
+    from: 'now/fy',
+    to: 'now/fy',
+    display: t('grafana-ui.date-time-pickers.quick-options.this-fiscal-year', 'This fiscal year'),
+  },
 ];
 
-export const monthOptions: Array<ComboboxOption<number>> = [
-  { label: 'January', value: 0 },
-  { label: 'February', value: 1 },
-  { label: 'March', value: 2 },
-  { label: 'April', value: 3 },
-  { label: 'May', value: 4 },
-  { label: 'June', value: 5 },
-  { label: 'July', value: 6 },
-  { label: 'August', value: 7 },
-  { label: 'September', value: 8 },
-  { label: 'October', value: 9 },
-  { label: 'November', value: 10 },
-  { label: 'December', value: 11 },
+export const getMonthOptions: () => Array<ComboboxOption<number>> = () => [
+  { label: t('grafana-ui.date-time-pickers.month-options.label-january', 'January'), value: 0 },
+  { label: t('grafana-ui.date-time-pickers.month-options.label-february', 'February'), value: 1 },
+  { label: t('grafana-ui.date-time-pickers.month-options.label-march', 'March'), value: 2 },
+  { label: t('grafana-ui.date-time-pickers.month-options.label-april', 'April'), value: 3 },
+  { label: t('grafana-ui.date-time-pickers.month-options.label-may', 'May'), value: 4 },
+  { label: t('grafana-ui.date-time-pickers.month-options.label-june', 'June'), value: 5 },
+  { label: t('grafana-ui.date-time-pickers.month-options.label-july', 'July'), value: 6 },
+  { label: t('grafana-ui.date-time-pickers.month-options.label-august', 'August'), value: 7 },
+  { label: t('grafana-ui.date-time-pickers.month-options.label-september', 'September'), value: 8 },
+  { label: t('grafana-ui.date-time-pickers.month-options.label-october', 'October'), value: 9 },
+  { label: t('grafana-ui.date-time-pickers.month-options.label-november', 'November'), value: 10 },
+  { label: t('grafana-ui.date-time-pickers.month-options.label-december', 'December'), value: 11 },
 ];

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

@@ -27,20 +27,48 @@ FieldTypeMatcherEditor.displayName = 'FieldTypeMatcherEditor';
 
 // Select options for all field types.
 // This is not eported to the published package, but used internally
-export const allFieldTypeIconOptions: Array<SelectableValue<FieldType>> = [
-  { value: FieldType.number, label: 'Number', icon: getFieldTypeIconName(FieldType.number) },
-  { value: FieldType.string, label: 'String', icon: getFieldTypeIconName(FieldType.string) },
-  { value: FieldType.time, label: 'Time', icon: getFieldTypeIconName(FieldType.time) },
-  { value: FieldType.boolean, label: 'Boolean', icon: getFieldTypeIconName(FieldType.boolean) },
-  { value: FieldType.trace, label: 'Traces', icon: getFieldTypeIconName(FieldType.trace) },
-  { value: FieldType.enum, label: 'Enum', icon: getFieldTypeIconName(FieldType.enum) },
-  { value: FieldType.other, label: 'Other', icon: getFieldTypeIconName(FieldType.other) },
+export const getAllFieldTypeIconOptions: () => Array<SelectableValue<FieldType>> = () => [
+  {
+    value: FieldType.number,
+    label: t('grafana-ui.matchers-ui.get-all-field-type-icon-options.label-number', 'Number'),
+    icon: getFieldTypeIconName(FieldType.number),
+  },
+  {
+    value: FieldType.string,
+    label: t('grafana-ui.matchers-ui.get-all-field-type-icon-options.label-string', 'String'),
+    icon: getFieldTypeIconName(FieldType.string),
+  },
+  {
+    value: FieldType.time,
+    label: t('grafana-ui.matchers-ui.get-all-field-type-icon-options.label-time', 'Time'),
+    icon: getFieldTypeIconName(FieldType.time),
+  },
+  {
+    value: FieldType.boolean,
+    label: t('grafana-ui.matchers-ui.get-all-field-type-icon-options.label-boolean', 'Boolean'),
+    icon: getFieldTypeIconName(FieldType.boolean),
+  },
+  {
+    value: FieldType.trace,
+    label: t('grafana-ui.matchers-ui.get-all-field-type-icon-options.label-traces', 'Traces'),
+    icon: getFieldTypeIconName(FieldType.trace),
+  },
+  {
+    value: FieldType.enum,
+    label: t('grafana-ui.matchers-ui.get-all-field-type-icon-options.label-enum', 'Enum'),
+    icon: getFieldTypeIconName(FieldType.enum),
+  },
+  {
+    value: FieldType.other,
+    label: t('grafana-ui.matchers-ui.get-all-field-type-icon-options.label-other', 'Other'),
+    icon: getFieldTypeIconName(FieldType.other),
+  },
 ];
 
 const useFieldCounts = (data: DataFrame[]): Map<FieldType, number> => {
   return useMemo(() => {
     const counts: Map<FieldType, number> = new Map();
-    for (const t of allFieldTypeIconOptions) {
+    for (const t of getAllFieldTypeIconOptions()) {
       counts.set(t.value!, 0);
     }
     for (const frame of data) {
@@ -61,7 +89,7 @@ const useSelectOptions = (counts: Map<string, number>, opt?: string): Array<Sele
   return useMemo(() => {
     let found = false;
     const options: Array<SelectableValue<string>> = [];
-    for (const t of allFieldTypeIconOptions) {
+    for (const t of getAllFieldTypeIconOptions()) {
       const count = counts.get(t.value!);
       const match = opt === t.value;
       if (count || match) {

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

@@ -199,7 +199,9 @@ function getListOfQueryRefIds(data: DataFrame[]): Array<SelectableValue<string>>
   for (const [refId, frames] of queries.entries()) {
     values.push({
       value: refId,
-      label: `Query: ${refId ?? '(missing refId)'}`,
+      label: refId
+        ? t('grafana-ui.matchers-ui.get-list-of-query-ref-ids.label', 'Query: {{refId}}', { refId })
+        : t('grafana-ui.matchers-ui.get-list-of-query-ref-ids.label-missing-ref-id', 'Query: (missing refId)'),
       description: getFramesDescription(frames),
     });
   }
@@ -208,11 +210,17 @@ function getListOfQueryRefIds(data: DataFrame[]): Array<SelectableValue<string>>
 }
 
 function getFramesDescription(frames: DataFrame[]): string {
-  return `Frames (${frames.length}):
-    ${frames
-      .slice(0, Math.min(3, frames.length))
-      .map((x) => getFrameDisplayName(x))
-      .join(', ')} ${frames.length > 3 ? '...' : ''}`;
+  return t(
+    'grafana-ui.matchers-ui.get-list-of-query-ref-ids.description',
+    'Frames ({{framesCount}}): {{framesNames}}',
+    {
+      framesCount: frames.length,
+      framesNames: `${frames
+        .slice(0, Math.min(3, frames.length))
+        .map((x) => getFrameDisplayName(x))
+        .join(', ')} ${frames.length > 3 ? '...' : ''}`,
+    }
+  );
 }
 
 /**

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

@@ -45,7 +45,7 @@ export {
 } from '../components/MatchersUI/utils';
 export type { FieldMatcherUIRegistryItem } from '../components/MatchersUI/types';
 export { RefIDMultiPicker, RefIDPicker, stringsToRegexp } from '../components/MatchersUI/FieldsByFrameRefIdMatcher';
-export { allFieldTypeIconOptions } from '../components/MatchersUI/FieldTypeMatcherEditor';
+export { getAllFieldTypeIconOptions } from '../components/MatchersUI/FieldTypeMatcherEditor';
 
 export { getStyles as getSliderStyles } from '../components/Slider/styles';
 export { getSelectStyles } from '../components/Select/getSelectStyles';

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

@@ -22,7 +22,7 @@ import { getDOMId, NestedFolderList } from './NestedFolderList';
 import Trigger from './Trigger';
 import { useFoldersQuery } from './useFoldersQuery';
 import { useTreeInteractions } from './useTreeInteractions';
-import { ROOT_FOLDER_ITEM } from './utils';
+import { getRootFolderItem } from './utils';
 
 export interface NestedFolderPickerProps {
   /* Folder UID to show as selected */
@@ -222,7 +222,7 @@ export function NestedFolderPicker({
     // these options are used infrequently that its not a big deal
     if (!showRootFolder || excludeUIDs?.length) {
       flatTree = flatTree.filter((item) => {
-        if (!showRootFolder && item === ROOT_FOLDER_ITEM) {
+        if (!showRootFolder && item.item.uid === getRootFolderItem().item.uid) {
           return false;
         }
 
@@ -266,7 +266,7 @@ export function NestedFolderPicker({
 
   let label = selectedFolder.data?.title;
   if (value === '') {
-    label = 'Dashboards';
+    label = t('browse-dashboards.folder-picker.root-title', 'Dashboards');
   }
 
   // Display the folder name and provisioning status when the picker is closed

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

@@ -7,7 +7,7 @@ import { DashboardsTreeItem } from 'app/features/browse-dashboards/types';
 import { DashboardViewItem } from '../../../features/search/types';
 
 import { useFoldersQuery } from './useFoldersQuery';
-import { ROOT_FOLDER_ITEM } from './utils';
+import { getRootFolderItem } from './utils';
 
 const PAGE_SIZE = 10;
 
@@ -105,7 +105,7 @@ describe('useFoldersQuery', () => {
 function testFn() {
   const { result } = renderHook(() => useFoldersQuery(true, {}));
 
-  expect(result.current.items).toEqual([ROOT_FOLDER_ITEM]);
+  expect(result.current.items).toEqual([getRootFolderItem()]);
   expect(result.current.isLoading).toBe(false);
   act(() => {
     result.current.requestNextPage(undefined);

public/app/core/components/NestedFolderPicker/useFoldersQueryAppPlatform.ts

@@ -10,7 +10,7 @@ import { AnnoKeyManagerKind, ManagerKind } from '../../../features/apiserver/typ
 import { PAGE_SIZE } from '../../../features/browse-dashboards/api/services';
 import { getPaginationPlaceholders } from '../../../features/browse-dashboards/state/utils';
 
-import { ROOT_FOLDER_ITEM } from './utils';
+import { getRootFolderItem } from './utils';
 
 type GetFolderChildrenQuery = ReturnType<ReturnType<typeof folderAPIv1beta1.endpoints.getFolderChildren.select>>;
 type GetFolderChildrenRequest = {
@@ -151,7 +151,7 @@ export function useFoldersQueryAppPlatform(isBrowsing: boolean, openFolders: Rec
     }
 
     const rootFlatTree = createFlatList(rootFolderToken, state.responseByParent[rootFolderToken], 1);
-    rootFlatTree.unshift(ROOT_FOLDER_ITEM);
+    rootFlatTree.unshift(getRootFolderItem());
 
     return rootFlatTree;
   }, [state, isBrowsing, openFolders]);

public/app/core/components/NestedFolderPicker/useFoldersQueryLegacy.ts

@@ -11,7 +11,7 @@ import { PermissionLevelString } from 'app/types/acl';
 import { FolderListItemDTO } from 'app/types/folders';
 import { useDispatch, useSelector } from 'app/types/store';
 
-import { ROOT_FOLDER_ITEM } from './utils';
+import { getRootFolderItem } from './utils';
 
 type ListFoldersQuery = ReturnType<ReturnType<typeof browseDashboardsAPI.endpoints.listFolders.select>>;
 type ListFoldersRequest = QueryActionCreatorResult<
@@ -179,7 +179,7 @@ export function useFoldersQueryLegacy(
     }
 
     const rootFlatTree = createFlatList(undefined, state.rootPages, 1);
-    rootFlatTree.unshift(ROOT_FOLDER_ITEM);
+    rootFlatTree.unshift(getRootFolderItem());
 
     return rootFlatTree;
   }, [state, isBrowsing, openFolders]);

public/app/core/components/NestedFolderPicker/utils.ts

@@ -1,9 +1,11 @@
-export const ROOT_FOLDER_ITEM = {
+import { t } from '@grafana/i18n';
+
+export const getRootFolderItem = () => ({
   isOpen: true,
   level: 0,
   item: {
     kind: 'folder' as const,
-    title: 'Dashboards',
+    title: t('browse-dashboards.folder-picker.root-title', 'Dashboards'),
     uid: '',
   },
-};
+});

public/app/features/transformers/editors/ConvertFieldTypeTransformerEditor.tsx

@@ -15,7 +15,7 @@ import {
 import { ConvertFieldTypeOptions, ConvertFieldTypeTransformerOptions } from '@grafana/data/internal';
 import { t, Trans } from '@grafana/i18n';
 import { Button, InlineField, InlineFieldRow, Input, Select } from '@grafana/ui';
-import { allFieldTypeIconOptions, FieldNamePicker } from '@grafana/ui/internal';
+import { getAllFieldTypeIconOptions, FieldNamePicker } from '@grafana/ui/internal';
 import { findField } from 'app/features/dimensions/utils';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
@@ -34,7 +34,7 @@ export const ConvertFieldTypeTransformerEditor = ({
   options,
   onChange,
 }: TransformerUIProps<ConvertFieldTypeTransformerOptions>) => {
-  const allTypes = allFieldTypeIconOptions.filter((v) => v.value !== FieldType.trace);
+  const allTypes = getAllFieldTypeIconOptions().filter((v) => v.value !== FieldType.trace);
   const timeZoneOptions: Array<SelectableValue<string>> = getTimezoneOptions(true);
 
   // Format timezone options

public/locales/en-US/grafana.json

@@ -3559,6 +3559,7 @@
       "empty-message": "No folders found",
       "error-title": "Error loading folders",
       "non-folder-item": "Non-folder {{itemKind}} {{itemUID}}",
+      "root-title": "Dashboards",
       "search-placeholder": "Search folders",
       "unknown-error": "Unknown error"
     },
@@ -7954,6 +7955,60 @@
       "previous-label": "Previous month",
       "select-placeholder": "Select date/time"
     },
+    "date-time-pickers": {
+      "month-options": {
+        "label-april": "April",
+        "label-august": "August",
+        "label-december": "December",
+        "label-february": "February",
+        "label-january": "January",
+        "label-july": "July",
+        "label-june": "June",
+        "label-march": "March",
+        "label-may": "May",
+        "label-november": "November",
+        "label-october": "October",
+        "label-september": "September"
+      },
+      "quick-options": {
+        "day-before-yesterday": "Day before yesterday",
+        "last-1-hour": "Last 1 hour",
+        "last-1-year": "Last 1 year",
+        "last-12-hours": "Last 12 hours",
+        "last-15-mins": "Last 15 minutes",
+        "last-2-days": "Last 2 days",
+        "last-2-years": "Last 2 years",
+        "last-24-hours": "Last 24 hours",
+        "last-3-hours": "Last 3 hours",
+        "last-30-days": "Last 30 days",
+        "last-30-mins": "Last 30 minutes",
+        "last-5-mins": "Last 5 minutes",
+        "last-5-years": "Last 5 years",
+        "last-6-hours": "Last 6 hours",
+        "last-6-months": "Last 6 months",
+        "last-7-days": "Last 7 days",
+        "last-90-days": "Last 90 days",
+        "previous-fiscal-quarter": "Previous fiscal quarter",
+        "previous-fiscal-year": "Previous fiscal year",
+        "previous-month": "Previous month",
+        "previous-week": "Previous week",
+        "previous-year": "Previous year",
+        "this-day-last-week": "This day last week",
+        "this-fiscal-quarter": "This fiscal quarter",
+        "this-fiscal-quarter-so-far": "This fiscal quarter so far",
+        "this-fiscal-year": "This fiscal year",
+        "this-fiscal-year-so-far": "This fiscal year so far",
+        "this-month": "This month",
+        "this-month-so-far": "This month so far",
+        "this-week": "This week",
+        "this-week-so-far": "This week so far",
+        "this-year": "This year",
+        "this-year-so-far": "This year so far",
+        "today": "Today",
+        "today-so-far": "Today so far",
+        "yesterday": "Yesterday"
+      }
+    },
     "drawer": {
       "close": "Close"
     },
@@ -8001,6 +8056,20 @@
       "field-name-picker": {
         "placeholder": "Select field"
       },
+      "get-all-field-type-icon-options": {
+        "label-boolean": "Boolean",
+        "label-enum": "Enum",
+        "label-number": "Number",
+        "label-other": "Other",
+        "label-string": "String",
+        "label-time": "Time",
+        "label-traces": "Traces"
+      },
+      "get-list-of-query-ref-ids": {
+        "description": "Frames ({{framesCount}}): {{framesNames}}",
+        "label": "Query: {{refId}}",
+        "label-missing-ref-id": "Query: (missing refId)"
+      },
       "name-field-name-by-regex-matcher": "Fields with name matching regex",
       "name-fields-by-query": "Fields returned by query",
       "name-fields-with-name": "Fields with name",