@truedat/dd 4.53.0 → 4.53.2

package/CHANGELOG.md

@@ -1,7 +1,24 @@
 # Changelog
 
+## [4.53.2] 2022-10-07
+
+### Changed
+
+- [TD-5226] Use `useOperators` hook to load operators
+
+## [4.53.1] 2022-10-05
+
+### Changed
+
+- [TD-5098] Improve modifiers behaviour
+  - Fix field type selector for StructureFieldsDrowdown
+  - Fix fields applied modifiers for StructureFieldsDrowdown
+  - Allow multiple modifiers in ruleImplementationOperators reducer
+
 ## [4.52.5] 2022-09-30
 
+### Added
+
 - [TD-2430] Add join type selection when defining an implementation dataset
 
 ## [4.52.3] 2022-09-22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.53.0",
+  "version": "4.53.2",
   "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.53.0",
+    "@truedat/test": "4.53.2",
     "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.53.0",
-    "@truedat/core": "4.53.0",
-    "@truedat/df": "4.53.0",
+    "@truedat/auth": "4.53.2",
+    "@truedat/core": "4.53.2",
+    "@truedat/df": "4.53.2",
     "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": "c13d72dea3b93ba4f21b455dc2aaf9f289261dd3"
+  "gitHead": "e29af66624aad6ecce065ced88c8cc2e320d67e2"
 }

package/src/components/StructureFieldsDropdown.js

