@truedat/dd 4.44.3 → 4.44.4

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.3",
+  "version": "4.44.4",
   "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.44.3",
+    "@truedat/test": "4.44.4",
     "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.44.3",
-    "@truedat/core": "4.44.3",
-    "@truedat/df": "4.44.3",
+    "@truedat/auth": "4.44.4",
+    "@truedat/core": "4.44.4",
+    "@truedat/df": "4.44.4",
     "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": "d5e72d523389c6e66d6f7168d7e3546b5d2ffdda"
+  "gitHead": "36fb183e1d22181e6a15b3bac2c01b39214eacdb"
 }

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/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/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/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
+);

package/src/components/ReferenceDatasetForm.js

@@ -0,0 +1,109 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useForm, Controller } from "react-hook-form";
+import { connect } from "react-redux";
+import { Button, Form } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { HistoryBackButton } from "@truedat/core/components";
+
+const MAX_SIZE_MB = 2;
+const MAX_SIZE = MAX_SIZE_MB * 1024 * 1024; // 2MB
+
+const datasetValidator = (formatMessage) => (value) =>
+  _.isNull(value)
+    ? true
+    : value.size > MAX_SIZE
+    ? formatMessage(
+        { id: "widget.image.error.too_big" },
+        { size_mb: MAX_SIZE_MB }
+      )
+    : true;
+
+export const ReferenceDatasetForm = ({ saving, dataset = {}, onSubmit }) => {
+  const { formatMessage } = useIntl();
+  const { handleSubmit, control, formState } = useForm({
+    mode: "all",
+    defaultValues: { name: dataset?.name || "", file: null },
+  });
+  const { isDirty, isValid } = formState;
+  const disabled = saving || !isDirty || !isValid;
+  return (
+    <Form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name="name"
+        rules={{
+          required: formatMessage(
+            { id: "form.validation.required" },
+            { prop: formatMessage({ id: "referenceDataset.name" }) }
+          ),
+        }}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            autoComplete="off"
+            error={!!error}
+            label={formatMessage({ id: "referenceDataset.name" })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            value={value || ""}
+            required
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="file"
+        rules={{
+          validate: datasetValidator(formatMessage),
+          required: dataset?.id
+            ? false
+            : formatMessage(
+                { id: "form.validation.required" },
+                { prop: formatMessage({ id: "referenceDataset.file" }) }
+              ),
+        }}
+        render={({ field: { onBlur, onChange }, fieldState: { error } }) => (
+          <Form.Input
+            type="file"
+            error={error?.message}
+            label={formatMessage({ id: "referenceDataset.file" })}
+            onBlur={onBlur}
+            onChange={(e) => onChange(e.target.files[0])}
+            required={!dataset?.id}
+            input={{ accept: "text/*,.csv,.txt" }}
+          />
+        )}
+      />
+      <div className="actions">
+        <Button
+          floated="right"
+          type="submit"
+          primary
+          loading={saving}
+          disabled={disabled}
+          content={formatMessage({ id: "actions.save" })}
+        />
+        <HistoryBackButton
+          content={formatMessage({ id: "actions.cancel" })}
+          disabled={saving}
+        />
+      </div>
+    </Form>
+  );
+};
+
+ReferenceDatasetForm.propTypes = {
+  onSubmit: PropTypes.func,
+  saving: PropTypes.bool,
+  dataset: PropTypes.object,
+};
+
+export const mapStateToProps = ({ referenceDatasetSaving }) => ({
+  saving: !!referenceDatasetSaving,
+});
+
+export default connect(mapStateToProps)(ReferenceDatasetForm);

package/src/components/ReferenceDatasetHeader.js

@@ -0,0 +1,32 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { Header, Icon, Grid } from "semantic-ui-react";
+import ReferenceDatasetActions from "./ReferenceDatasetActions";
+
+export const ReferenceDatasetHeader = ({ dataset }) =>
+  _.isEmpty(dataset) ? null : (
+    <Grid>
+      <Grid.Column width={8}>
+        <Header as="h2">
+          <Icon circular name="list ol" />
+          <Header.Content>
+            {dataset.name}
+            <Header.Subheader>
+              <FormattedMessage id="referenceDataset" />
+            </Header.Subheader>
+          </Header.Content>
+        </Header>
+      </Grid.Column>
+      <Grid.Column width={8} textAlign="right">
+        <ReferenceDatasetActions dataset={dataset} />
+      </Grid.Column>
+    </Grid>
+  );
+
+ReferenceDatasetHeader.propTypes = {
+  dataset: PropTypes.object.isRequired,
+};
+
+export default ReferenceDatasetHeader;

package/src/components/ReferenceDatasetRoutes.js

@@ -0,0 +1,56 @@
+import _ from "lodash/fp";
+import React from "react";
+import { Route, Switch, useParams } from "react-router-dom";
+import { useQuery } from "@apollo/client";
+import { Unauthorized, Loading } from "@truedat/core/components";
+import { useAuthorized } from "@truedat/core/hooks";
+import {
+  REFERENCE_DATASETS,
+  REFERENCE_DATASET_NEW,
+  REFERENCE_DATASET,
+} from "@truedat/core/routes";
+import { REFERENCE_DATASET_QUERY } from "../api/queries";
+import ReferenceDataset from "./ReferenceDataset";
+import ReferenceDatasets from "./ReferenceDatasets";
+import ReferenceDatasetCreate from "./ReferenceDatasetCreate";
+
+export const DatasetLoader = () => {
+  const { id } = useParams();
+  const { loading, error, data } = useQuery(REFERENCE_DATASET_QUERY, {
+    variables: { id },
+  });
+  if (error) return null;
+  if (loading) return <Loading />;
+  const dataset = data?.referenceDataset;
+  return _.isEmpty(dataset) ? null : <ReferenceDataset dataset={dataset} />;
+};
+
+export const AuthorizedReferenceDatasetRoutes = () => (
+  <Switch>
+    <Route
+      path={REFERENCE_DATASET_NEW}
+      exact
+      render={() => <ReferenceDatasetCreate />}
+    />
+    <Route
+      path={REFERENCE_DATASETS}
+      exact
+      render={() => <ReferenceDatasets />}
+    />
+    <Route path={REFERENCE_DATASET} render={() => <DatasetLoader />} />
+  </Switch>
+);
+
+export const ReferenceDatasetRoutes = () => {
+  const authorized = useAuthorized();
+  return (
+    <Route
+      path={REFERENCE_DATASETS}
+      render={() =>
+        authorized ? <AuthorizedReferenceDatasetRoutes /> : <Unauthorized />
+      }
+    />
+  );
+};
+
+export default ReferenceDatasetRoutes;

package/src/components/ReferenceDatasetTable.js

@@ -0,0 +1,42 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Table } from "semantic-ui-react";
+
+const truncateOpts = { length: 100 };
+
+export const DataRow = ({ values }) => (
+  <Table.Row>
+    {values.map((value, key) => (
+      <Table.Cell key={key}>{_.truncate(truncateOpts)(value)}</Table.Cell>
+    ))}
+  </Table.Row>
+);
+
+DataRow.propTypes = {
+  values: PropTypes.arrayOf(PropTypes.string),
+};
+
+export const ReferenceDatasetTable = ({ headers = [], rows = [] }) => (
+  <Table compact basic="very">
+    <Table.Header>
+      <Table.Row>
+        {headers.map((text, key) => (
+          <Table.HeaderCell key={key} content={text} />
+        ))}
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      {rows.map((values, key) => (
+        <DataRow key={key} values={values} />
+      ))}
+    </Table.Body>
+  </Table>
+);
+
+ReferenceDatasetTable.propTypes = {
+  headers: PropTypes.arrayOf(PropTypes.string).isRequired,
+  rows: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,
+};
+
+export default ReferenceDatasetTable;