fix e2e failures and unskip skipped tests

Author: debsmita1

workspaces/homepage/docs/cards/jokes.md

@@ -49,8 +49,8 @@ test.describe('Homepage Card Individual Tests', () => {
 
     const actualHeadingText = await greetingHeading.textContent();
     // Use the full greeting phrase (e.g. "Good afternoon") to locate the card.
-    // Using only the first word ("Good") would be too broad — other cards like
-    // Random Joke can contain that word and match first (hasText is case-insensitive).
+    // Using only the first word ("Good") would be too broad — other cards can
+    // contain that word and match first (hasText is case-insensitive).
     const cardHeading = actualHeadingText
       ? actualHeadingText.split(',')[0].trim()
       : translations.onboarding.greeting.goodMorning;

workspaces/homepage/e2e-tests/homepageCards.test.ts

@@ -47,8 +47,7 @@ test.describe.serial('Dynamic Home Page Customization', () => {
     await runAccessibilityTests(sharedPage, testInfo);
   });
 
-  // Skipping as of now; re-enable after https://github.com/backstage/backstage/issues/33317 is fixed
-  test.skip('Verify All Cards Can Be Resized in Edit Mode', async ({
+  test('Verify All Cards Can Be Resized in Edit Mode', async ({
     browser: _browser,
   }, testInfo) => {
     await homePageCustomization.enterEditMode();
@@ -86,7 +85,7 @@ test.describe.serial('Dynamic Home Page Customization', () => {
       sharedPage.getByText(/Good (morning|afternoon|evening)/),
     ).toBeVisible();
 
-    await homePageCustomization.addWidget('Quick Access Card');
+    await homePageCustomization.addWidget('Quick Access');
     await expect(sharedPage.getByText('Quick Access')).toBeVisible();
   });
 

workspaces/homepage/e2e-tests/homepageCustomizable.test.ts

@@ -20,7 +20,6 @@ nav:
       - Recently visited: cards/recently-visited.md
       - Top visited: cards/top-visited.md
       - Featured docs: cards/featured-docs.md
-      - Jokes: cards/jokes.md
       - World clock: cards/worldclock.md
   - Extend with plugins:
       - Create a new card: create-a-new-card.md

workspaces/homepage/mkdocs.yaml

@@ -81,7 +81,6 @@ import {
   RecentlyVisitedCard,
   TopVisitedCard,
   FeaturedDocsCard,
-  JokeCard,
   WorldClock,
   HomePageCardMountPoint,
 } from '@red-hat-developer-hub/backstage-plugin-dynamic-home-page';
@@ -221,6 +220,7 @@ const cardMountPoints: HomePageCardMountPoint[] = [
     Component: EntitySection,
     config: {
       id: 'rhdh-entity-section',
+      titleKey: 'entities.title',
       priority: 201,
       layouts: layouts.entity,
     },
@@ -229,6 +229,7 @@ const cardMountPoints: HomePageCardMountPoint[] = [
     Component: TemplateSection,
     config: {
       id: 'rhdh-template-section',
+      titleKey: 'templates.title',
       priority: 200,
       layouts: layouts.template,
     },
@@ -239,7 +240,7 @@ const cardMountPoints: HomePageCardMountPoint[] = [
     config: {
       priority: 202,
       id: 'quickaccess-card',
-      title: 'Quick Access Card',
+      titleKey: 'quickAccess.title',
       layouts: layouts.quickAccessCard,
     },
   },
@@ -321,35 +322,28 @@ const cardMountPoints: HomePageCardMountPoint[] = [
     Component: CatalogStarredEntitiesCard,
     config: {
       id: 'catalog-starred-entities-card',
-      title: 'Starred catalog entities',
+      titleKey: 'starredEntities.title',
     },
   },
   {
     Component: RecentlyVisitedCard as ComponentType,
     config: {
       id: 'recently-visited-card',
-      title: 'Recently visited',
+      titleKey: 'recentlyVisited.title',
     },
   },
   {
     Component: TopVisitedCard as ComponentType,
     config: {
       id: 'top-visited-card',
-      title: 'Top visited',
+      titleKey: 'topVisited.title',
     },
   },
   {
     Component: FeaturedDocsCard as ComponentType,
     config: {
       id: 'featured-docs-card',
-      title: 'Featured docs',
-    },
-  },
-  {
-    Component: JokeCard,
-    config: {
-      id: 'joke-card',
-      title: 'Random joke',
+      titleKey: 'featuredDocs.title',
     },
   },
   {

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

@@ -43,7 +43,6 @@ import {
   DynamicHomePageProps,
   FeaturedDocsCard,
   Headline,
-  JokeCard,
   Markdown,
   MarkdownCard,
   Placeholder,
@@ -178,13 +177,6 @@ const defaultMountPoints: HomePageCardMountPoint[] = [
       title: 'Featured docs card',
     },
   },
-  {
-    Component: JokeCard,
-    config: {
-      id: 'JokeCard',
-      title: 'Joke card',
-    },
-  },
 ];
 
 const createHeadline = ({
@@ -724,17 +716,6 @@ createDevApp()
       ],
     }),
   )
-  .addPage(
-    createPage({
-      navTitle: 'JokeCard',
-      pageTitle: 'JokeCard',
-      mountPoints: [
-        {
-          Component: JokeCard,
-        },
-      ],
-    }),
-  )
   .addPage(
     createPage({
       navTitle: 'WorldClock',

workspaces/homepage/plugins/dynamic-home-page/dev/legacy.tsx

@@ -14,26 +14,30 @@ export const homePageModule: FrontendModule;
 export const homepageTranslationRef: TranslationRef<
   'plugin.homepage',
   {
-    readonly 'header.local': string;
     readonly 'header.welcome': string;
     readonly 'header.welcomePersonalized': string;
-    readonly 'search.placeholder': string;
+    readonly 'header.local': string;
     readonly 'homePage.empty': string;
+    readonly 'search.placeholder': string;
     readonly 'quickAccess.title': string;
-    readonly 'quickAccess.error': string;
     readonly 'quickAccess.fetchError': string;
+    readonly 'quickAccess.error': string;
+    readonly 'featuredDocs.title': string;
     readonly 'featuredDocs.learnMore': string;
-    readonly 'templates.title': string;
-    readonly 'templates.error': string;
+    readonly 'starredEntities.title': string;
+    readonly 'recentlyVisited.title': string;
+    readonly 'topVisited.title': string;
     readonly 'templates.empty': string;
+    readonly 'templates.title': string;
     readonly 'templates.fetchError': string;
+    readonly 'templates.error': string;
     readonly 'templates.emptyDescription': string;
     readonly 'templates.register': string;
     readonly 'templates.viewAll': string;
-    readonly 'onboarding.guest': string;
     readonly 'onboarding.greeting.goodMorning': string;
     readonly 'onboarding.greeting.goodAfternoon': string;
     readonly 'onboarding.greeting.goodEvening': string;
+    readonly 'onboarding.guest': string;
     readonly 'onboarding.getStarted.title': string;
     readonly 'onboarding.getStarted.description': string;
     readonly 'onboarding.getStarted.buttonText': string;
@@ -46,11 +50,11 @@ export const homepageTranslationRef: TranslationRef<
     readonly 'onboarding.learn.description': string;
     readonly 'onboarding.learn.buttonText': string;
     readonly 'onboarding.learn.ariaLabel': string;
-    readonly 'entities.title': string;
-    readonly 'entities.error': string;
     readonly 'entities.close': string;
     readonly 'entities.empty': string;
+    readonly 'entities.title': string;
     readonly 'entities.fetchError': string;
+    readonly 'entities.error': string;
     readonly 'entities.emptyDescription': string;
     readonly 'entities.register': string;
     readonly 'entities.description': string;

workspaces/homepage/plugins/dynamic-home-page/report-alpha.api.md

@@ -144,11 +144,6 @@ export interface HomePageCardMountPointConfig {
   titleKey?: string;
 }
 
-// @public (undocumented)
-export const JokeCard: ComponentType<{
-  defaultCategory?: 'any' | 'programming';
-}>;
-
 // @public (undocumented)
 export interface Layout {
   // (undocumented)
@@ -223,6 +218,8 @@ export interface QuickAccessCardProps {
   path?: string;
   // (undocumented)
   title?: string;
+  // (undocumented)
+  titleKey?: string;
 }
 
 // @public (undocumented)

workspaces/homepage/plugins/dynamic-home-page/report.api.md

@@ -18,6 +18,7 @@ import { HomePageWidgetBlueprint } from '@backstage/plugin-home-react/alpha';
 import homePlugin from '@backstage/plugin-home/alpha';
 import { compatWrapper } from '@backstage/core-compat-api';
 import { homepageMessages } from '../../translations/ref';
+import { createTranslatedCardRenderer } from '../../utils/translatedCardRenderer';
 
 const defaultCardLayout = {
   width: {
@@ -63,6 +64,7 @@ export const entitySectionWidget = HomePageWidgetBlueprint.make({
     components: () =>
       import('../../components/EntitySection/EntitySection').then(m => ({
         Content: m.EntitySectionContent,
+        Renderer: createTranslatedCardRenderer('entities.title'),
       })),
   },
 });
@@ -80,6 +82,7 @@ export const templateSectionWidget = HomePageWidgetBlueprint.make({
     components: () =>
       import('../../components/TemplateSection/TemplateSection').then(m => ({
         Content: m.TemplateSectionContent,
+        Renderer: createTranslatedCardRenderer('templates.title'),
       })),
   },
 });
@@ -97,6 +100,9 @@ export const quickAccessCardWidget = HomePageWidgetBlueprint.make({
     components: () =>
       import('../../components/QuickAccessCard').then(m => ({
         Content: m.QuickAccessCardContent,
+        Renderer: createTranslatedCardRenderer('quickAccess.title', {
+          quickAccessStyle: true,
+        }),
       })),
   },
 });
@@ -128,15 +134,14 @@ export const searchBarWidget = HomePageWidgetBlueprint.make({
 });
 
 /**
- * Renders a legacy plugin-home CardExtension directly, skipping the NFS
- * CardExtension InfoCard shell. Used when upstream only exports full cards
- * (not Content) from the public API.
+ * Renders upstream home cards that include their own InfoCard shell.
+ * @alpha
  */
-const legacyHomeCardRenderer = ({
+const upstreamHomeCardRenderer = ({
   Content,
 }: {
   Content: React.ComponentType;
-}) => compatWrapper(<Content />);
+}) => <Content />;
 
 /**
  * NFS widget: FeaturedDocsCard (migrated from mountPoint home.page/cards).
@@ -146,11 +151,12 @@ export const featuredDocsCardWidget = HomePageWidgetBlueprint.make({
   name: 'featured-docs-card',
   params: {
     name: 'Featured docs',
+    title: homepageMessages.featuredDocs.title,
     layout: defaultCardLayout,
     components: () =>
       import('../../components/FeaturedDocsCard').then(m => ({
         Content: m.FeaturedDocsCard,
-        Renderer: legacyHomeCardRenderer,
+        Renderer: upstreamHomeCardRenderer,
       })),
   },
 });
@@ -164,7 +170,14 @@ export const catalogStarredWidget = homePlugin
   .override({
     params: {
       name: 'CatalogStarred',
-      title: 'Starred catalog entities',
+      title: homepageMessages.starredEntities.title,
+      components: () =>
+        import('../../components/legacy/TranslatedUpstreamHomePageCards').then(
+          m => ({
+            Content: m.CatalogStarredEntitiesCard,
+            Renderer: upstreamHomeCardRenderer,
+          }),
+        ),
     },
   });
 
@@ -187,11 +200,14 @@ export const RecentlyVisitedWidget = HomePageWidgetBlueprint.make({
   params: {
     layout: defaultCardLayout,
     name: 'Recently visited',
+    title: homepageMessages.recentlyVisited.title,
     components: () =>
-      import('@backstage/plugin-home').then(m => ({
-        Content: m.HomePageRecentlyVisited,
-        Renderer: legacyHomeCardRenderer,
-      })),
+      import('../../components/legacy/TranslatedUpstreamHomePageCards').then(
+        m => ({
+          Content: m.RecentlyVisitedCard,
+          Renderer: upstreamHomeCardRenderer,
+        }),
+      ),
   },
 });
 
@@ -204,10 +220,13 @@ export const TopVisitedWidget = HomePageWidgetBlueprint.make({
   params: {
     layout: defaultCardLayout,
     name: 'Top visited',
+    title: homepageMessages.topVisited.title,
     components: () =>
-      import('@backstage/plugin-home').then(m => ({
-        Content: m.HomePageTopVisited,
-        Renderer: legacyHomeCardRenderer,
-      })),
+      import('../../components/legacy/TranslatedUpstreamHomePageCards').then(
+        m => ({
+          Content: m.TopVisitedCard,
+          Renderer: upstreamHomeCardRenderer,
+        }),
+      ),
   },
 });