@truedat/dd 4.44.2 → 4.44.5

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [4.44.4] 2022-05-19
+
+## Added
+
+- [TD-4660] Support for reference datasets
+
+### Changed
+
+- Use `lowerDeburrTrim` function from `@truedat/core`
+
 ## [4.44.0] 2022-05-10
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.44.2",
+  "version": "4.44.5",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -22,20 +22,20 @@
     "eslint:fix": "eslint --fix src/**"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.8",
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.0",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.17.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-react": "^7.14.5",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.0",
+    "@babel/preset-env": "^7.18.0",
+    "@babel/preset-react": "^7.17.12",
+    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.44.2",
-    "babel-jest": "^27.0.6",
+    "@truedat/test": "4.44.5",
+    "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-react-intl": "^5.1.18",
@@ -44,7 +44,8 @@
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.0.6",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "redux-saga-test-plan": "^4.0.4",
@@ -52,6 +53,8 @@
     "semantic-ui-react": "^2.0.3"
   },
   "jest": {
+    "maxWorkers": "50%",
+    "testTimeout": 10000,
     "moduleDirectories": [
       "<rootDir>/src",
       "../../node_modules"
@@ -84,15 +87,16 @@
     ]
   },
   "dependencies": {
-    "@truedat/auth": "4.44.2",
-    "@truedat/core": "4.44.2",
-    "@truedat/df": "4.44.2",
+    "@apollo/client": "^3.6.4",
+    "@truedat/auth": "4.44.5",
+    "@truedat/core": "4.44.5",
+    "@truedat/df": "4.44.5",
     "lodash": "^4.17.21",
     "path-to-regexp": "^1.7.0",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react-hook-form": "^7.30.0",
     "react-intl": "^5.20.10",
-    "react-moment": "^0.9.7",
+    "react-moment": "^1.1.2",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-vis": "^1.11.7",
@@ -107,5 +111,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "ca0c5fffcba96736f7a2054f3c37789da8c30a9e"
+  "gitHead": "5a339468198c803592b285eddd0dd0c0b0eced93"
 }

package/src/api/mutations.js

@@ -1,6 +1,33 @@
 import { gql } from "@apollo/client";
 import { STRUCTURE_TAG_DETAIL } from "./fragments";
 
