refactor(core): reactify overrideFailure component (#7107)

app/scripts/modules/core/src/pipeline/config/stages/overrideFailure/OverrideFailure.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+
+import { IStage } from 'core/domain';
+import { HelpField } from 'core/help';
+import { RadioButtonInput } from 'core/presentation';
+import { StageConfigField } from 'core/pipeline';
+
+import './overrideFailure.less';
+
+export interface IOverrideFailureConfigProps {
+  failPipeline: boolean;
+  continuePipeline: boolean;
+  completeOtherBranchesThenFail: boolean;
+  updateStageField: (changes: Partial<IStage>) => void;
+}
+
+export const OverrideFailure = (props: IOverrideFailureConfigProps) => {
+  const overrideFailureOptions = [
+    {
+      label: 'halt the entire pipeline',
+      value: 'fail',
+      help: <HelpField id="pipeline.config.haltPipelineOnFailure" />,
+    },
+    {
+      label: 'halt this branch of the pipeline',
+      value: 'stop',
+      help: <HelpField id="pipeline.config.haltBranchOnFailure" />,
+    },
+    {
+      label: 'halt this branch and fail the pipeline once other branches complete',
+      value: 'faileventual',
+      help: <HelpField id="pipeline.config.haltBranchOnFailureFailPipeline" />,
+    },
+    {
+      label: 'ignore the failure',
+      value: 'ignore',
+      help: <HelpField id="pipeline.config.ignoreFailure" />,
+    },
+  ];
+
+  const getFailureOption = () => {
+    let initValue = 'fail';
+    if (props.completeOtherBranchesThenFail === true) {
+      initValue = 'faileventual';
+    } else if (props.failPipeline === true && props.continuePipeline === false) {
+      initValue = 'fail';
+    } else if (props.failPipeline === false && props.continuePipeline === false) {
+      initValue = 'stop';
+    } else if (props.failPipeline === false && props.continuePipeline === true) {
+      initValue = 'ignore';
+    }
+    return initValue;
+  };
+
+  const failureOptionChanged = (value: string) => {
+    if (value === 'fail') {
+      props.updateStageField({
+        failPipeline: true,
+        continuePipeline: false,
+        completeOtherBranchesThenFail: false,
+      });
+    } else if (value === 'stop') {
+      props.updateStageField({
+        failPipeline: false,
+        continuePipeline: false,
+        completeOtherBranchesThenFail: false,
+      });
+    } else if (value === 'ignore') {
+      props.updateStageField({
+        failPipeline: false,
+        continuePipeline: true,
+        completeOtherBranchesThenFail: false,
+      });
+    } else if (value === 'faileventual') {
+      props.updateStageField({
+        failPipeline: false,
+        continuePipeline: true,
+        completeOtherBranchesThenFail: true,
+      });
+    }
+  };
+
+  return (
+    <StageConfigField label="If stage fails">
+      <RadioButtonInput
+        inputClassName={'override-failure-radio-input'}
+        options={overrideFailureOptions}
+        value={getFailureOption()}
+        onChange={(e: any) => failureOptionChanged(e.target.value)}
+      />
+    </StageConfigField>
+  );
+};

app/scripts/modules/core/src/pipeline/config/stages/overrideFailure/overrideFailure.less

@@ -0,0 +1,5 @@
+.override-failure-radio-input {
+  .inline.clickable {
+    width: 100%;
+  }
+}

app/scripts/modules/core/src/pipeline/config/stages/overrideFailure/overrideFailure.module.ts

@@ -0,0 +1,15 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { OverrideFailure } from './OverrideFailure';
+
+export const OVERRRIDE_FAILURE = 'spinnaker.core.pipeline.stage.overrideFailure';
+module(OVERRRIDE_FAILURE, []).component(
+  'overrideFailure',
+  react2angular(OverrideFailure, [
+    'failPipeline',
+    'continuePipeline',
+    'completeOtherBranchesThenFail',
+    'updateStageField',
+  ]),
+);

app/scripts/modules/core/src/pipeline/config/stages/stage.html

@@ -84,7 +84,12 @@ <h4 ng-bind="stage.name || '[new stage]'"></h4>
       <div class="stage-details"></div>
     </page-section>
     <page-section key="execution" label="Execution Options">
-      <override-failure stage="stage"></override-failure>
+      <override-failure
+        fail-pipeline="stage.failPipeline"
+        continue-pipeline="stage.continuePipeline"
+        complete-other-branches-then-fail="stage.completeOtherBranchesThenFail"
+        update-stage-field="stageConfigCtrl.updateStageField"
+      ></override-failure>
       <execution-windows stage="stage" ng-if="!pipeline.strategy && stage"></execution-windows>
       <override-timeout stage="stage"></override-timeout>
       <fail-on-failed-expressions stage="stage"></fail-on-failed-expressions>

app/scripts/modules/core/src/pipeline/config/stages/stage.module.js

@@ -17,14 +17,15 @@ import { StageConfigWrapper } from './StageConfigWrapper';
 import { EditStageJsonModal } from './common/EditStageJsonModal';
 import { ReactModal } from 'core/presentation';
 import { PRODUCES_ARTIFACTS_REACT } from './producesArtifacts/ProducesArtifacts';
+import { OVERRRIDE_FAILURE } from './overrideFailure/overrideFailure.module';
 
 module.exports = angular
   .module('spinnaker.core.pipeline.config.stage', [
     PRODUCES_ARTIFACTS_REACT,
     BASE_EXECUTION_DETAILS_CTRL,
     STAGE_NAME,
     require('./overrideTimeout/overrideTimeout.directive').name,
-    require('./overrideFailure/overrideFailure.component').name,
+    OVERRRIDE_FAILURE,
     require('./optionalStage/optionalStage.directive').name,
     require('./failOnFailedExpressions/failOnFailedExpressions.directive').name,
     CONFIRMATION_MODAL_SERVICE,
@@ -150,6 +151,11 @@ module.exports = angular
         });
       };
 
