feat: consume theme provided by Page theme provider

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

@@ -13,14 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import { Entity } from '@backstage/catalog-model';
 import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
 import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { render, waitFor } from '@testing-library/react';
 import * as React from 'react';
-import { ApiEntityPage, getPageTheme } from './ApiEntityPage';
+import { ApiEntityPage } from './ApiEntityPage';
 
 jest.mock('react-router-dom', () => {
   const actual = jest.requireActual('react-router-dom');
@@ -71,32 +69,3 @@ describe('ApiEntityPage', () => {
     );
   });
 });
-
-describe('getPageTheme', () => {
-  const defaultPageTheme = getPageTheme();
-  it.each(['service', 'app', 'library', 'tool', 'documentation', 'website'])(
-    'should select right theme for predefined type: %p ̰ ',
-    type => {
-      const theme = getPageTheme(({
-        spec: {
-          type,
-        },
-      } as any) as Entity);
-      expect(theme).toBeDefined();
-      expect(theme).not.toBe(defaultPageTheme);
-    },
-  );
-
-  it('should select default theme for unknown/unspecified types', () => {
-    const theme1 = getPageTheme(({
-      spec: {
-        type: 'unknown-type',
-      },
-    } as any) as Entity);
-    const theme2 = getPageTheme(({
-      spec: {},
-    } as any) as Entity);
-    expect(theme1).toBe(defaultPageTheme);
-    expect(theme2).toBe(defaultPageTheme);
-  });
-});

plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx

@@ -23,9 +23,9 @@ import {
   Progress,
   useApi,
 } from '@backstage/core';
-import { customPageTheme, PageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import { catalogApiRef } from '@backstage/plugin-catalog';
-import { Box } from '@material-ui/core';
+import { Box, useTheme } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import React, { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -53,12 +53,6 @@ function headerProps(
   };
 }
 
-// REUSABLE IN plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx
-export const getPageTheme = (entity?: Entity): PageTheme => {
-  const themeKey = entity?.spec?.type?.toString() ?? 'home';
-  return customPageTheme.pageTheme[themeKey] ?? customPageTheme.pageTheme.home;
-};
-
 type EntityPageTitleProps = {
   title: string;
   entity: Entity | undefined;
@@ -71,6 +65,7 @@ const EntityPageTitle = ({ title }: EntityPageTitleProps) => (
 );
 
 export const ApiEntityPage = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const { optionalNamespaceAndName } = useParams() as {
     optionalNamespaceAndName: string;
   };
@@ -107,7 +102,11 @@ export const ApiEntityPage = () => {
   );
 
   return (
-    <Page pageTheme={getPageTheme(entity)}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: entity?.spec?.type?.toString() ?? 'home',
+      })}
+    >
       <Header
         title={<EntityPageTitle title={headerTitle} entity={entity} />}
         pageTitleOverride={headerTitle}

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

@@ -15,7 +15,8 @@
  */
 
 import { Header, Page } from '@backstage/core';
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
+import { useTheme } from '@material-ui/core';
 import React from 'react';
 
 type Props = {
@@ -23,8 +24,14 @@ type Props = {
 };
 
 export const ApiExplorerLayout = ({ children }: Props) => {
+  const backstageTheme = useTheme<BackstageTheme>();
+
   return (
-    <Page pageTheme={customPageTheme.pageTheme.home}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'home',
+      })}
+    >
       <Header
         title="APIs"
         subtitle="Backstage API Explorer"