Migrate <HintBlock> from PF3

frontend/__tests__/components/operator-lifecycle-manager/install-plan.spec.tsx

@@ -3,11 +3,12 @@ import * as _ from 'lodash';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Link } from 'react-router-dom';
 import Spy = jasmine.Spy;
+import { Button } from '@patternfly/react-core';
 
 import { InstallPlanTableHeader, InstallPlanTableRow, InstallPlanTableRowProps, InstallPlansList, InstallPlansListProps, InstallPlansPage, InstallPlansPageProps, InstallPlanDetailsPage, InstallPlanPreview, InstallPlanPreviewProps, InstallPlanPreviewState, InstallPlanDetailsPageProps, InstallPlanDetails, InstallPlanDetailsProps } from '../../../public/components/operator-lifecycle-manager/install-plan';
 import { InstallPlanKind, InstallPlanApproval, referenceForStepResource } from '../../../public/components/operator-lifecycle-manager';
 import { Table, TableRow, MultiListPage, DetailsPage } from '../../../public/components/factory';
-import { ResourceKebab, ResourceLink, ResourceIcon, Kebab, MsgBox } from '../../../public/components/utils';
+import { ResourceKebab, ResourceLink, ResourceIcon, Kebab, MsgBox, HintBlock } from '../../../public/components/utils';
 import { testInstallPlan } from '../../../__mocks__/k8sResourcesMocks';
 import { InstallPlanModel, ClusterServiceVersionModel, OperatorGroupModel, CustomResourceDefinitionModel } from '../../../public/models';
 import * as k8s from '../../../public/module/k8s';
