@truedat/ie 4.44.1 → 4.44.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/ie",
-  "version": "4.44.1",
+  "version": "4.44.4",
   "description": "Truedat Web Ingests",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -30,7 +30,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
-    "@truedat/test": "4.44.1",
+    "@truedat/test": "4.44.4",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -80,8 +80,8 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "4.44.1",
-    "@truedat/df": "4.44.1",
+    "@truedat/core": "4.44.4",
+    "@truedat/df": "4.44.4",
     "file-saver": "^2.0.5",
     "moment": "^2.24.0",
     "path-to-regexp": "^1.7.0",
@@ -100,5 +100,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "20d38381ed4cb6658d1122a4bff08a13fedc2d59"
+  "gitHead": "36fb183e1d22181e6a15b3bac2c01b39214eacdb"
 }

package/src/ingests/components/IngestForm.js

@@ -13,8 +13,8 @@ import {
 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 { HistoryBackButton, TemplateSelector } from "@truedat/core/components";
+import { selectDomain } from "@truedat/df/routines";
 import { applyTemplate } from "@truedat/df/utils";
 import { ingestAction } from "../routines";
 
@@ -30,9 +30,6 @@ const RichTextEditor = React.lazy(() =>
 const TemplateLoader = React.lazy(() =>
   import("@truedat/df/templates/components/TemplateLoader")
 );
-const TemplateSelector = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplateSelector")
-);
 
 const actionKey = "create";
 
@@ -42,6 +39,8 @@ const initialState = {
   name: "",
   description: {},
   content: {},
+  templatesLoading: true,
+  template: null,
 };
 
 const isNonEmptyString = _.flow(_.trim, _.negate(_.isEmpty));
@@ -54,38 +53,37 @@ const isValid = _.conforms({
 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;
+  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) : {},
+    });
+  };
 
-    if (_.has("name")(template) && !_.propEq("name", type)(template))
-      this.setState({
-        type: _.prop("name")(template),
-        content: applyTemplate(content),
-      });
-  }
+  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 }) => {
     const domain_id = value;
@@ -96,12 +94,6 @@ export class IngestForm extends React.Component {
     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 });
   };
@@ -120,20 +112,19 @@ export class IngestForm extends React.Component {
 
   handleSubmit = (e) => {
     e.preventDefault();
-    const { action, applyTemplate, ingestAction } = this.props;
+    const { action, ingestAction } = this.props;
     const ingestVersion = _.pick(["domain_id", "type", ...staticFields])(
       this.state
     );
-
-    const content = applyTemplate(
-      this.state?.content,
-      ingestVersion?.domain_id
-    );
+    const { template, content, domain_id } = this.state;
 
     ingestAction({
       action: actionKey,
       ...action,
-      ingest_version: { ...ingestVersion, content },
+      ingest_version: {
+        ...ingestVersion,
+        content: applyTemplate(template)(content, domain_id),
+      },
     });
   };
 
@@ -142,15 +133,13 @@ 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, template, templatesLoading } =
+      this.state;
 
     const loading =
-      templateLoading ||
+      templatesLoading ||
       (action && action.href && ingestActionLoading === action.href);
 
     return (
@@ -167,12 +156,13 @@ export class IngestForm extends React.Component {
             onChange={this.handleDomainSelected}
             invalid={!_.isFinite(this.state.domain_id)}
           />
-          {_.size(templates) > 1 && (
-            <TemplateSelector
-              selectedValue={_.prop("id")(template)}
-              onChange={this.handleTemplateSelected}
-            />
-          )}
+          <TemplateSelector
+            scope="ie"
+            selectedValue={template?.id}
+            onChange={this.handleTemplateSelected}
+            onLoad={this.handleTemplatesLoaded}
+            required
+          />
           <Form.Field required>
             <label>
               <FormattedMessage id="ingests.props.name" />
@@ -184,7 +174,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 +189,13 @@ export class IngestForm extends React.Component {
               onChange={this.handleEditorChange}
             />
           </Form.Field>
-          {template && template.id && (
+          {template?.id ? (
             <DynamicForm
               onChange={this.handleContentChange}
               content={content}
+              template={template}
             />
-          )}
+          ) : null}
           <div className="actions">
             <HistoryBackButton
               content={formatMessage({ id: "actions.cancel" })}
@@ -223,22 +213,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, selectDomain })
 )(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__/IngestForm.spec.js

@@ -1,71 +1,103 @@
-import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
-import { IngestForm } from "../IngestForm";
+import React, { Suspense } from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { TEMPLATES_QUERY } from "@truedat/core/api/queries";
+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 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" }],
+  },
+});
 
