@truedat/cx 4.44.2 → 4.44.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.44.4] 2022-05-19
+
+### Changed
+
+- Use `lowerDeburrTrim` function from `@truedat/core`
+
 ## [4.41.4] 2022-04-04
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/cx",
-  "version": "4.44.2",
+  "version": "4.44.5",
   "description": "Truedat Web Connectors",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -22,17 +22,20 @@
     "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-adapter-react-16": "^1.15.6",
     "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"
@@ -85,12 +91,14 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "4.44.2",
+    "@apollo/client": "^3.6.4",
+    "@truedat/core": "4.44.5",
     "lodash": "^4.17.21",
     "match-sorter": "^6.3.1",
     "path-to-regexp": "^1.7.0",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react-intl": "^5.20.10",
+    "react-moment": "^1.1.2",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "redux": "^4.1.1",
@@ -103,5 +111,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "ca0c5fffcba96736f7a2054f3c37789da8c30a9e"
+  "gitHead": "5a339468198c803592b285eddd0dd0c0b0eced93"
 }

package/src/configurations/components/ConfigurationForm.js

@@ -1,13 +1,13 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, Suspense } from "react";
 import PropTypes from "prop-types";
-import { useSelector, useDispatch } from "react-redux";
+import { connect } from "react-redux";
 import { Button, Form, Label } from "semantic-ui-react";
 import { useIntl, FormattedMessage } from "react-intl";
 import { HistoryBackButton } from "@truedat/core/components";
 import {
   applyTemplate as applyTemplateGenerator,
-  validateContent
+  validateContent,
 } from "@truedat/df/utils";
 import { selectTemplate } from "@truedat/df/routines";
 
@@ -24,16 +24,19 @@ const isNonEmptyString = _.flow(_.trim, _.negate(_.isEmpty));
 const isValid = _.conforms({
   external_id: isNonEmptyString,
   type: isNonEmptyString,
-  contentErrors: isEmptyArray
+  contentErrors: isEmptyArray,
 });
 
