add urlTarget attribute

Signed-off-by: Bruno Fuzetti Penso <bruno.penso@gmail.com>

plugins/tech-radar/src/api.ts

@@ -109,6 +109,14 @@ 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,6 +122,7 @@ 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

@@ -27,15 +27,20 @@ export type Props = {
   title: string;
   description: string;
   url?: string;
+  urlTarget?: string;
 };
 
 const RadarDescription = (props: Props): JSX.Element => {
-  const { open, onClose, title, description, url } = props;
+  const { open, onClose, title, description, url, urlTarget } = props;
 
   const handleClick = () => {
     onClose();
     if (url) {
-      window.location.href = url;
+      if (urlTarget) {
+        window.open(url, urlTarget);
+      } else {
+        window.location.href = url;
+      }
     }
   };
 

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

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

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

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

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

@@ -61,6 +61,8 @@ 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