@truedat/dd 5.2.9 → 5.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [5.3.0] 2023-03-08
+
+### Added
+
+- [TD-4438] Reference dataset field selector
+
 ## [5.2.9] 2023-02-28
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "5.2.9",
+  "version": "5.3.0",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -87,9 +87,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "5.2.9",
-    "@truedat/core": "5.2.9",
-    "@truedat/df": "5.2.9",
+    "@truedat/auth": "5.3.0",
+    "@truedat/core": "5.3.0",
+    "@truedat/df": "5.3.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "path-to-regexp": "^1.7.0",
@@ -114,5 +114,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "39162d892066f21b9e894be20abfe38304b62f91"
+  "gitHead": "4893c314084a4ea7ca48a4e251d4e47565f3f030"
 }

package/src/components/ReferenceDatasetFieldSelector.js

@@ -0,0 +1,146 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import React, { useEffect, useState } from "react";
+import { useIntl } from "react-intl";
+import { useQuery } from "@apollo/client";
+import { Loading } from "@truedat/core/components";
+import { Dropdown } from "semantic-ui-react";
+import { REFERENCE_DATASETS_QUERY } from "@truedat/dd/api/queries";
+
+const refDatasetsToOptions = (referenceDatasets) => {
+  return _.map(({ id, name }) => {
+    return { key: id, text: name, value: id };
+  })(referenceDatasets);
+};
+
+const headersToOptions = (refDatasetId) => (headers) => {
+  return _.map((header) => {
+    return {
+      key: `${refDatasetId}_${header}`,
+      text: header,
+      value: header,
+    };
+  })(headers);
+};
+
+const onReferenceDatasetChange =
+  (referenceDatasets, setHeaders, setSelectedRefDataset, onChange) =>
+  (_e, { value: refDatasetId }) => {
+    /* Only reference dataset selected, its field is still yet to be chosen.
+     * Therefore:
+     * Clear any previously selected field still showing in ConditionSummary
+     * Make validation fail using field nulled name so that "Next"
+     * RuleImplementationForm button is disabled.
+     */
+    onChange(
+      null,
+      {
+        type: "reference_dataset_field",
+        name: null,
+        referenceDataset: { id: refDatasetId },
+      },
+      null
+    );
+    setSelectedRefDataset(_.find({ id: refDatasetId })(referenceDatasets));
+    _.flow(
+      _.find({ id: refDatasetId }),
+      _.prop("headers"),
+      setHeaders
+    )(referenceDatasets);
+  };
+
+export const ReferenceDatasetFieldSelector = ({
+  referenceDatasets,
+  referenceDataset,
+  header,
+  onChange,
+}) => {
+  const { formatMessage } = useIntl();
+  const [headers, setHeaders] = useState(
+    _.find({ id: referenceDataset?.id })(referenceDatasets)?.headers || []
+  );
+  const [selectedRefDataset, setSelectedRefDataset] =
+    useState(referenceDataset);
+
+  const [selectedHeader, setSelectedHeader] = useState(header);
+
+  // if the operator dropdown changes, referenceDataset will come as undefined
+  useEffect(() => {
+    if (referenceDataset == null) {
+      setSelectedRefDataset(null);
+      setSelectedHeader(null);
+      setHeaders([]);
+    }
+  }, [referenceDataset]);
+
+  return (
+    <>
+      <label>
+        {formatMessage({
+          id: "referenceDatasetFields.dropdown.placeholder",
+        })}
+      </label>
+      <Dropdown
+        className="reference-dataset"
+        selection
+        placeholder={formatMessage({
+          id: "referenceDataset.dropdown.placeholder",
+        })}
+        options={refDatasetsToOptions(referenceDatasets)}
+        value={selectedRefDataset?.id || ""}
+        onChange={onReferenceDatasetChange(
+          referenceDatasets,
+          setHeaders,
+          setSelectedRefDataset,
+          onChange
+        )}
+      />
+      <Dropdown
+        selection
+        placeholder={formatMessage({
+          id: "referenceDatasetFields.dropdown.placeholder",
+        })}
+        disabled={!selectedRefDataset}
+        options={headersToOptions(selectedRefDataset?.id)(headers)}
+        value={selectedHeader || ""}
+        onChange={(e, { value: newHeader }) => {
+          setSelectedHeader(newHeader);
+          onChange(
+            null,
+            {
+              referenceDataset: _.pick(["id", "name"], selectedRefDataset),
+              name: newHeader,
+              type: "reference_dataset_field",
+            },
+            null
+          );
+        }}
+      />
+    </>
+  );
+};
+
+ReferenceDatasetFieldSelector.propTypes = {
+  header: PropTypes.string,
+  onChange: PropTypes.func,
+  referenceDatasets: PropTypes.array,
+  referenceDataset: PropTypes.object,
+};
+
+export const ReferenceDatasetFieldSelectorLoader = (props) => {
+  const { loading, error, data } = useQuery(REFERENCE_DATASETS_QUERY, {
+    fetchPolicy: "cache-and-network",
+  });
+  if (error) return null;
+  if (loading) return <Loading />;
+  const referenceDatasets = data?.referenceDatasets || [];
+  return (
+    <ReferenceDatasetFieldSelector
+      loading={loading}
+      referenceDatasets={referenceDatasets}
+      {...props}
+    />
+  );
+};
+
+export default ReferenceDatasetFieldSelectorLoader;

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

