@truedat/df 4.44.2 → 4.44.5

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [4.44.5] 2022-05-20
+
+### Added
+
+- [TD-4230] Created `SelectableDynamicForm` that wraps `TemplateSelector` and `DynamicForm` with common business logic
+
+### Changed
+
+- [TD-4230] `TemplateLoader` works with multiple domain ids
+
 ## [4.38.4] 2022-02-20
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "4.44.2",
+  "version": "4.44.5",
   "description": "Truedat Web Data Quality Module",
   "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,11 +87,11 @@
     ]
   },
   "dependencies": {
-    "@truedat/auth": "4.44.2",
-    "@truedat/core": "4.44.2",
+    "@truedat/auth": "4.44.5",
+    "@truedat/core": "4.44.5",
     "axios": "^0.19.2",
     "path-to-regexp": "^1.7.0",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react-color": "^2.17.3",
     "react-intl": "^5.20.10",
     "react-redux": "^7.2.4",
@@ -100,5 +107,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "ca0c5fffcba96736f7a2054f3c37789da8c30a9e"
+  "gitHead": "5a339468198c803592b285eddd0dd0c0b0eced93"
 }

package/src/components/DynamicForm.js

@@ -15,12 +15,13 @@ export const DynamicForm = ({
   fieldsToOmit,
   selectedDomain,
 }) => {
+  const domainId = selectedDomain?.id;
   useEffect(() => {
-    if (!_.isNil(selectedDomain?.id) && !_.isEmpty(template)) {
-      onChange(applyTemplate(content, selectedDomain?.id), {});
+    if (!_.isNil(domainId) && !_.isEmpty(template)) {
+      onChange(applyTemplate(content, domainId), {});
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [applyTemplate, selectedDomain, template]);
+  }, [applyTemplate, domainId, template]);
 
   if (
     loading ||
@@ -33,10 +34,7 @@ export const DynamicForm = ({
 
   const handleChange = (e, { name, value }) => {
     e && e.preventDefault();
-    const newContent = applyTemplate(
-      { ...content, [name]: value },
-      selectedDomain?.id
-    );
+    const newContent = applyTemplate({ ...content, [name]: value }, domainId);
     onChange(newContent, {});
   };
 
@@ -49,17 +47,15 @@ export const DynamicForm = ({
 
   return (
     <>
-      {parsedGroups.map(({ name, fields }, i) => {
-        return (
-          <FieldGroupSegment
-            key={i}
-            onFieldChange={handleChange}
-            name={name}
-            fields={fields}
-            scope={_.prop("scope")(template)}
-          />
-        );
-      })}
+      {parsedGroups.map(({ name, fields }, i) => (
+        <FieldGroupSegment
+          key={i}
+          onFieldChange={handleChange}
+          name={name}
+          fields={fields}
+          scope={_.prop("scope")(template)}
+        />
+      ))}
     </>
   );
 };
@@ -81,7 +77,13 @@ const makeMapStateToProps = () => {
   const mapStateToProps = (state, props) => ({
     applyTemplate: getApplyTemplate(state, props),
     loading: state.loading,
-    selectedDomain: state.selectedDomain,
+    selectedDomain:
+      props.selectedDomain ||
+      (!_.isEmpty(state.selectedDomain)
+        ? state.selectedDomain
+        : _.isNil(_.head(state.selectedDomains))
+        ? null
+        : { id: _.head(state.selectedDomains) }),
     template: getTemplate(state, props),
   });
   return mapStateToProps;

package/src/components/SelectableDynamicForm.js

@@ -0,0 +1,66 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import { TemplateSelector } from "@truedat/core/components";
+import { applyTemplate, validateContent } from "@truedat/df/utils";
+import DynamicForm from "./DynamicForm";
+
+export default function SelectableDynamicForm({
+  domainIds,
+  scope,
+  required,
+  content,
+  header,
+  name,
+  onChange,
+  onNameChange,
+}) {
+  const [template, setTemplate] = useState();
+  const domain = _.size(domainIds) > 0 ? { id: _.head(domainIds) } : null;
+
+  const handleChange = (content) => {
+    onChange({ content, valid: validateContent(template)(content) });
+  };
+
+  const handleLoad = ({ templates }) => {
+    const template = name
+      ? _.find(_.propEq("name", name))(templates)
+      : _.size(templates) == 1
+      ? _.head(templates)
+      : null;
+    if (template?.name !== name) {
+      onNameChange(template?.name);
+    }
+    handleChange(template ? applyTemplate(template)(content, domain?.id) : {});
+    setTemplate(template);
+  };
+
+  const handleSelected = (_e, { template }) => {
+    onNameChange(template?.name);
+    handleChange(template ? applyTemplate(template)(content, domain?.id) : {});
+    setTemplate(template);
+  };
+
+  return (
+    <>
+      <TemplateSelector
+        scope={scope}
+        domainIds={domainIds}
+        required={required}
+        selectedValue={template?.id}
+        onChange={handleSelected}
+        onLoad={handleLoad}
+      />
+      {template ? (
+        <>
+          {header}
+          <DynamicForm
+            onChange={handleChange}
+            content={content}
+            template={template}
+            selectedDomain={domain}
+          />
+        </>
+      ) : null}
+    </>
+  );
+}

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

@@ -0,0 +1,122 @@
+import React from "react";
+import { waitFor, waitForElementToBeRemoved } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+
+import {
+  errorTemplateMock,
+  multipleTemplatesMock,
+  singleTemplateMock,
+} from "@truedat/test/mocks";
+import SelectableDynamicForm from "../SelectableDynamicForm";
+
+const variables = {
+  scope: "foo",
+  domainIds: [1],
+};
+const variablesEmptyDomains = { scope: "foo" };
+const props = {
+  ...variables,
+  onChange: jest.fn(),
+  onNameChange: jest.fn(),
+};
+
+describe("<SelectableDynamicForm />", () => {
+  describe("with multiple templates", () => {
+    const renderOpts = {
+      mocks: [multipleTemplatesMock(variables)],
+    };
+
+    it("matches the latest snapshot", async () => {
+      const { container, queryByText } = render(
+        <SelectableDynamicForm {...props} />,
+        renderOpts
+      );
+      await waitForElementToBeRemoved(() => queryByText(/loading/i));
+      expect(container).toMatchSnapshot();
+    });
+
+    it("matches the latest snapshot for error query", async () => {
+      const renderOpts = {
+        mocks: [errorTemplateMock(variables)],
+      };
+      const { container, queryByText } = render(
+        <SelectableDynamicForm {...props} />,
+        renderOpts
+      );
+      await waitForElementToBeRemoved(() => queryByText(/loading/i));
+      expect(container).toMatchSnapshot();
+    });
+
+    it("calls onNameChange and onChange functions when selecting template", async () => {
+      const onChange = jest.fn();
+      const onNameChange = jest.fn();
+      const thisProps = {
+        ...props,
+        onChange,
+        onNameChange,
+      };
+      const { container, findByText, queryByText } = render(
+        <SelectableDynamicForm {...thisProps} />,
+        renderOpts
+      );
+
+      await waitForElementToBeRemoved(() => queryByText(/loading/i));
+      userEvent.click(await findByText("template1"));
+
+      expect(onChange).toHaveBeenCalledWith({ content: {}, valid: [] });
+      expect(onNameChange).toHaveBeenCalledWith("template1");
+
+      const input = container.querySelector('[name="field1"]');
+      userEvent.type(input, "A");
+      expect(onChange).toHaveBeenCalledWith({
+        content: { field1: "A" },
+        valid: [],
+      });
+    });
+  });
+
+  describe("with a single template", () => {
+    const renderOpts = {
+      mocks: [singleTemplateMock(variables)],
+    };
+
+    it("matches the latest snapshot", async () => {
+      const { container, queryByText } = render(
+        <SelectableDynamicForm {...props} />,
+        renderOpts
+      );
+      await waitForElementToBeRemoved(() => queryByText(/loading/i));
+      expect(queryByText("template1")).not.toBeInTheDocument();
+      expect(container).toMatchSnapshot();
+    });
+
+    it("calls onNameChange function to select the unique template", async () => {
+      const onNameChange = jest.fn();
+      const thisProps = {
+        ...props,
+        onNameChange,
+      };
+      render(<SelectableDynamicForm {...thisProps} />, renderOpts);
+      await waitFor(() =>
+        expect(onNameChange).toHaveBeenCalledWith("template1")
+      );
+    });
+  });
+
+  describe("with no domains", () => {
+    const renderOpts = {
+      mocks: [multipleTemplatesMock(variablesEmptyDomains)],
+    };
+
+    it("matches the latest snapshot", async () => {
+      const { container, queryByText } = render(
+        <SelectableDynamicForm {...props} />,
+        renderOpts
+      );
+      await waitForElementToBeRemoved(() => queryByText(/loading/i));
+      expect(queryByText("template1")).not.toBeInTheDocument();
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/src/components/__tests__/__snapshots__/SelectableDynamicForm.spec.js.snap

@@ -0,0 +1,114 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SelectableDynamicForm /> with a single template matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <h4
+      class="ui header"
+    >
+      g1
+    </h4>
+    <div
+      class="field"
+    >
+      <label>
+        field1
+      </label>
+      <div
+        class="field"
+      >
+        <div
+          class="ui input"
+        >
+          <input
+            name="field1"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SelectableDynamicForm /> with multiple templates matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="field"
+  >
+    <label>
+      Template
+    </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>
+`;
+
+exports[`<SelectableDynamicForm /> with multiple templates matches the latest snapshot for error query 1`] = `<div />`;
+
+exports[`<SelectableDynamicForm /> with no domains matches the latest snapshot 1`] = `<div />`;

package/src/components/widgets/DateTimeField.js

@@ -3,25 +3,23 @@ import PropTypes from "prop-types";
 import React from "react";
 import { DateTimeInput } from "semantic-ui-calendar-react";
 
-export const DateTimeField = ({ field: { name, value }, onChange }) => {
-  return (
-    <DateTimeInput
-      duration={0}
-      closable
-      animation={""}
-      name={name}
-      dateTimeFormat={"YYYY-MM-DD HH:mm"}
-      placeholder="Date Time"
-      value={_.isEmpty(value) ? "" : value}
-      iconPosition="left"
-      onChange={(e, { value }) => onChange(e, { name: name, value: value })}
-    />
-  );
-};
+export const DateTimeField = ({ field: { name, value } = {}, onChange }) => (
+  <DateTimeInput
+    animation=""
+    closable
+    dateTimeFormat={"YYYY-MM-DD HH:mm"}
+    duration={0}
+    iconPosition="left"
+    name={name}
+    onChange={(e, { value }) => onChange(e, { name: name, value: value })}
+    placeholder="Date Time"
+    value={value || ""}
+  />
+);
 
 DateTimeField.propTypes = {
   field: PropTypes.object,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
 };
 
 export default DateTimeField;

package/src/messages/en.js

@@ -137,7 +137,7 @@ export default {
   "template.error.content.invalidtype":
     "Field {name} with type {type} already exists in another template",
   "widget.image.error.too_big":
-    "Image size is too big. Must be smaller then {size_mb}MB",
+    "File is too big. Must be smaller then {size_mb}MB",
   "widget.image.error.invalidtype": "Invalid File",
   "widget.copy.modaltitle": "Copy fields",
   "widget.copy.error.jsonformat": "Error: copy has wrong format",

package/src/reducers/__tests__/selectedDomains.spec.js

@@ -0,0 +1,30 @@
+import { selectedDomains } from "../../reducers";
+import { selectDomains, clearSelectedDomains } from "../../routines";
+
+const fooState = [{ foo: "bar" }];
+
+describe("reducers: selectedDomains", () => {
+  const initialState = [];
+
+  it("should provide the initial state", () => {
+    expect(selectedDomains(undefined, {})).toEqual(initialState);
+  });
+
+  it("should handle the clearSelectedDomains.TRIGGER action", () => {
+    expect(
+      selectedDomains(fooState, { type: clearSelectedDomains.TRIGGER })
+    ).toEqual(initialState);
+  });
+
+  it("should handle the selectDomains.TRIGGER action", () => {
+    const id = 1;
+    const payload = [{ id }];
+    expect(
+      selectedDomains(fooState, { type: selectDomains.TRIGGER, payload })
+    ).toEqual(payload);
+  });
+
+  it("should ignore unknown actions", () => {
+    expect(selectedDomains(fooState, { type: "FOO" })).toBe(fooState);
+  });
+});

package/src/reducers/index.js

@@ -1,3 +1,4 @@
 export * from "../templates/reducers";
 export * from "./dfMessage";
 export * from "./selectedDomain";
+export * from "./selectedDomains";

package/src/reducers/selectedDomains.js

@@ -0,0 +1,15 @@
+import _ from "lodash/fp";
+import { selectDomains, clearSelectedDomains } from "../routines";
+
+const initialState = [];
+
+export const selectedDomains = (state = initialState, { type, payload }) => {
+  switch (type) {
+    case selectDomains.TRIGGER:
+      return payload;
+    case clearSelectedDomains.TRIGGER:
+      return initialState;
+    default:
+      return state;
+  }
+};

package/src/routines.js

@@ -1,5 +1,7 @@
 import { createRoutine } from "redux-saga-routines";
 
-export const selectDomain = createRoutine("SELECT_DOMAIN");
 export const clearSelectedDomain = createRoutine("CLEAR_SELECTED_DOMAIN");
+export const clearSelectedDomains = createRoutine("CLEAR_SELECTED_DOMAINS");
+export const selectDomain = createRoutine("SELECT_DOMAIN");
+export const selectDomains = createRoutine("SELECT_DOMAINS");
 export * from "./templates/routines";

package/src/selectors/__tests__/templates.spec.js

@@ -1,42 +1,31 @@
 import { makeGetApplyTemplate, makeGetTemplate } from "..";
 
+const templateFromProps = { id: 1 };
+const templateFromState = { id: 2 };
+
 describe("selectors: makeGetTemplate", () => {
-  const templateFromProps = { id: 1 };
-  const templateFromState = { id: 2 };
   const props = { template: templateFromProps };
   const state = { template: templateFromState };
   it("template from props prevails to template from state", () => {
     const getTemplate = makeGetTemplate();
     const t = getTemplate(state, props);
-    expect(t).toEqual(templateFromProps);
+    expect(t).toBe(templateFromProps);
   });
 
   it("gets template from state if not props provided", () => {
     const getTemplate = makeGetTemplate();
     const t = getTemplate(state, {});
-    expect(t).toEqual(templateFromState);
+    expect(t).toBe(templateFromState);
   });
 });
 
 describe("selectors: makeGetApplyTemplate", () => {
-  const applyTemplate = jest.fn();
-  const templateFromProps = { id: 1 };
-  const templateFromState = { id: 2 };
-
   it("applyTemplate from props prevails to applyTemplate from utils", () => {
+    const applyTemplate = jest.fn();
     const props = { template: templateFromProps, applyTemplate };
     const state = { template: templateFromState };
     const getApplyTemplate = makeGetApplyTemplate();
     getApplyTemplate(state, props);
     expect(applyTemplate).toHaveBeenCalledTimes(1);
   });
-
-  it("get applyTemplate utils when not applyTemplate provided in props", () => {
-    const props = { template: templateFromProps };
-    const state = { template: templateFromState };
-    applyTemplate.mockClear();
-    const getApplyTemplate = makeGetApplyTemplate();
-    getApplyTemplate(state, props);
-    expect(applyTemplate).toHaveBeenCalledTimes(0);
-  });
 });

package/src/selectors/templates.js

@@ -8,6 +8,7 @@ const applyTemplateFromProps = (_state, props) =>
   _.prop("applyTemplate")(props);
 const selectTemplate = (propTemplate, stateTemplate) =>
   _.defaultTo(stateTemplate)(propTemplate);
+
 const selectApplyTemplate = (
   propTemplate,
   stateTemplate,
@@ -17,21 +18,13 @@ const selectApplyTemplate = (
   return _.defaultTo(applyTemplate)(applyTemplateFromProps)(template);
 };
 
-export const makeGetTemplate = () => {
-  const getTemplate = createSelector(
-    templateFromProps,
-    templateFromState,
-    selectTemplate
-  );
-  return getTemplate;
-};
+export const makeGetTemplate = () =>
+  createSelector(templateFromProps, templateFromState, selectTemplate);
 
-export const makeGetApplyTemplate = () => {
-  const getApplyTemplate = createSelector(
+export const makeGetApplyTemplate = () =>
+  createSelector(
     templateFromProps,
     templateFromState,
     applyTemplateFromProps,
     selectApplyTemplate
   );
-  return getApplyTemplate;
-};

package/src/templates/components/TemplateLoader.js

@@ -6,49 +6,61 @@ import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
 import { Loading } from "@truedat/core/components";
 import { clearTemplate, fetchTemplate } from "../routines";
-import { clearSelectedDomain } from "../../routines";
+import { clearSelectedDomain, clearSelectedDomains } from "../../routines";
 
 export class TemplateLoader extends React.Component {
   static propTypes = {
-    clearTemplate: PropTypes.func,
-    fetchTemplate: PropTypes.func,
     clearSelectedDomain: PropTypes.func,
+    clearSelectedDomains: PropTypes.func,
+    clearTemplate: PropTypes.func,
     domainId: PropTypes.number,
+    domainIds: PropTypes.array,
+    fetchTemplate: PropTypes.func,
+    match: PropTypes.object.isRequired,
     templateId: PropTypes.number,
     templateLoading: PropTypes.bool,
-    match: PropTypes.object.isRequired,
   };
 
   componentDidMount() {
-    const { fetchTemplate, domainId, templateId, match } = this.props;
-    if (match && match.params && match.params.templateId) {
+    const { fetchTemplate, domainId, domainIds, templateId, match } =
+      this.props;
+    if (match?.params?.templateId) {
       fetchTemplate({ templateId: match.params.templateId });
     } else if (templateId) {
-      fetchTemplate({ domainId, templateId });
+      fetchTemplate({ domainId, domainIds, templateId });
     }
   }
 
   componentDidUpdate(prevProps) {
-    const { clearTemplate, fetchTemplate, domainId, templateId, match } =
-      this.props;
+    const {
+      clearTemplate,
+      domainId,
+      domainIds,
+      fetchTemplate,
+      match,
+      templateId,
+    } = this.props;
     const {
       domainId: prevDomainId,
-      templateId: prevTemplateId,
+      domainIds: prevDomainIds,
       match: prevMatch,
+      templateId: prevTemplateId,
     } = prevProps;
-    if (match && match.params && match.params.templateId) {
-      if (
-        prevMatch.params &&
-        match.params.templateId === prevMatch.params.templateId
-      ) {
+    if (match?.params?.templateId) {
+      if (match.params.templateId === prevMatch?.params?.templateId) {
         // No change
       } else {
         fetchTemplate({ templateId: match.params.templateId });
       }
     } else if (templateId) {
-      if (domainId !== prevDomainId || templateId !== prevTemplateId) {
+      if (
+        domainId !== prevDomainId ||
+        domainIds !== prevDomainIds ||
+        templateId !== prevTemplateId
+      ) {
         fetchTemplate({
           domainId,
+          domainIds,
           templateId,
         });
       }
@@ -58,9 +70,11 @@ export class TemplateLoader extends React.Component {
   }
 
   componentWillUnmount() {
-    const { clearTemplate, clearSelectedDomain } = this.props;
+    const { clearTemplate, clearSelectedDomain, clearSelectedDomains } =
+      this.props;
     clearTemplate();
     clearSelectedDomain();
+    clearSelectedDomains();
   }
 
   render() {
@@ -75,19 +89,22 @@ export class TemplateLoader extends React.Component {
 
 const mapStateToProps = ({
   selectedDomain,
+  selectedDomains,
   selectedTemplate,
   templateLoading,
 }) => ({
-  templateLoading,
   domainId: _.prop("id")(selectedDomain),
+  domainIds: selectedDomains,
   templateId: _.prop("id")(selectedTemplate),
+  templateLoading,
 });
 
 export default compose(
   withRouter,
   connect(mapStateToProps, {
+    clearSelectedDomain,
+    clearSelectedDomains,
     clearTemplate,
     fetchTemplate,
-    clearSelectedDomain,
   })
 )(TemplateLoader);

package/src/templates/components/__tests__/TemplateLoader.spec.js

@@ -7,16 +7,18 @@ describe("<TemplateLoader />", () => {
   const clearTemplate = jest.fn();
   const fetchTemplate = jest.fn();
   const clearSelectedDomain = jest.fn();
+  const clearSelectedDomains = jest.fn();
   const match = {};
 
   it("matches the latest snapshot", () => {
     const templateLoading = true;
     const props = {
       clearSelectedDomain,
+      clearSelectedDomains,
       clearTemplate,
       fetchTemplate,
       templateLoading,
-      match
+      match,
     };
     const wrapper = shallow(<TemplateLoader {...props} />);
     expect(wrapper).toMatchSnapshot();
@@ -26,10 +28,11 @@ describe("<TemplateLoader />", () => {
     const templateLoading = true;
     const props = {
       clearSelectedDomain,
+      clearSelectedDomains,
       clearTemplate,
       fetchTemplate,
       templateLoading,
-      match
+      match,
     };
     const wrapper = shallow(<TemplateLoader {...props} />);
     expect(wrapper.find("Loading").length).toBe(1);
@@ -39,10 +42,11 @@ describe("<TemplateLoader />", () => {
     const templateLoading = false;
     const props = {
       clearSelectedDomain,
+      clearSelectedDomains,
       clearTemplate,
       fetchTemplate,
       templateLoading,
-      match
+      match,
     };
     const wrapper = shallow(<TemplateLoader {...props} />);
     expect(wrapper.getElement()).toBeNull();
@@ -52,17 +56,19 @@ describe("<TemplateLoader />", () => {
     const fetchTemplate = jest.fn();
     const clearTemplate = jest.fn();
     const clearSelectedDomain = jest.fn();
+    const clearSelectedDomains = jest.fn();
     const templateLoading = false;
     const domainId = 1;
     const templateId = 2;
     const props = {
       clearSelectedDomain,
+      clearSelectedDomains,
       fetchTemplate,
       templateLoading,
       clearTemplate,
       domainId,
       templateId,
-      match
+      match,
     };
     jest.spyOn(TemplateLoader.prototype, "componentDidMount");
     const wrapper = shallow(<TemplateLoader {...props} />);
@@ -72,13 +78,15 @@ describe("<TemplateLoader />", () => {
     expect(clearTemplate.mock.calls.length).toBe(0);
     expect(fetchTemplate.mock.calls.length).toBe(1);
     expect(fetchTemplate.mock.calls[0]).toEqual([
-      { domainId: 1, templateId: 2 }
+      { domainId: 1, templateId: 2 },
     ]);
     expect(clearSelectedDomain.mock.calls.length).toBe(0);
+    expect(clearSelectedDomains.mock.calls.length).toBe(0);
     wrapper.unmount();
     expect(clearTemplate.mock.calls.length).toBe(1);
     expect(fetchTemplate.mock.calls.length).toBe(1);
     expect(clearSelectedDomain.mock.calls.length).toBe(1);
+    expect(clearSelectedDomains.mock.calls.length).toBe(1);
   });
 
   it("calls fetchTemplate when component updates, clearTemplate when component receives null templateId", () => {
@@ -93,7 +101,7 @@ describe("<TemplateLoader />", () => {
       clearTemplate,
       domainId,
       templateId,
-      match
+      match,
     };
     const newProps = { ...props, templateId: 3 };
     const newNullProps = { ...props, templateId: null };
@@ -109,7 +117,7 @@ describe("<TemplateLoader />", () => {
     expect(clearTemplate.mock.calls.length).toBe(0);
     expect(fetchTemplate.mock.calls.length).toBe(2);
     expect(fetchTemplate.mock.calls[1]).toEqual([
-      { domainId: 1, templateId: 3 }
+      { domainId: 1, templateId: 3 },
     ]);
 
     ReactDOM.render(<TemplateLoader {...newNullProps} />, node);

package/src/templates/components/index.js

@@ -1,6 +1,5 @@
 import TemplateLoader from "./TemplateLoader";
 import TemplateRoutes from "./TemplateRoutes";
-import TemplateSelector from "./TemplateSelector";
 import TemplatesLoader from "./TemplatesLoader";
 
-export { TemplateLoader, TemplateRoutes, TemplateSelector, TemplatesLoader };
+export { TemplateLoader, TemplateRoutes, TemplatesLoader };

package/src/templates/sagas/fetchTemplate.js

@@ -8,10 +8,14 @@ const toApiPath = compile(API_TEMPLATE);
 
 export function* fetchTemplateSaga({ payload }) {
   try {
-    const { templateId, domainId } = payload;
+    const { templateId, domainId, domainIds } = payload;
+    const domainIdsString = domainIds ? domainIds.join(",") : undefined;
     const url = toApiPath({ id: templateId });
     yield put(fetchTemplate.request());
-    const json_opts = { ...JSON_OPTS, params: { domain_id: domainId } };
+    const json_opts = {
+      ...JSON_OPTS,
+      params: { domain_id: domainId, domain_ids: domainIdsString },
+    };
     const { data } = yield call(apiJson, url, json_opts);
     yield put(fetchTemplate.success({ ...data }));
   } catch (error) {

package/src/templates/components/TemplateSelector.js

@@ -1,59 +0,0 @@
-import _ from "lodash/fp";
-import React from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { Form, Label } from "semantic-ui-react";
-import { useIntl, FormattedMessage } from "react-intl";
-
-export const TemplateSelector = ({
-  hidden,
-  onChange,
-  options,
-  selectedValue,
-  isOptional,
-}) => {
-  const { formatMessage } = useIntl();
-  const required = !isOptional;
-
-  return hidden ? null : (
-    <Form.Field required={required}>
-      <label>
-        <FormattedMessage id="template.selector.label" />
-        {!selectedValue && required ? (
-          <Label pointing="left">
-            <FormattedMessage id="template.form.validation.empty_required" />
-          </Label>
-        ) : null}
-      </label>
-      <Form.Dropdown
-        placeholder={formatMessage({ id: "template.selector.placeholder" })}
-        name="template"
-        search
-        selection
-        clearable={isOptional}
-        options={options}
-        onChange={onChange}
-        value={selectedValue || null}
-      />
-    </Form.Field>
-  );
-};
-
-TemplateSelector.propTypes = {
-  onChange: PropTypes.func,
-  options: PropTypes.array,
-  hidden: PropTypes.bool,
-  selectedValue: PropTypes.number,
-  isOptional: PropTypes.bool,
-};
-
-const mapStateToProps = ({ templates }) => ({
-  hidden: _.size(templates) <= 1,
-  options: _.map(({ label: text, id: value }, i) => ({
-    key: i,
-    value,
-    text,
-  }))(templates),
-});
-
-export default connect(mapStateToProps)(TemplateSelector);

package/src/templates/components/__tests__/TemplateSelector.spec.js

@@ -1,29 +0,0 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
-import { TemplateSelector } from "../TemplateSelector";
-
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
-describe("<TemplateSelector />", () => {
-  const options = [0, 1, 2, 3].map(v => ({
-    key: v,
-    value: v,
-    text: `text ${v}`
-  }));
-  const onChange = jest.fn();
-  const props = { options, onChange };
-
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<TemplateSelector {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("renders null if hidden is true", () => {
-    const props = { options, onChange, hidden: true };
-    const wrapper = shallow(<TemplateSelector {...props} />);
-    expect(wrapper.getElement()).toBeNull();
-  });
-});

package/src/templates/components/__tests__/__snapshots__/TemplateSelector.spec.js.snap

@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<TemplateSelector /> matches the latest snapshot 1`] = `
-<FormField
-  required={true}
->
-  <label>
-    <MemoizedFormattedMessage
-      id="template.selector.label"
-    />
-    <Label
-      pointing="left"
-    >
-      <MemoizedFormattedMessage
-        id="template.form.validation.empty_required"
-      />
-    </Label>
-  </label>
-  <FormDropdown
-    as={[Function]}
-    control={[Function]}
-    name="template"
-    onChange={[MockFunction]}
-    options={
-      Array [
-        Object {
-          "key": 0,
-          "text": "text 0",
-          "value": 0,
-        },
-        Object {
-          "key": 1,
-          "text": "text 1",
-          "value": 1,
-        },
-        Object {
-          "key": 2,
-          "text": "text 2",
-          "value": 2,
-        },
-        Object {
-          "key": 3,
-          "text": "text 3",
-          "value": 3,
-        },
-      ]
-    }
-    placeholder="template.selector.placeholder"
-    search={true}
-    selection={true}
-    value={null}
-  />
-</FormField>
-`;