@@ -160,7 +161,7 @@ describe(InstallPlanPreview.name, () => {
   it('renders button to approve install plan if requires approval', () => {
     wrapper = wrapper.setState({needsApproval: true});
 
-    expect(wrapper.find('.co-well').find('button').at(0).text()).toEqual('Approve');
+    expect(wrapper.find(HintBlock).shallow().find(Button).at(0).render().text()).toEqual('Approve');
   });
 
   it('calls `k8sUpdate` to set `approved: true` when button is clicked', (done) => {
@@ -171,13 +172,13 @@ describe(InstallPlanPreview.name, () => {
     });
 
     wrapper = wrapper.setState({needsApproval: true});
-    wrapper.find('.co-well').find('button').at(0).simulate('click');
+    wrapper.find(HintBlock).shallow().find(Button).at(0).simulate('click');
   });
 
   it('renders button to deny install plan if requires approval', () => {
     wrapper = wrapper.setState({needsApproval: true});
 
-    expect(wrapper.find('.co-well').find('button').at(1).text()).toEqual('Deny');
+    expect(wrapper.find(HintBlock).shallow().find(Button).at(1).render().text()).toEqual('Deny');
   });
 
   it('renders section for each resolving `ClusterServiceVersion`', () => {
@@ -218,11 +219,11 @@ describe(InstallPlanDetails.displayName, () => {
     installPlan.spec.approved = false;
     wrapper = wrapper.setProps({obj: installPlan});
 
-    expect(wrapper.find('.co-well').find(Link).props().to).toEqual(`/k8s/ns/default/${k8s.referenceForModel(InstallPlanModel)}/${testInstallPlan.metadata.name}/components`);
+    expect(wrapper.find(HintBlock).shallow().find(Link).props().to).toEqual(`/k8s/ns/default/${k8s.referenceForModel(InstallPlanModel)}/${testInstallPlan.metadata.name}/components`);
   });
 
   it('does not render link to "Components" tab if install plan does not need approval"', () => {
-    expect(wrapper.find('.co-well').exists()).toBe(false);
+    expect(wrapper.find(HintBlock).exists()).toBe(false);
   });
 });
 

frontend/integration-tests/views/catalog.view.ts

@@ -8,4 +8,4 @@ export const pageHeadingNumberOfItems = () => pageNumberItemsHeading.getText()
 export const catalogDetailsLoaded = () => browser.wait(until.presenceOf($('.modal-content')), 10000).then(() => browser.sleep(1000));
 export const createServiceInstanceButton = $('.co-catalog-page__overlay-create');
 export const createServiceInstanceForm = $('.co-create-service-instance');
-export const createServiceBindingButton = $('.co-well').element(by.buttonText('Create Service Binding'));
+export const createServiceBindingButton = $('.co-hint-block').element(by.buttonText('Create Service Binding'));

frontend/integration-tests/views/operator-hub.view.ts

@@ -9,7 +9,7 @@ export const operatorModalUninstallBtn = operatorModal.element(by.buttonText('Un
 export const closeOperatorModal = () => operatorModal.$('.close').click();
 export const operatorModalIsClosed = () => browser.wait(until.not(until.presenceOf(operatorModal)), 1000)
   .then(() => browser.sleep(500));
-export const viewInstalledOperator = () => $('.hint-block-pf').element(by.linkText('View it here.')).click();
+export const viewInstalledOperator = () => $('.co-hint-block').element(by.linkText('View it here.')).click();
 
 export const createSubscriptionFormTitle = element(by.cssContainingText('h1', 'Create Operator Subscription'));
 export const createSubscriptionFormName = $('.co-clusterserviceversion-logo__name__clusterserviceversion');

frontend/packages/dev-console/src/components/AddPage.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import { Helmet } from 'react-helmet';
-import { HintBlock } from 'patternfly-react';
 import { match as RMatch } from 'react-router';
-import { history, Firehose, FirehoseResource } from '@console/internal/components/utils';
+import { history, Firehose, FirehoseResource, HintBlock } from '@console/internal/components/utils';
 import { createProjectModal } from '@console/internal/components/modals';
 import { K8sResourceKind } from '@console/internal/module/k8s';
 import ODCEmptyState from './EmptyState';
@@ -61,10 +60,12 @@ const EmptyStateLoader: React.FC<EmptyStateLoaderProps> = ({ resources, loaded,
     <ODCEmptyState
       title="Add"
       hintBlock={
-        <HintBlock
-          title="No workloads found"
-          body="To add content to your project, create an application, component or service using one of these options."
-        />
+        <HintBlock title="No workloads found">
+          <p>
+            To add content to your project, create an application, component or service using one of
+            these options.
+          </p>
+        </HintBlock>
       }
     />
   ) : (

frontend/packages/dev-console/src/components/ProjectsExistWrapper.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
-import { HintBlock } from 'patternfly-react';
-import { LoadingBox } from '@console/internal/components/utils';
+import { HintBlock, LoadingBox } from '@console/internal/components/utils';
 import ODCEmptyState from './EmptyState';
 
 export interface ProjectsExistWrapperProps {
@@ -24,11 +23,12 @@ const ProjectsExistWrapper: React.FC<ProjectsExistWrapperProps> = ({
       <ODCEmptyState
         title={title}
         hintBlock={
-          <HintBlock
-            title="No projects exist"
-            body="Select one of the following options to create an application, component or service.
-              As part of the creation process a project and application will be created."
-          />
+          <HintBlock title="No projects exist">
+            <p>
+              Select one of the following options to create an application, component or service. As
+              part of the creation process a project and application will be created.
+            </p>
+          </HintBlock>
         }
       />
     );

frontend/packages/dev-console/src/components/topology/TopologyPage.tsx

@@ -2,10 +2,9 @@ import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { match as RMatch } from 'react-router-dom';
-import { HintBlock } from 'patternfly-react';
 import { getActiveApplication } from '@console/internal/reducers/ui';
 import { ALL_APPLICATIONS_KEY } from '@console/internal/const';
-import { StatusBox, Firehose } from '@console/internal/components/utils';
+import { StatusBox, Firehose, HintBlock } from '@console/internal/components/utils';
 import { RootState } from '@console/internal/redux';
 import { FLAG_KNATIVE_SERVING_SERVICE } from '@console/knative-plugin/src/const';
 import EmptyState from '../EmptyState';
@@ -34,10 +33,12 @@ const EmptyMsg = () => (
   <EmptyState
     title="Topology"
     hintBlock={
-      <HintBlock
-        title="No workloads found"
-        body="To add content to your project, create an application, component or service using one of these options."
-      />
+      <HintBlock title="No workloads found">
+        <p>
+          To add content to your project, create an application, component or service using one of
+          these options.
+        </p>
+      </HintBlock>
     }
   />
 );

frontend/public/components/catalog/_catalog.scss

@@ -142,7 +142,7 @@ $co-modal-ignore-warning-icon-width: 30px;
 
   // Enable scrolling on the modal
   &__overlay {
-    .modal-body .hint-block-pf {
+    .modal-body .co-hint-block {
         margin-bottom: 10px;
     }
 

frontend/public/components/chargeback.tsx

@@ -2,17 +2,15 @@ import * as React from 'react';
 import * as _ from 'lodash-es';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 
-import { connectToFlags, flagPending } from '../reducers/features';
+import { connectToFlags } from '../reducers/features';
 import { FLAGS } from '../const';
 import { Conditions } from './conditions';
 import { DetailsPage, ListPage, Table, TableRow, TableData } from './factory';
 import { coFetchJSON } from '../co-fetch';
 import { ChargebackReportModel } from '../models';
 import {
   LoadError,
-  LoadingBox,
   LoadingInline,
   MsgBox,
 } from './utils/status-box';
@@ -367,33 +365,9 @@ const EmptyMsg = () => <MsgBox title="No reports have been generated" detail="Re
 export const ReportsList: React.SFC = props => <Table {...props} aria-label="Reports" Header={ReportsTableHeader} Row={ReportsTableRow} EmptyMsg={EmptyMsg} virtualize />;
 
 const ReportsPage_: React.SFC<ReportsPageProps> = props => {
-  if (flagPending(props.flags[FLAGS.CHARGEBACK])) {
-    return <LoadingBox />;
-  }
-  if (props.flags[FLAGS.CHARGEBACK]) {
-    return <div>
-      <ChargebackNavBar match={props.match} />
-      <ListPage {...props} showTitle={false} kind={ReportReference} ListComponent={ReportsList} canCreate={true} />
-    </div>;
-  }
   return <div>
-    <div className="co-well">
-      <h4>Getting Started</h4>
-      <p>
-      Chargeback is not yet installed and enabled.
-      See our documention for instructions on how to install Chargeback Report on your Tectonic Cluster.
-      </p>
-      <p>
-        Chargeback is an alpha feature.
-      </p>
-      <a href="https://coreos.com/tectonic/docs/latest/reports/install-chargeback.html" target="_blank" rel="noopener noreferrer">
-        <button className="btn btn-info">Installing Chargeback Report <ExternalLinkAltIcon /></button>
-      </a>
-    </div>
-    <ListPage {...props} canCreate kind={ReportReference} ListComponent={ReportsList} mock title="Chargeback Reporting" />
-    <div style={{marginTop: '-60px', textAlign: 'center'}}>
-      <EmptyMsg />
-    </div>
+    <ChargebackNavBar match={props.match} />
+    <ListPage {...props} showTitle={false} kind={ReportReference} ListComponent={ReportsList} canCreate={true} />
   </div>;
 };
 

frontend/public/components/operator-hub/operator-hub-item-details.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { HintBlock, Modal } from 'patternfly-react';
+import { Modal } from 'patternfly-react';
 import { Button } from '@patternfly/react-core';
 import { CatalogItemHeader, PropertiesSidePanel, PropertyItem } from 'patternfly-react-extensions';
 import { Link } from 'react-router-dom';
 
 import { MarkdownView } from '../operator-lifecycle-manager/clusterserviceversion';
-import { history, ExternalLink } from '../utils';
+import { history, ExternalLink, HintBlock } from '../utils';
 import { RH_OPERATOR_SUPPORT_POLICY_LINK } from '../../const';
 import { OperatorHubItem } from './index';
 import { SubscriptionModel } from '../../models';
@@ -36,37 +36,31 @@ export const OperatorHubItemDetails: React.SFC<OperatorHubItemDetailsProps> = ({
   const getHintBlock = () => {
     if (installed) {
       return (
-        <HintBlock
-          title="Installed Operator"
-          body={
-            <span>
-              This Operator has been installed on the cluster.{' '}
-              <Link to={`/k8s/${namespace ? `ns/${namespace}` : 'all-namespaces'}/clusterserviceversions`}>
-                View it here.
-              </Link>
-            </span>
-          }
-        />
+        <HintBlock title="Installed Operator">
+          <p>
+            This Operator has been installed on the cluster.{' '}
+            <Link to={`/k8s/${namespace ? `ns/${namespace}` : 'all-namespaces'}/clusterserviceversions`}>
+              View it here.
+            </Link>
+          </p>
+        </HintBlock>
       );
     }
 
     if (providerType === 'Community') {
       return (
-        <HintBlock
-          title="Community Operator"
-          body={
-            <span>
-              This is a community provided operator. These are operators which have not been vetted or verified by Red Hat.
-              Community Operators should be used with caution because their stability is unknown.
-              Red Hat provides no support for Community Operators.
-              {RH_OPERATOR_SUPPORT_POLICY_LINK && (
-                <span className="co-modal-ignore-warning__link">
-                  <ExternalLink href={RH_OPERATOR_SUPPORT_POLICY_LINK} text="Learn more about Red Hat’s third party software support policy" />
-                </span>
-              )}
+        <HintBlock title="Community Operator">
+          <p>
+            This is a community provided operator. These are operators which have not been vetted or verified by Red Hat.
+            Community Operators should be used with caution because their stability is unknown.
+            Red Hat provides no support for Community Operators.
+          </p>
+          {RH_OPERATOR_SUPPORT_POLICY_LINK && (
+            <span className="co-modal-ignore-warning__link">
+              <ExternalLink href={RH_OPERATOR_SUPPORT_POLICY_LINK} text="Learn more about Red Hat’s third party software support policy" />
             </span>
-          }
-        />
+          )}
+        </HintBlock>
       );
     }
 

frontend/public/components/operator-lifecycle-manager/install-plan.tsx

@@ -5,9 +5,10 @@ import { Map as ImmutableMap } from 'immutable';
 import { sortable } from '@patternfly/react-table';
 import * as classNames from 'classnames';
 import { AddCircleOIcon } from '@patternfly/react-icons';
+import { Button } from '@patternfly/react-core';
 
 import { MultiListPage, DetailsPage, Table, TableRow, TableData } from '../factory';
-import { SectionHeading, MsgBox, ResourceLink, ResourceKebab, Kebab, ResourceIcon, navFactory, ResourceSummary, history } from '../utils';
+import { SectionHeading, MsgBox, ResourceLink, ResourceKebab, Kebab, ResourceIcon, navFactory, ResourceSummary, history, HintBlock } from '../utils';
 import { InstallPlanKind, InstallPlanApproval, olmNamespace, Step, referenceForStepResource } from './index';
 import { K8sResourceKind, referenceForModel, referenceForOwnerRef, k8sUpdate, apiVersionForReference } from '../../module/k8s';
 import { SubscriptionModel, ClusterServiceVersionModel, InstallPlanModel, CatalogSourceModel, OperatorGroupModel } from '../../models';
@@ -125,12 +126,13 @@ export const InstallPlanDetails: React.SFC<InstallPlanDetailsProps> = ({obj}) =>
   const needsApproval = obj.spec.approval === InstallPlanApproval.Manual && obj.spec.approved === false;
 
   return <React.Fragment>
-    { needsApproval && <div className="co-well">
-      <h4>Review Manual Install Plan</h4>
-      <p>Inspect the requirements for the components specified in this install plan before approving.</p>
-      <Link to={`/k8s/ns/${obj.metadata.namespace}/${referenceForModel(InstallPlanModel)}/${obj.metadata.name}/components`}>
-        <button className="btn btn-info">Preview Install Plan</button>
-      </Link>
+    { needsApproval && <div className="co-m-pane__body">
+      <HintBlock title="Review Manual Install Plan">
+        <p>Inspect the requirements for the components specified in this install plan before approving.</p>
+        <Link to={`/k8s/ns/${obj.metadata.namespace}/${referenceForModel(InstallPlanModel)}/${obj.metadata.name}/components`}>
+          <Button variant="primary">Preview Install Plan</Button>
+        </Link>
+      </HintBlock>
     </div> }
     <div className="co-m-pane__body">
       <SectionHeading text="Install Plan Overview" />
@@ -187,21 +189,24 @@ export class InstallPlanPreview extends React.Component<InstallPlanPreviewProps,
     return plan.length > 0
       ? <React.Fragment>
         { this.state.error && <div className="co-clusterserviceversion-detail__error-box">{this.state.error}</div> }
-        { this.state.needsApproval && <div className="co-well">
-          <h4>Review Manual Install Plan</h4>
-          <p>Once approved, the following resources will be created in order to satisfy the requirements for the components specified in the plan. Click the resource name to view the resource in detail.</p>
-          <button
-            className="btn btn-info"
-            disabled={!this.state.needsApproval}
-            onClick={() => approve()}>
-            {this.state.needsApproval ? 'Approve' : 'Approved'}
-          </button>
-          <button
-            className="btn btn-default"
-            disabled={false}
-            onClick={() => history.push(`/k8s/ns/${obj.metadata.namespace}/${referenceForModel(SubscriptionModel)}/${subscription.name}?showDelete=true`)}>
-            Deny
-          </button>
+        { this.state.needsApproval && <div className="co-m-pane__body">
+          <HintBlock title="Review Manual Install Plan">
+            <p>Once approved, the following resources will be created in order to satisfy the requirements for the components specified in the plan. Click the resource name to view the resource in detail.</p>
+            <div className="pf-c-form pf-c-form__actions">
+              <Button
+                variant="primary"
+                isDisabled={!this.state.needsApproval}
+                onClick={() => approve()}>
+                {this.state.needsApproval ? 'Approve' : 'Approved'}
+              </Button>
+              <Button
+                variant="secondary"
+                isDisabled={false}
+                onClick={() => history.push(`/k8s/ns/${obj.metadata.namespace}/${referenceForModel(SubscriptionModel)}/${subscription.name}?showDelete=true`)}>
+                Deny
+              </Button>
+            </div>
+          </HintBlock>
         </div> }
         { stepsByCSV.map((steps, i) => <div key={i} className="co-m-pane__body">
           <SectionHeading text={steps[0].resolving} />

frontend/public/components/service-instance.tsx

@@ -3,7 +3,7 @@ import * as _ from 'lodash-es';
 import { Link, withRouter, RouteComponentProps, match } from 'react-router-dom';
 import { sortable } from '@patternfly/react-table';
 import * as classNames from 'classnames';
-import { Alert } from '@patternfly/react-core';
+import { Alert, Button } from '@patternfly/react-core';
 
 import { k8sList, K8sResourceKind, planExternalName, serviceCatalogStatus, referenceForModel } from '../module/k8s';
 import { DetailsPage, ListPage, Table, TableRow, TableData } from './factory';
@@ -19,6 +19,7 @@ import {
   Timestamp,
   history,
   navFactory,
+  HintBlock,
 } from './utils';
 import { ResourceEventStream } from './events';
 import { Conditions } from './conditions';
@@ -102,10 +103,11 @@ class ServiceInstanceMessage_ extends React.Component<ServiceInstanceMessageProp
     // Show help for creating a binding when there are none for this instance.
     // TODO: Check if the plan is actually bindable.
     if (!deletionTimestamp && !hasBindings) {
-      return <div className="co-well">
-        <h4>Create Service Binding</h4>
-        <ServiceBindingDescription instanceName={obj.metadata.name} />
-        <button className="btn btn-primary" type="button" onClick={this.createBinding}>Create Service Binding</button>
+      return <div className="co-m-pane__body">
+        <HintBlock title="Create Service Binding">
+          <ServiceBindingDescription instanceName={obj.metadata.name} />
+          <Button variant="primary" onClick={this.createBinding}>Create Service Binding</Button>
+        </HintBlock>
       </div>;
     }