From e623449e191a433d1d50816441be3949af877905 Mon Sep 17 00:00:00 2001 From: Joost Hofman Date: Thu, 20 Apr 2023 15:02:32 +0200 Subject: [PATCH 1/6] Update from minor to patch Co-authored-by: Ben Lambert Signed-off-by: Joost Hofman --- .changeset/tough-moles-whisper.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/tough-moles-whisper.md b/.changeset/tough-moles-whisper.md index 9be6ebd102..c287be3eb6 100644 --- a/.changeset/tough-moles-whisper.md +++ b/.changeset/tough-moles-whisper.md @@ -1,5 +1,5 @@ --- -'@backstage/plugin-tech-radar': minor +'@backstage/plugin-tech-radar': patch --- Radar entry timeline added to the entry detail page From e10cffa02e05b0bf262575e51950d0c2881dbf30 Mon Sep 17 00:00:00 2001 From: Joost Hofman Date: Thu, 20 Apr 2023 16:25:28 +0200 Subject: [PATCH 2/6] Move RadarTimeline to it's own component Signed-off-by: Joost Hofman --- .../RadarDescription/RadarDescription.tsx | 70 +------------ .../RadarTimeline/RadarTimeline.test.tsx | 43 ++++++++ .../RadarTimeline/RadarTimeline.tsx | 99 +++++++++++++++++++ .../src/components/RadarTimeline/index.ts | 18 ++++ 4 files changed, 162 insertions(+), 68 deletions(-) create mode 100644 plugins/tech-radar/src/components/RadarTimeline/RadarTimeline.test.tsx create mode 100644 plugins/tech-radar/src/components/RadarTimeline/RadarTimeline.tsx create mode 100644 plugins/tech-radar/src/components/RadarTimeline/index.ts diff --git a/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx b/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx index 71ad4f3ff0..df39c2ce55 100644 --- a/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx +++ b/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx @@ -22,18 +22,7 @@ import LinkIcon from '@material-ui/icons/Link'; import { Link, MarkdownContent } from '@backstage/core-components'; import { isValidUrl } from '../../utils/components'; import type { EntrySnapshot } from '../../utils/types'; -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import TableCell from '@material-ui/core/TableCell'; -import TableContainer from '@material-ui/core/TableContainer'; -import TableHead from '@material-ui/core/TableHead'; -import TableRow from '@material-ui/core/TableRow'; -import Paper from '@material-ui/core/Paper'; -import Typography from '@material-ui/core/Typography'; -import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward'; -import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward'; -import AdjustIcon from '@material-ui/icons/Adjust'; -import { MovedState } from '../../api'; +import { RadarTimeline } from '../RadarTimeline'; export type Props = { open: boolean; @@ -62,62 +51,7 @@ const RadarDescription = (props: Props): JSX.Element => { - - History - - - - - - Moved in direction - Moved to ring - Moved on date - Description - - - - {timeline?.length === 0 && ( - - - No Timeline - - - )} - {timeline?.map(timeEntry => ( - - - {timeEntry.moved === MovedState.Up ? ( - - ) : ( - '' - )} - {timeEntry.moved === MovedState.Down ? ( - - ) : ( - '' - )} - {timeEntry.moved === MovedState.NoChange ? ( - - ) : ( - '' - )} - - - {timeEntry.ring.name ? timeEntry.ring.name : ''} - - - {timeEntry.date.toLocaleDateString() - ? timeEntry.date.toLocaleDateString() - : ''} - - - {timeEntry.description ? timeEntry.description : ''} - - - ))} - -
- + {showDialogActions(url, links) && ( diff --git a/plugins/tech-radar/src/components/RadarTimeline/RadarTimeline.test.tsx b/plugins/tech-radar/src/components/RadarTimeline/RadarTimeline.test.tsx new file mode 100644 index 0000000000..e5142a7af2 --- /dev/null +++ b/plugins/tech-radar/src/components/RadarTimeline/RadarTimeline.test.tsx @@ -0,0 +1,43 @@ +/* + * Copyright 2020 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { screen } from '@testing-library/react'; + +import { Props, RadarTimeline } from './RadarTimeline'; +import { renderInTestApp } from '@backstage/test-utils'; +import { Ring } from '../../utils/types'; + +const ring: Ring = { + id: 'example-ring', + name: 'example-ring', + color: 'red', +}; + +const minProps: Props = { + timeline: [ + { date: new Date(), ring: ring, description: 'test timeline 1' }, + { date: new Date(), ring: ring, description: 'test timeline 2' }, + ], +}; + +describe('RadarDescription', () => { + it('should render', async () => { + await renderInTestApp(); + expect(screen.getByText(String('test timeline 1'))).toBeInTheDocument(); + expect(screen.getByText(String('test timeline 2'))).toBeInTheDocument(); + }); +}); diff --git a/plugins/tech-radar/src/components/RadarTimeline/RadarTimeline.tsx b/plugins/tech-radar/src/components/RadarTimeline/RadarTimeline.tsx new file mode 100644 index 0000000000..555873cf94 --- /dev/null +++ b/plugins/tech-radar/src/components/RadarTimeline/RadarTimeline.tsx @@ -0,0 +1,99 @@ +/* + * Copyright 2020 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import type { EntrySnapshot } from '../../utils/types'; +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableContainer from '@material-ui/core/TableContainer'; +import TableHead from '@material-ui/core/TableHead'; +import TableRow from '@material-ui/core/TableRow'; +import Paper from '@material-ui/core/Paper'; +import Typography from '@material-ui/core/Typography'; + +import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward'; +import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward'; +import AdjustIcon from '@material-ui/icons/Adjust'; + +import { MovedState } from '../../api'; + +export type Props = { + timeline?: EntrySnapshot[]; +}; + +const RadarTimeline = (props: Props): JSX.Element => { + const { timeline } = props; + + return ( + <> + + History + + + + + + Moved in direction + Moved to ring + Moved on date + Description + + + + {timeline?.length === 0 && ( + + + No Timeline + + + )} + {timeline?.map(timeEntry => ( + + + {timeEntry.moved === MovedState.Up ? : ''} + {timeEntry.moved === MovedState.Down ? ( + + ) : ( + '' + )} + {timeEntry.moved === MovedState.NoChange ? ( + + ) : ( + '' + )} + + + {timeEntry.ring.name ? timeEntry.ring.name : ''} + + + {timeEntry.date.toLocaleDateString() + ? timeEntry.date.toLocaleDateString() + : ''} + + + {timeEntry.description ? timeEntry.description : ''} + + + ))} + +
+ + + ); +}; + +export { RadarTimeline }; diff --git a/plugins/tech-radar/src/components/RadarTimeline/index.ts b/plugins/tech-radar/src/components/RadarTimeline/index.ts new file mode 100644 index 0000000000..cdf156ce24 --- /dev/null +++ b/plugins/tech-radar/src/components/RadarTimeline/index.ts @@ -0,0 +1,18 @@ +/* + * Copyright 2020 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { RadarTimeline } from './RadarTimeline'; +export type { Props } from './RadarTimeline'; From fdf09de40de6d70f3d0cf07d6ca830ca68a9301c Mon Sep 17 00:00:00 2001 From: Joost Hofman Date: Thu, 20 Apr 2023 16:31:21 +0200 Subject: [PATCH 3/6] Add a sample record with two timeline items Signed-off-by: Joost Hofman --- plugins/tech-radar/src/sample.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/plugins/tech-radar/src/sample.ts b/plugins/tech-radar/src/sample.ts index a967d2cbe7..9f6d65a683 100644 --- a/plugins/tech-radar/src/sample.ts +++ b/plugins/tech-radar/src/sample.ts @@ -177,6 +177,11 @@ entries.push({ date: new Date('2020-08-06'), description: 'long description', }, + { + ringId: 'trial', + date: new Date('2020-07-05'), + description: 'long description', + }, ], links: [ { From 2749b060f510f5414016daa307648eeab2c82562 Mon Sep 17 00:00:00 2001 From: Joost Hofman Date: Thu, 20 Apr 2023 19:20:29 +0200 Subject: [PATCH 4/6] Add documentation on the data model behind the tech radar Signed-off-by: Joost Hofman --- plugins/tech-radar/README.md | 121 +++++++++++++++++++++++++++++++++++ 1 file changed, 121 insertions(+) diff --git a/plugins/tech-radar/README.md b/plugins/tech-radar/README.md index 5c99541c2a..79283ba83c 100644 --- a/plugins/tech-radar/README.md +++ b/plugins/tech-radar/README.md @@ -67,6 +67,127 @@ export interface TechRadarPageProps { When defining the radar entries you can see the available properties on the file [api](./src/api.ts) +## Tech radar data model + +| Name | Type | Description | Required? | +| --------- | ----------------------- | -------------------------------------------------------------------- | --------- | +| title | string | The title of the radar | Yes | +| quadrants | [quadrant[]](#quadrant) | The 4 quadrants of the radar, clockwise starting at the bottom right | Yes | +| rings | [ring[]](#ring) | The radar rings, starting from the inside | Yes | +| entries | [entry[]](#entry) | The radar entries | Yes | + +### quadrant + +| Name | Type | Description | Required? | +| ---- | ------ | ------------------------ | --------- | +| id | string | The id of the quadrant | Yes | +| name | string | The name of the quadrant | Yes | + +### ring + +| Name | Type | Description | Required? | +| ----- | ------ | ------------------------------------------------- | --------- | +| id | string | The id of the ring | Yes | +| name | string | The name of the ring | Yes | +| color | string | The color of the ring and entries inside the ring | Yes | + +### entry + +| Name | Type | Description | Required? | +| ----------- | ----------------------- | ----------------------------------------------- | --------- | +| id | string | The unique id from the entry | Yes | +| title | string | The title that is shown in the radar | Yes | +| description | string | The full description of the entry | No | +| key | string | The entry key | Yes | +| url | string | The url to the entry internal or external page | No | +| quadrant | string | The name of the quadrant connected to the entry | Yes | +| timeline | [timeline[]](#timeline) | Requires minimal one timeline entry | Yes | + +### timeline + +| Name | Type | Description | Required? | +| ----------- | ------ | ------------------------------------------------------------- | --------- | +| moved | number | Possible values are: -1 (moved out), 0 (stayed), 1 (moved in) | Yes | +| ringId | string | The ring id | Yes | +| date | string | Date in format (YYYY-MM-dd) | Yes | +| description | string | A long description | Yes | + +### Sample + +This is a sample on how the JSON file could look like. +The TS example can be found [here](src/sample.ts). + +```JSON +{ + "title": "Title of your Tech radar", + "quadrants": [ + { + "id": "1", + "name": "Bottom right" + }, + { + "id": "2", + "name": "Bottom left" + }, + { + "id": "3", + "name": "Top left" + }, + { + "id": "4", + "name": "Top right" + } + ], + "rings": [ + { + "id": "adopt", + "name": "ADOPT", + "color": "#93c47d" + }, + { + "id": "trial", + "name": "TRIAL", + "color": "#93d2c2" + }, + { + "id": "assess", + "name": "ASSESS", + "color": "#fbdb84" + }, + { + "id": "hold", + "name": "HOLD", + "color": "#efafa9" + } + ], + "entries": [ + { + "id": "typescript", + "title": "Typescript", + "description": "Long description for Typescript", + "key": "typescript", + "url": "#", + "quadrant": "1", + "timeline": [ + { + "moved": 0, + "ringId": "trial", + "date": "2022-02-06", + "description": "Long description for trial" + }, + { + "moved": 1, + "ringId": "adopt", + "date": "2022-02-08", + "description": "Long description for adopt" + } + ] + }, + ... + ] +} +``` + ## Frequently Asked Questions ### Who created the Tech Radar? From b2373d8bf570273b69ab4c2c95dbecf0377eaf01 Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 25 Apr 2023 11:17:17 +0200 Subject: [PATCH 5/6] cgroe: fix up some of the vale linting issues Signed-off-by: blam --- plugins/tech-radar/README.md | 60 ++++++++++++++++++------------------ 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/plugins/tech-radar/README.md b/plugins/tech-radar/README.md index 79283ba83c..1c64e4fc9e 100644 --- a/plugins/tech-radar/README.md +++ b/plugins/tech-radar/README.md @@ -69,48 +69,48 @@ When defining the radar entries you can see the available properties on the file ## Tech radar data model -| Name | Type | Description | Required? | -| --------- | ----------------------- | -------------------------------------------------------------------- | --------- | -| title | string | The title of the radar | Yes | -| quadrants | [quadrant[]](#quadrant) | The 4 quadrants of the radar, clockwise starting at the bottom right | Yes | -| rings | [ring[]](#ring) | The radar rings, starting from the inside | Yes | -| entries | [entry[]](#entry) | The radar entries | Yes | +| Name | Type | Description | Required? | +| ----------- | ----------------------- | -------------------------------------------------------------------- | --------- | +| `title` | string | The title of the radar | Yes | +| `quadrants` | [quadrant[]](#quadrant) | The 4 quadrants of the radar, clockwise starting at the bottom right | Yes | +| `rings` | [ring[]](#ring) | The radar rings, starting from the inside | Yes | +| `entries` | [entry[]](#entry) | The radar entries | Yes | ### quadrant -| Name | Type | Description | Required? | -| ---- | ------ | ------------------------ | --------- | -| id | string | The id of the quadrant | Yes | -| name | string | The name of the quadrant | Yes | +| Name | Type | Description | Required? | +| ------ | ------ | ------------------------ | --------- | +| `id` | string | The id of the quadrant | Yes | +| `name` | string | The name of the quadrant | Yes | ### ring -| Name | Type | Description | Required? | -| ----- | ------ | ------------------------------------------------- | --------- | -| id | string | The id of the ring | Yes | -| name | string | The name of the ring | Yes | -| color | string | The color of the ring and entries inside the ring | Yes | +| Name | Type | Description | Required? | +| ------- | ------ | ------------------------------------------------- | --------- | +| `id` | string | The id of the ring | Yes | +| `name` | string | The name of the ring | Yes | +| `color` | string | The color of the ring and entries inside the ring | Yes | ### entry -| Name | Type | Description | Required? | -| ----------- | ----------------------- | ----------------------------------------------- | --------- | -| id | string | The unique id from the entry | Yes | -| title | string | The title that is shown in the radar | Yes | -| description | string | The full description of the entry | No | -| key | string | The entry key | Yes | -| url | string | The url to the entry internal or external page | No | -| quadrant | string | The name of the quadrant connected to the entry | Yes | -| timeline | [timeline[]](#timeline) | Requires minimal one timeline entry | Yes | +| Name | Type | Description | Required? | +| ------------- | ----------------------- | ----------------------------------------------- | --------- | +| `id` | string | The unique id from the entry | Yes | +| `title` | string | The title that is shown in the radar | Yes | +| `description` | string | The full description of the entry | No | +| key | string | The entry key | Yes | +| `url` | string | The URL to the entry internal or external page | No | +| `quadrant` | string | The name of the quadrant connected to the entry | Yes | +| `timeline` | [timeline[]](#timeline) | Requires minimal one timeline entry | Yes | ### timeline -| Name | Type | Description | Required? | -| ----------- | ------ | ------------------------------------------------------------- | --------- | -| moved | number | Possible values are: -1 (moved out), 0 (stayed), 1 (moved in) | Yes | -| ringId | string | The ring id | Yes | -| date | string | Date in format (YYYY-MM-dd) | Yes | -| description | string | A long description | Yes | +| Name | Type | Description | Required? | +| ------------- | ------ | ------------------------------------------------------------- | --------- | +| `moved` | number | Possible values are: -1 (moved out), 0 (stayed), 1 (moved in) | Yes | +| `ringId` | string | The ring id | Yes | +| `date` | string | Date in format (YYYY-MM-dd) | Yes | +| `description` | string | A long description | Yes | ### Sample From af43c1f2828d72e8128a7c7e25b2fe95a3d2975e Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 25 Apr 2023 11:19:05 +0200 Subject: [PATCH 6/6] chore: make the changeset a little more descriptive Signed-off-by: blam --- .changeset/tough-moles-whisper.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/tough-moles-whisper.md b/.changeset/tough-moles-whisper.md index c287be3eb6..14dd76c116 100644 --- a/.changeset/tough-moles-whisper.md +++ b/.changeset/tough-moles-whisper.md @@ -2,4 +2,4 @@ '@backstage/plugin-tech-radar': patch --- -Radar entry timeline added to the entry detail page +Added the ability to display a timeline to each entry in the details box