@truedat/df 7.5.9 → 7.5.10

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@truedat/df",
-  "version": "7.5.9",
+  "version": "7.5.10",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
-  "jsnext:main": "src/index.js",
   "module": "src/index.js",
   "files": [
-    "src"
+    "src",
+    "index.js"
   ],
   "author": "Bluetab Solutions",
   "license": "GPL-3.0",
@@ -15,48 +15,15 @@
   },
   "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.9",
-    "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",
-    "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"
     ],
     "setupFilesAfterEnv": [
       "@truedat/test/setup"
@@ -66,13 +33,7 @@
       "^@truedat/([^/]+)$": "<rootDir>/../$1/src/index",
       "^@truedat/([^/]+)/(.*)$": "<rootDir>/../$1/src/$2"
     },
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ],
     "testEnvironment": "jsdom",
-    "testPathIgnorePatterns": [
-      "<rootDir>/node_modules/"
-    ],
     "transform": {
       "\\.js$": [
         "babel-jest",
@@ -80,34 +41,49 @@
           "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/auth": "7.5.9",
-    "@truedat/core": "7.5.9",
-    "decode-uri-component": "^0.2.2",
-    "path-to-regexp": "^1.7.0",
+    "@apollo/client": "^3.13.5",
+    "@truedat/core": "7.5.10",
+    "axios": "^1.8.4",
+    "graphql": "^16.10.0",
+    "is-hotkey": "^0.2.0",
+    "is-url": "^1.2.4",
+    "lodash": "^4.17.21",
+    "match-sorter": "^8.0.0",
+    "moment": "^2.30.1",
+    "path-to-regexp": "^8.2.0",
     "prop-types": "^15.8.1",
     "query-string": "^7.1.2",
-    "react-color": "^2.17.3",
-    "react-intl": "^5.20.10",
-    "react-redux": "^7.2.4",
-    "react-router-dom": "^5.2.0",
-    "react-sortable-hoc": "^1.11.0",
-    "redux": "^4.1.1",
-    "redux-saga": "^1.2.1",
+    "react": "^19.0.0",
+    "react-color": "^2.19.3",
+    "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",
+    "react-sortable-hoc": "^2.0.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": "03770e3241daa955de2e6e40fdaea91e3d147860"
+  "gitHead": "8a8c49e9d5d6bb4e5f2b503b063bfd6dd20a503d"
 }

package/src/components/DynamicFieldValue.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Icon, List, Container } from "semantic-ui-react";

package/src/components/DynamicForm.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
@@ -20,6 +20,7 @@ export const DynamicForm = ({
 }) => {
   const { formatMessage } = useIntl();
   const domainId = selectedDomain?.id;
+
   useEffect(() => {
     if (!_.isNil(domainId) && !_.isEmpty(template)) {
       onChange(applyTemplate(content, domainId));
@@ -96,11 +97,11 @@ const makeMapStateToProps = () => {
       (!_.isEmpty(state.selectedDomain)
         ? state.selectedDomain
         : _.isNil(_.head(state.selectedDomains))
-        ? null
-        : { id: _.head(state.selectedDomains) }),
+          ? null
+          : { id: _.head(state.selectedDomains) }),
     template: getTemplate(state, props),
   });
   return mapStateToProps;
 };
 
-export default connect(makeMapStateToProps)(DynamicForm);
+export default connect(makeMapStateToProps())(DynamicForm);

package/src/components/DynamicFormViewer.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Message, Segment } from "semantic-ui-react";

package/src/components/DynamicFormWithTranslations.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
@@ -105,8 +105,8 @@ const makeMapStateToProps = () => {
       (!_.isEmpty(state.selectedDomain)
         ? state.selectedDomain
         : _.isNil(_.head(state.selectedDomains))
-        ? null
-        : { id: _.head(state.selectedDomains) }),
+          ? null
+          : { id: _.head(state.selectedDomains) }),
     template: getTemplate(state, props),
   });
   return mapStateToProps;

package/src/components/EditableDynamicFieldValue.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Icon, List, Button, Container } from "semantic-ui-react";
@@ -70,7 +70,6 @@ export const EditableDynamicFieldValue = (props) => {
           <OriginLabel origin={origin} />
         </List.Header>
       )}
