Merge pull request #4713 from adamdmharvey/apidocs-header

api-docs: Add organization name to page header

plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx

@@ -14,20 +14,25 @@
  * limitations under the License.
  */
 
-import { Header, Page } from '@backstage/core';
+import { Header, Page, useApi, configApiRef } from '@backstage/core';
 import React from 'react';
 
 type Props = {
   children?: React.ReactNode;
 };
-
-export const ApiExplorerLayout = ({ children }: Props) => (
-  <Page themeId="home">
-    <Header
-      title="APIs"
-      subtitle="Backstage API Explorer"
-      pageTitleOverride="APIs"
-    />
-    {children}
-  </Page>
-);
+export const ApiExplorerLayout = ({ children }: Props) => {
+  const configApi = useApi(configApiRef);
+  const generatedSubtitle = `${
+    configApi.getOptionalString('organization.name') ?? 'Backstage'
+  } API Explorer`;
+  return (
+    <Page themeId="home">
+      <Header
+        title="APIs"
+        subtitle={generatedSubtitle}
+        pageTitleOverride="APIs"
+      />
+      {children}
+    </Page>
+  );
+};

plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx

@@ -15,7 +15,14 @@
  */
 
 import { Entity } from '@backstage/catalog-model';
-import { ApiProvider, ApiRegistry, storageApiRef } from '@backstage/core';
+import {
+  ApiProvider,
+  ApiRegistry,
+  storageApiRef,
+  ConfigApi,
+  configApiRef,
+  ConfigReader,
+} from '@backstage/core';
 import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils';
 import { render } from '@testing-library/react';
@@ -50,6 +57,12 @@ describe('ApiCatalogPage', () => {
       Promise.resolve({ id: 'id', type: 'github', target: 'url' }),
   };
 
+  const configApi: ConfigApi = new ConfigReader({
+    organization: {
+      name: 'My Company',
+    },
+  });
+
   const apiDocsConfig = {
     getApiDefinitionWidget: () => undefined,
   };
@@ -60,6 +73,7 @@ describe('ApiCatalogPage', () => {
         <ApiProvider
           apis={ApiRegistry.from([
             [catalogApiRef, catalogApi],
+            [configApiRef, configApi],
             [storageApiRef, MockStorageApi.create()],
             [apiDocsConfigRef, apiDocsConfig],
           ])}
@@ -74,6 +88,6 @@ describe('ApiCatalogPage', () => {
   // https://github.com/mbrn/material-table/issues/1293
   it('should render', async () => {
     const { findByText } = renderWrapped(<ApiExplorerPage />);
-    expect(await findByText(/Backstage API Explorer/)).toBeInTheDocument();
+    expect(await findByText(/My Company API Explorer/)).toBeInTheDocument();
   });
 });