front/core: add DefaultWidgetView and pass params for widgets

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

@@ -12,8 +12,8 @@ import GithubActionsPlugin from '@backstage/plugin-github-actions';
 
 /* SERVICE */
 const serviceOverviewPage = createWidgetView()
-  .addComponent(MockEntityCard)
-  .addComponent(MockEntityCard);
+  .add({ size: 4, component: MockEntityCard })
+  .add({ size: 4, component: MockEntityCard });
 
 const serviceView = createEntityPage()
   .addPage('Overview', WebIcon, '/overview', serviceOverviewPage)

frontend/packages/core/src/api/widgetView/WidgetViewBuilder.tsx

@@ -1,50 +1,37 @@
-import React, { ComponentType, FC } from 'react';
+import React, { ComponentType } from 'react';
 import { App, AppComponentBuilder } from '../app/types';
-
-type Props = {
-  app: App;
-  cards: ComponentType<any>[];
-};
-
-const WidgetViewComponent: FC<Props> = ({ cards }) => {
-  return (
-    <div>
-      {cards.map((CardComponent, index) => (
-        <CardComponent key={index} />
-      ))}
-    </div>
-  );
-};
+import { Widget } from './types';
+import DefaultWidgetView from '../../components/DefaultWidgetView';
 
 type WidgetViewRegistration = {
   type: 'component';
-  component: ComponentType<any>;
+  widget: Widget;
 };
 
 export default class WidgetViewBuilder extends AppComponentBuilder {
   private readonly registrations = new Array<WidgetViewRegistration>();
   private output?: ComponentType<any>;
 
-  addComponent(component: ComponentType<any>): WidgetViewBuilder {
-    this.registrations.push({ type: 'component', component });
+  add(widget: Widget): WidgetViewBuilder {
+    this.registrations.push({ type: 'component', widget });
     return this;
   }
 
-  build(app: App): ComponentType<any> {
+  build(_app: App): ComponentType<any> {
     if (this.output) {
       return this.output;
     }
 
-    const cards = this.registrations.map(reg => {
+    const widgets = this.registrations.map(reg => {
       switch (reg.type) {
         case 'component':
-          return reg.component;
+          return reg.widget;
         default:
           throw new Error(`Unknown WidgetViewBuilder registration`);
       }
     });
 
-    this.output = () => <WidgetViewComponent app={app} cards={cards} />;
+    this.output = () => <DefaultWidgetView widgets={widgets} />;
     return this.output;
   }
 }

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

@@ -0,0 +1,10 @@
+import { ComponentType } from 'react';
+
+export type Widget = {
+  size: 4 | 6 | 8 | 12;
+  component: ComponentType<any>;
+};
+
+export type WidgetViewProps = {
+  widgets: Widget[];
+};

frontend/packages/core/src/components/DefaultWidgetView/DefaultWidgetView.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { Grid, Paper, makeStyles, Theme } from '@material-ui/core';
+import { WidgetViewProps } from '../../api/widgetView/types';
+
+const useStyles = makeStyles<Theme>(theme => ({
+  root: {
+    padding: theme.spacing(2),
+  },
+  widgetWrapper: {
+    padding: theme.spacing(2),
+  },
+}));
+
+const WidgetViewComponent: FC<WidgetViewProps> = ({ widgets }) => {
+  const classes = useStyles();
+
+  return (
+    <Grid className={classes.root} container direction="row" spacing={6}>
+      {widgets.map(({ size, component: WidgetComponent }, index) => (
+        <Grid key={index} item xs={size}>
+          <Paper className={classes.widgetWrapper}>
+            <WidgetComponent />
+          </Paper>
+        </Grid>
+      ))}
+    </Grid>
+  );
+};
+
+export default WidgetViewComponent;

frontend/packages/core/src/components/DefaultWidgetView/index.ts

@@ -0,0 +1 @@
+export { default } from './DefaultWidgetView';