@truedat/lm 6.13.7 → 6.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/lm",
-  "version": "6.13.7",
+  "version": "6.14.1",
   "description": "Truedat Link Manager",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "6.8.6",
+    "@truedat/test": "6.14.1",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -86,7 +86,7 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "6.13.7",
+    "@truedat/core": "6.14.1",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
     "react-graph-vis": "1.0.6",
@@ -107,5 +107,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "9137d2a416d46886163ac2de4875761d52e6a2e8"
+  "gitHead": "13f8e92c333acf539f9978ea94db03174130cfb0"
 }

package/src/components/NewRelationTag.js

@@ -1,30 +1,41 @@
 import PropTypes from "prop-types";
 import React from "react";
 import { Header, Icon, Container, Segment } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { connect } from "react-redux";
 import { linkTo } from "@truedat/core/routes";
 import { createRelationTag } from "../routines";
 import RelationTagForm from "./RelationTagForm";
 
-export const NewRelationTag = ({ createRelationTag }) => (
-  <Container text as={Segment}>
-    <Header as="h2">
-      <Icon name="cubes" />
-      <Header.Content>
-        <FormattedMessage
-          id="relationTags.actions.create"
-          defaultMessage="New Relation Type"
+export const NewRelationTag = ({ createRelationTag }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <Container text as={Segment}>
+      <Header as="h2">
+        <Icon
+          name={formatMessage({
+            id: "relationTags.header.icon",
+            defaultMessage: "cubes",
+          })}
         />
-      </Header.Content>
-    </Header>
-    <RelationTagForm
-      onSubmit={(relationTag) => {
-        createRelationTag({ relationTag, redirectUrl: linkTo.RELATION_TAGS() });
-      }}
-    />
-  </Container>
-);
+        <Header.Content>
+          <FormattedMessage
+            id="relationTags.actions.create"
+            defaultMessage="New Relation Type"
+          />
+        </Header.Content>
+      </Header>
+      <RelationTagForm
+        onSubmit={(relationTag) => {
+          createRelationTag({
+            relationTag,
+            redirectUrl: linkTo.RELATION_TAGS(),
+          });
+        }}
+      />
+    </Container>
+  );
+};
 
 NewRelationTag.propTypes = {
   createRelationTag: PropTypes.func,

package/src/components/RelationTags.js

@@ -1,30 +1,39 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { Button, Header, Icon, Segment } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { RELATION_TAGS_NEW } from "@truedat/core/routes";
 import RelationTagCards from "./RelationTagCards";
 
-export const RelationTags = () => (
-  <Segment>
-    <Header as="h2">
-      <Button
-        floated="right"
-        primary
-        as={Link}
-        to={RELATION_TAGS_NEW}
-        content={<FormattedMessage id="relationTags.actions.create" />}
-      />
-      <Icon name="cubes" circular />
-      <Header.Content>
-        <FormattedMessage id="relationTags.header" />
-        <Header.Subheader>
-          <FormattedMessage id="relationTags.subheader" />
-        </Header.Subheader>
-      </Header.Content>
-    </Header>
-    <RelationTagCards />
-  </Segment>
-);
+export const RelationTags = () => {
+  const { formatMessage } = useIntl();
+  return (
+    <Segment>
+      <Header as="h2">
+        <Button
+          floated="right"
+          primary
+          as={Link}
+          to={RELATION_TAGS_NEW}
+          content={<FormattedMessage id="relationTags.actions.create" />}
+        />
+        <Icon
+          name={formatMessage({
+            id: "relationTags.header.icon",
+            defaultMessage: "cubes",
+          })}
+          circular
+        />
+        <Header.Content>
+          <FormattedMessage id="relationTags.header" />
+          <Header.Subheader>
+            <FormattedMessage id="relationTags.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+      <RelationTagCards />
+    </Segment>
+  );
+};
 
 export default RelationTags;

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

@@ -1,10 +1,10 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { NewRelationTag } from "../NewRelationTag";
 
 describe("<NewRelationTag />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<NewRelationTag />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<NewRelationTag />);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,10 +1,20 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { RelationTags } from "../RelationTags";
+import { render } from "@truedat/test/render";
+import RelationTags from "../RelationTags";
+
+const relationTags = [
+  { id: 1, value: { type: "tag1", target_type: "business_concept" } },
+  { id: 2, value: { type: "tag2", target_type: "data_field" } },
+  { id: 3, value: { type: "tag3", target_type: "ingest" } },
+];
+
+const renderOpts = {
+  state: { relationTags },
+};
 
 describe("<RelationTags />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<RelationTags />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<RelationTags />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,26 +1,154 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<NewRelationTag /> matches the latest snapshot 1`] = `
-<Container
-  as={[Function]}
-  text={true}
->
-  <Header
-    as="h2"
+<div>
+  <div
+    class="ui segment ui text container"
   >
-    <Icon
-      as="i"
-      name="cubes"
-    />
-    <HeaderContent>
-      <MemoizedFormattedMessage
-        defaultMessage="New Relation Type"
-        id="relationTags.actions.create"
+    <h2
+      class="ui header"
+    >
+      <i
+        aria-hidden="true"
+        class="cubes icon"
       />
-    </HeaderContent>
-  </Header>
-  <Connect(RelationTagForm)
-    onSubmit={[Function]}
-  />
-</Container>
+      <div
+        class="content"
+      >
+        Create Relation Type
+      </div>
+    </h2>
+    <form
+      class="ui form"
+    >
+      <div
+        class="required field"
+      >
+        <label
+          for="type"
+        >
+          Type
+        </label>
+        <div
+          class="ui input"
+        >
+          <input
+            autocomplete="off"
+            id="type"
+            placeholder="Type"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="required field"
+      >
+        <label
+          for="target_type"
+        >
+          Target type
+        </label>
+        <div
+          aria-expanded="false"
+          autocomplete="off"
+          class="ui selection dropdown"
+          id="target_type"
+          required=""
+          role="listbox"
+          tabindex="0"
+        >
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider default text"
+            role="alert"
+          >
+            Target type
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+          >
+            <div
+              aria-checked="false"
+              aria-selected="true"
+              class="selected item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                Concept
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                Ingest
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                Implementations
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                Structure
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="actions"
+      >
+        <button
+          class="ui primary disabled right floated button"
+          disabled=""
+          tabindex="-1"
+          type="submit"
+        >
+          Create
+        </button>
+        <a
+          class="ui secondary button"
+          href="/"
+          role="button"
+        >
+          Cancel
+        </a>
+      </div>
+    </form>
+  </div>
+</div>
 `;

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

@@ -1,50 +1,141 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<RelationTags /> matches the latest snapshot 1`] = `
-<Segment>
-  <Header
-    as="h2"
+<div>
+  <div
+    class="ui segment"
   >
-    <Button
-      as={
-        {
-          "$$typeof": Symbol(react.forward_ref),
-          "displayName": "Link",
-          "propTypes": {
-            "innerRef": [Function],
-            "onClick": [Function],
-            "replace": [Function],
-            "target": [Function],
-            "to": [Function],
-          },
-          "render": [Function],
-        }
-      }
-      content={
-        <Memo(MemoizedFormattedMessage)
-          id="relationTags.actions.create"
-        />
-      }
-      floated="right"
-      primary={true}
-      to="/relationTags/new"
-    />
-    <Icon
-      as="i"
-      circular={true}
-      name="cubes"
-    />
-    <HeaderContent>
-      <MemoizedFormattedMessage
-        id="relationTags.header"
+    <h2
+      class="ui header"
+    >
+      <a
+        class="ui primary right floated button"
+        href="/relationTags/new"
+        role="button"
+      >
+        Create Relation Type
+      </a>
+      <i
+        aria-hidden="true"
+        class="cubes circular icon"
       />
-      <HeaderSubheader>
-        <MemoizedFormattedMessage
-          id="relationTags.subheader"
-        />
-      </HeaderSubheader>
-    </HeaderContent>
-  </Header>
-  <Connect(RelationTagCards) />
-</Segment>
+      <div
+        class="content"
+      >
+        Relation Types
+        <div
+          class="sub header"
+        >
+          In this section you can manage Relation Types
+        </div>
+      </div>
+    </h2>
+    <div
+      class="ui cards"
+    >
+      <div
+        class="ui card"
+      >
+        <div
+          class="content"
+        >
+          <div
+            class="header"
+          >
+            tag1
+          </div>
+          <div
+            class="description"
+          >
+            business_concept
+          </div>
+        </div>
+        <div
+          class="extra content"
+        >
+          <div
+            class="ui actions"
+          >
+            <button
+              class="ui red basic icon button"
+            >
+              <i
+                aria-hidden="true"
+                class="trash icon"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="ui card"
+      >
+        <div
+          class="content"
+        >
+          <div
+            class="header"
+          >
+            tag2
+          </div>
+          <div
+            class="description"
+          >
+            data_field
+          </div>
+        </div>
+        <div
+          class="extra content"
+        >
+          <div
+            class="ui actions"
+          >
+            <button
+              class="ui red basic icon button"
+            >
+              <i
+                aria-hidden="true"
+                class="trash icon"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="ui card"
+      >
+        <div
+          class="content"
+        >
+          <div
+            class="header"
+          >
+            tag3
+          </div>
+          <div
+            class="description"
+          >
+            ingest
+          </div>
+        </div>
+        <div
+          class="extra content"
+        >
+          <div
+            class="ui actions"
+          >
+            <button
+              class="ui red basic icon button"
+            >
+              <i
+                aria-hidden="true"
+                class="trash icon"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;