diff --git a/.changeset/fresh-months-approve.md b/.changeset/fresh-months-approve.md new file mode 100644 index 0000000000..c2da09daf6 --- /dev/null +++ b/.changeset/fresh-months-approve.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-tech-radar': minor +--- + +Add new property to enable open links in a new window/tab diff --git a/plugins/tech-radar/README.md b/plugins/tech-radar/README.md index 469a12e8e4..beaf2a0724 100644 --- a/plugins/tech-radar/README.md +++ b/plugins/tech-radar/README.md @@ -64,6 +64,10 @@ 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 ### Who created the Tech Radar? diff --git a/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx b/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx index 320e85f8bf..302e77c1ac 100644 --- a/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx +++ b/plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx @@ -19,7 +19,8 @@ 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 = { open: boolean; @@ -32,13 +33,6 @@ export type Props = { const RadarDescription = (props: Props): JSX.Element => { const { open, onClose, title, description, url } = props; - const handleClick = () => { - onClose(); - if (url) { - window.location.href = url; - } - }; - return ( @@ -47,13 +41,14 @@ const RadarDescription = (props: Props): JSX.Element => { - {url && ( + {isValidUrl(url) && ( diff --git a/plugins/tech-radar/src/sample.ts b/plugins/tech-radar/src/sample.ts index 2b674f35c8..fee5f8cdbf 100644 --- a/plugins/tech-radar/src/sample.ts +++ b/plugins/tech-radar/src/sample.ts @@ -161,9 +161,10 @@ entries.push({ { ringId: 'use', date: new Date('2020-08-06'), + description: 'long description', }, ], - url: '#', + url: 'https://github.com', 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 bbfe046b69..53d64065f6 100644 --- a/plugins/tech-radar/src/utils/components.tsx +++ b/plugins/tech-radar/src/utils/components.tsx @@ -13,6 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +import { Link } from '@backstage/core-components'; import React from 'react'; type WithLinkProps = { @@ -21,15 +23,19 @@ type WithLinkProps = { children: React.ReactNode; }; +export function isValidUrl(url: string | undefined): url is string { + return Boolean(url && url !== '#' && url.length > 0); +} + export const WithLink = ({ url, className, children, }: WithLinkProps): JSX.Element => - url ? ( - + isValidUrl(url) ? ( + {children} - + ) : ( <>{children} );