From e50a24b46da24be7eb55ba1c78f780ebe53b4fc8 Mon Sep 17 00:00:00 2001 From: Bruno Fuzetti Penso Date: Fri, 10 Dec 2021 08:58:51 -0300 Subject: [PATCH 1/9] add samples data with the urlTarget attribute Signed-off-by: Bruno Fuzetti Penso --- plugins/tech-radar/src/sample.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/plugins/tech-radar/src/sample.ts b/plugins/tech-radar/src/sample.ts index 2b674f35c8..c2c390af32 100644 --- a/plugins/tech-radar/src/sample.ts +++ b/plugins/tech-radar/src/sample.ts @@ -92,10 +92,11 @@ 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', @@ -161,6 +162,7 @@ entries.push({ { ringId: 'use', date: new Date('2020-08-06'), + description: 'test description' }, ], url: '#', From b365a96b4c8d1ad0da2cd9ba7c0e772648d48114 Mon Sep 17 00:00:00 2001 From: Bruno Fuzetti Penso Date: Fri, 10 Dec 2021 09:00:26 -0300 Subject: [PATCH 2/9] add urlTarget attribute Signed-off-by: Bruno Fuzetti Penso --- plugins/tech-radar/src/api.ts | 8 ++++++++ plugins/tech-radar/src/components/RadarComponent.tsx | 1 + .../src/components/RadarDescription/RadarDescription.tsx | 9 +++++++-- .../tech-radar/src/components/RadarEntry/RadarEntry.tsx | 4 +++- .../src/components/RadarLegend/RadarLegend.tsx | 6 +++++- plugins/tech-radar/src/utils/types.ts | 2 ++ 6 files changed, 26 insertions(+), 4 deletions(-) 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 From 9a5212fef95027ac734be740cfaf4cb60fbf2fad Mon Sep 17 00:00:00 2001 From: Bruno Fuzetti Penso Date: Fri, 10 Dec 2021 10:34:08 -0300 Subject: [PATCH 3/9] url target attribute Signed-off-by: Bruno Fuzetti Penso --- plugins/tech-radar/src/api.ts | 2 +- plugins/tech-radar/src/sample.ts | 2 +- plugins/tech-radar/src/utils/components.tsx | 7 +++++-- plugins/tech-radar/src/utils/types.ts | 2 +- 4 files changed, 8 insertions(+), 5 deletions(-) diff --git a/plugins/tech-radar/src/api.ts b/plugins/tech-radar/src/api.ts index 5f3c0098f2..8f88b1a8b6 100644 --- a/plugins/tech-radar/src/api.ts +++ b/plugins/tech-radar/src/api.ts @@ -116,7 +116,7 @@ export interface RadarEntry { * * Empty is the default and the value possible are the same as W3C definition */ - urlTarget: string; + urlTarget?: string; /** * History of the Entry moving through {@link RadarRing} */ diff --git a/plugins/tech-radar/src/sample.ts b/plugins/tech-radar/src/sample.ts index c2c390af32..ba3fc632ab 100644 --- a/plugins/tech-radar/src/sample.ts +++ b/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: [ diff --git a/plugins/tech-radar/src/utils/components.tsx b/plugins/tech-radar/src/utils/components.tsx index bbfe046b69..24623738f4 100644 --- a/plugins/tech-radar/src/utils/components.tsx +++ b/plugins/tech-radar/src/utils/components.tsx @@ -14,22 +14,25 @@ * limitations under the License. */ import React from 'react'; +import { Link } from '@backstage/core-components'; type WithLinkProps = { url?: string; + urlTarget?: string; className: string; children: React.ReactNode; }; export const WithLink = ({ url, + urlTarget, className, children, }: WithLinkProps): JSX.Element => url ? ( - + {children} - + ) : ( <>{children} ); diff --git a/plugins/tech-radar/src/utils/types.ts b/plugins/tech-radar/src/utils/types.ts index a0ed2d3576..884c99f93b 100644 --- a/plugins/tech-radar/src/utils/types.ts +++ b/plugins/tech-radar/src/utils/types.ts @@ -62,7 +62,7 @@ export type Entry = { // 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; + 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 From b341771b91fc9c570862101349bed0b2c3815f80 Mon Sep 17 00:00:00 2001 From: Bruno Fuzetti Penso Date: Fri, 10 Dec 2021 11:00:09 -0300 Subject: [PATCH 4/9] fix modal behaviour Signed-off-by: Bruno Fuzetti Penso --- .../RadarDescription/RadarDescription.tsx | 15 +++++++-------- .../src/components/RadarEntry/RadarEntry.tsx | 1 + .../src/components/RadarPlot/RadarPlot.tsx | 1 + plugins/tech-radar/src/sample.ts | 9 +++++---- plugins/tech-radar/src/utils/components.tsx | 2 +- 5 files changed, 15 insertions(+), 13 deletions(-) diff --git a/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx b/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx index 840ac35b26..36946f7875 100644 --- a/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx +++ b/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx @@ -35,12 +35,12 @@ const RadarDescription = (props: Props): JSX.Element => { const handleClick = () => { onClose(); - if (url) { - if (urlTarget) { - window.open(url, urlTarget); - } else { - window.location.href = url; - } + if (urlTarget) { + console.log('with target' + urlTarget) + window.open(url, urlTarget); + } else { + console.log('no target' + urlTarget) + window.location.href = url; } }; @@ -52,13 +52,12 @@ const RadarDescription = (props: Props): JSX.Element => { - {url && ( + {(url && url !== '#') && ( diff --git a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx index 26efc4ae50..d1f8f3b555 100644 --- a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx +++ b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx @@ -110,6 +110,7 @@ const RadarEntry = (props: Props): JSX.Element => { title={title ? title : 'no title'} description={description ? description : 'no description'} url={url} + urlTarget={urlTarget} /> )} {description ? ( diff --git a/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx b/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx index d9788be887..6ba34e79ae 100644 --- a/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx +++ b/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx @@ -73,6 +73,7 @@ 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} diff --git a/plugins/tech-radar/src/sample.ts b/plugins/tech-radar/src/sample.ts index ba3fc632ab..bb875e53c7 100644 --- a/plugins/tech-radar/src/sample.ts +++ b/plugins/tech-radar/src/sample.ts @@ -107,14 +107,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,10 +162,11 @@ entries.push({ { ringId: 'use', date: new Date('2020-08-06'), - description: 'test description' + description: 'description' }, ], - url: '#', + url: 'https://github.com', + urlTarget: '_blank', key: 'github-actions', id: 'github-actions', title: 'GitHub Actions', diff --git a/plugins/tech-radar/src/utils/components.tsx b/plugins/tech-radar/src/utils/components.tsx index 24623738f4..ae2ecb760d 100644 --- a/plugins/tech-radar/src/utils/components.tsx +++ b/plugins/tech-radar/src/utils/components.tsx @@ -29,7 +29,7 @@ export const WithLink = ({ className, children, }: WithLinkProps): JSX.Element => - url ? ( + (url && url!== '#') ? ( {children} From 5e0879da2bf1ad7b83ee067ba82d5ab779a4167e Mon Sep 17 00:00:00 2001 From: Bruno Fuzetti Penso Date: Fri, 10 Dec 2021 11:07:13 -0300 Subject: [PATCH 5/9] refacotr Signed-off-by: Bruno Fuzetti Penso --- .../src/components/RadarDescription/RadarDescription.tsx | 5 ++--- plugins/tech-radar/src/utils/components.tsx | 6 +++++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx b/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx index 36946f7875..5aebc8d8fb 100644 --- a/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx +++ b/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx @@ -20,6 +20,7 @@ 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 { isValidUrl } from '../../utils/components'; export type Props = { open: boolean; @@ -36,10 +37,8 @@ const RadarDescription = (props: Props): JSX.Element => { const handleClick = () => { onClose(); if (urlTarget) { - console.log('with target' + urlTarget) window.open(url, urlTarget); } else { - console.log('no target' + urlTarget) window.location.href = url; } }; @@ -52,7 +51,7 @@ const RadarDescription = (props: Props): JSX.Element => { - {(url && url !== '#') && ( + {isValidUrl(url) && (