@truedat/bg 4.48.11 → 4.49.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.48.12] 2022-07-22
+
+### Changed
+
+- [TD-3584] Allow longer domain descriptions
+
 ## [4.48.10] 2022-07-19
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "4.48.11",
+  "version": "4.49.0",
   "description": "Truedat Web Business Glossary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -86,8 +86,8 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "4.48.11",
-    "@truedat/df": "4.48.11",
+    "@truedat/core": "4.49.0",
+    "@truedat/df": "4.49.0",
     "file-saver": "^2.0.5",
     "moment": "^2.24.0",
     "path-to-regexp": "^1.7.0",
@@ -107,5 +107,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "c174776672b9079d23a00a6561db635d43cbeb32"
+  "gitHead": "7260126df6067fe59b11c5dc2b94dbdd881fed7b"
 }

package/src/concepts/components/ConceptTabPane.js

@@ -16,18 +16,12 @@ import ConceptArchive from "./ConceptArchive";
 import ConceptDetails from "./ConceptDetails";
 import Events from "./Events";
 
-const TemplatesLoader = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplatesLoader")
-);
-
 const ConceptRules = React.lazy(() =>
   import("@truedat/dq/components/ConceptRules")
 );
 
 const NewRule = React.lazy(() => import("@truedat/dq/components/NewRule"));
 
