From cfb2a51e906c1b2cf50280413fab4db06ba8ef05 Mon Sep 17 00:00:00 2001
From: Chris Berry <anotherchrisberry@gmail.com>
Date: Wed, 15 May 2019 15:48:46 -0500
Subject: [PATCH] fix(core): do not validate pipeline configs before
 initialization (#7003)

* fix(core): do not validate pipeline configs before initialization

* refactor(core): clean up old code in configure projects modal
---
 .../src/projects/configure/Applications.tsx   |  7 ----
 .../configure/ConfigureProjectModal.tsx       | 19 +--------
 .../core/src/projects/configure/Pipelines.tsx | 40 ++++++++++++++-----
 3 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/app/scripts/modules/core/src/projects/configure/Applications.tsx b/app/scripts/modules/core/src/projects/configure/Applications.tsx
index 3452f8e6bb0..60264e3bd2b 100644
--- a/app/scripts/modules/core/src/projects/configure/Applications.tsx
+++ b/app/scripts/modules/core/src/projects/configure/Applications.tsx
@@ -9,7 +9,6 @@ import { FormikApplicationsPicker } from 'core/projects/configure/FormikApplicat
 export interface IApplicationsProps {
   formik: FormikProps<IProject>;
   allApplications: string[];
-  onApplicationsChanged: (applications: string[]) => void;
 }
 
 export class Applications extends React.Component<IApplicationsProps> implements IWizardPageComponent<IProject> {
@@ -30,17 +29,11 @@ export class Applications extends React.Component<IApplicationsProps> implements
     } as any;
   }
 
