From a40777f921d661d6f1f64cc01961d4235b16ca5e Mon Sep 17 00:00:00 2001
From: Scott Dickerson <sdickers@redhat.com>
Date: Mon, 11 Dec 2023 11:46:42 -0500
Subject: [PATCH] :bug: Update external links styling across the UI (#1602)

Resolves: https://issues.redhat.com/browse/MTA-1846

Update the render of external links to be consistent across the UI:
  - Use `ExternalLink` consistently
  - The icon used is the small size of `ExternalLinkAltIcon`
  - The text and the icon are both part of the link

Use of `ExternalLink` updated to use the inline variant when used
directly in table cells so it doesn't introduce extra height to the row.
In a `td`, we want text and link content to be the same height.

Use updated in:
  - Dependencies detail drawer, application table, version link
  - Issues table, expanded row, details links
  - Migration waves, status sub-table, issue link

Signed-off-by: Scott J Dickerson <sdickers@redhat.com>
---
 client/src/app/components/ExternalLink.tsx    | 27 +++++++++++--------
 .../dependencies/dependency-apps-table.tsx    |  4 ++-
 .../issue-description-and-links.tsx           | 16 +++--------
 .../components/ticket-issue.tsx               |  4 ++-
 4 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/client/src/app/components/ExternalLink.tsx b/client/src/app/components/ExternalLink.tsx
index 3566361648..3357db7079 100644
--- a/client/src/app/components/ExternalLink.tsx
+++ b/client/src/app/components/ExternalLink.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Flex, FlexItem, Icon, Text } from "@patternfly/react-core";
+import { Button, Icon } from "@patternfly/react-core";
 import ExternalLinkAltIcon from "@patternfly/react-icons/dist/esm/icons/external-link-alt-icon";
 
 /**
@@ -7,20 +7,25 @@ import ExternalLinkAltIcon from "@patternfly/react-icons/dist/esm/icons/external
  */
 export const ExternalLink: React.FC<{
   href: string;
+  isInline?: boolean;
   children: React.ReactNode;
-}> = ({ href, children }) => (
-  <Flex spaceItems={{ default: "spaceItemsSm" }}>
-    <FlexItem>
-      <Text component="a" href={href} target="_blank">
-        {children}
-      </Text>
-    </FlexItem>
-    <FlexItem>
+}> = ({ href, isInline = false, children }) => (
+  <Button
+    variant="link"
+    isInline={isInline}
+    component="a"
+    href={href}
+    target="_blank"
+    rel="noreferrer"
+    icon={
       <Icon size="sm" status="info">
         <ExternalLinkAltIcon />
       </Icon>
-    </FlexItem>
-  </Flex>
+    }
+    iconPosition="right"
+  >
+    {children}
+  </Button>
 );
 
 export default ExternalLink;
diff --git a/client/src/app/pages/dependencies/dependency-apps-table.tsx b/client/src/app/pages/dependencies/dependency-apps-table.tsx
index b2e6d9e4d3..793db71824 100644
--- a/client/src/app/pages/dependencies/dependency-apps-table.tsx
+++ b/client/src/app/pages/dependencies/dependency-apps-table.tsx
@@ -269,7 +269,9 @@ const DependencyVersionColumn = ({
   return (
     <TextContent>
       {mavenCentralLink ? (
-        <ExternalLink href={mavenCentralLink}>{version}</ExternalLink>
+        <ExternalLink isInline href={mavenCentralLink}>
+          {version}
+        </ExternalLink>
       ) : (
         <Text>{version}</Text>
       )}
diff --git a/client/src/app/pages/issues/components/issue-description-and-links.tsx b/client/src/app/pages/issues/components/issue-description-and-links.tsx
index 991ab5fed0..10314a0b88 100644
--- a/client/src/app/pages/issues/components/issue-description-and-links.tsx
+++ b/client/src/app/pages/issues/components/issue-description-and-links.tsx
@@ -1,11 +1,11 @@
 import * as React from "react";
 import ReactMarkdown from "react-markdown";
-import { TextContent, List, ListItem, Button } from "@patternfly/react-core";
+import { TextContent, List, ListItem } from "@patternfly/react-core";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
-import ExternalLinkSquareAltIcon from "@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon";
 
 import { AnalysisIssueLink } from "@app/api/models";
 import { markdownPFComponents } from "@app/components/markdownPFComponents";
+import ExternalLink from "@app/components/ExternalLink";
 
 export interface IIssueDescriptionAndLinksProps {
   description: string;
@@ -26,17 +26,7 @@ export const IssueDescriptionAndLinks: React.FC<
       <List isPlain>
         {links.map((link) => (
           <ListItem key={link.url}>
-            <Button
-              variant="link"
-              component="a"
-              icon={<ExternalLinkSquareAltIcon />}
-              iconPosition="right"
-              href={link.url}
-              target="_blank"
-              rel="noreferrer"
-            >
-              {link.title}
-            </Button>
+            <ExternalLink href={link.url}>{link.title}</ExternalLink>
           </ListItem>
         ))}
       </List>
diff --git a/client/src/app/pages/migration-waves/components/ticket-issue.tsx b/client/src/app/pages/migration-waves/components/ticket-issue.tsx
index a1004ffcb5..75e80c4fff 100644
--- a/client/src/app/pages/migration-waves/components/ticket-issue.tsx
+++ b/client/src/app/pages/migration-waves/components/ticket-issue.tsx
@@ -17,7 +17,9 @@ export const TicketIssue: React.FC<ITicketIssueProps> = ({ ticket }) => {
   return (
     <Text component={TextVariants.p}>
       {ticket?.link ? (
-        <ExternalLink href={ticket.link}>{ticketIssue}</ExternalLink>
+        <ExternalLink isInline href={ticket.link}>
+          {ticketIssue}
+        </ExternalLink>
       ) : (
         t("terms.unassigned")
       )}