@truedat/cx 7.5.7 → 7.5.10

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@truedat/cx",
-  "version": "7.5.7",
+  "version": "7.5.10",
   "description": "Truedat Web Connectors",
   "sideEffects": false,
-  "jsnext:main": "src/index.js",
   "module": "src/index.js",
   "files": [
-    "src"
+    "src",
+    "index.js"
   ],
   "author": "Bluetab Solutions",
   "license": "GPL-3.0",
@@ -15,68 +15,25 @@
   },
   "scripts": {
     "clean": "rimraf yarn-error.log",
-    "debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
     "test": "TZ=UTC jest --coverage",
-    "test:watch": "TZ=UTC jest --watch",
     "eslint": "eslint src/**",
     "eslint:fix": "eslint --fix src/**"
   },
-  "devDependencies": {
-    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.5",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
-    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.19.6",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "7.5.7",
-    "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",
-    "babel-plugin-transform-semantic-ui-react-imports": "^1.4.1",
-    "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.6.2",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.0.0",
-    "jest-environment-jsdom": "^29.0.0",
-    "jest-localstorage-mock": "^2.4.14",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "redux-saga-test-plan": "^4.0.4",
-    "rimraf": "^3.0.2",
-    "semantic-ui-react": "^2.1.4"
-  },
   "jest": {
     "maxWorkers": "50%",
     "testTimeout": 10000,
     "moduleDirectories": [
-      "<rootDir>/src",
-      "../../node_modules"
+      "<rootDir>/src"
     ],
     "moduleNameMapper": {
       "\\.(css|less|png)$": "identity-obj-proxy",
       "^@truedat/([^/]+)$": "<rootDir>/../$1/src/index",
       "^@truedat/([^/]+)/(.*)$": "<rootDir>/../$1/src/$2"
     },
-    "setupFiles": [
-      "jest-localstorage-mock"
-    ],
     "setupFilesAfterEnv": [
       "@truedat/test/setup"
     ],
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ],
     "testEnvironment": "jsdom",
-    "testPathIgnorePatterns": [
-      "<rootDir>/node_modules/"
-    ],
     "transform": {
       "\\.js$": [
         "babel-jest",
@@ -84,33 +41,46 @@
           "rootMode": "upward"
         }
       ]
-    },
-    "transformIgnorePatterns": [
-      "/node_modules/(?!@truedat).*"
-    ]
+    }
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@truedat/test": "7.5.10",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "redux-saga-test-plan": "^4.0.6"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.1",
-    "@truedat/core": "7.5.7",
+    "@apollo/client": "^3.13.5",
+    "axios": "^1.8.4",
+    "graphql": "^16.10.0",
+    "is-hotkey": "^0.2.0",
+    "is-url": "^1.2.4",
     "lodash": "^4.17.21",
-    "match-sorter": "^6.3.1",
-    "moment": "^2.29.4",
-    "path-to-regexp": "^1.7.0",
+    "match-sorter": "^8.0.0",
+    "moment": "^2.30.1",
+    "path-to-regexp": "^8.2.0",
     "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",
-    "redux-saga": "^1.2.1",
+    "query-string": "^7.1.2",
+    "react": "^19.0.0",
+    "react-csv": "^2.2.2",
+    "react-dom": "^19.0.0",
+    "react-dropzone": "^14.3.8",
+    "react-hook-form": "^7.54.2",
+    "react-intl": "^7.1.10",
+    "react-moment": "^1.1.3",
+    "react-redux": "^9.2.0",
+    "react-router": "^7.4.0",
+    "redux": "^5.0.1",
+    "redux-saga": "^1.3.0",
     "redux-saga-routines": "^3.2.3",
-    "reselect": "^4.1.7",
-    "semantic-ui-react": "^2.1.4"
-  },
-  "peerDependencies": {
-    "react": ">= 16.8.6 < 17",
-    "react-dom": ">= 16.8.6 < 17",
-    "semantic-ui-react": ">= 2.0.3 < 2.2"
+    "reselect": "^5.1.1",
+    "semantic-ui-calendar-react": "^0.15.3",
+    "semantic-ui-react": "^3.0.0-beta.2",
+    "swr": "^2.3.3"
   },