+export const CREATE_REFERENCE_DATASET = gql`
+  mutation CreateReferenceDataset($dataset: CreateReferenceDatasetInput!) {
+    createReferenceDataset(dataset: $dataset) {
+      id
+      name
+    }
+  }
+`;
+
+export const UPDATE_REFERENCE_DATASET = gql`
+  mutation UpdateReferenceDataset($dataset: UpdateReferenceDatasetInput!) {
+    updateReferenceDataset(dataset: $dataset) {
+      id
+      name
+    }
+  }
+`;
+
+export const DELETE_REFERENCE_DATASET = gql`
+  mutation DeleteReferenceDataset($id: ID!) {
+    deleteReferenceDataset(id: $id) {
+      id
+      name
+    }
+  }
+`;
+
 export const CREATE_STRUCTURE_TAG = gql`
   mutation CreateStructureTag($structureTag: StructureTagInput!) {
     createStructureTag(structureTag: $structureTag) {

package/src/api/queries.js

@@ -18,3 +18,27 @@ export const STRUCTURE_TAGS_QUERY = gql`
   }
   ${STRUCTURE_TAG_DETAIL}
 `;
+
+export const REFERENCE_DATASETS_QUERY = gql`
+  query ReferenceDatasets {
+    referenceDatasets {
+      id
+      name
+      headers
+      rowCount
+      updatedAt
+    }
+  }
+`;
+
+export const REFERENCE_DATASET_QUERY = gql`
+  query ReferenceDataset($id: ID!) {
+    referenceDataset(id: $id) {
+      id
+      name
+      headers
+      rows
+      updatedAt
+    }
+  }
+`;

package/src/api.js

@@ -7,6 +7,7 @@ const API_DATA_STRUCTURE_FILTERS_SEARCH = "/api/data_structure_filters/search";
 const API_DATA_STRUCTURE_VERSION = "/api/data_structures/:id/versions/:version";
 const API_GRANT_FILTERS_SEARCH = "/api/grant_filters/search";
 const API_PROFILE_EXECUTION = "/api/profile_executions/:id";
+const API_REFERENCE_DATA_DOWNLOAD = "/api/reference_data/:id/csv";
 const API_GRANT_REQUEST = "/api/grant_requests/:id";
 const API_GRANT_REQUEST_APPROVALS = "/api/grant_requests/:id/approvals";
 const API_GRANT_REQUEST_GROUP = "/api/grant_request_groups";
@@ -71,6 +72,7 @@ export {
   API_NODES,
   API_PROFILE_GROUP,
   API_PROFILE_GROUPS,
+  API_REFERENCE_DATA_DOWNLOAD,
   API_SYSTEM,
   API_SYSTEMS,
   API_SYSTEM_STRUCTURES,

package/src/components/DictionaryRoutes.js

@@ -5,6 +5,7 @@ import {
   PENDING_STRUCTURE_NOTES,
   PROFILE_EXECUTION,
   PROFILE_GROUP,
+  REFERENCE_DATASETS,
   STRUCTURE_TAGS,
   STRUCTURE_TYPES,
   STRUCTURES,
@@ -17,6 +18,7 @@ import ProfileExecutionBreadcrumbs from "./ProfileExecutionBreadcrumbs";
 import ProfileExecutionLoader from "./ProfileExecutionLoader";
 import ProfileGroupLoader from "./ProfileGroupLoader";
 import ProfileGroup from "./ProfileGroup";
+import ReferenceDatasetRoutes from "./ReferenceDatasetRoutes";
 import StructureFiltersLoader from "./StructureFiltersLoader";
 import StructuresLoader from "./StructuresLoader";
 import StructuresRoutes from "./StructuresRoutes";
@@ -84,11 +86,7 @@ export const DictionaryRoutes = () => {
       />
       <Route
         path={STRUCTURES_UPLOAD_EVENTS}
-        render={() => (
-          <>
-            <StructuresUploadEvents />
-          </>
-        )}
+        render={() => <StructuresUploadEvents />}
       />
       <Route
         path={PENDING_STRUCTURE_NOTES}
@@ -100,6 +98,10 @@ export const DictionaryRoutes = () => {
           </>
         )}
       />
+      <Route
+        path={REFERENCE_DATASETS}
+        render={() => <ReferenceDatasetRoutes />}
+      />
       <Route
         path={PROFILE_GROUP}
         render={() => (

package/src/components/EditDomainPopup.js

@@ -15,7 +15,7 @@ export const EditDomainPopup = ({ userPermissions, saving, text }) => {
     }
   }, [saving]);
 
-  return userPermissions.update && userPermissions.update_domain ? (
+  return userPermissions?.update && userPermissions?.update_domain ? (
     <Popup
       on="click"
       basic

package/src/components/FilteredNav.js

@@ -2,19 +2,19 @@ import _ from "lodash/fp";
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { lowerDeburr } from "@truedat/core/services/sort";
+import { lowerDeburrTrim } from "@truedat/core/services/sort";
 import { getSortedStructureChildren, getStructureParent } from "../selectors";
 import StructureNav from "./StructureNav";
 import StructureSearch from "./StructureSearch";
 
 export const FilteredNav = ({ childStructures, parentStructure }) => {
   const [searchValue, setSearchValue] = useState("");
-  const onChange = searchValue => setSearchValue(searchValue);
+  const onChange = (searchValue) => setSearchValue(searchValue);
 
-  const filteredStructures = collection => {
-    const normalizedSearchValue = lowerDeburr(_.trim(searchValue));
-    return _.filter(structure =>
-      _.contains(normalizedSearchValue)(lowerDeburr(structure.name))
+  const filteredStructures = (collection) => {
+    const normalizedSearchValue = lowerDeburrTrim(searchValue);
+    return _.filter((structure) =>
+      _.contains(normalizedSearchValue)(lowerDeburrTrim(structure.name))
     )(collection);
   };
 
@@ -31,12 +31,12 @@ export const FilteredNav = ({ childStructures, parentStructure }) => {
 
 FilteredNav.propTypes = {
   childStructures: PropTypes.array,
-  parentStructure: PropTypes.object
+  parentStructure: PropTypes.object,
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   parentStructure: getStructureParent(state),
-  childStructures: getSortedStructureChildren(state)
+  childStructures: getSortedStructureChildren(state),
 });
 
 export default connect(mapStateToProps)(FilteredNav);

package/src/components/GrantFilters.js

@@ -1,13 +1,9 @@
-import React from "react";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
+import { AvailableFilters } from "@truedat/core/components";
 import { addGrantFilter, resetGrantFilters } from "../routines";
 import { getGrantAvailableFilters } from "../selectors";
 
-const AvailableFilters = React.lazy(() =>
-  import("@truedat/core/components/AvailableFilters")
-);
-
 const mapStateToProps = (state) => {
   return {
     filters: getGrantAvailableFilters(state),

package/src/components/GrantRequestApprovalPopup.js

@@ -1,4 +1,3 @@
-import _ from "lodash/fp";
 import React, { useState } from "react";
 import { Button, Popup } from "semantic-ui-react";
 import PropTypes from "prop-types";

package/src/components/ImplementationStructuresLoader.js

@@ -1,20 +1,16 @@
 import _ from "lodash/fp";
 import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import { connect, useSelector } from "react-redux";
+import { connect } from "react-redux";
 import { fetchStructure, clearStructure } from "../routines";
 
 export const ImplementationStructuresLoader = ({
-  structureIds,
-  fetchStructure,
   clearStructure,
+  fetchStructure,
+  structureIds,
+  structuresFields,
+  structuresSiblings,
 }) => {
-  const structuresFields = useSelector((state) =>
-    _.keys(state.structuresFields)
-  );
-  const structuresSiblings = useSelector((state) =>
-    _.keys(state.structuresSiblings)
-  );
   const structures = _.flow(
     _.concat(structuresFields),
     _.map(_.toInteger),
@@ -48,10 +44,17 @@ export const ImplementationStructuresLoader = ({
 };
 
 ImplementationStructuresLoader.propTypes = {
-  fetchStructure: PropTypes.func,
   clearStructure: PropTypes.func,
+  fetchStructure: PropTypes.func,
+  structuresFields: PropTypes.array,
+  structuresSiblings: PropTypes.array,
 };
 
-export default connect(null, { fetchStructure, clearStructure })(
+export const mapStateToProps = ({ structuresFields, structuresSiblings }) => ({
+  structuresFields: _.keys(structuresFields),
+  structuresSiblings: _.keys(structuresSiblings),
+});
+
+export default connect(mapStateToProps, { fetchStructure, clearStructure })(
   ImplementationStructuresLoader
 );

package/src/components/PendingStructureNotes.js

@@ -1,6 +1,7 @@
 import _ from "lodash/fp";
 import React, { useState } from "react";
-import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
 import { FormattedMessage, useIntl } from "react-intl";
 import { gql, useQuery } from "@apollo/client";
 import { Checkbox, Form, Header, Icon, Segment } from "semantic-ui-react";
@@ -37,15 +38,14 @@ export const STRUCTURE_NOTES = gql`
 
 const STATUS = ["pending_approval", "draft", "rejected"];
 
