fix(cf): fix the alignment issue for artifacts in deploy SG (spinnake…

…r#6701)
christopherthielen · Mar 15, 2019 · 4f826d1 · 4f826d1
1 parent 3dac1d9
commit 4f826d1
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 14 deletions.
diff --git a/app/scripts/modules/cloudfoundry/src/presentation/forms/inputs/FormikConfigField.tsx b/app/scripts/modules/cloudfoundry/src/presentation/forms/inputs/FormikConfigField.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import { HelpField } from '@spinnaker/core';
+
+export interface IFormikConfigFieldProps {
+  label: string;
+  helpKey?: string;
+  children?: React.ReactNode;
+}
+
+export class FormikConfigField extends React.Component<IFormikConfigFieldProps> {
+  constructor(props: IFormikConfigFieldProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const { label, helpKey, children } = this.props;
+    return (
+      <div className={'StandardFieldLayout flex-container-h baseline margin-between-lg'}>
+        <label className={`sm-label-right`}>
+          <span className="label-text">{label} </span>
+          {helpKey && <HelpField id={helpKey} />}
+        </label>
+        <div className={`flex-grow`}>{children}</div>
+      </div>
+    );
+  }
+}
diff --git a/app/scripts/modules/cloudfoundry/src/presentation/forms/inputs/index.ts b/app/scripts/modules/cloudfoundry/src/presentation/forms/inputs/index.ts
@@ -1 +1,2 @@
 export * from './CloudFoundryRadioButtonInput';
+export * from './FormikConfigField';
diff --git a/...oundry/src/serverGroup/configure/wizard/sections/artifactSettings/ArtifactSettings.cf.tsx b/...oundry/src/serverGroup/configure/wizard/sections/artifactSettings/ArtifactSettings.cf.tsx
@@ -13,6 +13,7 @@ import {
 } from '@spinnaker/core';
 
 import { ICloudFoundryCreateServerGroupCommand } from 'cloudfoundry/serverGroup/configure/serverGroupConfigurationModel.cf';
+import { FormikConfigField } from 'cloudfoundry/presentation';
 
 export interface ICloudFoundryCreateServerGroupArtifactSettingsProps {
   formik: FormikProps<ICloudFoundryCreateServerGroupCommand>;
@@ -52,7 +53,6 @@ export class CloudFoundryServerGroupArtifactSettings
       <div className="form-group">
         <div className="col-md-11">
           <div className="StandardFieldLayout flex-container-h margin-between-lg">
-            <div className="sm-label-right">Artifact</div>
             <div className="flex-grow">
               <StageArtifactSelector
                 pipeline={pipeline}
@@ -62,6 +62,9 @@ export class CloudFoundryServerGroupArtifactSettings
                 onExpectedArtifactSelected={this.onExpectedArtifactSelected}
                 onArtifactEdited={this.onArtifactChanged}
                 excludedArtifactTypePatterns={this.excludedArtifactTypePatterns}
+                renderLabel={(field: React.ReactNode) => {
+                  return <FormikConfigField label={'Artifact'}>{field}</FormikConfigField>;
+                }}
               />
             </div>
           </div>

diff --git a/.../serverGroup/configure/wizard/sections/configurationSettings/ConfigurationSettings.cf.tsx b/.../serverGroup/configure/wizard/sections/configurationSettings/ConfigurationSettings.cf.tsx
@@ -22,6 +22,7 @@ import { ICloudFoundryEnvVar } from 'cloudfoundry/domain';
 import {
   Buildpacks,
   EnvironmentVariables,
+  FormikConfigField,
   HealthCheck,
   InstanceParameters,
   Routes,
@@ -83,7 +84,6 @@ export class CloudFoundryServerGroupConfigurationSettings
       <div className="form-group">
         <div className="col-md-11">
           <div className="StandardFieldLayout flex-container-h margin-between-lg">
-            <div className="sm-label-right">Artifact</div>
             <div className="flex-grow">
               <StageArtifactSelector
                 pipeline={pipeline}
@@ -93,6 +93,9 @@ export class CloudFoundryServerGroupConfigurationSettings
                 onExpectedArtifactSelected={this.onExpectedArtifactSelected}
                 onArtifactEdited={this.onArtifactChanged}
                 excludedArtifactTypePatterns={this.excludedArtifactTypePatterns}
+                renderLabel={(field: React.ReactNode) => {
+                  return <FormikConfigField label={'Artifact'}>{field}</FormikConfigField>;
+                }}
               />
             </div>
           </div>

diff --git a/app/scripts/modules/core/src/artifact/react/StageArtifactSelector.tsx b/app/scripts/modules/core/src/artifact/react/StageArtifactSelector.tsx
@@ -21,6 +21,8 @@ export interface IStageArtifactSelectorProps {
 
   excludedArtifactIds?: string[];
   excludedArtifactTypePatterns?: RegExp[];
+
+  renderLabel?: (reactNode: React.ReactNode) => React.ReactNode;
 }
 
 export interface IStageArtifactSelectorState {
@@ -87,7 +89,7 @@ export class StageArtifactSelector extends React.Component<IStageArtifactSelecto
   };
 
   public render() {
-    const { pipeline, stage, expectedArtifactId, artifact, excludedArtifactIds } = this.props;
+    const { pipeline, stage, expectedArtifactId, artifact, excludedArtifactIds, renderLabel } = this.props;
     const expectedArtifacts = ExpectedArtifactService.getExpectedArtifactsAvailableToStage(stage, pipeline);
     const expectedArtifact = expectedArtifactId
       ? expectedArtifacts.find(a => a.id === expectedArtifactId)
@@ -106,19 +108,21 @@ export class StageArtifactSelector extends React.Component<IStageArtifactSelecto
       ),
     ];
 
+    const select = (
+      <Select
+        clearable={false}
+        options={options}
+        value={expectedArtifact}
+        optionRenderer={this.renderArtifact}
+        valueRenderer={this.renderArtifact}
+        onChange={this.onExpectedArtifactSelected}
+        placeholder="Select an artifact..."
+      />
+    );
+
     return (
       <>
-        <div className="sp-margin-m-bottom">
-          <Select
-            clearable={false}
-            options={options}
-            value={expectedArtifact}
-            optionRenderer={this.renderArtifact}
-            valueRenderer={this.renderArtifact}
-            onChange={this.onExpectedArtifactSelected}
-            placeholder="Select an artifact..."
-          />
-        </div>
+        <div className="sp-margin-m-bottom">{renderLabel ? renderLabel(select) : select}</div>
         {artifact && (
           <ArtifactEditor
             pipeline={pipeline}