fix(global-header): localize search All results and clear control (#3052)

Wire search autocomplete strings to plugin translations with locale bundles;
update SearchOption tests to use shared translation mocks; refresh API reports.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: lokanandaprabhu

workspaces/global-header/.changeset/search-i18n-header.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-global-header': patch
+---
+
+Add missing translations for the global header search experience: localize the autocomplete "All results" link and the clear control tooltip/accessible label (`search.allResults`, `search.clear`), with locale strings for German, Spanish, French, Italian, and Japanese.

workspaces/global-header/plugins/global-header/report-alpha.api.md

@@ -1024,6 +1024,8 @@ export const globalHeaderTranslationRef: TranslationRef<
     readonly 'search.placeholder': string;
     readonly 'search.noResults': string;
     readonly 'search.errorFetching': string;
+    readonly 'search.allResults': string;
+    readonly 'search.clear': string;
     readonly 'help.tooltip': string;
     readonly 'help.noSupportLinks': string;
     readonly 'help.noSupportLinksSubtitle': string;

workspaces/global-header/plugins/global-header/report.api.md

@@ -88,6 +88,8 @@ export const globalHeaderTranslationRef: TranslationRef<
     readonly 'search.placeholder': string;
     readonly 'search.noResults': string;
     readonly 'search.errorFetching': string;
+    readonly 'search.allResults': string;
+    readonly 'search.clear': string;
     readonly 'help.tooltip': string;
     readonly 'help.noSupportLinks': string;
     readonly 'help.noSupportLinksSubtitle': string;

workspaces/global-header/plugins/global-header/src/components/SearchComponent/SearchBar.tsx

@@ -90,6 +90,10 @@ export const SearchBar = (props: SearchBarProps) => {
                       : '0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)',
                 },
               },
+              clearIndicator: {
+                title: t('search.clear'),
+                'aria-label': t('search.clear'),
+              },
             }}
             sx={{
               width: '100%',

workspaces/global-header/plugins/global-header/src/components/SearchComponent/SearchOption.test.tsx

@@ -15,10 +15,23 @@
  */
 
 import { render, screen } from '@testing-library/react';
-import { SearchOption } from './SearchOption';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { Result, SearchDocument } from '@backstage/plugin-search-common';
 
+import {
+  MockTrans,
+  mockUseTranslation,
+} from '../../test-utils/mockTranslations';
+import { SearchOption } from './SearchOption';
+
+jest.mock('../../hooks/useTranslation', () => ({
+  useTranslation: mockUseTranslation,
+}));
+
+jest.mock('../../components/Trans', () => ({
+  Trans: MockTrans,
+}));
+
 jest.mock('./SearchResultItem', () => ({
   SearchResultItem: jest.fn(({ option }) => <div>{option}</div>),
 }));

workspaces/global-header/plugins/global-header/src/components/SearchComponent/SearchOption.tsx

@@ -23,6 +23,7 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { SearchResultItem } from './SearchResultItem';
 import { Result, SearchDocument } from '@backstage/plugin-search-common';
 import { SearchResultProps } from '@backstage/plugin-search-react';
+import { useTranslation } from '../../hooks/useTranslation';
 
 interface SearchOptionProps {
   option: string;
@@ -43,6 +44,8 @@ export const SearchOption = ({
   renderProps,
   searchLink,
 }: SearchOptionProps) => {
+  const { t } = useTranslation();
+
   if (option === query?.term && index === options.length - 1) {
     return (
       <Box key="all-results" id="all-results">
@@ -54,7 +57,9 @@ export const SearchOption = ({
             className="allResultsOption"
           >
             <Box sx={{ display: 'flex', alignItems: 'center' }}>
-              <Typography sx={{ flexGrow: 1 }}>All results</Typography>
+              <Typography sx={{ flexGrow: 1 }}>
+                {t('search.allResults')}
+              </Typography>
               <ArrowForwardIcon fontSize="small" />
             </Box>
           </ListItem>

workspaces/global-header/plugins/global-header/src/translations/de.ts

@@ -37,6 +37,8 @@ const globalHeaderTranslationDe = createTranslationMessages({
     'search.placeholder': 'Suchen...',
     'search.noResults': 'Keine Ergebnisse gefunden',
     'search.errorFetching': 'Fehler beim Abrufen der Ergebnisse',
+    'search.allResults': 'Alle Ergebnisse',
+    'search.clear': 'Löschen',
     'applicationLauncher.tooltip': 'Anwendungsstartprogramm',
     'applicationLauncher.noLinksTitle':
       'Keine Anwendungsverknüpfungen konfiguriert',

workspaces/global-header/plugins/global-header/src/translations/es.ts

@@ -37,6 +37,8 @@ const globalHeaderTranslationEs = createTranslationMessages({
     'search.placeholder': 'Buscar...',
     'search.noResults': 'No se encontraron resultados',
     'search.errorFetching': 'Error al extraer los resultados',
+    'search.allResults': 'Todos los resultados',
+    'search.clear': 'Limpiar',
     'applicationLauncher.tooltip': 'Iniciador de aplicaciones',
     'applicationLauncher.noLinksTitle':
       'No hay enlaces de aplicación configurados',

workspaces/global-header/plugins/global-header/src/translations/fr.ts

@@ -37,6 +37,8 @@ const globalHeaderTranslationFr = createTranslationMessages({
     'search.placeholder': 'Recherche...',
     'search.noResults': 'Aucun résultat trouvé',
     'search.errorFetching': 'Erreur lors de la récupération des résultats',
+    'search.allResults': 'Tous les résultats',
+    'search.clear': 'Effacer',
     'applicationLauncher.tooltip': "Lanceur d'applications",
     'applicationLauncher.noLinksTitle': "Aucun lien d'application configuré",
     'applicationLauncher.noLinksSubtitle':

workspaces/global-header/plugins/global-header/src/translations/it.ts

@@ -37,6 +37,8 @@ const globalHeaderTranslationIt = createTranslationMessages({
     'search.placeholder': 'Cerca...',
     'search.noResults': 'Nessun risultato trovato',
     'search.errorFetching': 'Errore durante il recupero dei risultati',
+    'search.allResults': 'Tutti i risultati',
+    'search.clear': 'Cancella',
     'applicationLauncher.tooltip': 'Avvio applicazione',
     'applicationLauncher.noLinksTitle':
       "Nessun collegamento all'applicazione configurato",