feat: allow overriding build info

debsmita1 · debsmita1 · commit 8eac7f8fab0a · 2025-03-13T11:59:03.000+05:30
diff --git a/.ibm/pipelines/resources/config_map/app-config-rhdh.yaml b/.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
diff --git a/docs/customization.md b/docs/customization.md
@@ -162,3 +162,20 @@ 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:
+    <Specify the key-value pairs you want to display in the build info card.>
+    <!-- 
+    TechDocs builder: 'local'
+    Authentication provider: 'Github'
+    RBAC: disabled -->
+```
diff --git a/e2e-tests/playwright/e2e/plugins/user-settings-info-card.spec.ts b/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",
+    );
+  });
+});
diff --git a/packages/app/config.d.ts b/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 } };
 }
diff --git a/packages/app/src/api/BuildInfoApiClient.ts b/packages/app/src/api/BuildInfoApiClient.ts
@@ -0,0 +1,30 @@
+import { ConfigApi, createApiRef } from '@backstage/core-plugin-api';
+
+export type BuildInfo = {
+  title: string;
+  card: { [key: string]: string };
+};
+
+export interface BuildInfoApi {
+  getBuildInfo(): Promise<BuildInfo>;
+}
+
+export const buildInfoApiRef = createApiRef<BuildInfoApi>({
+  id: 'internal.buildinfo',
+});
+
+export type Options = {
+  configApi: ConfigApi;
+};
+
+export class BuildInfoApiClient implements BuildInfoApi {
+  private readonly configApi: ConfigApi;
+
+  constructor(options: Options) {
+    this.configApi = options.configApi;
+  }
+
+  async getBuildInfo() {
+    return this.configApi.getOptional('buildInfo') as BuildInfo;
+  }
+}
diff --git a/packages/app/src/apis.ts b/packages/app/src/apis.ts
@@ -18,6 +18,7 @@ import {
   oidcAuthApiRef,
   samlAuthApiRef,
 } from './api/AuthApiRefs';
+import { BuildInfoApiClient, buildInfoApiRef } from './api/BuildInfoApiClient';
 import {
   LearningPathApiClient,
   learningPathApiRef,
@@ -29,6 +30,11 @@ export const apis: AnyApiFactory[] = [
     deps: { configApi: configApiRef },
     factory: ({ configApi }) => ScmIntegrationsApi.fromConfig(configApi),
   }),
+  createApiFactory({
+    api: buildInfoApiRef,
+    deps: { configApi: configApiRef },
+    factory: ({ configApi }) => new BuildInfoApiClient({ configApi }),
+  }),
   ScmAuth.createDefaultApiFactory(),
   createApiFactory({
     api: learningPathApiRef,
diff --git a/packages/app/src/build-metadata.json b/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"
+  }
 }
diff --git a/packages/app/src/components/UserSettings/InfoCard.test.tsx b/packages/app/src/components/UserSettings/InfoCard.test.tsx
@@ -1,20 +1,76 @@
-import { renderInTestApp } from '@backstage/test-utils';
+import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 
 import { userEvent } from '@testing-library/user-event';
 
+import { BuildInfo, buildInfoApiRef } from '../../api/BuildInfoApiClient';
 import { InfoCard } from './InfoCard';
 
+class MockBuildInfoApiClient {
+  async getBuildInfo(): Promise<BuildInfo> {
+    return {} as BuildInfo;
+  }
+}
+
+const mockBuildInfoApiClient = new MockBuildInfoApiClient();
+
 describe('InfoCard', () => {
   it('should render essential versions by default', async () => {
-    const renderResult = await renderInTestApp(<InfoCard />);
+    const renderResult = await renderInTestApp(
+      <TestApiProvider apis={[[buildInfoApiRef, mockBuildInfoApiClient]]}>
+        <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 renderResult = await renderInTestApp(
+      <TestApiProvider apis={[[buildInfoApiRef, mockBuildInfoApiClient]]}>
+        <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 () => {
+    mockBuildInfoApiClient.getBuildInfo = async () => ({
+      title: 'RHDH Build info',
+      card: {
+        'TechDocs builder': 'local',
+        'Authentication provider': 'Github',
+        RBAC: 'disabled',
+      },
+    });
+    const renderResult = await renderInTestApp(
+      <TestApiProvider apis={[[buildInfoApiRef, mockBuildInfoApiClient]]}>
+        <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 () => {
+    mockBuildInfoApiClient.getBuildInfo = async () => ({
+      title: 'RHDH Build info',
+      card: {},
+    });
+    const renderResult = await renderInTestApp(
+      <TestApiProvider apis={[[buildInfoApiRef, mockBuildInfoApiClient]]}>
+        <InfoCard />
+      </TestApiProvider>,
+    );
+    expect(
+      renderResult.queryByText(/TechDocs builder/),
+    ).not.toBeInTheDocument();
+    expect(renderResult.getByText(/RHDH Version/)).toBeInTheDocument();
+    expect(renderResult.getByText(/Backstage Version/)).toBeInTheDocument();
+  });
 });
diff --git a/packages/app/src/components/UserSettings/InfoCard.tsx b/packages/app/src/components/UserSettings/InfoCard.tsx
@@ -1,18 +1,26 @@
 import React from 'react';
+import useAsync from 'react-use/lib/useAsync';
 
 import {
   InfoCard as BSInfoCard,
   CopyTextButton,
 } from '@backstage/core-components';
+import { 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 { buildInfoApiRef } from '../../api/BuildInfoApiClient';
 import buildMetadata from '../../build-metadata.json';
 
 export const InfoCard = () => {
+  const client = useApi(buildInfoApiRef);
+  const { value: buildInfo } = useAsync(() => {
+    return client.getBuildInfo();
+  });
+
   const [showBuildInformation, setShowBuildInformation] =
     React.useState<boolean>(
       () =>
@@ -32,24 +40,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 +111,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' }}>

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,8 @@`
`1`	`1`	`{`
`2`	`2`	`"title": "RHDH Metadata",`
`3`		`- "card": [`
`4`		`- "RHDH Version: 1.6.0",`
`5`		`- "Backstage Version: 1.35.1",`
`6`		`- "Last Commit: repo @ 2025-01-31T14:15:06Z"`
`7`		`- ]`
	`3`	`+ "card": {`
	`4`	`+ "RHDH Version": "1.6.0",`
	`5`	`+ "Backstage Version": "1.35.1",`
	`6`	`+ "Last Commit": "repo @ 2025-01-31T14:15:06Z"`
	`7`	`+ }`
`8`	`8`	`}`