front/core: added common type for icon components and require for entity nav items

frontend/packages/app/src/entities/index.ts

@@ -4,6 +4,8 @@ import {
   createEntityPage,
 } from '@backstage/core';
 import ComputerIcon from '@material-ui/icons/Computer';
+import WebIcon from '@material-ui/icons/Web';
+import DnsIcon from '@material-ui/icons/Dns';
 import MockEntityPage from './MockEntityPage';
 import MockEntityCard from './MockEntityCard';
 import GithubActionsPlugin from '@backstage/plugin-github-actions';
@@ -14,9 +16,9 @@ const serviceOverviewPage = createWidgetView()
   .addComponent(MockEntityCard);
 
 const serviceView = createEntityPage()
-  .addPage('Overview', '/overview', serviceOverviewPage)
+  .addPage('Overview', WebIcon, '/overview', serviceOverviewPage)
   .register(GithubActionsPlugin)
-  .addComponent('Deployment', '/deployment', MockEntityPage);
+  .addComponent('Deployment', DnsIcon, '/deployment', MockEntityPage);
 
 const serviceEntity = createEntityKind({
   kind: 'service',

frontend/packages/core/src/api/entity/EntityKind.ts

@@ -1,10 +1,11 @@
 import { ComponentType } from 'react';
 import { AppComponentBuilder } from '../app/types';
+import { IconComponent } from '../types';
 
 export type EntityConfig = {
   kind: string;
   title: string;
-  icon: React.ComponentType<{ fontSize: number }>;
+  icon: IconComponent;
   color: {
     primary: string;
     secondary: string;

frontend/packages/core/src/api/entityView/EntityPageBuilder.tsx

@@ -10,10 +10,13 @@ import { EntityPageNavItem, EntityPageView } from './types';
 //   EntityPageHeader: ComponentType<EntityPageHeaderProps>;
 // };
 
+type IconComponent = ComponentType<{ fontSize?: number }>;
+
 type EntityPageRegistration =
   | {
       type: 'page';
       title: string;
+      icon: IconComponent;
       path: string;
       page: AppComponentBuilder;
     }
@@ -24,6 +27,7 @@ type EntityPageRegistration =
   | {
       type: 'component';
       title: string;
+      icon: IconComponent;
       path: string;
       component: ComponentType<any>;
     };
@@ -33,19 +37,27 @@ export default class EntityPageBuilder extends AppComponentBuilder {
 
   addPage(
     title: string,
+    icon: IconComponent,
     path: string,
     page: AppComponentBuilder,
   ): EntityPageBuilder {
-    this.registrations.push({ type: 'page', title, path, page });
+    this.registrations.push({ type: 'page', title, icon, path, page });
     return this;
   }
 
   addComponent(
     title: string,
+    icon: IconComponent,
     path: string,
     component: ComponentType<any>,
   ): EntityPageBuilder {
-    this.registrations.push({ type: 'component', title, path, component });
+    this.registrations.push({
+      type: 'component',
+      title,
+      icon,
+      path,
+      component,
+    });
     return this;
   }
 
@@ -61,14 +73,14 @@ export default class EntityPageBuilder extends AppComponentBuilder {
     for (const reg of this.registrations) {
       switch (reg.type) {
         case 'page': {
-          const { title, path, page } = reg;
-          navItems.push({ title, target: path });
+          const { title, icon, path, page } = reg;
+          navItems.push({ title, icon, target: path });
           views.push({ path, component: page.build(app) });
           break;
         }
         case 'component': {
-          const { title, path, component } = reg;
-          navItems.push({ title, target: path });
+          const { title, icon, path, component } = reg;
+          navItems.push({ title, icon, target: path });
           views.push({ path, component });
           break;
         }
@@ -77,8 +89,8 @@ export default class EntityPageBuilder extends AppComponentBuilder {
           for (const output of reg.plugin.output()) {
             switch (output.type) {
               case 'entity-page-nav-item':
-                const { title, target } = output;
-                navItems.push({ title, target });
+                const { title, icon, target } = output;
+                navItems.push({ title, icon, target });
                 added = true;
                 break;
               case 'entity-page-view-route':

frontend/packages/core/src/api/entityView/types.ts

@@ -1,6 +1,8 @@
 import { ComponentType } from 'react';
+import { IconComponent } from '../types';
 
 export type EntityPageNavItem = {
+  icon: IconComponent;
   title: string;
   target: string;
 };

frontend/packages/core/src/api/plugin/Plugin.tsx

@@ -27,6 +27,7 @@ export type RouterHooks = {
 
 type EntityPageSidebarItemOptions = {
   title: string;
+  icon: IconComponent;
   target: RoutePath;
 };
 
@@ -79,11 +80,12 @@ export default class Plugin {
         },
       },
       entityPage: {
-        navItem({ title, target }) {
+        navItem({ title, icon, target }) {
           outputs.push({
             type: 'entity-page-nav-item',
-            target,
             title,
+            icon,
+            target,
           });
         },
         route(path, component, options) {

frontend/packages/core/src/api/plugin/types.ts

@@ -1,4 +1,5 @@
 import { ComponentType } from 'react';
+import { IconComponent } from '../types';
 
 export type RouteOptions = {
   // Whether the route path must match exactly, defaults to true.
@@ -31,6 +32,7 @@ export type EntityPageViewRouteOutput = {
 export type EntityPageNavItemOutput = {
   type: 'entity-page-nav-item';
   title: string;
+  icon: IconComponent;
   target: RoutePath;
 };
 

frontend/packages/core/src/api/types.ts

@@ -1,10 +1,5 @@
-export type User = {
-  id: string;
-  email: string;
-};
+import { ComponentType } from 'react';
 
-export type UserApi = {
-  isLoggedIn(): Promise<boolean>;
-
-  getUser(): Promise<User>;
-};
+export type IconComponent = ComponentType<{
+  fontSize: 'inherit' | 'default' | 'small' | 'large';
+}>;

frontend/packages/plugins/github-actions/src/plugin.ts

@@ -1,6 +1,7 @@
 import { createPlugin } from '@backstage/core';
 import BuildDetailsPage from './components/BuildDetailsPage';
 import BuildListPage from './components/BuildListPage';
+import BuildIcon from '@material-ui/icons/Build';
 
 // export const buildListRoute = createEntityRoute<[]>('/builds')
 // export const buildDetailsRoute = createEntityRoute<[number]>('/builds/:buildId')
@@ -9,7 +10,7 @@ export default createPlugin({
   id: 'github-actions',
 
   register({ entityPage }) {
-    entityPage.navItem({ title: 'CI/CD', target: '/builds' });
+    entityPage.navItem({ title: 'CI/CD', icon: BuildIcon, target: '/builds' });
     entityPage.route('/builds', BuildListPage);
     entityPage.route('/builds/:buildUri', BuildDetailsPage);
   },