Update button position

openshift · Jan 25, 2020 · d800ee1 · d800ee1
1 parent 85e99e1
commit d800ee1
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 48 deletions.
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/operator-hub/index.ts b/frontend/packages/operator-lifecycle-manager/src/components/operator-hub/index.ts
@@ -49,6 +49,8 @@ export type OperatorHubCSVAnnotations = {
   description?: string;
   categories?: string;
   capabilities?: CapabilityLevel;
+  'marketplace.openshift.io/action-text'?: string;
+  'marketplace.openshift.io/remote-workflow'?: string;
 };
 
 type OperatorHubSpec = {

diff --git a/...ages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-item-details.tsx b/...ages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-item-details.tsx
@@ -1,14 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import * as classNames from 'classnames';
-import { Modal } from 'patternfly-react';
-import { Button } from '@patternfly/react-core';
-import { ExternalLinkAltIcon, CheckCircleIcon } from '@patternfly/react-icons';
-import {
-  CatalogItemHeader,
-  PropertiesSidePanel,
-  PropertyItem,
-} from '@patternfly/react-catalog-view-extension';
 import { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension';
 import { CheckCircleIcon } from '@patternfly/react-icons';
 import { Link } from 'react-router-dom';
@@ -68,7 +60,6 @@ export const OperatorHubItemDetails: React.SFC<OperatorHubItemDetailsProps> = ({
     installed,
     provider,
     providerType,
-    obj,
     longDescription,
     description,
     version,
@@ -79,15 +70,6 @@ export const OperatorHubItemDetails: React.SFC<OperatorHubItemDetailsProps> = ({
     capabilityLevel,
   } = item;
   const notAvailable = <span className="properties-side-panel-pf-property-label">N/A</span>;
-  const actionText =
-    _.get(obj, [
-      'status',
-      'channels',
-      '0',
-      'currentCSVDesc',
-      'annotations',
-      'marketplace.openshift.io/action-text',
-    ]) || 'Install';
 
   const getHintBlock = () => {
     if (installed) {
@@ -150,16 +132,7 @@ export const OperatorHubItemDetails: React.SFC<OperatorHubItemDetailsProps> = ({
               <PropertyItem label="Repository" value={repository || notAvailable} />
               <PropertyItem label="Container Image" value={containerImage || notAvailable} />
               <PropertyItem label="Created At" value={createdAt || notAvailable} />
-              <PropertyItem
-                  label="Support"
-                  value={
-                    !ibmSupportLink ? (
-                      <ExternalLink href={ibmSupportLink} text="Get Support" />
-                    ) : (
-                      support || notAvailable
-                    )
-                  }
-                />
+              <PropertyItem label="Support" value={support || notAvailable} />
             </PropertiesSidePanel>
             <div className="co-catalog-page__overlay-description">
               {getHintBlock()}

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
@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
+import * as classNames from 'classnames';
 import * as _ from 'lodash';
 import LazyLoad from 'react-lazyload';
 import { Button, Modal } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { CatalogItemHeader, CatalogTile } from '@patternfly/react-catalog-view-extension';
 import {
   COMMUNITY_PROVIDERS_WARNING_LOCAL_STORAGE_KEY,
@@ -313,9 +315,13 @@ export const OperatorHubTileView: React.FC<OperatorHubTileViewProps> = (props) =
     );
   };
 
+  const {marketplaceActionText, marketplaceRemoteWorkflow} = detailsItem;
+  const actionText = marketplaceActionText || 'Install';
+
   const createLink =
     detailsItem &&
-    `/operatorhub/subscribe?pkg=${detailsItem.obj.metadata.name}&catalog=${detailsItem.catalogSource}&catalogNamespace=${detailsItem.catalogSourceNamespace}&targetNamespace=${detailsItem.namespace}`;
+    `/operatorhub/subscribe?pkg=${detailsItem.obj.metadata.name}&catalog=${detailsItem.catalogSource}&catalogNamespace=${detailsItem.catalogSourceNamespace}&targetNamespace=${props.namespace}`;
+
   const uninstallLink = () =>
     detailsItem &&
     `/k8s/ns/${detailsItem.subscription.metadata.namespace}/${SubscriptionModel.plural}/${detailsItem.subscription.metadata.name}?showDelete=true`;
@@ -345,12 +351,26 @@ export const OperatorHubTileView: React.FC<OperatorHubTileViewProps> = (props) =
                 vendor={`${detailsItem.version} provided by ${detailsItem.provider}`}
               />
               <div className="co-catalog-page__button">
+                {marketplaceRemoteWorkflow && (
+                  <Link
+                    className="pf-c-button pf-c-external pf-m-primary co-catalog-page__overlay-purchase"
+                    to={marketplaceRemoteWorkflow}
+                  >
+                    Purchase&nbsp;&nbsp;
+                    <ExternalLinkAltIcon />
+                  </Link>
+                )}
                 {!detailsItem.installed ? (
                   <Link
-                    className="pf-c-button pf-m-primary co-catalog-page__overlay-create"
+                    className={classNames(
+                      'pf-c-button',
+                      { 'pf-m-secondary': marketplaceRemoteWorkflow },
+                      { 'pf-m-primary': !marketplaceRemoteWorkflow },
+                      'co-catalog-page__overlay-create',
+                    )}
                     to={createLink}
                   >
-                    Install
+                    {actionText}
                   </Link>
                 ) : (
                   <Button

diff --git a/...end/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-page.tsx b/...end/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-page.tsx
@@ -47,6 +47,8 @@ export const OperatorHubList: React.SFC<OperatorHubListProps> = (props) => {
         createdAt,
         support,
         capabilities: capabilityLevel,
+        'marketplace.openshift.io/action-text': marketplaceActionText,
+        'marketplace.openshift.io/remote-workflow': marketplaceRemoteWorkflow,
       } = currentCSVAnnotations;
 
       return {
@@ -85,6 +87,8 @@ export const OperatorHubList: React.SFC<OperatorHubListProps> = (props) => {
         createdAt,
         support,
         capabilityLevel,
+        marketplaceActionText,
+        marketplaceRemoteWorkflow,
       };
     },
   );

diff --git a/frontend/public/components/catalog/_catalog.scss b/frontend/public/components/catalog/_catalog.scss
@@ -233,10 +233,10 @@ $co-modal-ignore-warning-icon-width: 30px;
   }
 
   &__overlay-purchase {
-    margin-bottom: 10px;
+    display: inline-flex !important;
+    margin-right: var(--pf-global--spacer--sm);
     overflow-x: hidden;
     text-overflow: ellipsis;
-    width: 100%;
   }
 
   &__overlay-description {

diff --git a/frontend/public/components/catalog/catalog-item-details.jsx b/frontend/public/components/catalog/catalog-item-details.jsx
@@ -60,28 +60,13 @@ export class CatalogTileDetails extends React.Component {
       <li key={plan.metadata.uid}>{plan.spec.description || plan.spec.externalName}</li>
     ));
 
-    const ibmSupportLink = _.get(obj, [
-      'status',
-      'channels',
-      '0',
-      'currentCSVDesc',
-      'annotations',
-      'marketplace.openshift.io/support-workflow',
-    ]);
-
     return (
       <div className="modal-body">
         <div className="modal-body-content">
           <div className="modal-body-inner-shadow-covers">
             <div className="co-catalog-page__overlay-body">
               <PropertiesSidePanel>
                 {tileProvider && <PropertyItem label="Provider" value={tileProvider} />}
-                {ibmSupportLink && (
-                  <PropertyItem
-                    label="Support"
-                    value={<ExternalLink href={ibmSupportLink} text="Get Support" />}
-                  />
-                )}
                 {supportUrl && <PropertyItem label="Support" value={supportUrlLink} />}
                 {creationTimestamp && (
                   <PropertyItem