Fix issue where radar entry dialog with external url

If an entry has both a radar description and an external url, when a user clicks on the blip the description dialog would briefly appear before they are redirected to the specified url. Expected behaviour is not to automatically redirect the user so that they can read the dialog and choose to follow the link for more details. Signed-off-by: Niall McCullagh <[email protected]> Signed-off-by: Niall McCullagh <[email protected]>
MarceloLeite2604 · Mar 9, 2021 · b56815b · b56815b
1 parent c111312
commit b56815b
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 deletions.
diff --git a/.changeset/cyan-rings-live.md b/.changeset/cyan-rings-live.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-tech-radar': patch
+---
+
+Fixes issue where radar description dialog is not shown when the entry has an url external to the radar page
diff --git a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.test.tsx b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.test.tsx
@@ -79,4 +79,20 @@ describe('RadarEntry', () => {
     expect(radarDescription).toBeInTheDocument();
     expect(screen.getByText(String(minProps.value))).toBeInTheDocument();
   });
+
+  it('should render blip with url equal to # if description present', () => {
+    const withUrl = {
+      ...optionalProps,
+      url: 'http://backstage.io',
+    };
+    render(
+      <ThemeProvider theme={lightTheme}>
+        <svg>
+          <RadarEntry {...withUrl} />
+        </svg>
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByRole('button')).toHaveAttribute('href', '#');
+  });
 });
diff --git a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx
@@ -111,11 +111,12 @@ const RadarEntry = (props: Props): JSX.Element => {
         />
       )}
       {description ? (
+        // eslint-disable-next-line jsx-a11y/anchor-is-valid
         <a
           className={classes.link}
           onClick={handleClickOpen}
-          href={url ? url : '#'}
           role="button"
+          href="#"
           tabIndex={0}
           onKeyPress={toggle}
         >

diff --git a/plugins/tech-radar/src/sampleData.ts b/plugins/tech-radar/src/sampleData.ts
@@ -72,9 +72,11 @@ entries.push({
       moved: 1,
       ringId: 'use',
       date: new Date('2020-08-06'),
+      description:
+        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
     },
   ],
-  url: '#',
+  url: 'https://webpack.js.org/',
   key: 'webpack',
   id: 'webpack',
   title: 'Webpack',