New Contributor Workshop

myStage.ts

// Path: app/scripts/modules/core/src/pipeline/config/stages/myStage/
import { Registry } from 'core/registry';
import { ExecutionDetailsTasks } from 'core';

import { MyStageConfig } from './myStageConfig';
import { MyStageExecutionDetails } from './myStageExecutionDetails';

Registry.pipeline.registerStage({
  label: 'My Stage',
  description: 'This stage doesn\'t do much, but we can at least see our stage.',
  key: 'mySpecial',
  component: MyStageConfig,
  executionDetailsSections: [MyStageExecutionDetails, ExecutionDetailsTasks],
  producesArtifacts: true,
  validators: [],
});

myStageConfig.tsx

// Path: app/scripts/modules/core/src/pipeline/config/stages/myStage/
import React from 'react';
import { IStageConfigProps } from '../common';

export class MyStageConfig extends React.Component<IStageConfigProps> {
  constructor(props: IStageConfigProps) {
    super(props);
  }

  public componentDidMount(): void {
    // This is where your network requests would go!
  }

  public render() {
    return (
      <span>
      </span>
    );
  }
}

myStageExecutionDetails.tsx

// Path: app/scripts/modules/core/src/pipeline/config/stages/myStage/
import React from 'react';

import { ExecutionDetailsSection, IExecutionDetailsSectionProps } from '../common';

export class MyStageExecutionDetails extends React.Component<IExecutionDetailsSectionProps> {

  public static title = 'My Stage Status';

  constructor(props: IExecutionDetailsSectionProps) {
    super(props);
    this.state = {};
  }

  public render() {
    const { stage, name, current, } = this.props;
    const { outputs } = stage;

    return (
      <ExecutionDetailsSection name={name} current={current}>
          <dl className="dl-narrow dl-horizontal">
            { outputs.stage_start_status &&
            <>
              <dt>Start</dt>
              <dd>{outputs.stage_start_status}</dd>
            </>
            }
            { outputs.stage_end_status &&
            <>
              <dt>End</dt>
              <dd>{outputs.stage_end_status}</dd>
            </>
            }
          </dl>
      </ExecutionDetailsSection>
    );
  }
}

pipeline.module.ts

// Path: app/scripts/modules/core/src/pipeline/pipeline.module.ts
// other imports
import './config/stages/myStage/myStage';
// other imports