-const ConfigurationForm = ({ configuration, handleSubmit }) => {
-  const dispatch = useDispatch();
+const ConfigurationForm = ({
+  configuration,
+  handleSubmit,
+  selectTemplate,
+  template,
+  templates,
+  templatesLoading,
+}) => {
   const [formState, setFormState] = useState(configuration || {});
   const { formatMessage } = useIntl();
-  const { template, templates, templatesLoading } = useSelector(
-    _.pick(["template", "templatesLoading", "templates"])
-  );
   const applyTemplate = applyTemplateGenerator(template);
   const { external_id, type, content } = formState;
 
@@ -44,11 +47,11 @@ const ConfigurationForm = ({ configuration, handleSubmit }) => {
         ...formState,
         type: _.prop("name")(template),
         content: newContent,
-        contentErrors: validateContent(template)(content)
+        contentErrors: validateContent(template)(content),
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [_.get("id")(template)]);
+  }, [template]);
 
   useEffect(() => {
     const configurationType = _.get("type")(configuration);
@@ -58,34 +61,34 @@ const ConfigurationForm = ({ configuration, handleSubmit }) => {
         _.get("id")
       )(templates);
       if (!_.isNil(currentTemplateId))
-        dispatch(selectTemplate({ id: currentTemplateId }));
+        selectTemplate({ id: currentTemplateId });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [configuration]);
 
-  const typeOptions = templates.map(({ name, id }, i) => ({
-    key: i,
+  const typeOptions = _.map(({ name, id }) => ({
+    key: id,
     value: id,
-    text: name
-  }));
+    text: name,
+  }))(templates);
 
   const handleExternalIdChange = (e, { value: external_id }) => {
     e && e.preventDefault();
     setFormState({ ...formState, external_id });
   };
-  const handleContentChange = content => {
+  const handleContentChange = (content) => {
     const contentErrors = validateContent(template)(content);
     setFormState({ ...formState, content, contentErrors });
   };
 
   const handleTemplateSelected = (e, data) => {
     const { value } = data;
-    dispatch(selectTemplate({ id: value }));
+    selectTemplate({ id: value });
   };
 
   const isInvalid = () => _.negate(isValid)(formState);
 
-  const doHandleSubmit = e => {
+  const doHandleSubmit = (e) => {
     e.preventDefault();
     const newConfiguration = _.pick(["external_id", "type"])(formState);
     const appliedContent = _.flow(_.prop("content"), applyTemplate)(formState);
@@ -93,8 +96,8 @@ const ConfigurationForm = ({ configuration, handleSubmit }) => {
     handleSubmit({
       configuration: {
         ...newConfiguration,
-        content: appliedContent
-      }
+        content: appliedContent,
+      },
     });
   };
 
@@ -116,11 +119,11 @@ const ConfigurationForm = ({ configuration, handleSubmit }) => {
         />
       </Form.Field>
       <Form.Field required>
-        <label>{formatMessage({ id: "type.selector.label" })}</label>
+        <label>
+          <FormattedMessage id="type.selector.label" />
+        </label>
         <Form.Dropdown
-          placeholder={formatMessage({
-            id: "type.selector.placeholder"
-          })}
+          placeholder={formatMessage({ id: "type.selector.placeholder" })}
           name="type"
           search
           selection
@@ -136,12 +139,12 @@ const ConfigurationForm = ({ configuration, handleSubmit }) => {
       {type && !templatesLoading && (
         <Form.Field>
           <label className="label">
-            {formatMessage({ id: "configuration.content.label" })}
+            <FormattedMessage id="configuration.content.label" />
           </label>
-          <>
+          <Suspense fallback={null}>
             <TemplateLoader />
             <DynamicForm onChange={handleContentChange} content={content} />
-          </>
+          </Suspense>
         </Form.Field>
       )}
       <div className="actions">
@@ -163,6 +166,17 @@ const ConfigurationForm = ({ configuration, handleSubmit }) => {
 
 ConfigurationForm.propTypes = {
   configuration: PropTypes.object,
-  handleSubmit: PropTypes.func
+  handleSubmit: PropTypes.func,
+  selectTemplate: PropTypes.func,
+  template: PropTypes.object,
+  templates: PropTypes.array,
+  templatesLoading: PropTypes.bool,
 };
-export default ConfigurationForm;
+
+export const mapStateToProps = ({ template, templates, templatesLoading }) => ({
+  template,
+  templates,
+  templatesLoading,
+});
+
+export default connect(mapStateToProps, { selectTemplate })(ConfigurationForm);

package/src/configurations/components/EditConfiguration.js

@@ -1,7 +1,6 @@
-import _ from "lodash/fp";
 import React from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { bindActionCreators } from "redux";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
 import { Container, Header, Icon, Segment } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Loading } from "@truedat/core/components";
@@ -9,17 +8,12 @@ import { updateConfiguration } from "../routines";
 import ConfigurationBreadcrumbs from "./ConfigurationBreadcrumbs";
 import ConfigurationForm from "./ConfigurationForm";
 
-export default () => {
-  const dispatch = useDispatch();
+export const EditConfiguration = ({
+  configuration,
+  configurationLoading,
+  updateConfiguration,
+}) => {
   const { formatMessage } = useIntl();
-  const { update } = bindActionCreators(
-    { update: updateConfiguration },
-    dispatch
-  );
-
-  const { configuration, configurationLoading } = useSelector(
-    _.pick(["configuration", "configurationLoading"])
-  );
 
   return configurationLoading ? (
     <Loading />
@@ -37,9 +31,24 @@ export default () => {
         </Header>
         <ConfigurationForm
           configuration={configuration}
-          handleSubmit={update}
+          onSubmit={updateConfiguration}
         />
       </Container>
     </>
   );
 };
+
+EditConfiguration.propTypes = {
+  configuration: PropTypes.object,
+  configurationLoading: PropTypes.bool,
+  updateConfiguration: PropTypes.func,
+};
+
+export const mapStateToProps = ({ configurationLoading, configuration }) => ({
+  loading: configurationLoading,
+  configuration,
+});
+
+export default connect(mapStateToProps, { updateConfiguration })(
+  EditConfiguration
+);

package/src/configurations/components/NewConfiguration.js

@@ -1,19 +1,14 @@
 import React from "react";
-import { useDispatch } from "react-redux";
-import { bindActionCreators } from "redux";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
 import { Container, Header, Icon, Segment } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { createConfiguration } from "../routines";
 import ConfigurationBreadcrumbs from "./ConfigurationBreadcrumbs";
 import ConfigurationForm from "./ConfigurationForm";
 
-export default () => {
-  const dispatch = useDispatch();
+export const NewConfiguration = ({ createConfiguration }) => {
   const { formatMessage } = useIntl();
-  const { create } = bindActionCreators(
-    { create: createConfiguration },
-    dispatch
-  );
 
   return (
     <>
@@ -27,8 +22,14 @@ export default () => {
             <FormattedMessage id="configurations.actions.create" />
           </Header.Content>
         </Header>
-        <ConfigurationForm handleSubmit={create} />
+        <ConfigurationForm onSubmit={createConfiguration} />
       </Container>
     </>
   );
 };
+
+NewConfiguration.propTypes = {
+  createConfiguration: PropTypes.func,
+};
+
+export default connect(null, { createConfiguration })(NewConfiguration);

package/src/configurations/components/__tests__/ConfigurationForm.spec.js

@@ -1,16 +1,9 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render } from "@truedat/test/render";
 import ConfigurationForm from "../ConfigurationForm";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
-jest.mock("react-redux", () => ({
-  ...jest.requireActual("react-redux"),
-  useDispatch: jest.fn(),
-  useSelector: jest.fn(() => ({
+const renderOpts = {
+  state: {
     templates: [
       {
         content: [
@@ -22,37 +15,37 @@ jest.mock("react-redux", () => ({
                 name: "new_field",
                 type: "string",
                 values: null,
-                widget: "string"
-              }
+                widget: "string",
+              },
             ],
             is_secret: false,
-            name: ""
-          }
+            name: "",
+          },
         ],
         id: 1,
         label: "test_config",
         name: "test_config",
-        scope: "ca"
-      }
+        scope: "ca",
+      },
     ],
     template: null,
-    templatesLoading: false
-  }))
-}));
+    templatesLoading: false,
+  },
+};
 
 describe("<ConfigurationForm />", () => {
-  const handleSubmit = jest.fn();
+  const onSubmit = jest.fn();
   const configuration = {
     external_id: "ext1",
     type: "test_config",
     content: {
-      new_field: "value"
-    }
+      new_field: "value",
+    },
   };
-  const props = { handleSubmit, configuration };
+  const props = { onSubmit, configuration };
 
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<ConfigurationForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<ConfigurationForm {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

package/src/configurations/components/__tests__/EditConfiguration.spec.js

@@ -1,24 +1,17 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render } from "@truedat/test/render";
 import EditConfiguration from "../EditConfiguration";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
-jest.mock("react-redux", () => ({
-  ...jest.requireActual("react-redux"),
-  useDispatch: jest.fn(),
-  useSelector: jest.fn(() => ({
+const renderOpts = {
+  state: {
     configuration: { id: 1, type: "config", content: { field: "foo" } },
-    configurationLoading: false
-  }))
-}));
+    configurationLoading: false,
+  },
+};
 
 describe("<EditConfiguration />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<EditConfiguration />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<EditConfiguration />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

package/src/configurations/components/__tests__/NewConfiguration.spec.js

@@ -1,23 +1,13 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render } from "@truedat/test/render";
 import NewConfiguration from "../NewConfiguration";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
-jest.mock("react-redux", () => ({
-  ...jest.requireActual("react-redux"),
-  useDispatch: jest.fn()
-}));
-
 describe("<NewConfiguration />", () => {
   const createConfiguration = jest.fn();
   const props = { createConfiguration };
 
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<NewConfiguration {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<NewConfiguration {...props} />);
+    expect(container).toMatchSnapshot();
   });
 });

package/src/configurations/components/__tests__/__snapshots__/ConfigurationForm.spec.js.snap

@@ -1,84 +1,117 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ConfigurationForm /> matches the latest snapshot 1`] = `
-<Form
-  as="form"
->
-  <FormField
-    required={true}
+<div>
+  <form
+    class="ui form"
   >
-    <label>
-      configuration.props.external_id
-    </label>
-    <FormInput
-      as={[Function]}
-      control={[Function]}
-      disabled={true}
-      onChange={[Function]}
-      value="ext1"
-    />
-  </FormField>
-  <FormField
-    required={true}
-  >
-    <label>
-      type.selector.label
-    </label>
-    <FormDropdown
-      as={[Function]}
-      control={[Function]}
-      disabled={true}
-      loading={false}
-      name="type"
-      onChange={[Function]}
-      options={
-        Array [
-          Object {
-            "key": 0,
-            "text": "test_config",
-            "value": 1,
-          },
-        ]
-      }
-      placeholder="type.selector.placeholder"
-      required={true}
-      search={true}
-      selection={true}
-    />
-  </FormField>
-  <FormField>
-    <label
-      className="label"
+    <div
+      class="required field"
     >
-      configuration.content.label
-    </label>
-    <lazy />
-    <lazy
-      content={
-        Object {
-          "new_field": "value",
-        }
-      }
-      onChange={[Function]}
-    />
-  </FormField>
-  <div
-    className="actions"
-  >
-    <HistoryBackButton
-      content="actions.cancel"
-    />
-    <Button
-      as="button"
-      content={
-        <Memo(MemoizedFormattedMessage)
-          id="actions.save"
-        />
-      }
-      disabled={true}
-      onClick={[Function]}
-      primary={true}
-    />
-  </div>
-</Form>
+      <label>
+        Id Externo
+      </label>
+      <div
+        class="disabled field"
+      >
+        <div
+          class="ui disabled input"
+        >
+          <input
+            disabled=""
+            tabindex="-1"
+            type="text"
+            value="ext1"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="required field"
+    >
+      <label>
+        Type
+      </label>
+      <div
+        class="disabled required field"
+      >
+        <div
+          aria-busy="false"
+          aria-disabled="true"
+          aria-expanded="false"
+          class="ui disabled search selection dropdown"
+          name="type"
+          required=""
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="-1"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider default text"
+            role="alert"
+          >
+            Source type (template)
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+            role="listbox"
+          >
+            <div
+              aria-checked="false"
+              aria-selected="true"
+              class="selected item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                test_config
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label
+        class="label"
+      >
+        Content
+      </label>
+    </div>
+    <div
+      class="actions"
+    >
+      <a
+        class="ui secondary button"
+        href="/"
+        role="button"
+      >
+        Cancel
+      </a>
+      <button
+        class="ui primary disabled button"
+        disabled=""
+        tabindex="-1"
+      >
+        Save
+      </button>
+    </div>
+  </form>
+</div>
 `;