webpack/scenes/Subscriptions/Manifest/ManageManifestModal.js in katello-3.7.0 vs webpack/scenes/Subscriptions/Manifest/ManageManifestModal.js in katello-3.7.1
- old
+ new
@@ -1,15 +1,17 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
-import { Col, Tabs, Tab, Form, FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
+import { Col, Tabs, Tab, Form, FormGroup, FormControl, ControlLabel, Row } from 'react-bootstrap';
import { bindMethods, Button, Icon, Modal, Spinner, OverlayTrigger, Tooltip } from 'patternfly-react';
import { isEqual } from 'lodash';
import TooltipButton from 'react-bootstrap-tooltip-button';
import { LoadingState } from '../../../move_to_pf/LoadingState';
import { Table } from '../../../move_to_foreman/components/common/table';
-import { columns } from './ManifestHistoryTableSchema';
import ConfirmDialog from '../../../move_to_foreman/components/common/ConfirmDialog';
+import { manifestExists } from '../SubscriptionHelpers';
+import { columns } from './ManifestHistoryTableSchema';
+import { renderTaskStartedToast } from '../../Tasks/helpers';
import DeleteManifestModalText from './DeleteManifestModalText';
import {
BLOCKING_FOREMAN_TASK_TYPES,
MANIFEST_TASKS_BULK_SEARCH_ID,
} from '../SubscriptionConstants';
@@ -28,19 +30,15 @@
'hideModal',
'saveOrganization',
'uploadManifest',
'refreshManifest',
'deleteManifest',
- 'manifestExists',
'disabledTooltipText',
+ 'updateRepositoryUrl',
]);
}
- componentDidMount() {
- this.loadData();
- }
-
static getDerivedStateFromProps(newProps, prevState) {
if (
!isEqual(newProps.showModal, prevState.showModal) ||
!isEqual(newProps.taskInProgress, prevState.actionInProgress)
) {
@@ -50,10 +48,14 @@
};
}
return null;
}
+ componentDidMount() {
+ this.loadData();
+ }
+
componentDidUpdate(prevProp, prevState) {
const { actionInProgress } = this.state;
if (prevState.actionInProgress && !actionInProgress) {
this.props.loadOrganization();
@@ -67,36 +69,51 @@
hideModal() {
this.setState({ showModal: false, showDeleteManifestModalDialog: false });
this.props.onClose();
}
- saveOrganization(event) {
- this.props.saveOrganization({ redhat_repository_url: event.target.value });
+ updateRepositoryUrl(event) {
+ this.setState({ redhat_repository_url: event.target.value });
}
+ saveOrganization() {
+ this.props.saveOrganization({ redhat_repository_url: this.state.redhat_repository_url });
+ }
+
uploadManifest(fileList) {
this.setState({ actionInProgress: true });
if (fileList.length > 0) {
- this.props.uploadManifest(fileList[0]);
+ this.props
+ .uploadManifest(fileList[0])
+ .then(() =>
+ this.props.bulkSearch({
+ search_id: MANIFEST_TASKS_BULK_SEARCH_ID,
+ type: 'all',
+ active_only: true,
+ action_types: BLOCKING_FOREMAN_TASK_TYPES,
+ }))
+ .then(() => renderTaskStartedToast(this.props.taskDetails));
}
}
refreshManifest() {
this.props.refreshManifest();
this.setState({ actionInProgress: true });
}
deleteManifest() {
this.setState({ actionInProgress: true });
- this.props.deleteManifest()
+ this.props
+ .deleteManifest()
.then(() =>
this.props.bulkSearch({
search_id: MANIFEST_TASKS_BULK_SEARCH_ID,
type: 'all',
active_only: true,
action_types: BLOCKING_FOREMAN_TASK_TYPES,
- }));
+ }))
+ .then(() => renderTaskStartedToast(this.props.taskDetails));
this.showDeleteManifestModal(false);
}
showDeleteManifestModal(show) {
this.setState({
@@ -109,19 +126,16 @@
return __('This is disabled because a manifest task is in progress');
}
return __('This is disabled because no manifest exists');
}
- manifestExists() {
- const { organization } = this.props;
-
- return organization.owner_details && organization.owner_details.upstreamConsumer;
- }
-
render() {
const {
- manifestHistory, organization, disableManifestActions, disabledReason,
+ manifestHistory,
+ organization,
+ disableManifestActions,
+ disabledReason,
} = this.props;
const { actionInProgress } = this.state;
const emptyStateData = () => ({
@@ -130,17 +144,27 @@
documentation: {
title: __('Learn more about adding Subscription Manifests'),
url: 'http://redhat.com',
},
});
-
+ const buttonLoading = (
+ <span>
+ {__('Updating...')}
+ <span className="fa fa-spinner fa-spin" />
+ </span>);
const getManifestName = () => {
let name = __('No Manifest Uploaded');
- if (organization.owner_details && organization.owner_details.upstreamConsumer) {
- const link = ['https://', organization.owner_details.upstreamConsumer.webUrl,
- organization.owner_details.upstreamConsumer.uuid].join('/');
+ if (
+ organization.owner_details &&
+ organization.owner_details.upstreamConsumer
+ ) {
+ const link = [
+ 'https://',
+ organization.owner_details.upstreamConsumer.webUrl,
+ organization.owner_details.upstreamConsumer.uuid,
+ ].join('/');
name = (
<a href={link}>{organization.owner_details.upstreamConsumer.name}</a>
);
}
@@ -149,11 +173,15 @@
};
return (
<Modal show={this.state.showModal} onHide={this.hideModal}>
<Modal.Header>
- <button className="close" onClick={this.hideModal} aria-label={__('Close')}>
+ <button
+ className="close"
+ onClick={this.hideModal}
+ aria-label={__('Close')}
+ >
<Icon type="pf" name="close" />
</button>
<Modal.Title>{__('Manage Manifest')}</Modal.Title>
</Modal.Header>
<Modal.Body>
@@ -161,33 +189,47 @@
<Tab eventKey={1} title={__('Manifest')}>
<Form className="form-horizontal">
<h5>{__('Red Hat Provider Details')}</h5>
<hr />
<FormGroup>
- <ControlLabel className="col-sm-3" htmlFor="cdnUrl">
- {__('Red Hat CDN URL')}
- </ControlLabel>
+ <Col sm={3}>
+ <ControlLabel htmlFor="cdnUrl">
+ {__('Red Hat CDN URL')}
+ </ControlLabel>
+ </Col>
<Col sm={9}>
<FormControl
id="cdnUrl"
type="text"
- value={organization.redhat_repository_url || ''}
- onChange={this.saveOrganization}
+ value={this.state.redhat_repository_url || organization.redhat_repository_url || ''}
+ onChange={this.updateRepositoryUrl}
/>
</Col>
</FormGroup>
+ <FormGroup>
+ <Col smOffset={3} sm={3}>
+ <Button onClick={this.saveOrganization} disabled={organization.loading}>
+ {organization.loading ? buttonLoading : __('Update')}
+ </Button>
+ </Col>
+ </FormGroup>
<br />
<h5>{__('Subscription Manifest')}</h5>
<hr />
<FormGroup>
- <ControlLabel className="col-sm-3 control-label" htmlFor="usmaFile">
+ <ControlLabel
+ className="col-sm-3 control-label"
+ htmlFor="usmaFile"
+ >
<OverlayTrigger
overlay={
- <Tooltip id="usma-tooltip">{__('Upstream Subscription Management Application')}</Tooltip>
- }
+ <Tooltip id="usma-tooltip">
+ {__('Upstream Subscription Management Application')}
+ </Tooltip>
+ }
placement="bottom"
trigger={['hover', 'focus']}
rootClose={false}
>
<span>{__('USMA')}</span>
@@ -211,21 +253,21 @@
onClick={this.refreshManifest}
tooltipId="refresh-manifest-button-tooltip"
tooltipText={disabledReason}
tooltipPlacement="top"
title={__('Refresh')}
- disabled={!this.manifestExists() ||
+ disabled={!manifestExists(organization) ||
actionInProgress || disableManifestActions}
/>
<TooltipButton
onClick={() => this.showDeleteManifestModal(true)}
tooltipId="delete-manifest-button-tooltip"
tooltipText={this.disabledTooltipText()}
tooltipPlacement="top"
title={__('Delete')}
- disabled={!this.manifestExists() || actionInProgress}
+ disabled={!manifestExists(organization) || actionInProgress}
/>
<ConfirmDialog
show={this.state.showDeleteManifestModalDialog}
title={__('Confirm delete manifest')}
@@ -276,12 +318,14 @@
taskInProgress: PropTypes.bool.isRequired,
manifestHistory: PropTypes.shape({}).isRequired,
showModal: PropTypes.bool.isRequired,
onClose: PropTypes.func,
bulkSearch: PropTypes.func.isRequired,
+ taskDetails: PropTypes.shape({}),
};
ManageManifestModal.defaultProps = {
+ taskDetails: undefined,
disableManifestActions: false,
disabledReason: '',
onClose() {},
};