@truedat/core 7.5.9 → 7.5.10

package/src/components/UploadModal.js

@@ -1,8 +1,8 @@
-import React from "react";
+import { useState, Fragment } from "react";
 import PropTypes from "prop-types";
 import { Modal, Button, Icon, Container, List } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
-import Dropzone from "react-dropzone";
+import { useDropzone } from "react-dropzone";
 
 const dropzoneStyle = {
   width: "100%",
@@ -68,189 +68,165 @@ const getFormData = (files, param) =>
     return acc;
   }, new FormData());
 
-export class UploadModal extends React.Component {
-  static propTypes = {
-    open: PropTypes.bool,
-    onOpen: PropTypes.func,
-    icon: PropTypes.string,
-    header: PropTypes.any,
-    subHeader: PropTypes.any,
-    content: PropTypes.any,
-    handleSubmit: PropTypes.func,
-    onClose: PropTypes.func,
-    trigger: PropTypes.element,
-    size: PropTypes.string,
-    accept: PropTypes.string,
-    param: PropTypes.string,
-    extraAction: PropTypes.object,
+export const UploadModal = (props) => {
+  const {
+    open,
+    onOpen,
+    icon,
+    header,
+    subHeader,
+    content,
+    onClose,
+    handleSubmit,
+    trigger,
+    size,
+    accept,
+    param,
+    extraAction,
+  } = props;
+
+  const [files, setFiles] = useState([]);
+
+  const onDrop = (acceptedFiles) => {
+    setFiles([acceptedFiles[0]]);
   };
 
-  constructor(props) {
-    super(props);
-    this.state = { files: [], dropzoneActive: false };
-    this.onDrop = this.onDrop.bind(this);
-    this.onDragEnter = this.onDragEnter.bind(this);
-    this.onDragLeave = this.onDragLeave.bind(this);
-  }
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    open: openFileDialog,
+  } = useDropzone({
+    onDrop,
+    accept,
+    noClick: true,
+  });
 
-  onDragEnter() {
-    this.setState({
-      dropzoneActive: true,
-    });
-  }
+  const clearFiles = () => setFiles([]);
 
-  onDragLeave() {
-    this.setState({
-      dropzoneActive: false,
-    });
-  }
+  const submitForm = () => {
+    handleSubmit(getFormData(files, param));
+    clearFiles();
+  };
 
-  onDrop(files) {
-    this.setState({
-      files: [files[0]],
-      dropzoneActive: false,
-    });
-  }
-  render() {
-    const {
-      open,
-      onOpen,
-      icon,
-      header,
-      subHeader,
-      content,
-      onClose,
-      handleSubmit,
-      trigger,
-      size,
-      accept,
-      param,
-      extraAction,
-    } = this.props;
-    const { dropzoneActive, files } = this.state;
-    // eslint-disable-next-line fp/no-let
-    let dropzoneRef;
+  const handleExtraAction = () => {
+    if (extraAction) {
+      extraAction.onClick(getFormData(files, param));
+      clearFiles();
+    }
+  };
 
-    return (
-      <React.Fragment>
-        <Modal
-          icon={icon}
-          open={open}
-          role="presentation"
-          onOpen={onOpen}
-          onClose={onClose}
-          actions={actions(
-            () => {
-              handleSubmit(getFormData(files, param));
-              this.setState({ files: [] });
-            },
-            files <= 0,
-            extraAction
-              ? {
-                  ...extraAction,
-                  onClick: () => {
-                    extraAction.onClick(getFormData(files, param));
-                    this.setState({ files: [] });
-                  },
-                }
-              : false
-          )}
-          trigger={trigger}
-          closeIcon
-          size={size || "small"}
-          header={<CoolHeader header={header} subHeader={subHeader} />}
-          content={
-            content.type === "string" ? (
-              content
-            ) : (
-              <Modal.Content>
-                <Dropzone
-                  data-testid="fileDropZone"
-                  disableClick
-                  accept={accept}
-                  style={dropzoneActive ? dropzoneStyleHover : dropzoneStyle}
-                  ref={(node) => {
-                    // eslint-disable-next-line fp/no-mutation
-                    dropzoneRef = node;
-                  }}
-                  onDrop={this.onDrop}
-                  onDragEnter={this.onDragEnter}
-                  onDragLeave={this.onDragLeave}
+  return (
+    <Fragment>
+      <Modal
+        icon={icon}
+        open={open}
+        role="presentation"
+        onOpen={onOpen}
+        onClose={onClose}
+        actions={actions(
+          submitForm,
+          files.length <= 0,
+          extraAction
+            ? {
+                ...extraAction,
+                onClick: handleExtraAction,
+              }
+            : false
+        )}
+        trigger={trigger}
+        closeIcon
+        size={size || "small"}
+        header={<CoolHeader header={header} subHeader={subHeader} />}
+        content={
+          content.type === "string" ? (
+            content
+          ) : (
+            <Modal.Content>
+              <div
+                {...getRootProps()}
+                style={isDragActive ? dropzoneStyleHover : dropzoneStyle}
+                data-testid="fileDropZone"
+              >
+                <input {...getInputProps()} />
+                <div
+                  style={
+                    isDragActive ? dropzoneActiveStyle : dropzoneInactiveStyle
+                  }
                 >
-                  <div
-                    style={
-                      dropzoneActive
-                        ? dropzoneActiveStyle
-                        : dropzoneInactiveStyle
-                    }
-                  >
-                    <Container textAlign="center">
-                      <Icon
-                        name={dropzoneActive ? "download" : "cloud upload"}
-                        size="huge"
+                  <Container textAlign="center">
+                    <Icon
+                      name={isDragActive ? "download" : "cloud upload"}
+                      size="huge"
+                    />
+                    <p>
+                      <FormattedMessage
+                        id={
+                          isDragActive
+                            ? "uploadModal.actions.upload.confirmation.content.hover"
+                            : "uploadModal.actions.upload.confirmation.content"
+                        }
                       />
-                      <p>
-                        <FormattedMessage
-                          id={
-                            dropzoneActive
-                              ? "uploadModal.actions.upload.confirmation.content.hover"
-                              : "uploadModal.actions.upload.confirmation.content"
+                    </p>
+                    <Button
+                      secondary
+                      icon="upload"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        openFileDialog();
+                      }}
+                      content="Upload file"
+                    />
+                  </Container>
+                </div>
+              </div>
+              <h2>
+                <FormattedMessage id="uploadModal.selected.files" />
+              </h2>
+              <ul>
+                {files.map((f) => (
+                  <List divided verticalAlign="middle" key={f.name} size="big">
+                    <List.Item key={f.name}>
+                      <List.Content floated="right">
+                        <Button
+                          basic
+                          icon={
+                            <Icon name="trash alternate outline" color="red" />
                           }
+                          color="red"
+                          onClick={clearFiles}
                         />
-                      </p>
-                      <Button
-                        secondary
-                        icon="upload"
-                        onClick={() => {
-                          dropzoneRef.open();
-                        }}
-                        content="Upload file"
-                      />
-                    </Container>
-                  </div>
-                </Dropzone>
-                <h2>
-                  <FormattedMessage id="uploadModal.selected.files" />
-                </h2>
-                <ul>
-                  {files.map((f) => (
-                    <List
-                      divided
-                      verticalAlign="middle"
-                      key={f.name}
-                      size="big"
-                    >
-                      <List.Item key={f.name}>
-                        <List.Content floated="right">
-                          <Button
-                            basic
-                            icon={
-                              <Icon
-                                name="trash alternate outline"
-                                color="red"
-                              />
-                            }
-                            color="red"
-                            onClick={() => {
-                              this.setState({ files: [] });
-                            }}
-                          />
-                        </List.Content>
-                        <Icon name="file alternate outline" size="big" />
-                        <List.Content verticalAlign="middle">
-                          {f.name} - {f.size} bytes
-                        </List.Content>
-                      </List.Item>
-                    </List>
-                  ))}
-                </ul>
-              </Modal.Content>
-            )
-          }
-        />
-      </React.Fragment>
-    );
-  }
-}
+                      </List.Content>
+                      <Icon name="file alternate outline" size="big" />
+                      <List.Content verticalAlign="middle">
+                        {f.name}- {f.size}bytes
+                      </List.Content>
+                    </List.Item>
+                  </List>
+                ))}
+              </ul>
+            </Modal.Content>
+          )
+        }
+      />
+    </Fragment>
+  );
+};
+
+UploadModal.propTypes = {
+  open: PropTypes.bool,
+  onOpen: PropTypes.func,
+  icon: PropTypes.string,
+  header: PropTypes.any,
+  subHeader: PropTypes.any,
+  content: PropTypes.any,
+  handleSubmit: PropTypes.func,
+  onClose: PropTypes.func,
+  trigger: PropTypes.element,
+  size: PropTypes.string,
+  accept: PropTypes.string,
+  param: PropTypes.string,
+  extraAction: PropTypes.object,
+};
 
 export default UploadModal;

