Skip to content

Commit e2e73d6

Browse files
openshift-merge-robotopenshift-merge-robot
authored
Merge pull request #1158 from spadgett/fix-community-operator-dialog-styles
Fix show community operator dialog styles
2 parents 582967c + df4b535 commit e2e73d6

4 files changed

Lines changed: 65 additions & 71 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,5 @@ export const operatorCommunityWarningIsLoaded = () => browser.wait(until.presenc
1717
.then(() => browser.sleep(500));
1818
export const operatorCommunityWarningIsClosed = () => browser.wait(until.not(until.presenceOf(communityWarningModal)), 1000)
1919
.then(() => browser.sleep(500));
20-
export const closeCommunityWarningModal = () => communityWarningModal.$('.close').click();
20+
export const closeCommunityWarningModal = () => communityWarningModal.$('.btn-default').click();
2121
export const acceptCommunityWarningModal = () => communityWarningModal.$('.btn-primary').click();

‎frontend/public/components/catalog/_catalog.scss‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
$catalog-item-icon-size-lg: 40px;
22
$catalog-item-icon-size-sm: 24px;
3+
$co-modal-ignore-warning-icon-width: 30px;
34

45
// Until Patternfly-React-Extensions is updated: https://github.com/patternfly/patternfly-react/issues/1146
56
.catalog-tile-pf-title, .properties-side-panel-pf-property-value {
@@ -201,6 +202,15 @@ $catalog-item-icon-size-sm: 24px;
201202
margin-bottom: 0;
202203
padding-top: 15px;
203204
}
205+
&__content {
206+
display: flex;
207+
}
208+
&__icon {
209+
font-size: $co-modal-ignore-warning-icon-width;
210+
margin-right: 15px;
211+
// Avoid the dialog shifting when the icon loads.
212+
min-width: $co-modal-ignore-warning-icon-width;
213+
}
204214
&__link {
205215
display: block;
206216
margin: 10px 0;
@@ -209,9 +219,6 @@ $catalog-item-icon-size-sm: 24px;
209219
margin-left: 5px;
210220
}
211221
}
212-
.modal-footer {
213-
margin-top: 0;
214-
}
215222
}
216223

