From 1932b9e13477b3d4a56480dfd5bcd21ebb2d89f5 Mon Sep 17 00:00:00 2001
From: Bryan Ramos <bramos@redhat.com>
Date: Fri, 6 Dec 2024 10:32:56 -0500
Subject: [PATCH] fix(KFLUXUI-246): allow highlightable links

Backport of KFLUXBUGS-1779

Signed-off-by: Bryan Ramos <bramos@redhat.com>
---
 .../Components/ComponentDetails/tabs/ComponentDetails.tsx   | 1 +
 src/components/GitLink/GitRepoLink.tsx                      | 2 +-
 src/shared/components/links/ExternalLink.scss               | 3 +++
 src/shared/components/links/ExternalLink.tsx                | 6 +++++-
 4 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 src/shared/components/links/ExternalLink.scss

diff --git a/src/components/Components/ComponentDetails/tabs/ComponentDetails.tsx b/src/components/Components/ComponentDetails/tabs/ComponentDetails.tsx
index 97ed161..46b4c96 100644
--- a/src/components/Components/ComponentDetails/tabs/ComponentDetails.tsx
+++ b/src/components/Components/ComponentDetails/tabs/ComponentDetails.tsx
@@ -92,6 +92,7 @@ const ComponentDetails: React.FC<React.PropsWithChildren<ComponentDetailsProps>>
                       : `https://${componentImageURL}`
                   }
                   text={componentImageURL}
+                  isHighlightable
                 />
               </DescriptionListDescription>
             </DescriptionListGroup>
diff --git a/src/components/GitLink/GitRepoLink.tsx b/src/components/GitLink/GitRepoLink.tsx
index a039a6e..06cbf20 100644
--- a/src/components/GitLink/GitRepoLink.tsx
+++ b/src/components/GitLink/GitRepoLink.tsx
@@ -35,7 +35,7 @@ const GitRepoLink: React.FC<React.PropsWithChildren<Props>> = ({
 
   return (
     <Tooltip content={fullUrl} position={TooltipPosition.bottom}>
-      <ExternalLink href={fullUrl} icon={icon} hideIcon dataTestID={dataTestID}>
+      <ExternalLink href={fullUrl} icon={icon} hideIcon dataTestID={dataTestID} isHighlightable>
         {parsed.owner}/{parsed.name}
         {revision ? (
           <>
diff --git a/src/shared/components/links/ExternalLink.scss b/src/shared/components/links/ExternalLink.scss
new file mode 100644
index 0000000..bfcb766
--- /dev/null
+++ b/src/shared/components/links/ExternalLink.scss
@@ -0,0 +1,3 @@
+.highlightable-link {
+  user-select: text; /* Enables text selection */
+}
\ No newline at end of file
diff --git a/src/shared/components/links/ExternalLink.tsx b/src/shared/components/links/ExternalLink.tsx
index cfbe621..639b6c4 100644
--- a/src/shared/components/links/ExternalLink.tsx
+++ b/src/shared/components/links/ExternalLink.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { ButtonProps, ButtonVariant, Icon } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import { css } from '@patternfly/react-styles';
 import AnalyticsButton from '../../../components/AnalyticsButton/AnalyticsButton';
 import { AnalyticsButtonProperties } from '../../../utils/analytics';
+import './ExternalLink.scss';
 
 type ExternalLinkProps = {
   href: string;
@@ -18,6 +20,7 @@ type ExternalLinkProps = {
   onClick?: ButtonProps['onClick'];
   analytics?: AnalyticsButtonProperties;
   size?: 'sm' | 'md' | 'lg' | 'xl';
+  isHighlightable?: boolean;
 };
 
 const ExternalLink: React.FC<React.PropsWithChildren<ExternalLinkProps>> = ({
@@ -34,11 +37,12 @@ const ExternalLink: React.FC<React.PropsWithChildren<ExternalLinkProps>> = ({
   icon,
   onClick,
   size = 'sm',
+  isHighlightable,
 }) => (
   <AnalyticsButton
     component="a"
     style={style}
-    className={additionalClassName}
+    className={css(additionalClassName, isHighlightable && 'highlightable-link')}
     href={href}
     target="_blank"
     rel="noopener noreferrer"