fix(adoption-insights): add translation support for DateRangePicker component (#1834)

Author: lokanandaprabhu

workspaces/adoption-insights/.changeset/fix-date-range-translation.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-adoption-insights': patch
+---
+
+Add translation support for DateRangePicker component. Fixed hardcoded "Date range", "Start date", and "End date" text by implementing proper i18n support with translation keys and updated all language files (German, Spanish, French, Italian).

workspaces/adoption-insights/packages/app/e2e-tests/insights.test.ts

@@ -96,10 +96,14 @@ test('Select date range', async () => {
   await openDateRangePicker(page, translations.header.dateRange.dateRange);
 
   const datePicker = page.locator('.v5-MuiPaper-root', {
-    hasText: 'Start date',
+    hasText: translations.header.dateRange.startDate,
   });
   await expect(datePicker).toBeVisible();
-  await closeDateRangePicker(page, translations.header.dateRange.cancel);
+  await closeDateRangePicker(
+    page,
+    translations.header.dateRange.cancel,
+    translations.header.dateRange.startDate,
+  );
   await expect(datePicker).not.toBeVisible();
 
   await selectDateRange(page, translations.header.dateRange.today);

workspaces/adoption-insights/packages/app/e2e-tests/utils/insightsHelpers.ts

@@ -59,9 +59,13 @@ export async function openDateRangePicker(page: Page, dateRangeText?: string) {
 /**
  * Close the date range picker
  */
-export async function closeDateRangePicker(page: Page, cancelText?: string) {
+export async function closeDateRangePicker(
+  page: Page,
+  cancelText?: string,
+  startDateText?: string,
+) {
   const datePicker = page.locator('.v5-MuiPaper-root', {
-    hasText: 'Start date',
+    hasText: startDateText || 'Start date',
   });
   await datePicker
     .getByRole('button', { name: cancelText || 'Cancel' })

workspaces/adoption-insights/plugins/adoption-insights/report.api.md

@@ -30,6 +30,7 @@ export const adoptionInsightsTranslationRef: TranslationRef<
   'plugin.adoption-insights',
   {
     readonly 'header.title': string;
+    readonly 'header.dateRange.title': string;
     readonly 'header.dateRange.dateRange': string;
     readonly 'header.dateRange.today': string;
     readonly 'header.dateRange.lastWeek': string;
@@ -39,6 +40,8 @@ export const adoptionInsightsTranslationRef: TranslationRef<
     readonly 'header.dateRange.cancel': string;
     readonly 'header.dateRange.ok': string;
     readonly 'header.dateRange.defaultLabel': string;
+    readonly 'header.dateRange.startDate': string;
+    readonly 'header.dateRange.endDate': string;
     readonly 'table.headers.name': string;
     readonly 'table.headers.kind': string;
     readonly 'table.headers.lastUsed': string;

workspaces/adoption-insights/plugins/adoption-insights/src/components/Header/DateRangePicker.tsx

@@ -28,6 +28,7 @@ import { isAfter, isBefore, isSameDay } from 'date-fns';
 import { DatePicker } from '@mui/x-date-pickers';
 import Divider from '@mui/material/Divider';
 import Typography from '@mui/material/Typography';
+import { useTranslation } from '../../hooks/useTranslation';
 
 interface DateRangePickerProps {
   startDate: Date | null;
@@ -42,6 +43,7 @@ const DateRangePicker: FC<DateRangePickerProps> = ({
   endDate,
   setEndDate,
 }) => {
+  const { t } = useTranslation();
   const handleDateChange = useCallback(
     (date: Date | null) => {
       if (!date) return;
@@ -141,7 +143,7 @@ const DateRangePicker: FC<DateRangePickerProps> = ({
     <LocalizationProvider dateAdapter={AdapterDateFns}>
       <Box>
         <Typography variant="h5" p={2} pb={0} fontWeight="400">
-          Date range
+          {t('header.dateRange.title')}
         </Typography>
         <Divider sx={{ mt: 2 }} />
         <Grid
@@ -151,7 +153,7 @@ const DateRangePicker: FC<DateRangePickerProps> = ({
         >
           <Grid item xs={6} sx={{ padding: '16px 8px 16px 24px !important' }}>
             <DatePicker
-              label="Start date"
+              label={t('header.dateRange.startDate')}
               value={startDate}
               onChange={handleStartDateChange}
               renderInput={params => (
@@ -168,7 +170,7 @@ const DateRangePicker: FC<DateRangePickerProps> = ({
 
           <Grid item xs={6} sx={{ padding: '16px 24px 16px 8px !important' }}>
             <DatePicker
-              label="End date"
+              label={t('header.dateRange.endDate')}
               value={endDate}
               onChange={handleEndDateChange}
               renderInput={params => (

workspaces/adoption-insights/plugins/adoption-insights/src/components/Header/__tests__/DateRangePicker.test.tsx

@@ -21,6 +21,21 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 
 import DateRangePicker from '../DateRangePicker';
 
+// Mock translation hooks - define the mock inline to avoid hoisting issues
+jest.mock('../../../hooks/useTranslation', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      // Mock the specific translation keys we need for this test
+      const translations: Record<string, string> = {
+        'header.dateRange.title': 'Date range',
+        'header.dateRange.startDate': 'Start date',
+        'header.dateRange.endDate': 'End date',
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
 const renderWithState = () => {
   const Wrapper = () => {
     const [startDate, setStartDate] = useState<Date | null>(null);

workspaces/adoption-insights/plugins/adoption-insights/src/translations/de.ts

@@ -35,6 +35,9 @@ const adoptionInsightsTranslationDe = createTranslationMessages({
     'header.dateRange.cancel': 'Abbrechen',
     'header.dateRange.ok': 'OK',
     'header.dateRange.defaultLabel': 'Letzte 28 Tage',
+    'header.dateRange.title': 'Datumsbereich',
+    'header.dateRange.startDate': 'Startdatum',
+    'header.dateRange.endDate': 'Enddatum',
     'activeUsers.title': 'Aktive Benutzer',
     'activeUsers.averagePrefix':
       'Durchschnittliche Spitzenanzahl aktiver Benutzer war',

workspaces/adoption-insights/plugins/adoption-insights/src/translations/es.ts

@@ -35,6 +35,9 @@ const adoptionInsightsTranslationEs = createTranslationMessages({
     'header.dateRange.cancel': 'Cancelar',
     'header.dateRange.ok': 'OK',
     'header.dateRange.defaultLabel': 'Últimos 28 días',
+    'header.dateRange.title': 'Rango de fechas',
+    'header.dateRange.startDate': 'Fecha de inicio',
+    'header.dateRange.endDate': 'Fecha de fin',
     'activeUsers.title': 'Usuarios Activos',
     'activeUsers.averagePrefix': 'El promedio de usuarios activos máximos fue',
     'activeUsers.averageText': '{{count}} por {{period}}',

workspaces/adoption-insights/plugins/adoption-insights/src/translations/fr.ts

@@ -53,11 +53,14 @@ const adoptionInsightsTranslationFr = createTranslationMessages({
     'header.dateRange.cancel': 'Annuler',
     'header.dateRange.dateRange': 'Plage de dates...',
     'header.dateRange.defaultLabel': 'Les 28 derniers jours',
+    'header.dateRange.endDate': 'Date de fin',
     'header.dateRange.last28Days': 'Les 28 derniers jours',
     'header.dateRange.lastMonth': 'Mois dernier',
     'header.dateRange.lastWeek': 'La semaine dernière',
+    'header.dateRange.startDate': 'Date de début',
     'header.dateRange.lastYear': "L'année dernière",
     'header.dateRange.ok': 'OK',
+    'header.dateRange.title': 'Plage de dates',
     'header.dateRange.today': "Aujourd'hui",
     'header.title': 'Adoption Insights',
     'page.title': 'Adoption Insights',

workspaces/adoption-insights/plugins/adoption-insights/src/translations/it.ts

@@ -35,6 +35,9 @@ const adoptionInsightsTranslationIt = createTranslationMessages({
     'header.dateRange.cancel': 'Annulla',
     'header.dateRange.ok': 'OK',
     'header.dateRange.defaultLabel': 'Ultimi 28 giorni',
+    'header.dateRange.title': 'Intervallo di date',
+    'header.dateRange.startDate': 'Data di inizio',
+    'header.dateRange.endDate': 'Data di fine',
     'activeUsers.title': 'Utenti Attivi',
     'activeUsers.averagePrefix':
       'Il numero medio di utenti attivi di picco era',