stitch-ui/src/values/components/Values.js

/* eslint-disable no-underscore-dangle */
/* eslint-disable react/no-array-index-key */
import React from "react";
import PropTypes from "prop-types";
import { OrderedMap, Map } from "immutable";
import { connect } from "react-redux";
import { Value } from "../../models";
import { addAlert } from "../../alert";
import { Tooltip } from "../../core";
import * as actions from "../actions";
import ValueForm from "./ValueForm";
import Confirm from "../../core/confirm";

const alertKey = k => `edit-value/${k}`;

class Values extends React.Component {
  constructor(props) {
    super(props);
    this.create = this.create.bind(this);
    this.save = this.save.bind(this);
  }

  componentDidMount() {
    this.props.loadValues();
  }

  save(name, { valueJson, isPrivate }) {
    return this.props
      .updateValue(name, { id: name, value: valueJson, private: isPrivate })
      .then(() => this.props.addAlert(`edit-value/${name}`, "Saved"))
      .then(() => this.props.loadValues());
  }

  create(name, { valueJson, isPrivate }) {
    this.props.setNameError(null);
    return this.props
      .updateValue(name, { id: name, value: valueJson, private: isPrivate })
      .then(() => this.props.addAlert("value-new", "Saved"))
      .then(() => this.props.loadValues());
  }

  render() {
    const {
      app,
      values,
      removeValue,
      newValue,
      loadValues,
      nameError,
      saveErrors
    } = this.props;

    const {
      setValueInput,
      setNameInput,
      setPrivateChecked,
      discardValueChanges,
      discardNewValueChanges,
      setNewValueDirty,
      setNewPrivateChecked,
      setNameError,
      setNewValueInput,
      setNewValue,
      setValue,
      name
    } = this.props;

    return (
      <div>
        <div className="section-header">
          <div className="section-header-title">
            <div className="section-header-title-text">
              Values
              <Tooltip
                dataFor="values-tooltip"
                place="right"
                classNames="tooltip-indicator tooltip-indicator-normal tooltip-indicator-primary"
                effect="solid"
              >
                Values are constants that you can reference from a rule,
                webhook, or named pipeline using the <code>%%values</code>{" "}
                expansion.
              </Tooltip>
            </div>
          </div>
        </div>
        <div className="tabs-content">
          {values
            .map(
              (v, k) =>
                k &&
                <ValueForm
                  key={k}
                  name={k}
                  value={v}
                  setNameError={() => {}}
                  saveError={saveErrors.get([app._id, k].join("/"))}
                  setValue={value => setValue(k, value)}
                  setValueInput={value => setValueInput(k, value)}
                  discardValueChanges={() => discardValueChanges(k)}
                  setPrivateChecked={isPrivate =>
                    setPrivateChecked(k, isPrivate)}
                  alertKey={alertKey(k)}
                  remove={() =>
                    Confirm.confirm(
                      `Are you sure you want to delete ${k}?`
                    ).then(
                      () => removeValue(k).then(loadValues),
                      () => Promise.resolve()
                    )}
                  saveValue={this.save}
                />
            )
            .toArray()}
          <ValueForm
            form="new-value"
            name={name}
            saveError={saveErrors.get([app._id, name].join("/"))}
            nameInput
            value={newValue}
            setNameError={setNameError}
            setNameInput={setNameInput}
            setPrivateChecked={setNewPrivateChecked}
            setValueInput={setNewValueInput}
            setNewValueDirty={setNewValueDirty}
            setValue={setNewValue}
            discardValueChanges={discardNewValueChanges}
            nameError={nameError}
            saveValue={this.create}
            alertKey={"value-new"}
          />
        </div>
      </div>
    );
  }
}

Values.propTypes = {
  app: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
  values: PropTypes.instanceOf(OrderedMap).isRequired,
  removeValue: PropTypes.func.isRequired,
  newValue: PropTypes.instanceOf(Value),
  loadValues: PropTypes.func.isRequired,
  nameError: PropTypes.string,
  saveErrors: PropTypes.instanceOf(Map),
  updateValue: PropTypes.func.isRequired,
  setValueInput: PropTypes.func.isRequired,
  setNameInput: PropTypes.func.isRequired,
  setPrivateChecked: PropTypes.func.isRequired,
  setNewPrivateChecked: PropTypes.func.isRequired,
  setNameError: PropTypes.func.isRequired,
  setNewValueInput: PropTypes.func.isRequired,
  setNewValue: PropTypes.func.isRequired,
  setValue: PropTypes.func.isRequired,
  discardValueChanges: PropTypes.func.isRequired,
  discardNewValueChanges: PropTypes.func.isRequired,
  setNewValueDirty: PropTypes.func.isRequired,
  name: PropTypes.string.isRequired,
  addAlert: PropTypes.func.isRequired
};

Values.defaultProps = {
  newValue: new Value({}),
  nameError: "",
  saveErrors: new Map()
};

const mapStateToProps = state => {
  const { saveErrors, values, name, newValue, nameError } = state.values;
  return { values, name, nameError, newValue, saveErrors };
};

const mapDispatchToProps = (dispatch, ownProps) => ({
  addAlert: (k, m) => dispatch(addAlert(k, m)),
  setValueFormError: (id, error) =>
    dispatch(actions.setValueFormErrorAction({ id, error })),
  loadValues: () =>
    dispatch(actions.loadValues(ownProps.app.groupId, ownProps.app._id)),
  updateValue: (id, value) =>
    dispatch(
      actions.updateValue(ownProps.app.groupId, ownProps.app._id, id, value)
    ),
  removeValue: id =>
    dispatch(actions.removeValue(ownProps.app.groupId, ownProps.app._id, id)),
  setValue: (id, value) => dispatch(actions.setValue({ id, value })),
  setValueInput: (id, value) => dispatch(actions.setValueInput({ id, value })),
  setNameInput: value => dispatch(actions.setNameInput(value)),
  setPrivateChecked: (id, isPrivate) =>
    dispatch(actions.setPrivateChecked({ id, isPrivate })),
  setNewPrivateChecked: isPrivate =>
    dispatch(actions.setNewPrivateChecked({ isPrivate })),
  setNameError: error => dispatch(actions.setNameError(error)),
  setNewValueInput: value => dispatch(actions.setNewValueInput({ value })),
  setNewValue: value => dispatch(actions.setNewValue(value)),
  setNewValueDirty: dirty => dispatch(actions.setNewValueDirty(dirty)),
  discardValueChanges: id => dispatch(actions.discardValueChanges({ id })),
  discardNewValueChanges: () => dispatch(actions.discardNewValueChanges())
});

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