feat: allow overriding build info

Author: debsmita1

.ibm/pipelines/resources/config_map/app-config-rhdh.yaml

@@ -176,3 +176,10 @@ argocd:
           token: temp
 permission:
   enabled: false
+
+buildInfo:
+  title: 'RHDH Build info'
+  card:
+    TechDocs builder: 'local'
+    Authentication provider: 'Github'
+    RBAC: disabled

docs/customization.md

@@ -88,9 +88,9 @@ app:
   branding:
     theme:
       light:
-        primaryColor: '#38be8b'
+        primaryColor: "#38be8b"
       dark:
-        primaryColor: '#ab75cf'
+        primaryColor: "#ab75cf"
 ```
 
 ![Example Light Mode Primary Color](images/example-light-mode-primary-color.png)
@@ -107,11 +107,11 @@ app:
   branding:
     theme:
       light:
-        headerColor1: 'hsl(204 100% 71%)'
-        headerColor2: 'color(a98-rgb 1 0 0)'
+        headerColor1: "hsl(204 100% 71%)"
+        headerColor2: "color(a98-rgb 1 0 0)"
       dark:
-        headerColor1: '#0000d0'
-        headerColor2: 'rgb(255 246 140)'
+        headerColor1: "#0000d0"
+        headerColor2: "rgb(255 246 140)"
 ```
 
 ![Example Light Mode Banner](images/example-light-mode-banner.png)
@@ -126,9 +126,9 @@ app:
   branding:
     theme:
       light:
-        navigationIndicatorColor: '#be0000'
+        navigationIndicatorColor: "#be0000"
       dark:
