@truedat/ie 4.44.4 → 4.45.1

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.4",
+  "version": "4.45.1",
   "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.4",
-    "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.45.1",
+    "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.4",
-    "@truedat/df": "4.44.4",
+    "@truedat/core": "4.45.1",
+    "@truedat/df": "4.45.1",
     "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": "36fb183e1d22181e6a15b3bac2c01b39214eacdb"
+  "gitHead": "c13f37ee357bf4a5e8c8c99eb6bd0c798f468c49"
 }

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

@@ -13,23 +13,18 @@ import {
 import { compose } from "redux";
 import { connect } from "react-redux";
 import { injectIntl, FormattedMessage } from "react-intl";
-import { HistoryBackButton, TemplateSelector } from "@truedat/core/components";
-import { selectDomain } from "@truedat/df/routines";
-import { applyTemplate } from "@truedat/df/utils";
+import { HistoryBackButton } from "@truedat/core/components";
 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 actionKey = "create";
 
@@ -39,8 +34,6 @@ const initialState = {
   name: "",
   description: {},
   content: {},
-  templatesLoading: true,
-  template: null,
 };
 
 const isNonEmptyString = _.flow(_.trim, _.negate(_.isEmpty));
@@ -48,6 +41,7 @@ const isValid = _.conforms({
   name: isNonEmptyString,
   domain_id: _.isFinite,
   description: _.negate(_.isEmpty),
+  type: isNonEmptyString,
 });
 
 export class IngestForm extends React.Component {
@@ -56,41 +50,13 @@ export class IngestForm extends React.Component {
     ingestAction: PropTypes.func,
     ingestActionLoading: PropTypes.string,
     intl: PropTypes.object,
-    selectDomain: PropTypes.func,
   };
 
   state = initialState;
 
-  handleTemplatesLoaded = ({ templates = [] } = {}) => {
-    const { type: name, content, domain_id } = this.state;
-    const template = name
-      ? _.find(_.propEq("name", name))(templates)
-      : _.size(templates) == 1
-      ? templates[0]
-      : null;
-    this.setState({
-      template,
-      templatesLoading: false,
-      type: template?.name || null,
-      content: template ? applyTemplate(template)(content, domain_id) : {},
-    });
-  };
-
-  handleTemplateSelected = (e, { template }) => {
-    const { content, domain_id } = this.state;
-    this.setState({
-      template,
-      type: template?.name || null,
-      content: template ? applyTemplate(template)(content, domain_id) : {},
-    });
-  };
-
-  handleDomainSelected = (e, { value }) => {
+  handleDomainSelected = (_e, { value }) => {
     const domain_id = value;
 
-    const { selectDomain } = this.props;
-    selectDomain({ id: domain_id });
-
     this.setState({ domain_id });
   };
 
@@ -106,25 +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, ingestAction } = this.props;
-    const ingestVersion = _.pick(["domain_id", "type", ...staticFields])(
-      this.state
-    );
-    const { template, content, domain_id } = this.state;
+    const ingest_version = _.pick([
+      "domain_id",
+      "type",
+      "content",
+      ...staticFields,
+    ])(this.state);
 
     ingestAction({
       action: actionKey,
       ...action,
-      ingest_version: {
-        ...ingestVersion,
-        content: applyTemplate(template)(content, domain_id),
-      },
+      ingest_version,
     });
   };
 
@@ -135,12 +100,10 @@ export class IngestForm extends React.Component {
       intl: { formatMessage },
     } = this.props;
 
-    const { name, description, content, template, templatesLoading } =
-      this.state;
+    const { name, description, content, type, domain_id } = this.state;
 
     const loading =
-      templatesLoading ||
-      (action && action.href && ingestActionLoading === action.href);
+      action && action.href && ingestActionLoading === action.href;
 
     return (
       <Container as={Segment} text>
@@ -150,18 +113,10 @@ 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)}
-          />
-          <TemplateSelector
-            scope="ie"
-            selectedValue={template?.id}
-            onChange={this.handleTemplateSelected}
-            onLoad={this.handleTemplatesLoaded}
-            required
+            invalid={!_.isFinite(domain_id)}
           />
           <Form.Field required>
             <label>