-  "gitHead": "01b1e4eb176b2c491750b524988e32094413515c"
+  "gitHead": "8a8c49e9d5d6bb4e5f2b503b063bfd6dd20a503d"
 }

package/src/configurations/components/Configuration.js

@@ -1,13 +1,13 @@
 import _ from "lodash/fp";
-import React from "react";
+import { lazy } from "react";
 import PropTypes from "prop-types";
 import { Header, Icon, Grid, Segment } from "semantic-ui-react";
 import { connect } from "react-redux";
 import ConfigurationActions from "./ConfigurationActions";
 import ConfigurationBreadcrumbs from "./ConfigurationBreadcrumbs";
 
-const DynamicFormViewer = React.lazy(() =>
-  import("@truedat/df/components/DynamicFormViewer")
+const DynamicFormViewer = lazy(
+  () => import("@truedat/df/components/DynamicFormViewer")
 );
 
 export const Configuration = ({ configuration, template }) =>

package/src/configurations/components/ConfigurationActions.js

@@ -1,6 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import { Button, Icon } from "semantic-ui-react";

package/src/configurations/components/ConfigurationBreadcrumbs.js

@@ -1,7 +1,6 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Breadcrumb } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { CONFIGURATIONS } from "@truedat/core/routes";
 
@@ -16,7 +15,7 @@ export const ConfigurationBreadcrumbs = ({ text }) => (
 );
 
 ConfigurationBreadcrumbs.propTypes = {
-  text: PropTypes.string
+  text: PropTypes.string,
 };
 
 export default ConfigurationBreadcrumbs;

package/src/configurations/components/ConfigurationCards.js

@@ -1,9 +1,8 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Button, Card, Icon, Message } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { ConfirmModal } from "@truedat/core/components";
 import { linkTo } from "@truedat/core/routes";

package/src/configurations/components/ConfigurationForm.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect, Suspense } from "react";
+import { lazy, useState, useEffect, Suspense } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Button, Form, Label } from "semantic-ui-react";
@@ -11,12 +11,10 @@ import {
 } from "@truedat/df/utils";
 import { selectTemplate } from "@truedat/df/routines";
 
-const DynamicForm = React.lazy(() =>
-  import("@truedat/df/components/DynamicForm")
-);
+const DynamicForm = lazy(() => import("@truedat/df/components/DynamicForm"));
 
-const TemplateLoader = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplateLoader")
+const TemplateLoader = lazy(
+  () => import("@truedat/df/templates/components/TemplateLoader")
 );
 
 const isEmptyArray = _.isEmpty;
