Skip to content

Commit

Permalink
Bug 1800867: Improve consistency between delete modals
Browse files Browse the repository at this point in the history 
Improve the consistency in layout and wording between the various delete
modals, such as delete resource, delete project, and uninstall operator.

https://bugzilla.redhat.com/show_bug.cgi?id=1800867
  • Loading branch information
@spadgett
spadgett committed Feb 10, 2020
1 parent d1b93e4 commit 51cd48c
Show file tree
Hide file tree
Showing 8 changed files with 109 additions and 142 deletions.
27 changes: 12 additions & 15 deletions frontend/packages/dev-console/src/components/modals/DeleteApplicationModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,22 +35,19 @@ const DeleteApplicationForm: React.FC<FormikProps<FormikValues> & DeleteApplicat
const isValid = _.get(values, 'application.userInput') === initialApplication;
return (
<form onSubmit={handleSubmit} className="modal-content modal-content--no-inner-scroll">
<ModalTitle>Delete Application</ModalTitle>
<ModalTitle>
<YellowExclamationTriangleIcon className="co-icon-space-r" /> Delete Application?
</ModalTitle>
<ModalBody>
<div className="co-delete-modal">
<YellowExclamationTriangleIcon className="co-delete-modal__icon" />
<div>
<p>
This action cannot be undone. All associated Deployments, Routes, Builds, Pipelines,
Storage/PVC&#39;s, secrets, and configmaps will be deleted.
</p>
<p>
Confirm deletion by typing{' '}
<strong className="co-break-word">{initialApplication}</strong> below:
</p>
<InputField type={TextInputTypes.text} name="application.userInput" />
</div>
</div>
<p>
This action cannot be undone. All associated Deployments, Routes, Builds, Pipelines,
Storage/PVC&#39;s, secrets, and configmaps will be deleted.
</p>
<p>
Confirm deletion by typing <strong className="co-break-word">{initialApplication}</strong>{' '}
below:
</p>
<InputField type={TextInputTypes.text} name="application.userInput" />
</ModalBody>
<ModalSubmitFooter
submitText="Delete"
Expand Down
34 changes: 17 additions & 17 deletions frontend/packages/dev-console/src/components/topology/components/removeConnection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,25 @@ import { confirmModal, errorModal } from '@console/internal/components/modals';
import { removeTopologyResourceConnection } from '../topology-utils';

export const removeConnection = (edge: Edge): Promise<any> => {
const message = (
<div className="co-delete-modal">
<YellowExclamationTriangleIcon className="co-delete-modal__icon" />
{edge.getType() === 'service-binding' ? (
<p>
Deleting the binding connector deletes the config details of the source and removes the
binding resources. Are you sure you want to delete the binding connector?
</p>
) : (
<p>
Deleting the visual connector removes the `connects-to` annotation from the resources. Are
you sure you want to delete the visual connector?
</p>
)}
</div>
);
const message =
edge.getType() === 'service-binding' ? (
<p>
Deleting the binding connector deletes the config details of the source and removes the
binding resources. Are you sure you want to delete the binding connector?
</p>
) : (
<p>
Deleting the visual connector removes the `connects-to` annotation from the resources. Are
you sure you want to delete the visual connector?
</p>
);

return confirmModal({
title: 'Delete Connector',
title: (
<>
<YellowExclamationTriangleIcon className="co-icon-space-r" /> Delete Connector?
</>
),
message,
btnText: 'Delete',
submitDanger: true,
Expand Down
19 changes: 7 additions & 12 deletions ...ackages/operator-lifecycle-manager/src/components/modals/disable-default-source-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,19 +46,14 @@ const DisableDefaultSourceModal: React.FC<DisableSourceModalProps> = ({

return (
<form onSubmit={submit} name="form" className="modal-content ">
<ModalTitle>Disable Catalog Source</ModalTitle>
<ModalTitle>
<YellowExclamationTriangleIcon className="co-icon-space-r" /> Disable Catalog Source?
</ModalTitle>
<ModalBody>
<div className="co-delete-modal">
<YellowExclamationTriangleIcon className="co-delete-modal__icon" />
<div>
<p>
By disabling a default source, the operators it provides will no longer appear in
OperatorHub and any operator that has been installed from this source will no longer
receive updates until the source is re-enabled. Disabling the source will also remove
the corresponding OperatorSource and CatalogSource resources from the cluster.
</p>
</div>
</div>
By disabling a default source, the operators it provides will no longer appear in
OperatorHub and any operator that has been installed from this source will no longer receive
updates until the source is re-enabled. Disabling the source will also remove the
corresponding OperatorSource and CatalogSource resources from the cluster.
</ModalBody>
<ModalSubmitFooter
submitText="Disable"
Expand Down
22 changes: 8 additions & 14 deletions ...nd/packages/operator-lifecycle-manager/src/components/modals/uninstall-operator-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,36 +58,30 @@ export const UninstallOperatorModal = withHandlePromise((props: UninstallOperato
.catch(_.noop);
};

const name = props.displayName || props.subscription.spec.name;
const context =
props.subscription.metadata.namespace === 'openshift-operators' ? (
<strong>all namespaces</strong>
) : (
<>
the <i>{props.subscription.metadata.namespace}</i> namespace
namespace <strong>{props.subscription.metadata.namespace}</strong>
</>
);

return (
<form onSubmit={submit} name="form" className="modal-content co-catalog-install-modal">
<ModalTitle className="modal-header">Uninstall Operator?</ModalTitle>
<ModalTitle className="modal-header">
<YellowExclamationTriangleIcon className="co-icon-space-r" /> Uninstall Operator?
</ModalTitle>
<ModalBody>
<div className="co-delete-modal">
<YellowExclamationTriangleIcon className="co-delete-modal__icon" />
<div>
<p className="lead">Uninstall {props.displayName || props.subscription.spec.name}?</p>
<div>
This will remove the operator from {context}. Your application will keep running, but
it will no longer receive updates or configuration changes.
</div>
</div>
</div>
This will remove operator <strong>{name}</strong> from {context}. Your application will keep
running, but it will no longer receive updates or configuration changes.
</ModalBody>
<ModalSubmitFooter
inProgress={props.inProgress}
errorMessage={props.errorMessage}
cancel={props.cancel}
submitDanger
submitText="Remove"
submitText="Uninstall"
/>
</form>
);
Expand Down
56 changes: 25 additions & 31 deletions frontend/public/components/modals/delete-modal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,39 +49,33 @@ class DeleteModal extends PromiseComponent {
const { kind, resource, message } = this.props;
return (
<form onSubmit={this._submit} name="form" className="modal-content ">
<ModalTitle>Delete {kind.label}</ModalTitle>
<ModalTitle>
<YellowExclamationTriangleIcon className="co-icon-space-r" /> Delete {kind.label}?
</ModalTitle>
<ModalBody className="modal-body">
<div className="co-delete-modal">
<YellowExclamationTriangleIcon className="co-delete-modal__icon" />
<div>
<p className="lead">
Delete <span className="co-break-word">{resource.metadata.name}</span>?
</p>
{message}
<div>
Are you sure you want to delete{' '}
<strong className="co-break-word">{resource.metadata.name}</strong>
{_.has(resource.metadata, 'namespace') && (
<span>
{' '}
in namespace <strong>{resource.metadata.namespace}</strong>
</span>
)}
?
{_.has(kind, 'propagationPolicy') && (
<div className="checkbox">
<label className="control-label">
<input
type="checkbox"
onChange={() => this.setState({ isChecked: !this.state.isChecked })}
checked={!!this.state.isChecked}
/>
Delete dependent objects of this resource
</label>
</div>
)}
{message}
<div>
Are you sure you want to delete{' '}
<strong className="co-break-word">{resource.metadata.name}</strong>
{_.has(resource.metadata, 'namespace') && (
<span>
{' '}
in namespace <strong>{resource.metadata.namespace}</strong>
</span>
)}
?
{_.has(kind, 'propagationPolicy') && (
<div className="checkbox">
<label className="control-label">
<input
type="checkbox"
onChange={() => this.setState({ isChecked: !this.state.isChecked })}
checked={!!this.state.isChecked}
/>
Delete dependent objects of this resource
</label>
</div>
</div>
)}
</div>
</ModalBody>
<ModalSubmitFooter
Expand Down
42 changes: 20 additions & 22 deletions frontend/public/components/modals/delete-namespace-modal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,29 +31,27 @@ class DeleteNamespaceModal extends PromiseComponent {
render() {
return (
<form onSubmit={this._submit} name="form" className="modal-content ">
<ModalTitle>Delete {this.props.kind.label}</ModalTitle>
<ModalTitle className="modal-header">
<YellowExclamationTriangleIcon className="co-icon-space-r" /> Delete{' '}
{this.props.kind.label}?
</ModalTitle>
<ModalBody>
<div className="co-delete-modal">
<YellowExclamationTriangleIcon className="co-delete-modal__icon" />
<div>
<p>
This action cannot be undone. It will destroy all pods, services and other objects
in the deleted namespace.
</p>
<p>
Confirm deletion by typing{' '}
<strong className="co-break-word">{this.props.resource.metadata.name}</strong>{' '}
below:
</p>
<input
type="text"
className="pf-c-form-control"
onKeyUp={this._matchTypedNamespace}
placeholder="Enter name"
autoFocus={true}
/>
</div>
</div>
<p>
This action cannot be undone. It will destroy all pods, services and other objects in
the namespace{' '}
<strong className="co-break-word">{this.props.resource.metadata.name}</strong>.
</p>
<p>
Confirm deletion by typing{' '}
<strong className="co-break-word">{this.props.resource.metadata.name}</strong> below:
</p>
<input
type="text"
className="pf-c-form-control"
onKeyUp={this._matchTypedNamespace}
placeholder="Enter name"
autoFocus={true}
/>
</ModalBody>
<ModalSubmitFooter
submitText="Delete"
Expand Down
13 changes: 4 additions & 9 deletions frontend/public/components/modals/remove-user-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,11 @@ export const RemoveUserModal = withHandlePromise((props: RemoveUserModalProps) =

return (
<form onSubmit={submit} name="form" className="modal-content ">
<ModalTitle>Remove User from Group</ModalTitle>
<ModalTitle>
<YellowExclamationTriangleIcon className="co-icon-space-r" /> Remove User from Group?
</ModalTitle>
<ModalBody>
<div className="co-delete-modal">
<YellowExclamationTriangleIcon className="co-delete-modal__icon" />
<div>
<p>
Remove user {props.user} from group {props.group.metadata.name}?
</p>
</div>
</div>
Remove user {props.user} from group {props.group.metadata.name}?
</ModalBody>
<ModalSubmitFooter
errorMessage={props.errorMessage}
Expand Down
38 changes: 16 additions & 22 deletions frontend/public/components/modals/remove-volume-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,31 +74,25 @@ export const RemoveVolumeModal: React.FC<RemoveVolumeModalProps> = (props) => {
const type: string = _.get(getVolumeType(volume.volumeDetail), 'id', '');
return (
<form onSubmit={submit} className="modal-content">
<ModalTitle>Remove Volume</ModalTitle>
<ModalTitle>
<YellowExclamationTriangleIcon className="co-icon-space-r" /> Remove Volume?
</ModalTitle>
<ModalBody className="modal-body">
<div className="co-delete-modal">
<YellowExclamationTriangleIcon className="co-delete-modal__icon" />
<div>
Are you sure you want to remove volume{' '}
<strong className="co-break-word">{volume.name}</strong>
<span>
{' '}
from <strong>{kind.label}</strong>: <strong>{resource.metadata.name}</strong>?
</span>
</div>
{type && (
<div>
<p className="lead">
Remove volume <span className="co-break-word">{volume.name}</span>?
</p>
<div>
Are you sure you want to remove volume{' '}
<strong className="co-break-word">{volume.name}</strong>
<span>
{' '}
from <strong>{kind.label}</strong>: <strong>{resource.metadata.name}</strong>?
</span>
</div>
{type && (
<div>
<label className="control-label">
Note: This will not remove the underlying {type}.
</label>
</div>
)}
<label className="control-label">
Note: This will not remove the underlying {type}.
</label>
</div>
</div>
)}
</ModalBody>
<ModalSubmitFooter
errorMessage={errorMessage}
Expand Down

0 comments on commit 51cd48c

Please sign in to comment.