fix(core/pipeline): migrate more manual execution field layouts

spinnaker · Sep 24, 2019 · 4d3454c · 4d3454c
1 parent 15de4a8
commit 4d3454c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 43 deletions.
diff --git a/app/scripts/modules/core/src/pipeline/manualExecution/ManualPipelineExecutionModal.tsx b/app/scripts/modules/core/src/pipeline/manualExecution/ManualPipelineExecutionModal.tsx
@@ -387,7 +387,7 @@ export class ManualExecutionModal extends React.Component<IManualExecutionModalP
                   )}
                   {formik.values.pipeline && (
                     <div className="form-group">
-                      <div className="col-md-6 col-md-offset-4">
+                      <div className={pipelineOptions.length > 0 ? 'col-md-6 col-md-offset-4' : 'col-md-10'}>
                         <p>
                           This will start a new run of <strong>{formik.values.pipeline.name}</strong>.
                         </p>

diff --git a/app/scripts/modules/core/src/pipeline/manualExecution/Parameters.tsx b/app/scripts/modules/core/src/pipeline/manualExecution/Parameters.tsx
@@ -47,51 +47,39 @@ export class Parameters extends React.Component<IParametersProps> {
         </p>
         {visibleParameters &&
           visibleParameters.map((parameter, i) => {
+            const fieldProps = {
+              name: formikFieldNameForParam(parameter),
+              label: parameter.name,
+              help: parameter.description && <HelpField content={parameter.description} />,
+              fastField: false,
+              required: parameter.required,
+            };
+
             return (
-              <div className="form-group" key={i}>
-                <div className="col-md-4 sm-label-right break-word">
-                  {parameter.name}
-                  {parameter.required && <span>*</span>}
-                  {parameter.description && <HelpField content={parameter.description} />}
-                </div>
+              <React.Fragment key={i}>
                 {!parameter.hasOptions && parameter.constraint === 'date' && (
-                  <div className="col-md-6">
-                    <FormikFormField
-                      name={formikFieldNameForParam(parameter)}
-                      fastField={false}
-                      input={props => <DayPickerInput {...props} format={'yyyy-MM-dd'} />}
-                      required={parameter.required}
-                    />
-                  </div>
+                  <FormikFormField {...fieldProps} input={props => <DayPickerInput {...props} format="yyyy-MM-dd" />} />
                 )}
                 {!parameter.hasOptions && !parameter.constraint && (
-                  <div className="col-md-6">
-                    <FormikFormField
-                      name={formikFieldNameForParam(parameter)}
-                      fastField={false}
-                      input={props => <TextInput {...props} inputClassName={'form-control input-sm'} />}
-                      required={parameter.required}
-                    />
-                  </div>
+                  <FormikFormField
+                    {...fieldProps}
+                    input={props => <TextInput {...props} inputClassName="form-control input-sm" />}
+                  />
                 )}
                 {parameter.hasOptions && (
-                  <div className="col-md-6">
-                    <FormikFormField
-                      name={formikFieldNameForParam(parameter)}
-                      fastField={false}
-                      input={props => (
-                        <ReactSelectInput
-                          {...props}
-                          clearable={false}
-                          inputClassName={'parameter-option-select'}
-                          options={parameter.options.map(o => ({ label: `${o.value}`, value: o.value }))}
-                        />
-                      )}
-                      required={parameter.required}
-                    />
-                  </div>
+                  <FormikFormField
+                    {...fieldProps}
+                    input={props => (
+                      <ReactSelectInput
+                        {...props}
+                        clearable={false}
+                        inputClassName="parameter-option-select"
+                        options={parameter.options.map(o => ({ label: `${o.value}`, value: o.value }))}
+                      />
+                    )}
+                  />
                 )}
-              </div>
+              </React.Fragment>
             );
           })}
         {hasRequiredParameters && (

diff --git a/app/scripts/modules/core/src/pipeline/manualExecution/layout/ManualExecutionFieldLayout.tsx b/app/scripts/modules/core/src/pipeline/manualExecution/layout/ManualExecutionFieldLayout.tsx
@@ -6,7 +6,7 @@ import { IFieldLayoutProps } from 'core/presentation';
 
 export class ManualExecutionFieldLayout extends React.Component<IFieldLayoutProps> {
   public render() {
-    const { label, help, input, actions, touched, validationMessage, validationStatus } = this.props;
+    const { label, help, input, actions, touched, required, validationMessage, validationStatus } = this.props;
 
     const showLabel = !isEmpty(label) || !isEmpty(help);
 
@@ -18,10 +18,11 @@ export class ManualExecutionFieldLayout extends React.Component<IFieldLayoutProp
 
     return (
       <div className="sp-margin-m-bottom">
-        <div className={'form-group'}>
+        <div className="form-group">
           {showLabel && (
-            <label className={'col-md-4 sm-label-right'}>
-              {label} {help}
+            <label className="col-md-4 sm-label-right break-word">
+              {label}
+              {required && <span>*</span>} {help}
             </label>
           )}
           <div className="col-md-6">