Merge pull request #15802 from legendik/feature/tech_radar_links

[Tech radar] Allow to set additional links to the entry description

.changeset/purple-feet-smile.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-tech-radar': patch
+---
+
+Allow to set additional links to the entry description.

plugins/tech-radar/api-report.md

@@ -21,12 +21,19 @@ export interface RadarEntry {
   description?: string;
   id: string;
   key: string;
+  links?: Array<RadarEntryLink>;
   quadrant: string;
   timeline: Array<RadarEntrySnapshot>;
   title: string;
   url: string;
 }
 
+// @public
+export interface RadarEntryLink {
+  title: string;
+  url: string;
+}
+
 // @public
 export interface RadarEntrySnapshot {
   date: Date;

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<RadarEntryLink>;
 }
 
 /**

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,
       }));
   };
 

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();
   });
 });

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 (
     <Dialog data-testid="radar-description" open={open} onClose={onClose}>
@@ -41,17 +49,32 @@ const RadarDescription = (props: Props): JSX.Element => {
       <DialogContent dividers>
         <MarkdownContent content={description} />
       </DialogContent>
-      {isValidUrl(url) && (
+      {showDialogActions(url, links) && (
         <DialogActions>
-          <Button
-            component={Link}
-            to={url}
-            onClick={onClose}
-            color="primary"
-            startIcon={<LinkIcon />}
-          >
-            LEARN MORE
-          </Button>
+          {links?.map(link => (
+            <Button
+              component={Link}
+              to={link.url}
+              onClick={onClose}
+              color="primary"
+              startIcon={<LinkIcon />}
+              key={link.url}
+            >
+              {link.title}
+            </Button>
+          ))}
+          {isValidUrl(url) && (
+            <Button
+              component={Link}
+              to={url}
+              onClick={onClose}
+              color="primary"
+              startIcon={<LinkIcon />}
+              key={url}
+            >
+              LEARN MORE
+            </Button>
+          )}
         </DialogActions>
       )}
     </Dialog>

plugins/tech-radar/src/components/RadarLegend/RadarLegendLink.tsx

@@ -25,6 +25,7 @@ type RadarLegendLinkProps = {
   title?: string;
   classes: ClassNameMap<string>;
   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}
           />
         )}
       </>

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 ?? []}
               />
             </li>
           ))}

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',
 });

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