stitch-ui/src/services/components/DefaultStageEditor.js

import React from "react"; // eslint-disable-line no-unused-vars
import PropTypes from "prop-types";
import { Map } from "immutable";
import { PipelineStage, PipelineStageEditState } from "../../models";
import {
  Banner,
  Tooltip,
  RichJSONEditor,
  FormRow,
  FormRowInputGroup,
  FormRowLabelGroup,
  Switch,
  Button
} from "../../core";

export default class DefaultStageEditor extends React.Component {
  constructor(props) {
    super(props);
    this.onDoneEditing = this.onDoneEditing.bind(this);
    this.toggleLet = this.toggleLet.bind(this);
  }

  onDoneEditing() {
    const parsedArgs = this.props.editState.get("argsInput").parseInput();
    this.props.applyEditChange(x => x.set("argsInput", parsedArgs));

    let parsedLet;
    if (this.props.editState.get("letEnabled")) {
      parsedLet = this.props.editState.get("letInput").parseInput();
      this.props.applyEditChange(x => x.set("letInput", parsedLet));
    }

    if (
      parsedArgs.get("error") ||
      (parsedLet !== undefined && parsedLet.get("error"))
    ) {
      return Promise.reject();
    }
    let newStage = new PipelineStage({
      service: this.props.editState.get("service"),
      action: this.props.editState.get("action"),
      args: new Map(parsedArgs.data)
    });
    if (parsedLet) {
      newStage = newStage.set("let", new Map(parsedLet.data));
    }
    return this.props.onDoneEditing(newStage);
  }

  toggleLet(e) {
    this.props.applyEditChange(x => x.set("letEnabled", e.target.checked));
  }

  render() {
    const argsInputState = this.props.editState.get("argsInput") || {
      input: "",
      error: null
    };
    const letInputState = this.props.editState.get("letInput") || {
      input: "",
      error: null
    };

    return (
      <div>
        <div>
          <Banner message={argsInputState.error} error />
          <RichJSONEditor
            minLines={10}
            maxLines={10}
            id={"defaultEditor"}
            value={argsInputState.input}
            onChange={e =>
              this.props.applyEditChange(x =>
                x.setIn(["argsInput", "input"], e)
              )}
          />
        </div>
        <FormRow last>
          <FormRowLabelGroup compact>
            <label htmlFor="let" className="form-row-label">
              Bind data to <code>%%vars</code>
              <Tooltip
                dataFor="bind-data-tooltip"
                place="top"
                classNames="tooltip-indicator tooltip-indicator-small tooltip-indicator-secondary"
                effect="float"
              >
                Defines a variable for each key in the <code>let</code>{" "}
                component.<br />The component is evaluated for each input
                document.<br />To access parameters passed to the pipeline, you
                must bind parameters to variables to access them with a{" "}
                <code>$$vars</code> expansion.
              </Tooltip>
            </label>
          </FormRowLabelGroup>
          <FormRowInputGroup>
            <Switch
              name="bindlet"
              checked={this.props.editState.get("letEnabled") || false}
              onChange={this.toggleLet}
            />
          </FormRowInputGroup>
        </FormRow>
        {this.props.editState.get("letEnabled") &&
          <Banner message={letInputState.error} error />}
        {this.props.editState.get("letEnabled") &&
          <div>
            <RichJSONEditor
              minLines={10}
              maxLines={10}
              id={"defaultEditor"}
              value={letInputState.input || ""}
              onChange={e =>
                this.props.applyEditChange(x =>
                  x.setIn(["letInput", "input"], e)
                )}
            />
          </div>}
        <Button primary onClick={this.onDoneEditing}>
          Done
        </Button>
        <Button default onClick={this.props.onCancel}>
          Cancel
        </Button>
      </div>
    );
  }
}

/* eslint-disable react/forbid-prop-types */
DefaultStageEditor.propTypes = {
  editState: PropTypes.instanceOf(PipelineStageEditState),
  applyEditChange: PropTypes.func.isRequired,
  onDoneEditing: PropTypes.func.isRequired,
  onCancel: PropTypes.func.isRequired
};

DefaultStageEditor.defaultProps = {
  editState: null
};