@truedat/dd 4.32.1 → 4.33.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [4.33.3] 2021-11-25
+
+### Added
+
+- [TD-4344] `structure_types` improve API request
+
+## [4.33.0] 2021-11-17
+
+### Added
+
+- [TD-3606] Download editable structures CSV
+
 ## [4.31.7] 2021-11-08
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.32.1",
+  "version": "4.33.3",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.32.0",
+    "@truedat/test": "4.33.3",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -84,9 +84,9 @@
     ]
   },
   "dependencies": {
-    "@truedat/auth": "4.32.1",
-    "@truedat/core": "4.32.0",
-    "@truedat/df": "4.32.1",
+    "@truedat/auth": "4.33.3",
+    "@truedat/core": "4.33.3",
+    "@truedat/df": "4.33.3",
     "lodash": "^4.17.21",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.7.2",
@@ -107,5 +107,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "771e256599825a2ff75e57a1ead86fd341e53768"
+  "gitHead": "4423c4077cf22e7d21d2679670287ed3d86ec8d7"
 }

package/src/api.js

@@ -1,5 +1,6 @@
 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_SEARCH = "/api/data_structures/search";
 const API_DATA_STRUCTURE_FILTERS_SEARCH = "/api/data_structure_filters/search";
@@ -28,6 +29,7 @@ const API_STRUCTURE_TAG = "/api/data_structure_tags/:id";
 const API_STRUCTURE_TAGS = "/api/data_structure_tags";
 const API_STRUCTURE_TYPE = "/api/data_structure_types/:id";
 const API_STRUCTURE_TYPES = "/api/data_structure_types";
+const API_STRUCTURE_TYPES_LITE = "/api/data_structure_types/lite";
 const API_STRUCTURES_TAG = "/api/data_structures/:data_structure_id/tags/:id";
 const API_STRUCTURES_TAGS = "/api/data_structures/:data_structure_id/tags";
 const API_STRUCTURE_USER_FILTERS = "/api/data_structure_user_filters";
