Merge pull request #8447 from brunopenso/master

TechRadar - urlTarget new attribute

.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

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?

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 (
     <Dialog data-testid="radar-description" open={open} onClose={onClose}>
       <DialogTitle data-testid="radar-description-dialog-title">
@@ -47,13 +41,14 @@ const RadarDescription = (props: Props): JSX.Element => {
       <DialogContent dividers>
         <MarkdownContent content={description} />
       </DialogContent>
-      {url && (
+      {isValidUrl(url) && (
         <DialogActions>
           <Button
-            onClick={handleClick}
+            component={Link}
+            to={url}
+            onClick={onClose}
             color="primary"
             startIcon={<LinkIcon />}
-            href={url}
           >
             LEARN MORE
           </Button>

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',

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 ? (
-    <a href={url} className={className}>
+  isValidUrl(url) ? (
+    <Link className={className} to={url}>
       {children}
-    </a>
+    </Link>
   ) : (
     <>{children}</>
   );