stitch-ui/src/pipelineeditor/components/PipelineEditor.js

/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable react/no-array-index-key */
import React from "react"; // eslint-disable-line no-unused-vars
import PropTypes from "prop-types";
import { connect } from "react-redux";
import HTML5Backend from "react-dnd-html5-backend";
import { DragDropContext } from "react-dnd";
import { AlertContainer } from "../../alert";
import PipelineStageDisplay from "./PipelineStageDisplay";
import * as actions from "../actions";
import { FormRow, FormRowLabelGroup, FormRowInputGroup } from "../../core";

class pipelineEditor extends React.Component {
  constructor(props) {
    super(props);
    this.submit = this.submit.bind(this);
  }

  submit() {
    const updatedPipeline = this.props.pipeline.save();
    this.props.initPipeline(updatedPipeline);
    return updatedPipeline.error
      ? Promise.resolve()
      : this.props.onSubmit(updatedPipeline);
  }

  render() {
    const props = this.props;

    if (!props.pipeline) {
      return null;
    }

    return (
      <div className="pipeline-editor">
        {!props.noOutputType &&
          <FormRow>
            <FormRowLabelGroup>
              <label className="form-row-label" htmlFor="outputType">
                Output Type
              </label>
            </FormRowLabelGroup>
            <FormRowInputGroup>
              <select
                id="outputType"
                value={props.pipeline.output}
                onChange={e => props.setOutputType(e.target.value)}
              >
                <option value={"singleDoc"}>Single Document</option>
                <option value={"boolean"}>Boolean</option>
                <option value={"array"}>Array</option>
              </select>
            </FormRowInputGroup>
          </FormRow>}
        {props.pipeline.stages
          .map((stage, i) =>
            <PipelineStageDisplay
              services={props.services}
              key={i}
              index={i}
              stage={stage}
              editState={props.pipeline.stageEditStates.get(i)}
              pipelineKey={props.pipelineKey}
              removeStage={() => props.removeStage(i)}
              moveToIndex={toIndex => props.moveToIndex(i, toIndex)}
              setStage={s => props.setStage(i, s)}
              applyEditChange={m => props.applyEditChange(i, m)}
              openEditor={() => props.openEditor(i)}
              closeEditor={() => props.closeEditor(i)}
            />
          )
          .toArray()}
        <div
          className="pipeline-editor-lastrow-addstage button"
          onClick={props.addStage}
        >
          + Add Stage
        </div>
        {props.alertKey ? <AlertContainer alertKey={props.alertKey} /> : null}
      </div>
    );
  }
}

pipelineEditor.propTypes = {
  initPipeline: PropTypes.func.isRequired,
  onSubmit: PropTypes.func.isRequired,
  pipeline: PropTypes.object.isRequired // eslint-disable-line react/forbid-prop-types
};

const PipelineEditor = DragDropContext(HTML5Backend)(pipelineEditor);

const mapStateToProps = (state, ownProps) => {
  const pipeline = state.pipeline.pipelines.get(ownProps.pipelineKey);
  return { pipeline };
};

const mapDispatchToProps = (dispatch, ownProps) => {
  const { pipelineKey } = ownProps;
  return {
    initPipeline: pipelineObj =>
      dispatch(actions.initPipeline({ pipelineKey, pipelineObj })),
    addStage: () => dispatch(actions.addStageAction({ pipelineKey })),
    removeStage: index =>
      dispatch(actions.removeStageAction({ pipelineKey, index })),
    setOutputType: outputType =>
      dispatch(actions.setOutputTypeAction({ pipelineKey, outputType })),
    /* for stages */
    moveToIndex: (fromIndex, toIndex) =>
      dispatch(actions.moveStageAction({ pipelineKey, fromIndex, toIndex })),
    setStage: (index, stage) =>
      dispatch(actions.setStageAction({ pipelineKey, index, stage })),
    applyEditChange: (index, mutator) =>
      dispatch(actions.applyEditChange({ pipelineKey, index, mutator })),
    openEditor: index =>
      dispatch(actions.openEditorAction({ pipelineKey, index })),
    closeEditor: index =>
      dispatch(actions.closeEditorAction({ pipelineKey, index }))
  };
};

export default connect(mapStateToProps, mapDispatchToProps, null, {
  withRef: true
})(PipelineEditor);