chore(i18n): add ESLint rules and translate all user-facing strings (#725)

Author: shelldandy

eslint.config.mjs

@@ -14,11 +14,12 @@ export default [
     },
   },
   {
+    name: 'grafana/i18n-rules',
     files: ['src/**/*.{ts,tsx}'],
     ignores: ['src/**/*.test.{ts,tsx}', 'src/**/__tests__/**'],
     plugins: { '@grafana/i18n': grafanaI18nPlugin },
     rules: {
-      '@grafana/i18n/no-untranslated-strings': ['warn', { calleesToIgnore: ['^css$', 'use[A-Z].*'] }],
+      '@grafana/i18n/no-untranslated-strings': ['error', { calleesToIgnore: ['^css$', 'use[A-Z].*'] }],
       '@grafana/i18n/no-translation-top-level': 'error',
     },
   },

src/addedComponents/InsightsTimelineWidget/InsightsTimelineWidget.tsx

@@ -1,5 +1,6 @@
 import React, { memo, ReactElement } from 'react';
 
+import { t } from '@grafana/i18n';
 import { usePluginComponent } from '@grafana/runtime';
 import { InsightsTimelineWidgetProps } from '@grafana/plugin-types/grafana-asserts-app/';
 import { MetricFunction } from 'utils/shared';
@@ -56,7 +57,7 @@ export const InsightsTimelineWidget = memo(function InsightsTimelineWidget({
         end={endTime}
         filterBySeverity={filterBySeverity}
         filterBySummaryKeywords={filterBySummaryKeywords}
-        label={'Insights'}
+        label={t('insights-timeline-widget.label', 'Insights')}
       />
     </div>
   );

src/components/AppConfig/AppConfig.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Button, Field, useStyles2, FieldSet, Combobox } from '@grafana/ui';
+import { t, Trans } from '@grafana/i18n';
 import { PluginConfigPageProps, AppPluginMeta, PluginMeta, GrafanaTheme2 } from '@grafana/data';
 import { FetchResponse, getBackendSrv, locationService } from '@grafana/runtime';
 import { css } from '@emotion/css';
@@ -41,10 +42,10 @@ const AppConfig = ({ plugin }: Props) => {
   return (
     <div data-testid={testIds.appConfig.container}>
       {/* ENABLE / DISABLE PLUGIN */}
-      <FieldSet label="Enable / Disable">
+      <FieldSet label={t('app-config.fieldset.enable-disable', 'Enable / Disable')}>
         {!enabled && (
           <>
-            <div className={s.colorWeak}>The plugin is currently not enabled.</div>
+            <div className={s.colorWeak}><Trans i18nKey="app-config.plugin-not-enabled">The plugin is currently not enabled.</Trans></div>
             <Button
               className={s.marginTop}
               variant="primary"
@@ -56,15 +57,15 @@ const AppConfig = ({ plugin }: Props) => {
                 })
               }
             >
-              Enable plugin
+              <Trans i18nKey="app-config.enable-plugin">Enable plugin</Trans>
             </Button>
           </>
         )}
 
         {/* Disable the plugin */}
         {enabled && (
           <>
-            <div className={s.colorWeak}>The plugin is currently enabled.</div>
+            <div className={s.colorWeak}><Trans i18nKey="app-config.plugin-enabled">The plugin is currently enabled.</Trans></div>
             <Button
               className={s.marginTop}
               variant="destructive"
@@ -76,17 +77,17 @@ const AppConfig = ({ plugin }: Props) => {
                 })
               }
             >
-              Disable plugin
+              <Trans i18nKey="app-config.disable-plugin">Disable plugin</Trans>
             </Button>
           </>
         )}
       </FieldSet>
 
       {/* CUSTOM SETTINGS */}
-      <FieldSet label="Time Seeker Settings" className={s.marginTopXl}>
+      <FieldSet label={t('app-config.fieldset.time-seeker-settings', 'Time Seeker Settings')} className={s.marginTopXl}>
         <Field
