@truedat/dd 4.47.7 → 4.48.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [4.47.9] 2022-07-05
+
+### Added
+
+- [TD-4661] Support for ReferenceDatasets on Implementations
+
+## [4.47.8] 2022-07-02
+
+## Changed
+
+- [TD-4176] Add className to LinkStructureTagForm
+
 ## [4.47.7] 2022-07-02
 
 ## Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.47.7",
+  "version": "4.48.0",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.47.7",
+    "@truedat/test": "4.47.9",
     "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.6.4",
-    "@truedat/auth": "4.47.7",
-    "@truedat/core": "4.47.7",
-    "@truedat/df": "4.47.7",
+    "@truedat/auth": "4.48.0",
+    "@truedat/core": "4.48.0",
+    "@truedat/df": "4.48.0",
     "lodash": "^4.17.21",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -112,5 +112,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "5e85149774b055fd61014633988cdf6aa9b9da4f"
+  "gitHead": "c4587d045fa6c9028082bdfbcfb35e4383f117ed"
 }

package/src/api/queries.js

@@ -31,6 +31,16 @@ export const REFERENCE_DATASETS_QUERY = gql`
   }
 `;
 
+export const REFERENCE_DATASETS_HEADERS_QUERY = gql`
+  query ReferenceDatasetsHeaders {
+    referenceDatasets {
+      id
+      name
+      headers
+    }
+  }
+`;
+
 export const REFERENCE_DATASET_QUERY = gql`
   query ReferenceDataset($id: ID!) {
     referenceDataset(id: $id) {

package/src/components/LinkStructureTagForm.js

@@ -61,7 +61,7 @@ export const LinkStructureTagForm = ({
   });
   const { isDirty, isValid } = formState;
   return (
-    <Container style={{ width: "300px" }}>
+    <Container className="link-structure-tag-form">
       <Form onSubmit={handleSubmit(onSubmit)}>
         <Controller
           control={control}

package/src/components/ReferenceDatasetSelectorInputField.js

@@ -0,0 +1,107 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+import { matchSorter } from "match-sorter";
+import { useIntl } from "react-intl";
+import { Container, Form, Dropdown, Icon } from "semantic-ui-react";
+
+import StructureSelectorInputFieldJoin from "./StructureSelectorInputFieldJoin";
+
+export const ReferenceDatasetSelectorInputField = ({
+  onChange,
+  onChangeField,
+  onDelete,
+  structures,
+  selectedStructure,
+  fieldWidth,
+  referenceDatasets,
+}) => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const { formatMessage } = useIntl();
+
+  const matchSorterFp = (items) =>
+    matchSorter(items, searchTerm, {
+      keys: ["name", "headers"],
+      threshold: matchSorter.rankings.CONTAINS,
+    });
+
+  const datasets = _.flow(
+    _.reject(
+      ({ id }) =>
+        _.any({
+          structure: {
+            type: "reference_dataset",
+            id,
+          },
+        })(structures) && id !== selectedStructure?.structure?.id
+    ),
+    _.cond([
+      [() => _.isEmpty(searchTerm), _.identity],
+      [_.stubTrue, matchSorterFp],
+    ])
+  )(referenceDatasets);
+
+  const options = _.map(({ id, name }) => ({ key: id, value: id, text: name }))(
+    datasets
+  );
+
+  const handleChange = (_e, { value }) =>
+    onChange(_.find({ id: value })(datasets));
+  const handleSearchChange = (_e, { searchQuery }) =>
+    setSearchTerm(searchQuery);
+  const handleSelectField = (clauses) => {
+    onChangeField({ ...selectedStructure, clauses });
+  };
+
+  return (
+    <>
+      <Form.Field width={fieldWidth ? fieldWidth : 7}>
+        <label>
+          {formatMessage({ id: `ruleImplementation.props.reference_dataset` })}
+          <Icon name="close" className="selectable" onClick={onDelete} />
+        </label>
+        <Dropdown
+          onChange={handleChange}
+          onSearchChange={handleSearchChange}
+          options={options}
+          placeholder={formatMessage({
+            id: `ruleImplementation.props.reference_dataset.placeholder`,
+          })}
+          search
+          searchQuery={searchTerm}
+          selection
+          value={selectedStructure?.structure?.id}
+        />
+      </Form.Field>
+      {_.prop("structure")(selectedStructure) && (
+        <Container style={{ paddingLeft: "8em" }}>
+          <Form.Field>
+            <label>
+              {formatMessage({
+                id: "structureSelector.union.criteria",
+              })}
+            </label>
+            <StructureSelectorInputFieldJoin
+              structures={structures}
+              selectedStructure={selectedStructure}
+              handleSelectField={handleSelectField}
+            />
+          </Form.Field>
+        </Container>
+      )}
+    </>
+  );
+};
+
+ReferenceDatasetSelectorInputField.propTypes = {
+  onChange: PropTypes.func,
+  onChangeField: PropTypes.func,
+  onDelete: PropTypes.func,
+  structures: PropTypes.array,
+  selectedStructure: PropTypes.object,
+  fieldWidth: PropTypes.number,
+  referenceDatasets: PropTypes.array,
+};
+
+export default ReferenceDatasetSelectorInputField;

package/src/components/StructureFieldsDropdown.js

@@ -19,34 +19,43 @@ export const StructureFieldsDropdown = ({
   multiple,
 }) => {
   const { formatMessage } = useIntl();
+
   const onClick = ({ value, modifier }) => {
-    onSelectField(dropdownItemToField(value), modifier);
+    if (!multiple) onSelectField(dropdownItemToField(value), modifier);
   };
 
   const onChangeStructureFieldsDropdown = (valueOrValues) => {
     return _.flow(
-      _.map((value) => {
-        return dropdownItemToField(value);
-      }),
+      _.map(dropdownItemToField),
       multiple ? onSelectFields : onSelectField
     )(Array.isArray(valueOrValues) ? valueOrValues : [valueOrValues]);
   };
 
   const dropdownItemToField = (value) => {
-    const [data_structure_id, parent_index] = _.isString(value)
-      ? value.split("/").map(Number)
+    const [fieldIdentifier, parentIndex] = _.isString(value)
+      ? value.split("/")
       : [value, undefined];
-    return _.isNil(parent_index)
-      ? _.find({ data_structure_id: data_structure_id })(structureFields)
+    return _.isNil(parentIndex)
+      ? _.find({ data_structure_id: Number(fieldIdentifier) })(structureFields)
+      : _.any({
+          type: "reference_dataset_field",
+          parent_index: Number(parentIndex),
+        })(structureFields)
+      ? _.find({
+          name: fieldIdentifier,
+          parent_index: Number(parentIndex),
+        })(structureFields)
       : _.find({
-          data_structure_id: data_structure_id,
-          parent_index: parent_index,
+          data_structure_id: Number(fieldIdentifier),
+          parent_index: Number(parentIndex),
         })(structureFields);
   };
 
   const formatOption = (field) => {
     const value = _.isNil(field?.parent_index)
       ? field.data_structure_id
+      : field?.type === "reference_dataset_field"
+      ? `${field.name}/${field.parent_index}`
       : `${field.data_structure_id}/${field.parent_index}`;
     const modifier = _.find({ sourceType: field.field_type })(
       typeCastModifiers
@@ -79,7 +88,7 @@ export const StructureFieldsDropdown = ({
   const toFieldOption = (field) =>
     _.has("options")(field)
       ? {
-          icon: "table",
+          icon: field?.isReferenceDataset ? "list ol" : "table",
           label: field.label,
           options: _.map(formatOption)(field.options),
         }
@@ -92,7 +101,16 @@ export const StructureFieldsDropdown = ({
       (acc, v, k) =>
         _.isNil(k) || k === "undefined"
           ? [...acc, ...v]
-          : [...acc, { label: k, options: v }],
+          : [
+              ...acc,
+              {
+                label: k,
+                options: v,
+                isReferenceDataset: _.any({ type: "reference_dataset_field" })(
+                  v
+                ),
+              },
+            ],
       []
     ),
     _.map(toFieldOption)

package/src/components/StructureSelectorInputField.js

@@ -68,7 +68,6 @@ export const StructureSelectorInputField = ({
             width={fieldWidth ? fieldWidth : 7}
           >
             <input className="action-pointer" />
-            <Icon name={active ? "minus circle" : "plus circle"} />
           </Form.Input>
         )}
         {active && (

package/src/components/StructureSelectorInputFieldJoin.js

@@ -3,6 +3,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Grid, Icon, Popup } from "semantic-ui-react";
+import { getStructureFieldOptionValue } from "../selectors/getStructureFieldOptionValue";
 import StructureFieldsDropdown from "./StructureFieldsDropdown";
 
 const getClauses = (selectedStructure) => {
@@ -41,31 +42,29 @@ const JoinClause = ({
 }) => {
   const addActionDisabled = _.isEmpty(left) || _.isEmpty(right);
   const { formatMessage } = useIntl();
+
   return (
-    <Grid>
+    <Grid style={{ display: "flex", alignItems: "center" }}>
       <Grid.Column width={4}>
         <StructureFieldsDropdown
           fluid
           parentStructures={structureToFieldDropdown([selectedStructure])}
           onSelectField={handleChange("left", idx)}
-          value={
-            _.isNil(_.prop("parent_index")(left))
-              ? _.prop("id")(left)
-              : `${_.prop("id")(left)}/${_.prop("parent_index")(left)}`
-          }
+          value={getStructureFieldOptionValue(left)}
         />
       </Grid.Column>
-      <Grid.Column width={1}>{"="}</Grid.Column>
+      <Grid.Column
+        width={1}
+        style={{ textAlign: "center", fontSize: "x-large" }}
+      >
+        {"="}
+      </Grid.Column>
       <Grid.Column width={4}>
         <StructureFieldsDropdown
           fluid
           parentStructures={structureToFieldDropdown(parentStructures)}
           onSelectField={handleChange("right", idx)}
-          value={
-            _.isNil(_.prop("parent_index")(right))
-              ? _.prop("id")(right)
-              : `${_.prop("id")(right)}/${_.prop("parent_index")(right)}`
-          }
+          value={getStructureFieldOptionValue(right)}
         />
       </Grid.Column>
       <Grid.Column width={1}>
@@ -128,15 +127,16 @@ export const StructureSelectorInputFieldJoin = ({
       data_structure_id: id,
       parent_index: parent_index,
       name: name,
+      type: type,
     } = data;
     const newClause = _.isNil(parent_index)
       ? { ...clauses[idx], [prop]: { id, name } }
-      : { ...clauses[idx], [prop]: { id, parent_index, name } };
+      : { ...clauses[idx], [prop]: { id, parent_index, name, type } };
     const newClauses = _.set(`[${idx}]`, newClause)(clauses);
     handleSelectField(newClauses);
   };
   return (
-    <>
+    <div style={{ marginBottom: "1em" }}>
       {clauses.map(({ left, right }, idx) => (
         <JoinClause
           key={idx}
@@ -150,7 +150,7 @@ export const StructureSelectorInputFieldJoin = ({
           selectedStructure={selectedStructure}
         />
       ))}
-    </>
+    </div>
   );
 };
 

package/src/components/ValueConditionStructure.js

@@ -4,7 +4,6 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
 import { getFieldType } from "@truedat/core/services/fieldType";
-import { fetchStructure } from "../routines";
 import StructureFieldsDropdown from "./StructureFieldsDropdown";
 
 export const ValueConditionStructure = ({
@@ -52,15 +51,10 @@ const mapStateToProps = (state) => ({
   structuresSiblings: state.structuresSiblings,
 });
 
-const mapDispatchToProps = { fetchStructure };
-
 ValueConditionStructure.propTypes = {
   onChange: PropTypes.func,
   siblings: PropTypes.array,
   structuresSiblings: PropTypes.object,
   value: PropTypes.number,
 };
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ValueConditionStructure);
+export default connect(mapStateToProps)(ValueConditionStructure);

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

@@ -3,8 +3,7 @@
 exports[`<LinkStructureTagForm /> create button enabled if there is only one tag available 1`] = `
 <div>
   <div