package/src/components/UserFilter.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Label, Icon } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
@@ -58,7 +57,6 @@ export const UserFilter = ({
       >
         {userFilter.name}
       </span>
-
       {!isGlobal || authorized ? (
         <ConfirmModal
           icon="trash"

package/src/components/UserFilters.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Label, Icon } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
@@ -68,7 +67,6 @@ export const UserFilters = ({
             >
               {userFilter.name}
             </span>
-
             {!isGlobal || authorized ? (
               <ConfirmModal
                 icon="trash"

package/src/components/__tests__/AddMemberForm.spec.js

@@ -1,15 +1,10 @@
-import React from "react";
-import { MemoryRouter } from "react-router-dom";
-import { intl } from "@truedat/test/intl-stub";
 import { waitFor } from "@testing-library/react";
-import { render } from "@truedat/test/render";
 import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import { apiJsonPost } from "@truedat/core/services/api";
 import { AddMemberForm } from "../AddMemberForm";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
+const user = userEvent.setup({ delay: null });
 
 jest.mock("@truedat/core/services/api", () => {
   const originalModule = jest.requireActual("@truedat/core/services/api");
@@ -25,11 +20,11 @@ describe("<AddMemberForm />", () => {
   const onSuccess = jest.fn();
   const resource = {
     type: "domain",
-    id: 1,
+    id: "1",
   };
   const options = [
-    { key: 1, text: "john", value: "user_1", id: 1 },
-    { key: 2, text: "mambo", value: "group_2", id: 2 },
+    { key: 1, text: "john", value: "user_1", id: "1" },
+    { key: 2, text: "mambo", value: "group_2", id: "2" },
   ];
   const roles = [
     { key: 1, text: "role1", value: "role1" },
@@ -38,44 +33,37 @@ describe("<AddMemberForm />", () => {
   const props = { onSuccess, resource, options, roles };
 
   it("matches the latest snapshot", async () => {
-    const { container, findByRole } = render(
-      <MemoryRouter>
-        <AddMemberForm {...props} />
-      </MemoryRouter>
-    );
-    await findByRole("button", { name: /add_member/ });
-    expect(container).toMatchSnapshot();
+    const rendered = render(<AddMemberForm {...props} />);
+    await waitForLoad(rendered);
+    await rendered.findByRole("button", { name: /add_member/i });
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("calls onSuccess with acl data on submit correctly", async () => {
-    const { findByRole, getByRole, findByText } = render(
-      <MemoryRouter>
-        <AddMemberForm {...props} />
-      </MemoryRouter>
-    );
+    const rendered = render(<AddMemberForm {...props} />);
+    await waitForLoad(rendered);
 
     // Submit button should initially be disabled
-    await waitFor(() =>
-      expect(getByRole("button", { name: /add_member/ })).toBeDisabled()
+    await waitFor(async () =>
+      expect(
+        await rendered.findByRole("button", { name: /add_member/i })
+      ).toBeDisabled()
     );
 
-    // Select principal
-    userEvent.click(await findByText(/john/));
-
-    // Select role
-    userEvent.click(await findByRole("textbox", { name: "domain.role" }));
-    userEvent.click(await findByRole("option", { name: "role2" }));
+    // Description
+    await user.click(await rendered.findByText(/john/i));
+    await user.click(await rendered.findByRole("option", { name: "role2" }));
 
     // Submit button should now be enabled
-    await waitFor(() =>
-      expect(getByRole("button", { name: /add_member/ })).not.toBeDisabled()
+    await waitFor(async () =>
+      expect(
+        await rendered.findByRole("button", { name: /add_member/i })
+      ).not.toBeDisabled()
     );
 
-    // Description
-    userEvent.type(await findByRole("textbox", { name: /description/ }), "foo");
-
-    // Submit
-    userEvent.click(await findByRole("button", { name: /add_member/ }));
+    await user.click(
+      await rendered.findByRole("button", { name: /add_member/i })
+    );
 
     await waitFor(() =>
       expect(apiJsonPost).toHaveBeenCalledWith("/api/acl_entries/domain/1", {
@@ -84,7 +72,7 @@ describe("<AddMemberForm />", () => {
           resource_type: "domain",
           principal_type: "user",
           principal_id: 1,
-          description: "foo",
+          description: "",
         },
       })
     );

package/src/components/__tests__/AddResourceMember.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { AddResourceMember } from "../AddResourceMember";
 

package/src/components/__tests__/AdminMenu.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import AdminMenu from "../AdminMenu";
 

package/src/components/__tests__/Alert.spec.js

@@ -1,12 +1,6 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import { Alert } from "../Alert";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<Alert />", () => {
   const dismissAlert = jest.fn();
   const message = {
@@ -18,20 +12,21 @@ describe("<Alert />", () => {
   };
   const props = { message, dismissAlert };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<Alert {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<Alert {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("contains a formatted message with properties", () => {
-    const wrapper = shallow(<Alert {...props} />);
-    const message = wrapper.find("Message");
-    expect(message).toHaveLength(1);
-    expect(wrapper.text().includes(message.prop("content")));
-    expect(message.prop("header")).toEqual("header.message.id");
+  it("contains a formatted message with properties", async () => {
+    const rendered = render(<Alert {...props} />);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText(/content.message.id/i)).toBeInTheDocument();
+    expect(rendered.getByText(/header.message.id/i)).toBeInTheDocument();
   });
 
-  it("contains a list of messages", () => {
+  it("contains a list of messages", async () => {
     const message = {
       error: false,
       header: "message.header",
@@ -49,9 +44,10 @@ describe("<Alert />", () => {
       ],
     };
     const props = { message, dismissAlert };
-    const wrapper = shallow(<Alert {...props} />);
-    const m = wrapper.find("Message");
-    expect(m).toHaveLength(1);
-    expect(m.prop("list")).toEqual(["message.0.id", "message.1.id"]);
+    const rendered = render(<Alert {...props} />);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText(/message.0.id/i)).toBeInTheDocument();
+    expect(rendered.getByText(/message.1.id/i)).toBeInTheDocument();
   });
 });

package/src/components/__tests__/AvailableFilters.spec.js

@@ -1,10 +1,10 @@
-import _ from "lodash/fp";
-import React from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import userEvent from "@testing-library/user-event";
 import { waitFor } from "@testing-library/react";
 import { AvailableFilters } from "../AvailableFilters";
 
+const user = userEvent.setup({ delay: null });
+
 describe("<AvailableFilters/>", () => {
   const resetFilters = jest.fn();
   const addFilter = jest.fn();
@@ -15,28 +15,31 @@ describe("<AvailableFilters/>", () => {
     filters: ["foo", "bar", "xyz"],
   });
 
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = getProps();
-    const { container } = render(<AvailableFilters {...props} />);
-    expect(container).toMatchSnapshot();
+    const rendered = render(<AvailableFilters {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("dispatches resetFilters when first item is clicked", async () => {
     const props = getProps();
-    const { queryByText } = render(<AvailableFilters {...props} />);
+    const rendered = render(<AvailableFilters {...props} />);
+    await waitForLoad(rendered);
 
-    expect(queryByText(/reset all filters/i)).toBeInTheDocument();
+    expect(rendered.getByText(/reset filters/i)).toBeInTheDocument();
     expect(resetFilters.mock.calls.length).toBe(0);
-    userEvent.click(await queryByText(/reset all filters/i));
+    await user.click(rendered.getByText(/reset filters/i));
     await waitFor(() => expect(resetFilters.mock.calls.length).toBe(1));
   });
 
   it("dispatches addFilter when last item is clicked", async () => {
     const props = getProps();
-    const { queryByText } = render(<AvailableFilters {...props} />);
+    const rendered = render(<AvailableFilters {...props} />);
+    await waitForLoad(rendered);
 
     expect(props.addFilter.mock.calls.length).toBe(0);
-    userEvent.click(await queryByText(/foo/i));
+    await user.click(rendered.getByText(/foo/i));
     expect(props.addFilter.mock.calls.length).toBe(1);
   });
 
@@ -52,8 +55,10 @@ describe("<AvailableFilters/>", () => {
       filters: ["foo", "bar", "xyz"],
       filtersGroup,
     };
-    const { queryByText } = render(<AvailableFilters {...props} />);
-    expect(queryByText(/important/i)).toBeInTheDocument();
-    expect(queryByText(/grupNan/i)).not.toBeInTheDocument();
+    const rendered = render(<AvailableFilters {...props} />);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText(/important/i)).toBeInTheDocument();
+    expect(rendered.queryByText(/grupnan/i)).not.toBeInTheDocument();
   });
 });