-export const PendingStructureNotes = () => {
+export const PendingStructureNotes = ({ systems }) => {
   const { formatMessage } = useIntl();
-  const { systems } = useSelector(_.pick(["systems"]));
   const [filter, setFilter] = useState({
     statuses: STATUS,
   });
   const { loading, error, data } = useQuery(STRUCTURE_NOTES, {
     variables: { filter },
-    fetchPolicy: "network-only",
+    fetchPolicy: "cache-and-network",
   });
   const items = loading || error ? [] : data?.structure_notes;
   const { control } = useForm({
@@ -146,4 +146,10 @@ export const PendingStructureNotes = () => {
   );
 };
 
-export default PendingStructureNotes;
+PendingStructureNotes.propTypes = {
+  systems: PropTypes.array,
+};
+
+export const mapStateToProps = ({ systems }) => ({ systems });
+
+export default connect(mapStateToProps)(PendingStructureNotes);

package/src/components/ReferenceDataset.js

@@ -0,0 +1,23 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Divider, Segment } from "semantic-ui-react";
+import ReferenceDatasetBreadcrumbs from "./ReferenceDatasetBreadcrumbs";
+import ReferenceDatasetDetail from "./ReferenceDatasetDetail";
+import ReferenceDatasetHeader from "./ReferenceDatasetHeader";
+
+export const ReferenceDataset = ({ dataset }) => (
+  <>
+    <ReferenceDatasetBreadcrumbs text={dataset.name} />
+    <Segment>
+      <ReferenceDatasetHeader dataset={dataset} />
+      <Divider hidden />
+      <ReferenceDatasetDetail dataset={dataset} />
+    </Segment>
+  </>
+);
+
+ReferenceDataset.propTypes = {
+  dataset: PropTypes.object,
+};
+
+export default ReferenceDataset;

package/src/components/ReferenceDatasetActions.js

@@ -0,0 +1,88 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import { Button } from "semantic-ui-react";
+import { ConfirmModal, GroupActions } from "@truedat/core/components";
+import { linkTo } from "@truedat/core/routes";
+import { deleteReferenceDataset, downloadReferenceDataset } from "../routines";
+
+export const ConfirmDeleteModal = ({ onConfirm, name, id }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <ConfirmModal
+      icon="trash"
+      trigger={
+        <Button
+          icon="trash"
+          content={formatMessage({ id: "actions.delete" })}
+        />
+      }
+      header={formatMessage({
+        id: "referenceDataset.actions.delete.confirmation.header",
+      })}
+      size="small"
+      content={formatMessage(
+        { id: "referenceDataset.actions.delete.confirmation.content" },
+        { name: <i>{name}</i> }
+      )}
+      onConfirm={() => onConfirm({ id })}
+    />
+  );
+};
+
+ConfirmDeleteModal.propTypes = {
+  onConfirm: PropTypes.func,
+  name: PropTypes.string,
+  id: PropTypes.string,
+};
+
+export const ReferenceDatasetActions = ({
+  deleteReferenceDataset,
+  downloadReferenceDataset,
+  dataset,
+}) => {
+  const { formatMessage } = useIntl();
+  const { id, name } = dataset || {};
+  const actions = [
+    {
+      key: "edit",
+      icon: "edit",
+      text: formatMessage({ id: "actions.edit" }),
+      value: "edit",
+      as: Link,
+      to: linkTo.REFERENCE_DATASET_EDIT({ id }),
+    },
+    {
+      key: "download",
+      icon: "download",
+      text: formatMessage({ id: "actions.download" }),
+      value: "download",
+      as: "a",
+      onClick: () => downloadReferenceDataset({ id, name }),
+    },
+    {
+      key: "delete",
+      icon: "trash",
+      value: "delete",
+      as: ConfirmDeleteModal,
+      onConfirm: deleteReferenceDataset,
+      name,
+      id,
+    },
+  ];
+
+  return <GroupActions availableActions={actions} />;
+};
+
+ReferenceDatasetActions.propTypes = {
+  deleteReferenceDataset: PropTypes.func,
+  downloadReferenceDataset: PropTypes.func,
+  dataset: PropTypes.object.isRequired,
+};
+
+export default connect(null, {
+  deleteReferenceDataset,
+  downloadReferenceDataset,
+})(ReferenceDatasetActions);

package/src/components/ReferenceDatasetBreadcrumbs.js

@@ -0,0 +1,22 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Breadcrumb } from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { REFERENCE_DATASETS } from "@truedat/core/routes";
+
+export const ReferenceDatasetBreadcrumbs = ({ text }) => (
+  <Breadcrumb>
+    <Breadcrumb.Section as={Link} to={REFERENCE_DATASETS} active={false}>
+      <FormattedMessage id="sidemenu.referenceData" />
+    </Breadcrumb.Section>
+    <Breadcrumb.Divider icon="right angle" />
+    <Breadcrumb.Section active>{text}</Breadcrumb.Section>
+  </Breadcrumb>
+);
+
+ReferenceDatasetBreadcrumbs.propTypes = {
+  text: PropTypes.string,
+};
+
+export default ReferenceDatasetBreadcrumbs;

