refactor(kubernetes): convert undo rollout manifest stage to react (#…

…10159)

packages/kubernetes/src/kubernetes.module.ts

@@ -33,7 +33,6 @@ import { ManifestWizard } from './manifest/wizard/ManifestWizard';
 import './pipelines/stages';
 import { KUBERNETES_DISABLE_MANIFEST_STAGE } from './pipelines/stages/traffic/disableManifest.stage';
 import { KUBERNETES_ENABLE_MANIFEST_STAGE } from './pipelines/stages/traffic/enableManifest.stage';
-import { KUBERNETES_UNDO_ROLLOUT_MANIFEST_STAGE } from './pipelines/stages/undoRolloutManifest/undoRolloutManifestStage';
 import './pipelines/validation/manifestSelector.validator';
 import { KUBERNETS_RAW_RESOURCE_MODULE } from './rawResource';
 import { KUBERNETES_RESOURCE_STATES } from './resources/resources.state';
@@ -71,7 +70,6 @@ const requires = [
   KUBERNETES_MANIFEST_ARTIFACT,
   KUBERNETES_LOAD_BALANCER_TRANSFORMER,
   KUBERNETES_SECURITY_GROUP_TRANSFORMER,
-  KUBERNETES_UNDO_ROLLOUT_MANIFEST_STAGE,
   KUBERNETES_MANIFEST_SELECTOR,
   KUBERNETES_MANIFEST_LABELS,
   KUBERNETES_MANIFEST_EVENTS,

packages/kubernetes/src/pipelines/stages/index.ts

@@ -4,4 +4,5 @@ export * from './findArtifactsFromResource/findArtifactsFromResourceStage';
 export * from './patchManifest/patchManifestStage';
 export * from './rolloutRestartManifest/rolloutRestartManifestStage';
 export * from './runJob/runJobStage';
+export * from './undoRolloutManifest/undoRolloutManifestStage';
 export * from './scaleManifest/scaleManifestStage';

packages/kubernetes/src/pipelines/stages/undoRolloutManifest/UndoRolloutManifestConfig.tsx

@@ -0,0 +1,37 @@
+import { defaults } from 'lodash';
+import React, { useEffect } from 'react';
+
+import type { IFormikStageConfigInjectedProps, IStageConfigProps } from '@spinnaker/core';
+import { FormikStageConfig } from '@spinnaker/core';
+
+import { UndoRolloutManifestStageForm } from './UndoRolloutManifestStageForm';
+
+export function UndoRolloutManifestConfig({
+  application,
+  pipeline,
+  stage,
+  updateStage,
+  stageFieldUpdated,
+}: IStageConfigProps) {
+  useEffect(() => {
+    defaults(stage, {
+      cloudProvider: 'kubernetes',
+    });
+
+    if (stage.isNew) {
+      stage.numRevisionsBack = 1;
+    }
+  }, []);
+
+  return (
+    <FormikStageConfig
+      application={application}
+      pipeline={pipeline}
+      stage={stage}
+      onChange={updateStage}
+      render={(props: IFormikStageConfigInjectedProps) => (
+        <UndoRolloutManifestStageForm {...props} stageFieldUpdated={stageFieldUpdated} />
+      )}
+    />
+  );
+}

packages/kubernetes/src/pipelines/stages/undoRolloutManifest/UndoRolloutManifestStageForm.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import type { IFormikStageConfigInjectedProps } from '@spinnaker/core';
+import { NumberInput, StageConfigField } from '@spinnaker/core';
+
+import type { IManifestSelector } from '../../../manifest/selector/IManifestSelector';
+import { SelectorMode } from '../../../manifest/selector/IManifestSelector';
+import { ManifestSelector } from '../../../manifest/selector/ManifestSelector';
+
+interface IUndoRolloutManifestStageConfigFormProps {
+  stageFieldUpdated: () => void;
+}
+
+export function UndoRolloutManifestStageForm({
+  application,
+  formik,
+  stageFieldUpdated,
+}: IUndoRolloutManifestStageConfigFormProps & IFormikStageConfigInjectedProps) {
+  const stage = formik.values;
+
+  const onManifestSelectorChange = () => {
+    stageFieldUpdated();
+  };
+
+  const onRevisionsChange = (e: React.ChangeEvent<any>) => {
+    formik.setFieldValue('numRevisionsBack', e.target.value);
+  };
+
+  return (
+    <div className="form-horizontal">
+      <h4>Manifest</h4>
+      <div className="horizontal-rule" />
+      <ManifestSelector
+        application={application}
+        selector={(stage as unknown) as IManifestSelector}
+        modes={[SelectorMode.Static, SelectorMode.Dynamic]}
+        onChange={onManifestSelectorChange}
+        includeSpinnakerKinds={null}
+      />
+      <h4>Settings</h4>
+      <div className="horizontal-rule" />
+      <StageConfigField
+        label="Revisions Back"
+        helpKey="kubernetes.manifest.undoRollout.revisionsBack"
+        fieldColumns={4}
+        groupClassName="form-group form-inline"
+      >
+        <div className="input-group">
+          <NumberInput
+            inputClassName="input-sm highlight-pristine"
+            onChange={onRevisionsChange}
+            value={stage.numRevisionsBack}
+            min={1}
+          />
+          <span className="input-group-addon">{stage.numRevisionsBack === '1' ? 'revision' : 'revisions'}</span>
+        </div>
+      </StageConfigField>
+    </div>
+  );
+}

packages/kubernetes/src/pipelines/stages/undoRolloutManifest/undoRolloutManifestStage.ts

@@ -1,30 +1,21 @@
-import { module } from 'angular';
+import { ExecutionDetailsTasks, Registry } from '@spinnaker/core';
 
-import type { IStage } from '@spinnaker/core';
-import { Registry } from '@spinnaker/core';
+import { manifestExecutionDetails } from '../ManifestExecutionDetails';
+import { UndoRolloutManifestConfig } from './UndoRolloutManifestConfig';
+import { manifestSelectorValidators } from '../validators/manifestSelectorValidators';
 
-import { KubernetesV2UndoRolloutManifestConfigCtrl } from './undoRolloutManifestConfig.controller';
+const STAGE_NAME = 'Undo Rollout (Manifest)';
+const STAGE_KEY = 'undoRolloutManifest';
 
-export const KUBERNETES_UNDO_ROLLOUT_MANIFEST_STAGE = 'spinnaker.kubernetes.v2.pipeline.stage.undoRolloutManifestStage';
-
-module(KUBERNETES_UNDO_ROLLOUT_MANIFEST_STAGE, [])
-  .config(() => {
-    Registry.pipeline.registerStage({
-      label: 'Undo Rollout (Manifest)',
-      description: 'Rollback a manifest a target number of revisions.',
-      key: 'undoRolloutManifest',
-      cloudProvider: 'kubernetes',
-      templateUrl: require('./undoRolloutManifestConfig.html'),
-      controller: 'KubernetesV2UndoRolloutManifestConfigCtrl',
-      controllerAs: 'ctrl',
-      accountExtractor: (stage: IStage): string[] => (stage.account ? [stage.account] : []),
-      configAccountExtractor: (stage: any): string[] => (stage.account ? [stage.account] : []),
-      validators: [
-        { type: 'requiredField', fieldName: 'location', fieldLabel: 'Namespace' },
-        { type: 'requiredField', fieldName: 'account', fieldLabel: 'Account' },
-        { type: 'requiredField', fieldName: 'numRevisionsBack', fieldLabel: 'Number of Revisions' },
-        { type: 'manifestSelector' },
-      ],
-    });
-  })
-  .controller('KubernetesV2UndoRolloutManifestConfigCtrl', KubernetesV2UndoRolloutManifestConfigCtrl);
+Registry.pipeline.registerStage({
+  label: STAGE_NAME,
+  description: 'Rollback a manifest a target number of revisions.',
+  key: STAGE_KEY,
+  cloudProvider: 'kubernetes',
+  component: UndoRolloutManifestConfig,
+  executionDetailsSections: [manifestExecutionDetails(STAGE_KEY), ExecutionDetailsTasks],
+  validators: [
+    ...manifestSelectorValidators(STAGE_NAME),
+    { type: 'requiredField', fieldName: 'numRevisionsBack', fieldLabel: 'Number of Revisions' },
+  ],
+});