-  public componentDidMount() {
-    const apps = getIn(this.props.formik.values, 'config.applications', []);
-    this.props.onApplicationsChanged && this.props.onApplicationsChanged(apps);
-  }
-
   public componentDidUpdate(prevProps: IApplicationsProps) {
     const prevApps = getIn(prevProps.formik.values, 'config.applications', []);
     const nextApps = getIn(this.props.formik.values, 'config.applications', []);
 
     if (!isEqual(prevApps, nextApps)) {
-      this.props.onApplicationsChanged && this.props.onApplicationsChanged(nextApps);
       // Remove any pipelines associated with the applications removed.
       const existingPipelineConfigs: IProjectPipeline[] = getIn(this.props.formik.values, 'config.pipelineConfigs', []);
       const newPipelineConfigs = existingPipelineConfigs.filter(({ application }) => nextApps.includes(application));
diff --git a/app/scripts/modules/core/src/projects/configure/ConfigureProjectModal.tsx b/app/scripts/modules/core/src/projects/configure/ConfigureProjectModal.tsx
index 670db063eef..edfb7c74aae 100644
--- a/app/scripts/modules/core/src/projects/configure/ConfigureProjectModal.tsx
+++ b/app/scripts/modules/core/src/projects/configure/ConfigureProjectModal.tsx
@@ -27,7 +27,6 @@ export interface IConfigureProjectModalState {
   allAccounts: IAccount[];
   allProjects: IProject[];
   allApplications: IApplicationSummary[];
-  configuredApps: string[];
   loading: boolean;
   taskMonitor?: TaskMonitor;
 }
@@ -43,7 +42,6 @@ export class ConfigureProjectModal extends React.Component<IConfigureProjectModa
     allAccounts: [],
     allProjects: [],
     allApplications: [],
-    configuredApps: [],
   };
 
   public static show(props?: IConfigureProjectModalProps): Promise<any> {
@@ -67,14 +65,8 @@ export class ConfigureProjectModal extends React.Component<IConfigureProjectModa
     return ReactModal.show(ConfigureProjectModal, projectProps, modalProps);
   }
 
-  private handleApplicationsChanged = (configuredApps: string[]) => {
-    this.setState({ configuredApps });
-  };
-
   public componentDidMount() {
-    const { projectConfiguration } = this.props;
-    const configuredApps = (projectConfiguration && projectConfiguration.config.applications) || [];
-    Promise.all([this.initialFetch()]).then(() => this.setState({ loading: false, configuredApps }));
+    this.initialFetch().then(() => this.setState({ loading: false }));
   }
 
   private submit = (project: IProject) => {
@@ -146,14 +138,7 @@ export class ConfigureProjectModal extends React.Component<IConfigureProjectModa
               label="Applications"
               wizard={wizard}
               order={nextIdx()}
-              render={({ innerRef }) => (
-                <Applications
-                  ref={innerRef}
-                  formik={formik}
-                  allApplications={appNames}
-                  onApplicationsChanged={this.handleApplicationsChanged}
-                />
-              )}
+              render={({ innerRef }) => <Applications ref={innerRef} formik={formik} allApplications={appNames} />}
             />
 
             <WizardPage
diff --git a/app/scripts/modules/core/src/projects/configure/Pipelines.tsx b/app/scripts/modules/core/src/projects/configure/Pipelines.tsx
index 72414051277..c210922b5db 100644
--- a/app/scripts/modules/core/src/projects/configure/Pipelines.tsx
+++ b/app/scripts/modules/core/src/projects/configure/Pipelines.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FieldArray, FormikErrors, FormikProps, getIn } from 'formik';
-import { chain, each, get, isEqual } from 'lodash';
+import { chain, get, isEqual } from 'lodash';
 
 import { PipelineConfigService } from 'core/pipeline';
 import { FormikFormField, ReactSelectInput, StringsAsOptions } from 'core/presentation';
@@ -16,6 +16,7 @@ export interface IPipelinesState {
   appsPipelines: {
     [appName: string]: IPipeline[];
   };
+  initialized: boolean;
 }
 
 export class Pipelines extends React.Component<IPipelinesProps, IPipelinesState>
@@ -24,15 +25,16 @@ export class Pipelines extends React.Component<IPipelinesProps, IPipelinesState>
 
   public state: IPipelinesState = {
     appsPipelines: {},
+    initialized: false,
   };
 
   public validate = (value: IProject): FormikErrors<IProject> => {
     const projectApplications = (value.config && value.config.applications) || [];
-    const { appsPipelines } = this.state;
+    const { appsPipelines, initialized } = this.state;
 
-    if (value.config && value.config.pipelineConfigs && value.config.pipelineConfigs.length) {
+    if (initialized && value.config && value.config.pipelineConfigs && value.config.pipelineConfigs.length) {
       const pipelineConfigErrors = value.config.pipelineConfigs.map(config => {
-        const pipelineIdsForApp = (appsPipelines[config.application] || []).map(p => p.id);
+        const pipelineIdsForApp = appsPipelines[config.application].map(p => p.id);
 
         if (!config.application) {
           return { application: 'Application must be specified' };
@@ -71,12 +73,20 @@ export class Pipelines extends React.Component<IPipelinesProps, IPipelinesState>
       .filter(appName => appName && !this.state.appsPipelines[appName])
       .value();
 
-    each(appsToFetch, appName => {
-      PipelineConfigService.getPipelinesForApplication(appName).then(pipelines =>
-        this.setState({
-          appsPipelines: { ...this.state.appsPipelines, [appName]: pipelines },
-        }),
-      );
+    const appsPipelines: { [appName: string]: IPipeline[] } = { ...this.state.appsPipelines };
+
+    Promise.all(
+      appsToFetch.map(appName => {
+        return PipelineConfigService.getPipelinesForApplication(appName)
+          .then(pipelines => {
+            appsPipelines[appName] = pipelines;
+          })
+          .catch(() => {
+            appsPipelines[appName] = [];
+          });
+      }),
+    ).then(() => {
+      this.setState({ appsPipelines, initialized: true });
     });
   };
 
@@ -91,7 +101,15 @@ export class Pipelines extends React.Component<IPipelinesProps, IPipelinesState>
   }
 
   public render() {
-    const { appsPipelines } = this.state;
+    const { appsPipelines, initialized } = this.state;
+
+    if (!initialized) {
+      return (
+        <div style={{ height: '200px' }}>
+          <Spinner size="medium" />
+        </div>
+      );
+    }
 
     const tableHeader = (
       <tr>