@truedat/ie 4.44.2 → 4.44.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.44.5] 2022-05-20
+
+### Changed
+
+- [TD-4230] Refactored `IngestForm` to use `SelectableDynamicForm`
+
 ## [4.37.4] 2022-02-04
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/ie",
-  "version": "4.44.2",
+  "version": "4.44.5",
   "description": "Truedat Web Ingests",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -16,22 +16,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/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",
@@ -40,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",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "redux-saga-test-plan": "^4.0.4",
@@ -48,6 +53,8 @@
     "semantic-ui-react": "^2.0.3"
   },
   "jest": {
+    "maxWorkers": "50%",
+    "testTimeout": 10000,
     "moduleDirectories": [
       "<rootDir>/src",
       "../../node_modules"
@@ -80,14 +87,14 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "4.44.2",
-    "@truedat/df": "4.44.2",
+    "@truedat/core": "4.44.5",
+    "@truedat/df": "4.44.5",
     "file-saver": "^2.0.5",
     "moment": "^2.24.0",
     "path-to-regexp": "^1.7.0",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "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",
@@ -100,5 +107,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "ca0c5fffcba96736f7a2054f3c37789da8c30a9e"
+  "gitHead": "5a339468198c803592b285eddd0dd0c0b0eced93"
 }

package/src/ingests/components/IngestFiltersDefault.js

@@ -1,13 +1,9 @@
-import React from "react";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
+import { AvailableFilters } from "@truedat/core/components";
 import { addIngestFilter, resetIngestFilters } from "../routines";
 import { getIngestAvailableFilters } from "../selectors";
 
-const AvailableFilters = React.lazy(() =>
-  import("@truedat/core/components/AvailableFilters")
-);
-
 const mapStateToProps = (state) => ({
   filters: getIngestAvailableFilters(state),
   disabled: state.ingestFiltersLoading,

package/src/ingests/components/IngestFiltersPublished.js

@@ -1,14 +1,10 @@
 import _ from "lodash/fp";
-import React from "react";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
+import { AvailableFilters } from "@truedat/core/components";
 import { addIngestFilter, resetIngestFilters } from "../routines";
 import { getIngestAvailableFilters } from "../selectors";
 
-const AvailableFilters = React.lazy(() =>
-  import("@truedat/core/components/AvailableFilters")
-);
-
 const mapStateToProps = (state) => ({
   filters: _.flow(getIngestAvailableFilters, _.without(["status"]))(state),
   disabled: state.ingestFiltersLoading,

package/src/ingests/components/IngestForm.js

@@ -14,25 +14,17 @@ import { compose } from "redux";
 import { connect } from "react-redux";
 import { injectIntl, FormattedMessage } from "react-intl";
 import { HistoryBackButton } from "@truedat/core/components";
-import { selectTemplate, selectDomain } from "@truedat/df/routines";
-import { applyTemplate } from "@truedat/df/utils";
 import { ingestAction } from "../routines";
 
 const DomainDropdownSelector = React.lazy(() =>
   import("@truedat/bg/taxonomy/components/DomainDropdownSelector")
 );
-const DynamicForm = React.lazy(() =>
-  import("@truedat/df/components/DynamicForm")
+const SelectableDynamicForm = React.lazy(() =>
+  import("@truedat/df/components/SelectableDynamicForm")
 );
 const RichTextEditor = React.lazy(() =>
   import("@truedat/core/components/RichTextEditor")
 );
-const TemplateLoader = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplateLoader")
-);
-const TemplateSelector = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplateSelector")
-);
 
 const actionKey = "create";
 
@@ -49,59 +41,25 @@ const isValid = _.conforms({
   name: isNonEmptyString,
   domain_id: _.isFinite,
   description: _.negate(_.isEmpty),
+  type: isNonEmptyString,
 });
 
 export class IngestForm extends React.Component {
   static propTypes = {
     action: PropTypes.object,
-    applyTemplate: PropTypes.func,
     ingestAction: PropTypes.func,
     ingestActionLoading: PropTypes.string,
     intl: PropTypes.object,
-    selectDomain: PropTypes.func,
-    selectTemplate: PropTypes.func,
-    template: PropTypes.object,
-    templateLoading: PropTypes.bool,
-    templates: PropTypes.array,
   };
 
   state = initialState;
 
-  componentDidMount() {
-    const { templates } = this.props;
-    if (_.size(templates) == 1) {
-      const { selectTemplate } = this.props;
-      const id = _.flow(_.head, _.prop("id"))(templates);
-      selectTemplate({ id });
-    }
-  }
-
-  componentDidUpdate() {
-    const { applyTemplate, template } = this.props;
-    const { type, content } = this.state;
-
-    if (_.has("name")(template) && !_.propEq("name", type)(template))
-      this.setState({
-        type: _.prop("name")(template),
-        content: applyTemplate(content),
-      });
-  }
-
-  handleDomainSelected = (e, { value }) => {
+  handleDomainSelected = (_e, { value }) => {
     const domain_id = value;
 
-    const { selectDomain } = this.props;
-    selectDomain({ id: domain_id });
-
     this.setState({ domain_id });
   };
 
-  handleTemplateSelected = (e, data) => {
-    const { value } = data;
-    const { selectTemplate } = this.props;
-    selectTemplate({ id: value });
-  };
-
   handleEditorChange = (e, { value }) => {
     this.handleChange(null, { name: "description", value });
   };
@@ -114,26 +72,24 @@ export class IngestForm extends React.Component {
     }
   };
 
-  handleContentChange = (content) => this.setState({ content });
+  handleContentChange = ({ content }) => this.setState({ content });
 
   isInvalid = () => _.negate(isValid)(this.state);
 
   handleSubmit = (e) => {
     e.preventDefault();
-    const { action, applyTemplate, ingestAction } = this.props;
-    const ingestVersion = _.pick(["domain_id", "type", ...staticFields])(
-      this.state
-    );
-
-    const content = applyTemplate(
-      this.state?.content,
-      ingestVersion?.domain_id
-    );
+    const { action, ingestAction } = this.props;
+    const ingest_version = _.pick([
+      "domain_id",
+      "type",
+      "content",
+      ...staticFields,
+    ])(this.state);
 
     ingestAction({
       action: actionKey,
       ...action,
-      ingest_version: { ...ingestVersion, content },
+      ingest_version,
     });
   };
 
@@ -142,16 +98,12 @@ export class IngestForm extends React.Component {
       action,
       ingestActionLoading,
       intl: { formatMessage },
-      template,
-      templateLoading,
-      templates,
     } = this.props;
 
-    const { name, description, content } = this.state;
+    const { name, description, content, type, domain_id } = this.state;
 
     const loading =
-      templateLoading ||
-      (action && action.href && ingestActionLoading === action.href);
+      action && action.href && ingestActionLoading === action.href;
 
     return (
       <Container as={Segment} text>
@@ -161,18 +113,11 @@ export class IngestForm extends React.Component {
             <FormattedMessage id="ingests.actions.create" />
           </Header.Content>
         </Header>
-        <TemplateLoader />
         <Form loading={loading}>
           <DomainDropdownSelector
             onChange={this.handleDomainSelected}
-            invalid={!_.isFinite(this.state.domain_id)}
+            invalid={!_.isFinite(domain_id)}
           />
-          {_.size(templates) > 1 && (
-            <TemplateSelector
-              selectedValue={_.prop("id")(template)}
-              onChange={this.handleTemplateSelected}
-            />
-          )}
           <Form.Field required>
             <label>
               <FormattedMessage id="ingests.props.name" />
@@ -184,7 +129,6 @@ export class IngestForm extends React.Component {
             </label>
             <Form.Input name="name" value={name} onChange={this.handleChange} />
           </Form.Field>
-
           <Form.Field required>
             <label>
               <FormattedMessage id="ingests.props.description" />
@@ -200,12 +144,16 @@ export class IngestForm extends React.Component {
               onChange={this.handleEditorChange}
             />
           </Form.Field>
-          {template && template.id && (
-            <DynamicForm
-              onChange={this.handleContentChange}
-              content={content}
-            />
-          )}
+
+          <SelectableDynamicForm
+            scope="ie"
+            domainIds={_.isNil(domain_id) ? null : [domain_id]}
+            required
+            content={content}
+            name={type}
+            onChange={this.handleContentChange}
+            onNameChange={(type) => this.setState({ type })}
+          />
           <div className="actions">
             <HistoryBackButton
               content={formatMessage({ id: "actions.cancel" })}
@@ -223,22 +171,12 @@ export class IngestForm extends React.Component {
   }
 }
 
-const mapStateToProps = ({
-  ingestActionLoading,
-  ingestsActions,
-  template,
-  templateLoading,
-  templates,
-}) => ({
+const mapStateToProps = ({ ingestActionLoading, ingestsActions }) => ({
   action: _.prop(actionKey)(ingestsActions),
-  applyTemplate: applyTemplate(template),
   ingestActionLoading,
-  template,
-  templateLoading,
-  templates,
 });
 
 export default compose(
   injectIntl,
-  connect(mapStateToProps, { ingestAction, selectTemplate, selectDomain })
+  connect(mapStateToProps, { ingestAction })
 )(IngestForm);

package/src/ingests/components/IngestRoutes.js

@@ -18,7 +18,7 @@ import {
   INGESTS,
   INGESTS_PENDING,
   INGESTS_NEW,
-  INGEST_EXECUTIONS
+  INGEST_EXECUTIONS,
 } from "@truedat/core/routes";
 import IngestRelationsRoutes from "../relations/components/IngestRelationsRoutes";
 import Events from "./Events";
@@ -77,7 +77,7 @@ const IngestRoutes = ({ ingestLoaded, ingest_id, templatesLoaded }) => {
                   <>
                     <IngestsLoader
                       defaultFilters={{
-                        status: ["draft", "pending_approval", "rejected"]
+                        status: ["draft", "pending_approval", "rejected"],
                       }}
                     />
                     <IngestFiltersLoader />
@@ -92,9 +92,8 @@ const IngestRoutes = ({ ingestLoaded, ingest_id, templatesLoaded }) => {
                   <>
                     <DomainsLoader actions="create_ingest" />
                     <IngestCrumbs ingestAction="ingests.actions.create" />
-                    <TemplatesLoader scope="ie" />
                     <IngestsLoader />
-                    {templatesLoaded && <IngestForm />}
+                    <IngestForm />
                   </>
                 )}
               />
@@ -191,7 +190,10 @@ const IngestRoutes = ({ ingestLoaded, ingest_id, templatesLoaded }) => {
                           <RelationTagsLoader />
                           <IngestArchiveLoader />
                           {ingestLoaded && (
-                            <EventsLoader resource_id={ingest_id} resource_type="ingest"/>
+                            <EventsLoader
+                              resource_id={ingest_id}
+                              resource_type="ingest"
+                            />
                           )}
                           {ingestLoaded && <Ingest />}
                           {ingestLoaded && <Events />}
@@ -283,13 +285,13 @@ const IngestRoutes = ({ ingestLoaded, ingest_id, templatesLoaded }) => {
 IngestRoutes.propTypes = {
   ingestLoaded: PropTypes.bool,
   templatesLoaded: PropTypes.bool,
-  ingest_id: PropTypes.number
+  ingest_id: PropTypes.number,
 };
 
 const mapStateToProps = ({ ingest, templatesLoading, templates }) => ({
   ingestLoaded: !_.isEmpty(ingest),
   ingest_id: !_.isEmpty(ingest) ? ingest.ingest_id : undefined,
-  templatesLoaded: !templatesLoading && !_.isEmpty(templates)
+  templatesLoaded: !templatesLoading && !_.isEmpty(templates),
 });
 
 export default connect(mapStateToProps)(IngestRoutes);

package/src/ingests/components/__tests__/IngestFilters.spec.js

@@ -1,17 +1,16 @@
 import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
-import { IngestFilters } from "../IngestFilters";
+import { render } from "@truedat/test/render";
+import IngestFilters from "../IngestFilters";
 
-describe("<IngestFilters />", () => {
-  const active = true;
-  const ingestSelectedFilters = {
-    selectedFilters: [],
-    openFilter: undefined
-  };
+const state = {
+  ingestFilters: { domain_id: [1, 2], confidential: ["yes", "no"] },
+  ingestActiveFilters: { domain_id: [1] },
+};
+const renderOpts = { state };
 
+describe("<IngestFilters />", () => {
   it("matches the latest snapshot", () => {
-    const props = { active, ingestSelectedFilters };
-    const wrapper = shallowWithIntl(<IngestFilters {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<IngestFilters />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

package/src/ingests/components/__tests__/IngestForm.spec.js

@@ -1,71 +1,69 @@
 import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
-import { IngestForm } from "../IngestForm";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import { multipleTemplatesMock, singleTemplateMock } from "@truedat/test/mocks";
+import IngestForm from "../IngestForm";
 
-describe("<IngestForm />", () => {
-  const action = {};
-  const domains = [
-    { id: 1, name: "Domain1" },
-    { id: 2, name: "Domain 2" }
-  ];
-  const ingestAction = jest.fn();
-  const ingestActionLoading = "some action";
-  const template1 = { id: 1, name: "template1" };
-  const template2 = { id: 2, name: "template2" };
-  const templateLoading = false;
-
-  const props = {
-    action,
-    domains,
-    ingestAction,
-    ingestActionLoading,
-    templateLoading
-  };
+const variables = { scope: "ie", domainIds: [1] };
 
+describe("<IngestForm />", () => {
   describe("with multiple templates", () => {
-    const templates = [template1, template2];
-    const selectTemplate = jest.fn();
-    const wrapper = shallowWithIntl(
-      <IngestForm
-        templates={templates}
-        selectTemplate={selectTemplate}
-        {...props}
-      />
-    );
+    const renderOpts = {
+      mocks: [multipleTemplatesMock(variables)],
+      state: {
+        ingestActions: { create: {} },
+        ingestActionLoading: "",
+        domains: [{ id: 1, name: "domain1" }],
+      },
+      fallback: "lazy",
+    };
 
-    it("matches the latest snapshot", () => {
-      expect(wrapper).toMatchSnapshot();
+    it("matches the latest snapshot", async () => {
+      const { container, queryByText } = render(<IngestForm />, renderOpts);
+      await waitFor(() =>
+        expect(queryByText(/loading/i)).not.toBeInTheDocument()
+      );
+      await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+      expect(container).toMatchSnapshot();
     });
 
-    it("dispatches selectTemplate when template is selected", () => {
-      const value = 2;
-      expect(selectTemplate.mock.calls.length).toBe(0);
-      wrapper
-        .findWhere(n => n.prop("onChange"))
-        .at(1)
-        .prop("onChange")({}, { value });
-      expect(selectTemplate.mock.calls.length).toBe(1);
+    it("contains a template selector", async () => {
+      const { queryByText } = render(<IngestForm />, renderOpts);
+      await waitFor(() =>
+        expect(queryByText(/loading/i)).not.toBeInTheDocument()
+      );
+      await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+      expect(queryByText("template1")).toBeInTheDocument();
     });
   });
 
   describe("with a single template", () => {
-    const templates = [template1];
-    const selectTemplate = jest.fn();
-    const wrapper = shallowWithIntl(
-      <IngestForm
-        templates={templates}
-        selectTemplate={selectTemplate}
-        {...props}
-      />
-    );
+    const renderOpts = {
+      mocks: [singleTemplateMock(variables)],
+      state: {
+        ingestActions: { create: {} },
+        ingestActionLoading: "",
+        domains: [{ id: 1, name: "domain1" }],
+      },
+      fallback: "lazy",
+    };
 
-    it("matches the latest snapshot", () => {
-      expect(wrapper).toMatchSnapshot();
+    it("matches the latest snapshot", async () => {
+      const { container, queryByText } = render(<IngestForm />, renderOpts);
+      await waitFor(() =>
+        expect(queryByText(/loading/i)).not.toBeInTheDocument()
+      );
+      await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+      expect(container).toMatchSnapshot();
     });
 
-    it("dispatches selectTemplate when component mounts", () => {
-      shallowWithIntl(<IngestForm {...props} />);
-      expect(selectTemplate.mock.calls.length).toBe(1);
+    it("contains no <TemplateSelector />", async () => {
+      const { queryByText } = render(<IngestForm />, renderOpts);
+      await waitFor(() =>
+        expect(queryByText(/loading/i)).not.toBeInTheDocument()
+      );
+      await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+      expect(queryByText("template1")).not.toBeInTheDocument();
     });
   });
 });

package/src/ingests/components/__tests__/IngestLabelResults.spec.js

@@ -1,12 +1,12 @@
 import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
+import { render } from "@truedat/test/render";
 import { IngestsLabelResults } from "../IngestsLabelResults";
 
 describe("<IngestsLabelResults />", () => {
   const props = { ingestCount: 22 };
 
   it("matches the latest snapshot", () => {
-    const wrapper = shallowWithIntl(<IngestsLabelResults {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<IngestsLabelResults {...props} />);
+    expect(container).toMatchSnapshot();
   });
 });

package/src/ingests/components/__tests__/__snapshots__/IngestFilters.spec.js.snap

@@ -1,14 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<IngestFilters /> matches the latest snapshot 1`] = `
-<Switch>
-  <Route
-    exact={true}
-    path="/ingests"
-    render={[Function]}
-  />
-  <Route
-    render={[Function]}
-  />
-</Switch>
+<div>
+  <div
+    aria-expanded="false"
+    class="ui button floating labeled scrolling dropdown icon"
+    role="listbox"
+    tabindex="0"
+  >
+    <div
+      aria-atomic="true"
+      aria-live="polite"
+      class="divider text"
+      role="alert"
+    >
+      Filters
+    </div>
+    <i
+      aria-hidden="true"
+      class="filter icon"
+    />
+    <div
+      class="menu transition"
+    >
+      <div
+        class="item"
+        role="option"
+      >
+        <em>
+          (reset all filters)
+        </em>
+      </div>
+      <div
+        class="item"
+        role="option"
+      >
+        <span
+          class="text"
+        >
+          confidential
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
 `;