From d0518ee5d9332e680456c5c5e53fe1c600f747ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20=C3=85lund?= Date: Thu, 11 Jun 2020 12:25:15 +0200 Subject: [PATCH] Add sample plugins to sidebar (#1243) * Add sample plugins to sidebar * Update RadarPage.test.tsx --- packages/app/src/components/Root/Root.tsx | 6 +++++ .../circleci/src/components/Layout/Layout.tsx | 12 ++------- plugins/tech-radar/src/api.ts | 6 ++++- .../src/components/RadarPage.test.tsx | 4 ++- .../tech-radar/src/components/RadarPage.tsx | 25 ++++++++++++++++--- plugins/tech-radar/src/sampleData.ts | 18 +++++++++++++ 6 files changed, 56 insertions(+), 15 deletions(-) diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index 0e30c15254..8b1ce76cbd 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/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 }) => ( {/* End global nav */} + + + diff --git a/plugins/circleci/src/components/Layout/Layout.tsx b/plugins/circleci/src/components/Layout/Layout.tsx index a614d388f0..09479e6ef0 100644 --- a/plugins/circleci/src/components/Layout/Layout.tsx +++ b/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 ( -
- Circle CI - - } - > - +
+
{children} diff --git a/plugins/tech-radar/src/api.ts b/plugins/tech-radar/src/api.ts index 8a78da8027..3dec964ddb 100644 --- a/plugins/tech-radar/src/api.ts +++ b/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({ @@ -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 = { 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; } } diff --git a/plugins/tech-radar/src/components/RadarPage.test.tsx b/plugins/tech-radar/src/components/RadarPage.test.tsx index 5ef71d1693..c318985acd 100644 --- a/plugins/tech-radar/src/components/RadarPage.test.tsx +++ b/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(); }); diff --git a/plugins/tech-radar/src/components/RadarPage.tsx b/plugins/tech-radar/src/components/RadarPage.tsx index 395939845b..4c7236e01f 100644 --- a/plugins/tech-radar/src/components/RadarPage.tsx +++ b/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(techRadarApiRef); return ( - -
+ +
+ + +
+ + + This is used for visualizing the official guidelines of different + areas of software development such as languages, frameworks, + infrastructure and processes. + + diff --git a/plugins/tech-radar/src/sampleData.ts b/plugins/tech-radar/src/sampleData.ts index 5976d07559..a9fa7efd7b 100644 --- a/plugins/tech-radar/src/sampleData.ts +++ b/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' },