@truedat/core 4.46.2 → 4.46.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [4.46.5] 2022-06-17
+
+### Added
+
+- [TD-4894] Multiple column operator in implementation creation
+
+## [4.46.4] 2022-06-16
+
+### Changed
+
+- [TD-4720] When merging default filters and user-specified filters, the
+  `taxonomy` filter specified now overrides the default value. This change was
+  needed for the domain filter to work in the `<DomainConcepts />` tab.
+
 ## [4.46.2] 2022-06-16
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "4.46.2",
+  "version": "4.46.5",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -35,7 +35,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.46.2",
+    "@truedat/test": "4.46.5",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -112,5 +112,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "161f3fae4428ee4e4e26b62fd2f9764ce389d0e2"
+  "gitHead": "cc6e42515345adf2926f47216622e0fc4f7a0d86"
 }

package/src/components/FiltersLoader.js

@@ -25,13 +25,14 @@ export const FiltersLoader = ({
         }
       : _.omit([selectedFilter])({ ...defaultFilters, ...filters });
     fetchFilters({ filters: mergedFilters });
-  }, [fetchFilters, filters, selectedFilter]);
+  }, [fetchFilters, filters, selectedFilter, defaultFilters]);
   return null;
 };
 
 FiltersLoader.propTypes = {
   clearFilters: PropTypes.func.isRequired,
   clearSort: PropTypes.func,
+  defaultFilters: PropTypes.object,
   fetchFilters: PropTypes.func.isRequired,
   filters: PropTypes.object.isRequired,
   selectedFilter: PropTypes.string,

package/src/components/OptionGroup.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { Dropdown } from "semantic-ui-react";
 import { lowerDeburr } from "../services/sort";
@@ -27,9 +27,12 @@ export const OptionGroup = ({
   options = [],
   placeholder = "Select",
   onClick,
+  onChange,
   value,
+  multiple,
 }) => {
   const [availableOptions, setOptions] = useState(options);
+  const [flattenedOptions, setFlattenedOptions] = useState();
   const [open, openMenu] = useState(false);
   const [query, setQuery] = useState("");
 
@@ -55,6 +58,14 @@ export const OptionGroup = ({
     );
   };
 
+  useEffect(() => {
+    // eslint-disable-next-line prettier/prettier
+    _.flow(
+      toFlattenedShorthands,
+      setFlattenedOptions
+    )(availableOptions);
+  }, [availableOptions]);
+
   const flatOptionMatches = (o, searchQuery) =>
     !_.has("options")(o) && optionMatches(lowerDeburr(searchQuery))(o);
 
@@ -76,6 +87,10 @@ export const OptionGroup = ({
     onClick(values);
   };
 
+  const onChangeOptionsGroup = (e, dropdown) => {
+    multiple && onChange(dropdown.value);
+  };
+
   const findText = () =>
     _.flow(
       _.reduce(
@@ -89,10 +104,43 @@ export const OptionGroup = ({
 
   const text = value && !query && findText();
 
+  const toFlattenedShorthands = (availableOpts) =>
+    availableOpts.flatMap((option, i) => {
+      const result = _.has("options")(option)
+        ? [
+            {
+              key: i,
+              children: (
+                <>
+                  <Dropdown.Divider />
+                  <Dropdown.Header icon={option.icon} content={option.label} />
+                </>
+              ),
+            },
+            ...option.options.map((innerOption, i) => ({
+              ...innerOption,
+              className: "group",
+              onClick: doOnClick,
+            })),
+          ]
+        : [
+            {
+              ...option,
+              className: "header",
+              onClick: doOnClick,
+            },
+          ];
+      return result;
+    });
+
   return (
     <>
       {label && <label>{label}</label>}
+
       <Dropdown
+        multiple={multiple}
+        options={flattenedOptions}
+        onChange={onChangeOptionsGroup}
         fluid={fluid}
         className="selection"
         placeholder={placeholder}
@@ -106,41 +154,21 @@ export const OptionGroup = ({
         onBlur={() => openMenu(false)}
         text={text}
         value={value}
-      >
-        <Dropdown.Menu>
-          {availableOptions.map((option, i) =>
-            _.has("options")(option) ? (
-              <Group
-                key={i}
-                value={value}
-                onClick={doOnClick}
-                options={_.prop("options")(option)}
-                {...option}
-              />
-            ) : (
-              <Dropdown.Item
-                key={i}
-                {...option}
-                onClick={doOnClick}
-                className="header"
-                selected={value == option.value}
-              />
-            )
-          )}
-        </Dropdown.Menu>
-      </Dropdown>
+      />
     </>
   );
 };
 
 OptionGroup.propTypes = {
   onClick: PropTypes.func,
+  onChange: PropTypes.func,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   fluid: PropTypes.bool,
   inline: PropTypes.bool,
   label: PropTypes.string,
   placeholder: PropTypes.string,
   options: PropTypes.array,
+  multiple: PropTypes.bool,
 };
 
 export default OptionGroup;

package/src/components/SelectedFilters.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import FilterDropdown from "./FilterDropdown";
@@ -25,61 +25,70 @@ export const SelectedFilters = ({
   toggleFilterValue,
   userFilters,
   userFilterScope,
-}) => (
-  <>
-    {_.isEmpty(userFilters) ? null : (
-      <UserFilters
-        applyUserFilter={applyUserFilter}
-        userFilterScope={userFilterScope}
-        deleteUserFilter={deleteUserFilter}
-        resetFilters={resetFilters}
-        selectedUserFilter={selectedUserFilter}
-        userFilters={userFilters}
-        disabled={loading}
-      />
-    )}
-    <div className="selectedFilters">
-      {_.isEmpty(selectedFilters) ? null : (
-        <>
-          <div className="appliedFilters">
-            <FormattedMessage id="search.applied_filters" />
-          </div>
-          {selectedFilters.map((filter) => {
-            const options = _.isEqual(filter, selectedFilter)
-              ? selectedFilterValues
-              : null;
-            const props = {
-              key: filter,
-              activeValues,
-              closeFilter,
-              filter,
-              loading,
-              openFilter,
-              options,
-              removeFilter,
-              toggleFilterValue,
-            };
-            return selectedFilter === "taxonomy" ? (
-              <FilterMultilevelDropdown {...props} />
-            ) : (
-              <FilterDropdown {...props} />
-            );
-          })}
-          <a className="resetFilters" onClick={() => resetFilters()}>
-            <FormattedMessage id="search.clear_filters" />
-          </a>
-          {saveFilters && (
-            <ModalSaveFilter
-              saveFilters={saveFilters}
-              activeFilters={activeFilters}
-              scope={userFilterScope}
-            />
-          )}
-        </>
+}) => {
+  useEffect(
+    () => () => {
+      resetFilters();
+    },
+    [resetFilters]
+  );
+
+  return (
+    <>
+      {_.isEmpty(userFilters) ? null : (
+        <UserFilters
+          applyUserFilter={applyUserFilter}
+          userFilterScope={userFilterScope}
+          deleteUserFilter={deleteUserFilter}
+          resetFilters={resetFilters}
+          selectedUserFilter={selectedUserFilter}
+          userFilters={userFilters}
+          disabled={loading}
+        />
       )}
-    </div>
-  </>
-);
+      <div className="selectedFilters">
+        {_.isEmpty(selectedFilters) ? null : (
+          <>
+            <div className="appliedFilters">
+              <FormattedMessage id="search.applied_filters" />
+            </div>
+            {selectedFilters.map((filter) => {
+              const options = _.isEqual(filter, selectedFilter)
+                ? selectedFilterValues
+                : null;
+              const props = {
+                key: filter,
+                activeValues,
+                closeFilter,
+                filter,
+                loading,
+                openFilter,
+                options,
+                removeFilter,
+                toggleFilterValue,
+              };
+              return selectedFilter === "taxonomy" ? (
+                <FilterMultilevelDropdown {...props} />
+              ) : (
+                <FilterDropdown {...props} />
+              );
+            })}
+            <a className="resetFilters" onClick={() => resetFilters()}>
+              <FormattedMessage id="search.clear_filters" />
+            </a>
+            {saveFilters && (
+              <ModalSaveFilter
+                saveFilters={saveFilters}
+                activeFilters={activeFilters}
+                scope={userFilterScope}
+              />
+            )}
+          </>
+        )}
+      </div>
+    </>
+  );
+};
 
 SelectedFilters.propTypes = {
   activeFilters: PropTypes.object,

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

@@ -13,6 +13,7 @@ exports[`<OptionGroup /> matches the latest snapshot 1`] = `
     minCharacters={1}
     noResultsMessage="No results found."
     onBlur={[Function]}
+    onChange={[Function]}
     onClick={[Function]}
     onSearchChange={[Function]}
     open={false}
@@ -25,8 +26,6 @@ exports[`<OptionGroup /> matches the latest snapshot 1`] = `
     selectOnBlur={true}
     selectOnNavigation={true}
     wrapSelection={true}
-  >
-    <DropdownMenu />
-  </Dropdown>
+  />
 </Fragment>
 `;

package/src/routes.js

@@ -36,7 +36,7 @@ export const DOMAINS = "/domains";
 export const DOMAINS_ACTIONS = "/domains/:action";
 export const DOMAINS_NEW = "/domains/new";
 export const DOMAINS_SEARCH = "/domains/search";
-export const DOMAIN_ACTION = "/domains/:id/:action";
+export const DOMAIN_CONCEPTS = "/domains/:id/concepts";
 export const DOMAIN_EDIT = "/domains/:id/edit";
 export const DOMAIN_MEMBERS = "/domains/:id/members";
 export const DOMAIN_MEMBERS_NEW = "/domains/:id/members/new";
@@ -217,7 +217,7 @@ const routes = {
   DOMAINS_ACTIONS,
   DOMAINS_NEW,
   DOMAINS_SEARCH,
-  DOMAIN_ACTION,
+  DOMAIN_CONCEPTS,
   DOMAIN_EDIT,
   DOMAIN_MEMBERS,
   DOMAIN_MEMBERS_NEW,

package/src/selectors/makeActiveFiltersSelector.js

@@ -2,12 +2,12 @@ import _ from "lodash/fp";
 import {
   createSelector,
   createSelectorCreator,
-  defaultMemoize
+  defaultMemoize,
 } from "reselect";
 
 const defaultFilters = false;
 
-export const makeActiveFiltersSelector = activeFiltersProp => {
+export const makeActiveFiltersSelector = (activeFiltersProp) => {
   const activeFiltersSelector = createSelector(
     _.prop(activeFiltersProp),
     (_state, props) => _.propOr(defaultFilters, "defaultFilters")(props),

package/src/services/__tests__/filters.spec.js

@@ -5,7 +5,7 @@ describe("services: filters", () => {
   describe("mergeFilters", () => {
     const defaultFilters = {
       status: ["draft", "pending", "rejected"],
-      current: [true]
+      current: [true],
     };
     const userFilters1 = { type: ["type1"] };
     const userFilters2 = { status: ["draft", "rejected"] };
@@ -16,7 +16,7 @@ describe("services: filters", () => {
       expect(merged).toEqual({
         current: [true],
         status: ["draft", "pending", "rejected"],
-        type: ["type1"]
+        type: ["type1"],
       });
     });
 
@@ -24,7 +24,7 @@ describe("services: filters", () => {
       const merged = mergeFilters([defaultFilters, userFilters2]);
       expect(merged).toEqual({
         current: [true],
-        status: ["draft", "rejected"]
+        status: ["draft", "rejected"],
       });
     });
 
@@ -32,9 +32,17 @@ describe("services: filters", () => {
       const merged = mergeFilters([defaultFilters, userFilters3]);
       expect(merged).toEqual({
         current: [true],
-        status: ["draft", "pending", "rejected"]
+        status: ["draft", "pending", "rejected"],
       });
     });
+
+    it("should use overrides if present for taxonomy key", () => {
+      const defaults = { taxonomy: [123] };
+      const overrides = { taxonomy: [456] };
+      const emptyOverrides = { taxonomy: [] };
+      expect(mergeFilters([defaults, overrides])).toEqual(overrides);
+      expect(mergeFilters([defaults, emptyOverrides])).toEqual(defaults);
+    });
   });
 
   describe("getSearchPayload", () => {
@@ -52,7 +60,7 @@ describe("services: filters", () => {
         getSearchPayload(searchQuery, {
           defaultFilters,
           linkable,
-          pageSize: size
+          pageSize: size,
         })
       ).toEqual({
         filters: { ...filters, ...defaultFilters },
@@ -60,7 +68,7 @@ describe("services: filters", () => {
         page,
         query,
         size,
-        sort
+        sort,
       });
     });
   });

package/src/services/filters.js

@@ -6,16 +6,16 @@ const intersectionOrDefault = (defaults, overrides) => {
   return _.isEmpty(v) ? defaults : v;
 };
 
-const filterCustomizer = (defaults, overrides) =>
-  _.isArray(defaults) &&
-  _.isArray(overrides) &&
-  !_.isEmpty(defaults) &&
-  !_.isEmpty(overrides)
+const isNonEmptyArray = (a) => _.isArray(a) && !_.isEmpty(a);
+
+const filterCustomizer = (defaults, overrides, key) =>
+  key === "taxonomy" && isNonEmptyArray(overrides)
+    ? overrides
+    : isNonEmptyArray(defaults) && isNonEmptyArray(overrides)
     ? intersectionOrDefault(defaults, overrides)
     : undefined;
 
-export const mergeFilters = (filters) =>
-  _.mergeAllWith(filterCustomizer)(filters);
+export const mergeFilters = _.mergeAllWith(filterCustomizer);
 
 export const getSearchPayload = (searchQuery, props) => {
   const { defaultFilters = {}, linkable, pageSize: size = 20 } = props;