Merge pull request #6970 from pivotal-cf/4295-trigger-directive-to-react

refactor(core): Convert most triggers from angular to react

app/scripts/modules/core/src/domain/ITrigger.ts

@@ -18,6 +18,7 @@ export interface IArtifactoryTrigger extends ITrigger {
 
 export interface IGitTrigger extends ITrigger {
   source: string;
+  secret?: string;
   project: string;
   slug: string;
   branch: string;
@@ -30,21 +31,30 @@ export interface IBuildTrigger extends ITrigger {
   buildNumber?: number;
   job: string;
   project: string;
+  propertyFile?: string;
   master: string;
   type: 'jenkins' | 'travis' | 'wercker' | 'concourse';
 }
 
+export interface IWerckerTrigger extends IBuildTrigger {
+  app: string;
+  pipeline: string;
+  type: 'wercker';
+}
+
 export interface IConcourseTrigger extends IBuildTrigger {
   // Concourse pipeline is represented by project
   team: string;
   jobName: string; // job will be the concatenation of team/pipeline/jobName
+  type: 'concourse';
 }
 
 export interface IPipelineTrigger extends ITrigger {
   application: string;
   parentExecution?: IExecution;
   parentPipelineId?: string;
   pipeline: string;
+  status: string[];
 }
 
 export interface ICronTrigger extends ITrigger {

app/scripts/modules/core/src/pipeline/config/triggers/BaseTrigger.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+
+import { Observable, Subject } from 'rxjs';
+
+import { ITrigger } from 'core/domain';
+import { SETTINGS } from 'core/config/settings';
+import { ServiceAccountReader } from 'core/serviceAccount/ServiceAccountReader';
+import { RunAsUser } from 'core/pipeline';
+
+export interface IBaseTriggerConfigProps {
+  triggerContents: React.ReactNode;
+  trigger: ITrigger;
+  triggerUpdated?: (trigger: ITrigger) => void;
+}
+
+export interface IBaseTriggerState {
+  serviceAccounts?: string[];
+}
+
+export class BaseTrigger extends React.Component<IBaseTriggerConfigProps, IBaseTriggerState> {
+  private destroy$ = new Subject();
+
+  constructor(props: IBaseTriggerConfigProps) {
+    super(props);
+    this.state = {
+      serviceAccounts: [],
+    };
+  }
+
+  public componentDidMount(): void {
+    if (SETTINGS.feature.fiatEnabled) {
+      Observable.fromPromise(ServiceAccountReader.getServiceAccounts())
+        .takeUntil(this.destroy$)
+        .subscribe(serviceAccounts => this.setState({ serviceAccounts }));
+    }
+  }
+
+  public componentWillUnmount(): void {
+    this.destroy$.next();
+  }
+
+  private onUpdateTrigger = (update: any) => {
+    this.props.triggerUpdated &&
+      this.props.triggerUpdated({
+        ...this.props.trigger,
+        ...update,
+      });
+  };
+
+  private renderRunAsUser = (): React.ReactNode => {
+    const { trigger } = this.props;
+    const { serviceAccounts } = this.state;
+    return (
+      <>
+        {SETTINGS.feature.fiatEnabled && serviceAccounts && (
+          <div className="form-group">
+            <RunAsUser
+              serviceAccounts={serviceAccounts}
+              onChange={(user: string) => this.onUpdateTrigger({ user })}
+              value={trigger.user}
+              selectColumns={6}
+            />
+          </div>
+        )}
+      </>
+    );
+  };
+
+  public render() {
+    const { triggerContents } = this.props;
+    const { renderRunAsUser } = this;
+    return (
+      <>
+        {triggerContents}
+        {renderRunAsUser()}
+      </>
+    );
+  }
+}

app/scripts/modules/core/src/pipeline/config/triggers/RunAsUser.tsx

@@ -24,7 +24,7 @@ export class RunAsUser extends React.Component<IRunAsUserProps> {
     return (
       <div>
         <div className="col-md-3 sm-label-right">
-          Run As User
+          <span className="label-text">Run As User </span>
           <HelpField id="pipeline.config.trigger.runAsUser" />
         </div>
         <div className={'col-md-' + selectColumns}>

app/scripts/modules/core/src/pipeline/config/triggers/artifactory/ArtifactoryTrigger.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import Select, { Option } from 'react-select';
+
+import { Observable, Subject } from 'rxjs';
+
+import { IArtifactoryTrigger } from 'core/domain/ITrigger';
+import { BaseTrigger } from 'core/pipeline';
+import { ArtifactoryReaderService } from './artifactoryReader.service';
+import { Application } from 'core';
+
+export interface IArtifactoryTriggerConfigProps {
+  trigger: IArtifactoryTrigger;
+  pipelineId: string;
+  application: Application;
+  triggerUpdated: (trigger: IArtifactoryTrigger) => void;
+}
+
+export interface IArtifactoryTriggerConfigState {
+  artifactorySearchNames: string[];
+}
+
+export class ArtifactoryTrigger extends React.Component<
+  IArtifactoryTriggerConfigProps,
+  IArtifactoryTriggerConfigState
+> {
+  private destroy$ = new Subject();
+
+  constructor(props: IArtifactoryTriggerConfigProps) {
+    super(props);
+    this.state = {
+      artifactorySearchNames: [],
+    };
+  }
+
+  public componentDidMount() {
+    Observable.fromPromise(ArtifactoryReaderService.getArtifactoryNames())
+      .takeUntil(this.destroy$)
+      .subscribe((artifactorySearchNames: string[]) => {
+        this.setState({ artifactorySearchNames });
+      });
+  }
+
+  public componentWillUnmount(): void {
+    this.destroy$.next();
+  }
+
+  private onUpdateTrigger = (update: any) => {
+    this.props.triggerUpdated &&
+      this.props.triggerUpdated({
+        ...this.props.trigger,
+        ...update,
+      });
+  };
+
+  private ArtifactoryTriggerContents = () => {
+    const { artifactorySearchNames } = this.state;
+    const { artifactorySearchName } = this.props.trigger;
+    return (
+      <>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            <span className="label-text">Artifactory Name</span>
+          </div>
+          <div className="col-md-6">
+            <Select
+              value={artifactorySearchName}
+              placeholder="Select Artifactory search name..."
+              onChange={(option: Option<string>) => this.onUpdateTrigger({ artifactorySearchName: option.value })}
+              options={artifactorySearchNames.map((name: string) => ({ label: name, value: name }))}
+              clearable={false}
+            />
+          </div>
+        </div>
+      </>
+    );
+  };
+
+  public render() {
+    const { ArtifactoryTriggerContents } = this;
+    return <BaseTrigger {...this.props} triggerContents={<ArtifactoryTriggerContents />} />;
+  }
+}

app/scripts/modules/core/src/pipeline/config/triggers/artifactory/artifactoryTrigger.ts → app/scripts/modules/core/src/pipeline/config/triggers/artifactory/artifactory.trigger.ts

@@ -1,12 +1,12 @@
 import { Registry } from 'core/registry';
-import { ArtifactoryTriggerConfig } from './ArtifactoryTriggerConfig';
+import { ArtifactoryTrigger } from './ArtifactoryTrigger';
 import { ArtifactTypePatterns, excludeAllTypesExcept } from 'core/artifact';
 
 Registry.pipeline.registerTrigger({
   label: 'Artifactory',
   description: 'Executes the pipeline on an Artifactory repo update',
   key: 'artifactory',
-  component: ArtifactoryTriggerConfig,
+  component: ArtifactoryTrigger,
   validators: [],
   excludedArtifactTypePatterns: excludeAllTypesExcept(ArtifactTypePatterns.MAVEN_FILE),
 });