redash/client/app/components/query-snippets/QuerySnippetDialog.jsx

import React from "react";
import PropTypes from "prop-types";
import { get, isNil } from "lodash";
import Button from "antd/lib/button";
import Modal from "antd/lib/modal";
import DynamicForm from "@/components/dynamic-form/DynamicForm";
import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";

class QuerySnippetDialog extends React.Component {
  static propTypes = {
    dialog: DialogPropType.isRequired,
    querySnippet: PropTypes.object, // eslint-disable-line react/forbid-prop-types
    readOnly: PropTypes.bool,
    onSubmit: PropTypes.func.isRequired,
  };

  static defaultProps = {
    querySnippet: null,
    readOnly: false,
  };

  constructor(props) {
    super(props);
    this.state = { saving: false };
  }

  handleSubmit = (values, successCallback, errorCallback) => {
    const { querySnippet, dialog, onSubmit } = this.props;
    const querySnippetId = get(querySnippet, "id");

    if (isNil(values.description)) {
      values.description = "";
    }

    this.setState({ saving: true });
    onSubmit(querySnippetId ? { id: querySnippetId, ...values } : values)
      .then(() => {
        dialog.close();
        successCallback("Saved.");
      })
      .catch(() => {
        this.setState({ saving: false });
        errorCallback("Failed saving snippet.");
      });
  };

  render() {
    const { saving } = this.state;
    const { querySnippet, dialog, readOnly } = this.props;
    const isEditing = !!get(querySnippet, "id");

    const formFields = [
      { name: "trigger", title: "Trigger", type: "text", required: true, autoFocus: !isEditing },
      { name: "description", title: "Description", type: "text" },
      { name: "snippet", title: "Snippet", type: "ace", required: true },
    ].map(field => ({ ...field, readOnly, initialValue: get(querySnippet, field.name, "") }));

    return (
      <Modal
        {...dialog.props}
        title={isEditing ? querySnippet.trigger : "Create Query Snippet"}
        footer={[
          <Button key="cancel" onClick={dialog.dismiss}>
            {readOnly ? "Close" : "Cancel"}
          </Button>,
          !readOnly && (
            <Button
              key="submit"
              htmlType="submit"
              loading={saving}
              disabled={readOnly}
              type="primary"
              form="querySnippetForm"
              data-test="SaveQuerySnippetButton">
              {isEditing ? "Save" : "Create"}
            </Button>
          ),
        ]}
        wrapProps={{
          "data-test": "QuerySnippetDialog",
        }}>
        <DynamicForm
          id="querySnippetForm"
          fields={formFields}
          onSubmit={this.handleSubmit}
          hideSubmitButton
          feedbackIcons
        />
      </Modal>
    );
  }
}

export default wrapDialog(QuerySnippetDialog);