-          label="Query Range"
-          description="The time range for each cached batch in the Time Seeker. Larger values mean fewer queries but more data per query."
+          label={t('app-config.field.query-range', 'Query Range')}
+          description={t('app-config.field.query-range-description', 'The time range for each cached batch in the Time Seeker. Larger values mean fewer queries but more data per query.')}
         >
           <Combobox<number>
             width={30}
@@ -112,7 +113,7 @@ const AppConfig = ({ plugin }: Props) => {
               })
             }
           >
-            Save settings
+            <Trans i18nKey="app-config.save-settings">Save settings</Trans>
           </Button>
         </div>
       </FieldSet>

src/components/Explore/AttributesSidebar.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useState, useEffect, useCallback } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { TabsBar, Tab, Input, Icon, IconButton, useStyles2, Badge, Checkbox, Button, useTheme2 } from '@grafana/ui';
+import { t, Trans } from '@grafana/i18n';
 import { RESOURCE_ATTR, SPAN_ATTR, ignoredAttributes } from 'utils/shared';
 import { getFiltersVariable } from 'utils/utils';
 import { SceneObject } from '@grafana/scenes';
@@ -300,13 +301,13 @@ export function AttributesSidebar({
   };
 
   const scopeButtons = [
-    { label: 'All', value: 'All' as ScopeType },
-    { label: 'Resource', value: 'Resource' as ScopeType },
-    { label: 'Span', value: 'Span' as ScopeType },
+    { label: t('attributes-sidebar.scope.all', 'All'), value: 'All' as ScopeType },
+    { label: t('attributes-sidebar.scope.resource', 'Resource'), value: 'Resource' as ScopeType },
+    { label: t('attributes-sidebar.scope.span', 'Span'), value: 'Span' as ScopeType },
   ];
 
   if (showFavorites) {
-    scopeButtons.unshift({ label: 'Favorites', value: 'Favorites' as ScopeType });
+    scopeButtons.unshift({ label: t('attributes-sidebar.scope.favorites', 'Favorites'), value: 'Favorites' as ScopeType });
   }
 
   return (
@@ -319,18 +320,18 @@ export function AttributesSidebar({
           <div className={styles.selectedAttributeLabel}>
             {isMulti ? (
               <>
-                <strong>Selected ({getSelectedAttributes().length}):</strong>{' '}
-                {getSelectedAttributes().length > 0 ? getSelectedAttributes().join(', ') : 'None'}
+                <strong>{t('attributes-sidebar.selected-count', 'Selected ({{count}}):', { count: getSelectedAttributes().length })}</strong>{' '}
+                {getSelectedAttributes().length > 0 ? getSelectedAttributes().join(', ') : t('attributes-sidebar.none', 'None')}
               </>
             ) : (
               <>
-                <strong>Selected:</strong> {selected}
+                <strong><Trans i18nKey="attributes-sidebar.selected">Selected:</Trans></strong> {selected}
               </>
             )}
           </div>
           {allowAllOption && selected !== 'All' && (
             <Button variant="secondary" size="sm" onClick={() => handleAttributeSelect('All')}>
-              All
+              <Trans i18nKey="attributes-sidebar.all-button">All</Trans>
             </Button>
           )}
         </div>
@@ -340,7 +341,7 @@ export function AttributesSidebar({
           <Input
             className={styles.searchInput}
             prefix={<Icon name="search" />}
-            placeholder="Search attributes..."
+            placeholder={t('attributes-sidebar.search-placeholder', 'Search attributes...')}
             value={searchValue}
             onChange={(e) => setSearchValue(e.currentTarget.value)}
             onKeyDown={handleSearchKeyDown}
@@ -349,7 +350,7 @@ export function AttributesSidebar({
                 <IconButton
                   name="times"
                   variant="secondary"
-                  tooltip="Clear search"
+                  tooltip={t('attributes-sidebar.clear-search', 'Clear search')}
                   onClick={() => setSearchValue('')}
                 />
               )
@@ -377,7 +378,7 @@ export function AttributesSidebar({
       <ul className={styles.attributesList} onDragOver={handleListDragOver} onDragLeave={handleListDragLeave}>
         {filteredAttributes.length === 0 ? (
           <div className={styles.emptyState}>
-            {searchValue || selectedScope !== 'All' ? 'No attributes match your criteria' : 'No attributes available'}
+            {searchValue || selectedScope !== 'All' ? t('attributes-sidebar.no-match', 'No attributes match your criteria') : t('attributes-sidebar.no-available', 'No attributes available')}
           </div>
         ) : (
           filteredAttributes.map((attribute, index) => {
@@ -394,7 +395,7 @@ export function AttributesSidebar({
                 {/* Ghost element above */}
                 {showGhostAbove && (
                   <li className={styles.ghostElement} onDrop={() => handleDrop(index)}>
-                    <div className={styles.ghostContent}>Drop here</div>
+                    <div className={styles.ghostContent}><Trans i18nKey="attributes-sidebar.drop-here">Drop here</Trans></div>
                   </li>
                 )}
 
@@ -436,7 +437,7 @@ export function AttributesSidebar({
                       variant="secondary"
                       size="sm"
                       className={`${styles.starButton} ${isFavorites ? styles.starButtonActive : ''}`}
-                      tooltip={isFavorites ? 'Remove from favorites' : 'Add to favorites'}
+                      tooltip={isFavorites ? t('attributes-sidebar.remove-from-favorites', 'Remove from favorites') : t('attributes-sidebar.add-to-favorites', 'Add to favorites')}
                       onClick={(event) => toggleStar(attribute.value, event)}
                     />
                   )}
@@ -445,7 +446,7 @@ export function AttributesSidebar({
                 {/* Ghost element below */}
                 {showGhostBelow && (
                   <li className={styles.ghostElement} onDrop={() => handleDrop(index)}>
-                    <div className={styles.ghostContent}>Drop here</div>
+                    <div className={styles.ghostContent}><Trans i18nKey="attributes-sidebar.drop-here-below">Drop here</Trans></div>
                   </li>
                 )}
               </React.Fragment>

src/components/Explore/ByFrameRepeater.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { DataFrame, FieldType, GrafanaTheme2, LoadingState, PanelData, sortDataFrame } from '@grafana/data';
+import { t } from '@grafana/i18n';
 import {
   SceneComponentProps,
   SceneCSSGridLayout,
@@ -127,7 +128,7 @@ export class ByFrameRepeater extends SceneObjectBase<ByFrameRepeaterState> {
         children: [
           new SceneFlexItem({
             body: new EmptyStateScene({
-              message: 'No data for search term',
+              message: t('by-frame-repeater.no-data-for-search', 'No data for search term'),
               padding: '32px',
             }),
           }),

src/components/Explore/LayoutSwitcher.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { Trans } from '@grafana/i18n';
 import { SceneComponentProps, SceneObject, SceneObjectBase, SceneObjectState } from '@grafana/scenes';
 import { Label, RadioButtonGroup, Stack, useStyles2 } from '@grafana/ui';
 import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from '../../utils/analytics';
@@ -21,7 +22,7 @@ export class LayoutSwitcher extends SceneObjectBase<LayoutSwitcherState> {
 
     return (
       <Stack>
-        <Label className={styles.label}>View</Label>
+        <Label className={styles.label}><Trans i18nKey="layout-switcher.view-label">View</Trans></Label>
         <RadioButtonGroup options={options} value={active} onChange={model.onLayoutChange} />
       </Stack>
     );

src/components/Explore/SavedSearches/LoadSearchModal.tsx

@@ -5,6 +5,7 @@ import { css } from '@emotion/css';
 import { dateTime, GrafanaTheme2 } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
 import { SceneObject } from '@grafana/scenes';
+import { t, Trans } from '@grafana/i18n';
 import { Modal, Box, useStyles2, Stack, Text, Divider, ScrollContainer, IconButton, Button } from '@grafana/ui';
 
 import { SavedSearch, useSavedSearches, applySavedSearchToScene } from './saveSearch';
@@ -64,10 +65,10 @@ export function LoadSearchModal({ onClose, sceneRef }: Props) {
   }, [onClose, sceneRef, selectedSearch]);
 
   return (
-    <Modal title="Load a previously saved search" isOpen={true} onDismiss={onClose}>
+    <Modal title={t('load-search-modal.title', 'Load a previously saved search')} isOpen={true} onDismiss={onClose}>
       {!isLoading && searches.length === 0 && (
         <Box backgroundColor="secondary" padding={1.5} marginBottom={2}>
-          <Text variant="body">No saved searches to display.</Text>
+          <Text variant="body"><Trans i18nKey="load-search-modal.no-saved-searches">No saved searches to display.</Trans></Text>
         </Box>
       )}
       {searches.length > 0 && (
@@ -113,10 +114,10 @@ export function LoadSearchModal({ onClose, sceneRef }: Props) {
                         size="xl"
                         name="trash-alt"
                         onClick={onDelete}
-                        tooltip="Remove"
+                        tooltip={t('load-search-modal.remove-tooltip', 'Remove')}
                       />
                       <Button onClick={onSelectClick} variant="primary">
-                        Select
+                        <Trans i18nKey="load-search-modal.select-button">Select</Trans>
                       </Button>
                     </Stack>
                   </Box>

src/components/Explore/SavedSearches/LoadSearchScene.tsx

@@ -5,6 +5,7 @@ import { css } from '@emotion/css';
 import { AppEvents, GrafanaTheme2 } from '@grafana/data';
 import { getAppEvents, reportInteraction, usePluginComponent } from '@grafana/runtime';
 import { SceneComponentProps, SceneObjectBase, SceneObjectState } from '@grafana/scenes';
+import { t } from '@grafana/i18n';
 import { ToolbarButton, useStyles2 } from '@grafana/ui';
 
 import { LoadSearchModal } from './LoadSearchModal';
@@ -78,7 +79,7 @@ export class LoadSearchScene extends SceneObjectBase<LoadSearchSceneState> {
             onClick={model.toggleOpen}
             className={styles.button}
             tooltip={
-              hasSavedSearches ? 'Load saved search' : 'No saved searches to load'
+              hasSavedSearches ? t('load-search-scene.load-saved-search', 'Load saved search') : t('load-search-scene.no-saved-searches', 'No saved searches to load')
             }
           />
           {isOpen && <LoadSearchModal sceneRef={model} onClose={model.toggleClosed} />}
@@ -125,7 +126,7 @@ export class LoadSearchScene extends SceneObjectBase<LoadSearchSceneState> {
         datasourceFilters={[dsName]}
         icon="folder-open"
         onSelectQuery={onSelectQuery}
-        tooltip="Load saved query"
+        tooltip={t('load-search-scene.load-saved-query', 'Load saved query')}
       />
     );
   };

src/components/Explore/SavedSearches/SaveSearchButton.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useState } from 'react';
 import { usePluginComponent } from '@grafana/runtime';
 import { SceneObject } from '@grafana/scenes';
 import { DataQuery } from '@grafana/schema';
+import { t } from '@grafana/i18n';
 import { ToolbarButton } from '@grafana/ui';
 
 import { getDatasourceVariable, getFiltersVariable, getTraceExplorationScene } from '../../../utils/utils';
@@ -42,7 +43,7 @@ export function SaveSearchButton({ sceneRef }: Props) {
           variant="canvas"
           icon="save"
           onClick={() => setSaving(true)}
-          tooltip="Save search"
+          tooltip={t('save-search-button.save-search', 'Save search')}
         />
         {saving && <SaveSearchModal dsUid={dsUid} sceneRef={sceneRef} onClose={() => setSaving(false)} />}
       </>
@@ -81,7 +82,7 @@ export function SaveSearchButton({ sceneRef }: Props) {
     <OpenQueryLibraryComponent
       datasourceFilters={[dsName]}
       query={query}
-      tooltip="Save in Saved Queries"
+      tooltip={t('save-search-button.save-in-saved-queries', 'Save in Saved Queries')}
     />
   );
 }

src/components/Explore/SavedSearches/SaveSearchModal.tsx

@@ -6,6 +6,7 @@ import { AppEvents, GrafanaTheme2 } from '@grafana/data';
 import { getAppEvents, reportInteraction } from '@grafana/runtime';
 import { SceneObject } from '@grafana/scenes';
 import { Modal, Button, Box, Field, Input, Stack, useStyles2, Alert } from '@grafana/ui';
+import { t, Trans } from '@grafana/i18n';
 
 import { getFiltersVariable, getTraceExplorationScene } from '../../../utils/utils';
 import { renderTraceQLLabelFilters } from '../../../utils/filters-renderer';
@@ -69,9 +70,9 @@ export function SaveSearchModal({ dsUid, onClose, sceneRef }: Props) {
   );
 
   return (
-    <Modal title="Save current search" isOpen={true} onDismiss={onClose}>
+    <Modal title={t('save-search-modal.title', 'Save current search')} isOpen={true} onDismiss={onClose}>
       <Alert title="" severity="info">
-        Saved searches are stored locally in your browser and will only be available on this device.
+        <Trans i18nKey="save-search-modal.info-alert">Saved searches are stored locally in your browser and will only be available on this device.</Trans>
       </Alert>
       <Box marginBottom={2}>
         <code className={styles.query}>{query}</code>
@@ -82,10 +83,10 @@ export function SaveSearchModal({ dsUid, onClose, sceneRef }: Props) {
             <Box flex={1} marginBottom={2}>
               {existingSearch && (
                 <Alert title="" severity="warning">
-                  There is a previously saved search with the same query: {existingSearch.title}
+                  <Trans i18nKey="save-search-modal.existing-search-warning">There is a previously saved search with the same query: {{ title: existingSearch.title }}</Trans>
                 </Alert>
               )}
-              <Field label="Title" noMargin htmlFor="save-search-title">
+              <Field label={t('save-search-modal.field.title', 'Title')} noMargin htmlFor="save-search-title">
                 <Input
                   id="save-search-title"
                   required
@@ -96,7 +97,7 @@ export function SaveSearchModal({ dsUid, onClose, sceneRef }: Props) {
               </Field>
             </Box>
             <Box flex={1} marginBottom={2}>
-              <Field label="Description" noMargin htmlFor="save-search-description">
+              <Field label={t('save-search-modal.field.description', 'Description')} noMargin htmlFor="save-search-description">
                 <Input
                   id="save-search-description"
                   value={description}
@@ -108,21 +109,21 @@ export function SaveSearchModal({ dsUid, onClose, sceneRef }: Props) {
           </Stack>
           <Modal.ButtonRow>
             <Button variant="secondary" fill="outline" onClick={onClose} disabled={state === 'saving'}>
-              Cancel
+              <Trans i18nKey="save-search-modal.cancel">Cancel</Trans>
             </Button>
             <Button type="submit" disabled={!title || state === 'saving'}>
-              Save
+              <Trans i18nKey="save-search-modal.save">Save</Trans>
             </Button>
           </Modal.ButtonRow>
         </form>
       ) : (
         <>
-          <Alert title="Success" severity="success">
-            Search successfully saved.
+          <Alert title={t('save-search-modal.success-title', 'Success')} severity="success">
+            <Trans i18nKey="save-search-modal.success-message">Search successfully saved.</Trans>
           </Alert>
           <Modal.ButtonRow>
             <Button variant="secondary" fill="outline" onClick={onClose}>
-              Close
+              <Trans i18nKey="save-search-modal.close">Close</Trans>
             </Button>
           </Modal.ButtonRow>
         </>