-const QualityTemplatesLoader = () => <TemplatesLoader scope="dq" />;
-
 export const ConceptTabPane = () => (
   <ErrorBoundary>
     <Switch>
@@ -48,15 +42,7 @@ export const ConceptTabPane = () => (
         path={CONCEPT_RULES}
         render={() => (
           <Switch>
-            <Route
-              path={CONCEPT_RULES_NEW}
-              render={() => (
-                <>
-                  <QualityTemplatesLoader />
-                  <NewRule />
-                </>
-              )}
-            />
+            <Route path={CONCEPT_RULES_NEW} render={() => <NewRule />} />
             <Route render={() => <ConceptRules />} />
           </Switch>
         )}

package/src/concepts/relations/api.js

@@ -1,11 +1,3 @@
-const API_CONCEPT_RELATION = "/api/relations/:id";
-const API_CONCEPT_RELATIONS = "/api/relations";
-const API_CONCEPT_RELATIONS_SEARCH = "/api/relations/search";
-const API_CONCEPT_BULK_UPDATE = "/api/business_concept_versions/bulk_update";
+const API_RELATIONS = "/api/relations";
 
-export {
-  API_CONCEPT_RELATION,
-  API_CONCEPT_RELATIONS,
-  API_CONCEPT_RELATIONS_SEARCH,
-  API_CONCEPT_BULK_UPDATE
-};
+export { API_RELATIONS };

package/src/concepts/relations/sagas/linkConcept.js

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import { call, put, takeLatest } from "redux-saga/effects";
 import { apiJsonPost, JSON_OPTS } from "@truedat/core/services/api";
 import { linkConcept } from "../routines";
-import { API_CONCEPT_RELATIONS } from "../api";
+import { API_RELATIONS } from "../api";
 
 export function* linkConceptSaga({ payload }) {
   try {
@@ -22,7 +22,7 @@ export function* linkConceptSaga({ payload }) {
     yield put({ meta, ...linkConcept.request() });
     const { data } = yield call(
       apiJsonPost,
-      API_CONCEPT_RELATIONS,
+      API_RELATIONS,
       requestData,
       JSON_OPTS
     );

package/src/taxonomy/components/DomainForm.js

@@ -1,261 +1,242 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import {
-  Accordion,
-  Button,
-  Form,
-  Icon,
-  Label,
-  Segment
-} from "semantic-ui-react";
-import { compose } from "redux";
+import { Button, Form } from "semantic-ui-react";
 import { connect } from "react-redux";
-import { injectIntl } from "react-intl";
+import { useIntl } from "react-intl";
+import { useForm, Controller } from "react-hook-form";
 import { HistoryBackButton } from "@truedat/core/components";
+import { accentInsensitiveOrder } from "@truedat/core/services/sort";
 import {
   getDomainGroups,
   getDomainTypes,
-  domainParentOptionsSelector
+  domainParentOptionsSelector,
 } from "../selectors";
 
 const toOption = (t, i) => ({ key: i, text: t, value: t });
 
-const domainStringOptions = (collection, value) =>
+const buildOptions = (collection, value) =>
   _.flow(
     _.concat(value),
     _.filter(_.isString),
     _.uniq,
-    _.sortBy(_.lowerCase),
+    _.sortBy(accentInsensitiveOrder),
     _.map.convert({ cap: false })(toOption)
   )(collection);
 
-export class DomainForm extends React.Component {
-  static propTypes = {
-    domain: PropTypes.object,
-    isSubmitting: PropTypes.bool,
-    domainGroups: PropTypes.array,
-    domainParentOptions: PropTypes.array,
-    domainTypes: PropTypes.array,
-    handleSubmit: PropTypes.func.isRequired,
-    intl: PropTypes.object
-  };
-
-  constructor(props) {
-    super(props);
-    const defaults = {
-      description: "",
-      external_id: "",
-      name: "",
-      parent_id: null,
-      type: "",
-      domain_group: null
-    };
-
-    const domain_group = _.path("domain.domain_group.name")(props);
-    const domain = Object.assign({}, defaults, {
-      ...(props.domain || {}),
-      domain_group
-    });
-    const touched = false;
-    this.state = {
-      domain,
-      touched,
-      default_group: _.path("domain.domain_group")(props)
-    };
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
-
-  handleChange(event, data) {
-    const { name, value } = data;
-    const domain = Object.assign({}, this.state.domain, { [name]: value });
-    this.setState({ domain, touched: true });
-    event.preventDefault();
-  }
-
-  handleSelectionClick = () => {
-    const { activeSelection } = this.state;
-    this.setState({ activeSelection: !activeSelection });
-  };
-
-  handleSubmit(event) {
-    const { domain } = this.state;
-    this.props.handleSubmit({ domain });
-    event.preventDefault();
-  }
-
-  validForm() {
-    const { domain } = this.state;
-    return _.flow(
-      _.pick(["name", "external_id", "description"]),
-      _.toPairs,
-      _.every(([, v]) => _.negate(_.isEmpty)(v) && _.negate(_.isNil)(v))
-    )(domain);
-  }
+const DEFAULTS = {
+  description: "",
+  external_id: "",
+  name: "",
+  parent_id: null,
+  type: "",
+  domain_group: null,
+};
 
-  clearableGroup() {
-    const { default_group } = this.state;
-    return _.isNil(default_group) || _.prop("status")(default_group) == "root";
-  }
+export const DomainForm = ({
+  domain = {},
+  isSubmitting,
+  domainGroups,
+  domainParentOptions,
+  domainTypes,
+  onSubmit,
+}) => {
+  const { formatMessage } = useIntl();
+  // const domainGroup = domain?.domain_group;
+  const { handleSubmit, control, formState, watch } = useForm({
+    mode: "all",
+    defaultValues: {
+      ...DEFAULTS,
+      ...domain,
+      domain_group: domain?.domain_group?.name || null,
+    },
+  });
+  const [group, type] = watch(["domain_group", "type"]);
+  const domainGroupOptions = buildOptions(domainGroups, group);
+  const domainTypeOptions = buildOptions(domainTypes, type);
+  const groupClearable =
+    domain?.domain_group?.status === "root" || !domain?.domain_group;
 
-  clearGroup() {
-    const { domain } = this.state;
-    this.setState({
-      ...this.state,
-      domain: { ...domain, domain_group: null },
-      touched: true
-    });
-  }
-  render() {
-    const {
-      isSubmitting,
-      domainGroups,
-      domainTypes,
-      domainParentOptions,
-      intl
-    } = this.props;
-    const { formatMessage } = intl;
-    const { activeSelection, domain } = this.state;
-    return (
-      <Form onSubmit={this.handleSubmit}>
-        <Form.Input
-          name="name"
-          label={formatMessage({ id: "domain.props.name" })}
-          onChange={this.handleChange}
-          value={domain.name}
-          placeholder={formatMessage({ id: "domain.props.name.placeholder" })}
-          autoComplete="off"
-          required
-        />
-        <Form.Input
-          name="external_id"
-          label={formatMessage({ id: "domain.props.external_id" })}
-          onChange={this.handleChange}
-          value={domain.external_id || ""}
-          placeholder={formatMessage({
-            id: "domain.props.external_id.placeholder"
-          })}
-          autoComplete="off"
-          required
+  const { errors, isDirty, isValid } = formState;
+  return (
+    <Form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name="name"
+        rules={{
+          required: formatMessage(
+            { id: "form.validation.required" },
+            { prop: formatMessage({ id: "domain.props.name" }) }
+          ),
+        }}
+        render={({ field: { onBlur, onChange, value } }) => (
+          <Form.Input
+            id="name"
+            autoComplete="off"
+            error={errors?.name?.message}
+            label={{
+              children: formatMessage({ id: "domain.props.name" }),
+              htmlFor: "name",
+            }}
+            name="name"
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({ id: "domain.props.name.placeholder" })}
+            required
+            value={value}
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="external_id"
+        rules={{
+          required: formatMessage(
+            { id: "form.validation.required" },
+            { prop: formatMessage({ id: "domain.props.external_id" }) }
+          ),
+        }}
+        render={({ field: { onBlur, onChange, value } }) => (
+          <Form.Input
+            id="external_id"
+            autoComplete="off"
+            error={errors?.external_id?.message}
+            label={{
+              children: formatMessage({ id: "domain.props.external_id" }),
+              htmlFor: "external_id",
+            }}
+            name="external_id"
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({
+              id: "domain.props.external_id.placeholder",
+            })}
+            required
+            value={value}
+          />
+        )}
+      />
+      {_.isEmpty(domainParentOptions) ? null : (
+        <Controller
+          control={control}
+          name="parent_id"
+          render={({ field: { onBlur, onChange, value } }) => (
+            <Form.Dropdown
+              name="parent_id"
+              label={formatMessage({ id: "domain.props.parent" })}
+              basic
+              search
+              selection
+              clearable
+              options={domainParentOptions}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              placeholder={formatMessage({ id: "domain.selector.placeholder" })}
+              value={value || ""}
+            />
+          )}
         />
-        {!_.isEmpty(domainParentOptions) && (
+      )}
+      <Controller
+        control={control}
+        name="domain_group"
+        render={({ field: { onBlur, onChange, value } }) => (
           <Form.Dropdown
-            name="parent_id"
-            label={formatMessage({ id: "domain.props.parent" })}
+            name="domain_group"
+            label={formatMessage({ id: "domain.props.domain_group" })}
             basic
-            clearable
-            onChange={this.handleChange}
-            value={domain.parent_id}
-            placeholder={formatMessage({ id: "domain.selector.placeholder" })}
-            options={domainParentOptions}
             search
             selection
+            clearable={groupClearable}
+            options={domainGroupOptions}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({
+              id: "domain.props.domain_group.placeholder",
+            })}
+            value={value || ""}
+            allowAdditions
+            additionLabel={
+              <i style={{ color: "red" }}>
+                {formatMessage({ id: "domain.label.domain_group" })}
+              </i>
+            }
           />
         )}
-        <Segment>
-          <Form.Group inline>
-            <label>{formatMessage({ id: "domain.props.domain_group" })}</label>
-            {_.prop("domain_group")(domain) && (
-              <Label size={"medium"}>
-                {_.flow(
-                  _.prop("domain_group"),
-                  _.truncate({ length: 90 })
-                )(domain)}
-                {this.clearableGroup() && (
-                  <Icon name="delete" onClick={() => this.clearGroup()} />
-                )}
-              </Label>
-            )}
-          </Form.Group>
-          <Accordion>
-            <Accordion.Title
-              active={activeSelection}
-              onClick={this.handleSelectionClick}
-            >
-              <Icon name="dropdown" />
-              {formatMessage({ id: "domain.domain_group.select" })}{" "}
-            </Accordion.Title>
-
-            <Accordion.Content active={activeSelection}>
-              <Form.Dropdown
-                name="domain_group"
-                label={formatMessage({ id: "domain.props.domain_group" })}
-                basic
-                clearable={this.clearableGroup()}
-                onChange={this.handleChange}
-                value={domain.domain_group || ""}
-                placeholder={formatMessage({
-                  id: "domain.props.domain_group.placeholder"
-                })}
-                options={domainStringOptions(domainGroups, domain.domain_group)}
-                search
-                selection
-                allowAdditions
-                onAddItem={this.handleAddItem}
-                additionLabel={
-                  <i style={{ color: "red" }}>
-                    {formatMessage({
-                      id: "domain.label.domain_group"
-                    })}
-                  </i>
-                }
-              />
-            </Accordion.Content>
-          </Accordion>
-        </Segment>
-        <Form.Dropdown
-          name="type"
-          label={formatMessage({ id: "domain.props.type" })}
-          basic
-          clearable
-          onChange={this.handleChange}
-          value={domain.type}
-          placeholder={formatMessage({ id: "domain.props.type.placeholder" })}
-          options={domainStringOptions(domainTypes, domain.type)}
-          search
-          selection
-          allowAdditions
-          onAddItem={this.handleAddItem}
-          additionLabel={<i style={{ color: "red" }}>New Domain Type: </i>}
-        />
-        <Form.TextArea
-          name="description"
-          label={formatMessage({ id: "domain.props.description" })}
-          onChange={this.handleChange}
-          value={domain.description}
-          placeholder={formatMessage({
-            id: "domain.props.description.placeholder"
-          })}
-          autoComplete="off"
-          maxLength={255}
-          required
-        />
-        <div className="actions">
-          <HistoryBackButton
-            content={formatMessage({ id: "actions.cancel" })}
-            disabled={isSubmitting}
+      />
+      <Controller
+        control={control}
+        name="type"
+        render={({ field: { onBlur, onChange, value } }) => (
+          <Form.Dropdown
+            name="type"
+            label={formatMessage({ id: "domain.props.type" })}
+            basic
+            search
+            selection
+            clearable
+            options={domainTypeOptions}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({ id: "domain.props.type.placeholder" })}
+            value={value || ""}
+            allowAdditions
+            additionLabel={<i style={{ color: "red" }}>New Domain Type: </i>}
           />
-          <Button
-            type="submit"
-            primary
-            loading={isSubmitting}
-            disabled={isSubmitting || !this.state.touched || !this.validForm()}
-            content={formatMessage({ id: "actions.save" })}
+        )}
+      />
+      <Controller
+        control={control}
+        name="description"
+        render={({ field: { onBlur, onChange, value } }) => (
+          <Form.TextArea
+            autoComplete="off"
+            error={errors?.description?.message}
+            label={formatMessage({ id: "domain.props.description" })}
+            name="description"
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({
+              id: "domain.props.description.placeholder",
+            })}
+            value={value}
           />
-        </div>
-      </Form>
-    );
-  }
-}
+        )}
+      />
+      <div className="actions">
+        <Button
+          floated="right"
+          type="submit"
+          primary
+          loading={isSubmitting}
+          disabled={isSubmitting || !isDirty || !isValid}
+          content={formatMessage({ id: "actions.save" })}
+        />
+        <HistoryBackButton
+          content={formatMessage({ id: "actions.cancel" })}
+          disabled={isSubmitting}
+        />
+      </div>
+    </Form>
+  );
+};
+
+DomainForm.propTypes = {
+  domain: PropTypes.object,
+  isSubmitting: PropTypes.bool,
+  domainGroups: PropTypes.array,
+  domainParentOptions: PropTypes.array,
+  domainTypes: PropTypes.array,
+  onSubmit: PropTypes.func.isRequired,
+};
 
 const mapStateToProps = (state, ownProps) => ({
   domainTypes: getDomainTypes(state),
   domainGroups: getDomainGroups(state),
-  domainParentOptions: _.path("domain.id")(ownProps)
+  domainParentOptions: ownProps.domain?.id
     ? domainParentOptionsSelector(state)
     : [],
-  isSubmitting: state.domainCreating || state.domainUpdating
+  isSubmitting: state.domainCreating || state.domainUpdating,
 });
 
-export default compose(injectIntl, connect(mapStateToProps))(DomainForm);
+export default connect(mapStateToProps)(DomainForm);

package/src/taxonomy/components/DomainRoutes.js

@@ -27,6 +27,28 @@ const RolesLoader = React.lazy(() =>
   import("@truedat/auth/roles/components/RolesLoader")
 );
 
+const DomainRoutes = () => (
+  <>
+    <Route component={DomainLoader} />
+    <Route component={DomainMembersLoader} />
+    <Route exact path={DOMAIN} component={Domain} />
+    <Route exact path={DOMAIN_CONCEPTS} component={Domain} />
+    <Route exact path={DOMAIN_STRUCTURES} component={Domain} />
+    <Route exact path={DOMAIN_MEMBERS} component={Domain} />
+    <Route exact path={DOMAIN_EDIT} render={() => <EditDomain />} />
+    <Route exact path={DOMAIN_NEW} component={NewDomain} />
+    <Route
+      path={DOMAIN_MEMBERS_NEW}
+      render={() => (
+        <>
+          <Route component={RolesLoader} />
+          <Route path={DOMAIN_MEMBERS_NEW} component={AddDomainMember} exact />
+        </>
+      )}
+    />
+  </>
+);
+
 const AuthorizedRoutes = () => (
   <>
     <Route component={DomainsLoader} />
@@ -34,39 +56,12 @@ const AuthorizedRoutes = () => (
     <Switch>
       <Route path={DOMAINS_SEARCH} component={Domains} exact />
       <Route path={DOMAINS_NEW} component={NewDomain} exact />
-      <Route
-        path={DOMAIN}
-        render={() => (
-          <>
-            <Route component={DomainLoader} />
-            <Route component={DomainMembersLoader} />
-            <Route path={DOMAIN} component={Domain} exact />
-            <Route path={DOMAIN_CONCEPTS} component={Domain} exact />
-            <Route path={DOMAIN_STRUCTURES} component={Domain} exact />
-            <Route path={DOMAIN_MEMBERS} component={Domain} exact />
-            <Route path={DOMAIN_EDIT} component={EditDomain} exact />
-            <Route path={DOMAIN_NEW} component={NewDomain} exact />
-            <Route
-              path={DOMAIN_MEMBERS_NEW}
-              render={() => (
-                <>
-                  <Route component={RolesLoader} />
-                  <Route
-                    path={DOMAIN_MEMBERS_NEW}
-                    component={AddDomainMember}
-                    exact
-                  />
-                </>
-              )}
-            />
-          </>
-        )}
-      />
+      <Route path={DOMAIN} render={() => <DomainRoutes />} />
     </Switch>
   </>
 );
 
-const DomainRoutes = () => {
+const DomainsRoutes = () => {
   const authorized = useAuthorized(["taxonomy", "taxonomy_membership"]);
   return (
     <Route
@@ -76,4 +71,4 @@ const DomainRoutes = () => {
   );
 };
 
-export default DomainRoutes;
+export default DomainsRoutes;

package/src/taxonomy/components/Domains.js

@@ -28,7 +28,7 @@ export const Domains = ({ domainsLoading, createDomain }) => (
         <Route
           exact
           path={DOMAINS_NEW}
-          render={() => <DomainForm handleSubmit={createDomain} />}
+          render={() => <DomainForm onSubmit={createDomain} />}
         />
       </Switch>
     </Segment>

package/src/taxonomy/components/EditDomain.js

@@ -1,3 +1,4 @@
+import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
@@ -7,23 +8,24 @@ import { updateDomain } from "../routines";
 import DomainForm from "./DomainForm";
 import DomainCrumbs from "./DomainCrumbs";
 
-export const EditDomain = ({ domain, updateDomain }) => (
-  <>
-    <DomainCrumbs actionCrumb="domain.actions.edit.header" />
-    <Container as={Segment} text>
-      <Header as="h2">
-        <Icon name="cube" />
-        <Header.Content>
-          <FormattedMessage id="domain.actions.edit.header" />
-        </Header.Content>
-      </Header>
-      <DomainForm handleSubmit={updateDomain} domain={domain} />
-    </Container>
-  </>
-);
+export const EditDomain = ({ domain, updateDomain }) =>
+  _.isEmpty(domain) ? null : (
+    <>
+      <DomainCrumbs actionCrumb="domain.actions.edit.header" />
+      <Container as={Segment} text>
+        <Header as="h2">
+          <Icon name="cube" />
+          <Header.Content>
+            <FormattedMessage id="domain.actions.edit.header" />
+          </Header.Content>
+        </Header>
+        <DomainForm onSubmit={updateDomain} domain={domain} />
+      </Container>
+    </>
+  );
 
 EditDomain.propTypes = {
-  domain: PropTypes.object.isRequired,
+  domain: PropTypes.object,
   updateDomain: PropTypes.func.isRequired,
 };
 

package/src/taxonomy/components/NewDomain.js

@@ -15,18 +15,10 @@ export const NewDomain = ({ domain, createDomain }) => (
       <Header as="h2">
         <Icon name="cube" />
         <Header.Content>
-          {!_.isEmpty(domain) && (
-            <FormattedMessage id="domain.actions.create" />
-          )}
-          {_.isEmpty(domain) && (
-            <FormattedMessage id="domains.actions.create" />
-          )}
+          <FormattedMessage id="domain.actions.create" />
         </Header.Content>
       </Header>
-      <DomainForm
-        handleSubmit={createDomain}
-        domain={{ parent_id: domain.id }}
-      />
+      <DomainForm onSubmit={createDomain} domain={{ parent_id: domain.id }} />
     </Container>
   </>
 );

package/src/taxonomy/components/__tests__/DomainForm.spec.js

@@ -1,23 +1,26 @@
 import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
 import { DomainForm } from "../DomainForm";
 
 describe("<DomainForm />", () => {
-  const handleSubmit = jest.fn();
+  const onSubmit = jest.fn();
   const domain = { id: 1, name: "nn", external_id: "foo", description: "dd" };
   const isSubmitting = false;
-  const props = { domain, handleSubmit, isSubmitting };
+  const props = { domain, onSubmit, isSubmitting };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallowWithIntl(<DomainForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const { container, findByRole } = render(<DomainForm {...props} />);
+    await findByRole("button", { name: "Save" });
+    expect(container).toMatchSnapshot();
   });
 
-  it("disables submit button when there are uniformed mandatory fields", () => {
-    const wrapper = shallowWithIntl(<DomainForm {...props} />);
-    wrapper.setState({ touched: true });
-    expect(wrapper.find({ type: "submit" }).prop("disabled")).toBeFalsy();
-    wrapper.setState({ domain: { ...props, external_id: null } });
-    expect(wrapper.find({ type: "submit" }).prop("disabled")).toBeTruthy();
+  it("enables submit when required fields have values", async () => {
+    const props = { domain: {}, onSubmit: jest.fn() };
+    const { findByRole } = render(<DomainForm {...props} />);
+    expect(await findByRole("button", { name: "Save" })).toBeDisabled();
+    userEvent.type(await findByRole("textbox", { name: "Name" }), "name");
+    userEvent.type(await findByRole("textbox", { name: "External Id" }), "id");
+    expect(await findByRole("button", { name: "Save" })).toBeEnabled();
   });
 });

package/src/taxonomy/components/__tests__/__snapshots__/DomainForm.spec.js.snap

@@ -1,142 +1,182 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<DomainForm /> matches the latest snapshot 1`] = `
-<Form
-  as="form"
-  onSubmit={[Function]}
->
-  <FormInput
-    as={[Function]}
-    autoComplete="off"
-    control={[Function]}
-    label="domain.props.name"
-    name="name"
-    onChange={[Function]}
-    placeholder="domain.props.name.placeholder"
-    required={true}
-    value="nn"
-  />
-  <FormInput
-    as={[Function]}
-    autoComplete="off"
-    control={[Function]}
-    label="domain.props.external_id"
-    name="external_id"
-    onChange={[Function]}
-    placeholder="domain.props.external_id.placeholder"
-    required={true}
-    value="foo"
-  />
-  <Segment>
-    <FormGroup
-      inline={true}
+<div>
+  <form
+    class="ui form"
+  >
+    <div
+      class="required field"
+    >
+      <label
+        for="name"
+      >
+        Name
+      </label>
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          id="name"
+          name="name"
+          placeholder="Domain Name"
+          required=""
+          type="text"
+          value="nn"
+        />
+      </div>
+    </div>
+    <div
+      class="required field"
+    >
+      <label
+        for="external_id"
+      >
+        External Id
+      </label>
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          id="external_id"
+          name="external_id"
+          placeholder="Domain's external reference"
+          required=""
+          type="text"
+          value="foo"
+        />
+      </div>
+    </div>
+    <div
+      class="field"
     >
       <label>
-        domain.props.domain_group
+        Group
       </label>
-    </FormGroup>
-    <Accordion>
-      <AccordionTitle
-        onClick={[Function]}
+      <div
+        aria-expanded="false"
+        class="ui basic search selection dropdown"
+        name="domain_group"
+        role="combobox"
       >
-        <Icon
-          as="i"
-          name="dropdown"
+        <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"
+        >
+          Domain Group
+        </div>
+        <i
+          aria-hidden="true"
+          class="dropdown icon"
         />
-        domain.domain_group.select
-         
-      </AccordionTitle>
-      <AccordionContent>
-        <FormDropdown
-          additionLabel={
-            <i
-              style={
-                Object {
-                  "color": "red",
-                }
-              }
-            >
-              domain.label.domain_group
-            </i>
-          }
-          allowAdditions={true}
-          as={[Function]}
-          basic={true}
-          clearable={true}
-          control={[Function]}
-          label="domain.props.domain_group"
-          name="domain_group"
-          onChange={[Function]}
-          options={Array []}
-          placeholder="domain.props.domain_group.placeholder"
-          search={true}
-          selection={true}
+        <div
+          class="menu transition"
+          role="listbox"
+        >
+          <div
+            class="message"
+          >
+            No results found.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label>
+        Type
+      </label>
+      <div
+        aria-expanded="false"
+        class="ui basic search selection dropdown"
+        name="type"
+        role="combobox"
+      >
+        <input
+          aria-autocomplete="list"
+          autocomplete="off"
+          class="search"
+          tabindex="0"
+          type="text"
           value=""
         />
-      </AccordionContent>
-    </Accordion>
-  </Segment>
-  <FormDropdown
-    additionLabel={
-      <i
-        style={
-          Object {
-            "color": "red",
-          }
-        }
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          class="divider default text"
+          role="alert"
+        >
+          Domain Type
+        </div>
+        <i
+          aria-hidden="true"
+          class="dropdown icon"
+        />
+        <div
+          class="menu transition"
+          role="listbox"
+        >
+          <div
+            aria-checked="true"
+            aria-selected="true"
+            class="active selected item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label>
+        Description
+      </label>
+      <textarea
+        autocomplete="off"
+        name="description"
+        placeholder="A description for this domain"
+        rows="3"
       >
-        New Domain Type: 
-      </i>
-    }
-    allowAdditions={true}
-    as={[Function]}
-    basic={true}
-    clearable={true}
-    control={[Function]}
-    label="domain.props.type"
-    name="type"
-    onChange={[Function]}
-    options={
-      Array [
-        Object {
-          "key": 0,
-          "text": "",
-          "value": "",
-        },
-      ]
-    }
-    placeholder="domain.props.type.placeholder"
-    search={true}
-    selection={true}
-    value=""
-  />
-  <FormTextArea
-    as={[Function]}
-    autoComplete="off"
-    control={[Function]}
-    label="domain.props.description"
-    maxLength={255}
-    name="description"
-    onChange={[Function]}
-    placeholder="domain.props.description.placeholder"
-    required={true}
-    value="dd"
-  />
-  <div
-    className="actions"
-  >
-    <HistoryBackButton
-      content="actions.cancel"
-      disabled={false}
-    />
-    <Button
-      as="button"
-      content="actions.save"
-      disabled={true}
-      loading={false}
-      primary={true}
-      type="submit"
-    />
-  </div>
-</Form>
+        dd
+      </textarea>
+    </div>
+    <div
+      class="actions"
+    >
+      <button
+        class="ui primary disabled right floated button"
+        disabled=""
+        tabindex="-1"
+        type="submit"
+      >
+        Save
+      </button>
+      <a
+        class="ui secondary button"
+        href="/"
+        role="button"
+      >
+        Cancel
+      </a>
+    </div>
+  </form>
+</div>
 `;

package/src/taxonomy/components/__tests__/__snapshots__/EditDomain.spec.js.snap

@@ -22,7 +22,7 @@ exports[`<EditDomain /> matches the latest snapshot 1`] = `
         />
       </HeaderContent>
     </Header>
-    <injectIntl(Connect(DomainForm))
+    <Connect(DomainForm)
       domain={
         Object {
           "description": "dd",
@@ -30,7 +30,7 @@ exports[`<EditDomain /> matches the latest snapshot 1`] = `
           "name": "nn",
         }
       }
-      handleSubmit={[MockFunction]}
+      onSubmit={[MockFunction]}
     />
   </Container>
 </Fragment>

package/src/taxonomy/components/__tests__/__snapshots__/NewDomain.spec.js.snap

@@ -22,13 +22,13 @@ exports[`<NewDomain /> matches the latest snapshot 1`] = `
         />
       </HeaderContent>
     </Header>
-    <injectIntl(Connect(DomainForm))
+    <Connect(DomainForm)
       domain={
         Object {
           "parent_id": 1,
         }
       }
-      handleSubmit={[MockFunction]}
+      onSubmit={[MockFunction]}
     />
   </Container>
 </Fragment>

package/src/taxonomy/reducers/domain.js

@@ -11,7 +11,7 @@ const pickFields = _.pick([
   "description",
   "type",
   "parentable_ids",
-  "domain_group"
+  "domain_group",
 ]);
 
 const domain = (state = initialState, { type, payload }) => {

package/src/taxonomy/sagas/createDomain.js

@@ -5,11 +5,10 @@ import { API_DOMAINS } from "../api";
 
 export function* createDomainSaga({ payload }) {
   try {
-    const { domain } = payload;
     const url = API_DOMAINS;
-    const requestData = { domain };
-    yield put(createDomain.request());
-    const { data } = yield call(apiJsonPost, url, requestData, JSON_OPTS);
+    const body = { domain: payload };
+    yield put(createDomain.request(payload));
+    const { data } = yield call(apiJsonPost, url, body, JSON_OPTS);
     yield put(createDomain.success(data));
   } catch (error) {
     if (error.response) {

package/src/taxonomy/sagas/updateDomain.js

@@ -6,13 +6,12 @@ import { API_DOMAIN } from "../api";
 
 const toApiPath = compile(API_DOMAIN);
 
-export function* updateDomainSaga({ payload }) {
+export function* updateDomainSaga({ payload: domain }) {
   try {
-    const { domain } = payload;
     const url = toApiPath(domain);
-    const requestData = { domain };
+    const body = { domain };
     yield put(updateDomain.request());
-    const { data } = yield call(apiJsonPut, url, requestData, JSON_OPTS);
+    const { data } = yield call(apiJsonPut, url, body, JSON_OPTS);
     yield put(updateDomain.success(data));
   } catch (error) {
     if (error.response) {