From 18024a231c531ad4979406a107bab922f3bebc5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20=C5=A0neberger?= Date: Tue, 17 Jan 2023 16:21:49 +0100 Subject: [PATCH] Allow to set additional links to the entry description MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Marek Šneberger --- .changeset/purple-feet-smile.md | 5 +++ plugins/tech-radar/src/api.ts | 12 +++++ .../src/components/RadarComponent.tsx | 1 + .../RadarDescription.test.tsx | 2 + .../RadarDescription/RadarDescription.tsx | 45 ++++++++++++++----- .../RadarLegend/RadarLegendLink.tsx | 3 ++ .../RadarLegend/RadarLegendRing.tsx | 1 + plugins/tech-radar/src/sample.ts | 8 +++- plugins/tech-radar/src/utils/types.ts | 1 + 9 files changed, 66 insertions(+), 12 deletions(-) create mode 100644 .changeset/purple-feet-smile.md diff --git a/.changeset/purple-feet-smile.md b/.changeset/purple-feet-smile.md new file mode 100644 index 0000000000..0416284edf --- /dev/null +++ b/.changeset/purple-feet-smile.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-tech-radar': patch +--- + +Allow to set additional links to the entry description. diff --git a/plugins/tech-radar/src/api.ts b/plugins/tech-radar/src/api.ts index c932ec98e2..2883758f09 100644 --- a/plugins/tech-radar/src/api.ts +++ b/plugins/tech-radar/src/api.ts @@ -89,6 +89,17 @@ export interface RadarQuadrant { name: string; } +class RadarEntryLink { + /** + * URL of the link + */ + url: string; + /** + * Display name of the link + */ + title: string; +} + /** * Single Entry in Tech Radar * @@ -127,6 +138,7 @@ export interface RadarEntry { * Description of the Entry */ description?: string; + links?: Array; } /** diff --git a/plugins/tech-radar/src/components/RadarComponent.tsx b/plugins/tech-radar/src/components/RadarComponent.tsx index 4ed7626d52..1f14e9d258 100644 --- a/plugins/tech-radar/src/components/RadarComponent.tsx +++ b/plugins/tech-radar/src/components/RadarComponent.tsx @@ -126,6 +126,7 @@ export function RadarComponent(props: TechRadarComponentProps) { moved: entry.timeline[0].moved, description: entry.description || entry.timeline[0].description, url: entry.url, + links: entry.links, })); }; diff --git a/plugins/tech-radar/src/components/RadarDescription/RadarDescription.test.tsx b/plugins/tech-radar/src/components/RadarDescription/RadarDescription.test.tsx index 7f2dcbe6ac..51fed918ec 100644 --- a/plugins/tech-radar/src/components/RadarDescription/RadarDescription.test.tsx +++ b/plugins/tech-radar/src/components/RadarDescription/RadarDescription.test.tsx @@ -24,6 +24,7 @@ const minProps: Props = { open: true, title: 'example-title', description: 'example-description', + links: [{ url: 'https://example.com/docs', title: 'example-link' }], onClose: () => {}, }; @@ -34,5 +35,6 @@ describe('RadarDescription', () => { const radarDescription = screen.getByTestId('radar-description'); expect(radarDescription).toBeInTheDocument(); expect(screen.getByText(String(minProps.description))).toBeInTheDocument(); + expect(screen.getByText(String('example-link'))).toBeInTheDocument(); }); }); diff --git a/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx b/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx index 302e77c1ac..92b15d985a 100644 --- a/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx +++ b/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx @@ -28,10 +28,18 @@ export type Props = { title: string; description: string; url?: string; + links?: Array<{ url: string; title: string }>; }; const RadarDescription = (props: Props): JSX.Element => { - const { open, onClose, title, description, url } = props; + function showDialogActions( + url: string | undefined, + links: Array<{ url: string; title: string }> | undefined, + ): Boolean { + return isValidUrl(url) || Boolean(links && links.length > 0); + } + + const { open, onClose, title, description, url, links } = props; return ( @@ -41,17 +49,32 @@ const RadarDescription = (props: Props): JSX.Element => { - {isValidUrl(url) && ( + {showDialogActions(url, links) && ( - + {links?.map(link => ( + + ))} + {isValidUrl(url) && ( + + )} )} diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegendLink.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegendLink.tsx index b0d9196e1e..7e31ddddd5 100644 --- a/plugins/tech-radar/src/components/RadarLegend/RadarLegendLink.tsx +++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegendLink.tsx @@ -25,6 +25,7 @@ type RadarLegendLinkProps = { title?: string; classes: ClassNameMap; active?: boolean; + links: Array<{ url: string; title: string }>; }; export const RadarLegendLink = ({ @@ -33,6 +34,7 @@ export const RadarLegendLink = ({ title, classes, active, + links, }: RadarLegendLinkProps) => { const [open, setOpen] = React.useState(false); @@ -73,6 +75,7 @@ export const RadarLegendLink = ({ title={title ? title : 'no title'} url={url} description={description} + links={links} /> )} diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx index 09badecdcd..b78429a5eb 100644 --- a/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx +++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx @@ -61,6 +61,7 @@ export const RadarLegendRing = ({ title={entry.title} description={entry.description} active={entry.active} + links={entry.links} /> ))} diff --git a/plugins/tech-radar/src/sample.ts b/plugins/tech-radar/src/sample.ts index 174bd7750f..1c4f7a1a01 100644 --- a/plugins/tech-radar/src/sample.ts +++ b/plugins/tech-radar/src/sample.ts @@ -45,11 +45,17 @@ entries.push({ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua', }, ], - url: '#', + url: 'https://www.javascript.com/', key: 'javascript', id: 'javascript', title: 'JavaScript', quadrant: 'languages', + links: [ + { + url: 'https://www.typescriptlang.org/', + title: 'TypeScript', + }, + ], description: 'Excepteur **sint** occaecat *cupidatat* non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n\n```ts\nconst x = "3";\n```\n', }); diff --git a/plugins/tech-radar/src/utils/types.ts b/plugins/tech-radar/src/utils/types.ts index 8689b17678..047319bd9e 100644 --- a/plugins/tech-radar/src/utils/types.ts +++ b/plugins/tech-radar/src/utils/types.ts @@ -61,6 +61,7 @@ export type Entry = { title: string; // An URL to a longer description as to why this entry is where it is url?: string; + links?: Array<{ title: string; url: string }>; // How this entry has recently moved; -1 for "down", +1 for "up", 0 for not moved moved?: MovedState; // Most recent description to display in the UI