@truedat/dd 4.47.6 → 4.47.9

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # 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
+
+- [TD-4176] Added description in structure tag
+
+## Changed
+
+- [TD-4176]
+  - Changed description by comment in structure tag link
+  - Commend now is not mandatory field
+
 ## [4.47.5] 2022-06-30
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.47.6",
+  "version": "4.47.9",
   "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.6",
+    "@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.6",
-    "@truedat/core": "4.47.6",
-    "@truedat/df": "4.47.6",
+    "@truedat/auth": "4.47.9",
+    "@truedat/core": "4.47.9",
+    "@truedat/df": "4.47.9",
     "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": "07210600d97244d32085d7166595ee030e6bb578"
+  "gitHead": "21954b7a0ea8240d2a9e8dc5014372eceed3b047"
 }

package/src/api/fragments.js

@@ -4,6 +4,7 @@ export const STRUCTURE_TAG_DETAIL = gql`
   fragment StructureTagDetail on StructureTag {
     id
     name
+    description
     domainIds
     structureCount
   }

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

@@ -10,7 +10,7 @@ import { deleteLinkStructureTag, linkStructureTag } from "../routines";
 
 export const LinkStructureTagForm = ({
   deleteLinkStructureTag,
-  description,
+  comment,
   linkedStructureTags,
   linkId,
   linkStructureTag,
@@ -29,7 +29,11 @@ export const LinkStructureTagForm = ({
   const options = _.flow(
     _.filter(({ id }) => _.includes(id)(availableTags)),
     _.sortBy(accentInsensitivePathOrder("name")),
-    _.map(({ id, name }) => ({ value: id, text: name }))
+    _.map(({ id, name, description }) => ({
+      value: id,
+      text: name,
+      description: description,
+    }))
   )(structureTags);
   const defaultTag = _.negate(_.isNil)(tagId)
     ? tagId
@@ -43,7 +47,7 @@ export const LinkStructureTagForm = ({
     const payload = {
       structureId,
       tagId: params.tag,
-      tag: { description: params.description },
+      tag: { comment: params.comment },
     };
     linkStructureTag(payload);
   };
@@ -51,13 +55,13 @@ export const LinkStructureTagForm = ({
   const { handleSubmit, control, formState } = useForm({
     mode: "all",
     defaultValues: {
-      description: description || "",
+      comment: comment || "",
       tag: defaultTag,
     },
   });
   const { isDirty, isValid } = formState;
   return (
-    <Container style={{ width: "300px" }}>
+    <Container className="link-structure-tag-form">
       <Form onSubmit={handleSubmit(onSubmit)}>
         <Controller
           control={control}
@@ -87,16 +91,15 @@ export const LinkStructureTagForm = ({
         />
         <Controller
           control={control}
-          name="description"
-          rules={{ required: true }}
+          name="comment"
           render={({
             field: { onBlur, onChange, value },
             fieldState: { error },
           }) => (
             <Form.TextArea
-              data-testid="description-id"
+              data-testid="comment-id"
               error={!!error}
-              name="description"
+              name="comment"
               label={formatMessage({ id: "structure.tag.textArea.label" })}
               placeholder={formatMessage({
                 id: "structure.tag.textArea.placeholder",
@@ -110,7 +113,7 @@ export const LinkStructureTagForm = ({
         <div className="actions">
           <Button
             type="submit"
-            disabled={!isDirty || !isValid}
+            disabled={(!isDirty && options.length > 1) || !isValid}
             primary
             content={formatMessage({ id: submitTitle })}
           />
@@ -130,7 +133,7 @@ export const LinkStructureTagForm = ({
 
 LinkStructureTagForm.propTypes = {
   deleteLinkStructureTag: PropTypes.func,
-  description: PropTypes.string,
+  comment: PropTypes.string,
   linkedStructureTags: PropTypes.array,
   linkId: PropTypes.number,
   linkStructureTag: PropTypes.func,

package/src/components/LinkedStructureTag.js

@@ -1,19 +1,22 @@
 import _ from "lodash/fp";
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import { Icon, Label, Popup } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { Icon, Label, Popup, Header } from "semantic-ui-react";
 import { connect } from "react-redux";
 import LinkStructureTagForm from "./LinkStructureTagForm";
 
-const LinkedStructureTag = ({
+export const LinkedStructureTag = ({
   id,
   _embedded,
   editable,
-  description,
+  comment,
   loading,
   structureTags,
 }) => {
+  const { formatMessage } = useIntl();
   const name = _embedded.data_structure_tag.name;
+  const description = _embedded.data_structure_tag.description;
   const tagId = _embedded.data_structure_tag.id;
   const [openDescription, setOpenDescription] = useState(false);
   const [openForm, setOpenForm] = useState(false);
@@ -24,16 +27,46 @@ const LinkedStructureTag = ({
 
   const trigger = editable ? <Icon link name="edit" /> : null;
 
+  const renderTooltip = () => {
+    const descriptionTooltip = _.isEmpty(description) ? null : (
+      <Header as="h2" subheader={description} />
+    );
+
+    const commentTooltip = _.isEmpty(comment) ? null : (
+      <>
+        <Header
+          as="h5"
+          content={formatMessage({ id: "structure.tag.tooltip.commentTitle" })}
+        />
+        <p>{comment}</p>
+      </>
+    );
+
+    return (
+      <>
+        {descriptionTooltip}
+        {commentTooltip}
+      </>
+    );
+  };
+
   return (
     <Popup
       basic
-      content={description}
       open={openDescription}
       onOpen={() => {
-        if (!openForm) setOpenDescription(true);
+        const commentCondition = !_.isEmpty(comment);
+        const descriptionCondition = !_.isEmpty(description);
+        const openFormCondition = !openForm;
+
+        const openTooltipCondition =
+          (commentCondition || descriptionCondition) && openFormCondition;
+
+        if (openTooltipCondition) setOpenDescription(true);
       }}
       onClose={() => setOpenDescription(false)}
       positionFixed
+      className="popup-tag"
       trigger={
         <Label tag style={{ marginLeft: "1.5em" }}>
           {_.isEmpty(structureTags) ? null : (
@@ -49,7 +82,7 @@ const LinkedStructureTag = ({
               flowing
               content={
                 <LinkStructureTagForm
-                  description={description}
+                  comment={comment}
                   linkId={id}
                   tagId={tagId}
                 />
@@ -64,13 +97,15 @@ const LinkedStructureTag = ({
           {name}
         </Label>
       }
-    />
+    >
+      {renderTooltip()}
+    </Popup>
   );
 };
 
 LinkedStructureTag.propTypes = {
   _embedded: PropTypes.object,
-  description: PropTypes.string,
+  comment: PropTypes.string,
   editable: PropTypes.bool,
   id: PropTypes.number,
   loading: PropTypes.bool,

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/StructureTagForm.js

@@ -16,7 +16,7 @@ export const StructureTagForm = ({
   const { formatMessage } = useIntl();
   const { handleSubmit, control, formState } = useForm({
     mode: "all",
-    defaultValues: _.pick(["name", "domainIds"])(structureTag),
+    defaultValues: _.pick(["name", "description", "domainIds"])(structureTag),
   });
 
   const { isDirty, isValid } = formState;
@@ -46,6 +46,28 @@ export const StructureTagForm = ({
           />
         )}
       />
+      <Controller
+        control={control}
+        name="description"
+        rules={{ required: false }}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            autoComplete="off"
+            error={error}
+            id="description"
+            label={formatMessage({ id: "structureTagForm.props.description" })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({
+              id: "structureTagForm.props.description",
+            })}
+            value={value}
+          />
+        )}
+      />
       <Controller
         control={control}
         name="domainIds"

package/src/components/StructureTagsCards.js

@@ -36,6 +36,9 @@ export const StructureTagsCards = ({ deleteStructureTag, structureTags }) => {
             >
               {_.prop("name")(structureTag)}
             </Card.Header>
+            <Card.Description>
+              {_.prop("description")(structureTag)}
+            </Card.Description>
           </Card.Content>
           <Card.Content extra>
             <div className="ui actions">

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