+      this.updateStageField = changes => {
+        extend($scope.stage, changes);
+        $scope.stageFieldUpdated();
+      };
+
       this.selectStage = function(newVal, oldVal) {
         const stageDetailsNode = $element.find('.stage-details').get(0);
         if ($scope.viewState.stageIndex >= $scope.pipeline.stages.length) {

app/scripts/modules/core/src/presentation/forms/inputs/RadioButtonInput.tsx

@@ -10,11 +10,15 @@ interface IRadioButtonInputProps
   extends IFormInputProps,
     OmitControlledInputPropsFrom<React.TextareaHTMLAttributes<any>> {
   stringOptions?: string[];
-  options?: Option[];
+  options?: IRadioButtonOptions[];
   inputClassName?: string;
   inline?: boolean;
 }
 
+interface IRadioButtonOptions extends Option {
+  help?: React.ReactNode;
+}
+
 export const RadioButtonInput = (props: IRadioButtonInputProps) => {
   const { inline, value: selectedValue, validation, inputClassName, options, stringOptions, ...otherProps } = props;
   const radioOptions = isStringArray(stringOptions) ? stringOptions.map(value => ({ value, label: value })) : options;
@@ -23,14 +27,15 @@ export const RadioButtonInput = (props: IRadioButtonInputProps) => {
   const validClassName = validationClassName(validation);
   const elementClassName = `RadioButtonInput radio ${userClassName} ${validClassName}`;
 
-  const RadioButton = ({ option }: { option: Option }) => (
+  const RadioButton = ({ option }: { option: IRadioButtonOptions }) => (
     <label key={option.label} className={inline ? 'radio-inline clickable' : 'inline clickable'}>
       <input type="radio" {...otherProps} value={option.value as any} checked={option.value === selectedValue} />
-      <Markdown message={option.label} />
+      <Markdown message={option.label} style={option.help && { display: 'inline-block' }} />
+      {option.help && <> {option.help}</>}
     </label>
   );
 
-  const VerticalRadioButtons = ({ opts }: { opts: Option[] }) => (
+  const VerticalRadioButtons = ({ opts }: { opts: IRadioButtonOptions[] }) => (
     <div className="vertical left">
       <div className={elementClassName}>
         {opts.map(option => (
@@ -40,7 +45,7 @@ export const RadioButtonInput = (props: IRadioButtonInputProps) => {
     </div>
   );
 
-  const InlineRadioButtons = ({ opts }: { opts: Option[] }) => (
+  const InlineRadioButtons = ({ opts }: { opts: IRadioButtonOptions[] }) => (
     <div className={elementClassName}>
       {opts.map(option => (
         <RadioButton key={option.label} option={option} />