@truedat/bg 4.56.8 → 4.56.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.56.9] 2022-11-12
+
+### Added
+
+- [TD-5161] Buttons to create implementations
+
 ## [4.54.9] 2022-10-28
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "4.56.8",
+  "version": "4.56.9",
   "description": "Truedat Web Business Glossary",
   "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": "4.56.8",
+    "@truedat/test": "4.56.9",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -86,8 +86,8 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "4.56.8",
-    "@truedat/df": "4.56.8",
+    "@truedat/core": "4.56.9",
+    "@truedat/df": "4.56.9",
     "file-saver": "^2.0.5",
     "moment": "^2.29.4",
     "path-to-regexp": "^1.7.0",
@@ -108,5 +108,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "9bf266eb26e4af0b774560d5a88b0f22325495e0"
+  "gitHead": "da9a49da6d48b51faf603abff56ff7b1b6c5e413"
 }

package/src/concepts/components/ConceptTabs.js

@@ -21,6 +21,8 @@ export const ConceptTabs = ({
   concept,
   emptyConceptTags,
   emptyImplementationLinks,
+  createImplementation,
+  createRawImplementation,
 }) => {
   const archiveActive = useActiveRoute(CONCEPT_ARCHIVE);
   const conceptActive = useActiveRoute({
@@ -69,7 +71,9 @@ export const ConceptTabs = ({
       >
         <FormattedMessage id="tabs.bg.qualityRules" />
       </Menu.Item>
-      {!emptyImplementationLinks && (
+      {(!emptyImplementationLinks ||
+        createImplementation ||
+        createRawImplementation) && (
         <Menu.Item
           active={implementationsActive}
           as={Link}
@@ -104,9 +108,16 @@ ConceptTabs.propTypes = {
   concept: PropTypes.object,
   emptyConceptTags: PropTypes.bool,
   emptyImplementationLinks: PropTypes.bool,
+  createImplementation: PropTypes.object,
+  createRawImplementation: PropTypes.object,
 };
 
-const mapStateToProps = ({ concept, relationTags, conceptLinks }) => ({
+const mapStateToProps = ({
+  concept,
+  conceptPermissions,
+  conceptLinks,
+  relationTags,
+}) => ({
   emptyConceptTags: _.flow(
     _.filter(_.pathEq("value.target_type", "business_concept")),
     _.isEmpty
@@ -116,6 +127,10 @@ const mapStateToProps = ({ concept, relationTags, conceptLinks }) => ({
     _.filter(_.pathEq("resource_type", "implementation")),
     _.isEmpty
   )(conceptLinks),
+  createImplementation: _.prop("create_implementation")(conceptPermissions),
+  createRawImplementation: _.prop("create_raw_implementation")(
+    conceptPermissions
+  ),
 });
 
 export default connect(mapStateToProps)(ConceptTabs);

package/src/concepts/components/__tests__/ConceptTabs.spec.js

@@ -29,4 +29,20 @@ describe("<ConceptTabs />", () => {
     const { container } = render(<ConceptTabs {...props} />, renderOpts);
     expect(container).toMatchSnapshot();
   });
+
+  it("With concept tags and implementation links", () => {
+    const props = {
+      concept: {
+        id: 1,
+        business_concept_id: 8,
+      },
+      emptyConceptTags: true,
+      emptyImplementationLinks: true,
+      createRawImplementation: { method: "POST" },
+      createLinkImplementation: { method: "POST" },
+      createImplementation: { method: "POST" },
+    };
+    const { container } = render(<ConceptTabs {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
 });

package/src/concepts/components/__tests__/__snapshots__/ConceptTabs.spec.js.snap

@@ -1,5 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<ConceptTabs /> With concept tags and implementation links 1`] = `
+<div>
+  <div
+    class="ui pointing secondary top attached tabular menu"
+  >
+    <a
+      class="item"
+      href="/concepts/8/versions/1"
+    >
+      concept
+    </a>
+    <a
+      class="item"
+      href="/concepts/8/versions/1/links/structures"
+    >
+      relations_data_field
+    </a>
+    <a
+      class="item"
+      href="/concepts/8/versions/1/rules"
+    >
+      qualityRules
+    </a>
+    <a
+      class="item"
+      href="/concepts/8/versions/1/links/implementations"
+    >
+      qualityImplementations
+    </a>
+    <a
+      class="item"
+      href="/concepts/8/versions/1/archive"
+    >
+      history
+    </a>
+    <a
+      class="item"
+      href="/concepts/8/versions/1/events"
+    >
+      audit
+    </a>
+  </div>
+</div>
+`;
+
 exports[`<ConceptTabs /> matches the latest snapshot 1`] = `
 <div>
   <div

package/src/concepts/relations/components/ConceptImplementationLinks.js

@@ -1,45 +1,107 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
+import queryString from "query-string";
 import { connect } from "react-redux";
-import { Segment, Header } from "semantic-ui-react";
+import { Button, Segment, Header, Message } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
+import { Link, useParams } from "react-router-dom";
+import { useIntl } from "react-intl";
+import {
+  IMPLEMENTATION_NEW,
+  IMPLEMENTATION_NEW_RAW,
+} from "@truedat/core/routes";
 import { getConceptImplementationLinks } from "../selectors";
 
 const RuleImplementationsTable = React.lazy(() =>
   import("@truedat/dq/components/RuleImplementationsTable")
 );
 
-export const ConceptImplementationLinks = ({ groups }) => (
-  <Segment attached="bottom">
-    {groups.map(([tag, implementations], key) =>
-      _.isEmpty(implementations) ? null : (
-        <Segment vertical key={key}>
-          <Header as="h3">
-            {tag === "deleted" ? (
-              <FormattedMessage id="implementationDeletedRelation.table.title" />
-            ) : tag === "\uffee" ? (
-              <FormattedMessage id="implementationRelation.table.title" />
-            ) : (
-              tag
-            )}
-          </Header>
-          <RuleImplementationsTable
-            ruleImplementations={implementations}
-            withoutColumns={["business_concept"]}
+export const ConceptImplementationLinks = ({
+  groups,
+  createImplementation,
+  createLinkImplementation,
+  createRawImplementation,
+}) => {
+  const params = useParams();
+  const { formatMessage } = useIntl();
+  return (
+    <Segment attached="bottom">
+      <div style={{ height: "40px" }}>
+        {createRawImplementation && createLinkImplementation ? (
+          <Button
+            floated="right"
+            as={Link}
+            to={{
+              pathname: IMPLEMENTATION_NEW_RAW,
+              search: "?" + queryString.stringify(params),
+            }}
+            content={formatMessage({
+              id: "implementations.actions.create_raw",
+            })}
           />
-        </Segment>
-      )
-    )}
-  </Segment>
-);
+        ) : null}
+        {createImplementation && createLinkImplementation ? (
+          <Button
+            floated="right"
+            primary
+            as={Link}
+            to={{
+              pathname: IMPLEMENTATION_NEW,
+              search: "?" + queryString.stringify(params),
+            }}
+            content={formatMessage({ id: "implementations.actions.create" })}
+          />
+        ) : null}
+      </div>
+      {_.flatten(groups).length <= 2 ? (
+        <Message
+          key="empty_implementations"
+          content={formatMessage({ id: "concepts.implementations.empty" })}
+        />
+      ) : (
+        groups.map(([tag, implementations], key) =>
+          _.isEmpty(implementations) ? null : (
+            <Segment vertical key={key}>
+              <Header as="h3">
+                {tag === "deleted" ? (
+                  <FormattedMessage id="implementationDeletedRelation.table.title" />
+                ) : tag === "\uffee" ? (
+                  <FormattedMessage id="implementationRelation.table.title" />
+                ) : (
+                  tag
+                )}
+              </Header>
+              <RuleImplementationsTable
+                ruleImplementations={implementations}
+                withoutColumns={["business_concept"]}
+              />
+            </Segment>
+          )
+        )
+      )}
+    </Segment>
+  );
+};
 
 ConceptImplementationLinks.propTypes = {
   groups: PropTypes.array,
+  createImplementation: PropTypes.object,
+  createLinkImplementation: PropTypes.object,
+  createRawImplementation: PropTypes.object,
 };
 
 const mapStateToProps = (state) => ({
   groups: getConceptImplementationLinks(state),
+  createImplementation: _.prop("create_implementation")(
+    state.conceptPermissions
+  ),
+  createLinkImplementation: _.prop("create_link_implementation")(
+    state.conceptPermissions
+  ),
+  createRawImplementation: _.prop("create_raw_implementation")(
+    state.conceptPermissions
+  ),
 });
 
 export default connect(mapStateToProps)(ConceptImplementationLinks);

package/src/concepts/relations/components/__tests__/ConceptImplementationLinks.spec.js

@@ -1,24 +1,102 @@
 import _ from "lodash/fp";
 import React, { Suspense } from "react";
 import { render } from "@truedat/test/render";
-
+import en from "../../../../messages/en";
 import { ConceptImplementationLinks } from "../ConceptImplementationLinks";
 
-describe("<ConceptImplementationLinks />", () => {
-  const renderOpts = {
-    messages: {
-      en: {
-        "implementationDeletedRelation.table.title": "Deleted Implementations",
-        "implementationRelation.table.title": "Link to Implementation",
-      },
-    },
-  };
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({
+    business_concept_id: "6483",
+    id: "12345",
+  }),
+}));
 
-  const props = {
-    groups: [["group", [{ implementation_key: "foo" }]]],
-  };
+const messages = {
+  en: {
+    ...en,
+    "ruleImplementations.props.goal": "Goal",
+    "ruleImplementations.props.minimum": "Minimum",
+    "ruleImplementations.props.result_type": "Result Type",
+    "ruleImplementations.props.last_execution_at": "Last execution",
+    "ruleImplementations.props.status": "Status",
+    "ruleImplementations.props.rule": "Rule",
+    "ruleImplementations.props.implementation_key": "Implementation",
+    "ruleImplementations.props.result": "Result",
+    "ruleImplementations.props.updated_at": "Updated At",
+    "ruleImplementations.props.inserted_at": "Inserted At",
+    "implementations.actions.create": "Create Implementation",
+    "implementations.actions.create_raw": "Create Raw Implementation",
+    "concepts.implementations.empty": "This concept has no implementations",
+  },
+};
 
+describe("<ConceptImplementationLinks />", () => {
   it("matches the latest snapshot", () => {
+    const props = {
+      groups: [
+        ["group", [{ implementation_key: "foo", id: "1" }]],
+        ["deleted", []],
+      ],
+    };
+    const renderOpts = { messages };
+    const { container } = render(
+      <Suspense fallback={null}>
+        <ConceptImplementationLinks {...props} />
+      </Suspense>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("show create implementations buttons when have permissions", () => {
+    const renderOpts = { messages };
+    const props = {
+      groups: [
+        ["group", [{ implementation_key: "foo", id: "1" }]],
+        ["deleted", []],
+      ],
+      createRawImplementation: { method: "POST" },
+      createLinkImplementation: { method: "POST" },
+      createImplementation: { method: "POST" },
+    };
+    const { container } = render(
+      <Suspense fallback={null}>
+        <ConceptImplementationLinks {...props} />
+      </Suspense>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("show implementations with groups", () => {
+    const renderOpts = { messages };
+    const props = {
+      groups: [
+        ["￮", [{ implementation_key: "foo", id: "1" }]],
+        ["deleted", [{ implementation_key: "bar", id: "2" }]],
+      ],
+      createRawImplementation: { method: "POST" },
+      createLinkImplementation: { method: "POST" },
+      createImplementation: { method: "POST" },
+    };
+    const { container } = render(
+      <Suspense fallback={null}>
+        <ConceptImplementationLinks {...props} />
+      </Suspense>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("when don't have any implementation", () => {
+    const renderOpts = { messages };
+    const props = {
+      groups: [["group", []]],
+      createRawImplementation: { method: "POST" },
+      createLinkImplementation: { method: "POST" },
+      createImplementation: { method: "POST" },
+    };
     const { container } = render(
       <Suspense fallback={null}>
         <ConceptImplementationLinks {...props} />

package/src/concepts/relations/components/__tests__/__snapshots__/ConceptImplementationLinks.spec.js.snap

@@ -6,6 +6,45 @@ exports[`<ConceptImplementationLinks /> matches the latest snapshot 1`] = `
     class="ui bottom attached segment"
     style="display: none;"
   >
+    <div
+      style="height: 40px;"
+    />
+    <div
+      class="ui vertical segment"
+    >
+      <h3
+        class="ui header"
+      >
+        group
+      </h3>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<ConceptImplementationLinks /> show create implementations buttons when have permissions 1`] = `
+<div>
+  <div
+    class="ui bottom attached segment"
+  >
+    <div
+      style="height: 40px;"
+    >
+      <a
+        class="ui right floated button"
+        href="/implementations/new_raw?business_concept_id=6483&id=12345"
+        role="button"
+      >
+        Create Raw Implementation
+      </a>
+      <a
+        class="ui primary right floated button"
+        href="/implementations/new?business_concept_id=6483&id=12345"
+        role="button"
+      >
+        Create Implementation
+      </a>
+    </div>
     <div
       class="ui vertical segment"
     >
@@ -14,6 +53,425 @@ exports[`<ConceptImplementationLinks /> matches the latest snapshot 1`] = `
       >
         group
       </h3>
+      <table
+        class="ui sortable table"
+      >
+        <thead
+          class=""
+        >
+          <tr
+            class=""
+          >
+            <th
+              class="two wide"
+            >
+              Implementation
+            </th>
+            <th
+              class="two wide"
+            >
+              Rule
+            </th>
+            <th
+              class="two wide"
+            >
+              Status
+            </th>
+            <th
+              class="two wide"
+            >
+              Last execution
+            </th>
+            <th
+              class="two wide"
+            >
+              Result Type
+            </th>
+            <th
+              class="one wide"
+            >
+              Minimum
+            </th>
+            <th
+              class="one wide"
+            >
+              Goal
+            </th>
+            <th
+              class="two wide"
+            >
+              Result
+            </th>
+            <th
+              class="ascending sorted disabled"
+            >
+              Inserted At
+            </th>
+            <th
+              class="ascending sorted disabled"
+            >
+              Updated At
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class=""
+        >
+          <tr
+            class=""
+          >
+            <td
+              class=""
+            >
+              <a
+                href="/implementations/1"
+              >
+                foo
+              </a>
+            </td>
+            <td
+              class=""
+            />
+            <td
+              class=""
+            >
+              ruleImplementation.status.undefined
+            </td>
+            <td
+              class=""
+            />
+            <td
+              class=""
+            />
+            <td
+              class="right aligned"
+            >
+              undefined%
+            </td>
+            <td
+              class="right aligned"
+            >
+              undefined%
+            </td>
+            <td
+              class="center aligned"
+            />
+            <td
+              class=""
+            />
+            <td
+              class=""
+            />
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<ConceptImplementationLinks /> show implementations with groups 1`] = `
+<div>
+  <div
+    class="ui bottom attached segment"
+  >
+    <div
+      style="height: 40px;"
+    >
+      <a
+        class="ui right floated button"
+        href="/implementations/new_raw?business_concept_id=6483&id=12345"
+        role="button"
+      >
+        Create Raw Implementation
+      </a>
+      <a
+        class="ui primary right floated button"
+        href="/implementations/new?business_concept_id=6483&id=12345"
+        role="button"
+      >
+        Create Implementation
+      </a>
+    </div>
+    <div
+      class="ui vertical segment"
+    >
+      <h3
+        class="ui header"
+      >
+        Link to Implementation
+      </h3>
+      <table
+        class="ui sortable table"
+      >
+        <thead
+          class=""
+        >
+          <tr
+            class=""
+          >
+            <th
+              class="two wide"
+            >
+              Implementation
+            </th>
+            <th
+              class="two wide"
+            >
+              Rule
+            </th>
+            <th
+              class="two wide"
+            >
+              Status
+            </th>
+            <th
+              class="two wide"
+            >
+              Last execution
+            </th>
+            <th
+              class="two wide"
+            >
+              Result Type
+            </th>
+            <th
+              class="one wide"
+            >
+              Minimum
+            </th>
+            <th
+              class="one wide"
+            >
+              Goal
+            </th>
+            <th
+              class="two wide"
+            >
+              Result
+            </th>
+            <th
+              class="ascending sorted disabled"
+            >
+              Inserted At
+            </th>
+            <th
+              class="ascending sorted disabled"
+            >
+              Updated At
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class=""
+        >
+          <tr
+            class=""
+          >
+            <td
+              class=""
+            >
+              <a
+                href="/implementations/1"
+              >
+                foo
+              </a>
+            </td>
+            <td
+              class=""
+            />
+            <td
+              class=""
+            >
+              ruleImplementation.status.undefined
+            </td>
+            <td
+              class=""
+            />
+            <td
+              class=""
+            />
+            <td
+              class="right aligned"
+            >
+              undefined%
+            </td>
+            <td
+              class="right aligned"
+            >
+              undefined%
+            </td>
+            <td
+              class="center aligned"
+            />
+            <td
+              class=""
+            />
+            <td
+              class=""
+            />
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div
+      class="ui vertical segment"
+    >
+      <h3
+        class="ui header"
+      >
+        Deleted Implementations
+      </h3>
+      <table
+        class="ui sortable table"
+      >
+        <thead
+          class=""
+        >
+          <tr
+            class=""
+          >
+            <th
+              class="two wide"
+            >
+              Implementation
+            </th>
+            <th
+              class="two wide"
+            >
+              Rule
+            </th>
+            <th
+              class="two wide"
+            >
+              Status
+            </th>
+            <th
+              class="two wide"
+            >
+              Last execution
+            </th>
+            <th
+              class="two wide"
+            >
+              Result Type
+            </th>
+            <th
+              class="one wide"
+            >
+              Minimum
+            </th>
+            <th
+              class="one wide"
+            >
+              Goal
+            </th>
+            <th
+              class="two wide"
+            >
+              Result
+            </th>
+            <th
+              class="ascending sorted disabled"
+            >
+              Inserted At
+            </th>
+            <th
+              class="ascending sorted disabled"
+            >
+              Updated At
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class=""
+        >
+          <tr
+            class=""
+          >
+            <td
+              class=""
+            >
+              <a
+                href="/implementations/2"
+              >
+                bar
+              </a>
+            </td>
+            <td
+              class=""
+            />
+            <td
+              class=""
+            >
+              ruleImplementation.status.undefined
+            </td>
+            <td
+              class=""
+            />
+            <td
+              class=""
+            />
+            <td
+              class="right aligned"
+            >
+              undefined%
+            </td>
+            <td
+              class="right aligned"
+            >
+              undefined%
+            </td>
+            <td
+              class="center aligned"
+            />
+            <td
+              class=""
+            />
+            <td
+              class=""
+            />
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<ConceptImplementationLinks /> when don't have any implementation 1`] = `
+<div>
+  <div
+    class="ui bottom attached segment"
+  >
+    <div
+      style="height: 40px;"
+    >
+      <a
+        class="ui right floated button"
+        href="/implementations/new_raw?business_concept_id=6483&id=12345"
+        role="button"
+      >
+        Create Raw Implementation
+      </a>
+      <a
+        class="ui primary right floated button"
+        href="/implementations/new?business_concept_id=6483&id=12345"
+        role="button"
+      >
+        Create Implementation
+      </a>
+    </div>
+    <div
+      class="ui message"
+    >
+      <div
+        class="content"
+      >
+        <p>
+          This concept has no implementations
+        </p>
+      </div>
     </div>
   </div>
 </div>