Fix show community operator dialog styles

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

@@ -17,5 +17,5 @@ export const operatorCommunityWarningIsLoaded = () => browser.wait(until.presenc
   .then(() => browser.sleep(500));
 export const operatorCommunityWarningIsClosed = () => browser.wait(until.not(until.presenceOf(communityWarningModal)), 1000)
   .then(() => browser.sleep(500));
-export const closeCommunityWarningModal = () => communityWarningModal.$('.close').click();
+export const closeCommunityWarningModal = () => communityWarningModal.$('.btn-default').click();
 export const acceptCommunityWarningModal = () => communityWarningModal.$('.btn-primary').click();

frontend/public/components/catalog/_catalog.scss

@@ -1,5 +1,6 @@
 $catalog-item-icon-size-lg: 40px;
 $catalog-item-icon-size-sm: 24px;
+$co-modal-ignore-warning-icon-width: 30px;
 
 // Until Patternfly-React-Extensions is updated: https://github.com/patternfly/patternfly-react/issues/1146
 .catalog-tile-pf-title, .properties-side-panel-pf-property-value {
@@ -201,6 +202,15 @@ $catalog-item-icon-size-sm: 24px;
     margin-bottom: 0;
     padding-top: 15px;
   }
+  &__content {
+    display: flex;
+  }
+  &__icon {
+    font-size: $co-modal-ignore-warning-icon-width;
+    margin-right: 15px;
+    // Avoid the dialog shifting when the icon loads.
+    min-width: $co-modal-ignore-warning-icon-width;
+  }
   &__link {
     display: block;
     margin: 10px 0;
@@ -209,9 +219,6 @@ $catalog-item-icon-size-sm: 24px;
       margin-left: 5px;
     }
   }
-  .modal-footer {
-    margin-top: 0;
-  }
 }
 
 .properties-side-panel-pf-property-label {

frontend/public/components/operator-hub/operator-hub-community-provider-modal.tsx

@@ -1,77 +1,69 @@
 /* eslint-disable no-undef */
 import * as React from 'react';
 import * as _ from 'lodash-es';
-import { Checkbox, Icon, MessageDialog } from 'patternfly-react';
+import { Checkbox, Icon } from 'patternfly-react';
 
 import { RH_OPERATOR_SUPPORT_POLICY_LINK } from '../../const';
+import { createModalLauncher, ModalTitle, ModalBody, ModalSubmitFooter } from '../factory/modal';
 import { ExternalLink } from '../utils';
 
-export class OperatorHubCommunityProviderModal extends React.Component<MarketplaceCommunityProviderModalProps, MarketplaceCommunityProviderModalState> {
+export class OperatorHubCommunityProviderModal extends React.Component<OperatorHubCommunityProviderModalProps, OperatorHubCommunityProviderModalState> {
   constructor(props) {
     super(props);
     this.state = {
       ignoreWarnings: false,
     };
   }
 
-  componentDidUpdate(prevProps) {
-    const { show } = this.props;
-    const { ignoreWarnings } = this.state;
-    if (show && !prevProps.show && ignoreWarnings) {
-      this.setState({ignoreWarnings: false });
-    }
-  }
-
   onIgnoreChange = (event) => {
     this.setState({ ignoreWarnings: _.get(event, 'target.checked', false) });
   };
 
+  submit = (event) => {
+    event.preventDefault();
+    this.props.showCommunityOperators(this.state.ignoreWarnings);
+    this.props.close();
+  };
+
   render() {
-    const {show, close} = this.props;
     const { ignoreWarnings } = this.state;
-
-    const messageText = (
-      <p>
-        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>
-        )}
-        Do you want to show Community Operators in the Operator Hub?
-      </p>
-    );
-
-    const ignoreWarningsContent = (
-      <Checkbox className="co-modal-ignore-warning__checkbox" onChange={this.onIgnoreChange} checked={ignoreWarnings}>
-        Do not show this warning again
-      </Checkbox>
-    );
-
-    return <MessageDialog
-      className="co-modal-ignore-warning"
-      show={show === true}
-      onHide={() => close(false, false)}
-      primaryAction={() => close(true, ignoreWarnings)}
-      secondaryAction={() => close(false, false)}
-      primaryActionButtonContent="Show Community Operators"
-      secondaryActionButtonContent="Cancel"
-      title="Show Community Operators"
-      icon={<Icon type="pf" name="info" />}
-      primaryContent={messageText}
-      secondaryContent={ignoreWarningsContent}
-      accessibleName="communityProviderWarningDialog"
-      accessibleDescription="communityProviderWarningContent"
-    />;
+    const submitButtonContent = <React.Fragment>Show<span className="hidden-xs"> Community Operators</span></React.Fragment>;
+    return <form onSubmit={this.submit} className="modal-content co-modal-ignore-warning">
+      <ModalTitle>Show Community Operators</ModalTitle>
+      <ModalBody className="modal-body">
+        <div className="co-modal-ignore-warning__content">
+          <div className="co-modal-ignore-warning__icon">
+            <Icon type="pf" name="info" />
+          </div>
+          <div>
+            <p>
+              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>
+              )}
+              Do you want to show Community Operators in the Operator Hub?
+            </p>
+            <Checkbox className="co-modal-ignore-warning__checkbox" onChange={this.onIgnoreChange} checked={ignoreWarnings}>
+              Do not show this warning again
+            </Checkbox>
+          </div>
+        </div>
+      </ModalBody>
+      <ModalSubmitFooter submitText={submitButtonContent} inProgress={false} errorMessage="" cancel={this.props.close} />
+    </form>;
   }
 }
 
