@truedat/dd 7.2.3 → 7.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "7.2.3",
+  "version": "7.2.5",
   "description": "Truedat Web Data Dictionary",
   "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": "7.2.3",
+    "@truedat/test": "7.2.5",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "7.2.3",
-    "@truedat/core": "7.2.3",
-    "@truedat/df": "7.2.3",
+    "@truedat/auth": "7.2.5",
+    "@truedat/core": "7.2.5",
+    "@truedat/df": "7.2.5",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "path-to-regexp": "^1.7.0",
@@ -115,5 +115,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "1f8b6f4d6fbd6e278493c35885e540c14f9c551b"
+  "gitHead": "1f3cfdc8ebc43228b46b00bf690c2bf963d368d5"
 }

package/src/api.js

@@ -4,7 +4,8 @@ const API_BUCKET_STRUCTURE = "/api/buckets/structures/:id";
 const API_DATA_STRUCTURE = "/api/data_structures/:id";
 const API_DATA_STRUCTURES_BULK_UPDATE = "/api/data_structures/bulk_update";
 const API_DATA_STRUCTURES_EDITABLE_CSV = "/api/data_structures/editable_csv";
-const API_DATA_STRUCTURES_CSV = "/api/data_structures/csv";
+const API_DATA_STRUCTURES_XLSX_DOWNLOAD = "/api/data_structures/xlsx/download";
+const API_DATA_STRUCTURES_XLSX_UPLOAD = "/api/data_structures/xlsx/upload";
 const API_DATA_STRUCTURES_SEARCH = "/api/data_structures/search";
 const API_DATA_STRUCTURE_FILTERS_SEARCH = "/api/data_structure_filters/search";
 const API_DATA_STRUCTURE_VERSION = "/api/data_structures/:id/versions/:version";
