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 1/6] 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 From 82b0ea8605f8ba5c6368de154fcaf87fa9d16725 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20=C5=A0neberger?= Date: Tue, 17 Jan 2023 16:31:00 +0100 Subject: [PATCH 2/6] Add missing documentation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Marek Šneberger --- plugins/tech-radar/src/api.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/plugins/tech-radar/src/api.ts b/plugins/tech-radar/src/api.ts index 2883758f09..ffbf4a337a 100644 --- a/plugins/tech-radar/src/api.ts +++ b/plugins/tech-radar/src/api.ts @@ -138,6 +138,9 @@ export interface RadarEntry { * Description of the Entry */ description?: string; + /** + * User-clickable links to provide more information about the Entry + */ links?: Array; } From 32e756fdf0c4d0333fbf251334567bb973d1b0e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20=C5=A0neberger?= Date: Tue, 17 Jan 2023 16:40:29 +0100 Subject: [PATCH 3/6] Set empty links when undefined MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Marek Šneberger --- .../tech-radar/src/components/RadarLegend/RadarLegendRing.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx index b78429a5eb..68b42373f3 100644 --- a/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx +++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx @@ -61,7 +61,7 @@ export const RadarLegendRing = ({ title={entry.title} description={entry.description} active={entry.active} - links={entry.links} + links={entry.links ?? []} /> ))} From aa572bf232346d6fc5432bcbe1ea845b1e20d5e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20=C5=A0neberger?= Date: Wed, 18 Jan 2023 10:45:09 +0100 Subject: [PATCH 4/6] Change class to exported interface MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Marek Šneberger --- plugins/tech-radar/src/api.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/tech-radar/src/api.ts b/plugins/tech-radar/src/api.ts index ffbf4a337a..7c6f5b29bb 100644 --- a/plugins/tech-radar/src/api.ts +++ b/plugins/tech-radar/src/api.ts @@ -89,7 +89,7 @@ export interface RadarQuadrant { name: string; } -class RadarEntryLink { +export interface RadarEntryLink { /** * URL of the link */ From 0a07bb94466fa73fd936872f7900fd826ecbfc8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20=C5=A0neberger?= Date: Wed, 18 Jan 2023 11:12:11 +0100 Subject: [PATCH 5/6] Set RadarEntryLink as public API MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Marek Šneberger --- plugins/tech-radar/src/api.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/plugins/tech-radar/src/api.ts b/plugins/tech-radar/src/api.ts index 7c6f5b29bb..0fbc88255a 100644 --- a/plugins/tech-radar/src/api.ts +++ b/plugins/tech-radar/src/api.ts @@ -89,6 +89,11 @@ export interface RadarQuadrant { name: string; } +/** + * Single link in {@link RadarEntry} + * + * @public + */ export interface RadarEntryLink { /** * URL of the link From b86c02c3b7a2da1a97714dc77fb30ce40fb7d32e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20=C5=A0neberger?= Date: Wed, 18 Jan 2023 11:33:12 +0100 Subject: [PATCH 6/6] Build api report MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Marek Šneberger --- plugins/tech-radar/api-report.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/plugins/tech-radar/api-report.md b/plugins/tech-radar/api-report.md index 39fa19da43..e2744872d8 100644 --- a/plugins/tech-radar/api-report.md +++ b/plugins/tech-radar/api-report.md @@ -21,12 +21,19 @@ export interface RadarEntry { description?: string; id: string; key: string; + links?: Array; quadrant: string; timeline: Array; title: string; url: string; } +// @public +export interface RadarEntryLink { + title: string; + url: string; +} + // @public export interface RadarEntrySnapshot { date: Date;