fixup for review

Signed-off-by: Fredrik Adelöw <freben@gmail.com>

plugins/tech-radar/README.md

@@ -65,6 +65,7 @@ export interface TechRadarPageProps {
 ```
 
 ### Radar properties
+
 When defining the radar entries you can see the available properties on the file [api](./src/api.ts)
 
 ## Frequently Asked Questions

plugins/tech-radar/src/api.ts

@@ -109,14 +109,6 @@ export interface RadarEntry {
    * You can use `#` if you don't want to provide any other url
    */
   url: string;
-  /**
-   * Define the behaviour of the click defined on the url
-   *
-   * @remarks
-   *
-   * Empty is the default and the value possible are the same as W3C definition
-   */
-   urlTarget?: string;
   /**
    * History of the Entry moving through {@link RadarRing}
    */

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

@@ -122,7 +122,6 @@ export function RadarComponent(props: TechRadarComponentProps) {
         moved: entry.timeline[0].moved,
         description: entry.description || entry.timeline[0].description,
         url: entry.url,
-        urlTarget: entry.urlTarget
       }));
   };
 

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

@@ -19,7 +19,7 @@ import Dialog from '@material-ui/core/Dialog';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import { Button, DialogActions, DialogContent } from '@material-ui/core';
 import LinkIcon from '@material-ui/icons/Link';
-import { MarkdownContent } from '@backstage/core-components';
+import { Link, MarkdownContent } from '@backstage/core-components';
 import { isValidUrl } from '../../utils/components';
 
 export type Props = {
@@ -28,20 +28,10 @@ export type Props = {
   title: string;
   description: string;
   url?: string;
-  urlTarget?: string;
 };
 
 const RadarDescription = (props: Props): JSX.Element => {
-  const { open, onClose, title, description, url, urlTarget } = props;
-
-  const handleClick = () => {
-    onClose();
-    if (urlTarget) {
-      window.open(url, urlTarget);
-    } else {
-      window.location.href = url;
-    }
-  };
+  const { open, onClose, title, description, url } = props;
 
   return (
     <Dialog data-testid="radar-description" open={open} onClose={onClose}>
@@ -54,7 +44,9 @@ const RadarDescription = (props: Props): JSX.Element => {
       {isValidUrl(url) && (
         <DialogActions>
           <Button
-            onClick={handleClick}
+            component={Link}
+            to={url}
+            onClick={onClose}
             color="primary"
             startIcon={<LinkIcon />}
           >

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

@@ -25,7 +25,6 @@ export type Props = {
   value: number;
   color: string;
   url?: string;
-  urlTarget?: string;
   moved?: number;
   description?: string;
   title?: string;
@@ -71,7 +70,6 @@ const RadarEntry = (props: Props): JSX.Element => {
     title,
     color,
     url,
-    urlTarget,
     value,
     x,
     y,
@@ -110,7 +108,6 @@ const RadarEntry = (props: Props): JSX.Element => {
           title={title ? title : 'no title'}
           description={description ? description : 'no description'}
           url={url}
-          urlTarget={urlTarget}
         />
       )}
       {description ? (
@@ -126,7 +123,7 @@ const RadarEntry = (props: Props): JSX.Element => {
           {blip}
         </a>
       ) : (
-        <WithLink url={url} className={classes.link} urlTarget={urlTarget}>
+        <WithLink url={url} className={classes.link}>
           {blip}
         </WithLink>
       )}

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

@@ -116,14 +116,12 @@ const RadarLegend = (props: Props): JSX.Element => {
 
   type RadarLegendLinkProps = {
     url?: string;
-    urlTarget?: string;
     description?: string;
     title?: string;
   };
 
   const RadarLegendLink = ({
     url,
-    urlTarget,
     description,
     title,
   }: RadarLegendLinkProps) => {
@@ -159,7 +157,6 @@ const RadarLegend = (props: Props): JSX.Element => {
               onClose={handleClose}
               title={title ? title : 'no title'}
               url={url}
-              urlTarget={urlTarget}
               description={description}
             />
           )}
@@ -167,7 +164,7 @@ const RadarLegend = (props: Props): JSX.Element => {
       );
     }
     return (
-      <WithLink url={url} className={classes.entryLink} urlTarget={urlTarget}>
+      <WithLink url={url} className={classes.entryLink}>
         <span className={classes.entry}>{title}</span>
       </WithLink>
     );
@@ -199,7 +196,6 @@ const RadarLegend = (props: Props): JSX.Element => {
               >
                 <RadarLegendLink
                   url={entry.url}
-                  urlTarget={entry.urlTarget}
                   title={entry.title}
                   description={entry.description}
                 />

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

@@ -73,7 +73,6 @@ const RadarPlot = (props: Props): JSX.Element => {
             color={entry.color || ''}
             value={(entry?.index || 0) + 1}
             url={entry.url}
-            urlTarget={entry.urlTarget}
             description={entry.description}
             moved={entry.moved}
             title={entry.title}

plugins/tech-radar/src/sample.ts

@@ -51,7 +51,7 @@ entries.push({
   title: 'JavaScript',
   quadrant: 'languages',
   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'
+    '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',
 });
 entries.push({
   timeline: [
@@ -92,11 +92,10 @@ entries.push({
     {
       moved: 0,
       ringId: 'use',
-      date: new Date('2020-08-06')
+      date: new Date('2020-08-06'),
     },
   ],
   url: 'https://reactjs.org/',
-  urlTarget: '_blank',
   key: 'react',
   id: 'react',
   title: 'React',
@@ -107,14 +106,14 @@ entries.push({
     {
       moved: 0,
       ringId: 'use',
-      date: new Date('2020-08-06')
+      date: new Date('2020-08-06'),
     },
   ],
   url: '#',
   key: 'code-reviews',
   id: 'code-reviews',
   title: 'Code Reviews',
-  quadrant: 'process'
+  quadrant: 'process',
 });
 entries.push({
   timeline: [
@@ -162,11 +161,10 @@ entries.push({
     {
       ringId: 'use',
       date: new Date('2020-08-06'),
-      description: 'long description'
+      description: 'long description',
     },
   ],
   url: 'https://github.com',
-  urlTarget: '_blank',
   key: 'github-actions',
   id: 'github-actions',
   title: 'GitHub Actions',

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

@@ -13,30 +13,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+
 import { Link } from '@backstage/core-components';
+import React from 'react';
 
 type WithLinkProps = {
   url?: string;
-  urlTarget?: string;
   className: string;
   children: React.ReactNode;
 };
 
+export function isValidUrl(url: string | undefined): url is string {
+  return Boolean(url && url !== '#' && url.length > 0);
+}
+
 export const WithLink = ({
   url,
-  urlTarget,
   className,
   children,
 }: WithLinkProps): JSX.Element =>
   isValidUrl(url) ? (
-    <Link target={urlTarget} className={className} to={url}>
+    <Link className={className} to={url}>
       {children}
     </Link>
   ) : (
     <>{children}</>
   );
-
-export const isValidUrl = (url: String) => {
-  return (url && url !== '#' && url.length > 0)
-}

plugins/tech-radar/src/utils/types.ts

@@ -61,8 +61,6 @@ export type Entry = {
   title: string;
   // An URL to a longer description as to why this entry is where it is
   url?: string;
-  // The URL target definition as W3C definition
-  urlTarget?: 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