feat(catalog): different headers per comp type (#1409)

* feat(catalog): different headers per comp type

* fix: home as default theme to fix flickering

plugins/catalog/src/components/EntityPage/EntityPage.test.tsx

@@ -25,11 +25,13 @@ jest.mock('react-router-dom', () => {
 });
 
 import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
+import { Entity } from '@backstage/catalog-model';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { render, wait } from '@testing-library/react';
 import * as React from 'react';
 import { CatalogApi, catalogApiRef } from '../../api/types';
-import { EntityPage } from './EntityPage';
+import { EntityPage, getPageTheme } from './EntityPage';
+
 const {
   useParams,
   useNavigate,
@@ -67,3 +69,32 @@ describe('EntityPage', () => {
     await wait(() => expect(useNavigate()).toHaveBeenCalledWith('/catalog'));
   });
 });
+
+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/catalog/src/components/EntityPage/EntityPage.tsx

@@ -24,6 +24,7 @@ import {
   pageTheme,
   Progress,
   useApi,
+  PageTheme,
 } from '@backstage/core';
 import { SentryIssuesWidget } from '@backstage/plugin-sentry';
 import { Grid } from '@material-ui/core';
@@ -56,6 +57,11 @@ function headerProps(
   };
 }
 
+export const getPageTheme = (entity?: Entity): PageTheme => {
+  const themeKey = entity?.spec?.type?.toString() ?? 'home';
+  return pageTheme[themeKey] ?? pageTheme.home;
+};
+
 export const EntityPage: FC<{}> = () => {
   const { optionalNamespaceAndName, kind } = useParams() as {
     optionalNamespaceAndName: string;
@@ -130,8 +136,7 @@ export const EntityPage: FC<{}> = () => {
   );
 
   return (
-    // TODO: Switch theme and type props based on component type (website, library, ...)
-    <Page theme={pageTheme.service}>
+    <Page theme={getPageTheme(entity)}>
       <Header title={headerTitle} type={headerType}>
         {entity && <EntityContextMenu onUnregisterEntity={showRemovalDialog} />}
       </Header>

plugins/catalog/src/data/filters.ts

@@ -90,7 +90,7 @@ export const entityFilters: Record<string, EntityFilter> = {
 export const entityTypeFilter = (e: Entity, type: string) =>
   (e.spec as any)?.type === type;
 
-type EntityType = 'service' | 'website' | 'lib' | 'documentation' | 'other';
+type EntityType = 'service' | 'website' | 'library' | 'documentation' | 'other';
 
 type LabeledEntityType = {
   id: EntityType;
@@ -107,7 +107,7 @@ export const labeledEntityTypes: LabeledEntityType[] = [
     label: 'Websites',
   },
   {
-    id: 'lib',
+    id: 'library',
     label: 'Libraries',
   },
   {