fix(homepage): fix missing translations for homepage card widgets

Author: debsmita1

workspaces/homepage/.changeset/yellow-rings-decide.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-homepage': patch
+---
+
+fix missing translations for homepage card widgets

workspaces/homepage/packages/app-legacy/src/App.tsx

@@ -74,13 +74,11 @@ import {
   TemplateSection,
   SearchBar,
   Headline,
-  // Markdown,
-  // MarkdownCard,
-  // Placeholder,
   CatalogStarredEntitiesCard,
   RecentlyVisitedCard,
   TopVisitedCard,
   FeaturedDocsCard,
+  JokeCard,
   WorldClock,
   HomePageCardMountPoint,
 } from '@red-hat-developer-hub/backstage-plugin-homepage';
@@ -346,6 +344,14 @@ const cardMountPoints: HomePageCardMountPoint[] = [
       titleKey: 'featuredDocs.title',
     },
   },
+  {
+    Component: JokeCard as ComponentType,
+    config: {
+      id: 'joke-card',
+      titleKey: 'randomJoke.title',
+      descriptionKey: 'randomJoke.description',
+    },
+  },
   {
     Component: WorldClock as ComponentType,
     config: {

workspaces/homepage/plugins/homepage/app-config.dynamic.yaml

@@ -42,8 +42,8 @@ dynamicPlugins:
         - mountPoint: home.page/widgets
           importName: RecentlyVisitedCard
           config:
-            title: 'Recently Visited'
-            description: 'Quick access to recently viewed entities and pages'
+            titleKey: recentlyVisited.title
+            descriptionKey: recentlyVisited.description
             priority: 2
             layouts:
               xl: { w: 4, h: 3 }
@@ -55,8 +55,8 @@ dynamicPlugins:
         - mountPoint: home.page/widgets
           importName: TopVisitedCard
           config:
-            title: 'Most Visited'
-            description: 'Your most frequently accessed entities and services'
+            titleKey: topVisited.title
+            descriptionKey: topVisited.description
             priority: 1
             layouts:
               xl: { w: 4, h: 3 }
@@ -65,3 +65,16 @@ dynamicPlugins:
               sm: { w: 12, h: 3 }
               xs: { w: 12, h: 3 }
               xxs: { w: 12, h: 3 }
+        - mountPoint: home.page/widgets
+          importName: JokeCard
+          config:
+            titleKey: randomJoke.title
+            descriptionKey: randomJoke.description
+            priority: 3
+            layouts:
+              xl: { w: 4, h: 4 }
+              lg: { w: 4, h: 4 }
+              md: { w: 6, h: 4 }
+              sm: { w: 12, h: 4 }
+              xs: { w: 12, h: 4 }
+              xxs: { w: 12, h: 4 }

workspaces/homepage/plugins/homepage/report-alpha.api.md

@@ -17,7 +17,9 @@ export const homepageTranslationRef: TranslationRef<
     readonly 'header.local': string;
     readonly 'header.welcome': string;
     readonly 'header.welcomePersonalized': string;
+    readonly 'search.title': string;
     readonly 'search.placeholder': string;
+    readonly 'search.clearButton': string;
     readonly 'homePage.empty': string;
     readonly 'quickAccess.title': string;
     readonly 'quickAccess.error': string;
@@ -26,14 +28,19 @@ export const homepageTranslationRef: TranslationRef<
     readonly 'featuredDocs.learnMore': string;
     readonly 'starredEntities.title': string;
     readonly 'recentlyVisited.title': string;
+    readonly 'recentlyVisited.description': string;
     readonly 'topVisited.title': string;
+    readonly 'topVisited.description': string;
+    readonly 'randomJoke.title': string;
+    readonly 'randomJoke.description': string;
     readonly 'templates.title': string;
     readonly 'templates.error': string;
     readonly 'templates.empty': string;
     readonly 'templates.fetchError': string;
     readonly 'templates.emptyDescription': string;
     readonly 'templates.register': string;
     readonly 'templates.viewAll': string;
+    readonly 'onboarding.title': string;
     readonly 'onboarding.guest': string;
     readonly 'onboarding.greeting.goodMorning': string;
     readonly 'onboarding.greeting.goodAfternoon': string;
@@ -55,9 +62,9 @@ export const homepageTranslationRef: TranslationRef<
     readonly 'entities.close': string;
     readonly 'entities.empty': string;
     readonly 'entities.fetchError': string;
+    readonly 'entities.description': string;
     readonly 'entities.emptyDescription': string;
     readonly 'entities.register': string;
-    readonly 'entities.description': string;
     readonly 'entities.browseTheCatalog': string;
   }
 >;

workspaces/homepage/plugins/homepage/report.api.md

@@ -144,6 +144,14 @@ export interface HomePageCardMountPointConfig {
   titleKey?: string;
 }
 
+// @public (undocumented)
+export const JokeCard: (props: JokeCardProps) => JSX_2.Element;
+
+// @public (undocumented)
+export type JokeCardProps = TranslatableCardTitleProps & {
+  defaultCategory?: 'any' | 'programming';
+};
+
 // @public (undocumented)
 export interface Layout {
   // (undocumented)
@@ -242,6 +250,14 @@ export const TemplateSection: () => JSX_2.Element;
 // @public (undocumented)
 export const TopVisitedCard: ComponentType<VisitedByTypeProps>;
 
+// @public
+export interface TranslatableCardTitleProps {
+  // (undocumented)
+  title?: string;
+  // (undocumented)
+  titleKey?: string;
+}
+
 // @public (undocumented)
 export const VisitListener: () => JSX_2.Element | null;
 

workspaces/homepage/plugins/homepage/src/alpha/components/CustomizableGridLayout.tsx

@@ -32,6 +32,8 @@ import GlobalStyles from '@mui/material/GlobalStyles';
 import { cardWrapperSx } from '../../styles/cardWrapperSx';
 import { HomePageCardConfig } from '../../types';
 import { useContainerQuery } from '../../hooks/useContainerQuery';
+import { useTranslation } from '../../hooks/useTranslation';
+import { translateHomepageWidget } from '../../utils/translateHomepageWidgets';
 
 import 'react-grid-layout/css/styles.css';
 import { isCardADefaultConfiguration } from '../utils';
@@ -53,13 +55,19 @@ export const CustomizableGridLayout = ({
   homepageCards,
 }: CustomizableGridLayoutProps) => {
   const theme = useTheme();
+  const { t } = useTranslation();
   const gridContainerRef = useRef<HTMLDivElement>(null);
   useContainerQuery(gridContainerRef, { notifyWindowResize: true });
 
+  const translatedHomepageCards = useMemo(
+    () => homepageCards.map(card => translateHomepageWidget(card, t)),
+    [homepageCards, t],
+  );
+
   const config = useMemo(() => {
     const defaultConfig: LayoutConfiguration[] = [];
 
-    homepageCards.forEach(homepageCard => {
+    translatedHomepageCards.forEach(homepageCard => {
       if (!homepageCard.node) {
         return;
       }
@@ -81,7 +89,7 @@ export const CustomizableGridLayout = ({
     });
 
     return defaultConfig;
-  }, [homepageCards]);
+  }, [translatedHomepageCards]);
 
   return (
     <>
@@ -106,7 +114,7 @@ export const CustomizableGridLayout = ({
           compactType="vertical"
           style={{ margin: '-10px' }}
         >
-          {homepageCards.map((card, index) => (
+          {translatedHomepageCards.map((card, index) => (
             <Fragment key={card.name ?? index}>{card.component}</Fragment>
           ))}
         </CustomHomepageGrid>

workspaces/homepage/plugins/homepage/src/alpha/extensions/homePageCards.tsx

@@ -17,6 +17,7 @@
 import { HomePageWidgetBlueprint } from '@backstage/plugin-home-react/alpha';
 import homePlugin from '@backstage/plugin-home/alpha';
 import { compatWrapper } from '@backstage/core-compat-api';
+import { InfoCard } from '@backstage/core-components';
 import { homepageMessages } from '../../translations/ref';
 import { createTranslatedCardRenderer } from '../../utils/translatedCardRenderer';
 
@@ -33,6 +34,28 @@ const defaultCardLayout = {
   },
 } as const;
 
+/**
+ * Renders widget content without an InfoCard shell (used by Search).
+ * @alpha
+ */
+const headlessCardRenderer = ({ Content }: { Content: React.ComponentType }) =>
+  compatWrapper(<Content />);
+
+/**
+ * Renders widget content inside an InfoCard without a title header.
+ * @alpha
+ */
+const untitledInfoCardRenderer = ({
+  Content,
+}: {
+  Content: React.ComponentType;
+}) =>
+  compatWrapper(
+    <InfoCard divider={false}>
+      <Content />
+    </InfoCard>,
+  );
+
 /**
  * NFS widget: OnboardingSection (migrated from mountPoint home.page/cards).
  * @alpha
@@ -41,11 +64,13 @@ export const onboardingSectionWidget = HomePageWidgetBlueprint.make({
   name: 'rhdh-onboarding-section',
   params: {
     name: 'Red Hat Developer Hub - Onboarding',
+    title: homepageMessages.onboarding.title,
     layout: defaultCardLayout,
     components: () =>
       import('../../components/OnboardingSection/OnboardingSection').then(
         m => ({
           Content: m.OnboardingSectionContent,
+          Renderer: untitledInfoCardRenderer,
         }),
       ),
   },
@@ -115,6 +140,7 @@ export const searchBarWidget = HomePageWidgetBlueprint.make({
   name: 'search-bar',
   params: {
     name: 'Search',
+    title: homepageMessages.search.title,
     layout: {
       ...defaultCardLayout,
       height: {
@@ -127,8 +153,7 @@ export const searchBarWidget = HomePageWidgetBlueprint.make({
     components: () =>
       import('../../components/SearchBar').then(m => ({
         Content: m.SearchBar,
-        Renderer: ({ Content }: { Content: React.ComponentType }) =>
-          compatWrapper(<Content />),
+        Renderer: headlessCardRenderer,
       })),
   },
 });
@@ -201,6 +226,7 @@ export const RecentlyVisitedWidget = HomePageWidgetBlueprint.make({
     layout: defaultCardLayout,
     name: 'Recently visited',
     title: homepageMessages.recentlyVisited.title,
+    description: homepageMessages.recentlyVisited.description,
     components: () =>
       import('../../components/legacy/TranslatedUpstreamHomePageCards').then(
         m => ({
@@ -221,6 +247,7 @@ export const TopVisitedWidget = HomePageWidgetBlueprint.make({
     layout: defaultCardLayout,
     name: 'Top visited',
     title: homepageMessages.topVisited.title,
+    description: homepageMessages.topVisited.description,
     components: () =>
       import('../../components/legacy/TranslatedUpstreamHomePageCards').then(
         m => ({
@@ -230,3 +257,24 @@ export const TopVisitedWidget = HomePageWidgetBlueprint.make({
       ),
   },
 });
+
+/**
+ * NFS widget: RandomJoke (overrides upstream home plugin widget).
+ * @alpha
+ */
+export const randomJokeWidget = homePlugin
+  .getExtension('home-page-widget:home/random-joke')
+  .override({
+    params: {
+      name: 'HomePageRandomJoke',
+      title: homepageMessages.randomJoke.title,
+      description: homepageMessages.randomJoke.description,
+      components: () =>
+        import('../../components/legacy/TranslatedUpstreamHomePageCards').then(
+          m => ({
+            Content: m.JokeCard,
+            Renderer: upstreamHomeCardRenderer,
+          }),
+        ),
+    },
+  });

workspaces/homepage/plugins/homepage/src/alpha/index.ts

@@ -27,6 +27,7 @@ import {
   searchBarWidget,
   templateSectionWidget,
   TopVisitedWidget,
+  randomJokeWidget,
 } from './extensions/homePageCards';
 import { homepageTranslations } from '../translations';
 
@@ -57,6 +58,7 @@ export const homePageModule = createFrontendModule({
     TopVisitedWidget,
     RecentlyVisitedWidget,
     catalogStarredWidget,
+    randomJokeWidget,
     disableToolkit,
   ],
 });

workspaces/homepage/plugins/homepage/src/components/SearchBar.tsx

@@ -19,6 +19,8 @@ import { useNavigate } from 'react-router-dom';
 
 import { SearchBarBase } from '@backstage/plugin-search-react';
 
+import Button from '@mui/material/Button';
+import InputAdornment from '@mui/material/InputAdornment';
 import { styled } from '@mui/material/styles';
 
 import { useTranslation } from '../hooks/useTranslation';
@@ -40,6 +42,11 @@ const StyledSearchBar = styled(SearchBarBase)(({ theme }) => ({
   '& .MuiOutlinedInput-notchedOutline, & fieldset': {
     border: 'none',
   },
+  '& .MuiInputAdornment-positionEnd .MuiButton-root': {
+    color: theme.palette.text.primary,
+    fontWeight: theme.typography.fontWeightRegular,
+    textTransform: 'none',
+  },
 }));
 
 /**
@@ -71,6 +78,12 @@ export const SearchBar = ({ path, queryParam }: SearchBarProps) => {
     navigate(`${url.pathname}${search ? '?' : ''}${search}`);
   }, [navigate, path, queryParam]);
 
+  const handleClear = useCallback(() => {
+    setValue('');
+  }, []);
+
+  const clearLabel = t('search.clearButton');
+
   return (
     <StyledSearchBar
       placeholder={t('search.placeholder')}
@@ -79,6 +92,24 @@ export const SearchBar = ({ path, queryParam }: SearchBarProps) => {
       onSubmit={handleSubmit}
       margin="none"
       inputProps={{ ref }}
+      clearButton={false}
+      endAdornment={
+        <InputAdornment position="end">
+          <Button
+            aria-label={clearLabel}
+            color="inherit"
+            size="small"
+            onClick={handleClear}
+            onKeyDown={event => {
+              if (event.key === 'Enter') {
+                event.stopPropagation();
+              }
+            }}
+          >
+            {clearLabel}
+          </Button>
+        </InputAdornment>
+      }
     />
   );
 };