stitch-ui/src/services/default/components/ActionEditRules.js

// TODO: proptypes
/* eslint-disable react/prop-types */
import React from "react";
import { connect } from "react-redux";
import * as svcActions from "../../actions";
import * as rulesActions from "../actions";
import { addAlert } from "../../../alert";
import { Button, PopoutWindow } from "../../../core";
import ActionRule from "./ActionRule";
import { findServiceDefinition, servicesByType } from "../../registry";

const alertKey = (svcName, ruleId) => `${svcName}/update_rule/${ruleId}`;

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

  addRule() {
    return this.props.addRule().then(this.props.reloadService);
  }

  saveRule(ruleId, rule) {
    return this.props
      .updateRule(ruleId, rule)
      .then(() =>
        this.props.addAlert(alertKey(this.props.svcname, ruleId), "Saved")
      )
      .then(() => this.props.reloadService())
      .catch(() => {});
  }

  render() {
    const {
      rules,
      ruleSaveState,
      deleteRule,
      discardChanges,
      setRuleWhen,
      setRuleAction,
      setRule
    } = this.props;
    const { service, actions, app } = this.props;
    const ruleSaveStateJS = ruleSaveState.toJS();
    const completer = findServiceDefinition(service.name, app.services)
      .ruleCompleter;
    return (
      <div>
        <div className="tabs-content-actions">
          <div className="tabs-content-actions-left">
            <Button primary small onClick={this.addRule}>
              Add Rule
            </Button>
          </div>
          <div className="tabs-content-actions-right">
            <PopoutWindow
              url={`/ref/${this.props.service.type}`}
              title={`${servicesByType.get(this.props.service.type)
                .displayName} Rules`}
            />
          </div>
        </div>
        {rules
          .entrySeq()
          .map(([ruleId, rule]) =>
            <ActionRule
              key={ruleId}
              rule={rule}
              completer={completer}
              discardChanges={() => discardChanges(ruleId)}
              ruleSaveState={ruleSaveStateJS[ruleId] || {}}
              setRule={ruleToSet => setRule(ruleId, ruleToSet)}
              setRuleWhen={value => setRuleWhen(ruleId, value)}
              setRuleAction={(value, enabled) =>
                setRuleAction(ruleId, value, enabled)}
              alertKey={alertKey(service.name, ruleId)}
              saveRule={ruleToSave => this.saveRule(ruleId, ruleToSave)}
              availableActions={actions}
              deleteRule={deleteRule}
            />
          )}
      </div>
    );
  }
}

const mapStateToProps = state => {
  const { rules } = state.service.serviceTypes.default;
  const { ruleSaveState } = state.service.base;

  return { rules, ruleSaveState };
};

const mapDispatchToProps = (dispatch, ownProps) => {
  const baseProps = svcActions.rulesEditMapper.mapDispatchToProps(
    dispatch,
    ownProps
  );
  return {
    ...baseProps,
    addAlert: (key, message) => dispatch(addAlert(key, message)),
    setRule: (ruleId, rule) => dispatch(rulesActions.setRule({ ruleId, rule })),
    discardChanges: ruleId => dispatch(rulesActions.discardChanges({ ruleId })),
    setRuleWhen: (ruleId, value) =>
      dispatch(rulesActions.setRuleWhen({ ruleId, value })),
    setRuleAction: (ruleId, action, enabled) =>
      dispatch(rulesActions.setRuleAction({ ruleId, action, enabled }))
  };
};

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