@@ -138,16 +136,13 @@ const ConfigurationForm = ({
           disabled={!_.isEmpty(configuration)}
         />
       </Form.Field>
-
       {type && !templatesLoading && (
         <Form.Field>
           <label className="label">
             <FormattedMessage id="configuration.content.label" />
           </label>
-          <Suspense fallback={null}>
-            <TemplateLoader />
-            <DynamicForm onChange={handleContentChange} content={content} />
-          </Suspense>
+          <TemplateLoader />
+          <DynamicForm onChange={handleContentChange} content={content} />
         </Form.Field>
       )}
       <div className="actions">

package/src/configurations/components/ConfigurationLoader.js

@@ -1,6 +1,5 @@
-import React from "react";
 import { useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Loading } from "@truedat/core/components";

package/src/configurations/components/ConfigurationRoutes.js

@@ -3,15 +3,14 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Segment } from "semantic-ui-react";
-import { Route, Switch } from "react-router-dom";
-import { Unauthorized } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
+import { Route, Routes } from "react-router";
 import {
   CONFIGURATION,
   CONFIGURATIONS,
   CONFIGURATION_CREATE,
-  CONFIGURATION_EDIT
+  CONFIGURATION_EDIT,
 } from "@truedat/core/routes";
+import { ProtectedRoute, Loader } from "@truedat/core/router";
 import NewConfiguration from "./NewConfiguration";
 import EditConfiguration from "./EditConfiguration";
 import Configurations from "./Configurations";
@@ -19,99 +18,89 @@ import ConfigurationsLoader from "./ConfigurationsLoader";
 import ConfigurationLoader from "./ConfigurationLoader";
 import Configuration from "./Configuration";
 
-const TemplateLoader = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplateLoader")
+const TemplateLoader = React.lazy(
+  () => import("@truedat/df/templates/components/TemplateLoader")
 );
-const TemplatesLoader = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplatesLoader")
+const TemplatesLoader = React.lazy(
+  () => import("@truedat/core/components/TemplatesLoader")
 );
 
 export const ConfigurationRoutes = ({
   configuration,
   configurationLoading,
-  templatesLoading
+  templatesLoading,
 }) => {
-  const authorized = useAuthorized();
   return (
-    <>
-      <ConfigurationsLoader />
+    <Routes>
       <Route
         path={CONFIGURATIONS}
-        render={() =>
-          authorized ? (
-            <Switch>
-              <Route
-                exact
-                path={CONFIGURATION_CREATE}
-                render={() => (
-                  <>
-                    <TemplatesLoader scope="ca" />
-                    <TemplateLoader />
-                    <NewConfiguration />
-                  </>
-                )}
-              />
-
-              <Route
-                exact
-                path={CONFIGURATION_EDIT}
-                render={() => (
-                  <>
-                    <TemplatesLoader scope="ca" />
-                    <ConfigurationLoader />
-                    {!_.isEmpty(configuration) &&
-                      !configurationLoading &&
-                      !templatesLoading && <EditConfiguration />}
-                  </>
-                )}
-              />
-              <Route
-                exact
-                path={CONFIGURATION}
-                render={() => (
-                  <>
-                    <Segment>
-                      <ConfigurationLoader />
-                      <TemplatesLoader scope="ca" />
-                      {!templatesLoading && <Configuration />}
-                    </Segment>
-                  </>
-                )}
-              />
-              <Route
-                exact
-                path={CONFIGURATIONS}
-                render={() => (
-                  <>
-                    <ConfigurationsLoader />
-                    <Configurations />
-                  </>
-                )}
-              />
-            </Switch>
-          ) : (
-            <Unauthorized />
-          )
+        element={
+          <ProtectedRoute>
+            <Loader loaders={<ConfigurationsLoader />} />
+          </ProtectedRoute>
         }
-      />
-    </>
+      >
+        <Route index element={<Configurations />} />
+        <Route
+          path="new"
+          element={
+            <>
+              <TemplatesLoader scope="ca" />
+              <TemplateLoader />
+              <NewConfiguration />
+            </>
+          }
+        />
+        <Route
+          path=":external_id"
+          element={
+            <Loader
+              loaders={
+                <>
+                  <ConfigurationLoader />
+                  <TemplatesLoader scope="ca" />
+                </>
+              }
+            />
+          }
+        >
+          <Route
+            index
+            element={
+              <Segment>{!templatesLoading && <Configuration />}</Segment>
+            }
+          />
+          <Route
+            path="edit"
+            element={
+              !_.isEmpty(configuration) &&
+              !configurationLoading &&
+              !templatesLoading ? (
+                <EditConfiguration />
+              ) : null
+            }
+          />
+        </Route>
+      </Route>
+      <Route path="*" element={null} />
+    </Routes>
   );
 };
 
 ConfigurationRoutes.propTypes = {
   configuration: PropTypes.object,
   configurationLoading: PropTypes.bool,
-  templatesLoading: PropTypes.bool
+  templatesLoading: PropTypes.bool,
 };
 
 const mapStateToProps = ({
   configuration,
   configurationLoading,
-  templatesLoading
+  templatesLoading,
 }) => ({
   configuration,
   configurationLoading,
-  templatesLoading
+  templatesLoading,
 });
 
 export default connect(mapStateToProps)(ConfigurationRoutes);

package/src/configurations/components/ConfigurationTokenLoader.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";

package/src/configurations/components/Configurations.js

@@ -1,9 +1,9 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { FormattedMessage, useIntl } from "react-intl";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Button, Grid, Header, Icon, Input, Segment } from "semantic-ui-react";
 import { CONFIGURATION_CREATE } from "@truedat/core/routes";
 import ConfigurationCards from "./ConfigurationCards";

package/src/configurations/components/ConfigurationsLoader.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";

package/src/configurations/components/DynamicConfigurationForm.js

@@ -1,12 +1,10 @@
 import PropTypes from "prop-types";
-import React from "react";
+import { lazy } from "react";
 
-const DynamicForm = React.lazy(() =>
-  import("@truedat/df/components/DynamicForm")
-);
+const DynamicForm = lazy(() => import("@truedat/df/components/DynamicForm"));
 
-const TemplateLoader = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplateLoader")
+const TemplateLoader = lazy(
+  () => import("@truedat/df/templates/components/TemplateLoader")
 );
 
 const DynamicConfigurationForm = ({ dfContent, handleContentChange }) => (
@@ -18,6 +16,6 @@ const DynamicConfigurationForm = ({ dfContent, handleContentChange }) => (
 
 DynamicConfigurationForm.propTypes = {
   dfContent: PropTypes.object,
-  handleContentChange: PropTypes.func
+  handleContentChange: PropTypes.func,
 };
 export default DynamicConfigurationForm;

package/src/configurations/components/EditConfiguration.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Container, Header, Icon, Segment } from "semantic-ui-react";

package/src/configurations/components/NewConfiguration.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Container, Header, Icon, Segment } from "semantic-ui-react";

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

@@ -1,14 +1,14 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { Configuration } from "../Configuration";
 
 describe("<Configuration />", () => {
+  const configuration = {
+    external_id: "Micro1",
+    config: { a: { value: 1, origin: "user" } },
+    type: "micro",
+  };
   const props = {
-    configuration: {
-      external_id: "Micro1",
-      config: { a: { value: 1, origin: "user" } },
-      type: "micro",
-    },
+    configuration,
     template: {
       content: [
         {
@@ -34,8 +34,15 @@ describe("<Configuration />", () => {
     match: { params: { external_id: "Micro" } },
   };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<Configuration {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  const renderOpts = {
+    state: {
+      configuration,
+    },
+  };
+
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<Configuration {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,37 +1,46 @@
-import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
-import { Card, Message } from "semantic-ui-react";
+import { render } from "@truedat/test/render";
+import en from "messages/en";
 import { ConfigurationCards } from "../ConfigurationCards";
 
+const renderOpts = { messages: { en } };
+
 describe("<ConfigurationCards />", () => {
   const configurations = [
     {
       external_id: "con_url",
-      type: "a"
+      type: "a",
     },
     { external_id: "id1", type: "app-admin" },
     { external_id: "id2", type: "app-admin" },
     { external_id: "id3", type: "app-admin" },
-    { external_id: "id4", type: "a" }
+    { external_id: "id4", type: "a" },
   ];
 
   it("matches the latest snapshot", () => {
-    const wrapper = shallowWithIntl(
-      <ConfigurationCards configurations={configurations} />
+    const { container } = render(
+      <ConfigurationCards configurations={configurations} />,
+      renderOpts
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
   it("contains a message when no configurations are found", () => {
     const props = { configurations: [] };
-    const wrapper = shallowWithIntl(<ConfigurationCards {...props} />);
-    expect(wrapper.find(Card)).toHaveLength(0);
-    expect(wrapper.find(Message)).toHaveLength(1);
+    const { container, queryByText } = render(
+      <ConfigurationCards {...props} />,
+      renderOpts
+    );
+
+    expect(container.querySelectorAll("div.ui.card")).toHaveLength(0);
+    expect(queryByText(/No configurations found/)).toBeInTheDocument();
   });
 
   it("contains a card for each configuration", () => {
     const props = { configurations };
-    const wrapper = shallowWithIntl(<ConfigurationCards {...props} />);
-    expect(wrapper.find(Card)).toHaveLength(5);
+    const { container, queryByText } = render(
+      <ConfigurationCards {...props} />,
+      renderOpts
+    );
+    expect(container.querySelectorAll("div.ui.card")).toHaveLength(5);
   });
 });

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

@@ -1,5 +1,4 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import ConfigurationForm from "../ConfigurationForm";
 
 const renderOpts = {
@@ -44,8 +43,9 @@ describe("<ConfigurationForm />", () => {
   };
   const props = { onSubmit, configuration };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(<ConfigurationForm {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<ConfigurationForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });