@truedat/core 4.44.2 → 4.44.5

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [4.44.5] 2022-05-20
+
+### Changed
+
+- [TD-4230] `TemplateSelector` GraphQL fetchPolicy changed to
+  `cache-and-network` and changed hidden logic
+
+## [4.44.4] 2022-05-19
+
+### Added
+
+- [TD-4660] `lowerDeburrTrim` function, reference data routes and i18n messages
+
 ## [4.44.1] 2022-05-11
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "4.44.2",
+  "version": "4.44.5",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -17,23 +17,26 @@
   "scripts": {
     "clean": "rimraf yarn-error.log",
     "debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
-    "test": "jest --coverage",
-    "test:watch": "jest --watch",
+    "test": "TZ=UTC jest --coverage",
+    "test:watch": "TZ=UTC jest --watch",
     "eslint": "eslint src/**",
     "eslint:fix": "eslint --fix src/**"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.8",
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.0",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.17.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-react": "^7.14.5",
-    "@truedat/test": "4.44.2",
-    "babel-jest": "^27.0.6",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.0",
+    "@babel/preset-env": "^7.18.0",
+    "@babel/preset-react": "^7.17.12",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@truedat/test": "4.44.5",
+    "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-react-intl": "^5.1.18",
@@ -41,7 +44,8 @@
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.0.6",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
     "jest-localstorage-mock": "^2.4.14",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
@@ -50,6 +54,8 @@
     "semantic-ui-react": "^2.0.3"
   },
   "jest": {
+    "maxWorkers": "50%",
+    "testTimeout": 10000,
     "moduleDirectories": [
       "<rootDir>/src",
       "../../node_modules"
@@ -82,16 +88,16 @@
     }
   },
   "dependencies": {
-    "@apollo/client": "^3.4.10",
+    "@apollo/client": "^3.6.4",
     "axios": "^0.19.2",
     "immutable": "^4.0.0-rc.12",
     "is-hotkey": "^0.1.6",
     "is-url": "^1.2.4",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react-csv": "^2.2.2",
     "react-dropzone": "^4.2.13",
     "react-intl": "^5.20.10",
-    "react-moment": "^0.9.7",
+    "react-moment": "^1.1.2",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "redux": "^4.1.1",
@@ -106,5 +112,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "ca0c5fffcba96736f7a2054f3c37789da8c30a9e"
+  "gitHead": "5a339468198c803592b285eddd0dd0c0b0eced93"
 }

package/src/api/queries.js

@@ -9,3 +9,15 @@ export const DOMAINS_QUERY = gql`
     }
   }
 `;
+
+export const TEMPLATES_QUERY = gql`
+  query Templates($scope: String, $domainIds: [ID]) {
+    templates(scope: $scope, domainIds: $domainIds) {
+      id
+      name
+      label
+      scope
+      content
+    }
+  }
+`;

package/src/components/CatalogMenu.js

@@ -1,12 +1,12 @@
-import _ from "lodash/fp";
 import React from "react";
 import { useAuthorized } from "../hooks";
 import {
-  STRUCTURES_UPLOAD_EVENTS,
   PENDING_STRUCTURE_NOTES,
+  REFERENCE_DATASETS,
+  STRUCTURES,
+  STRUCTURES_UPLOAD_EVENTS,
   STRUCTURE_TAGS,
   STRUCTURE_TYPES,
-  STRUCTURES,
   SYSTEMS,
 } from "../routes";
 import Submenu from "./Submenu";
