diff --git a/plugins/tech-radar/src/api.ts b/plugins/tech-radar/src/api.ts index db1be29f26..5f3c0098f2 100644 --- a/plugins/tech-radar/src/api.ts +++ b/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} */ diff --git a/plugins/tech-radar/src/components/RadarComponent.tsx b/plugins/tech-radar/src/components/RadarComponent.tsx index b439fb4d08..7239364f71 100644 --- a/plugins/tech-radar/src/components/RadarComponent.tsx +++ b/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 })); }; diff --git a/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx b/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx index 320e85f8bf..840ac35b26 100644 --- a/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx +++ b/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; + } } }; diff --git a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx index 849b5157bd..26efc4ae50 100644 --- a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx +++ b/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} ) : ( - + {blip} )} diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx index 705dc9f47b..88eb0cdebd 100644 --- a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx +++ b/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 ( - + {title} ); @@ -196,6 +199,7 @@ const RadarLegend = (props: Props): JSX.Element => { > diff --git a/plugins/tech-radar/src/utils/types.ts b/plugins/tech-radar/src/utils/types.ts index 8689b17678..a0ed2d3576 100644 --- a/plugins/tech-radar/src/utils/types.ts +++ b/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