@@ -60,7 +61,8 @@ export {
   API_DATA_STRUCTURE,
   API_DATA_STRUCTURES_BULK_UPDATE,
   API_DATA_STRUCTURES_EDITABLE_CSV,
-  API_DATA_STRUCTURES_CSV,
+  API_DATA_STRUCTURES_XLSX_DOWNLOAD,
+  API_DATA_STRUCTURES_XLSX_UPLOAD,
   API_DATA_STRUCTURES_SEARCH,
   API_DATA_STRUCTURE_FILTERS_SEARCH,
   API_DATA_STRUCTURE_VERSION,

package/src/components/StructuresDownloadOption.js

@@ -1,11 +1,11 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
 import { Dropdown } from "semantic-ui-react";
 import { useIntl } from "react-intl";
+import { STRUCTURE } from "@truedat/core/routes";
 import { useSearchContext } from "@truedat/core/search/SearchContext";
-import { downloadStructures } from "../routines";
+import { useDataStructureDownload } from "../hooks/useStructures";
 
 const staticLabels = [
   "type",
@@ -23,18 +23,21 @@ const staticLabels = [
   "deleted_at",
 ];
 
-export const StructuresDownloadOption = ({
-  structuresDownloading,
-  downloadStructures,
-  hasFilterApplied,
-}) => {
+export const StructuresDownloadOption = ({ setDownloading }) => {
   const { formatMessage, locale } = useIntl();
 
   const {
     searchData,
     loading: structuresLoading,
     filterParams: searchParams,
+    allActiveFilters: allActiveFilters,
   } = useSearchContext();
+  const { trigger: triggerDownload, isMutating: structuresDownloading } =
+    useDataStructureDownload();
+
+  useEffect(() => {
+    setDownloading(structuresDownloading);
+  }, [setDownloading, structuresDownloading]);
 
   const structures = searchData?.data;
 
@@ -42,7 +45,10 @@ export const StructuresDownloadOption = ({
     _.map((l) => [l, formatMessage({ id: `structures.props.${l}` })]),
     _.fromPairs
   )(staticLabels);
-  const isDisabled = _.isEmpty(structures) || !hasFilterApplied;
+
+  const isDisabled =
+    _.isEmpty(structures) || _.isEmpty(_.path("type.raw")(allActiveFilters));
+
   return !structuresLoading ? (
     <Dropdown.Item
       icon="download"
@@ -59,7 +65,12 @@ export const StructuresDownloadOption = ({
         </>
       }
       onClick={() =>
-        downloadStructures({ headerLabels, lang: locale, searchParams })
+        triggerDownload({
+          header_labels: headerLabels,
+          lang: locale,
+          ...searchParams,
+          structure_url_schema: window.location.origin + STRUCTURE,
+        })
       }
       disabled={isDisabled || structuresDownloading}
     />
@@ -67,15 +78,7 @@ export const StructuresDownloadOption = ({
 };
 
 StructuresDownloadOption.propTypes = {
-  structuresDownloading: PropTypes.bool,
-  downloadStructures: PropTypes.func,
-  hasFilterApplied: PropTypes.bool,
+  setDownloading: PropTypes.func,
 };
 
-const mapStateToProps = (state) => ({
-  structuresDownloading: state.structuresDownloading,
-});
-
-export default connect(mapStateToProps, { downloadStructures })(
-  StructuresDownloadOption
-);
+export default StructuresDownloadOption;

package/src/components/StructuresEditableDownloadOption.js

@@ -1,27 +1,32 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { STRUCTURE } from "@truedat/core/routes";
 import { Dropdown } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 import { useSearchContext } from "@truedat/core/search/SearchContext";
-import { downloadEditableStructures } from "../routines";
+import { useDataStructureDownload } from "../hooks/useStructures";
 
-export const StructuresEditableDownloadOption = ({
-  structuresEditableDownloading,
-  downloadEditableStructures,
-  hasFilterApplied,
-}) => {
+export const StructuresEditableDownloadOption = ({ setDownloading }) => {
   const { formatMessage, locale } = useIntl();
   const {
     searchData,
     loading: structuresLoading,
     filterParams: searchParams,
+    allActiveFilters: allActiveFilters,
   } = useSearchContext();
+  const { trigger: triggerDownload, isMutating: structuresDownloading } =
+    useDataStructureDownload();
+
+  useEffect(() => {
+    setDownloading(structuresDownloading);
+  }, [setDownloading, structuresDownloading]);
 
   const structures = searchData?.data;
 
-  const isDisabled = _.isEmpty(structures) || !hasFilterApplied;
+  const isDisabled =
+    _.isEmpty(structures) || _.isEmpty(_.path("type.raw")(allActiveFilters));
+
   return (
     !structuresLoading && (
       <Dropdown.Item
@@ -41,24 +46,21 @@ export const StructuresEditableDownloadOption = ({
           </>
         }
         onClick={() =>
-          downloadEditableStructures({ lang: locale, searchParams })
+          triggerDownload({
+            lang: locale,
+            ...searchParams,
+            structure_url_schema: window.location.origin + STRUCTURE,
+            download_type: "editable",
+          })
         }
-        disabled={isDisabled || structuresEditableDownloading}
+        disabled={isDisabled || structuresDownloading}
       />
     )
   );
 };
 
 StructuresEditableDownloadOption.propTypes = {
-  structuresEditableDownloading: PropTypes.bool,
-  downloadEditableStructures: PropTypes.func,
-  hasFilterApplied: PropTypes.bool,
+  setDownloading: PropTypes.func,
 };
 
-const mapStateToProps = (state) => ({
-  structuresEditableDownloading: state.structuresEditableDownloading,
-});
-
-export default connect(mapStateToProps, { downloadEditableStructures })(
-  StructuresEditableDownloadOption
-);
+export default StructuresEditableDownloadOption;

package/src/components/StructuresOptions.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { Dropdown } from "semantic-ui-react";
 import SystemCreateOption from "./SystemCreateOption";
@@ -12,34 +12,37 @@ export const StructuresOptions = ({
   autoPublish,
   bulkUpload,
   bulkUploadDomains,
-  hasFilterApplied,
-}) => (
-  <Dropdown
-    icon="ellipsis vertical"
-    className="button icon group-actions button-update"
-    direction="left"
-    floating
-  >
-    <Dropdown.Menu>
-      <SystemCreateOption />
-      <Dropdown.Divider />
-      <StructuresDownloadOption hasFilterApplied={hasFilterApplied} />
-      <StructuresEditableDownloadOption hasFilterApplied={hasFilterApplied} />
-      {bulkUpload ? (
-        <StructuresUploadOption canAutoPublish={!!autoPublish} />
-      ) : null}
-      {bulkUploadDomains ? <StructuresDomainsUploadOption /> : null}
-      <Dropdown.Divider />
-      <StructuresUpdateOption />
-    </Dropdown.Menu>
-  </Dropdown>
-);
+}) => {
+  const [downloading, setDownloading] = useState(false);
+  return (
+    <Dropdown
+      icon="ellipsis vertical"
+      className="button icon group-actions button-update"
+      direction="left"
+      floating
+      loading={downloading}
+      disabled={downloading}
+    >
+      <Dropdown.Menu>
+        <SystemCreateOption />
+        <Dropdown.Divider />
+        <StructuresDownloadOption setDownloading={setDownloading} />
+        <StructuresEditableDownloadOption setDownloading={setDownloading} />
+        {bulkUpload ? (
+          <StructuresUploadOption canAutoPublish={!!autoPublish} />
+        ) : null}
+        {bulkUploadDomains ? <StructuresDomainsUploadOption /> : null}
+        <Dropdown.Divider />
+        <StructuresUpdateOption />
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
 
 StructuresOptions.propTypes = {
   autoPublish: PropTypes.object,
   bulkUpload: PropTypes.object,
   bulkUploadDomains: PropTypes.object,
-  hasFilterApplied: PropTypes.bool,
 };
 
 export default StructuresOptions;

package/src/components/StructuresUploadEventsTable.js

@@ -36,6 +36,7 @@ export const StructuresUploadEventsTable = ({
           _.map((error) => ({
             id: `structures.bulkUpdateStructures.failed.note.${error.message}`,
             fields: {
+              sheet: error.sheet,
               row: error.row,
               id: error.id,
               field: error.field,
@@ -133,12 +134,12 @@ export const StructuresUploadEventsTable = ({
                     ))
                   ) : (
                     <Table.Cell colSpan={columns.length}>
-                      {events[eventKey].csv_hash ? (
+                      {events[eventKey].hash ? (
                         <>
                           <FormattedMessage
                             id={`structures.bulkUploadEvents.props.csv_hash`}
                           />
-                          :&nbsp;{events[eventKey].csv_hash}
+                          :&nbsp;{events[eventKey].hash}
                         </>
                       ) : null}
                       {columns.map((column, key) => (

package/src/components/StructuresUploadOption.js

@@ -1,24 +1,27 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { useDispatch } from "react-redux";
 import { Dropdown } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 import { UploadModal } from "@truedat/core/components";
 import { uploadStructures } from "../routines";
+import { useDataStructureUpload } from "../hooks/useStructures";
 
-export const StructuresUploadOption = ({
-  uploadStructures,
-  loading,
-  canAutoPublish,
-}) => {
+export const StructuresUploadOption = ({ canAutoPublish }) => {
   const { formatMessage, locale } = useIntl();
+  const { trigger: triggerUpload, isMutating: structuresUploading } =
+    useDataStructureUpload();
+  const dispatch = useDispatch();
   const extraAction = {
     key: "yesWithAutoPublish",
     primary: true,
     content: formatMessage({ id: "uploadModal.accept.publish" }),
     onClick: (data) => {
       data.append("auto_publish", canAutoPublish);
-      return uploadStructures({ data, lang: locale });
+      data.append("lang", locale);
+      triggerUpload(data).then(({ status, data }) => {
+        dispatch(uploadStructures.success({ status, data }));
+      });
     },
   };
 
@@ -30,7 +33,7 @@ export const StructuresUploadOption = ({
         <Dropdown.Item
           icon="upload"
           text={formatMessage({ id: "structures.actions.upload.tooltip" })}
-          disabled={loading}
+          disabled={structuresUploading}
         />
       }
       header={formatMessage({
@@ -40,26 +43,18 @@ export const StructuresUploadOption = ({
         id: "structures.actions.upload.confirmation.content",
       })}
       param="structures"
-      handleSubmit={(data) =>
-        uploadStructures({
-          data,
-          lang: locale,
-        })
-      }
+      handleSubmit={(data) => {
+        data.append("lang", locale);
+        triggerUpload(data).then(({ status, data }) => {
+          dispatch(uploadStructures.success({ status, data }));
+        });
+      }}
     />
   );
 };
 
 StructuresUploadOption.propTypes = {
-  uploadStructures: PropTypes.func,
-  loading: PropTypes.bool,
   canAutoPublish: PropTypes.bool,
 };
 
-const mapStateToProps = ({ uploadingStructuresFile }) => ({
-  loading: uploadingStructuresFile,
-});
-
-export default connect(mapStateToProps, { uploadStructures })(
-  StructuresUploadOption
-);
+export default StructuresUploadOption;

package/src/components/StructuresView.js

@@ -74,7 +74,7 @@ export const StructuresViewContent = ({ embedded, customView }) => {
     <>
       {!customView ? (
         <>
-          <StructuresOptions hasFilterApplied={hasFilterApplied} {...actions} />
+          <StructuresOptions {...actions} />
           <SearchWidget dateFilter searchField="last_change_at" />
         </>
       ) : null}

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

@@ -4,9 +4,9 @@ import SearchContextWrapper from "@truedat/core/components/common/SearchContextW
 import { StructuresDownloadOption } from "../StructuresDownloadOption";
 import en from "../../messages/en";
 
-describe("<StructuresDownloadOption />", () => {
-  const downloadStructures = jest.fn();
+const setDownloading = jest.fn();
 
+describe("<StructuresDownloadOption />", () => {
   const renderOpts = {
     messages: {
       en: {
@@ -18,41 +18,41 @@ describe("<StructuresDownloadOption />", () => {
   };
 
   it("matches the latest snapshot", () => {
-    const props = { downloadStructures };
     const searchProps = {
       loading: false,
       searchParams: {},
       searchData: { data: [{ id: 1 }] },
     };
 
-    const { container } = render(
+    const { container, getByRole } = render(
       <SearchContextWrapper props={searchProps}>
-        <StructuresDownloadOption {...props} />
+        <StructuresDownloadOption {...{ setDownloading }} />
       </SearchContextWrapper>,
       renderOpts
     );
+    expect(getByRole("option")).toHaveAttribute("aria-disabled", "true");
     expect(container).toMatchSnapshot();
   });
 
-  it("has filter applied", () => {
-    const props = { downloadStructures, hasFilterApplied: true };
+  it("has type filter applied", () => {
     const searchProps = {
       loading: false,
       searchParams: {},
+      allActiveFilters: { "type.raw": ["foo"] },
       searchData: { data: [{ id: 1 }] },
     };
 
-    const { container } = render(
+    const { container, getByRole } = render(
       <SearchContextWrapper props={searchProps}>
-        <StructuresDownloadOption {...props} />
+        <StructuresDownloadOption {...{ setDownloading }} />
       </SearchContextWrapper>,
       renderOpts
     );
+    expect(getByRole("option")).toHaveAttribute("aria-disabled", "false");
     expect(container).toMatchSnapshot();
   });
 
   it("is disabled if there are no structures to be downloaded", () => {
-    const props = { downloadStructures };
     const searchProps = {
       loading: false,
       searchData: { data: [] },
@@ -60,11 +60,11 @@ describe("<StructuresDownloadOption />", () => {
     };
     const { getByRole, queryByText } = render(
       <SearchContextWrapper props={searchProps}>
-        <StructuresDownloadOption {...props} />
+        <StructuresDownloadOption {...{ setDownloading }} />
       </SearchContextWrapper>,
       renderOpts
     );
-    expect(getByRole("option")).toHaveAttribute("aria-disabled");
+    expect(getByRole("option")).toHaveAttribute("aria-disabled", "true");
     expect(queryByText("popup")).toBeTruthy();
   });
 });

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

@@ -3,9 +3,9 @@ import { render } from "@truedat/test/render";
 import SearchContextWrapper from "@truedat/core/components/common/SearchContextWrapper";
 import { StructuresEditableDownloadOption } from "../StructuresEditableDownloadOption";
 
-describe("<StructuresEditableDownloadOption />", () => {
-  const downloadEditableStructures = jest.fn();
+const setDownloading = jest.fn();
 
+describe("<StructuresEditableDownloadOption />", () => {
   const renderOpts = {
     messages: {
       en: {
@@ -19,20 +19,20 @@ describe("<StructuresEditableDownloadOption />", () => {
     const searchProps = {
       loading: false,
       searchData: { data: [{ id: 1 }] },
+      allActiveFilters: { "type.raw": ["foo"] },
       searchParams: {},
     };
-    const props = { downloadEditableStructures };
-    const { container } = render(
+    const { container, getByRole } = render(
       <SearchContextWrapper props={searchProps}>
-        <StructuresEditableDownloadOption {...props} />
+        <StructuresEditableDownloadOption {...{ setDownloading }} />
       </SearchContextWrapper>,
       renderOpts
     );
     expect(container).toMatchSnapshot();
+    expect(getByRole("option")).toHaveAttribute("aria-disabled", "false");
   });
 
   it("is disabled if there are no structures to be downloaded", () => {
-    const props = { downloadEditableStructures };
     const searchProps = {
       loading: false,
       searchData: { data: [] },
@@ -41,11 +41,11 @@ describe("<StructuresEditableDownloadOption />", () => {
 
     const { getByRole, queryByText } = render(
       <SearchContextWrapper props={searchProps}>
-        <StructuresEditableDownloadOption {...props} />
+        <StructuresEditableDownloadOption {...{ setDownloading }} />
       </SearchContextWrapper>,
       renderOpts
     );
-    expect(getByRole("option")).toHaveAttribute("aria-disabled");
+    expect(getByRole("option")).toHaveAttribute("aria-disabled", "true");
     expect(queryByText("popup")).toBeTruthy();
   });
 });

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

@@ -5,7 +5,7 @@ import StructuresUploadEventsTable from "../StructuresUploadEventsTable";
 
 const events = [
   {
-    csv_hash: "99E400B91D164F8F0A39F400CA323C8F",
+    hash: "99E400B91D164F8F0A39F400CA323C8F",
     inserted_at: "2022-04-23T15:53:24.638484Z",
     message: null,
     response: {
@@ -17,7 +17,7 @@ const events = [
     user_id: 467,
   },
   {
-    csv_hash: "47D90FDF1AD967BD7DBBDAE28664278E",
+    hash: "47D90FDF1AD967BD7DBBDAE28664278E",
     inserted_at: "2022-04-23T15:14:48.770275Z",
     message: null,
     response: {

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

@@ -18,7 +18,7 @@ describe("<StructuresUploadOption />", () => {
 
   it("matches the latest snapshot", () => {
     const props = {
-      uploadStructures: jest.fn(),
+      canAutoPublish: false,
     };
     const { container } = render(
       <StructuresUploadOption {...props} />,
@@ -28,10 +28,7 @@ describe("<StructuresUploadOption />", () => {
   });
 
   it("matches the latest snapshot with auto publish", () => {
-    const props = {
-      uploadStructures: jest.fn(),
-      canAutoPublish: true,
-    };
+    const props = { canAutoPublish: true };
     const { container } = render(
       <StructuresUploadOption {...props} />,
       renderOpts

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

@@ -1,8 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<StructuresDownloadOption /> has filter applied 1`] = `
+exports[`<StructuresDownloadOption /> has type filter applied 1`] = `
 <div>
   <div
+    aria-disabled="false"
     class="item"
     role="option"
   >

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

@@ -3,8 +3,8 @@
 exports[`<StructuresEditableDownloadOption /> matches the latest snapshot 1`] = `
 <div>
   <div
-    aria-disabled="true"
-    class="disabled item"
+    aria-disabled="false"
+    class="item"
     role="option"
   >
     <i
@@ -14,11 +14,6 @@ exports[`<StructuresEditableDownloadOption /> matches the latest snapshot 1`] =
     <span>
       tooltip
     </span>
-    <p
-      class="menu-item-description"
-    >
-      popup
-    </p>
   </div>
 </div>
 `;

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

@@ -3,6 +3,8 @@
 exports[`<StructuresOptions /> matches the latest snapshot 1`] = `
 <div>
   <div
+    aria-busy="false"
+    aria-disabled="false"
     aria-expanded="false"
     class="ui floating dropdown button icon group-actions button-update"
     role="listbox"
@@ -55,6 +57,7 @@ exports[`<StructuresOptions /> matches the latest snapshot 1`] = `
         </p>
       </div>
       <div
+        aria-disabled="false"
         class="item"
         role="option"
       >

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

@@ -3,6 +3,7 @@
 exports[`<StructuresUploadOption /> matches the latest snapshot 1`] = `
 <div>
   <div
+    aria-disabled="false"
     class="item"
     role="option"
   >
@@ -22,6 +23,7 @@ exports[`<StructuresUploadOption /> matches the latest snapshot 1`] = `
 exports[`<StructuresUploadOption /> matches the latest snapshot with auto publish 1`] = `
 <div>
   <div
+    aria-disabled="false"
     class="item"
     role="option"
   >