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';