Merge pull request #49 from CryptoRodeo/kfluxui-246

fix(KFLUXUI-246): allow highlightable links
konflux-ci · Dec 9, 2024 · f80051c · f80051c
2 parents 4022d75 + 1932b9e
commit f80051c
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,3 @@
+.highlightable-link {
+  user-select: text; /* Enables text selection */
+}
diff --git 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"