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/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; diff --git a/plugins/tech-radar/src/api.ts b/plugins/tech-radar/src/api.ts index c932ec98e2..0fbc88255a 100644 --- a/plugins/tech-radar/src/api.ts +++ b/plugins/tech-radar/src/api.ts @@ -89,6 +89,22 @@ export interface RadarQuadrant { name: string; } +/** + * Single link in {@link RadarEntry} + * + * @public + */ +export interface RadarEntryLink { + /** + * URL of the link + */ + url: string; + /** + * Display name of the link + */ + title: string; +} + /** * Single Entry in Tech Radar * @@ -127,6 +143,10 @@ export interface RadarEntry { * Description of the Entry */ description?: string; + /** + * User-clickable links to provide more information about the Entry + */ + 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..68b42373f3 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