217224
.properties-side-panel-pf-property-label {

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

Lines changed: 42 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,69 @@
11
/* eslint-disable no-undef */
22
import * as React from 'react';
33
import * as _ from 'lodash-es';
4-
import { Checkbox, Icon, MessageDialog } from 'patternfly-react';
4+
import { Checkbox, Icon } from 'patternfly-react';
55

66
import { RH_OPERATOR_SUPPORT_POLICY_LINK } from '../../const';
7+
import { createModalLauncher, ModalTitle, ModalBody, ModalSubmitFooter } from '../factory/modal';
78
import { ExternalLink } from '../utils';
89

9-
export class OperatorHubCommunityProviderModal extends React.Component<MarketplaceCommunityProviderModalProps, MarketplaceCommunityProviderModalState> {
10+
export class OperatorHubCommunityProviderModal extends React.Component<OperatorHubCommunityProviderModalProps, OperatorHubCommunityProviderModalState> {
1011
constructor(props) {
1112
super(props);
1213
this.state = {
1314
ignoreWarnings: false,
1415
};
1516
}
1617

17-
componentDidUpdate(prevProps) {
18-
const { show } = this.props;
19-
const { ignoreWarnings } = this.state;
20-
if (show && !prevProps.show && ignoreWarnings) {
21-
this.setState({ignoreWarnings: false });
22-
}
23-
}
24-
2518
onIgnoreChange = (event) => {
2619
this.setState({ ignoreWarnings: _.get(event, 'target.checked', false) });
2720
};
2821

22+
submit = (event) => {
23+
event.preventDefault();
24+
this.props.showCommunityOperators(this.state.ignoreWarnings);
25+
this.props.close();
26+
};
27+
2928
render() {
30-
const {show, close} = this.props;
3129
const { ignoreWarnings } = this.state;
32-
33-
const messageText = (
34-
<p>
35-
These are operators which have not been vetted or verified by Red Hat. Community Operators should be used with
36-
caution because their stability is unknown. Red Hat provides no support for Community Operators.
37-
{RH_OPERATOR_SUPPORT_POLICY_LINK && (
38-
<span className="co-modal-ignore-warning__link">
39-
<ExternalLink href={RH_OPERATOR_SUPPORT_POLICY_LINK} text="Learn more about Red Hat’s third party software support policy" />
40-
</span>
41-
)}
42-
Do you want to show Community Operators in the Operator Hub?
43-
</p>
44-
);
45-
46-
const ignoreWarningsContent = (
47-
<Checkbox className="co-modal-ignore-warning__checkbox" onChange={this.onIgnoreChange} checked={ignoreWarnings}>
48-
Do not show this warning again
49-
</Checkbox>
50-
);
51-
52-
return <MessageDialog
53-
className="co-modal-ignore-warning"
54-
show={show === true}
55-
onHide={() => close(false, false)}
56-
primaryAction={() => close(true, ignoreWarnings)}
57-
secondaryAction={() => close(false, false)}
58-
primaryActionButtonContent="Show Community Operators"
59-
secondaryActionButtonContent="Cancel"
60-
title="Show Community Operators"
61-
icon={<Icon type="pf" name="info" />}
62-
primaryContent={messageText}
63-
secondaryContent={ignoreWarningsContent}
64-
accessibleName="communityProviderWarningDialog"
65-
accessibleDescription="communityProviderWarningContent"
66-
/>;
30+
const submitButtonContent = <React.Fragment>Show<span className="hidden-xs"> Community Operators</span></React.Fragment>;
31+
return <form onSubmit={this.submit} className="modal-content co-modal-ignore-warning">
32+
<ModalTitle>Show Community Operators</ModalTitle>
33+
<ModalBody className="modal-body">
34+
<div className="co-modal-ignore-warning__content">
35+
<div className="co-modal-ignore-warning__icon">
36+
<Icon type="pf" name="info" />
37+
</div>
38+
<div>
39+
<p>
40+
These are operators which have not been vetted or verified by Red Hat. Community Operators should be used with
41+
caution because their stability is unknown. Red Hat provides no support for Community Operators.
42+
{RH_OPERATOR_SUPPORT_POLICY_LINK && (
43+
<span className="co-modal-ignore-warning__link">
44+
<ExternalLink href={RH_OPERATOR_SUPPORT_POLICY_LINK} text="Learn more about Red Hat’s third party software support policy" />
45+
</span>
46+
)}
47+
Do you want to show Community Operators in the Operator Hub?
48+
</p>
49+
<Checkbox className="co-modal-ignore-warning__checkbox" onChange={this.onIgnoreChange} checked={ignoreWarnings}>
50+
Do not show this warning again
51+
</Checkbox>
52+
</div>
53+
</div>
54+
</ModalBody>
55+
<ModalSubmitFooter submitText={submitButtonContent} inProgress={false} errorMessage="" cancel={this.props.close} />
56+
</form>;
6757
}
6858
}
6959

70-
export type MarketplaceCommunityProviderModalProps = {
71-
show: boolean;
72-
close: (show: boolean, ignoreWarnings: boolean) => void;
60+
export type OperatorHubCommunityProviderModalProps = {
61+
showCommunityOperators: (ignoreWarnings: boolean) => void;
62+
close: () => void;
7363
};
7464

75-
export type MarketplaceCommunityProviderModalState = {
65+
export type OperatorHubCommunityProviderModalState = {
7666
ignoreWarnings: boolean;
7767
};
68+
69+
export const communityOperatorWarningModal = createModalLauncher(OperatorHubCommunityProviderModal);

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

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { requireOperatorGroup } from '../operator-lifecycle-manager/operator-gro
1313
import { normalizeIconClass } from '../catalog/catalog-item-icon';
1414
import { TileViewPage, updateURLParams, getFilterSearchParam, updateActiveFilters } from '../utils/tile-view-page';
1515
import { OperatorHubItemDetails } from './operator-hub-item-details';
16-
import { OperatorHubCommunityProviderModal } from './operator-hub-community-provider-modal';
16+
import { communityOperatorWarningModal } from './operator-hub-community-provider-modal';
1717

1818
const pageDescription = (
1919
<span>
@@ -262,11 +262,11 @@ export const OperatorHubTileView = requireOperatorGroup(
262262
if (!includeCommunityOperators) {
263263
const ignoreWarning = localStorage.getItem(COMMUNITY_PROVIDERS_WARNING_LOCAL_STORAGE_KEY);
264264
if (ignoreWarning === 'true') {
265-
this.showCommunityOperators(true);
265+
this.showCommunityOperators();
266266
return;
267267
}
268268

269-
this.setState({ communityModalShown: true });
269+
communityOperatorWarningModal({ showCommunityOperators: this.showCommunityOperators });
270270
return;
271271
}
272272

@@ -288,20 +288,16 @@ export const OperatorHubTileView = requireOperatorGroup(
288288
this.setState({items: stateItems, includeCommunityOperators: false});
289289
};
290290

291-
showCommunityOperators = (show: boolean, ignoreWarning: boolean = false) => {
292-
if (show) {
293-
const { items } = this.props;
294-
const params = new URLSearchParams(window.location.search);
295-
params.set('community-operators', 'true');
296-
setURLParams(params);
291+
showCommunityOperators = (ignoreWarning: boolean = false) => {
292+
const { items } = this.props;
293+
const params = new URLSearchParams(window.location.search);
294+
params.set('community-operators', 'true');
295+
setURLParams(params);
297296

298-
this.setState({items, includeCommunityOperators: true, communityModalShown: false});
297+
this.setState({items, includeCommunityOperators: true});
299298

300-
if (ignoreWarning) {
301-
localStorage.setItem(COMMUNITY_PROVIDERS_WARNING_LOCAL_STORAGE_KEY, 'true');
302-
}
303-
} else {
304-
this.setState({communityModalShown: false} );
299+
if (ignoreWarning) {
300+
localStorage.setItem(COMMUNITY_PROVIDERS_WARNING_LOCAL_STORAGE_KEY, 'true');
305301
}
306302
};
307303

@@ -355,7 +351,7 @@ export const OperatorHubTileView = requireOperatorGroup(
355351
}
356352

357353
render() {
358-
const { items, detailsItem, communityModalShown } = this.state;
354+
const { items, detailsItem } = this.state;
359355

360356
return <React.Fragment>
361357
<TileViewPage
@@ -373,7 +369,6 @@ export const OperatorHubTileView = requireOperatorGroup(
373369
<Modal show={!!detailsItem} onHide={this.closeOverlay} bsSize={'lg'} className="co-catalog-page__overlay right-side-modal-pf">
374370
{detailsItem && <OperatorHubItemDetails item={detailsItem} closeOverlay={this.closeOverlay} />}
375371
</Modal>
376-
<OperatorHubCommunityProviderModal show={communityModalShown} close={this.showCommunityOperators} />
377372
</React.Fragment>;
378373
}
379374
}

0 commit comments

Comments
 (0)