feat(docker): allow extra inline help on tag selector (#7143)

spinnaker · Jun 28, 2019 · e08e36f · e08e36f
1 parent 422be22
commit e08e36f
Showing 1 changed file with 24 additions and 11 deletions.
diff --git a/app/scripts/modules/docker/src/image/DockerImageAndTagSelector.tsx b/app/scripts/modules/docker/src/image/DockerImageAndTagSelector.tsx
@@ -39,6 +39,7 @@ export interface IDockerImageAndTagSelectorProps {
 export interface IDockerImageAndTagSelectorState {
   accountOptions: Array<Option<string>>;
   switchedManualWarning: string;
+  missingFields?: string[];
   imagesLoaded: boolean;
   imagesLoading: boolean;
   organizationOptions: Array<Option<string>>;
@@ -293,6 +294,7 @@ export class DockerImageAndTagSelector extends React.Component<
       if (!tagFound) {
         missingFields.push('tag');
       }
+      newState.missingFields = missingFields;
       newState.switchedManualWarning = `Could not find ${missingFields.join(' or ')}, switched to manual entry`;
     } else if (!imageId || !imageId.includes('${')) {
       this.synchronizeChanges(
@@ -402,7 +404,7 @@ export class DockerImageAndTagSelector extends React.Component<
       const newFields = DockerImageUtils.splitImageId(this.props.imageId || '');
       this.props.onChange(newFields);
       if (this.state.switchedManualWarning) {
-        this.setState({ switchedManualWarning: undefined });
+        this.setState({ switchedManualWarning: undefined, missingFields: undefined });
       }
     }
     this.setState({ defineManually });
@@ -425,6 +427,7 @@ export class DockerImageAndTagSelector extends React.Component<
     const {
       accountOptions,
       switchedManualWarning,
+      missingFields,
       imagesLoading,
       lookupType,
       organizationOptions,
@@ -467,7 +470,14 @@ export class DockerImageAndTagSelector extends React.Component<
         <div className="sp-formItem__right">
           <div className="messageContainer warningMessage">
             <i className="fa icon-alert-triangle" />
-            <div className="message">{switchedManualWarning}</div>
+            <div className="message">
+              {switchedManualWarning}
+              {(missingFields || []).map(f => (
+                <div>
+                  <HelpField expand={true} key={f} id={`pipeline.config.docker.trigger.missing.${f}`} />
+                </div>
+              ))}
+            </div>
           </div>
         </div>
       </div>
@@ -638,15 +648,18 @@ export class DockerImageAndTagSelector extends React.Component<
                       required={true}
                     />
                   ) : (
-                    <Select
-                      value={tag || ''}
-                      disabled={imagesLoading || !repository}
-                      isLoading={imagesLoading}
-                      onChange={(o: Option<string>) => this.valueChanged('tag', o ? o.value : undefined)}
-                      options={tagOptions}
-                      placeholder="No tag"
-                      required={true}
-                    />
+                    <>
+                      <Select
+                        value={tag || ''}
+                        disabled={imagesLoading || !repository}
+                        isLoading={imagesLoading}
+                        onChange={(o: Option<string>) => this.valueChanged('tag', o ? o.value : undefined)}
+                        options={tagOptions}
+                        placeholder="No tag"
+                        required={true}
+                      />
+                      <HelpField id="pipeline.config.docker.trigger.tag.additionalInfo" expand={true} />
+                    </>
                   )}
                 </span>
               </div>