@@ -189,13 +144,16 @@ export class IngestForm extends React.Component {
               onChange={this.handleEditorChange}
             />
           </Form.Field>
-          {template?.id ? (
-            <DynamicForm
-              onChange={this.handleContentChange}
-              content={content}
-              template={template}
-            />
-          ) : null}
+
+          <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" })}
@@ -220,5 +178,5 @@ const mapStateToProps = ({ ingestActionLoading, ingestsActions }) => ({
 
 export default compose(
   injectIntl,
-  connect(mapStateToProps, { ingestAction, selectDomain })
+  connect(mapStateToProps, { ingestAction })
 )(IngestForm);

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,102 +1,68 @@
-import React, { Suspense } from "react";
-import { waitFor } from "@testing-library/react";
+import React from "react";
 import { render } from "@truedat/test/render";
-import { TEMPLATES_QUERY } from "@truedat/core/api/queries";
+import { waitFor } from "@testing-library/react";
+import { multipleTemplatesMock, singleTemplateMock } from "@truedat/test/mocks";
 import IngestForm from "../IngestForm";
 
-const template1 = {
-  id: "1",
-  name: "template1",
-  label: "template1",
-  scope: "remediation",
-  content: [
-    {
-      name: "g1",
-      fields: [{ name: "field1", label: "field1", placeholder: "field1" }],
-    },
-  ],
-};
-const template2 = {
-  id: "2",
-  name: "template2",
-  label: "template2",
-  scope: "remediation",
-  content: {},
-};
-const makeRenderOpts = (templates) => ({
-  mocks: [
-    {
-      request: { query: TEMPLATES_QUERY, variables: { scope: "ie" } },
-      result: { data: { templates } },
-    },
-  ],
-  state: {
-    ingestActions: { create: {} },
-    ingestActionLoading: "",
-    domains: [{ id: 1, name: "domain1" }],
-  },
-});
+const variables = { scope: "ie", domainIds: [1] };
 
 describe("<IngestForm />", () => {
   describe("with multiple templates", () => {
-    const templates = [template1, template2];
-    const renderOpts = makeRenderOpts(templates);
+    const renderOpts = {
+      mocks: [multipleTemplatesMock(variables)],
+      state: {
+        ingestActions: { create: {} },
+        ingestActionLoading: "",
+        domains: [{ id: 1, name: "domain1" }],
+      },
+      fallback: "lazy",
+    };
 
     it("matches the latest snapshot", async () => {
-      const { container, queryByText } = render(
-        <Suspense fallback="loading...">
-          <IngestForm />
-        </Suspense>,
-        renderOpts
+      const { container, queryByText } = render(<IngestForm />, renderOpts);
+      await waitFor(() =>
+        expect(queryByText(/loading/i)).not.toBeInTheDocument()
       );
-      await waitFor(() => {
-        expect(queryByText(/loading/i)).not.toBeInTheDocument();
-      });
+      await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
       expect(container).toMatchSnapshot();
     });
 
     it("contains a template selector", async () => {
-      const { queryByRole } = render(
-        <Suspense fallback="loading...">
-          <IngestForm />
-        </Suspense>,
-        renderOpts
+      const { queryByText } = render(<IngestForm />, renderOpts);
+      await waitFor(() =>
+        expect(queryByText(/loading/i)).not.toBeInTheDocument()
       );
-      await waitFor(() => {
-        expect(
-          queryByRole("option", { name: "template1" })
-        ).toBeInTheDocument();
-      });
+      await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+      expect(queryByText("template1")).toBeInTheDocument();
     });
   });
 
   describe("with a single template", () => {
-    const templates = [template1];
-    const renderOpts = makeRenderOpts(templates);
+    const renderOpts = {
+      mocks: [singleTemplateMock(variables)],
+      state: {
+        ingestActions: { create: {} },
+        ingestActionLoading: "",
+        domains: [{ id: 1, name: "domain1" }],
+      },
+      fallback: "lazy",
+    };
 
     it("matches the latest snapshot", async () => {
-      const { container, queryByText } = render(
-        <Suspense fallback="loading...">
-          <IngestForm />
-        </Suspense>,
-        renderOpts
+      const { container, queryByText } = render(<IngestForm />, renderOpts);
+      await waitFor(() =>
+        expect(queryByText(/loading/i)).not.toBeInTheDocument()
       );
-      await waitFor(() => {
-        expect(queryByText(/loading/i)).not.toBeInTheDocument();
-      });
+      await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
       expect(container).toMatchSnapshot();
     });
 
     it("contains no <TemplateSelector />", async () => {
-      const { queryByText } = render(
-        <Suspense fallback="loading...">
-          <IngestForm />
-        </Suspense>,
-        renderOpts
+      const { queryByText } = render(<IngestForm />, renderOpts);
+      await waitFor(() =>
+        expect(queryByText(/loading/i)).not.toBeInTheDocument()
       );
-      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>
 `;

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

@@ -4,7 +4,6 @@ exports[`<IngestForm /> with a single template matches the latest snapshot 1`] =
 <div>
   <div
     class="ui segment ui text container"
-    style=""
   >
     <h2
       class="ui header"
@@ -199,23 +198,23 @@ exports[`<IngestForm /> with a single template matches the latest snapshot 1`] =
                 autocorrect="on"
                 contenteditable="true"
                 data-gramm="false"
-                data-key="10"
+                data-key="9"
                 data-slate-editor="true"
                 role="textbox"
                 spellcheck="true"
                 style="outline: none; white-space: pre-wrap; word-wrap: break-word;"
               >
                 <div
-                  data-key="11"
+                  data-key="10"
                   data-slate-object="block"
                   style="position: relative;"
                 >
                   <span
-                    data-key="14"
+                    data-key="13"
                     data-slate-object="text"
                   >
                     <span
-                      data-offset-key="14:0"
+                      data-offset-key="13:0"
                       data-slate-leaf="true"
                     >
                       <span>
@@ -375,81 +374,6 @@ exports[`<IngestForm /> with multiple templates matches the latest snapshot 1`]
           </div>
         </div>
       </div>
-      <div
-        class="required field"
-      >
-        <label>
-          Template
-          <div
-            class="ui left pointing label"
-          >
-            Empty required field
-          </div>
-        </label>
-        <div
-          class="field"
-        >
-          <div
-            aria-busy="false"
-            aria-expanded="false"
-            class="ui search selection dropdown"
-            name="template"
-            role="combobox"
-          >
-            <input
-              aria-autocomplete="list"
-              autocomplete="off"
-              class="search"
-              tabindex="0"
-              type="text"
-              value=""
-            />
-            <div
-              aria-atomic="true"
-              aria-live="polite"
-              class="divider default text"
-              role="alert"
-            >
-              Select a 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"
-                >
-                  template1
-                </span>
-              </div>
-              <div
-                aria-checked="false"
-                aria-selected="false"
-                class="item"
-                role="option"
-                style="pointer-events: all;"
-              >
-                <span
-                  class="text"
-                >
-                  template2
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
       <div
         class="required field"
       >
@@ -577,11 +501,11 @@ exports[`<IngestForm /> with multiple templates matches the latest snapshot 1`]
                   style="position: relative;"
                 >
                   <span
-                    data-key="4"
+                    data-key="3"
                     data-slate-object="text"
                   >
                     <span
-                      data-offset-key="4:0"
+                      data-offset-key="3:0"
                       data-slate-leaf="true"
                     >
                       <span>
@@ -605,6 +529,81 @@ exports[`<IngestForm /> with multiple templates matches the latest snapshot 1`]
           </div>
         </div>
       </div>
+      <div
+        class="required field"
+      >
+        <label>
+          Template
+          <div
+            class="ui left pointing label"
+          >
+            Empty required field
+          </div>
+        </label>
+        <div
+          class="field"
+        >
+          <div
+            aria-busy="false"
+            aria-expanded="false"
+            class="ui search selection dropdown"
+            name="template"
+            role="combobox"
+          >
+            <input
+              aria-autocomplete="list"
+              autocomplete="off"
+              class="search"
+              tabindex="0"
+              type="text"
+              value=""
+            />
+            <div
+              aria-atomic="true"
+              aria-live="polite"
+              class="divider default text"
+              role="alert"
+            >
+              Select a 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"
+                >
+                  template1
+                </span>
+              </div>
+              <div
+                aria-checked="false"
+                aria-selected="false"
+                class="item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <span
+                  class="text"
+                >
+                  template2
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <div
         class="actions"
       >

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

@@ -1,14 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<IngestsLabelResults /> matches the latest snapshot 1`] = `
-<Label
-  className="ingests-label-results"
->
-  22
-  <LabelDetail>
-    <MemoizedFormattedMessage
-      id="ingests.retrieved.results"
-    />
-  </LabelDetail>
-</Label>
+<div>
+  <div
+    class="ui label ingests-label-results"
+  >
+    22
+    <div
+      class="detail"
+    >
+      Retrieved elements
+    </div>
+  </div>
+</div>
 `;