From f97b1b56333c138658a2db56daa2ee1f29486144 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 7 Feb 2020 09:26:10 +0100 Subject: [PATCH] front/core: added common type for icon components and require for entity nav items --- frontend/packages/app/src/entities/index.ts | 6 ++-- .../core/src/api/entity/EntityKind.ts | 3 +- .../src/api/entityView/EntityPageBuilder.tsx | 28 +++++++++++++------ .../packages/core/src/api/entityView/types.ts | 2 ++ .../packages/core/src/api/plugin/Plugin.tsx | 6 ++-- .../packages/core/src/api/plugin/types.ts | 2 ++ frontend/packages/core/src/api/types.ts | 13 +++------ .../plugins/github-actions/src/plugin.ts | 3 +- 8 files changed, 40 insertions(+), 23 deletions(-) diff --git a/frontend/packages/app/src/entities/index.ts b/frontend/packages/app/src/entities/index.ts index 38e529d87f..01f4105902 100644 --- a/frontend/packages/app/src/entities/index.ts +++ b/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', diff --git a/frontend/packages/core/src/api/entity/EntityKind.ts b/frontend/packages/core/src/api/entity/EntityKind.ts index 7f6447f4a6..b10a16c991 100644 --- a/frontend/packages/core/src/api/entity/EntityKind.ts +++ b/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; diff --git a/frontend/packages/core/src/api/entityView/EntityPageBuilder.tsx b/frontend/packages/core/src/api/entityView/EntityPageBuilder.tsx index da6b315534..7944b26ca7 100644 --- a/frontend/packages/core/src/api/entityView/EntityPageBuilder.tsx +++ b/frontend/packages/core/src/api/entityView/EntityPageBuilder.tsx @@ -10,10 +10,13 @@ import { EntityPageNavItem, EntityPageView } from './types'; // EntityPageHeader: ComponentType; // }; +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; }; @@ -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, ): 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': diff --git a/frontend/packages/core/src/api/entityView/types.ts b/frontend/packages/core/src/api/entityView/types.ts index 5e6a5d5df7..8708057b8a 100644 --- a/frontend/packages/core/src/api/entityView/types.ts +++ b/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; }; diff --git a/frontend/packages/core/src/api/plugin/Plugin.tsx b/frontend/packages/core/src/api/plugin/Plugin.tsx index e351801047..dfe5da2993 100644 --- a/frontend/packages/core/src/api/plugin/Plugin.tsx +++ b/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) { diff --git a/frontend/packages/core/src/api/plugin/types.ts b/frontend/packages/core/src/api/plugin/types.ts index ddc6364ec5..f6efee230e 100644 --- a/frontend/packages/core/src/api/plugin/types.ts +++ b/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; }; diff --git a/frontend/packages/core/src/api/types.ts b/frontend/packages/core/src/api/types.ts index 06f1570900..8462a5a1b9 100644 --- a/frontend/packages/core/src/api/types.ts +++ b/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; - - getUser(): Promise; -}; +export type IconComponent = ComponentType<{ + fontSize: 'inherit' | 'default' | 'small' | 'large'; +}>; diff --git a/frontend/packages/plugins/github-actions/src/plugin.ts b/frontend/packages/plugins/github-actions/src/plugin.ts index 6972d8d128..d95d5b5bdc 100644 --- a/frontend/packages/plugins/github-actions/src/plugin.ts +++ b/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); },