@@ -0,0 +1,86 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import { REFERENCE_DATASETS_QUERY } from "../../api/queries";
+import ReferenceDatasetFieldSelector from "../ReferenceDatasetFieldSelector";
+
+const referenceDatasets = [
+  {
+    __typename: "ReferenceDataset",
+    id: "1",
+    name: "countries",
+    headers: ["CODE", "DESC_ES", "DESC_EN"],
+    rowCount: 9,
+    updatedAt: "2023-03-04T12:10:53.245332Z",
+  },
+  {
+    __typename: "ReferenceDataset",
+    id: "2",
+    name: "currencies",
+    headers: ["ENTITY", "Currency", "Alphabetic Code", "Numeric Code"],
+    rowCount: 5,
+    updatedAt: "2023-03-05T09:57:59.765822Z",
+  },
+];
+
+const referenceDatasetsMock = {
+  request: {
+    query: REFERENCE_DATASETS_QUERY,
+  },
+  result: { data: { referenceDatasets } },
+};
+
+describe("<ReferenceDatasetFieldSelector />", () => {
+  it("selecting reference dataset fills fields dropdown; clicking a field calls onChange", async () => {
+    const onChange = jest.fn();
+    const renderOpts = {
+      mocks: [referenceDatasetsMock],
+    };
+    const { queryAllByText, getByRole } = render(
+      <ReferenceDatasetFieldSelector onChange={onChange} />,
+      renderOpts
+    );
+    const countriesOptionQuery = () =>
+      getByRole("option", { name: /countries/i });
+    await waitFor(() => {
+      // also matches "reference dataset field", get first
+      expect(queryAllByText(/Reference dataset/i)[0]).toBeInTheDocument();
+      // same text for label and dropdown, match the second one, the dropdown
+      expect(queryAllByText(/Reference dataset field/i)[1]).toBeInTheDocument();
+      expect(countriesOptionQuery()).toBeInTheDocument();
+      expect(getByRole("option", { name: /currencies/i })).toBeInTheDocument();
+    });
+
+    userEvent.click(countriesOptionQuery());
+
+    const optionQuery = () => getByRole("option", { name: /CODE/i });
+    await waitFor(() => {
+      expect(optionQuery()).toBeInTheDocument();
+    });
+    userEvent.click(optionQuery());
+    expect(onChange).toHaveBeenNthCalledWith(
+      1,
+      null,
+      {
+        name: null,
+        referenceDataset: { id: "1" },
+        type: "reference_dataset_field",
+      },
+      null
+    );
+    expect(onChange).toHaveBeenNthCalledWith(
+      2,
+      null,
+      {
+        name: "CODE",
+        referenceDataset: {
+          id: "1",
+          name: "countries",
+        },
+        type: "reference_dataset_field",
+      },
+      null
+    );
+  });
+});