fixing based on review

plugins/tech-radar/src/components/RadarDescription/RadarDescription.test.tsx

@@ -19,7 +19,7 @@ import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '@material-ui/core';
 import { lightTheme } from '@backstage/theme';
 
-import RadarDescription, { Props } from './RadarDescription';
+import { Props, RadarDescription } from './RadarDescription';
 
 const minProps: Props = {
   open: true,

plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx

@@ -29,7 +29,6 @@ export type Props = {
 };
 
 const RadarDescription = (props: Props): JSX.Element => {
-  // const classes = useStyles(props);
   const { open, onClose, title, description, url } = props;
 
   const handleClick = () => {
@@ -41,7 +40,9 @@ const RadarDescription = (props: Props): JSX.Element => {
 
   return (
     <Dialog data-testid="radar-description" open={open} onClose={onClose}>
-      <DialogTitle id="radar-description-dialog-title">{title}</DialogTitle>
+      <DialogTitle data-testid="radar-description-dialog-title">
+        {title}
+      </DialogTitle>
       <DialogContent dividers>{description}</DialogContent>
       {url && (
         <DialogActions>
@@ -49,6 +50,7 @@ const RadarDescription = (props: Props): JSX.Element => {
             onClick={handleClick}
             color="primary"
             startIcon={<LinkIcon />}
+            href={url}
           >
             LEARN MORE
           </Button>
@@ -58,4 +60,4 @@ const RadarDescription = (props: Props): JSX.Element => {
   );
 };
 
-export default RadarDescription;
+export { RadarDescription };

plugins/tech-radar/src/components/RadarDescription/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { default } from './RadarDescription';
+export { RadarDescription, Props } from './RadarDescription';

plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { makeStyles, Theme } from '@material-ui/core';
 import { WithLink } from '../../utils/components';
-import RadarDescription from '../RadarDescription';
+import { RadarDescription } from '../RadarDescription';
 
 export type Props = {
   x: number;
@@ -101,26 +101,26 @@ const RadarEntry = (props: Props): JSX.Element => {
       data-testid="radar-entry"
     >
       {' '}
+      {open && (
+        <RadarDescription
+          open={open}
+          onClose={handleClose}
+          title={title ? title : 'no title'}
+          description={description ? description : 'no description'}
+          url={url}
+        />
+      )}
       {description ? (
-        <>
-          <a
-            className={classes.link}
-            onClick={handleClickOpen}
-            href={url ? url : '#'}
-            role="button"
-            tabIndex={0}
-            onKeyPress={toggle}
-          >
-            {blip}
-          </a>
-          <RadarDescription
-            open={open}
-            onClose={handleClose}
-            title={title ? title : 'no title'}
-            description={description}
-            url={url}
-          />
-        </>
+        <a
+          className={classes.link}
+          onClick={handleClickOpen}
+          href={url ? url : '#'}
+          role="button"
+          tabIndex={0}
+          onKeyPress={toggle}
+        >
+          {blip}
+        </a>
       ) : (
         <WithLink url={url} className={classes.link}>
           {blip}

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

@@ -17,7 +17,7 @@ import React from 'react';
 import { makeStyles, Theme } from '@material-ui/core';
 import type { Quadrant, Ring, Entry } from '../../utils/types';
 import { WithLink } from '../../utils/components';
-import RadarDescription from '../RadarDescription';
+import { RadarDescription } from '../RadarDescription';
 
 type Segments = {
   [k: number]: { [k: number]: Entry[] };
@@ -131,7 +131,7 @@ const RadarLegend = (props: Props): JSX.Element => {
       setOpen(!open);
     };
 
-    if (description && url) {
+    if (description) {
       return (
         <>
           <span
@@ -143,13 +143,15 @@ const RadarLegend = (props: Props): JSX.Element => {
           >
             <span className={classes.entry}>{title}</span>
           </span>
-          <RadarDescription
-            open={open}
-            onClose={handleClose}
-            title={title ? title : ''}
-            url={url}
-            description={description}
-          />
+          {open && (
+            <RadarDescription
+              open={open}
+              onClose={handleClose}
+              title={title ? title : 'no title'}
+              url={url}
+              description={description}
+            />
+          )}
         </>
       );
     }