Add sample plugins to sidebar (#1243)

* Add sample plugins to sidebar

* Update RadarPage.test.tsx

packages/app/src/components/Root/Root.tsx

@@ -19,6 +19,9 @@ import PropTypes from 'prop-types';
 import { Link, makeStyles } from '@material-ui/core';
 import HomeIcon from '@material-ui/icons/Home';
 import ExploreIcon from '@material-ui/icons/Explore';
+import BuildIcon from '@material-ui/icons/BuildRounded';
+import RuleIcon from '@material-ui/icons/AssignmentTurnedIn';
+import MapIcon from '@material-ui/icons/MyLocation';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import LogoFull from './LogoFull';
 import LogoIcon from './LogoIcon';
@@ -88,6 +91,9 @@ const Root: FC<{}> = ({ children }) => (
       <SidebarItem icon={CreateComponentIcon} to="/create" text="Create..." />
       {/* End global nav */}
       <SidebarDivider />
+      <SidebarItem icon={MapIcon} to="/tech-radar" text="Tech Radar" />
+      <SidebarItem icon={RuleIcon} to="/lighthouse" text="Lighthouse" />
+      <SidebarItem icon={BuildIcon} to="/circleci" text="CircleCI" />
       <SidebarSpace />
       <SidebarDivider />
       <SidebarThemeToggle />

plugins/circleci/src/components/Layout/Layout.tsx

@@ -15,20 +15,12 @@
  */
 import React from 'react';
 import { Header, Page, pageTheme, HeaderLabel } from '@backstage/core';
-import { Box } from '@material-ui/core';
 
 export const Layout: React.FC = ({ children }) => {
   return (
     <Page theme={pageTheme.tool}>
-      <Header
-        pageTitleOverride="Circle CI"
-        title={
-          <Box display="flex" alignItems="center">
-            <Box mr={1} /> Circle CI
-          </Box>
-        }
-      >
-        <HeaderLabel label="Owner" value="Team X" />
+      <Header title="CircleCI" subtitle="See recent builds and their status">
+        <HeaderLabel label="Owner" value="Spotify" />
         <HeaderLabel label="Lifecycle" value="Alpha" />
       </Header>
       {children}

plugins/tech-radar/src/api.ts

@@ -69,6 +69,7 @@ export interface TechRadarComponentProps {
 export interface TechRadarApi extends TechRadarComponentProps {
   title?: string;
   subtitle?: string;
+  pageTitle?: string;
 }
 
 export const techRadarApiRef = createApiRef<TechRadarApi>({
@@ -84,11 +85,13 @@ export class TechRadar implements TechRadarApi {
   public svgProps: TechRadarApi['svgProps'];
   public title: TechRadarApi['title'];
   public subtitle: TechRadarApi['subtitle'];
+  public pageTitle: TechRadarApi['pageTitle'];
 
   constructor(overrideOptions: TechRadarApi) {
     const defaultOptions: Partial<TechRadarApi> = {
       title: 'Tech Radar',
-      subtitle: 'Welcome to the Tech Radar!',
+      subtitle: 'Pick the recommended technologies for your projects',
+      pageTitle: 'Company Radar',
     };
 
     const options = { ...defaultOptions, ...overrideOptions };
@@ -99,5 +102,6 @@ export class TechRadar implements TechRadarApi {
     this.svgProps = options.svgProps;
     this.title = options.title;
     this.subtitle = options.subtitle;
+    this.pageTitle = options.pageTitle;
   }
 }

plugins/tech-radar/src/components/RadarPage.test.tsx

@@ -83,7 +83,9 @@ describe('RadarPage', () => {
 
     await waitForElement(() => getByTestId('tech-radar-svg'));
 
-    expect(getByText('Welcome to the Tech Radar!')).toBeInTheDocument();
+    expect(
+      getByText('Pick the recommended technologies for your projects'),
+    ).toBeInTheDocument();
     expect(getByTestId('tech-radar-svg')).toBeInTheDocument();
   });
 

plugins/tech-radar/src/components/RadarPage.tsx

@@ -16,7 +16,16 @@
 
 import React, { FC } from 'react';
 import { Grid } from '@material-ui/core';
-import { Page, Header, Content, pageTheme, useApi } from '@backstage/core';
+import {
+  Content,
+  ContentHeader,
+  Page,
+  Header,
+  HeaderLabel,
+  SupportButton,
+  pageTheme,
+  useApi,
+} from '@backstage/core';
 import RadarComponent from '../components/RadarComponent';
 import { techRadarApiRef, TechRadarApi } from '../api';
 
@@ -24,9 +33,19 @@ const RadarPage: FC<{}> = () => {
   const techRadarApi = useApi<TechRadarApi>(techRadarApiRef);
 
   return (
-    <Page theme={pageTheme.home}>
-      <Header title={techRadarApi.title} subtitle={techRadarApi.subtitle} />
+    <Page theme={pageTheme.tool}>
+      <Header title={techRadarApi.title} subtitle={techRadarApi.subtitle}>
+        <HeaderLabel label="Owner" value="Spotify" />
+        <HeaderLabel label="Lifecycle" value="Beta" />
+      </Header>
       <Content>
+        <ContentHeader title={techRadarApi.pageTitle}>
+          <SupportButton>
+            This is used for visualizing the official guidelines of different
+            areas of software development such as languages, frameworks,
+            infrastructure and processes.
+          </SupportButton>
+        </ContentHeader>
         <Grid container spacing={3} direction="row">
           <Grid item xs={12} sm={6} md={4}>
             <RadarComponent {...techRadarApi} />

plugins/tech-radar/src/sampleData.ts

@@ -88,6 +88,24 @@ entries.push({
   quadrant: { id: 'process', name: 'Process' },
   ring: { id: 'assess', name: 'ASSESS', color: '#fbdb84' },
 });
+entries.push({
+  moved: 0,
+  url: '#',
+  key: 'docs-like-code',
+  id: 'docs-like-code',
+  title: 'Docs-like-code',
+  quadrant: { id: 'process', name: 'Process' },
+  ring: { id: 'use', name: 'USE', color: '#93c47d' },
+});
+entries.push({
+  moved: 0,
+  url: '#',
+  key: 'force-push',
+  id: 'force-push',
+  title: 'Force push to master',
+  quadrant: { id: 'process', name: 'Process' },
+  ring: { id: 'hold', name: 'HOLD', color: '#93c47d' },
+});
 entries.push({
   moved: 0,
   ring: { id: 'use', name: 'USE', color: '#93c47d' },