feat(jenkins): Add title property to Jenkins components

workspaces/jenkins/.changeset/shiny-coins-destroy.md

@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-jenkins': minor
+---
+
+Add title property to Jenkins components.

workspaces/jenkins/plugins/jenkins/README.md

@@ -132,3 +132,24 @@ export const generatedColumns: TableColumn[] = [
 <EntityJenkinsContent columns={generatedColumns}/>
 // ...
 ```
+
+## Modify the title
+
+To change the default title text, simply use the `title` property:
+
+```tsx
+<EntityJenkinsContent title="Jenkins build history" />
+
+<EntityLatestJenkinsRunCard
+  branch="main"
+  variant="gridItem"
+  title="Latest production build"
+/>
+
+// Here it is possible to use a function to concatenate the branch name
+<EntityLatestJenkinsRunCard
+  branch="main"
+  variant="gridItem"
+  title={(branch: string) => `Latest ${branch} build`}
+/>
+```

workspaces/jenkins/plugins/jenkins/src/components/BuildsPage/lib/CITable/CITable.test.tsx

@@ -0,0 +1,80 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
+import { CITable } from './CITable';
+import { JenkinsApi, jenkinsApiRef } from '../../../../api';
+import { Project } from '../../../../api/JenkinsApi';
+import { rootRouteRef } from '../../../../plugin';
+
+jest.mock('@backstage/plugin-catalog-react/alpha', () => ({
+  useEntityPermission: () => {
+    return { loading: false, allowed: true };
+  },
+}));
+
+const entity = {
+  apiVersion: 'v1',
+  kind: 'Component',
+  metadata: {
+    name: 'software',
+    description: 'This is the description',
+    annotations: { JENKINS_ANNOTATION: 'jenkins' },
+  },
+};
+const jenkinsApi: Partial<JenkinsApi> = {
+  getProjects: () =>
+    Promise.resolve([
+      { lastBuild: { timestamp: 0, status: 'success', url: 'foo' } },
+    ] as Project[]),
+};
+
+const mountedRoutes = {
+  mountedRoutes: {
+    '/': rootRouteRef,
+  },
+};
+
+describe('<CITable />', () => {
+  describe('when the title is undefined', () => {
+    it('should render the default text', async () => {
+      const { getByText } = await renderInTestApp(
+        <TestApiProvider apis={[[jenkinsApiRef, jenkinsApi]]}>
+          <EntityProvider entity={entity}>
+            <CITable />
+          </EntityProvider>
+        </TestApiProvider>,
+        mountedRoutes,
+      );
+      expect(getByText('Projects')).toBeVisible();
+    });
+  });
+
+  describe('when title is defined', () => {
+    it('should render the text', async () => {
+      const { getByText } = await renderInTestApp(
+        <TestApiProvider apis={[[jenkinsApiRef, jenkinsApi]]}>
+          <EntityProvider entity={entity}>
+            <CITable title="My custom title!" />
+          </EntityProvider>
+        </TestApiProvider>,
+        mountedRoutes,
+      );
+      expect(getByText('My custom title!')).toBeVisible();
+    });
+  });
+});

workspaces/jenkins/plugins/jenkins/src/components/BuildsPage/lib/CITable/CITable.tsx

@@ -25,6 +25,7 @@ import { columnFactories } from './columns';
 import { defaultCITableColumns } from './presets';
 
 type Props = {
+  title?: string;
   loading: boolean;
   retry: () => void;
   projects?: Project[];
@@ -37,6 +38,7 @@ type Props = {
 };
 
 export const CITableView = ({
+  title = 'Projects',
   loading,
   pageSize,
   page,
@@ -72,7 +74,7 @@ export const CITableView = ({
         <Box display="flex" alignItems="center">
           <img src={JenkinsLogo} alt="Jenkins logo" height="50px" />
           <Box mr={2} />
-          <Typography variant="h6">Projects</Typography>
+          <Typography variant="h6">{title}</Typography>
         </Box>
       }
       columns={
@@ -83,15 +85,17 @@ export const CITableView = ({
 };
 
 type CITableProps = {
+  title?: string;
   columns?: TableColumn<Project>[];
 };
 
-export const CITable = ({ columns }: CITableProps) => {
+export const CITable = ({ title, columns }: CITableProps) => {
   const [tableProps, { setPage, retry, setPageSize }] = useBuilds();
 
   return (
     <CITableView
       {...tableProps}
+      title={title}
       columns={columns || ([] as TableColumn<Project>[])}
       retry={retry}
       onChangePageSize={setPageSize}

workspaces/jenkins/plugins/jenkins/src/components/Cards/Cards.test.tsx

@@ -88,4 +88,48 @@ describe('<LatestRunCard />', () => {
     expect(getByText("Error: Can't find Jenkins project")).toBeInTheDocument();
     expect(getByText('jenkins-project not found')).toBeInTheDocument();
   });
+
+  describe('when title is undefined', () => {
+    it('should render default text', async () => {
+      const { getByText } = await renderInTestApp(
+        <TestApiProvider apis={[[jenkinsApiRef, jenkinsApi]]}>
+          <EntityProvider entity={entity}>
+            <LatestRunCard branch="main" />
+          </EntityProvider>
+        </TestApiProvider>,
+      );
+
+      expect(getByText('Latest main build')).toBeVisible();
+    });
+  });
+
+  describe('when title is defined as string', () => {
+    it('should render the title as is', async () => {
+      const { getByText } = await renderInTestApp(
+        <TestApiProvider apis={[[jenkinsApiRef, jenkinsApi]]}>
+          <EntityProvider entity={entity}>
+            <LatestRunCard branch="main" title="My custom tile!" />
+          </EntityProvider>
+        </TestApiProvider>,
+      );
+
+      expect(getByText('My custom tile!')).toBeVisible();
+    });
+  });
+
+  describe('when title is defined as function', () => {
+    it('should call the function and use its return', async () => {
+      const titleFn = (branch: string) => `Show ${branch} status`;
+
+      const { getByText } = await renderInTestApp(
+        <TestApiProvider apis={[[jenkinsApiRef, jenkinsApi]]}>
+          <EntityProvider entity={entity}>
+            <LatestRunCard branch="main" title={titleFn} />
+          </EntityProvider>
+        </TestApiProvider>,
+      );
+
+      expect(getByText('Show main status')).toBeVisible();
+    });
+  });
 });

workspaces/jenkins/plugins/jenkins/src/components/Cards/Cards.tsx

@@ -95,15 +95,28 @@ const JenkinsApiErrorPanel = (props: {
   return <WarningPanel severity="error" title={title} message={message} />;
 };
 
+type LatestRunCardTitle = string | ((branch: string) => string);
+
+const renderLatestRunCardTitle = (
+  branch: string,
+  title?: LatestRunCardTitle,
+): string => {
+  if (title && typeof title === 'function') {
+    return title(branch);
+  }
+  return title || `Latest ${branch} build`;
+};
+
 export const LatestRunCard = (props: {
   branch: string;
   variant?: InfoCardVariants;
+  title?: LatestRunCardTitle;
 }) => {
-  const { branch = 'master', variant } = props;
+  const { branch = 'master', variant, title } = props;
   const [{ projects, loading, error }] = useBuilds({ branch });
   const latestRun = projects?.[0];
   return (
-    <InfoCard title={`Latest ${branch} build`} variant={variant}>
+    <InfoCard title={renderLatestRunCardTitle(branch, title)} variant={variant}>
       {!error ? (
         <WidgetContent
           loading={loading}

workspaces/jenkins/plugins/jenkins/src/components/Router.tsx

@@ -34,18 +34,21 @@ export const isJenkinsAvailable = (entity: Entity) =>
   Boolean(entity.metadata.annotations?.[JENKINS_ANNOTATION]) ||
   Boolean(entity.metadata.annotations?.[LEGACY_JENKINS_ANNOTATION]);
 
-export const Router = (props: { columns?: TableColumn<Project>[] }) => {
+export const Router = (props: {
+  title?: string;
+  columns?: TableColumn<Project>[];
+}) => {
   const { entity } = useEntity();
 
   if (!isJenkinsAvailable(entity)) {
     return <MissingAnnotationEmptyState annotation={JENKINS_ANNOTATION} />;
   }
 
-  const columns = props.columns;
+  const { title, columns } = props;
 
   return (
     <Routes>
-      <Route path="/" element={<CITable columns={columns} />} />
+      <Route path="/" element={<CITable title={title} columns={columns} />} />
       <Route path={`/${buildRouteRef.path}`} element={<DetailedViewPage />} />
       <Route path={`/${jobRunsRouteRef.path}`} element={<JobRunsTable />} />
     </Routes>