Reworked TechDocs page subtitle to reflect the company/organization name (#5317)

* reworked page subtitle to reflect the company/organization name instead of 'Backstage'

Signed-off-by: Jonah Grimes <jgrimes@appriss.com>

* ran prettier to reformat code

Signed-off-by: Jonah Grimes <jgrimes@appriss.com>

* marked changeset as techdocs only

Signed-off-by: Jonah Grimes <jgrimes@appriss.com>

.changeset/techdocs-chatty-impalas-compare.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Reworked the TechDocs plugin to support using the configured company name instead of
+'Backstage' in the page title.

plugins/techdocs/src/home/components/TechDocsHome.test.tsx

@@ -14,7 +14,13 @@
  * limitations under the License.
  */
 
-import { ApiProvider, ApiRegistry } from '@backstage/core';
+import {
+  ApiProvider,
+  ApiRegistry,
+  ConfigApi,
+  configApiRef,
+  ConfigReader,
+} from '@backstage/core';
 import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { screen } from '@testing-library/react';
@@ -26,7 +32,16 @@ describe('TechDocs Home', () => {
     getEntities: async () => ({ items: [] }),
   };
 
-  const apiRegistry = ApiRegistry.with(catalogApiRef, catalogApi);
+  const configApi: ConfigApi = new ConfigReader({
+    organization: {
+      name: 'My Company',
+    },
+  });
+
+  const apiRegistry = ApiRegistry.with(catalogApiRef, catalogApi).with(
+    configApiRef,
+    configApi,
+  );
 
   it('should render a TechDocs home page', async () => {
     await renderInTestApp(
@@ -38,7 +53,7 @@ describe('TechDocs Home', () => {
     // Header
     expect(await screen.findByText('Documentation')).toBeInTheDocument();
     expect(
-      await screen.findByText(/Documentation available in Backstage/i),
+      await screen.findByText(/Documentation available in My Company/i),
     ).toBeInTheDocument();
 
     // Explore Content

plugins/techdocs/src/home/components/TechDocsHome.tsx

@@ -21,6 +21,8 @@ import { catalogApiRef, CatalogApi } from '@backstage/plugin-catalog-react';
 import { Entity } from '@backstage/catalog-model';
 import {
   CodeSnippet,
+  ConfigApi,
+  configApiRef,
   Content,
   Header,
   HeaderTabs,
@@ -36,6 +38,7 @@ import { OwnedContent } from './OwnedContent';
 export const TechDocsHome = () => {
   const [selectedTab, setSelectedTab] = useState<number>(0);
   const catalogApi: CatalogApi = useApi(catalogApiRef);
+  const configApi: ConfigApi = useApi(configApiRef);
 
   const tabs = [{ label: 'Overview' }, { label: 'Owned Documents' }];
 
@@ -46,13 +49,14 @@ export const TechDocsHome = () => {
     });
   });
 
+  const generatedSubtitle = `Documentation available in ${
+    configApi.getOptionalString('organization.name') ?? 'Backstage'
+  }`;
+
   if (loading) {
     return (
       <Page themeId="documentation">
-        <Header
-          title="Documentation"
-          subtitle="Documentation available in Backstage"
-        />
+        <Header title="Documentation" subtitle={generatedSubtitle} />
         <Content>
           <Progress />
         </Content>
@@ -63,10 +67,7 @@ export const TechDocsHome = () => {
   if (error) {
     return (
       <Page themeId="documentation">
-        <Header
-          title="Documentation"
-          subtitle="Documentation available in Backstage"
-        />
+        <Header title="Documentation" subtitle={generatedSubtitle} />
         <Content>
           <WarningPanel
             severity="error"
@@ -81,10 +82,7 @@ export const TechDocsHome = () => {
 
   return (
     <Page themeId="documentation">
-      <Header
-        title="Documentation"
-        subtitle="Documentation available in Backstage"
-      />
+      <Header title="Documentation" subtitle={generatedSubtitle} />
       <HeaderTabs
         selectedIndex={selectedTab}
         onChange={index => setSelectedTab(index)}