feat(scorecard):Added extension for scorecard homepage and metric page (#2637)

* feat(scorecard):Added extension for scorecard homepage and metric page

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>

* Supporting e2e tests for nfs

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>

* adding changeset

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>

* removing the double border

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>

* using published home-page

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>

* updating translation import in app-legacy

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>

---------

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>

Author: rohitratannagar

workspaces/scorecard/.changeset/modern-eggs-sink.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-scorecard': minor
+---
+
+Adding scorecardHomepage and metric page extension, also added e2e support in nfs

workspaces/scorecard/.gitignore

@@ -51,4 +51,4 @@ site
 *.session.sql
 
 # E2E test reports
-e2e-test-report/
+e2e-test-report*/

workspaces/scorecard/app-config.yaml

@@ -5,8 +5,13 @@ app:
   extensions:
     - api:app/app-language:
         config:
-          availableLanguages: ['en', 'de', 'fr']
+          availableLanguages: ['en', 'de', 'fr', 'it', 'es', 'ja']
           defaultLanguage: 'en'
+    - api:home/visits: true
+    - app-root-element:home/visit-listener: true
+    - page:home:
+        config:
+          path: /
 
     # Scorecard tab: entity shows tab if it matches any filter below.
     - entity-content:catalog/entity-content-scorecard:
@@ -16,6 +21,28 @@ app:
               type: website
             - kind: api # e.g. any API entity
             - type: service # e.g. Component or System with spec.type: service
+    - home-page-layout:home/dynamic-homepage-layout:
+        config:
+          customizable: true
+          widgetLayout:
+            ScorecardJiraHomepage:
+              priority: 240
+              breakpoints:
+                xl: { w: 4, h: 6 }
+                lg: { w: 4, h: 6 }
+                md: { w: 4, h: 6 }
+                sm: { w: 4, h: 6 }
+                xs: { w: 4, h: 6 }
+                xxs: { w: 4, h: 6 }
+            ScorecardGithubHomepage:
+              priority: 250
+              breakpoints:
+                xl: { w: 4, h: 6, x: 4 }
+                lg: { w: 4, h: 6, x: 4 }
+                md: { w: 4, h: 6, x: 4 }
+                sm: { w: 4, h: 6, x: 4 }
+                xs: { w: 4, h: 6, x: 4 }
+                xxs: { w: 4, h: 6, x: 4 }
 organization:
   name: My Company
 

workspaces/scorecard/package.json

@@ -21,6 +21,10 @@
     "test": "NODE_OPTIONS='--experimental-vm-modules' backstage-cli repo test",
     "test:all": "NODE_OPTIONS='--experimental-vm-modules' backstage-cli repo test --coverage",
     "test:e2e": "playwright test",
+    "test:e2e:legacy": "APP_MODE=legacy playwright test",
+    "test:e2e:nfs": "APP_MODE=nfs playwright test",
+    "test:e2e:all": "yarn test:e2e:legacy && yarn test:e2e:nfs",
+    "playwright": "bash -c 'if [[ \"$*\" == \"test\" ]]; then yarn test:e2e:all; else npx playwright \"$@\"; fi' _",
     "fix": "backstage-cli repo fix",
     "lint": "backstage-cli repo lint --since origin/main",
     "lint:all": "backstage-cli repo lint",

workspaces/scorecard/packages/app-legacy/e2e-tests/pages/HomePage.ts

@@ -22,6 +22,8 @@ import {
 } from '../utils/translationUtils';
 
 type ThresholdState = 'success' | 'warning' | 'error';
+const escapeRegex = (value: string) =>
+  value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 
 export class HomePage {
   readonly page: Page;
@@ -48,7 +50,22 @@ export class HomePage {
 
   async addCard(cardName: string) {
     await this.page.getByRole('button', { name: 'Add widget' }).click();
-    await this.page.getByRole('button', { name: cardName }).click();
+    await expect(
+      this.page.getByRole('heading', { name: 'Add new widget to dashboard' }),
+    ).toBeVisible();
+
+    let cardPattern: RegExp;
+    if (cardName === 'Onboarding section') {
+      cardPattern = /Onboarding section|RhdhOnboardingSection/i;
+    } else if (cardName === 'Scorecard: GitHub open PRs') {
+      cardPattern = /Scorecard:\s*GitHub open PRs|ScorecardGithubHomepage/i;
+    } else if (cardName === 'Scorecard: Jira open blocking') {
+      cardPattern = /Scorecard:\s*Jira open blocking|ScorecardJiraHomepage/i;
+    } else {
+      cardPattern = new RegExp(escapeRegex(cardName), 'i');
+    }
+
+    await this.page.getByRole('button', { name: cardPattern }).first().click();
   }
 
   async saveChanges() {
@@ -69,8 +86,9 @@ export class HomePage {
 
   getCard(metricId: 'github.open_prs' | 'jira.open_issues'): Locator {
     return this.page
-      .locator('article')
-      .filter({ hasText: this.translations.metric[metricId].title });
+      .getByText(this.translations.metric[metricId].title, { exact: true })
+      .last()
+      .locator('xpath=ancestor::article[1]');
   }
 
   async verifyThresholdTooltip(

workspaces/scorecard/packages/app-legacy/e2e-tests/scorecard.test.ts

@@ -70,6 +70,17 @@ test.describe('Scorecard Plugin Tests', () => {
 
   test.describe('Entity Scorecards', () => {
     test('Verify permission required state', async ({ browser }, testInfo) => {
+      await mockScorecardResponse(
+        page,
+        {
+          error: {
+            name: 'NotAllowedError',
+            message: 'Permission denied',
+          },
+        },
+        403,
+      );
+
       await catalogPage.openCatalog();
       await catalogPage.openComponent('Red Hat Developer Hub');
       await page.getByText('Scorecard', { exact: true }).click();
@@ -184,7 +195,30 @@ test.describe('Scorecard Plugin Tests', () => {
 
   test.describe('Aggregated Scorecards', () => {
     test('Verify missing permission state', async () => {
+      await mockAggregatedScorecardResponse(
+        page,
+        {
+          error: {
+            name: 'NotAllowedError',
+            message: 'Permission denied',
+          },
+        },
+        {
+          error: {
+            name: 'NotAllowedError',
+            message: 'Permission denied',
+          },
+        },
+        403,
+      );
+
       await homePage.navigateToHome();
+      await page.reload();
+      await homePage.enterEditMode();
+      await homePage.clearAllCards();
+      await homePage.addCard('Scorecard: GitHub open PRs');
+      await homePage.addCard('Scorecard: Jira open blocking');
+      await homePage.saveChanges();
 
       const entityCount = getEntityCount(translations, currentLocale, '0');
 
@@ -268,7 +302,9 @@ test.describe('Scorecard Plugin Tests', () => {
         ),
       );
 
-      await runAccessibilityTests(page, testInfo);
+      await runAccessibilityTests(page, testInfo, undefined, {
+        includeSelectors: ['[data-chart-container]'],
+      });
     });
 
     test('Verify cards aggregation data is not found when API returns empty aggregated response', async () => {

workspaces/scorecard/packages/app-legacy/e2e-tests/utils/accessibility.ts

@@ -21,10 +21,20 @@ export async function runAccessibilityTests(
   page: Page,
   testInfo: TestInfo,
   attachName = 'accessibility-scan-results.json',
+  options?: {
+    includeSelectors?: string[];
+  },
 ) {
-  const accessibilityScanResults = await new AxeBuilder({ page })
-    .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
-    .analyze();
+  let axeBuilder = new AxeBuilder({ page }).withTags([
+    'wcag2a',
+    'wcag2aa',
+    'wcag21a',
+    'wcag21aa',
+  ]);
+  for (const selector of options?.includeSelectors ?? []) {
+    axeBuilder = axeBuilder.include(selector);
+  }
+  const accessibilityScanResults = await axeBuilder.analyze();
 
   await testInfo.attach(attachName, {
     body: JSON.stringify(accessibilityScanResults, null, 2),

workspaces/scorecard/packages/app-legacy/src/App.test.tsx

@@ -16,6 +16,14 @@
 import { render, waitFor } from '@testing-library/react';
 import App from './App';
 
+jest.mock(
+  '@red-hat-developer-hub/backstage-plugin-dynamic-home-page/alpha',
+  () => ({
+    homepageTranslations: {},
+  }),
+  { virtual: true },
+);
+
 describe('App', () => {
   it('should render', async () => {
     process.env = {

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

@@ -68,8 +68,8 @@ import {
   DynamicCustomizableHomePage,
   OnboardingSection,
   HomePageCardMountPoint,
-  homepageTranslations,
 } from '@red-hat-developer-hub/backstage-plugin-dynamic-home-page';
+import { homepageTranslations } from '@red-hat-developer-hub/backstage-plugin-dynamic-home-page/alpha';
 import { ComponentType } from 'react';
 
 const mountPoints: HomePageCardMountPoint[] = [

workspaces/scorecard/packages/app/package.json

@@ -26,6 +26,7 @@
     "@backstage/plugin-api-docs": "^0.13.1",
     "@backstage/plugin-app-react": "^0.1.0",
     "@backstage/plugin-catalog": "^1.32.0",
+    "@backstage/plugin-home": "^0.9.2",
     "@backstage/plugin-org": "^0.6.46",
     "@backstage/plugin-scaffolder": "^1.34.3",
     "@backstage/plugin-search": "^1.5.0",
@@ -34,6 +35,7 @@
     "@backstage/ui": "^0.9.1",
     "@material-ui/core": "^4.12.2",
     "@mui/icons-material": "^5.18.0",
+    "@red-hat-developer-hub/backstage-plugin-dynamic-home-page": "1.11.0",
     "@red-hat-developer-hub/backstage-plugin-scorecard": "workspace:^",
     "@red-hat-developer-hub/backstage-plugin-theme": "^0.13.0",
     "react": "^18.0.2",