🐛 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>
konveyor · Dec 11, 2023 · a40777f · a40777f
1 parent d5bb144
commit a40777f
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 26 deletions.
diff --git a/client/src/app/components/ExternalLink.tsx b/client/src/app/components/ExternalLink.tsx
@@ -1,26 +1,31 @@
 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";
 
 /**
  * Render a link open an external href in another tab with appropriate styling.
  */
 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
@@ -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
@@ -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
@@ -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")
       )}