-    class="ui container"
-    style="width: 300px;"
+    class="ui container link-structure-tag-form"
   >
     <form
       class="ui form"
@@ -98,8 +97,7 @@ exports[`<LinkStructureTagForm /> create button enabled if there is only one tag
 exports[`<LinkStructureTagForm /> matches the latest snapshot create 1`] = `
 <div>
   <div
-    class="ui container"
-    style="width: 300px;"
+    class="ui container link-structure-tag-form"
   >
     <form
       class="ui form"
@@ -213,8 +211,7 @@ exports[`<LinkStructureTagForm /> matches the latest snapshot create 1`] = `
 exports[`<LinkStructureTagForm /> matches the latest snapshot create without comment 1`] = `
 <div>
   <div
-    class="ui container"
-    style="width: 300px;"
+    class="ui container link-structure-tag-form"
   >
     <form
       class="ui form"
@@ -326,8 +323,7 @@ exports[`<LinkStructureTagForm /> matches the latest snapshot create without com
 exports[`<LinkStructureTagForm /> matches the latest snapshot edit 1`] = `
 <div>
   <div
-    class="ui container"
-    style="width: 300px;"
+    class="ui container link-structure-tag-form"
   >
     <form
       class="ui form"

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

@@ -1,7 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<StructureSelectorInputFieldJoin /> matches the latest JoinClause snapshot 1`] = `
-<Grid>
+<Grid
+  style={
+    Object {
+      "alignItems": "center",
+      "display": "flex",
+    }
+  }
+>
   <GridColumn
     width={4}
   >
@@ -19,6 +26,12 @@ exports[`<StructureSelectorInputFieldJoin /> matches the latest JoinClause snaps
     />
   </GridColumn>
   <GridColumn
+    style={
+      Object {
+        "fontSize": "x-large",
+        "textAlign": "center",
+      }
+    }
     width={1}
   >
     =
@@ -74,7 +87,13 @@ exports[`<StructureSelectorInputFieldJoin /> matches the latest JoinClause snaps
 `;
 
 exports[`<StructureSelectorInputFieldJoin /> matches the latest snapshot 1`] = `
-<Fragment>
+<div
+  style={
+    Object {
+      "marginBottom": "1em",
+    }
+  }
+>
   <JoinClause
     createClause={[Function]}
     deleteClause={[Function]}
@@ -88,11 +107,17 @@ exports[`<StructureSelectorInputFieldJoin /> matches the latest snapshot 1`] = `
       }
     }
   />
-</Fragment>
+</div>
 `;
 
 exports[`<StructureSelectorInputFieldJoin /> matches the latest snapshot with various clauses 1`] = `
-<Fragment>
+<div
+  style={
+    Object {
+      "marginBottom": "1em",
+    }
+  }
+>
   <JoinClause
     createClause={[Function]}
     deleteClause={[Function]}
@@ -175,5 +200,5 @@ exports[`<StructureSelectorInputFieldJoin /> matches the latest snapshot with va
       }
     }
   />
-</Fragment>
+</div>
 `;

package/src/index.js

@@ -2,6 +2,7 @@ import * as components from "./components";
 import * as reducers from "./reducers";
 import * as routines from "./routines";
 import * as sagas from "./sagas";
+import * as selectors from "./selectors";
 import * as messages from "./messages";
 
-export { components, reducers, routines, sagas, messages };
+export { components, reducers, routines, sagas, selectors, messages };

package/src/sagas/requestGrantRemoval.js

@@ -14,7 +14,6 @@ export function* requestGrantRemovalSaga({ payload }) {
     yield put(requestGrantRemoval.success(data));
     yield put(fetchStructure.trigger({ id: data_structure_id, version }));
   } catch (error) {
-    console.error("error", error);
     if (error.response) {
       const { status, data } = error.response;
       yield put(requestGrantRemoval.failure({ status, data }));

package/src/selectors/getStructureFieldOptionValue.js

@@ -0,0 +1,8 @@
+import _ from "lodash/fp";
+
+export const getStructureFieldOptionValue = (structure) =>
+  _.isNil(_.prop("parent_index")(structure))
+    ? _.prop("id")(structure)
+    : structure?.type === "reference_dataset_field"
+    ? `${_.prop("name")(structure)}/${_.prop("parent_index")(structure)}`
+    : `${_.prop("id")(structure)}/${_.prop("parent_index")(structure)}`;

package/src/selectors/getStructuresFields.js

@@ -8,20 +8,34 @@ const withFieldType = (field) => ({
 });
 
 const getFields = (parent, structuresFields) =>
-  _.flow(
-    _.propOr([], _.path("id")(parent)),
-    _.map((sf) => ({
-      ...sf,
-      label: _.prop("alias.text")(parent) || _.prop("name")(parent),
-      parent_index: _.prop("alias.index")(parent),
-    }))
-  )(structuresFields);
-
+  parent?.type !== "reference_dataset"
+    ? _.flow(
+        _.propOr([], _.path("id")(parent)),
+        _.map((sf) => ({
+          ...sf,
+          label: _.prop("alias.text")(parent) || _.prop("name")(parent),
+          parent_index: _.prop("alias.index")(parent),
+        }))
+      )(structuresFields)
+    : _.flow(
+        _.get("headers"),
+        _.map((name) => ({
+          name,
+          type: "reference_dataset_field",
+          label: _.prop("name")(parent),
+          parent_index: _.prop("alias.index")(parent),
+          data_type_class: "string",
+        }))
+      )(parent);
 const getFieldsFromStructures = (structuresFields, parentStructures) =>
   _.flow(
     _.map((parent) => getFields(parent, structuresFields)),
     _.flatten,
-    _.uniqBy((s) => `${s.data_structure_id}/${s.parent_index}`),
+    _.uniqBy((s) =>
+      s?.type === "reference_dataset_field"
+        ? `${s.name}/${s.parent_index}`
+        : `${s.data_structure_id}/${s.parent_index}`
+    ),
     _.map(withFieldType)
   )(parentStructures);