stitch-ui/src/namedpipelines/components/NamedPipelines.js

// TODO proptypes
/* eslint-disable react/prop-types */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable react/no-array-index-key */
import React from "react";
import { connect } from "react-redux";
import {
  Tooltip,
  SplitPanel,
  SplitPanelContainer,
  EditList,
  EditListHeader
} from "../../core";
import * as actions from "../actions";
import * as pipelineActions from "../../pipelineeditor/actions";
import { addAlert } from "../../alert";
import NamedPipelineEditor from "./NamedPipelineEditor";
import NamedPipelineDisplay from "./NamedPipelineDisplay";
import Confirm from "../../core/confirm";
import { NamedPipeline } from "../../models";

const PIPELINE_KEY = "namedpipeline";

class NamedPipelines extends React.Component {
  constructor(props) {
    super(props);
    this.savePipeline = this.savePipeline.bind(this);
    this.showNewNamedPipelineForm = this.showNewNamedPipelineForm.bind(this);
    this.remove = this.remove.bind(this);
  }

  componentDidMount() {
    this.props.setNotEditing();
    this.props.loadNamedPipelines();
  }

  remove() {
    return Confirm.confirm(
      "Are you sure you want to remove this named pipeline?"
    ).then(
      () =>
        this.props
          .removeNamedPipeline((this.props.editing || {}).name)
          .then(this.props.loadNamedPipelines)
          .then(() => this.props.setNotEditing()),
      () => Promise.resolve()
    );
  }

  savePipeline(namedPipeline) {
    const raw = namedPipeline.toRaw();
    return this.props
      .updateNamedPipeline(namedPipeline.name, raw)
      .then(() => this.props.loadNamedPipelines())
      .then(() => this.props.setEditing(namedPipeline.name, namedPipeline))
      .then(() => this.props.addAlert("namedpipeline", "Saved"));
  }

  showNewNamedPipelineForm() {
    this.props.setEditing("", actions.defaultNamedPipeline);
  }

  render() {
    const {
      addParameter,
      editing,
      editingPipeline,
      savingPipeline,
      namedPipelines,
      removeParameter,
      savePipelineError,
      services,
      setCanEval,
      setEditing,
      setPrivate,
      discardChanges,
      setSavePipelineError,
      setSkipRules,
      updateCanEvalInput,
      updateParameter
    } = this.props;

    return (
      <div>
        <div className="section-header">
          <div className="section-header-title">
            <div className="section-header-title-text">
              Named Pipelines
              <Tooltip
                dataFor="named-pipeline-tooltip"
                place="right"
                classNames="tooltip-indicator tooltip-indicator-normal tooltip-indicator-primary"
                effect="solid"
              >
                Named Pipelines are reusable pipelines that perform work and
                return some value;<br /> they can be called from inside rules,
                webhooks, or even other named pipelines.
              </Tooltip>
            </div>
          </div>
        </div>
        <div className="tabs-content">
          <SplitPanelContainer>
            <SplitPanel left>
              <EditListHeader>
                <h3>Pipelines</h3>
                <button
                  className="button button-is-small button-is-primary"
                  onClick={this.showNewNamedPipelineForm}
                >
                  New Pipeline
                </button>
              </EditListHeader>
              <EditList>
                {namedPipelines
                  .map((v, k) =>
                    <NamedPipelineDisplay
                      key={k}
                      name={k}
                      editing={editing}
                      setEditing={() => {
                        setEditing(k, NamedPipeline.fromRaw(v.value));
                      }}
                    />
                  )
                  .toArray()}
              </EditList>
            </SplitPanel>
            {editing &&
              <NamedPipelineEditor
                error={savePipelineError}
                savingPipeline={savingPipeline}
                editingPipeline={editingPipeline}
                removeParameter={removeParameter}
                updateParameter={updateParameter}
                discardChanges={discardChanges}
                setSavePipelineError={setSavePipelineError}
                editing={editing}
                addParameter={addParameter}
                setSkipRules={setSkipRules}
                setPrivate={setPrivate}
                updateCanEvalInput={updateCanEvalInput}
                setCanEval={setCanEval}
                remove={this.remove}
                savePipeline={this.savePipeline}
                services={services}
              />}
          </SplitPanelContainer>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  const { services } = state.app.root;
  const {
    namedPipelines,
    editing,
    savePipelineError,
    savingPipeline
  } = state.namedPipelines;
  const editingPipeline = state.pipeline.pipelines.get(PIPELINE_KEY);
  return {
    namedPipelines,
    savingPipeline,
    editing,
    services,
    savePipelineError,
    editingPipeline
  };
};

const mapDispatchToProps = (dispatch, ownProps) => ({
  addAlert: (k, m) => dispatch(addAlert(k, m)),
  setNotEditing: () => {
    dispatch(actions.setEditing(null));
  },
  setSkipRules: skipRules => dispatch(actions.setSkipRules({ skipRules })),
  setPrivate: isPrivate => dispatch(actions.setPrivate({ isPrivate })),
  updateCanEvalInput: value => dispatch(actions.updateCanEvalInput({ value })),
  setCanEval: canEval => dispatch(actions.setCanEval({ canEval })),
  removeParameter: index => dispatch(actions.removeParameter({ index })),
  discardChanges: () => {
    dispatch(actions.discardChanges());
    dispatch(pipelineActions.discardChanges({ pipelineKey: "namedpipeline" }));
  },
  addParameter: () => dispatch(actions.addParameter()),
  updateParameter: (index, parameter) =>
    dispatch(actions.updateParameter({ index, parameter })),
  setEditing: (name, namedPipeline) => {
    dispatch(
      actions.setEditing({ name, value: namedPipeline.set("name", name) })
    );

    dispatch(
      pipelineActions.initPipeline({
        pipelineKey: "namedpipeline",
        pipelineObj: namedPipeline.pipeline
      })
    );
  },
  setSavePipelineError: e => dispatch(actions.setSavePipelineErrorAction(e)),
  loadNamedPipelines: () =>
    dispatch(actions.loadPipelines(ownProps.app.groupId, ownProps.app._id)),
  updateNamedPipeline: (id, value) =>
    dispatch(
      actions.updatePipeline(ownProps.app.groupId, ownProps.app._id, id, value)
    ),
  removeNamedPipeline: id =>
    dispatch(actions.removePipeline(ownProps.app.groupId, ownProps.app._id, id))
});

export default connect(mapStateToProps, mapDispatchToProps)(NamedPipelines);