frontend: Change link to external link

Changed Marketplace link in Operator details modal to external link. Fixes https://bugzilla.redhat.com/show_bug.cgi?id=1796664
openshift · Feb 4, 2020 · ddcfc67 · ddcfc67
1 parent 3282b64
commit ddcfc67
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/...nd/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-items.tsx b/...nd/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-items.tsx
@@ -6,6 +6,7 @@ import { CatalogItemHeader, CatalogTile } from '@patternfly/react-catalog-view-e
 import * as classNames from 'classnames';
 import { Button, Modal } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { ExternalLink } from '@console/internal/components/utils';
 
 import {
   COMMUNITY_PROVIDERS_WARNING_LOCAL_STORAGE_KEY,
@@ -357,12 +358,16 @@ export const OperatorHubTileView: React.FC<OperatorHubTileViewProps> = (props) =
               />
               <div className="co-catalog-page__button">
                 {detailsItem.marketplaceRemoteWorkflow && (
-                  <Link
-                    className="pf-c-button pf-c-external pf-m-primary co-catalog-page__overlay-remo5e-workflow"
-                    to={detailsItem.marketplaceRemoteWorkflow}
-                  >
-                    {detailsItem.marketplaceActionText || 'View Details'} <ExternalLinkAltIcon />
-                  </Link>
+                  <ExternalLink
+                    additionalClassName="pf-c-button pf-c-external pf-m-primary co-catalog-page__overlay-remote-workflow"
+                    href={detailsItem.marketplaceRemoteWorkflow}
+                    text={[
+                      detailsItem.marketplaceActionText || 'View Details',
+                      <div>
+                        <ExternalLinkAltIcon />
+                      </div>,
+                    ]}
+                  />
                 )}
                 {!detailsItem.installed ? (
                   <Link

diff --git a/frontend/public/components/catalog/_catalog.scss b/frontend/public/components/catalog/_catalog.scss
@@ -237,6 +237,10 @@ $co-modal-ignore-warning-icon-width: 30px;
     margin-right: var(--pf-global--spacer--sm);
     overflow-x: hidden;
     text-overflow: ellipsis;
+
+    div svg {
+      margin-left: var(--pf-global--spacer--xs);
+    }
   }
 
   &__overlay-description {

diff --git a/frontend/public/components/utils/link.tsx b/frontend/public/components/utils/link.tsx
@@ -91,7 +91,7 @@ LinkifyExternal.displayName = 'LinkifyExternal';
 
 type ExternalLinkProps = {
   href: string;
-  text: string;
+  text: React.ReactNode;
   additionalClassName?: string;
   dataTestID?: string;
 };