Antd v4: Fix CreateUserDialog (#5139)

* Antd v4: Update CreateUserDialog

* Add Cypress test for user creation

client/app/pages/users/components/CreateUserDialog.jsx

@@ -1,40 +1,47 @@
-import React, { useState, useEffect, useMemo, useRef, useCallback } from "react";
+import React, { useState, useEffect, useCallback } from "react";
+import Button from "antd/lib/button";
 import Modal from "antd/lib/modal";
 import Alert from "antd/lib/alert";
 import DynamicForm from "@/components/dynamic-form/DynamicForm";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import recordEvent from "@/services/recordEvent";
 
+const formFields = [
+  { required: true, name: "name", title: "Name", type: "text", autoFocus: true },
+  { required: true, name: "email", title: "Email", type: "email" },
+];
+
 function CreateUserDialog({ dialog }) {
   const [error, setError] = useState(null);
-  const formRef = useRef();
-
   useEffect(() => {
     recordEvent("view", "page", "users/new");
   }, []);
 
-  const createUser = useCallback(() => {
-    if (formRef.current) {
-      formRef.current.validateFieldsAndScroll((err, values) => {
-        if (!err) {
-          dialog.close(values).catch(setError);
-        }
-      });
-    }
-  }, [dialog]);
-
-  const formFields = useMemo(() => {
-    const common = { required: true, props: { onPressEnter: createUser } };
-    return [
-      { ...common, name: "name", title: "Name", type: "text", autoFocus: true },
-      { ...common, name: "email", title: "Email", type: "email" },
-    ];
-  }, [createUser]);
+  const handleSubmit = useCallback(values => dialog.close(values).catch(setError), [dialog]);
 
   return (
-    <Modal {...dialog.props} title="Create a New User" okText="Create" onOk={createUser}>
-      <DynamicForm fields={formFields} ref={formRef} hideSubmitButton />
-      {error && <Alert message={error.message} type="error" showIcon />}
+    <Modal
+      {...dialog.props}
+      title="Create a New User"
+      footer={[
+        <Button key="cancel" {...dialog.props.cancelButtonProps} onClick={dialog.dismiss}>
+          Cancel
+        </Button>,
+        <Button
+          key="submit"
+          {...dialog.props.okButtonProps}
+          htmlType="submit"
+          type="primary"
+          form="userForm"
+          data-test="SaveUserButton">
+          Create
+        </Button>,
+      ]}
+      wrapProps={{
+        "data-test": "CreateUserDialog",
+      }}>
+      <DynamicForm id="userForm" fields={formFields} onSubmit={handleSubmit} hideSubmitButton />
+      {error && <Alert message={error.message} type="error" showIcon data-test="CreateUserErrorAlert" />}
     </Modal>
   );
 }

client/cypress/integration/user/create_user_spec.js

@@ -0,0 +1,28 @@
+describe("Create User", () => {
+  beforeEach(() => {
+    cy.login();
+    cy.visit("/users/new");
+  });
+
+  const fillUserFormAndSubmit = (name, email) => {
+    cy.getByTestId("CreateUserDialog").within(() => {
+      cy.getByTestId("Name").type(name);
+      cy.getByTestId("Email").type(email);
+    });
+    cy.getByTestId("SaveUserButton").click();
+  };
+
+  it("creates a new user", () => {
+    // delete existing "new-user@redash.io"
+    cy.request("GET", "api/users?q=new-user")
+      .then(({ body }) => body.results.filter(user => user.email === "new-user@redash.io"))
+      .each(user => cy.request("DELETE", `api/users/${user.id}`));
+
+    fillUserFormAndSubmit("New User", "admin@redash.io");
+
+    cy.getByTestId("CreateUserErrorAlert").should("contain", "Email already taken");
+
+    fillUserFormAndSubmit("{selectall}New User", "{selectall}new-user@redash.io");
+    cy.contains("Saved.");
+  });
+});