-        navigationIndicatorColor: '#f4eea9'
+        navigationIndicatorColor: "#f4eea9"
 ```
 
 ![Example Light Mode Sidebar Indicator](images/example-sidebar-indicator-light.png)
@@ -162,3 +162,18 @@ app:
 If support is not configured, it would look as below.
 
 ![Example Support Not Configured](images/support-not-configured.png)
+
+## Customizing Build info content in the user settings page
+
+To customize the build info content in the user settings page, provide your content to the `buildInfo` field in the `app-config.yaml` file.
+
+Example configurations:
+
+```
+buildInfo:
+  title: <Specify the title you want to display in the build info card.>
+  card:
+    TechDocs builder: 'local'
+    Authentication provider: 'Github'
+    RBAC: disabled
+```

e2e-tests/playwright/e2e/plugins/user-settings-info-card.spec.ts

@@ -0,0 +1,32 @@
+import { test } from "@playwright/test";
+import { Common } from "../../utils/common";
+import { UIhelper } from "../../utils/ui-helper";
+import { UI_HELPER_ELEMENTS } from "../../support/pageObjects/global-obj";
+
+test.describe("Test user settings info card", () => {
+  let uiHelper: UIhelper;
+
+  test.beforeEach(async ({ page }) => {
+    const common = new Common(page);
+    await common.loginAsGuest();
+
+    uiHelper = new UIhelper(page);
+  });
+
+  test("Check if customized build info is rendered", async ({ page }) => {
+    await uiHelper.openSidebar("Settings");
+    await uiHelper.verifyTextInSelector(
+      UI_HELPER_ELEMENTS.MuiCardHeader,
+      "RHDH Build info",
+    );
+    await uiHelper.verifyTextInSelector(
+      UI_HELPER_ELEMENTS.MuiCard("RHDH Build info"),
+      "TechDocs builder: local\nAuthentication provider: Github",
+    );
+    await page.getByTitle("Show more").click();
+    await uiHelper.verifyTextInSelector(
+      UI_HELPER_ELEMENTS.MuiCard("RHDH Build info"),
+      "TechDocs builder: local\nAuthentication provider: Github\nRBAC: disabled",
+    );
+  });
+});

packages/app/config.d.ts

@@ -187,4 +187,10 @@ export interface Config {
    * @visibility frontend
    */
   includeTransitiveGroupOwnership?: boolean;
+
+  /**
+   * Allows you to customize RHDH Metadata card
+   * @deepVisibility frontend
+   */
+  buildInfo?: { title: string; card: { [key: string]: string } };
 }

packages/app/src/build-metadata.json

@@ -1,8 +1,8 @@
 {
   "title": "RHDH Metadata",
-  "card": [
-    "RHDH Version: 1.6.0",
-    "Backstage Version: 1.35.1",
-    "Last Commit: repo @ 2025-01-31T14:15:06Z"
-  ]
+  "card": {
+    "RHDH Version": "1.6.0",
+    "Backstage Version": "1.35.1",
+    "Last Commit": "repo @ 2025-01-31T14:15:06Z"
+  }
 }

packages/app/src/components/UserSettings/InfoCard.test.tsx

@@ -1,20 +1,90 @@
-import { renderInTestApp } from '@backstage/test-utils';
+import { configApiRef } from '@backstage/core-plugin-api';
+import {
+  mockApis,
+  renderInTestApp,
+  TestApiProvider,
+} from '@backstage/test-utils';
 
 import { userEvent } from '@testing-library/user-event';
 
 import { InfoCard } from './InfoCard';
 
 describe('InfoCard', () => {
   it('should render essential versions by default', async () => {
-    const renderResult = await renderInTestApp(<InfoCard />);
+    const mockConfig = mockApis.config({
+      data: {
+        buildInfo: {},
+      },
+    });
+    const renderResult = await renderInTestApp(
+      <TestApiProvider apis={[[configApiRef, mockConfig]]}>
+        <InfoCard />
+      </TestApiProvider>,
+    );
     expect(renderResult.getByText(/RHDH Version/)).toBeInTheDocument();
     expect(renderResult.getByText(/Backstage Version/)).toBeInTheDocument();
   });
 
   it('should hide the build time by default and show it on click', async () => {
-    const renderResult = await renderInTestApp(<InfoCard />);
+    const mockConfig = mockApis.config({
+      data: {
+        buildInfo: {},
+      },
+    });
+    const renderResult = await renderInTestApp(
+      <TestApiProvider apis={[[configApiRef, mockConfig]]}>
+        <InfoCard />
+      </TestApiProvider>,
+    );
     expect(renderResult.queryByText(/Last Commit/)).toBeNull();
     await userEvent.click(renderResult.getByText(/RHDH Version/));
     expect(renderResult.getByText(/Last Commit/)).toBeInTheDocument();
   });
+
+  it('should render the customized values when build info is configured', async () => {
+    const mockConfig = mockApis.config({
+      data: {
+        buildInfo: {
+          title: 'RHDH Build info',
+          card: {
+            'TechDocs builder': 'local',
+            'Authentication provider': 'Github',
+            RBAC: 'disabled',
+          },
+        },
+      },
+    });
+    const renderResult = await renderInTestApp(
+      <TestApiProvider apis={[[configApiRef, mockConfig]]}>
+        <InfoCard />
+      </TestApiProvider>,
+    );
+    expect(renderResult.queryByText(/TechDocs builder/)).toBeInTheDocument();
+    expect(
+      renderResult.queryByText(/Authentication provider/),
+    ).toBeInTheDocument();
+    await userEvent.click(renderResult.getByText(/TechDocs builder/));
+    expect(renderResult.getByText(/RBAC/)).toBeInTheDocument();
+  });
+
+  it('should fallback to default json if the customized card value is empty', async () => {
+    const mockConfig = mockApis.config({
+      data: {
+        buildInfo: {
+          title: 'RHDH Build info',
+          card: {},
+        },
+      },
+    });
+    const renderResult = await renderInTestApp(
+      <TestApiProvider apis={[[configApiRef, mockConfig]]}>
+        <InfoCard />
+      </TestApiProvider>,
+    );
+    expect(
+      renderResult.queryByText(/TechDocs builder/),
+    ).not.toBeInTheDocument();
+    expect(renderResult.getByText(/RHDH Version/)).toBeInTheDocument();
+    expect(renderResult.getByText(/Backstage Version/)).toBeInTheDocument();
+  });
 });

packages/app/src/components/UserSettings/InfoCard.tsx

@@ -4,15 +4,20 @@ import {
   InfoCard as BSInfoCard,
   CopyTextButton,
 } from '@backstage/core-components';
+import { configApiRef, useApi } from '@backstage/core-plugin-api';
 
 import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
 import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 
 import buildMetadata from '../../build-metadata.json';
+import { BuildInfo } from '../../types/types';
 
 export const InfoCard = () => {
+  const config = useApi(configApiRef);
+  const buildInfo: BuildInfo | undefined = config.getOptional('buildInfo');
+
   const [showBuildInformation, setShowBuildInformation] =
     React.useState<boolean>(
       () =>
@@ -32,24 +37,47 @@ export const InfoCard = () => {
     }
   };
 
-  let clipboardText = buildMetadata.title;
-  if (buildMetadata.card?.length) {
+  const buildDetailsTitle = () => {
+    if (buildInfo?.title && Object.keys(buildInfo?.card ?? {}).length > 0) {
+      return buildInfo.title;
+    }
+    if (!buildInfo?.title && Object.keys(buildInfo?.card ?? {}).length > 0) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'Set a custom title for your build details to display your preferred title.',
+      );
+      return 'Build Metadata';
+    }
+    return buildMetadata.title;
+  };
+
+  let clipboardText = buildDetailsTitle();
+  const buildDetails = Object.entries(
+    buildInfo?.card && Object.keys(buildInfo.card).length > 0
+      ? buildInfo.card
+      : buildMetadata?.card || {},
+  ).map(([key, value]) => `${key}: ${value}`);
+  if (buildDetails?.length) {
     clipboardText += '\n\n';
-    buildMetadata.card.forEach(text => {
+    buildDetails.forEach(text => {
       clipboardText += `${text}\n`;
     });
   }
 
-  const filteredCards = showBuildInformation
-    ? buildMetadata.card
-    : buildMetadata.card.filter(
-        text =>
-          text.startsWith('RHDH Version') ||
-          text.startsWith('Backstage Version'),
-      );
+  const filteredContent = () => {
+    if (Object.keys(buildInfo?.card ?? {})?.length > 0) {
+      return buildDetails.slice(0, 2);
+    }
+    return buildDetails.filter(
+      text =>
+        text.startsWith('RHDH Version') || text.startsWith('Backstage Version'),
+    );
+  };
+
+  const filteredCards = showBuildInformation ? buildDetails : filteredContent();
   // Ensure that we show always some information
   const versionInfo =
-    filteredCards.length > 0 ? filteredCards.join('\n') : buildMetadata.card[0];
+    filteredCards.length > 0 ? filteredCards.join('\n') : buildDetails[0];
 
   /**
    * Show all build information and automatically select them
@@ -80,7 +108,7 @@ export const InfoCard = () => {
 
   return (
     <BSInfoCard
-      title={buildMetadata.title}
+      title={buildDetailsTitle()}
       action={
         // This is a workaround to ensure that the buttons doesn't increase the header size.
         <div style={{ position: 'relative' }}>

packages/app/src/types/types.ts

@@ -6,3 +6,8 @@ export type LearningPathLink = {
   minutes?: number;
   paths?: number;
 };
+
+export type BuildInfo = {
+  title: string;
+  card: { [key: string]: string };
+};