@truedat/dq 5.1.1 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [5.2.0] 2023-02-22
+
+### Added
+
+- [TD-5471] Implementations CSV upload publish button
+
 ## [5.0.6] 2023-01-30
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "5.0.5",
+    "@truedat/test": "5.2.0",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -92,8 +92,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/core": "5.0.5",
-    "@truedat/df": "5.0.5",
+    "@truedat/core": "5.2.0",
+    "@truedat/df": "5.2.0",
     "decode-uri-component": "^0.2.2",
     "graphql": "^15.5.3",
     "moment": "^2.29.4",
@@ -118,5 +118,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "28731e6c6de05ad746edb43d5a23f99c6e0a5779"
+  "gitHead": "20710c8ea4c857547cdaeac20dfada1bdf64e9d2"
 }

package/src/components/ImplementationsUploadButton.js

@@ -1,3 +1,4 @@
+import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
@@ -13,13 +14,29 @@ const uploadAction = {
 };
 
 export const ImplementationsUploadButton = ({
+  canAutoPublish,
   uploadImplementations,
   loading,
 }) => {
   const { formatMessage } = useIntl();
+  const extraAction = {
+    key: "yesWithAutoPublish",
+    primary: true,
+    content: formatMessage({ id: "uploadModal.accept.publish" }),
+    onClick: (formData) => {
+      // UploadModal is a Modal, not a Form, but sends FormData
+      formData.append("auto_publish", true);
+      return uploadImplementations({
+        action: "upload",
+        formData,
+        ...uploadAction,
+      });
+    },
+  };
   return (
     <UploadModal
       icon="upload"
+      extraAction={canAutoPublish ? extraAction : undefined}
       trigger={
         <Dropdown.Item
           icon="upload"
@@ -36,24 +53,31 @@ export const ImplementationsUploadButton = ({
         <FormattedMessage id="ruleImplementations.actions.upload.confirmation.content" />
       }
       param="implementations"
-      handleSubmit={(data) =>
-        uploadImplementations({
+      // handleSubmit is the onClick for the "yes" action
+      handleSubmit={(formData) => {
+        return uploadImplementations({
           action: "upload",
-          data,
+          formData,
           ...uploadAction,
-        })
-      }
+        });
+      }}
     />
   );
 };
 
 ImplementationsUploadButton.propTypes = {
+  canAutoPublish: PropTypes.bool,
   uploadImplementations: PropTypes.func,
   loading: PropTypes.bool,
 };
 
-const mapStateToProps = ({ uploadingImplementationsFile }) => ({
+const mapStateToProps = ({
+  uploadingImplementationsFile,
+  implementationsActions,
+}) => ({
+  canAutoPublish: !_.isEmpty(implementationsActions?.autoPublish),
   loading: uploadingImplementationsFile,
+  implementationsActions,
 });
 
 export default connect(mapStateToProps, { uploadImplementations })(

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

@@ -1,23 +1,132 @@
 import React from "react";
 import { render } from "@truedat/test/render";
+import { waitFor, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { ImplementationsUploadButton } from "../ImplementationsUploadButton";
 
 describe("<ImplementationsUploadButton />", () => {
+  const uploadImplementationsMock = jest.fn();
   const props = {
-    uploadRules: jest.fn(),
-    upload: false,
+    uploadImplementations: uploadImplementationsMock,
+    loading: false,
   };
-  const renderOpts = {
-    messages: {
-      en: { "ruleImplementations.actions.upload.tooltip": "Upload Rules" },
-    },
+
+  // See https://react-dropzone.js.org/ "Testing" section
+  const mockData = (files) => {
+    return {
+      dataTransfer: {
+        files,
+        items: files.map((file) => ({
+          kind: "file",
+          type: file.type,
+          getAsFile: () => file,
+        })),
+        types: ["Files"],
+      },
+    };
   };
 
-  it("matches the latest snapshot", () => {
-    const { contanier } = render(
-      <ImplementationsUploadButton {...props} />,
-      renderOpts
+  it("shows the modal", async () => {
+    const { getByRole, getByText } = render(
+      <ImplementationsUploadButton {...{ ...props, canAutoPublish: true }} />
+    );
+
+    await waitFor(() => {
+      userEvent.click(getByRole("option", { name: "Upload Implementations" }));
+    });
+
+    const uploadButton = getByRole("button", { name: "Upload and update" });
+    expect(uploadButton).toBeDisabled();
+    const publishButton = getByRole("button", { name: "Upload and publish" });
+    expect(publishButton).toBeDisabled();
+
+    expect(getByText("Upload Implementations")).toBeInTheDocument();
+    expect(
+      getByText("Drag an drop file or click to select file")
+    ).toBeInTheDocument();
+  });
+
+  it("false canAutoPublish makes the modal not show the publish button; update using an implementations CSV", async () => {
+    const { getByRole, queryByRole, getByTestId } = render(
+      <ImplementationsUploadButton {...{ ...props, canAutoPublish: false }} />
+    );
+
+    await waitFor(() => {
+      userEvent.click(getByRole("option", { name: "Upload Implementations" }));
+    });
+
+    const updateButton = getByRole("button", { name: "Upload and update" });
+    expect(updateButton).toBeDisabled();
+
+    const publishButton = queryByRole("button", { name: "Upload and publish" });
+    expect(publishButton).not.toBeInTheDocument();
+
+    const fakeFile = new File(["implementations"], "implementations.csv", {
+      type: "text/csv",
+    });
+    const formData = new FormData();
+    formData.append("implementations", fakeFile);
+    const dropZone = getByTestId("fileDropZone");
+    const data = mockData([fakeFile]);
+
+    await waitFor(() => {
+      fireEvent.drop(dropZone, data);
+    });
+
+    expect(updateButton).toBeEnabled();
+
+    await waitFor(() => {
+      userEvent.click(updateButton);
+    });
+
+    expect(uploadImplementationsMock).toHaveBeenCalledWith({
+      action: "upload",
+      formData,
+      href: "/api/rule_implementations/upload",
+      method: "POST",
+    });
+  });
+
+  it("true canAutoPublish makes the modal show the publish button; publishing an implementations CSV puts auto_publish FormData to true", async () => {
+    const { getByRole, getByTestId } = render(
+      <ImplementationsUploadButton {...{ ...props, canAutoPublish: true }} />
     );
-    expect(contanier).toMatchSnapshot();
+
+    await waitFor(() => {
+      userEvent.click(getByRole("option", { name: "Upload Implementations" }));
+    });
+
+    const updateButton = getByRole("button", { name: "Upload and update" });
+    expect(updateButton).toBeDisabled();
+
+    const publishButton = getByRole("button", { name: "Upload and publish" });
+    expect(updateButton).toBeDisabled();
+
+    const fakeFile = new File(["implementations"], "implementations.csv", {
+      type: "text/csv",
+    });
+    const formData = new FormData();
+    formData.append("implementations", fakeFile);
+    formData.append("auto_publish", true);
+    const dropZone = getByTestId("fileDropZone");
+    const data = mockData([fakeFile]);
+
+    await waitFor(() => {
+      fireEvent.drop(dropZone, data);
+    });
+
+    expect(updateButton).toBeEnabled();
+    expect(publishButton).toBeEnabled();
+
+    await waitFor(() => {
+      userEvent.click(publishButton);
+    });
+
+    expect(uploadImplementationsMock).toHaveBeenCalledWith({
+      action: "upload",
+      formData,
+      href: "/api/rule_implementations/upload",
+      method: "POST",
+    });
   });
 });

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

@@ -0,0 +1,158 @@
+import React from "react";
+import { Dropdown } from "semantic-ui-react";
+import { render } from "@truedat/test/render";
+import { waitFor, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { UploadModal } from "@truedat/core/components";
+
+describe("<ImplementationsUploadButton />", () => {
+  const trigger = <Dropdown.Item icon="upload" text="Trigger element" />;
+  const onClickExtraAction = jest.fn();
+  const onClickYesAction = jest.fn();
+
+  // See https://react-dropzone.js.org/ "Testing" section
+  const mockData = (files) => {
+    return {
+      dataTransfer: {
+        files,
+        items: files.map((file) => ({
+          kind: "file",
+          type: file.type,
+          getAsFile: () => file,
+        })),
+        types: ["Files"],
+      },
+    };
+  };
+
+  const extraAction = {
+    key: "yesWithAutoPublish",
+    primary: true,
+    content: "Extra action button",
+    onClick: onClickExtraAction,
+  };
+
+  it("shows the modal", async () => {
+    const { getByRole, getByText } = render(
+      <UploadModal
+        {...{
+          trigger,
+          extraAction,
+          header: "header",
+          content: "content",
+          param: "implementations",
+          handleSubmit: onClickYesAction,
+        }}
+      />
+    );
+
+    await waitFor(() => {
+      userEvent.click(getByRole("option", { name: "Trigger element" }));
+    });
+
+    const yesActionButton = getByRole("button", { name: "Upload and update" });
+    expect(yesActionButton).toBeDisabled();
+
+    const extraActionButton = getByRole("button", {
+      name: "Extra action button",
+    });
+    expect(extraActionButton).toBeDisabled();
+
+    expect(getByText("Trigger element")).toBeInTheDocument();
+    expect(
+      getByText("Drag an drop file or click to select file")
+    ).toBeInTheDocument();
+  });
+
+  it("clicks yes action button", async () => {
+    const { getByRole, getByTestId, queryByRole } = render(
+      <UploadModal
+        {...{
+          trigger,
+          header: "header",
+          content: "content",
+          param: "implementations",
+          handleSubmit: onClickYesAction,
+        }}
+      />
+    );
+
+    await waitFor(() => {
+      userEvent.click(getByRole("option", { name: "Trigger element" }));
+    });
+
+    const yesActionButton = getByRole("button", { name: "Upload and update" });
+    expect(yesActionButton).toBeDisabled();
+
+    const extraActionButton = queryByRole("button", {
+      name: "Extra action button",
+    });
+    expect(extraActionButton).not.toBeInTheDocument();
+
+    const fakeFile = new File(["implementations"], "implementations.csv", {
+      type: "text/csv",
+    });
+
+    const dropZone = getByTestId("fileDropZone");
+    const data = mockData([fakeFile]);
+
+    await waitFor(() => {
+      fireEvent.drop(dropZone, data);
+    });
+
+    expect(yesActionButton).toBeEnabled();
+
+    await waitFor(() => {
+      userEvent.click(yesActionButton);
+    });
+
+    expect(onClickYesAction).toHaveBeenCalled();
+  });
+
+  it("clicks extra action button", async () => {
+    const { getByRole, getByTestId } = render(
+      <UploadModal
+        {...{
+          trigger,
+          extraAction,
+          header: "header",
+          content: "content",
+          param: "implementations",
+          handleSubmit: onClickYesAction,
+        }}
+      />
+    );
+
+    await waitFor(() => {
+      userEvent.click(getByRole("option", { name: "Trigger element" }));
+    });
+
+    const yesActionButton = getByRole("button", { name: "Upload and update" });
+    expect(yesActionButton).toBeDisabled();
+
+    const extraActionButton = getByRole("button", {
+      name: "Extra action button",
+    });
+    expect(extraActionButton).toBeDisabled();
+
+    const fakeFile = new File(["implementations"], "implementations.csv", {
+      type: "text/csv",
+    });
+
+    const dropZone = getByTestId("fileDropZone");
+    const data = mockData([fakeFile]);
+
+    await waitFor(() => {
+      fireEvent.drop(dropZone, data);
+    });
+
+    expect(yesActionButton).toBeEnabled();
+    expect(extraActionButton).toBeEnabled();
+
+    await waitFor(() => {
+      userEvent.click(extraActionButton);
+    });
+
+    expect(onClickExtraAction).toHaveBeenCalled();
+  });
+});

package/src/sagas/__tests__/uploadImplementations.spec.js

@@ -29,9 +29,11 @@ describe("sagas: uploadImplementationsRequestsSaga", () => {
 
 describe("sagas: uploadImplementationsSaga", () => {
   const body = { implementations: "content" };
-  const payload = { data: body };
-  const data = { message: [1, 2] };
+  const payload = { formData: body };
+
   it("should put a access action when  a response is returned", () => {
+    const implementationIds = [1, 2];
+    const data = { message: implementationIds };
     expect(() => {
       testSaga(uploadImplementationsSaga, { payload })
         .next()

package/src/sagas/uploadImplementations.js

@@ -5,7 +5,7 @@ import { API_RULE_IMPLEMENTATIONS_UPLOAD } from "../api";
 
 export function* uploadImplementationsSaga({ payload }) {
   try {
-    const { data: body } = payload;
+    const { formData: body } = payload;
     yield put(uploadImplementations.request());
     const { data } = yield call(
       apiJsonPost,

package/src/components/__tests__/__snapshots__/ImplementationsUploadButton.spec.js.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<ImplementationsUploadButton /> matches the latest snapshot 1`] = `undefined`;