Fix link icon spaces

frontend/src/lib/doc-util.tsx

@@ -75,21 +75,22 @@ export const DOC_LINKS = {
   NUTANIX_POST_INSTALL: `https://docs.redhat.com/en/documentation/assisted_installer_for_openshift_container_platform/2024/html/installing_openshift_container_platform_with_the_assisted_installer/assembly_installing-on-nutanix#nutanix-post-installation-configuration_installing-on-nutanix`,
 }
 
-export function ViewDocumentationLink(props: { doclink: string }): JSX.Element {
+export function ViewDocumentationLink(props: { doclink: string; topPadding?: boolean }): JSX.Element {
   const { t } = useTranslation()
+  const { doclink, topPadding = true } = props
   return (
     <Content>
       <AcmButton
         variant="link"
         component="a"
-        href={props.doclink}
+        href={doclink}
         target="_blank"
         rel="noreferrer"
         isInline
         icon={<ExternalLinkAltIcon />}
         iconPosition="right"
         style={{
-          paddingTop: '15px',
+          ...(topPadding ? { paddingTop: '15px' } : {}),
           fontSize: '14px',
         }}
       >

frontend/src/routes/Applications/Overview.tsx

@@ -8,10 +8,8 @@ import {
   Stack,
   StackItem,
   Content,
-  ContentVariants,
   ToolbarItem,
 } from '@patternfly/react-core'
-import { ExternalLinkAltIcon } from '@patternfly/react-icons'
 import { cellWidth } from '@patternfly/react-table'
 import { get } from 'lodash'
 import { useCallback, useContext, useMemo, useState } from 'react'
@@ -609,23 +607,8 @@ export default function ApplicationsOverview() {
         tooltip: (
           <span>
             {t('Displays the type of the application. ')}
-            <Content>
-              <Content
-                component={ContentVariants.a}
-                isVisitedLink
-                href={DOC_LINKS.MANAGE_APPLICATIONS}
-                target="_blank"
-                style={{
-                  cursor: 'pointer',
-                  display: 'inline-block',
-                  padding: '0px',
-                  fontSize: '14px',
-                  color: '#0066cc',
-                }}
-              >
-                {t('View documentation')} <ExternalLinkAltIcon />
-              </Content>
-            </Content>
+
+            <ViewDocumentationLink doclink={DOC_LINKS.MANAGE_APPLICATIONS} />
           </span>
         ),
         transforms: [cellWidth(10)],

frontend/src/routes/Home/Overview/OverviewPage.tsx

@@ -5,7 +5,6 @@ import {
   Card,
   CardBody,
   CardTitle,
-  ContentVariants,
   Divider,
   Dropdown,
   DropdownItem,
@@ -23,7 +22,7 @@ import { AcmDynamicGrid } from '../../../components/AcmDynamicGrid'
 import { KubevirtProviderAlert } from '../../../components/KubevirtProviderAlert'
 import { useVirtualMachineDetection } from '../../../hooks/useVirtualMachineDetection'
 import { useTranslation } from '../../../lib/acm-i18next'
-import { DOC_LINKS } from '../../../lib/doc-util'
+import { DOC_LINKS, ViewDocumentationLink } from '../../../lib/doc-util'
 import { getUpgradeRiskPredictions } from '../../../lib/get-upgrade-risk-predictions'
 import { SupportedAggregate, useAggregate } from '../../../lib/useAggregates'
 import { ObservabilityEndpoint, PrometheusEndpoint, useMetricsPoll } from '../../../lib/useMetricsPoll'
@@ -647,15 +646,7 @@ export default function OverviewPage(props: Readonly<{ selectedClusterLabels: Re
                     <Card isFullHeight>
                       <CardTitle>{t('Enable Observability to see more metrics')}</CardTitle>
                       <CardBody isFilled={false}>
-                        <AcmButton
-                          variant={'link'}
-                          component={ContentVariants.a}
-                          href={DOC_LINKS.ENABLE_OBSERVABILITY}
-                          target="_blank"
-                          style={{ padding: 0 }}
-                        >
-                          {t('View documentation')} <ExternalLinkAltIcon />
-                        </AcmButton>
+                        <ViewDocumentationLink doclink={DOC_LINKS.ENABLE_OBSERVABILITY} topPadding={false} />
                       </CardBody>
                     </Card>
                   </GalleryItem>

frontend/src/routes/Infrastructure/Clusters/DiscoveredClusters/DiscoveredClusters.tsx

@@ -221,12 +221,18 @@ export function DiscoveredClustersTable(props: {
       ],
       cell: (discoveredCluster) => (
         <span style={{ whiteSpace: 'nowrap' }} key="dcName">
-          <a target="_blank" rel="noreferrer" href={discoveredCluster.spec.console} key="dcConsoleURL">
-            <ExternalLinkAltIcon />
-            <span key="dcNamelink" style={{ marginLeft: '16px' }}>
-              {discoveredCluster.spec.displayName}
-            </span>
-          </a>
+          <AcmButton
+            variant="link"
+            component="a"
+            href={discoveredCluster.spec.console}
+            target="_blank"
+            rel="noreferrer"
+            isInline
+            icon={<ExternalLinkAltIcon />}
+            iconPosition="left"
+          >
+            {discoveredCluster.spec.displayName}
+          </AcmButton>
         </span>
       ),
       exportContent: (discoveredCluster) => discoveredCluster.spec.displayName,

frontend/src/routes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterNodes/ClusterNodes.tsx

@@ -10,6 +10,7 @@ import { quantityToScalar, scalarToQuantity } from '../../../../../../lib/units'
 import { NavigationPath } from '../../../../../../NavigationPath'
 import { getRoles, NodeInfo } from '../../../../../../resources'
 import {
+  AcmButton,
   AcmEmptyState,
   AcmInlineStatus,
   AcmPageContent,
@@ -114,12 +115,18 @@ export function NodesPoolsTable() {
       cell: (node: NodeInfo) => {
         const hasOcpConsole = cluster?.distribution?.ocp?.version && cluster.consoleURL
         return hasOcpConsole ? (
-          <a href={`${cluster!.consoleURL}/k8s/cluster/nodes/${node.name}`} target="_blank" rel="noreferrer">
-            <span style={{ marginRight: '8px' }}>
-              <ExternalLinkAltIcon />
-            </span>
+          <AcmButton
+            variant="link"
+            component="a"
+            href={`${cluster!.consoleURL}/k8s/cluster/nodes/${node.name}`}
+            target="_blank"
+            rel="noreferrer"
+            isInline
+            icon={<ExternalLinkAltIcon />}
+            iconPosition="left"
+          >
             {node.name}
-          </a>
+          </AcmButton>
         ) : (
           getSearchLink(node)
         )

frontend/src/routes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterOverview/ClusterOverview.tsx

@@ -286,13 +286,18 @@ export function ClusterOverviewPageContent() {
       value: cluster?.labels?.clusterID && (
         <>
           <div>{cluster?.labels?.clusterID}</div>
-          <a
+          <AcmButton
+            variant="link"
+            component="a"
             href={`https://console.redhat.com/openshift/details/${cluster?.labels?.clusterID}`}
             target="_blank"
             rel="noreferrer"
+            isInline
+            icon={<ExternalLinkAltIcon />}
+            iconPosition="right"
           >
-            {t('openshift.cluster.manager')} <ExternalLinkAltIcon />
-          </a>
+            {t('openshift.cluster.manager')}
+          </AcmButton>
         </>
       ),
     },

frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/CreateAWSControlPlane.tsx

@@ -1,5 +1,5 @@
 /* Copyright Contributors to the Open Cluster Management project */
-import { CheckIcon, ExternalLinkAltIcon } from '@patternfly/react-icons'
+import { CheckIcon } from '@patternfly/react-icons'
 import {
   CatalogCardItemType,
   CatalogColor,
@@ -10,7 +10,7 @@ import {
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from '../../../../../lib/acm-i18next'
 import { useDataViewStrings } from '../../../../../lib/dataViewStrings'
-import { DOC_LINKS } from '../../../../../lib/doc-util'
+import { DOC_LINKS, ViewDocumentationLink } from '../../../../../lib/doc-util'
 import { NavigationPath, useBackCancelNavigation } from '../../../../../NavigationPath'
 import { AcmPage, AcmPageHeader, Provider } from '../../../../../ui-components'
 import { getTypedCreateClusterPath } from '../ClusterInfrastructureType'
@@ -66,11 +66,7 @@ export function CreateAWSControlPlane() {
         alertVariant: 'info',
         alertContent: (() => {
           if (!loaded || isHypershiftEnabled) return undefined
-          return (
-            <a href={DOC_LINKS.HOSTED_ENABLE_FEATURE_AWS} target="_blank" rel="noopener noreferrer">
-              {t('View documentation')} <ExternalLinkAltIcon />
-            </a>
-          )
+          return <ViewDocumentationLink doclink={DOC_LINKS.HOSTED_ENABLE_FEATURE_AWS} topPadding={false} />
         })(),
         badgeList: [
           {

frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/CreateControlPlane.tsx

@@ -1,5 +1,5 @@
 /* Copyright Contributors to the Open Cluster Management project */
-import { CheckIcon, ExternalLinkAltIcon } from '@patternfly/react-icons'
+import { CheckIcon } from '@patternfly/react-icons'
 import { CatalogCardItemType, ICatalogCard, PageHeader } from '@stolostron/react-data-view'
 import { useMemo, useState } from 'react'
 import { useIsHypershiftEnabled } from '../../../../../hooks/use-hypershift-enabled'
@@ -9,7 +9,7 @@ import { getTypedCreateClusterPath, HostInventoryInfrastructureType } from '../C
 import { breadcrumbs } from './common/common'
 import { GetControlPlane } from './common/GetControlPlane'
 import useNoAvailableHostsAlert from '../../../../../hooks/use-available-hosts-alert'
-import { DOC_LINKS } from '../../../../../lib/doc-util'
+import { DOC_LINKS, ViewDocumentationLink } from '../../../../../lib/doc-util'
 import { HypershiftDiagramExpand } from './common/HypershiftDiagramExpand'
 import { Icon } from '@patternfly/react-core'
 
@@ -68,11 +68,7 @@ export function CreateControlPlane() {
         alertContent: (() => {
           if (!loaded) return undefined
           if (!isHypershiftEnabled) {
-            return (
-              <a href={DOC_LINKS.HOSTED_ENABLE_FEATURE_AWS} target="_blank" rel="noopener noreferrer">
-                {t('View documentation')} <ExternalLinkAltIcon />
-              </a>
-            )
+            return <ViewDocumentationLink doclink={DOC_LINKS.HOSTED_ENABLE_FEATURE_AWS} topPadding={false} />
           }
           return noAvailableHostsAlert?.content
         })(),

frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/common/GetHostedCard.tsx

@@ -1,8 +1,8 @@
 /* Copyright Contributors to the Open Cluster Management project */
-import { CheckIcon, ExternalLinkAltIcon } from '@patternfly/react-icons'
+import { CheckIcon } from '@patternfly/react-icons'
 import { CatalogCardItemType, ICatalogCard } from '@stolostron/react-data-view'
 import { TFunction } from 'react-i18next'
-import { DOC_LINKS } from '../../../../../../lib/doc-util'
+import { DOC_LINKS, ViewDocumentationLink } from '../../../../../../lib/doc-util'
 import { Icon } from '@patternfly/react-core'
 
 function GetHostedCard(onNext: () => void, t: TFunction, isHypershiftEnabled: boolean): ICatalogCard {
@@ -37,11 +37,7 @@ function GetHostedCard(onNext: () => void, t: TFunction, isHypershiftEnabled: bo
       ? undefined
       : t('Hosted control plane operator must be enabled in order to continue'),
     alertVariant: 'info',
-    alertContent: (
-      <a href={DOC_LINKS.HOSTED_ENABLE_FEATURE_AWS} target="_blank" rel="noopener noreferrer">
-        {t('View documentation')} <ExternalLinkAltIcon />
-      </a>
-    ),
+    alertContent: <ViewDocumentationLink doclink={DOC_LINKS.HOSTED_ENABLE_FEATURE_AWS} topPadding={false} />,
   }
 }
 export default GetHostedCard

frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/common/__snapshots__/GetHostedCard.test.tsx.snap

@@ -2,15 +2,10 @@
 
 exports[`GetHostedCard Return card data - Hypershift enabled 1`] = `
 {
-  "alertContent": <a
-    href="https://docs.redhat.com/en/documentation/openshift_container_platform/4.22/html-single/hosted_control_planes/hosted-control-planes-overview#hcp-enable-manual_hcp-enable-disable"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    View documentation
-
-    <ExternalLinkAltIcon />
-  </a>,
+  "alertContent": <ViewDocumentationLink
+    doclink="https://docs.redhat.com/en/documentation/openshift_container_platform/4.22/html-single/hosted_control_planes/hosted-control-planes-overview#hcp-enable-manual_hcp-enable-disable"
+    topPadding={false}
+  />,
   "alertTitle": undefined,
   "alertVariant": "info",
   "id": "hosted",

frontend/src/routes/Infrastructure/Clusters/ManagedClusters/components/DistributionField.tsx

@@ -299,9 +299,18 @@ export function DistributionField(props: {
                     version: props.cluster?.distribution.upgradeInfo.desiredVersion,
                   }),
                   footerContent: (
-                    <a href={`${props.cluster?.consoleURL}/settings/cluster`} target="_blank" rel="noreferrer">
-                      {t('update.updating.link')} <ExternalLinkAltIcon />
-                    </a>
+                    <AcmButton
+                      variant="link"
+                      component="a"
+                      href={`${props.cluster?.consoleURL}/settings/cluster`}
+                      target="_blank"
+                      rel="noreferrer"
+                      isInline
+                      icon={<ExternalLinkAltIcon />}
+                      iconPosition="left"
+                    >
+                      {t('update.updating.link')}
+                    </AcmButton>
                   ),
                 }
               : undefined
@@ -345,9 +354,18 @@ export function DistributionField(props: {
                         version: versionNum,
                       }),
                   footerContent: (
-                    <a href={`${props.cluster?.consoleURL}/settings/cluster`} target="_blank" rel="noreferrer">
-                      {t('update.updating.link')} <ExternalLinkAltIcon />
-                    </a>
+                    <AcmButton
+                      variant="link"
+                      component="a"
+                      href={`${props.cluster?.consoleURL}/settings/cluster`}
+                      target="_blank"
+                      rel="noreferrer"
+                      isInline
+                      icon={<ExternalLinkAltIcon />}
+                      iconPosition="left"
+                    >
+                      {t('update.updating.link')}
+                    </AcmButton>
                   ),
                 }
               : undefined
@@ -385,9 +403,18 @@ export function DistributionField(props: {
                         version: props.cluster?.distribution.upgradeInfo.desiredVersion,
                       }),
                   footerContent: (
-                    <a href={`${props.cluster?.consoleURL}/settings/cluster`} target="_blank" rel="noreferrer">
-                      {t('update.updating.link')} <ExternalLinkAltIcon />
-                    </a>
+                    <AcmButton
+                      variant="link"
+                      component="a"
+                      href={`${props.cluster?.consoleURL}/settings/cluster`}
+                      target="_blank"
+                      rel="noreferrer"
+                      isInline
+                      icon={<ExternalLinkAltIcon />}
+                      iconPosition="left"
+                    >
+                      {t('update.updating.link')}
+                    </AcmButton>
                   ),
                 }
               : undefined

frontend/src/ui-components/AcmInlineStatus/AcmInlineStatus.stories.tsx

@@ -3,6 +3,7 @@
 import { Card, CardBody } from '@patternfly/react-core'
 import { ExternalLinkAltIcon } from '@patternfly/react-icons'
 import { AcmInlineStatus, StatusType } from './AcmInlineStatus'
+import { AcmButton } from '../AcmButton'
 
 export default {
   title: 'InlineStatus',
@@ -36,10 +37,18 @@ export const InlineStatusWithPopover = () => {
             headerContent: 'Status header',
             bodyContent: 'Some information about the status here.',
             footerContent: (
-              // eslint-disable-next-line jsx-a11y/anchor-is-valid
-              <a href="#">
-                Status link <ExternalLinkAltIcon />
-              </a>
+              <AcmButton
+                variant="link"
+                component="a"
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                isInline
+                icon={<ExternalLinkAltIcon />}
+                iconPosition="left"
+              >
+                Status link
+              </AcmButton>
             ),
           }}
         />