-
       <List.Description>
         {editingField === name ? (
           <>

package/src/components/FieldGroupDetail.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Divider, List, Segment } from "semantic-ui-react";
 import DynamicFieldValue from "./DynamicFieldValue";

package/src/components/FieldGroupSegment.js

@@ -1,9 +1,7 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Segment, Header } from "semantic-ui-react";
 import DynamicField from "./widgets/DynamicField";
-import FieldGroupSubSegment from "./FieldGroupSubSegment/FieldGroupSubSegment";
 
 export const FieldGroupSegment = ({
   scope,
@@ -16,33 +14,23 @@ export const FieldGroupSegment = ({
   <Segment>
     {name && name !== "undefined" ? <Header as="h4" content={name} /> : null}
     {fields &&
-      fields.map((field, i) =>
-        field.widget === "copy" ? (
-          <FieldGroupSubSegment
-            key={i}
-            onFieldChange={onFieldChange}
-            name={field.name}
-            fields={field.value.value}
-            prevFields={fields}
-          />
-        ) : (
-          <DynamicField
-            scope={scope}
-            field={{
-              ...field,
-              disabled: _.includes(field.name)(noTranslatableFields),
-            }}
-            fields={fields}
-            isModification={isModification}
-            key={i}
-            onChange={
-              _.includes(field.name)(noTranslatableFields)
-                ? () => false
-                : onFieldChange
-            }
-          />
-        )
-      )}
+      fields.map((field, i) => (
+        <DynamicField
+          scope={scope}
+          field={{
+            ...field,
+            disabled: _.includes(field.name)(noTranslatableFields),
+          }}
+          fields={fields}
+          isModification={isModification}
+          key={i}
+          onChange={
+            _.includes(field.name)(noTranslatableFields)
+              ? () => false
+              : onFieldChange
+          }
+        />
+      ))}
   </Segment>
 );
 

package/src/components/FieldGroupWithTranslations.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Segment, Header, Grid, Tab } from "semantic-ui-react";
 import { useIntl } from "react-intl";
@@ -9,7 +8,6 @@ import {
   isTranslatableField,
 } from "@truedat/core/services/i18nContent";
 import DynamicField from "./widgets/DynamicField";
-import FieldGroupSubSegment from "./FieldGroupSubSegment/FieldGroupSubSegment";
 
 export const FieldGroupWithTranslations = ({
   scope,
@@ -48,8 +46,8 @@ export const FieldGroupWithTranslations = ({
         langField.value === ""
           ? ""
           : !langField.value?.value
-          ? { value: "", origin: "default" }
-          : langField.value,
+            ? { value: "", origin: "default" }
+            : langField.value,
     };
   };
 
@@ -93,14 +91,7 @@ export const FieldGroupWithTranslations = ({
                 fieldsByLang[defaultLang].map((field, i) => (
                   <Grid.Row columns={2} key={i}>
                     <Grid.Column>
-                      {field.widget === "copy" ? (
-                        <FieldGroupSubSegment
-                          onFieldChange={onFieldChange}
-                          name={field.name}
-                          fields={field.value.value}
-                          prevFields={fieldsByLang[defaultLang]}
-                        />
-                      ) : (
+                      {
                         <I18nProvider lang={defaultLang}>
                           <DynamicField
                             scope={scope}
@@ -121,36 +112,26 @@ export const FieldGroupWithTranslations = ({
                             }
                           />
                         </I18nProvider>
-                      )}
+                      }
                     </Grid.Column>
-
                     <Grid.Column>
                       {isTranslatableField(field) && fieldsByLang[altLang] ? (
-                        field.widget === "copy" ? (
-                          <FieldGroupSubSegment
-                            onFieldChange={onFieldChange}
-                            name={field.name}
-                            fields={field.value.value}
-                            prevFields={fieldsByLang[altLang]}
+                        <I18nProvider lang={altLang}>
+                          <DynamicField
+                            scope={scope}
+                            field={getFieldForLang(field, altLang)}
+                            fields={fieldsByLang[altLang]}
+                            isModification={isModification}
+                            key={`${field.name}-${altLang}`}
+                            onChange={(e, { name, value }) =>
+                              onFieldChange(e, {
+                                lang: altLang,
+                                name,
+                                value,
+                              })
+                            }
                           />
-                        ) : (
-                          <I18nProvider lang={altLang}>
-                            <DynamicField
-                              scope={scope}
-                              field={getFieldForLang(field, altLang)}
-                              fields={fieldsByLang[altLang]}
-                              isModification={isModification}
-                              key={`${field.name}-${altLang}`}
-                              onChange={(e, { name, value }) =>
-                                onFieldChange(e, {
-                                  lang: altLang,
-                                  name,
-                                  value,
-                                })
-                              }
-                            />
-                          </I18nProvider>
-                        )
+                        </I18nProvider>
                       ) : null}
                     </Grid.Column>
                   </Grid.Row>

package/src/components/FieldViewerValue.js

@@ -1,9 +1,7 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Icon, Label, Table } from "semantic-ui-react";
 import { SafeLink, RichTextEditor } from "@truedat/core/components";
-import FieldGroupCopy from "./FieldGroupCopy";
 import ImagePreview from "./widgets/ImagePreview";
 import SystemPreview from "./widgets/SystemPreview";
 import "../styles/fieldGroupDetail.less";
@@ -51,7 +49,6 @@ export const FieldViewerValue = ({
               ))}
             </Table.Row>
           </Table.Header>
-
           <Table.Body>
             {value.map((row, i) => (
               <Table.Row key={i}>
@@ -67,17 +64,17 @@ export const FieldViewerValue = ({
       return <ImagePreview value={value} />;
     case "system":
       return <SystemPreview value={value} />;
-    case "copy":
-      return <FieldGroupCopy value={value} />;
     case "user_group":
       const [type, name] = value.split(":");
       return multiple ? (
         <Label>
-          <Icon name={type} /> {name}
+          <Icon name={type} />
+          {name}
         </Label>
       ) : (
         <>
-          <Icon name={type} /> {name}
+          <Icon name={type} />
+          {name}
         </>
       );
     case "string":

package/src/components/OriginLabel.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { useIntl } from "react-intl";
 import PropTypes from "prop-types";
 

package/src/components/SelectDynamicFormWithTranslations.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useMemo, useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { Grid } from "semantic-ui-react";
 import { TemplateSelector } from "@truedat/core/components";
@@ -29,9 +29,7 @@ export default function SelectDynamicFormWithTranslations({
   const [showSelector, setShowSelector] = useState(false);
   const template = selectedTemplate || thisTemplate;
   const { defaultLang, enabledLangs, isMultilingual } = useLanguage();
-  const domain = useMemo(() => {
-    return _.size(domainIds) > 0 ? { id: _.head(domainIds) } : null;
-  }, [domainIds]);
+  const domain = _.size(domainIds) > 0 ? { id: _.head(domainIds) } : null;
 
   const handleChange = (content, currentTemplate = thisTemplate, lang) => {
     onChangeContent(lang, {
@@ -44,8 +42,8 @@ export default function SelectDynamicFormWithTranslations({
     const templateFound = name
       ? _.find(_.propEq("name", name))(templates)
       : _.size(templates) === 1
-      ? _.head(templates)
-      : null;
+        ? _.head(templates)
+        : null;
 
     setShowSelector(templates.length > 1);
 

package/src/components/SelectableDynamicForm.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { TemplateSelector } from "@truedat/core/components";
 import { applyTemplate, validateContent } from "@truedat/df/utils";
@@ -27,24 +27,19 @@ export default function SelectableDynamicForm({
 }) {
   const [thisTemplate, setThisTemplate] = useState();
   const template = selectedTemplate || thisTemplate;
-  const domain = useMemo(() => {
-    return _.size(domainIds) > 0 ? { id: _.head(domainIds) } : null;
-  }, [domainIds]);
-
-  useEffect(() => {
-    onTemplateChange(thisTemplate);
-  }, [domain, template, thisTemplate, onTemplateChange]);
+  const domain = _.size(domainIds) > 0 ? { id: _.head(domainIds) } : null;
 
   const handleChange = (content, currentTemplate = template) => {
     onChange({ content, valid: validateContent(currentTemplate)(content) });
   };
 
   const handleLoad = ({ templates }) => {
+    if (selectedTemplate) return;
     const template = name
       ? _.find(_.propEq("name", name))(templates)
       : _.size(templates) == 1
-      ? _.head(templates)
-      : null;
+        ? _.head(templates)
+        : null;
     if (template?.name !== name) {
       onNameChange(template?.name);
       onTemplateChange(template);
@@ -82,7 +77,6 @@ export default function SelectableDynamicForm({
           disabled={disabled || disableSelector}
         />
       ) : null}
-
       {!disabled && template ? (
         <>
           {header}

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { DynamicFieldValue } from "../DynamicFieldValue";
 

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

@@ -1,17 +1,13 @@
-import React from "react";
-import { shallow, mount } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import { DynamicForm } from "../DynamicForm";
 
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<DynamicForm />", () => {
   const applyTemplate = jest.fn(),
     onChange = jest.fn(),
     templateLoading = false,
     content = {};
 
-  it("matches snapshot for empty content", () => {
+  it("matches the latest snapshot for empty content", async () => {
     const template = {
       content: [],
     };
@@ -22,11 +18,12 @@ describe("<DynamicForm />", () => {
       content,
       template,
     };
-    const wrapper = shallow(<DynamicForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<DynamicForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches snapshot for default field", () => {
+  it("matches the latest snapshot for default field", async () => {
     const template = {
       content: [
         {
@@ -43,11 +40,12 @@ describe("<DynamicForm />", () => {
       content,
       template,
     };
-    const wrapper = shallow(<DynamicForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<DynamicForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches snapshot for role_users values", () => {
+  it("matches the latest snapshot for role_users values", async () => {
     const template = {
       content: [
         {
@@ -72,11 +70,12 @@ describe("<DynamicForm />", () => {
       content,
       template,
     };
-    const wrapper = shallow(<DynamicForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<DynamicForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches snapshot for domain values", () => {
+  it("matches the latest snapshot for domain values", async () => {
     const template = {
       content: [
         {
@@ -101,11 +100,12 @@ describe("<DynamicForm />", () => {
       selectedDomain,
       template,
     };
-    const wrapper = shallow(<DynamicForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<DynamicForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("calls onChange when selected domain is updated", () => {
+  it("calls onChange when selected domain is updated", async () => {
     onChange.mockClear();
     const template = {
       content: [
@@ -133,12 +133,13 @@ describe("<DynamicForm />", () => {
       content,
       template,
     };
-    const wrapper = mount(<DynamicForm {...props} />);
-    wrapper.setProps({ ...props, selectedDomain: { id: 1 } });
+    const rendered = render(<DynamicForm {...props} />);
+    await waitForLoad(rendered);
+    rendered.rerender(<DynamicForm {...props} selectedDomain={{ id: 1 }} />);
     expect(onChange).toHaveBeenCalledTimes(1);
   });
 
-  it("it ignores values in prop fields to omit", () => {
+  it("it ignores values in prop fields to omit", async () => {
     const template = {
       content: [
         {
@@ -156,7 +157,8 @@ describe("<DynamicForm />", () => {
       template,
       fieldsToOmit: ["test"],
     };
-    const wrapper = shallow(<DynamicForm {...props} />);
-    expect(wrapper.find("FieldGroupSegment").length).toBe(0);
+    const rendered = render(<DynamicForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container.querySelector(".field-group-segment")).toBeNull();
   });
 });

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { EditableDynamicFieldValue } from "../EditableDynamicFieldValue";
 

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { FieldGroupDetail } from "../FieldGroupDetail";
 

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { FieldViewerValue } from "../FieldViewerValue";
 
@@ -28,13 +27,9 @@ describe("<FieldViewerValue />", () => {
       type: "image",
     },
     {
-      value: { id: 1, name: "name" },
+      value: { id: "1", name: "name" },
       type: "system",
     },
-    {
-      value: "copy",
-      type: "copy",
-    },
     {
       value: "string",
       type: "string",