package/src/components/ReferenceDatasetCreate.js

@@ -0,0 +1,36 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Container, Header, Icon, Segment } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { createReferenceDataset } from "../routines";
+import ReferenceDatasetBreadcrumbs from "./ReferenceDatasetBreadcrumbs";
+import ReferenceDatasetForm from "./ReferenceDatasetForm";
+
+export const ReferenceDatasetCreate = ({ createReferenceDataset }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <>
+      <ReferenceDatasetBreadcrumbs
+        text={formatMessage({ id: "referenceDatasets.actions.create" })}
+      />
+      <Container as={Segment} text>
+        <Header as="h2">
+          <Icon name="list ol" />
+          <Header.Content>
+            <FormattedMessage id="referenceDatasets.actions.create" />
+          </Header.Content>
+        </Header>
+        <ReferenceDatasetForm onSubmit={createReferenceDataset} />
+      </Container>
+    </>
+  );
+};
+
+ReferenceDatasetCreate.propTypes = {
+  createReferenceDataset: PropTypes.func.isRequired,
+};
+
+export default connect(null, { createReferenceDataset })(
+  ReferenceDatasetCreate
+);

package/src/components/ReferenceDatasetDetail.js

@@ -0,0 +1,42 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Switch, Route } from "react-router-dom";
+import {
+  REFERENCE_DATASET_EDIT,
+  REFERENCE_DATASET,
+} from "@truedat/core/routes";
+import { updateReferenceDataset } from "../routines";
+import ReferenceDatasetTable from "./ReferenceDatasetTable";
+import ReferenceDatasetForm from "./ReferenceDatasetForm";
+
+export const ReferenceDatasetDetail = ({ dataset, updateReferenceDataset }) => (
+  <Switch>
+    <Route
+      path={REFERENCE_DATASET_EDIT}
+      exact
+      render={() => (
+        <ReferenceDatasetForm
+          dataset={dataset}
+          onSubmit={(data) =>
+            updateReferenceDataset({ ...data, id: dataset.id })
+          }
+        />
+      )}
+    />
+    <Route
+      path={REFERENCE_DATASET}
+      exact
+      render={() => <ReferenceDatasetTable {...dataset} />}
+    />
+  </Switch>
+);
+
+ReferenceDatasetDetail.propTypes = {
+  dataset: PropTypes.object.isRequired,
+  updateReferenceDataset: PropTypes.func,
+};
+
+export default connect(null, { updateReferenceDataset })(
+  ReferenceDatasetDetail
+);