Merge pull request #155 from spotify/freben/icons

Add a basis for system icons

frontend/packages/core/src/api/app/AppBuilder.tsx

@@ -5,9 +5,18 @@ import { App, AppComponentBuilder } from './types';
 import EntityKind, { EntityConfig } from '../entity/EntityKind';
 import { EntityContextProvider } from '../entityView/EntityContext';
 import BackstagePlugin from '../plugin/Plugin';
+import {
+  IconComponent,
+  SystemIcons,
+  SystemIconKey,
+  defaultSystemIcons,
+} from '../../icons';
 
 class AppImpl implements App {
-  constructor(private readonly entities: Map<string, EntityKind>) {}
+  constructor(
+    private readonly entities: Map<string, EntityKind>,
+    private readonly systemIcons: SystemIcons,
+  ) {}
 
   getEntityConfig(kind: string): EntityConfig {
     const entity = this.entities.get(kind);
@@ -16,6 +25,10 @@ class AppImpl implements App {
     }
     return entity.config;
   }
+
+  getSystemIcon(key: SystemIconKey): IconComponent {
+    return this.systemIcons[key];
+  }
 }
 
 function builtComponent(
@@ -30,6 +43,7 @@ function builtComponent(
 
 export default class AppBuilder {
   private readonly entities = new Map<string, EntityKind>();
+  private systemIcons = { ...defaultSystemIcons };
   private readonly plugins = new Set<BackstagePlugin>();
 
   registerEntityKind(...entity: EntityKind[]) {
@@ -42,6 +56,10 @@ export default class AppBuilder {
     }
   }
 
+  registerIcons(icons: Partial<SystemIcons>) {
+    this.systemIcons = { ...this.systemIcons, ...icons };
+  }
+
   registerPlugin(...plugin: BackstagePlugin[]) {
     for (const p of plugin) {
       if (this.plugins.has(p)) {
@@ -52,7 +70,7 @@ export default class AppBuilder {
   }
 
   build(): ComponentType<{}> {
-    const app = new AppImpl(this.entities);
+    const app = new AppImpl(this.entities, this.systemIcons);
 
     const entityRoutes = new Array<JSX.Element>();
 

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

@@ -1,8 +1,10 @@
 import { ComponentType } from 'react';
 import { EntityConfig } from '../entity/EntityKind';
+import { IconComponent, SystemIconKey } from '../../icons';
 
 export type App = {
   getEntityConfig(kind: string): EntityConfig;
+  getSystemIcon(key: SystemIconKey): IconComponent;
 };
 
 export class AppComponentBuilder<T = any> {

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

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
 import { AppComponentBuilder } from '../app/types';
-import { IconComponent } from '../types';
+import { IconComponent } from '../../icons';
 
 export type EntityConfig = {
   kind: string;

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

@@ -3,7 +3,7 @@ import DefaultEntityPage from '../../components/DefaultEntityPage';
 import { App, AppComponentBuilder } from '../app/types';
 import BackstagePlugin from '../plugin/Plugin';
 import { EntityPageNavItem, EntityPageView } from './types';
-import { IconComponent } from '../types';
+import { IconComponent } from '../../icons';
 
 // type AppComponents = {
 //   EntityPage: ComponentType<EntityPageProps>;

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

@@ -1,5 +1,5 @@
 import { ComponentType } from 'react';
-import { IconComponent } from '../types';
+import { IconComponent } from '../../icons';
 
 export type EntityPageNavItem = {
   icon: IconComponent;

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

@@ -1,4 +1,3 @@
-export * from './types';
 export * from './api';
 export { useApp } from './app/AppContext';
 export {

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

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
 import { PluginOutput, RoutePath, RouteOptions } from './types';
-import { IconComponent } from '../types';
+import { IconComponent } from '../../icons';
 import { Widget } from '../widgetView/types';
 
 export type PluginConfig = {

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

@@ -1,5 +1,5 @@
 import { ComponentType } from 'react';
-import { IconComponent } from '../types';
+import { IconComponent } from '../../icons';
 import { Widget } from '../widgetView/types';
 
 export type RouteOptions = {

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

@@ -1,5 +0,0 @@
-import { ComponentType } from 'react';
-
-export type IconComponent = ComponentType<{
-  fontSize?: 'inherit' | 'default' | 'small' | 'large';
-}>;

frontend/packages/core/src/icons/icons.tsx

@@ -0,0 +1,23 @@
+import { SvgIconProps } from '@material-ui/core';
+import PeopleIcon from '@material-ui/icons/People';
+import PersonIcon from '@material-ui/icons/Person';
+import React, { FC } from 'react';
+import { useApp } from '../api';
+import { IconComponent, SystemIconKey, SystemIcons } from './types';
+
+export const defaultSystemIcons: SystemIcons = {
+  user: PersonIcon,
+  group: PeopleIcon,
+};
+
+const overridableSystemIcon = (key: SystemIconKey): IconComponent => {
+  const Component: FC<SvgIconProps> = props => {
+    const app = useApp();
+    const Icon = app.getSystemIcon(key);
+    return <Icon {...props} />;
+  };
+  return Component;
+};
+
+export const UserIcon = overridableSystemIcon('user');
+export const GroupIcon = overridableSystemIcon('group');

frontend/packages/core/src/icons/index.ts

@@ -0,0 +1,2 @@
+export * from './icons';
+export * from './types';

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

@@ -0,0 +1,6 @@
+import { ComponentType } from 'react';
+import { SvgIconProps } from '@material-ui/core';
+
+export type IconComponent = ComponentType<SvgIconProps>;
+export type SystemIconKey = 'user' | 'group';
+export type SystemIcons = { [key in SystemIconKey]: IconComponent };