stitch-ui/src/services/mongodb/components/FilterRule.js

/* eslint-disable react/prop-types */
import React from "react";
import classNames from "classnames";
import {
  Tooltip,
  RichJSONEditor,
  Banner,
  Button,
  FormRowLabelGroup
} from "../../../core";

export default function FilterRule(props) {
  const {
    filter,
    removeFilter,
    discardChanges,
    setFilterMatchInput,
    setFilterWhenInput
  } = props;
  return (
    <div className="filter-entry-wrapper">
      <div
        className={classNames("filter-entry", {
          "filter-entry-is-dirty": filter.dirty
        })}
      >
        <div className="filter-entry-header">
          <Button small default onClick={removeFilter}>
            Delete
          </Button>
        </div>
        <div className="filter-entry-when">
          <FormRowLabelGroup>
            <label htmlFor="when">
              WHEN
              <Tooltip
                dataFor="when"
                place="top"
                classNames="tooltip-indicator tooltip-indicator-small tooltip-indicator-secondary"
                effect="float"
              >
                The syntax for the When condition is a JSON document. MongoDB
                expression operators (with the exception of the %text and the
                geospatial operators) are available.
              </Tooltip>
            </label>
            <Banner small message={filter.when.error} error icon />
          </FormRowLabelGroup>
          <div className="filter-entry-editor">
            <RichJSONEditor
              minLines={5}
              maxLines={10}
              onChange={setFilterWhenInput}
              value={filter.when.input}
            />
          </div>
        </div>
        <div className="filter-entry-match">
          <FormRowLabelGroup>
            <label htmlFor="match">
              MATCH EXPRESSION
              <Tooltip
                dataFor="when"
                place="top"
                classNames="tooltip-indicator tooltip-indicator-small tooltip-indicator-secondary"
                effect="float"
              >
                The syntax for the Match Expression filter is similar to the
                MongoDB query predicate. MongoDB expression operators (with the
                exception of the %text and the geospatial operators) are
                available.
              </Tooltip>
            </label>
            <Banner small message={filter.match.error} error icon />
          </FormRowLabelGroup>
          <div className="filter-entry-editor">
            <RichJSONEditor
              minLines={5}
              maxLines={10}
              onChange={setFilterMatchInput}
              value={filter.match.input}
            />
          </div>
        </div>
        {filter.dirty &&
          <div className="discard">
            <div className="discard-modified">Filter Modified</div>
            <div className="discard-controls">
              <Button small default onClick={discardChanges}>
                Discard Changes
              </Button>
            </div>
          </div>}
      </div>
    </div>
  );
}

FilterRule.propTypes = {};