+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 = makeRenderOpts(templates);
 
-    it("matches the latest snapshot", () => {
-      expect(wrapper).toMatchSnapshot();
+    it("matches the latest snapshot", async () => {
+      const { container, queryByText } = render(
+        <Suspense fallback="loading...">
+          <IngestForm />
+        </Suspense>,
+        renderOpts
+      );
+      await waitFor(() => {
+        expect(queryByText(/loading/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 { queryByRole } = render(
+        <Suspense fallback="loading...">
+          <IngestForm />
+        </Suspense>,
+        renderOpts
+      );
+      await waitFor(() => {
+        expect(
+          queryByRole("option", { name: "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 = makeRenderOpts(templates);
 
-    it("matches the latest snapshot", () => {
-      expect(wrapper).toMatchSnapshot();
+    it("matches the latest snapshot", async () => {
+      const { container, queryByText } = render(
+        <Suspense fallback="loading...">
+          <IngestForm />
+        </Suspense>,
+        renderOpts
+      );
+      await waitFor(() => {
+        expect(queryByText(/loading/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(
+        <Suspense fallback="loading...">
+          <IngestForm />
+        </Suspense>,
+        renderOpts
+      );
+      await waitFor(() => {
+        expect(queryByText(/loading/i)).not.toBeInTheDocument();
+      });
+      expect(queryByText("template1")).not.toBeInTheDocument();
     });
   });
 });

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

@@ -1,180 +1,629 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<IngestForm /> with a single template matches the latest snapshot 1`] = `
-<Container
-  as={[Function]}
-  text={true}
->
-  <Header
-    as="h2"
+<div>
+  <div
+    class="ui segment ui text container"
+    style=""
   >
-    <Icon
-      as="i"
-      name="share square"
-    />
-    <HeaderContent>
-      <MemoizedFormattedMessage
-        id="ingests.actions.create"
-      />
-    </HeaderContent>
-  </Header>
-  <lazy />
-  <Form
-    as="form"
-  >
-    <lazy
-      invalid={true}
-      onChange={[Function]}
-    />
-    <FormField
-      required={true}
+    <h2
+      class="ui header"
     >
-      <label>
-        <MemoizedFormattedMessage
-          id="ingests.props.name"
-        />
-        <Label
-          pointing="left"
-        >
-          <MemoizedFormattedMessage
-            id="template.form.validation.empty_required"
-          />
-        </Label>
-      </label>
-      <FormInput
-        as={[Function]}
-        control={[Function]}
-        name="name"
-        onChange={[Function]}
-        value=""
+      <i
+        aria-hidden="true"
+        class="share square icon"
       />
-    </FormField>
-    <FormField
-      required={true}
+      <div
+        class="content"
+      >
+        New Ingest
+      </div>
+    </h2>
+    <form
+      class="ui form"
     >
-      <label>
-        <MemoizedFormattedMessage
-          id="ingests.props.description"
-        />
-        <Label
-          pointing="left"
+      <div
+        class="required field"
+      >
+        <label>
+          Domain
+        </label>
+        <div
+          class="field"
         >
-          <MemoizedFormattedMessage
-            id="template.form.validation.empty_required"
-          />
-        </Label>
-      </label>
-      <lazy
-        name="description"
-        onChange={[Function]}
-        value={Object {}}
-      />
-    </FormField>
-    <div
-      className="actions"
-    >
-      <HistoryBackButton
-        content="actions.cancel"
-      />
-      <Button
-        as="button"
-        content="actions.create"
-        disabled={true}
-        onClick={[Function]}
-        primary={true}
-      />
-    </div>
-  </Form>
-</Container>
+          <div
+            aria-expanded="false"
+            class="ui fluid search selection dropdown"
+            name="domain"
+            role="combobox"
+          >
+            <input
+              aria-autocomplete="list"
+              autocomplete="off"
+              class="search"
+              tabindex="0"
+              type="text"
+              value=""
+            />
+            <div
+              aria-atomic="true"
+              aria-live="polite"
+              class="divider text"
+              role="alert"
+            >
+              domain1
+            </div>
+            <i
+              aria-hidden="true"
+              class="dropdown icon"
+            />
+            <div
+              aria-multiselectable="false"
+              class="menu transition"
+              role="listbox"
+            >
+              <div
+                aria-checked="true"
+                aria-selected="true"
+                class="active selected item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <div
+                  class="text"
+                  style="margin-left: 0px;"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="icon"
+                  />
+                  domain1
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="required field"
+      >
+        <label>
+          Ingest
+          <div
+            class="ui left pointing label"
+          >
+            Empty required field
+          </div>
+        </label>
+        <div
+          class="field"
+        >
+          <div
+            class="ui input"
+          >
+            <input
+              name="name"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="required field"
+      >
+        <label>
+          Description
+          <div
+            class="ui left pointing label"
+          >
+            Empty required field
+          </div>
+        </label>
+        <div>
+          <div
+            style="border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem;"
+          >
+            <div
+              class="ui menu"
+            >
+              <div
+                class="disabled icon item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="bold icon"
+                />
+              </div>
+              <div
+                class="disabled icon item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="italic icon"
+                />
+              </div>
+              <div
+                class="disabled icon item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="underline icon"
+                />
+              </div>
+              <div
+                class="disabled icon item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="header icon"
+                />
+              </div>
+              <div
+                class="disabled icon item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="h icon"
+                />
+              </div>
+              <div
+                class="disabled icon item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="list ol icon"
+                />
+              </div>
+              <div
+                class="disabled icon item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="list ul icon"
+                />
+              </div>
+              <div
+                class="disabled icon item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="linkify icon"
+                />
+              </div>
+            </div>
+            <div
+              style="padding: 10px;"
+            >
+              <div
+                autocorrect="on"
+                contenteditable="true"
+                data-gramm="false"
+                data-key="10"
+                data-slate-editor="true"
+                role="textbox"
+                spellcheck="true"
+                style="outline: none; white-space: pre-wrap; word-wrap: break-word;"
+              >
+                <div
+                  data-key="11"
+                  data-slate-object="block"
+                  style="position: relative;"
+                >
+                  <span
+                    data-key="14"
+                    data-slate-object="text"
+                  >
+                    <span
+                      data-offset-key="14:0"
+                      data-slate-leaf="true"
+                    >
+                      <span>
+                        <span
+                          contenteditable="false"
+                          style="pointer-events: none; display: inline-block; width: 0px; max-width: 100%; white-space: nowrap; opacity: 0.333; vertical-align: text-top;"
+                        />
+                        <span
+                          data-slate-length="0"
+                          data-slate-zero-width="n"
+                        >
+                          
+                          <br />
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </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
+        class="actions"
+      >
+        <a
+          class="ui secondary button"
+          href="/"
+          role="button"
+        >
+          Cancel
+        </a>
+        <button
+          class="ui primary disabled button"
+          disabled=""
+          tabindex="-1"
+        >
+          Create
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
 `;
 
 exports[`<IngestForm /> with multiple templates matches the latest snapshot 1`] = `
-<Container
-  as={[Function]}
-  text={true}
->
-  <Header
-    as="h2"
+<div>
+  <div
+    class="ui segment ui text container"
+    style=""
   >
-    <Icon
-      as="i"
-      name="share square"
-    />
-    <HeaderContent>
-      <MemoizedFormattedMessage
-        id="ingests.actions.create"
-      />
-    </HeaderContent>
-  </Header>
-  <lazy />
-  <Form
-    as="form"
-  >
-    <lazy
-      invalid={true}
-      onChange={[Function]}
-    />
-    <lazy
-      onChange={[Function]}
-    />
-    <FormField
-      required={true}
+    <h2
+      class="ui header"
     >
-      <label>
-        <MemoizedFormattedMessage
-          id="ingests.props.name"
-        />
-        <Label
-          pointing="left"
-        >
-          <MemoizedFormattedMessage
-            id="template.form.validation.empty_required"
-          />
-        </Label>
-      </label>
-      <FormInput
-        as={[Function]}
-        control={[Function]}
-        name="name"
-        onChange={[Function]}
-        value=""
+      <i
+        aria-hidden="true"
+        class="share square icon"
       />
-    </FormField>
-    <FormField
-      required={true}
+      <div
+        class="content"
+      >
+        New Ingest
+      </div>
+    </h2>
+    <form
+      class="ui form"
     >
-      <label>
-        <MemoizedFormattedMessage
-          id="ingests.props.description"
-        />
-        <Label
-          pointing="left"
+      <div
+        class="required field"
+      >
+        <label>
+          Domain
+        </label>
+        <div
+          class="field"
         >
-          <MemoizedFormattedMessage
-            id="template.form.validation.empty_required"
-          />
-        </Label>
-      </label>
-      <lazy
-        name="description"
-        onChange={[Function]}
-        value={Object {}}
-      />
-    </FormField>
-    <div
-      className="actions"
-    >
-      <HistoryBackButton
-        content="actions.cancel"
-      />
-      <Button
-        as="button"
-        content="actions.create"
-        disabled={true}
-        onClick={[Function]}
-        primary={true}
-      />
-    </div>
-  </Form>
-</Container>
+          <div
+            aria-expanded="false"
+            class="ui fluid search selection dropdown"
+            name="domain"
+            role="combobox"
+          >
+            <input
+              aria-autocomplete="list"
+              autocomplete="off"
+              class="search"
+              tabindex="0"
+              type="text"
+              value=""
+            />
+            <div
+              aria-atomic="true"
+              aria-live="polite"
+              class="divider text"
+              role="alert"
+            >
+              domain1
+            </div>
+            <i
+              aria-hidden="true"
+              class="dropdown icon"
+            />
+            <div
+              aria-multiselectable="false"
+              class="menu transition"
+              role="listbox"
+            >
+              <div
+                aria-checked="true"
+                aria-selected="true"
+                class="active selected item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <div
+                  class="text"
+                  style="margin-left: 0px;"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="icon"
+                  />
+                  domain1
+                </div>
+              </div>
+            </div>
+          </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"
+      >
+        <label>
+          Ingest
+          <div
+            class="ui left pointing label"
+          >
+            Empty required field
+          </div>
+        </label>
+        <div
+          class="field"
+        >
+          <div
+            class="ui input"
+          >
+            <input
+              name="name"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="required field"
+      >
+        <label>
+          Description
+          <div
+            class="ui left pointing label"
+          >
+            Empty required field
+          </div>
+        </label>
+        <div>
+          <div
+            style="border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem;"
+          >
+            <div
+              class="ui menu"
+            >
+              <div
+                class="disabled icon item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="bold icon"
+                />
+              </div>
+              <div
+                class="disabled icon item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="italic icon"
+                />
+              </div>
+              <div
+                class="disabled icon item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="underline icon"
+                />
+              </div>
+              <div
+                class="disabled icon item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="header icon"
+                />
+              </div>
+              <div
+                class="disabled icon item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="h icon"
+                />
+              </div>
+              <div
+                class="disabled icon item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="list ol icon"
+                />
+              </div>
+              <div
+                class="disabled icon item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="list ul icon"
+                />
+              </div>
+              <div
+                class="disabled icon item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="linkify icon"
+                />
+              </div>
+            </div>
+            <div
+              style="padding: 10px;"
+            >
+              <div
+                autocorrect="on"
+                contenteditable="true"
+                data-gramm="false"
+                data-key="0"
+                data-slate-editor="true"
+                role="textbox"
+                spellcheck="true"
+                style="outline: none; white-space: pre-wrap; word-wrap: break-word;"
+              >
+                <div
+                  data-key="1"
+                  data-slate-object="block"
+                  style="position: relative;"
+                >
+                  <span
+                    data-key="4"
+                    data-slate-object="text"
+                  >
+                    <span
+                      data-offset-key="4:0"
+                      data-slate-leaf="true"
+                    >
+                      <span>
+                        <span
+                          contenteditable="false"
+                          style="pointer-events: none; display: inline-block; width: 0px; max-width: 100%; white-space: nowrap; opacity: 0.333; vertical-align: text-top;"
+                        />
+                        <span
+                          data-slate-length="0"
+                          data-slate-zero-width="n"
+                        >
+                          
+                          <br />
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="actions"
+      >
+        <a
+          class="ui secondary button"
+          href="/"
+          role="button"
+        >
+          Cancel
+        </a>
+        <button
+          class="ui primary disabled button"
+          disabled=""
+          tabindex="-1"
+        >
+          Create
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
 `;