Add sample plugins to sidebar (#1243)

* Add sample plugins to sidebar

* Update RadarPage.test.tsx

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' },