fleet/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx

import React, { Component } from "react";
import PropTypes from "prop-types";
import { pull } from "lodash";

import KolideIcon from "components/icons/KolideIcon";
import Button from "components/buttons/Button";
import Dropdown from "components/forms/fields/Dropdown";
import Form from "components/forms/Form";
import formFieldInterface from "interfaces/form_field";
import InputField from "components/forms/fields/InputField";
import validate from "components/forms/ConfigurePackQueryForm/validate";

const baseClass = "configure-pack-query-form";
const fieldNames = [
  "query_id",
  "interval",
  "logging_type",
  "platform",
  "shard",
  "version",
];
const platformOptions = [
  { label: "All", value: "" },
  { label: "Windows", value: "windows" },
  { label: "Linux", value: "linux" },
  { label: "macOS", value: "darwin" },
];
const loggingTypeOptions = [
  { label: "Differential", value: "differential" },
  {
    label: "Differential (Ignore Removals)",
    value: "differential_ignore_removals",
  },
  { label: "Snapshot", value: "snapshot" },
];
const minOsqueryVersionOptions = [
  { label: "All", value: "" },
  { label: "4.7.0 +", value: "4.7.0" },
  { label: "4.6.0 +", value: "4.6.0" },
  { label: "4.5.1 +", value: "4.5.1" },
  { label: "4.5.0 +", value: "4.5.0" },
  { label: "4.4.0 +", value: "4.4.0" },
  { label: "4.3.0 +", value: "4.3.0" },
  { label: "4.2.0 +", value: "4.2.0" },
  { label: "4.1.2 +", value: "4.1.2" },
  { label: "4.1.1 +", value: "4.1.1" },
  { label: "4.1.0 +", value: "4.1.0" },
  { label: "4.0.2 +", value: "4.0.2" },
  { label: "4.0.1 +", value: "4.0.1" },
  { label: "4.0.0 +", value: "4.0.0" },
  { label: "3.4.0 +", value: "3.4.0" },
  { label: "3.3.2 +", value: "3.3.2" },
  { label: "3.3.1 +", value: "3.3.1" },
  { label: "3.2.6 +", value: "3.2.6" },
  { label: "2.2.1 +", value: "2.2.1" },
  { label: "2.2.0 +", value: "2.2.0" },
  { label: "2.1.2 +", value: "2.1.2" },
  { label: "2.1.1 +", value: "2.1.1" },
  { label: "2.0.0 +", value: "2.0.0" },
  { label: "1.8.2 +", value: "1.8.2" },
  { label: "1.8.1 +", value: "1.8.1" },
];

export class ConfigurePackQueryForm extends Component {
  static propTypes = {
    fields: PropTypes.shape({
      interval: formFieldInterface.isRequired,
      logging_type: formFieldInterface.isRequired,
      platform: formFieldInterface.isRequired,
      version: formFieldInterface.isRequired,
      shard: formFieldInterface.isRequired,
    }).isRequired,
    formData: PropTypes.shape({
      id: PropTypes.number,
    }),
    handleSubmit: PropTypes.func,
    onCancel: PropTypes.func,
  };

  componentWillMount() {
    const { fields } = this.props;

    if (fields && fields.shard && !fields.shard.value) {
      fields.shard.value = "";
    }
  }

  onCancel = (evt) => {
    evt.preventDefault();

    const { formData, onCancel: handleCancel } = this.props;

    return handleCancel(formData);
  };

  handlePlatformChoice = (value) => {
    const {
      fields: { platform },
    } = this.props;
    const valArray = value.split(",");

    // Remove All if another OS is chosen
    if (valArray.indexOf("") === 0 && valArray.length > 1) {
      return platform.onChange(pull(valArray, "").join(","));
    }

    // Remove OS if All is chosen
    if (valArray.length > 1 && valArray.indexOf("") > -1) {
      return platform.onChange("");
    }

    return platform.onChange(value);
  };

  renderCancelButton = () => {
    const { formData } = this.props;
    const { onCancel } = this;

    if (!formData.id) {
      return false;
    }

    return (
      <Button
        className={`${baseClass}__cancel-btn`}
        onClick={onCancel}
        variant="inverse"
      >
        Cancel
      </Button>
    );
  };

  render() {
    const { fields, handleSubmit } = this.props;
    const { handlePlatformChoice, renderCancelButton } = this;

    return (
      <form className={baseClass} onSubmit={handleSubmit}>
        <h2 className={`${baseClass}__title`}>Configuration</h2>
        <div className={`${baseClass}__fields`}>
          <InputField
            {...fields.interval}
            inputWrapperClass={`${baseClass}__form-field ${baseClass}__form-field--frequency`}
            placeholder="- - -"
            label="Frequency (seconds)"
            // hint="Seconds"
            type="number"
          />
          <Dropdown
            {...fields.platform}
            options={platformOptions}
            placeholder="- - -"
            label="Platform"
            onChange={handlePlatformChoice}
            multi
            wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--platform`}
          />
          <Dropdown
            {...fields.version}
            options={minOsqueryVersionOptions}
            placeholder="- - -"
            label="Minimum osquery version"
            wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--osquer-vers`}
          />
          <Dropdown
            {...fields.logging_type}
            options={loggingTypeOptions}
            placeholder="- - -"
            label="Logging"
            wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--logging`}
          />
          <InputField
            {...fields.shard}
            inputWrapperClass={`${baseClass}__form-field ${baseClass}__form-field--shard`}
            placeholder="- - -"
            label="Shard"
            type="number"
          />
          <div className={`${baseClass}__btn-wrapper`}>
            {renderCancelButton()}
            <Button
              className={`${baseClass}__submit-btn`}
              type="submit"
              variant="brand"
            >
              Save
            </Button>
          </div>
        </div>
      </form>
    );
  }
}

export default Form(ConfigurePackQueryForm, {
  fields: fieldNames,
  validate,
});