Radar entry timeline added to the entry detail page

Signed-off-by: Joost Hofman <joost.hofman@ah.nl>

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

@@ -19,11 +19,22 @@ import { screen } from '@testing-library/react';
 
 import { Props, RadarDescription } from './RadarDescription';
 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 = {
   open: true,
   title: 'example-title',
   description: 'example-description',
+  timeline: [
+    { date: new Date(), ring: ring, description: 'test timeline 1' },
+    { date: new Date(), ring: ring, description: 'test timeline 2' },
+  ],
   links: [{ url: 'https://example.com/docs', title: 'example-link' }],
   onClose: () => {},
 };

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

@@ -21,12 +21,26 @@ import { Button, DialogActions, DialogContent } from '@material-ui/core';
 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';
 
 export type Props = {
   open: boolean;
   onClose: () => void;
   title: string;
   description: string;
+  timeline?: EntrySnapshot[];
   url?: string;
   links?: Array<{ url: string; title: string }>;
 };
@@ -39,7 +53,7 @@ const RadarDescription = (props: Props): JSX.Element => {
     return isValidUrl(url) || Boolean(links && links.length > 0);
   }
 
-  const { open, onClose, title, description, url, links } = props;
+  const { open, onClose, title, description, timeline, url, links } = props;
 
   return (
     <Dialog data-testid="radar-description" open={open} onClose={onClose}>
@@ -48,6 +62,62 @@ const RadarDescription = (props: Props): JSX.Element => {
       </DialogTitle>
       <DialogContent dividers>
         <MarkdownContent content={description} />
+        <Typography variant="h6" gutterBottom>
+          History
+        </Typography>
+        <TableContainer component={Paper}>
+          <Table aria-label="simple table">
+            <TableHead>
+              <TableRow>
+                <TableCell align="left">Moved in direction</TableCell>
+                <TableCell align="left">Moved to ring</TableCell>
+                <TableCell align="left">Moved on date</TableCell>
+                <TableCell align="left">Description</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {timeline?.length === 0 && (
+                <TableRow key="no-timeline">
+                  <TableCell component="th" scope="row">
+                    No Timeline
+                  </TableCell>
+                </TableRow>
+              )}
+              {timeline?.map(timeEntry => (
+                <TableRow key={timeEntry.description}>
+                  <TableCell component="th" scope="row">
+                    {timeEntry.moved === MovedState.Up ? (
+                      <ArrowUpwardIcon />
+                    ) : (
+                      ''
+                    )}
+                    {timeEntry.moved === MovedState.Down ? (
+                      <ArrowDownwardIcon />
+                    ) : (
+                      ''
+                    )}
+                    {timeEntry.moved === MovedState.NoChange ? (
+                      <AdjustIcon />
+                    ) : (
+                      ''
+                    )}
+                  </TableCell>
+                  <TableCell align="left">
+                    {timeEntry.ring.name ? timeEntry.ring.name : ''}
+                  </TableCell>
+                  <TableCell align="left">
+                    {timeEntry.date.toLocaleDateString()
+                      ? timeEntry.date.toLocaleDateString()
+                      : ''}
+                  </TableCell>
+                  <TableCell align="left">
+                    {timeEntry.description ? timeEntry.description : ''}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
       </DialogContent>
       {showDialogActions(url, links) && (
         <DialogActions>

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

@@ -18,6 +18,7 @@ import React from 'react';
 import { makeStyles, Theme } from '@material-ui/core';
 import { WithLink } from '../../utils/components';
 import { RadarDescription } from '../RadarDescription';
+import type { EntrySnapshot } from '../../utils/types';
 
 export type Props = {
   x: number;
@@ -27,6 +28,7 @@ export type Props = {
   url?: string;
   moved?: number;
   description?: string;
+  timeline?: EntrySnapshot[];
   title?: string;
   onMouseEnter?: (event: React.MouseEvent<SVGGElement, MouseEvent>) => void;
   onMouseLeave?: (event: React.MouseEvent<SVGGElement, MouseEvent>) => void;
@@ -67,6 +69,7 @@ const RadarEntry = (props: Props): JSX.Element => {
   const {
     moved,
     description,
+    timeline,
     title,
     color,
     url,
@@ -107,6 +110,7 @@ const RadarEntry = (props: Props): JSX.Element => {
           onClose={handleClose}
           title={title ? title : 'no title'}
           description={description ? description : 'no description'}
+          timeline={timeline ? timeline : []}
           url={url}
         />
       )}

plugins/tech-radar/src/components/RadarLegend/RadarLegendLink.tsx

@@ -18,6 +18,7 @@ import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { WithLink } from '../../utils/components';
 import { RadarDescription } from '../RadarDescription';
+import type { EntrySnapshot } from '../../utils/types';
 
 type RadarLegendLinkProps = {
   url?: string;
@@ -26,6 +27,7 @@ type RadarLegendLinkProps = {
   classes: ClassNameMap<string>;
   active?: boolean;
   links: Array<{ url: string; title: string }>;
+  timeline: EntrySnapshot[];
 };
 
 export const RadarLegendLink = ({
@@ -35,6 +37,7 @@ export const RadarLegendLink = ({
   classes,
   active,
   links,
+  timeline,
 }: RadarLegendLinkProps) => {
   const [open, setOpen] = React.useState(false);
 
@@ -75,6 +78,7 @@ export const RadarLegendLink = ({
             title={title ? title : 'no title'}
             url={url}
             description={description}
+            timeline={timeline ? timeline : []}
             links={links}
           />
         )}

plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx

@@ -68,6 +68,7 @@ export const RadarLegendRing = ({
                 description={entry.description}
                 active={entry.active}
                 links={entry.links ?? []}
+                timeline={entry.timeline ?? []}
               />
             </li>
           ))}

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

@@ -76,6 +76,7 @@ const RadarPlot = (props: Props): JSX.Element => {
             description={entry.description}
             moved={entry.moved}
             title={entry.title}
+            timeline={entry.timeline}
             onMouseEnter={onEntryMouseEnter && (() => onEntryMouseEnter(entry))}
             onMouseLeave={onEntryMouseLeave && (() => onEntryMouseLeave(entry))}
           />