refactor(core): Reactify enable pipeline modal (#7360)

* refactor(core): Reactify enable pipeline modal

* remove wrapper function

app/scripts/modules/core/src/pipeline/config/actions/actions.module.js

@@ -5,7 +5,6 @@ const angular = require('angular');
 module.exports = angular.module('spinnaker.core.pipeline.config.actions', [
   require('./rename/rename.module').name,
   require('./history/showHistory.controller').name,
-  require('./enable/enable.module').name,
   require('./lock/lock.module').name,
   require('./unlock/unlock.module').name,
 ]);

app/scripts/modules/core/src/pipeline/config/actions/delete/DeletePipelineModal.tsx

@@ -91,10 +91,10 @@ export function DeletePipelineModal(props: IDeletePipelineModalProps) {
           </form>
         </Modal.Body>
         <Modal.Footer>
-          <button className="btn btn-default" onClick={() => dismissModal()} type="button">
+          <button className="btn btn-default" onClick={dismissModal} type="button">
             Cancel
           </button>
-          <button className="btn btn-primary" onClick={() => deletePipeline()}>
+          <button className="btn btn-primary" onClick={deletePipeline}>
             {!deleting && (
               <span>
                 <span className="far fa-check-circle" /> Delete

app/scripts/modules/core/src/pipeline/config/actions/disable/DisablePipelineModal.tsx

@@ -66,10 +66,10 @@ export function DisablePipelineModal(props: IDisablePipelineModalProps) {
           </form>
         </Modal.Body>
         <Modal.Footer>
-          <button className="btn btn-default" onClick={() => dismissModal()} type="button">
+          <button className="btn btn-default" onClick={dismissModal} type="button">
             Cancel
           </button>
-          <button className="btn btn-primary" onClick={() => disablePipeline()} type="button">
+          <button className="btn btn-primary" onClick={disablePipeline} type="button">
             Disable pipeline
           </button>
         </Modal.Footer>

app/scripts/modules/core/src/pipeline/config/actions/enable/EnablePipelineModal.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { Modal } from 'react-bootstrap';
+
+import { IPipeline } from 'core/domain';
+import { ModalClose } from 'core/modal';
+import { IModalComponentProps } from 'core/presentation';
+import { PipelineConfigService } from 'core/pipeline/config/services/PipelineConfigService';
+
+export interface IEnablePipelineModalProps extends IModalComponentProps {
+  pipeline: IPipeline;
+}
+
+export function EnablePipelineModal(props: IEnablePipelineModalProps) {
+  const [errorMessage, setErrorMessage] = React.useState<string>(null);
+  const [saveError, setSaveError] = React.useState<boolean>(false);
+  const { closeModal, dismissModal, pipeline } = props;
+
+  function enablePipeline() {
+    PipelineConfigService.savePipeline({ ...pipeline, disabled: false }).then(
+      () => closeModal(),
+      response => {
+        setSaveError(true);
+        setErrorMessage(response.message || 'No message provided');
+      },
+    );
+  }
+
+  return (
+    <>
+      <Modal key="modal" show={true} onHide={() => {}}>
+        <ModalClose dismiss={dismissModal} />
+        <Modal.Header>
+          <h3>Really Enable Pipeline?</h3>
+        </Modal.Header>
+        <Modal.Body>
+          {saveError && (
+            <div className="alert alert-danger">
+              <p>Could not enable pipeline.</p>
+              <p>
+                <b>Reason: </b>
+                {errorMessage}
+              </p>
+              <p>
+                <a
+                  className="btn btn-link"
+                  onClick={e => {
+                    e.preventDefault();
+                    setSaveError(false);
+                  }}
+                >
+                  [dismiss]
+                </a>
+              </p>
+            </div>
+          )}
+          <form role="form" name="form" className="form-horizontal">
+            <div className="form-group">
+              <div className="col-md-12">
+                <p>Are you sure you want to enable {pipeline.name}?</p>
+              </div>
+            </div>
+          </form>
+        </Modal.Body>
+        <Modal.Footer>
+          <button className="btn btn-default" onClick={dismissModal} type="button">
+            Cancel
+          </button>
+          <button className="btn btn-primary" onClick={enablePipeline} type="button">
+            Enable pipeline
+          </button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}

app/scripts/modules/core/src/pipeline/config/pipelineConfigurer.js

@@ -16,6 +16,7 @@ import { ExecutionsTransformer } from 'core/pipeline/service/ExecutionsTransform
 import { EditPipelineJsonModal } from 'core/pipeline/config/actions/pipelineJson/EditPipelineJsonModal';
 import { DeletePipelineModal } from 'core/pipeline/config/actions/delete/DeletePipelineModal';
 import { DisablePipelineModal } from 'core/pipeline/config/actions/disable/DisablePipelineModal';
+import { EnablePipelineModal } from 'core/pipeline/config/actions/enable/EnablePipelineModal';
 import { ShowPipelineTemplateJsonModal } from 'core/pipeline/config/actions/templateJson/ShowPipelineTemplateJsonModal';
 import { PipelineTemplateV2Service } from 'core/pipeline';
 import { PipelineTemplateWriter } from 'core/pipeline/config/templates/PipelineTemplateWriter';
@@ -197,15 +198,8 @@ module.exports = angular
 
       // Enabling a pipeline simply toggles the disabled flag - it does not save any pending changes
       this.enablePipeline = () => {
-        $uibModal
-          .open({
-            templateUrl: require('./actions/enable/enablePipelineModal.html'),
-            controller: 'EnablePipelineModalCtrl as ctrl',
-            resolve: {
-              pipeline: () => getOriginal(),
-            },
-          })
-          .result.then(() => disableToggled(false))
+        ReactModal.show(EnablePipelineModal, { pipeline: getOriginal() })
+          .then(() => disableToggled(false))
           .catch(() => {});
       };
 
@@ -223,7 +217,7 @@ module.exports = angular
 
       // Disabling a pipeline also just toggles the disabled flag - it does not save any pending changes
       this.disablePipeline = () => {
-        ReactModal.show(DisablePipelineModal, { pipeline: $scope.pipeline })
+        ReactModal.show(DisablePipelineModal, { pipeline: getOriginal() })
           .then(() => disableToggled(true))
           .catch(() => {});
       };