refactor(core): Reactify rename pipeline modal (#7368)

* refactor(core): Reactify rename pipeline modal

* condense code that updates button icon

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

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

app/scripts/modules/core/src/pipeline/config/actions/rename/RenamePipelineModal.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import { map, without } from 'lodash';
+import { Modal } from 'react-bootstrap';
+import { Form } from 'formik';
+
+import { Application } from 'core/application';
+import { IPipeline } from 'core/domain';
+import { ModalClose } from 'core/modal';
+import { PipelineConfigService } from 'core/pipeline';
+import {
+  FormikFormField,
+  IModalComponentProps,
+  IValidator,
+  SpinFormik,
+  TextInput,
+  Validators,
+} from 'core/presentation';
+
+export interface IRenamePipelineModalProps extends IModalComponentProps {
+  application: Application;
+  pipeline: IPipeline;
+}
+
+interface IRenamePipelineCommand {
+  name: string;
+}
+
+export function RenamePipelineModal(props: IRenamePipelineModalProps) {
+  const { application, closeModal, dismissModal, pipeline } = props;
+  const [errorMessage, setErrorMessage] = React.useState<string>(null);
+  const [saveError, setSaveError] = React.useState<boolean>(false);
+  const [saving, setSaving] = React.useState<boolean>(false);
+  const existingNames = without(map(application.pipelineConfigs.data, 'name'), pipeline.name);
+  const pipelineType = pipeline.strategy === true ? 'Strategy' : 'Pipeline';
+  const initialValues: IRenamePipelineCommand = { name: pipeline.name };
+
+  const validPipelineName = (): IValidator => {
+    return (val: string) => {
+      const message = `${pipelineType} cannot contain: \\ ? % #`;
+      return val && !/^[^\\\^/^?^%^#]*$/i.test(val) && message;
+    };
+  };
+
+  function renamePipeline(command: IRenamePipelineCommand) {
+    setSaving(true);
+    PipelineConfigService.renamePipeline(application.name, pipeline, pipeline.name, command.name).then(
+      () => {
+        application.pipelineConfigs.refresh();
+        closeModal(command.name);
+      },
+      response => {
+        setSaving(false);
+        setSaveError(true);
+        setErrorMessage(response.message || 'No message provided');
+      },
+    );
+  }
+
+  return (
+    <>
+      <SpinFormik<IRenamePipelineCommand>
+        initialValues={initialValues}
+        onSubmit={renamePipeline}
+        render={formik => (
+          <Form className="form-horizontal">
+            <Modal key="modal" show={true} onHide={() => {}}>
+              <ModalClose dismiss={dismissModal} />
+              <Modal.Header>
+                <h3>Rename Pipeline</h3>
+              </Modal.Header>
+              <Modal.Body>
+                {saveError && (
+                  <div className="alert alert-danger">
+                    <p>Could not rename pipeline.</p>
+                    <p>
+                      <b>Reason: </b>
+                      {errorMessage}
+                    </p>
+                    <p>
+                      <a
+                        className="btn btn-link"
+                        onClick={e => {
+                          e.preventDefault();
+                          setSaveError(false);
+                        }}
+                      >
+                        [dismiss]
+                      </a>
+                    </p>
+                  </div>
+                )}
+                <FormikFormField
+                  name="name"
+                  label={`${pipelineType} Name`}
+                  input={inputProps => <TextInput {...inputProps} className="form-control input-sm" />}
+                  required={true}
+                  validate={[
+                    Validators.valueUnique(existingNames, `There is already a ${pipelineType} with that name.`),
+                    validPipelineName(),
+                  ]}
+                />
+              </Modal.Body>
+              <Modal.Footer>
+                <button className="btn btn-default" onClick={dismissModal} type="button">
+                  Cancel
+                </button>
+                <button
+                  className="btn btn-primary"
+                  disabled={!formik.isValid || !formik.dirty}
+                  type="submit"
+                  onClick={() => renamePipeline(formik.values)}
+                >
+                  <span className={saving ? 'fa fa-cog fa-spin' : 'far fa-check-circle'} />
+                  Rename {pipelineType}
+                </button>
+              </Modal.Footer>
+            </Modal>
+          </Form>
+        )}
+      />
+    </>
+  );
+}

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

@@ -19,6 +19,7 @@ import { DisablePipelineModal } from 'core/pipeline/config/actions/disable/Disab
 import { EnablePipelineModal } from 'core/pipeline/config/actions/enable/EnablePipelineModal';
 import { LockPipelineModal } from 'core/pipeline/config/actions/lock/LockPipelineModal';
 import { UnlockPipelineModal } from 'core/pipeline/config/actions/unlock/UnlockPipelineModal';
+import { RenamePipelineModal } from 'core/pipeline/config/actions/rename/RenamePipelineModal';
 import { ShowPipelineTemplateJsonModal } from 'core/pipeline/config/actions/templateJson/ShowPipelineTemplateJsonModal';
 import { PipelineTemplateV2Service } from 'core/pipeline';
 import { PipelineTemplateWriter } from 'core/pipeline/config/templates/PipelineTemplateWriter';
@@ -171,17 +172,9 @@ module.exports = angular
       };
 
       this.renamePipeline = () => {
-        $uibModal
-          .open({
-            templateUrl: require('./actions/rename/renamePipelineModal.html'),
-            controller: 'RenamePipelineModalCtrl',
-            controllerAs: 'renamePipelineModalCtrl',
-            resolve: {
-              pipeline: () => $scope.pipeline,
-              application: () => $scope.application,
-            },
-          })
-          .result.then(() => {
+        ReactModal.show(RenamePipelineModal, { pipeline: $scope.pipeline, application: $scope.application })
+          .then(pipelineName => {
+            $scope.pipeline.name = pipelineName;
             setOriginal($scope.pipeline);
             markDirty();
           })

app/scripts/modules/core/src/presentation/forms/validation/validators.ts

@@ -52,6 +52,14 @@ const skipIfUndefined = (actualValidator: IValidator): IValidator => {
   };
 };
 
+const valueUnique = (list: any[], message?: string): IValidator => {
+  return (val: any, label = THIS_FIELD) => {
+    list = list || [];
+    message = message || `${label} must be not be included in (${list.join(', ')})`;
+    return list.includes(val) && message;
+  };
+};
+
 /**
  * A collection of reusable Validator factories.
  *
@@ -67,6 +75,7 @@ export const Validators = {
   minValue,
   oneOf,
   skipIfUndefined,
+  valueUnique,
 };
 
 // Typescript kludge: