refactor(gs): use ExternalLink with display prop instead of custom StyledLink

Author: gusevda

plugins/gs/src/components/UI/Version/Version.tsx

@@ -1,10 +1,10 @@
 import semver from 'semver';
-import { Box, Link, Tooltip, styled } from '@material-ui/core';
-import LaunchOutlinedIcon from '@material-ui/icons/LaunchOutlined';
+import { Box, Tooltip, styled } from '@material-ui/core';
 import ReportProblemOutlined from '@material-ui/icons/ReportProblemOutlined';
 import MiddleEllipsis from 'react-middle-ellipsis';
 import { getCommitURL, getReleaseNotesURL } from '../../utils/helpers';
 import { ColorWrapper } from '../ColorWrapper';
+import { ExternalLink } from '@giantswarm/backstage-plugin-ui-react';
 
 const StyledReportProblemOutlined = styled(ReportProblemOutlined)(
   ({ theme }) => ({
@@ -14,21 +14,6 @@ const StyledReportProblemOutlined = styled(ReportProblemOutlined)(
   }),
 );
 
-// Block-level flex link so the width constraint chain works for MiddleEllipsis truncation.
-// ExternalLink uses inline-flex which breaks percentage-based maxWidth resolution.
-const StyledLink = styled(Link)({
-  display: 'flex',
-  alignItems: 'center',
-  overflow: 'hidden',
-  minWidth: 0,
-});
-
-const StyledLaunchOutlinedIcon = styled(LaunchOutlinedIcon)(({ theme }) => ({
-  marginLeft: theme.spacing(0.5),
-  fontSize: 'inherit',
-  flexShrink: 0,
-}));
-
 const COMMIT_HASH_REGEXP = /\b[0-9a-f]{40}\b/;
 const INVALID_VERSION = 'n/a';
 
@@ -213,18 +198,21 @@ export const Version = ({
       maxWidth={truncate ? '100%' : undefined}
     >
       {displayLinkToProject ? (
-        <StyledLink
-          href={
-            commitHash
-              ? getCommitURL(sourceLocation, commitHash)
-              : getReleaseNotesURL(sourceLocation, versionLabel)
-          }
-          target="_blank"
-          rel="noopener noreferrer"
+        <Box
+          overflow={truncate ? 'hidden' : undefined}
+          minWidth={truncate ? 0 : undefined}
         >
-          {versionComponent}
-          <StyledLaunchOutlinedIcon />
-        </StyledLink>
+          <ExternalLink
+            href={
+              commitHash
+                ? getCommitURL(sourceLocation, commitHash)
+                : getReleaseNotesURL(sourceLocation, versionLabel)
+            }
+            display={truncate ? 'flex' : 'inline-flex'}
+          >
+            {versionComponent}
+          </ExternalLink>
+        </Box>
       ) : (
         versionComponent
       )}

plugins/ui-react/src/components/ExternalLink/ExternalLink.tsx

@@ -9,12 +9,23 @@ const StyledLaunchOutlinedIcon = styled(LaunchOutlinedIcon)(({ theme }) => ({
 type ExternalLinkProps = {
   href: string;
   children: React.ReactNode;
+  /**
+   * CSS display value for the inner flex container.
+   * Use 'flex' (block-level) when the link needs to participate in a width
+   * constraint chain (e.g. inside a flex/grid item for text truncation).
+   * @default 'inline-flex'
+   */
+  display?: 'flex' | 'inline-flex';
 };
 
-export const ExternalLink = ({ href, children }: ExternalLinkProps) => {
+export const ExternalLink = ({
+  href,
+  children,
+  display = 'inline-flex',
+}: ExternalLinkProps) => {
   return (
     <Link href={href} target="_blank" rel="noopener noreferrer">
-      <Box display="inline-flex" alignItems="center">
+      <Box display={display} alignItems="center">
         {children}
         <StyledLaunchOutlinedIcon />
       </Box>