Merge pull request #4259 from spadgett/uninstall-operator-dialog

Bug 1800867: don't repeat "Uninstall Operator" text in modal
openshift · Feb 17, 2020 · 234ec55 · 234ec55
2 parents dcbc1d1 + de78fde
commit 234ec55
Show file tree

Hide file tree

Showing 14 changed files with 132 additions and 178 deletions.
diff --git a/frontend/packages/dev-console/src/components/modals/DeleteApplicationModal.tsx b/frontend/packages/dev-console/src/components/modals/DeleteApplicationModal.tsx
@@ -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"

diff --git a/frontend/packages/dev-console/src/components/topology/components/removeConnection.tsx b/frontend/packages/dev-console/src/components/topology/components/removeConnection.tsx
@@ -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,

diff --git a/...ges/operator-lifecycle-manager/integration-tests/scenarios/global-installmode.scenario.ts b/...ges/operator-lifecycle-manager/integration-tests/scenarios/global-installmode.scenario.ts
@@ -221,7 +221,7 @@ describe('Interacting with an `AllNamespaces` install mode Operator (Jaeger)', (
   it('uninstalls Operator from the cluster', async () => {
     await operatorHubView.operatorModalUninstallBtn.click();
     await browser.wait(until.visibilityOf($('.co-catalog-install-modal')));
-    await element(by.cssContainingText('#confirm-action', 'Remove')).click();
+    await element(by.cssContainingText('#confirm-action', 'Uninstall')).click();
     await crudView.isLoaded();
     await browser.wait(until.invisibilityOf(operatorView.rowForOperator('Jaeger Tracing')), 5000);
 

diff --git a/...ges/operator-lifecycle-manager/integration-tests/scenarios/single-installmode.scenario.ts b/...ges/operator-lifecycle-manager/integration-tests/scenarios/single-installmode.scenario.ts
@@ -226,7 +226,7 @@ describe('Interacting with a `OwnNamespace` install mode Operator (Prometheus)',
   it('uninstalls Operator from the cluster', async () => {
     await operatorHubView.operatorModalUninstallBtn.click();
     await browser.wait(until.visibilityOf($('.co-catalog-install-modal')));
-    await element(by.cssContainingText('#confirm-action', 'Remove')).click();
+    await element(by.cssContainingText('#confirm-action', 'Uninstall')).click();
     await crudView.isLoaded();
     await browser.wait(
       until.invisibilityOf(operatorView.rowForOperator('Prometheus Operator')),

diff --git a/...packages/operator-lifecycle-manager/src/components/modals/delete-catalog-source-modal.tsx b/...packages/operator-lifecycle-manager/src/components/modals/delete-catalog-source-modal.tsx
@@ -34,28 +34,25 @@ const DeleteCatalogSourceModal: React.FC<DeleteCatalogSourceModalProps> = ({
 
   return (
     <form onSubmit={submit} name="form" className="modal-content ">
-      <ModalTitle>Delete {kind.label}</ModalTitle>
+      <ModalTitle>
+        <YellowExclamationTriangleIcon className="co-icon-space-r" /> Delete {kind.label}?
+      </ModalTitle>
       <ModalBody>
-        <div className="co-delete-modal">
-          <YellowExclamationTriangleIcon className="co-delete-modal__icon" />
-          <div>
-            <p>
-              By deleting a catlog source, any operator that has been installed from this source
-              will no longer receive updates.
-            </p>
-            <p>
-              Confirm deletion by typing &nbsp;
-              <strong className="co-break-word">{resource.metadata.name}</strong>
-              &nbsp; below:
-            </p>
-            <input
-              type="text"
-              className="pf-c-form-control"
-              onKeyUp={isConfirmed}
-              placeholder="Enter name"
-            />
-          </div>
-        </div>
+        <p>
+          By deleting a catlog source, any operator that has been installed from this source will no
+          longer receive updates.
+        </p>
+        <p>
+          Confirm deletion by typing &nbsp;
+          <strong className="co-break-word">{resource.metadata.name}</strong>
+          &nbsp; below:
+        </p>
+        <input
+          type="text"
+          className="pf-c-form-control"
+          onKeyUp={isConfirmed}
+          placeholder="Enter name"
+        />
       </ModalBody>
       <ModalSubmitFooter
         submitText="Delete"

diff --git a/...ackages/operator-lifecycle-manager/src/components/modals/disable-default-source-modal.tsx b/...ackages/operator-lifecycle-manager/src/components/modals/disable-default-source-modal.tsx
@@ -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"

diff --git a/...ckages/operator-lifecycle-manager/src/components/modals/uninstall-operator-modal.spec.tsx b/...ckages/operator-lifecycle-manager/src/components/modals/uninstall-operator-modal.spec.tsx
@@ -49,7 +49,7 @@ describe(UninstallOperatorModal.name, () => {
   it('renders a modal form', () => {
     expect(wrapper.find('form').props().name).toEqual('form');
     expect(wrapper.find(ModalTitle).exists()).toBe(true);
-    expect(wrapper.find(ModalSubmitFooter).props().submitText).toEqual('Remove');
+    expect(wrapper.find(ModalSubmitFooter).props().submitText).toEqual('Uninstall');
   });
 
   it('calls `props.k8sKill` to delete the subscription when form is submitted', (done) => {

diff --git a/...nd/packages/operator-lifecycle-manager/src/components/modals/uninstall-operator-modal.tsx b/...nd/packages/operator-lifecycle-manager/src/components/modals/uninstall-operator-modal.tsx
@@ -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>
   );

diff --git a/frontend/public/components/modals/_modals.scss b/frontend/public/components/modals/_modals.scss
@@ -1,13 +1,3 @@
-.co-delete-modal {
-  display: flex;
-}
-
-.co-delete-modal__icon {
-  flex: 0 0 auto;
-  font-size: 30px;
-  margin-right: 15px;
-}
-
 .co-overlay {
   background: rgba(0, 0, 0, 0.5);
   bottom: 0;

diff --git a/frontend/public/components/modals/configure-machine-autoscaler-modal.tsx b/frontend/public/components/modals/configure-machine-autoscaler-modal.tsx
@@ -89,7 +89,7 @@ export class ConfigureMachineAutoscalerModal extends PromiseComponent<
             This will automatically scale machine set <b>{name}</b>.
           </p>
           <div className="form-group">
-            <label className="co-delete-modal-checkbox-label">
+            <label>
               Minimum Replicas:
               <NumberSpinner
                 className="pf-c-form-control"
@@ -102,7 +102,7 @@ export class ConfigureMachineAutoscalerModal extends PromiseComponent<
             </label>
           </div>
           <div className="form-group">
-            <label className="co-delete-modal-checkbox-label">
+            <label>
               Maximum Replicas:
               <NumberSpinner
                 className="pf-c-form-control"

diff --git a/frontend/public/components/modals/delete-modal.jsx b/frontend/public/components/modals/delete-modal.jsx
@@ -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

diff --git a/frontend/public/components/modals/delete-namespace-modal.jsx b/frontend/public/components/modals/delete-namespace-modal.jsx
@@ -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"

diff --git a/frontend/public/components/modals/remove-user-modal.tsx b/frontend/public/components/modals/remove-user-modal.tsx
@@ -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}