Merge pull request #6244 from deepak-bhardwaj-ps/explorer-external-tools

feat: open external tools in new tab

.changeset/fair-falcons-scream.md

@@ -0,0 +1,7 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-explore': patch
+---
+
+- Enhanced core `Button` component to open external links in new tab.
+- Replaced the use of `Button` component from material by `core-components` in tools card.

packages/core-components/src/components/Link/Link.tsx

@@ -37,9 +37,16 @@ export type LinkProps = MaterialLinkProps &
  */
 export const Link = React.forwardRef<any, LinkProps>((props, ref) => {
   const to = String(props.to);
-  return isExternalUri(to) ? (
+  const external = isExternalUri(to);
+  const newWindow = external && !!/^https?:/.exec(to);
+  return external ? (
     // External links
-    <MaterialLink ref={ref} href={to} {...props} />
+    <MaterialLink
+      ref={ref}
+      href={to}
+      {...(newWindow ? { target: '_blank', rel: 'noopener' } : {})}
+      {...props}
+    />
   ) : (
     // Interact with React Router for internal links
     <MaterialLink ref={ref} component={RouterLink} {...props} />

plugins/explore/src/components/ToolCard/ToolCard.tsx

@@ -18,7 +18,6 @@ import { ExploreTool } from '@backstage/plugin-explore-react';
 import { BackstageTheme } from '@backstage/theme';
 import {
   Box,
-  Button,
   Card,
   CardActions,
   CardContent,
@@ -27,6 +26,7 @@ import {
   makeStyles,
   Typography,
 } from '@material-ui/core';
+import { Button } from '@backstage/core-components';
 import classNames from 'classnames';
 import React from 'react';
 
@@ -97,7 +97,7 @@ export const ToolCard = ({ card, objectFit }: Props) => {
         )}
       </CardContent>
       <CardActions>
-        <Button color="primary" href={url} disabled={!url}>
+        <Button color="primary" to={url} disabled={!url}>
           Explore
         </Button>
       </CardActions>

plugins/git-release-manager/src/features/Features.test.tsx

@@ -69,6 +69,7 @@ describe('Features', () => {
           <a
             class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary"
             href="https://docs.github.com/en/github/administering-a-repository/managing-releases-in-a-repository"
+            rel="noopener"
             target="_blank"
             to="https://docs.github.com/en/github/administering-a-repository/managing-releases-in-a-repository"
           >