@@ -57,42 +57,47 @@ export const StructureFieldsDropdown = ({
       : field?.type === "reference_dataset_field"
       ? `${field.name}/${field.parent_index}`
       : `${field.data_structure_id}/${field.parent_index}`;
-    const modifier = _.find({ sourceType: field.field_type })(
+    const modifiers = _.filter({ sourceType: field.field_type })(
       typeCastModifiers
     );
-    if (modifier) {
-      return {
-        key: value,
-        text: `${field.name} (${formatMessage({
-          id: `filtersGrid.field.modifier.${modifier.name}`,
-        })})`,
-        modifier,
-        value: value,
-        icon: formatMessage({
-          id: `field_type.icon.${field.field_type}`,
-          defaultMessage: "hashtag",
-        }),
-      };
-    }
-
-    return {
-      key: value,
-      text: field.name,
+    const fieldsWithModifiers = _.map((modifier) => ({
+      key: `${value}#${modifier.name}`,
+      text: `${field.name} (${formatMessage({
+        id: `filtersGrid.field.modifier.${modifier.name}`,
+      })})`,
+      modifier,
       value: value,
       icon: formatMessage({
         id: `field_type.icon.${field.field_type}`,
         defaultMessage: "hashtag",
       }),
-    };
+    }))(modifiers);
+
+    const rawField =
+      _.isEmpty(modifiers) || field.field_type === modifiers[0].type
+        ? [
+            {
+              key: value,
+              text: field.name,
+              value: value,
+              icon: formatMessage({
+                id: `field_type.icon.${field.field_type}`,
+                defaultMessage: "hashtag",
+              }),
+            },
+          ]
+        : [];
+
+    return rawField.concat(fieldsWithModifiers);
   };
   const toFieldOption = (field) =>
     _.has("options")(field)
       ? {
           icon: field?.isReferenceDataset ? "list ol" : "table",
           label: field.label,
-          options: _.map(formatOption)(field.options),
+          options: _.flow(_.map(formatOption), _.flatten)(field.options),
         }
-      : formatOption(field);
+      : _.flatten(formatOption(field));
 
   const getOptions = _.flow(
     _.sortBy(_.flow(_.prop("name"), _.toLower)),

package/src/components/StructureGrantCart.js

@@ -3,7 +3,6 @@ import _ from "lodash/fp";
 import React, { useState, useEffect } from "react";
 import { Link, useLocation, useHistory } from "react-router-dom";
 import PropTypes from "prop-types";
-import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
 import {
@@ -16,9 +15,10 @@ import {
   Grid,
   Form,
 } from "semantic-ui-react";
+import { Loading } from "@truedat/core/components";
+import { useOperators } from "@truedat/core/hooks";
 import { GRANTS_REQUESTS_CHECKOUT, STRUCTURES } from "@truedat/core/routes";
 import { FiltersGrid } from "@truedat/dq/components/ruleImplementationForm/FiltersGrid";
-import { getRuleImplementationOperators } from "@truedat/dq/selectors/getRuleImplementationOperators";
 import {
   removeGrantRequestFromCart,
   updateGrantRequestFilter,
@@ -142,22 +142,24 @@ StructureGrantCart.propTypes = {
   updateGrantRequestFilter: PropTypes.func,
 };
 
-const mapStateToProps = (state) => {
-  const { structure, grantRequestsCart, userPermissions } = state;
-  return {
-    structure,
-    grantRequestsCart,
-    authorized: _.pathOr(false, "request_grant")(userPermissions),
-    typeOperators: getRuleImplementationOperators(state),
-  };
+export const StructureGrantCartLoader = (props) => {
+  const { data, error, loading } = useOperators();
+  if (error) return null;
+  if (loading) return <Loading />;
+  return <StructureGrantCart typeOperators={data} {...props} />;
 };
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators(
-    {
-      removeGrantRequestFromCart,
-      updateGrantRequestFilter,
-    },
-    dispatch
-  );
 
-export default connect(mapStateToProps, mapDispatchToProps)(StructureGrantCart);
+export const mapStateToProps = ({
+  structure,
+  grantRequestsCart,
+  userPermissions,
+}) => ({
+  structure,
+  grantRequestsCart,
+  authorized: _.pathOr(false, "request_grant")(userPermissions),
+});
+
+export default connect(mapStateToProps, {
+  removeGrantRequestFromCart,
+  updateGrantRequestFilter,
+})(StructureGrantCartLoader);

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

@@ -0,0 +1,181 @@
+import _ from "lodash/fp";
+import React from "react";
+import { render } from "@truedat/test/render";
+import StructureFieldsDropdown from "../StructureFieldsDropdown";
+import en from "../../messages/en";
+
+const renderOpts = {
+  messages: {
+    en: {
+      ...en,
+      "filtersGrid.field.modifier.cast_as_date": "Cast as date",
+      "filtersGrid.field.modifier.to_timestamp": "Cast as timestamp",
+      "filtersGrid.field.modifier.cast_as_date.format": "Date format",
+      "filtersGrid.field.modifier.to_string": "To string",
+      "filtersGrid.field.modifier.to_real_string": "To real string",
+      "filtersGrid.field.modifier.substring": "Substring",
+      "filtersGrid.field.modifier.substring.start": "String start position",
+      "filtersGrid.field.modifier.substring.end": "String end position",
+      "structureFields.dropdown.placeholder": "Fields",
+    },
+  },
+};
+
+const parentStructures = [
+  {
+    external_id: "postgres://postgres/td_audit/public/notifications",
+    id: 4801143,
+    name: "notifications",
+    type: "Table",
+    alias: {
+      index: 1,
+    },
+  },
+];
+
+const structureFields = [
+  {
+    data_structure_id: 4801152,
+    metadata: {
+      data_type_class: "number",
+    },
+    name: "id",
+    type: "Column",
+    label: "notifications",
+    parent_index: 1,
+    field_type: "number",
+  },
+  {
+    data_structure_id: 4801144,
+    metadata: {
+      data_type_class: "number",
+    },
+    name: "subscription_id",
+    type: "Column",
+    label: "notifications",
+    parent_index: 1,
+    field_type: "number",
+  },
+  {
+    data_structure_id: 4801145,
+    metadata: {
+      data_type_class: "timestamp",
+    },
+    name: "inserted_at",
+    type: "Column",
+    label: "notifications",
+    parent_index: 1,
+    field_type: "timestamp",
+  },
+  {
+    data_structure_id: 5732893,
+    metadata: {
+      data_type_class: "array",
+    },
+    name: "recipient_ids",
+    type: "Column",
+    label: "notifications",
+    parent_index: 1,
+    field_type: "string",
+  },
+];
+
+const commonProps = {
+  multiple: false,
+  label: "Value",
+  inline: false,
+  parentStructures,
+  structureFields,
+  typeCastModifiers: [],
+  filters: {
+    field_type: ["string"],
+  },
+};
+
+const getEnabledOptions = ({ getAllByRole }) =>
+  _.flow(
+    getAllByRole,
+    _.reject((i) => i.className.includes("disabled")),
+    _.map((i) => i.textContent)
+  )("option");
+
+describe("<StructureFieldsDropdown />", () => {
+  it("matches the latest snapshot for empty typeCastModifiers", async () => {
+    const props = { ...commonProps };
+    const component = render(
+      <StructureFieldsDropdown {...props} />,
+      renderOpts
+    );
+    const { container } = component;
+    const expectedOptions = ["recipient_ids"];
+    expect(container).toMatchSnapshot();
+    expect(getEnabledOptions(component)).toEqual(expectedOptions);
+  });
+
+  it("matches the latest snapshot for root fields of number type", async () => {
+    const props = {
+      ...commonProps,
+      filters: {
+        field_type: ["number"],
+      },
+    };
+    const component = render(
+      <StructureFieldsDropdown {...props} />,
+      renderOpts
+    );
+    const { container } = component;
+    const expectedOptions = ["id", "subscription_id"];
+    expect(container).toMatchSnapshot();
+    expect(getEnabledOptions(component)).toEqual(expectedOptions);
+  });
+
+  it("matches the latest snapshot for one typeCastModifiers of type string", async () => {
+    const props = {
+      ...commonProps,
+      typeCastModifiers: [
+        {
+          name: "to_real_string",
+          type: "string",
+          params: [],
+          sourceType: "string",
+        },
+      ],
+    };
+    const component = render(
+      <StructureFieldsDropdown {...props} />,
+      renderOpts
+    );
+    const { container } = component;
+    const expectedOptions = ["recipient_ids", "recipient_ids (To real string)"];
+    expect(container).toMatchSnapshot();
+    expect(getEnabledOptions(component)).toEqual(expectedOptions);
+  });
+
+  it("matches the latest snapshot for one typeCastModifiers of type timestamp", async () => {
+    const props = {
+      ...commonProps,
+      typeCastModifiers: [
+        {
+          name: "to_timestamp",
+          type: "timestamp",
+          params: [],
+          sourceType: "string",
+        },
+      ],
+      filters: {
+        field_type: ["timestamp"],
+      },
+    };
+    const component = render(
+      <StructureFieldsDropdown {...props} />,
+      renderOpts
+    );
+    const { container } = component;
+    const expectedOptions = [
+      "inserted_at",
+      "recipient_ids (Cast as timestamp)",
+    ];
+    expect(container).toMatchSnapshot();
+    expect(getEnabledOptions(component)).toEqual(expectedOptions);
+  });
+});

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

@@ -0,0 +1,370 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<StructureFieldsDropdown /> matches the latest snapshot for empty typeCastModifiers 1`] = `
+<div>
+  <label>
+    Value
+  </label>
+  <div
+    aria-expanded="false"
+    class="ui search dropdown selection"
+    label="Value"
+    role="combobox"
+  >
+    <input
+      aria-autocomplete="list"
+      autocomplete="off"
+      class="search"
+      tabindex="0"
+      type="text"
+      value=""
+    />
+    <div
+      aria-atomic="true"
+      aria-live="polite"
+      class="divider default text"
+      role="alert"
+    >
+      Fields
+    </div>
+    <i
+      aria-hidden="true"
+      class="dropdown icon"
+    />
+    <div
+      aria-multiselectable="false"
+      class="menu transition"
+      role="listbox"
+    >
+      <div
+        aria-checked="false"
+        aria-disabled="true"
+        aria-selected="false"
+        class="disabled item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <div
+          class="divider"
+        />
+        <div
+          class="header"
+        >
+          <i
+            aria-hidden="true"
+            class="table icon"
+          />
+          notifications
+        </div>
+      </div>
+      <div
+        aria-checked="false"
+        aria-selected="true"
+        class="selected item group"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <i
+          aria-hidden="true"
+          class="hashtag icon"
+        />
+        <span
+          class="text"
+        >
+          recipient_ids
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<StructureFieldsDropdown /> matches the latest snapshot for one typeCastModifiers of type string 1`] = `
+<div>
+  <label>
+    Value
+  </label>
+  <div
+    aria-expanded="false"
+    class="ui search dropdown selection"
+    label="Value"
+    role="combobox"
+  >
+    <input
+      aria-autocomplete="list"
+      autocomplete="off"
+      class="search"
+      tabindex="0"
+      type="text"
+      value=""
+    />
+    <div
+      aria-atomic="true"
+      aria-live="polite"
+      class="divider default text"
+      role="alert"
+    >
+      Fields
+    </div>
+    <i
+      aria-hidden="true"
+      class="dropdown icon"
+    />
+    <div
+      aria-multiselectable="false"
+      class="menu transition"
+      role="listbox"
+    >
+      <div
+        aria-checked="false"
+        aria-disabled="true"
+        aria-selected="false"
+        class="disabled item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <div
+          class="divider"
+        />
+        <div
+          class="header"
+        >
+          <i
+            aria-hidden="true"
+            class="table icon"
+          />
+          notifications
+        </div>
+      </div>
+      <div
+        aria-checked="false"
+        aria-selected="true"
+        class="selected item group"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <i
+          aria-hidden="true"
+          class="hashtag icon"
+        />
+        <span
+          class="text"
+        >
+          recipient_ids
+        </span>
+      </div>
+      <div
+        aria-checked="false"
+        aria-selected="false"
+        class="item group"
+        modifier="[object Object]"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <i
+          aria-hidden="true"
+          class="hashtag icon"
+        />
+        <span
+          class="text"
+        >
+          recipient_ids (To real string)
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<StructureFieldsDropdown /> matches the latest snapshot for one typeCastModifiers of type timestamp 1`] = `
+<div>
+  <label>
+    Value
+  </label>
+  <div
+    aria-expanded="false"
+    class="ui search dropdown selection"
+    label="Value"
+    role="combobox"
+  >
+    <input
+      aria-autocomplete="list"
+      autocomplete="off"
+      class="search"
+      tabindex="0"
+      type="text"
+      value=""
+    />
+    <div
+      aria-atomic="true"
+      aria-live="polite"
+      class="divider default text"
+      role="alert"
+    >
+      Fields
+    </div>
+    <i
+      aria-hidden="true"
+      class="dropdown icon"
+    />
+    <div
+      aria-multiselectable="false"
+      class="menu transition"
+      role="listbox"
+    >
+      <div
+        aria-checked="false"
+        aria-disabled="true"
+        aria-selected="false"
+        class="disabled item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <div
+          class="divider"
+        />
+        <div
+          class="header"
+        >
+          <i
+            aria-hidden="true"
+            class="table icon"
+          />
+          notifications
+        </div>
+      </div>
+      <div
+        aria-checked="false"
+        aria-selected="true"
+        class="selected item group"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <i
+          aria-hidden="true"
+          class="hashtag icon"
+        />
+        <span
+          class="text"
+        >
+          inserted_at
+        </span>
+      </div>
+      <div
+        aria-checked="false"
+        aria-selected="false"
+        class="item group"
+        modifier="[object Object]"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <i
+          aria-hidden="true"
+          class="hashtag icon"
+        />
+        <span
+          class="text"
+        >
+          recipient_ids (Cast as timestamp)
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<StructureFieldsDropdown /> matches the latest snapshot for root fields of number type 1`] = `
+<div>
+  <label>
+    Value
+  </label>
+  <div
+    aria-expanded="false"
+    class="ui search dropdown selection"
+    label="Value"
+    role="combobox"
+  >
+    <input
+      aria-autocomplete="list"
+      autocomplete="off"
+      class="search"
+      tabindex="0"
+      type="text"
+      value=""
+    />
+    <div
+      aria-atomic="true"
+      aria-live="polite"
+      class="divider default text"
+      role="alert"
+    >
+      Fields
+    </div>
+    <i
+      aria-hidden="true"
+      class="dropdown icon"
+    />
+    <div
+      aria-multiselectable="false"
+      class="menu transition"
+      role="listbox"
+    >
+      <div
+        aria-checked="false"
+        aria-disabled="true"
+        aria-selected="false"
+        class="disabled item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <div
+          class="divider"
+        />
+        <div
+          class="header"
+        >
+          <i
+            aria-hidden="true"
+            class="table icon"
+          />
+          notifications
+        </div>
+      </div>
+      <div
+        aria-checked="false"
+        aria-selected="true"
+        class="selected item group"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <i
+          aria-hidden="true"
+          class="hashtag icon"
+        />
+        <span
+          class="text"
+        >
+          id
+        </span>
+      </div>
+      <div
+        aria-checked="false"
+        aria-selected="false"
+        class="item group"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <i
+          aria-hidden="true"
+          class="hashtag icon"
+        />
+        <span
+          class="text"
+        >
+          subscription_id
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;