+ {/* Two subpages: one for creating version under existing pipeline and one for creating version under new pipeline */}
+
+ }
+ onChange={() =>
+ this.setState({
+ codeSourceUrl: '',
+ newPipeline: true,
+ pipelineDescription: '',
+ pipelineName: '',
+ pipelineVersionName: '',
+ })
+ }
+ />
+ }
+ onChange={() =>
+ this.setState({
+ codeSourceUrl: '',
+ newPipeline: false,
+ pipelineDescription: '',
+ pipelineName: '',
+ pipelineVersionName: '',
+ })
+ }
+ />
+
+
+ {/* Form for uploading new pipeline */}
+ {newPipeline === true && (
+
+ Upload pipeline with the specified package.
+
+
+
+
+ {/* Choose a local file for package or specify a url for package */}
+
+ {/* Different package explanation based on import method*/}
+ {this.state.importMethod === ImportMethod.LOCAL && (
+
+
+ Choose a pipeline package file from your computer, and give the pipeline a
+ unique name.
+
+ You can also drag and drop the file here.
+
+
+
+ )}
+ {this.state.importMethod === ImportMethod.URL && (
+
+ URL must be publicly accessible.
+
+
+ )}
+
+ {/* Different package input field based on import method*/}
+
+
}
+ onChange={() => this.setState({ importMethod: ImportMethod.LOCAL })}
+ />
+
+ {dropzoneActive && Drop files..
}
+
+
+
+ ),
+ readOnly: true,
+ style: {
+ maxWidth: 2000,
+ width: 455,
+ },
+ }}
+ />
+
+
+ }
+ onChange={() => this.setState({ importMethod: ImportMethod.URL })}
+ />
+
+
+ {/* Fill pipeline version code source url */}
+
+
+ )}
+
+ {/* Form for uploading new pipeline version */}
+ {newPipeline === false && (
+
+
+ Upload pipeline version with the specified package.
+
+ {/* Select pipeline */}
+
+
+
+ ),
+ readOnly: true,
+ }}
+ />
+
+
+ {/* Set pipeline version name */}
+
+
+ {/* Fill pipeline package url */}
+
+
+ {/* Fill pipeline version code source url */}
+
+
+ )}
+
+ {/* Create pipeline or pipeline version */}
+
+
+
+
{validationError}
+
+