-export type MarketplaceCommunityProviderModalProps = {
-  show: boolean;
-  close: (show: boolean, ignoreWarnings: boolean) => void;
+export type OperatorHubCommunityProviderModalProps = {
+  showCommunityOperators: (ignoreWarnings: boolean) => void;
+  close: () => void;
 };
 
-export type MarketplaceCommunityProviderModalState = {
+export type OperatorHubCommunityProviderModalState = {
   ignoreWarnings: boolean;
 };
+
+export const communityOperatorWarningModal = createModalLauncher(OperatorHubCommunityProviderModal);

frontend/public/components/operator-hub/operator-hub-items.tsx

@@ -13,7 +13,7 @@ import { requireOperatorGroup } from '../operator-lifecycle-manager/operator-gro
 import { normalizeIconClass } from '../catalog/catalog-item-icon';
 import { TileViewPage, updateURLParams, getFilterSearchParam, updateActiveFilters } from '../utils/tile-view-page';
 import { OperatorHubItemDetails } from './operator-hub-item-details';
-import { OperatorHubCommunityProviderModal } from './operator-hub-community-provider-modal';
+import { communityOperatorWarningModal } from './operator-hub-community-provider-modal';
 
 const pageDescription = (
   <span>
@@ -262,11 +262,11 @@ export const OperatorHubTileView = requireOperatorGroup(
       if (!includeCommunityOperators) {
         const ignoreWarning = localStorage.getItem(COMMUNITY_PROVIDERS_WARNING_LOCAL_STORAGE_KEY);
         if (ignoreWarning === 'true') {
-          this.showCommunityOperators(true);
+          this.showCommunityOperators();
           return;
         }
 
-        this.setState({ communityModalShown: true });
+        communityOperatorWarningModal({ showCommunityOperators: this.showCommunityOperators });
         return;
       }
 
@@ -288,20 +288,16 @@ export const OperatorHubTileView = requireOperatorGroup(
       this.setState({items: stateItems, includeCommunityOperators: false});
     };
 
-    showCommunityOperators = (show: boolean, ignoreWarning: boolean = false) => {
-      if (show) {
-        const { items } = this.props;
-        const params = new URLSearchParams(window.location.search);
-        params.set('community-operators', 'true');
-        setURLParams(params);
+    showCommunityOperators = (ignoreWarning: boolean = false) => {
+      const { items } = this.props;
+      const params = new URLSearchParams(window.location.search);
+      params.set('community-operators', 'true');
+      setURLParams(params);
 
-        this.setState({items, includeCommunityOperators: true, communityModalShown: false});
+      this.setState({items, includeCommunityOperators: true});
 
-        if (ignoreWarning) {
-          localStorage.setItem(COMMUNITY_PROVIDERS_WARNING_LOCAL_STORAGE_KEY, 'true');
-        }
-      } else {
-        this.setState({communityModalShown: false} );
+      if (ignoreWarning) {
+        localStorage.setItem(COMMUNITY_PROVIDERS_WARNING_LOCAL_STORAGE_KEY, 'true');
       }
     };
 
@@ -355,7 +351,7 @@ export const OperatorHubTileView = requireOperatorGroup(
     }
 
     render() {
-      const { items, detailsItem, communityModalShown } = this.state;
+      const { items, detailsItem } = this.state;
 
       return <React.Fragment>
         <TileViewPage
@@ -373,7 +369,6 @@ export const OperatorHubTileView = requireOperatorGroup(
         <Modal show={!!detailsItem} onHide={this.closeOverlay} bsSize={'lg'} className="co-catalog-page__overlay right-side-modal-pf">
           {detailsItem && <OperatorHubItemDetails item={detailsItem} closeOverlay={this.closeOverlay} />}
         </Modal>
-        <OperatorHubCommunityProviderModal show={communityModalShown} close={this.showCommunityOperators} />
       </React.Fragment>;
     }
   }