From e10cffa02e05b0bf262575e51950d0c2881dbf30 Mon Sep 17 00:00:00 2001 From: Joost Hofman Date: Thu, 20 Apr 2023 16:25:28 +0200 Subject: [PATCH] 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';