feat(user-settings): allow overriding build info in the user settings page

.github/actions/get-sha/action.yml

@@ -42,6 +42,6 @@ runs:
         if [[ -f packages/app/src/build-metadata.json ]]; then
           now="$(date -u +%FT%TZ)"
           sed -i packages/app/src/build-metadata.json -r \
-            -e 's|("Last Commit:.+)|"Last Commit: '$REPO' @ '$SHORT_SHA'"|'
+            -e 's|("Last Commit":.+)|"Last Commit": "'$REPO' @ '$SHORT_SHA'"|'
         fi
         echo "short_sha=$SHORT_SHA" >> "$GITHUB_OUTPUT"

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

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

.rhdh/docker/Dockerfile

@@ -214,7 +214,7 @@ COPY packages/app/src/build-metadata.json ./packages/app/src/
 RUN \
   # Downstream only - relabel upstream + append build time into packages/app/src/build-metadata.json
   now=$(date -u +%FT%TZ); sed -i packages/app/src/build-metadata.json -r \
-  -e "s/\"Last Commit: (.+)\"/\"Upstream: \1\", \"Build Time: $now\"/" && \
+  -e "s/\"Last Commit\": \"(.+)\"/\"Upstream\": \"\1\", \"Build Time\": \$now/" && \
   cat packages/app/src/build-metadata.json; echo && \
   "$YARN" build --filter=backend && \
   # Downstream only - replace registry refs with cachito ones

docker/Dockerfile

@@ -162,7 +162,7 @@ RUN rm app-config.yaml && mv app-config.example.yaml app-config.yaml
 RUN \
   # Upstream only - append build time into packages/app/src/build-metadata.json
   now=$(date -u +%FT%TZ); sed -i packages/app/src/build-metadata.json -r \
-  -e "s/(\"Last Commit: .+\")/\1, \"Build Time: $now\"/" && \
+  -e "s/(\"Last Commit\": \"(.+)\")/\1, \"Build Time\": \$now/" && \
   cat packages/app/src/build-metadata.json; echo
 
 RUN "$YARN" build --filter=backend

docs/customization.md

@@ -91,9 +91,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)
@@ -110,11 +110,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)
@@ -129,9 +129,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)
@@ -165,3 +165,19 @@ 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
+  full: true # If set to true, only the information specified in this configuration will be displayed. If set to false, the provided details will be shown along with the build versions. By default it will only display the configured information.
+```

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

@@ -0,0 +1,34 @@
+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("Home");
+    page.getByText("Guest").click();
+    await page.getByRole("menuitem", { name: "Settings" }).click();
+    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

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

packages/app/src/build-metadata.json

@@ -1,8 +1,8 @@
 {
   "title": "RHDH Metadata",
-  "card": [
-    "RHDH Version: 1.6.0",
-    "Backstage Version: 1.36.1",
-    "Last Commit: repo @ 2025-03-17T17:01:16Z"
-  ]
+  "card": {
+    "RHDH Version": "1.6.0",
+    "Backstage Version": "1.36.1",
+    "Last Commit": "repo @ 2025-03-17T17:01:16Z"
+  }
 }

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

@@ -1,20 +1,148 @@
-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();
+    expect(renderResult.queryByText(/Last Commit/)).not.toBeInTheDocument();
+  });
+
+  it('should append the customized values along with RHDH versions when build info is configured with `full` set to false', async () => {
+    const mockConfig = mockApis.config({
+      data: {
+        buildInfo: {
+          title: 'RHDH Build info',
+          card: {
+            'TechDocs builder': 'local',
+            'Authentication provider': 'Github',
+            RBAC: 'disabled',
+          },
+          full: false,
+        },
+      },
+    });
+    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();
+    expect(renderResult.queryByText(/Last Commit/)).toBeInTheDocument();
+    expect(renderResult.queryByText(/RHDH Version/)).toBeInTheDocument();
+  });
+
+  it('should display only the customized values when build info is configured with full set to true, without appending RHDH versions', async () => {
+    const mockConfig = mockApis.config({
+      data: {
+        buildInfo: {
+          title: 'RHDH Build info',
+          card: {
+            'TechDocs builder': 'local',
+            'Authentication provider': 'Github',
+            RBAC: 'disabled',
+          },
+          full: true,
+        },
+      },
+    });
+    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();
+    expect(renderResult.queryByText(/Last Commit/)).not.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: undefined,
+        },
+      },
+    });
+    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,35 @@ export const InfoCard = () => {
     }
   };
 
-  let clipboardText = buildMetadata.title;
-  if (buildMetadata.card?.length) {
+  const title = buildInfo?.title ?? buildMetadata.title;
+
+  let clipboardText = title;
+  const buildDetails = Object.entries(
+    buildInfo?.full === false // append build versions to the object only when buildInfo.full === false
+      ? { ...buildInfo?.card, ...buildMetadata?.card }
+      : (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 (buildInfo?.card) {
+      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 +96,7 @@ export const InfoCard = () => {
 
   return (
     <BSInfoCard
-      title={buildMetadata.title}
+      title={title}
       action={
         // This is a workaround to ensure that the buttons doesn't increase the header size.
         <div style={{ position: 'relative' }}>