@@ -43,6 +45,7 @@ const API_UNIT_DOMAINS = "/api/unit_domains";
 export {
   API_DATA_STRUCTURE,
   API_DATA_STRUCTURES_BULK_UPDATE,
+  API_DATA_STRUCTURES_EDITABLE_CSV,
   API_DATA_STRUCTURES_CSV,
   API_DATA_STRUCTURES_SEARCH,
   API_DATA_STRUCTURE_FILTERS_SEARCH,
@@ -71,6 +74,7 @@ export {
   API_STRUCTURE_TAGS,
   API_STRUCTURE_TYPE,
   API_STRUCTURE_TYPES,
+  API_STRUCTURE_TYPES_LITE,
   API_STRUCTURE_USER_FILTERS,
   API_STRUCTURE_USER_FILTER,
   API_STRUCTURES_TAG,

package/src/components/DictionaryRoutes.js

@@ -30,7 +30,6 @@ const TemplatesLoader = React.lazy(() =>
 const Loaders = () => (
   <>
     <StructuresLoader />
-    <StructureTypesLoader />
     <StructureFiltersLoader />
     <TemplatesLoader scope="dd" />
   </>
@@ -49,6 +48,7 @@ export const DictionaryRoutes = () => {
         path={STRUCTURES}
         render={() => (
           <>
+            <StructureTypesLoader liteRequest={true} />
             <SystemsLoader />
             <StructuresRoutes />
           </>
@@ -58,17 +58,35 @@ export const DictionaryRoutes = () => {
         path={SYSTEMS}
         render={() => (
           <>
+            <StructureTypesLoader liteRequest={true} />
             <SystemsLoader />
             <SystemsRoutes />
           </>
         )}
       />
-      <Route path={STRUCTURE_TAGS} render={() => <StructureTagsRoutes />} />
-      <Route path={STRUCTURE_TYPES} render={() => <StructureTypesRoutes />} />
+      <Route
+        path={STRUCTURE_TAGS}
+        render={() => (
+          <>
+            <StructureTypesLoader liteRequest={true} />
+            <StructureTagsRoutes />
+          </>
+        )}
+      />
+      <Route
+        path={STRUCTURE_TYPES}
+        render={() => (
+          <>
+            <StructureTypesLoader />
+            <StructureTypesRoutes />
+          </>
+        )}
+      />
       <Route
         path={PROFILE_GROUP}
         render={() => (
           <>
+            <StructureTypesLoader liteRequest={true} />
             <Route render={() => <ProfileGroupLoader />} />
             <Switch>
               <Route

package/src/components/StructureTypesLoader.js

@@ -6,19 +6,21 @@ import { clearStructureTypes, fetchStructureTypes } from "../routines";
 export const StructureTypesLoader = ({
   clearStructureTypes,
   fetchStructureTypes,
+  liteRequest = false,
 }) => {
   useEffect(() => {
-    fetchStructureTypes();
+    fetchStructureTypes({ liteRequest });
     return () => {
       clearStructureTypes();
     };
-  }, [clearStructureTypes, fetchStructureTypes]);
+  }, [clearStructureTypes, fetchStructureTypes, liteRequest]);
   return null;
 };
 
 StructureTypesLoader.propTypes = {
   clearStructureTypes: PropTypes.func,
   fetchStructureTypes: PropTypes.func,
+  liteRequest: PropTypes.bool,
 };
 
 export default connect(null, { clearStructureTypes, fetchStructureTypes })(

package/src/components/{StructuresDownloadButton.js → StructuresDownloadOption.js}

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Button, Popup } from "semantic-ui-react";
+import { Dropdown } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 import { downloadStructures } from "../routines";
 
@@ -19,7 +19,7 @@ const staticLabels = [
   "deleted_at",
 ];
 
-export const StructuresDownloadButton = ({
+export const StructuresDownloadOption = ({
   structures,
   structuresDownloading,
   structuresLoading,
@@ -31,34 +31,31 @@ export const StructuresDownloadButton = ({
     _.map((l) => [l, formatMessage({ id: `structures.props.${l}` })]),
     _.fromPairs
   )(staticLabels);
-  const messagePopup =
-    hasFilterApplied && !_.isEmpty(structures)
-      ? formatMessage({ id: "structures.actions.download.tooltip" })
-      : formatMessage({ id: "structures.actions.download.popup" });
+  const isDisabled = _.isEmpty(structures) || !hasFilterApplied;
   return (
-    <div>
-      {!structuresLoading && (
-        <Popup
-          position="top right"
-          content={messagePopup}
-          trigger={
-            <span className="trigger-right">
-              <Button
-                secondary
-                icon="download"
-                onClick={() => downloadStructures({ headerLabels })}
-                loading={structuresDownloading}
-                disabled={_.isEmpty(structures) || !hasFilterApplied}
-              />
+    !structuresLoading && (
+      <Dropdown.Item
+        icon="download"
+        content={
+          <>
+            <span>
+              {formatMessage({ id: "structures.actions.download.tooltip" })}
             </span>
-          }
-        />
-      )}
-    </div>
+            {isDisabled && (
+              <p className="menu-item-description">
+                {formatMessage({ id: "structures.actions.download.popup" })}
+              </p>
+            )}
+          </>
+        }
+        onClick={() => downloadStructures({ headerLabels })}
+        disabled={isDisabled || structuresDownloading}
+      />
+    )
   );
 };
 
-StructuresDownloadButton.propTypes = {
+StructuresDownloadOption.propTypes = {
   structuresDownloading: PropTypes.bool,
   structuresLoading: PropTypes.bool,
   downloadStructures: PropTypes.func,
@@ -71,5 +68,5 @@ const mapStateToProps = (state) => ({
 });
 
 export default connect(mapStateToProps, { downloadStructures })(
-  StructuresDownloadButton
+  StructuresDownloadOption
 );

package/src/components/StructuresEditableDownloadOption.js

@@ -0,0 +1,57 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Dropdown } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { downloadEditableStructures } from "../routines";
+
+export const StructuresEditableDownloadOption = ({
+  structures,
+  structuresEditableDownloading,
+  structuresLoading,
+  downloadEditableStructures,
+  hasFilterApplied,
+}) => {
+  const { formatMessage } = useIntl();
+  const isDisabled = _.isEmpty(structures) || !hasFilterApplied;
+  return (
+    !structuresLoading && (
+      <Dropdown.Item
+        icon="download"
+        content={
+          <>
+            <span>
+              {formatMessage({
+                id: "structures.actions.editableDownload.tooltip",
+              })}
+            </span>
+            {isDisabled && (
+              <p className="menu-item-description">
+                {formatMessage({ id: "structures.actions.download.popup" })}
+              </p>
+            )}
+          </>
+        }
+        onClick={() => downloadEditableStructures()}
+        disabled={isDisabled || structuresEditableDownloading}
+      />
+    )
+  );
+};
+
+StructuresEditableDownloadOption.propTypes = {
+  structuresEditableDownloading: PropTypes.bool,
+  structuresLoading: PropTypes.bool,
+  downloadEditableStructures: PropTypes.func,
+};
+
+const mapStateToProps = (state) => ({
+  structuresEditableDownloading: state.structuresEditableDownloading,
+  structuresLoading: state.structuresLoading,
+  structures: state.structures,
+});
+
+export default connect(mapStateToProps, { downloadEditableStructures })(
+  StructuresEditableDownloadOption
+);

package/src/components/StructuresOptions.js

@@ -0,0 +1,41 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Dropdown } from "semantic-ui-react";
+import SystemCreateOption from "./SystemCreateOption";
+import StructuresDownloadOption from "./StructuresDownloadOption";
+import StructuresEditableDownloadOption from "./StructuresEditableDownloadOption";
+import StructuresUpdateOption from "./StructuresUpdateOption";
+import StructuresUploadOption from "./StructuresUploadOption";
+
+export const StructuresOptions = ({
+  hasFilterApplied,
+  canBulkUpload,
+  canAutoPublish,
+}) => (
+  <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} />
+      {canBulkUpload && (
+        <StructuresUploadOption canAutoPublish={canAutoPublish} />
+      )}
+      <Dropdown.Divider />
+      <StructuresUpdateOption />
+    </Dropdown.Menu>
+  </Dropdown>
+);
+
+StructuresOptions.propTypes = {
+  hasFilterApplied: PropTypes.bool,
+  canBulkUpload: PropTypes.bool,
+  canAutoPublish: PropTypes.bool,
+};
+
+export default StructuresOptions;

package/src/components/StructuresUpdateOption.js

@@ -0,0 +1,46 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Dropdown } from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { useIntl } from "react-intl";
+import { useAuthorized } from "@truedat/core/hooks";
+import { STRUCTURES_BULK_UPDATE } from "@truedat/core/routes";
+import { bulkUpdateDisabledSelector } from "../selectors";
+
+export const StructuresUpdateOption = ({ disabled }) => {
+  const { formatMessage } = useIntl();
+  const authorized = useAuthorized();
+  return (
+    authorized && (
+      <Dropdown.Item
+        icon="refresh"
+        as={Link}
+        to={STRUCTURES_BULK_UPDATE}
+        disabled={disabled}
+        content={
+          <>
+            <span>
+              {formatMessage({ id: "structures.actions.bulk_update" })}
+            </span>
+            {disabled && (
+              <p className="menu-item-description">
+                {formatMessage({ id: "structures.actions.bulk_update.popup" })}
+              </p>
+            )}
+          </>
+        }
+      />
+    )
+  );
+};
+
+StructuresUpdateOption.propTypes = {
+  disabled: PropTypes.bool,
+};
+
+const mapStateToProps = (state) => ({
+  disabled: bulkUpdateDisabledSelector(state),
+});
+
+export default connect(mapStateToProps)(StructuresUpdateOption);

package/src/components/{StructuresUploadButton.js → StructuresUploadOption.js}

@@ -1,12 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Button } from "semantic-ui-react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { Dropdown } from "semantic-ui-react";
+import { useIntl } from "react-intl";
 import { UploadModal } from "@truedat/core/components";
 import { uploadStructures } from "../routines";
 
-export const StructuresUploadButton = ({
+export const StructuresUploadOption = ({
   uploadStructures,
   loading,
   canAutoPublish,
@@ -15,7 +15,7 @@ export const StructuresUploadButton = ({
   const extraAction = {
     key: "yesWithAutoPublish",
     primary: true,
-    content: <FormattedMessage id="uploadModal.accept.publish" />,
+    content: formatMessage({ id: "uploadModal.accept.publish" }),
     onClick: (data) => {
       data.append("auto_publish", canAutoPublish);
       return uploadStructures({ data });
@@ -27,23 +27,18 @@ export const StructuresUploadButton = ({
       extraAction={canAutoPublish && extraAction}
       icon="upload"
       trigger={
-        <span className="trigger-right">
-          <Button
-            secondary
-            icon="upload"
-            loading={loading}
-            data-tooltip={formatMessage({
-              id: "structures.actions.upload.tooltip",
-            })}
-          />
-        </span>
-      }
-      header={
-        <FormattedMessage id="structures.actions.upload.confirmation.header" />
-      }
-      content={
-        <FormattedMessage id="structures.actions.upload.confirmation.content" />
+        <Dropdown.Item
+          icon="upload"
+          text={formatMessage({ id: "structures.actions.upload.tooltip" })}
+          disabled={loading}
+        />
       }
+      header={formatMessage({
+        id: "structures.actions.upload.confirmation.header",
+      })}
+      content={formatMessage({
+        id: "structures.actions.upload.confirmation.content",
+      })}
       param={"structures"}
       handleSubmit={(data) =>
         uploadStructures({
@@ -54,7 +49,7 @@ export const StructuresUploadButton = ({
   );
 };
 
-StructuresUploadButton.propTypes = {
+StructuresUploadOption.propTypes = {
   uploadStructures: PropTypes.func,
   loading: PropTypes.bool,
   canAutoPublish: PropTypes.bool,
@@ -65,5 +60,5 @@ const mapStateToProps = ({ uploadingStructuresFile }) => ({
 });
 
 export default connect(mapStateToProps, { uploadStructures })(
-  StructuresUploadButton
+  StructuresUploadOption
 );

package/src/components/StructuresView.js

@@ -8,13 +8,10 @@ import { FormattedMessage } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
 import { structureRowsSelector } from "../selectors";
 import StructureSelectedFilters from "./StructureSelectedFilters";
-import StructuresUploadButton from "./StructuresUploadButton";
-import StructuresDownloadButton from "./StructuresDownloadButton";
+import StructuresOptions from "./StructuresOptions";
 import StructureDateFilter from "./StructureDateFilter";
 import StructuresSearch from "./StructuresSearch";
 import StructuresSearchResults from "./StructuresSearchResults";
-import StructuresUpdateButton from "./StructuresUpdateButton";
-import SystemCreateButton from "./SystemCreateButton";
 import SystemCards from "./SystemCards";
 
 export const StructuresHeader = () => (
@@ -51,12 +48,11 @@ export const StructuresView = ({
     <Segment loading={systemsLoading}>
       <StructuresHeader />
       <Divider hidden />
-      <SystemCreateButton />
-      <StructuresUpdateButton canAutoPublish={canAutoPublish} />
-      <StructuresDownloadButton hasFilterApplied={hasFilterApplied} />
-      {canBulkUpload && (
-        <StructuresUploadButton canAutoPublish={canAutoPublish} />
-      )}
+      <StructuresOptions
+        hasFilterApplied={hasFilterApplied}
+        canBulkUpload={canBulkUpload}
+        canAutoPublish={canAutoPublish}
+      />
       <StructuresSearch />
       <StructureSelectedFilters />
       <StructureDateFilter />

package/src/components/SystemCreateOption.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { Dropdown } from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { useIntl } from "react-intl";
+import { useAuthorized } from "@truedat/core/hooks";
+import { SYSTEM_NEW } from "@truedat/core/routes";
+
+export const SystemCreateOption = () => {
+  const { formatMessage } = useIntl();
+  const authorized = useAuthorized();
+  return (
+    authorized && (
+      <Dropdown.Item
+        icon="plus square outline"
+        as={Link}
+        to={SYSTEM_NEW}
+        text={formatMessage({ id: "structures.actions.new_system" })}
+      />
+    )
+  );
+};
+
+export default SystemCreateOption;

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

@@ -0,0 +1,45 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { StructuresDownloadOption } from "../StructuresDownloadOption";
+
+describe("<StructuresDownloadOption />", () => {
+  const downloadStructures = jest.fn();
+  const structuresLoading = false;
+  const renderOpts = {
+    messages: {
+      en: {
+        "structures.actions.download.tooltip": "tooltip",
+        "structures.actions.download.popup": "popup",
+        "structures.props.type": "type",
+        "structures.props.name": "name",
+        "structures.props.external_id": "external id",
+        "structures.props.group": "group",
+        "structures.props.domain": "domain",
+        "structures.props.system": "system",
+        "structures.props.path": "path",
+        "structures.props.description": "description",
+        "structures.props.inserted_at": "updated at",
+        "structures.props.deleted_at": "deleted at",
+      },
+    },
+  };
+
+  it("matches the latest snapshot", () => {
+    const props = { downloadStructures, structuresLoading };
+    const { container } = render(
+      <StructuresDownloadOption {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("is disabled if there are no structures to be downloaded", () => {
+    const props = { downloadStructures, structuresLoading, structures: [] };
+    const { getByRole, queryByText } = render(
+      <StructuresDownloadOption {...props} />,
+      renderOpts
+    );
+    expect(getByRole("option")).toHaveAttribute("aria-disabled");
+    expect(queryByText("popup")).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { StructuresEditableDownloadOption } from "../StructuresEditableDownloadOption";
+
+describe("<StructuresEditableDownloadOption />", () => {
+  const downloadEditableStructures = jest.fn();
+  const structuresLoading = false;
+  const renderOpts = {
+    messages: {
+      en: {
+        "structures.actions.editableDownload.tooltip": "tooltip",
+        "structures.actions.download.popup": "popup",
+      },
+    },
+  };
+
+  it("matches the latest snapshot", () => {
+    const props = { downloadEditableStructures, structuresLoading };
+    const { container } = render(
+      <StructuresEditableDownloadOption {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("is disabled if there are no structures to be downloaded", () => {
+    const props = {
+      downloadEditableStructures,
+      structuresLoading,
+      structures: [],
+    };
+    const { getByRole, queryByText } = render(
+      <StructuresEditableDownloadOption {...props} />,
+      renderOpts
+    );
+    expect(getByRole("option")).toHaveAttribute("aria-disabled");
+    expect(queryByText("popup")).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,36 @@
+// only admin user
+import React from "react";
+import { render } from "@truedat/test/render";
+import { StructuresUpdateOption } from "../StructuresUpdateOption";
+
+jest.mock("@truedat/core/hooks", () => ({
+  useAuthorized: jest.fn(() => true),
+}));
+
+describe("<StructuresUpdateOption />", () => {
+  const renderOpts = {
+    messages: {
+      en: {
+        "structures.actions.bulk_update": "update",
+        "structures.actions.bulk_update.popup": "popup",
+      },
+    },
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<StructuresUpdateOption />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("button will appear disabled if template is empty", () => {
+    const props = {
+      disabled: true,
+    };
+    const { getByRole, queryByText } = render(
+      <StructuresUpdateOption {...props} />,
+      renderOpts
+    );
+    expect(getByRole("option")).toHaveAttribute("aria-disabled");
+    expect(queryByText("popup")).toBeTruthy();
+  });
+});