@@ -16,6 +16,7 @@ const items = [{ name: "structures", routes: [STRUCTURES, SYSTEMS] }];
 const adminItems = [
   { name: "structureTypes", routes: [STRUCTURE_TYPES] },
   { name: "structureTags", routes: [STRUCTURE_TAGS] },
+  { name: "referenceData", routes: [REFERENCE_DATASETS] },
 ];
 
 const structureNoteItems = [

package/src/components/DashboardMenu.js

@@ -1,6 +1,7 @@
 import _ from "lodash/fp";
 import React from "react";
-import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
 import { DASHBOARD } from "@truedat/core/routes";
 import { getDashboardConfig } from "../selectors";
 import { useAuthorized } from "../hooks";
@@ -8,9 +9,8 @@ import Submenu from "./Submenu";
 
 const items = [{ name: "dashboard", routes: [DASHBOARD] }];
 
-export const DashboardMenu = () => {
+export const DashboardMenu = ({ dashboardConfig }) => {
   const authorized = useAuthorized("dashboards");
-  const dashboardConfig = useSelector(getDashboardConfig);
 
   return authorized && !_.isEmpty(dashboardConfig) ? (
     <Submenu items={items} icon="chart line" name="dashboard" />
@@ -19,4 +19,12 @@ export const DashboardMenu = () => {
   );
 };
 
-export default DashboardMenu;
+DashboardMenu.propTypes = {
+  dashboardConfig: PropTypes.object,
+};
+
+export const mapStateToProps = (state) => ({
+  dashboardConfig: getDashboardConfig(state),
+});
+
+export default connect(mapStateToProps)(DashboardMenu);

package/src/components/QualityMenu.js

@@ -1,28 +1,36 @@
 import _ from "lodash/fp";
 import React from "react";
-import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
 import { useAuthorized } from "../hooks";
 import { RULES, QUALITY_DASHBOARD, IMPLEMENTATIONS } from "../routes";
 import { getQualityDashboardConfig } from "../selectors";
 import Submenu from "./Submenu";
 
-const items = [
+export const ITEMS = [
   { name: "rules", routes: [RULES] },
   { name: "implementations", routes: [IMPLEMENTATIONS] },
-  { name: "quality_dashboard", routes: [QUALITY_DASHBOARD] }
+  { name: "quality_dashboard", routes: [QUALITY_DASHBOARD] },
 ];
 
-export const QualityMenu = () => {
+export const QualityMenu = ({ dashboardConfig }) => {
   const authorized = useAuthorized("data_quality");
-  const dashboardConfig = useSelector(getQualityDashboardConfig);
 
   const filteredItems = _.filter(
     ({ name }) => name != "quality_dashboard" || !_.isEmpty(dashboardConfig)
-  )(items);
+  )(ITEMS);
 
   return authorized ? (
     <Submenu items={filteredItems} icon="check square" name="quality" />
   ) : null;
 };
 
-export default QualityMenu;
+QualityMenu.propTypes = {
+  dashboardConfig: PropTypes.object,
+};
+
+export const mapStateToProps = (state) => ({
+  dashboardConfig: getQualityDashboardConfig(state),
+});
+
+export default connect(mapStateToProps)(QualityMenu);

package/src/components/SideMenu.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { useSelector } from "react-redux";
+import { connect } from "react-redux";
 import { Menu, Sidebar } from "semantic-ui-react";
 import AdminMenu from "./AdminMenu";
 import CatalogMenu from "./CatalogMenu";
@@ -15,9 +15,12 @@ import TaxonomyMenu from "./TaxonomyMenu";
 import GrantMenu from "./GrantMenu";
 import MembersMenu from "./MembersMenu";
 
-export const SideMenu = ({ children, animation = "push", inverted }) => {
-  const sidebarVisible = useSelector((state) => state.sidebarVisible);
-
+export const SideMenu = ({
+  animation = "push",
+  children,
+  inverted,
+  sidebarVisible,
+}) => {
   const width = sidebarVisible ? null : "very thin";
 
   return (
@@ -53,6 +56,9 @@ SideMenu.propTypes = {
   animation: PropTypes.string,
   children: PropTypes.node,
   inverted: PropTypes.bool,
+  sidebarVisible: PropTypes.bool,
 };
 
-export default SideMenu;
+export const mapStateToProps = ({ sidebarVisible }) => ({ sidebarVisible });
+
+export default connect(mapStateToProps)(SideMenu);

package/src/components/SidebarToggle.js

@@ -1,18 +1,18 @@
 import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
-import { connect, useSelector } from "react-redux";
+import { connect } from "react-redux";
 import { useLocation } from "react-router-dom";
 import { Icon, Menu } from "semantic-ui-react";
 import { hideSidebar, toggleSidebar } from "@truedat/core/routines";
 
 export const SidebarToggle = ({
+  animation = "push",
   hideSidebar,
+  sidebarVisible,
   toggleSidebar,
-  animation = "push",
 }) => {
   const location = useLocation();
-  const sidebarVisible = useSelector((state) => state.sidebarVisible);
   useEffect(() => {
     if (animation == "overlay") {
       hideSidebar();
@@ -45,6 +45,11 @@ SidebarToggle.propTypes = {
   animation: PropTypes.string,
   hideSidebar: PropTypes.func,
   toggleSidebar: PropTypes.func,
+  sidebarVisible: PropTypes.bool,
 };
 
-export default connect(null, { hideSidebar, toggleSidebar })(SidebarToggle);
+export const mapStateToProps = ({ sidebarVisible }) => ({ sidebarVisible });
+
+export default connect(mapStateToProps, { hideSidebar, toggleSidebar })(
+  SidebarToggle
+);

package/src/components/Submenu.js

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { useIntl, FormattedMessage } from "react-intl";
-import { useSelector } from "react-redux";
+import { connect } from "react-redux";
 import { useLocation, useHistory, Link } from "react-router-dom";
 import { Dropdown, Icon, Menu } from "semantic-ui-react";
 import { useAuthorizedItems, useActiveRoutes } from "@truedat/core/hooks";
@@ -19,14 +19,14 @@ export const MenuItem = ({ name, routes }) => {
       to={primaryRoute}
       active={active}
       content={formatMessage({ id: `sidemenu.${name}`, defaultMessage: name })}
-      onClick={e => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
     />
   );
 };
 
 MenuItem.propTypes = {
   name: PropTypes.string,
-  routes: PropTypes.array
+  routes: PropTypes.array,
 };
 
 export const DropdownItem = ({ name, routes }) => {
@@ -40,19 +40,18 @@ export const DropdownItem = ({ name, routes }) => {
       to={primaryRoute}
       active={active}
       content={formatMessage({ id: `sidemenu.${name}`, defaultMessage: name })}
-      onClick={e => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
     />
   );
 };
 
 DropdownItem.propTypes = {
   name: PropTypes.string,
-  routes: PropTypes.array
+  routes: PropTypes.array,
 };
 
-export const Submenu = ({ items, icon, name }) => {
+export const Submenu = ({ items, icon, name, sidebarVisible }) => {
   const [open, setOpen] = useState(false);
-  const sidebarVisible = useSelector(state => state.sidebarVisible);
   const active = useActiveRoutes(_.flatMap("routes")(items));
   const filteredItems = useAuthorizedItems(items);
   const location = useLocation();
@@ -107,7 +106,7 @@ export const Submenu = ({ items, icon, name }) => {
           trigger={trigger}
           onClick={() => history.push(primaryRoute)}
         >
-          <Dropdown.Menu onClick={e => e.stopPropagation()}>
+          <Dropdown.Menu onClick={(e) => e.stopPropagation()}>
             {_.size(filteredItems) > 1 && (
               <>
                 <Dropdown.Header
@@ -132,7 +131,10 @@ export const Submenu = ({ items, icon, name }) => {
 
 Submenu.propTypes = {
   items: PropTypes.array,
-  icon: PropTypes.string
+  icon: PropTypes.string,
+  sidebarVisible: PropTypes.bool,
 };
 
-export default Submenu;
+export const mapStateToProps = ({ sidebarVisible }) => ({ sidebarVisible });
+
+export default connect(mapStateToProps)(Submenu);

package/src/components/TemplateSelector.js

@@ -0,0 +1,99 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Form, Label } from "semantic-ui-react";
+import { useIntl, FormattedMessage } from "react-intl";
+import { useQuery } from "@apollo/client";
+import { accentInsensitivePathOrder } from "../services/sort";
+import { TEMPLATES_QUERY } from "../api/queries";
+
+const makeOptions = _.flow(
+  _.map(({ label: text, id: value }) => ({
+    key: value,
+    value,
+    text,
+  })),
+  _.sortBy(accentInsensitivePathOrder("text"))
+);
+
+export const TemplateSelector = ({
+  clearable,
+  loading,
+  name = "template",
+  onChange,
+  required,
+  selectedValue,
+  templates,
+}) => {
+  const { formatMessage } = useIntl();
+  const options = makeOptions(templates);
+  const hidden = loading ? false : _.size(templates) <= 1;
+
+  const handleChange = (e, { value, ...data }) => {
+    const template = _.find({ id: value })(templates);
+    onChange(e, { ...data, value, template });
+  };
+
+  return hidden ? null : (
+    <Form.Field required={required}>
+      <label>
+        <FormattedMessage id="template.selector.label" />
+        {!selectedValue && required ? (
+          <Label pointing="left">
+            <FormattedMessage id="template.form.validation.empty_required" />
+          </Label>
+        ) : null}
+      </label>
+      <Form.Dropdown
+        clearable={clearable}
+        loading={loading}
+        name={name}
+        onChange={handleChange}
+        options={options}
+        placeholder={formatMessage({
+          id: loading ? "loading" : "template.selector.placeholder",
+        })}
+        search
+        selection
+        value={_.toString(selectedValue)}
+      />
+    </Form.Field>
+  );
+};
+
+TemplateSelector.propTypes = {
+  clearable: PropTypes.bool,
+  loading: PropTypes.bool,
+  onChange: PropTypes.func,
+  name: PropTypes.string,
+  required: PropTypes.bool,
+  selectedValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  templates: PropTypes.array,
+};
+
+const emptyTemplates = [];
+export const TemplateSelectorLoader = ({
+  scope,
+  onLoad,
+  domainIds,
+  ...props
+}) => {
+  const { loading, error, data } = useQuery(TEMPLATES_QUERY, {
+    fetchPolicy: "cache-and-network",
+    variables: { scope, domainIds },
+    onCompleted: onLoad,
+  });
+  if (error) return null;
+  const templates = data?.templates || emptyTemplates;
+  return (
+    <TemplateSelector loading={loading} templates={templates} {...props} />
+  );
+};
+
+TemplateSelectorLoader.propTypes = {
+  domainIds: PropTypes.array,
+  scope: PropTypes.string.isRequired,
+  onLoad: PropTypes.func,
+};
+
+export default TemplateSelectorLoader;

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

@@ -1,15 +1,14 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { DashboardMenu } from "..";
+import { render } from "@truedat/test/render";
+import DashboardMenu from "../DashboardMenu";
 
 jest.mock("../../hooks", () => ({
   useActiveRoutes: jest.fn(() => true),
-  useAuthorized: jest.fn(() => true)
+  useAuthorized: jest.fn(() => true),
 }));
 
-jest.mock("react-redux", () => ({
-  ...jest.requireActual("react-redux"),
-  useSelector: jest.fn(() => ({
+const renderOpts = {
+  state: {
     systemConfiguration: [
       {
         external_id: "config_metabase",
@@ -18,16 +17,16 @@ jest.mock("react-redux", () => ({
           dashboard_id: 2,
           quality_dashboard_id: 8,
           metabase_url: "http://metabase.com",
-          secret_key: "###"
-        }
-      }
-    ]
-  }))
-}));
+          secret_key: "###",
+        },
+      },
+    ],
+  },
+};
 
 describe("<DashboardMenu />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<DashboardMenu />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<DashboardMenu />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,10 +1,12 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { DateTime } from "..";
 
 describe("<DateTime />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<DateTime value="2018-06-27T07:32:53.154377Z" />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(
+      <DateTime value="2018-06-27T07:32:53.154377Z" />
+    );
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,15 +1,15 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { QualityMenu } from "../QualityMenu";
+import { render } from "@truedat/test/render";
+import QualityMenu from "../QualityMenu";
 
 jest.mock("../../hooks", () => ({
   useActiveRoutes: jest.fn(() => true),
-  useAuthorized: jest.fn(() => true)
+  useAuthorized: jest.fn(() => true),
+  useAuthorizedItems: jest.fn((items) => items),
 }));
 
-jest.mock("react-redux", () => ({
-  ...jest.requireActual("react-redux"),
-  useSelector: jest.fn(() => ({
+const renderOpts = {
+  state: {
     systemConfiguration: [
       {
         external_id: "config_metabase",
@@ -18,16 +18,16 @@ jest.mock("react-redux", () => ({
           dashboard_id: 2,
           quality_dashboard_id: 8,
           metabase_url: "http://metabase.com",
-          secret_key: "###"
-        }
-      }
-    ]
-  }))
-}));
+          secret_key: "###",
+        },
+      },
+    ],
+  },
+};
 
 describe("<QualityMenu />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<QualityMenu />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<QualityMenu />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,24 +1,17 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { SideMenu } from "../SideMenu";
+import { render } from "@truedat/test/render";
+import SideMenu from "../SideMenu";
 
-jest.mock("@fluentui/react-component-event-listener", () => ({
-  documentRef: null,
-  windowRef: null
-}));
-
-jest.mock("react-redux", () => ({
-  ...jest.requireActual("react-redux"),
-  useSelector: jest.fn(() => ({ sidebarVisible: true }))
-}));
+const renderOpts = { state: { sidebarVisible: true } };
 
 describe("<SideMenu />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(
+    const { container } = render(
       <SideMenu>
         <p>Hello</p>
-      </SideMenu>
+      </SideMenu>,
+      renderOpts
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,29 +1,17 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { Submenu } from "..";
+import { render } from "@truedat/test/render";
+import Submenu from "../Submenu";
 
-const mockHistory = {
-  push: jest.fn()
-};
-
-jest.mock("react-redux", () => ({
-  ...jest.requireActual("react-redux"),
-  useSelector: jest.fn(() => ({ sidebarVisible: true }))
-}));
-
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useLocation: () => ({ pathname: "/bar" }),
-  useHistory: () => mockHistory
-}));
+const renderOpts = { state: { sidebarVisible: true }, routes: ["/bar"] };
 
 describe("<Submenu />", () => {
   it("matches the latest snapshot", () => {
     const items = [
       { name: "foo", routes: ["/foo", "/bar"] },
-      { name: "baz", routes: ["/baz"] }
+      { name: "baz", routes: ["/baz"] },
     ];
-    const wrapper = shallow(<Submenu items={items} />);
-    expect(wrapper).toMatchSnapshot();
+    const props = { name: "foo", items };
+    const { container } = render(<Submenu {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });