@truedat/dq 4.42.4 → 4.43.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.43.0] 2022-04-26
+
+# Added
+
+- [TD-3186] Support for linking Implementations and Structures
+
 ## [4.42.3] 2022-04-13
 
 # Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "4.42.4",
+  "version": "4.43.0",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -31,7 +31,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
-    "@truedat/test": "4.42.4",
+    "@truedat/test": "4.43.0",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -82,8 +82,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.10",
-    "@truedat/core": "4.42.4",
-    "@truedat/df": "4.42.4",
+    "@truedat/core": "4.43.0",
+    "@truedat/df": "4.43.0",
     "axios": "^0.19.2",
     "graphql": "^15.5.3",
     "path-to-regexp": "^1.7.0",
@@ -103,5 +103,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "3130f82b417611c76542fc29a6885b4bf85cdd30"
+  "gitHead": "ad0f63f2d98ae377883743b839858d9d671d2431"
 }

package/src/api.js

@@ -1,6 +1,10 @@
 const API_CONCEPT_RULES = "/api/rules/concept/:id";
 const API_EXECUTION_GROUP = "/api/execution_groups/:id";
 const API_EXECUTION_GROUPS = "/api/execution_groups";
+const API_IMPLEMENTATIONS_STRUCTURES =
+  "/api/rule_implementations/:implementationId/data_structures";
+const API_IMPLEMENTATIONS_STRUCTURE =
+  "/api/rule_implementations/data_structures/:id";
 const API_RULE = "/api/rules/:id";
 const API_REMEDIATION_PLAN = "/api/rule_results/:rule_result_id/remediation";
 const API_RULES = "/api/rules";
@@ -26,6 +30,8 @@ export {
   API_CONCEPT_RULES,
   API_EXECUTION_GROUP,
   API_EXECUTION_GROUPS,
+  API_IMPLEMENTATIONS_STRUCTURES,
+  API_IMPLEMENTATIONS_STRUCTURE,
   API_REMEDIATION_PLAN,
   API_RULE,
   API_RULES,

package/src/components/ImplementationStructureDelete.js

@@ -0,0 +1,41 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Icon } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { ConfirmModal } from "@truedat/core/components";
+import { deleteImplementationStructure } from "../routines";
+
+export const ImplementationStructureDelete = ({
+  implementationId,
+  id,
+  deleteImplementationStructure,
+}) => (
+  <ConfirmModal
+    icon="trash"
+    trigger={<Icon name="trash alternate outline" color="red" />}
+    header={
+      <FormattedMessage
+        id={"implementationsStructures.delete.confirmation.header"}
+      />
+    }
+    content={
+      <FormattedMessage
+        id={"implementationsStructures.delete.confirmation.content"}
+      />
+    }
+    onConfirm={() => deleteImplementationStructure({ implementationId, id })}
+    onOpen={(e) => e.stopPropagation()}
+    onClose={(e) => e.stopPropagation()}
+  />
+);
+
+ImplementationStructureDelete.propTypes = {
+  implementationId: PropTypes.number,
+  id: PropTypes.number,
+  deleteImplementationStructure: PropTypes.func,
+};
+
+export default connect(null, { deleteImplementationStructure })(
+  ImplementationStructureDelete
+);

package/src/components/ImplementationStructureLink.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
+import { linkTo } from "@truedat/core/routes";
+
+export const ImplementationStructureLink = ({
+  id,
+  current_version: { name },
+}) => (
+  <Link
+    to={linkTo.STRUCTURE({
+      id,
+    })}
+  >
+    {name}
+  </Link>
+);
+
+ImplementationStructureLink.propTypes = {
+  id: PropTypes.number,
+  current_version: PropTypes.object,
+};
+
+export default ImplementationStructureLink;

package/src/components/ImplementationStructures.js

@@ -0,0 +1,138 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Table, Button, Grid, Segment, Header, Icon } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { Link } from "react-router-dom";
+import { linkTo } from "@truedat/core/routes";
+import { columnDecorator } from "@truedat/core/services";
+import ImplementationStructureDelete from "./ImplementationStructureDelete";
+import ImplementationStructureLink from "./ImplementationStructureLink";
+
+const ImplementationStructureDeleteDecorator = ({ id, implementation_id }) => (
+  <ImplementationStructureDelete id={id} implementationId={implementation_id} />
+);
+ImplementationStructureDeleteDecorator.propTypes = {
+  id: PropTypes.number,
+  implementation_id: PropTypes.number,
+};
+
+const PathDecorator = (path) => (
+  <span title={_.join(" › ")(path)}>
+    {_.flow(_.join(" › "), _.truncate({ length: 90 }))(path)}
+  </span>
+);
+PathDecorator.propTypes = {
+  path: PropTypes.string,
+};
+
+const ImplementationStructureTypeDecorator = (type) => (
+  <FormattedMessage id={`implementationsStructures.type.${type}`} />
+);
+ImplementationStructureTypeDecorator.propTypes = {
+  type: PropTypes.string,
+};
+
+export const ImplementationStructures = ({ implementation, canCreateLink }) => {
+  const deleteColumn = canCreateLink
+    ? [
+        {
+          fieldSelector: _.identity,
+          fieldDecorator: ImplementationStructureDeleteDecorator,
+        },
+      ]
+    : [];
+
+  const columns = [
+    {
+      header: "structure.name",
+      fieldSelector: _.path("data_structure"),
+      fieldDecorator: ImplementationStructureLink,
+    },
+    {
+      header: "structure.system",
+      fieldSelector: _.path("data_structure.system.name"),
+    },
+    {
+      header: "structure.path",
+      fieldSelector: _.path("data_structure.current_version.path"),
+      fieldDecorator: PathDecorator,
+    },
+    {
+      header: "implementationsStructures.type",
+      fieldSelector: _.path("type"),
+      fieldDecorator: ImplementationStructureTypeDecorator,
+    },
+    ...deleteColumn,
+  ];
+
+  const headerRow = columns.map(({ header }, key) => (
+    <Table.HeaderCell
+      key={key}
+      content={header ? <FormattedMessage id={header} /> : null}
+    />
+  ));
+
+  const id = _.prop("rule_id")(implementation);
+  const implementation_id = _.prop("id")(implementation);
+
+  return (
+    <Segment attached="bottom">
+      <Grid>
+        {id && canCreateLink && (
+          <Grid.Column width={16}>
+            <Button
+              floated="right"
+              primary
+              as={Link}
+              to={linkTo.IMPLEMENTATION_STRUCTURES_NEW({
+                id,
+                implementation_id,
+              })}
+              content={<FormattedMessage id="links.actions.create" />}
+            />
+          </Grid.Column>
+        )}
+        {!_.isEmpty(implementation?.data_structures) ? (
+          <Grid.Column width={16}>
+            <Table
+              headerRow={headerRow}
+              renderBodyRow={(link, i) => (
+                <Table.Row key={i}>
+                  {columns.map((column, ci) => (
+                    <Table.Cell
+                      key={ci}
+                      textAlign={_.prop("textAlign")(column)}
+                      content={columnDecorator(column)(link)}
+                    />
+                  ))}
+                </Table.Row>
+              )}
+              tableData={implementation?.data_structures}
+            />
+          </Grid.Column>
+        ) : (
+          <Header as="h4">
+            <Icon name="search" />
+            <Header.Content>
+              <FormattedMessage id="implementationStructures.empty" />
+            </Header.Content>
+          </Header>
+        )}
+      </Grid>
+    </Segment>
+  );
+};
+
+ImplementationStructures.propTypes = {
+  implementation: PropTypes.object,
+  canCreateLink: PropTypes.bool,
+};
+
+const mapStateToProps = (state) => ({
+  implementation: state.ruleImplementation,
+  canCreateLink: _.propOr(false, "link_structure")(state.implementationActions),
+});
+
+export default connect(mapStateToProps)(ImplementationStructures);

package/src/components/ImplementationStructuresNew.js

@@ -0,0 +1,125 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import { Button, Dropdown, Grid, Header, Segment } from "semantic-ui-react";
+import { HistoryBackButton } from "@truedat/core/components";
+import { linkTo } from "@truedat/core/routes";
+import { createImplementationStructure } from "../routines";
+
+const StructureSelector = React.lazy(() =>
+  import("@truedat/dd/components/StructureSelector")
+);
+
+export const ImplementationStructuresNew = ({
+  creatingImplementationStructure,
+  implementation,
+  createImplementationStructure,
+}) => {
+  const { formatMessage } = useIntl();
+  const [selectedTarget, setSelectedTarget] = useState(null);
+  const [type, setType] = useState("dataset");
+  const submitDisabled = creatingImplementationStructure || !selectedTarget;
+
+  const handleTargetSelected = (selectedTarget) =>
+    setSelectedTarget(selectedTarget);
+
+  const handleSubmit = () => {
+    const redirectUrl = linkTo.IMPLEMENTATION_STRUCTURES({
+      id: implementation.rule_id,
+      implementation_id: implementation.id,
+    });
+
+    createImplementationStructure({
+      implementationId: implementation.id,
+      dataStructureId: selectedTarget?.id,
+      type,
+      redirectUrl,
+    });
+  };
+
+  const handleTypeChange = (e, { value }) => {
+    if (type !== value && (value === "dataset" || type === "dataset")) {
+      // Reset selectTarget only if changing type from or to "dataset"
+      // because structure class changes
+      setSelectedTarget(null);
+    }
+    setType(value);
+  };
+
+  const typeOptions = ["dataset", "population", "validation"].map((type) => ({
+    key: type,
+    value: type,
+    text: formatMessage({ id: `implementationsStructures.type.${type}` }),
+  }));
+
+  return (
+    <Segment attached="bottom">
+      <Grid>
+        <Grid.Column with={16}>
+          <Header
+            as="h4"
+            content={formatMessage({
+              id: "implementationsStructures.new.header",
+            })}
+          />
+          <Dropdown
+            placeholder={formatMessage({
+              id: "implementationsStructures.type",
+            })}
+            selection
+            value={type}
+            onChange={handleTypeChange}
+            options={typeOptions}
+          />
+          {
+            // Duplicated component and 'keys' to force Selector rerender on changing type to clean selection
+            type === "dataset" ? (
+              <StructureSelector
+                key="datasetSelector"
+                onSelect={handleTargetSelected}
+                defaultFilters={{ "class.raw": ["table"] }}
+              />
+            ) : (
+              <StructureSelector
+                key="nonDatasetSelector"
+                onSelect={handleTargetSelected}
+                defaultFilters={{ "class.raw": ["field"] }}
+              />
+            )
+          }
+          <div className="actions">
+            <HistoryBackButton
+              content={formatMessage({ id: "actions.cancel" })}
+              disabled={creatingImplementationStructure}
+            />
+
+            <Button
+              primary
+              content={formatMessage({ id: "actions.create" })}
+              disabled={submitDisabled}
+              loading={creatingImplementationStructure}
+              onClick={handleSubmit}
+            />
+          </div>
+        </Grid.Column>
+      </Grid>
+    </Segment>
+  );
+};
+
+ImplementationStructuresNew.propTypes = {
+  implementation: PropTypes.object,
+  creatingImplementationStructure: PropTypes.bool,
+  createImplementationStructure: PropTypes.func,
+};
+
+const mapStateToProps = (state) => ({
+  creatingImplementationStructure: state.creatingImplementationStructure,
+  implementation: state.ruleImplementation,
+});
+
+export default connect(mapStateToProps, { createImplementationStructure })(
+  ImplementationStructuresNew
+);

package/src/components/RuleImplementationTabs.js

@@ -10,6 +10,8 @@ import {
   RULE_IMPLEMENTATION_EVENTS,
   IMPLEMENTATION_CONCEPT_LINKS,
   IMPLEMENTATION_CONCEPT_LINKS_NEW,
+  IMPLEMENTATION_STRUCTURES,
+  IMPLEMENTATION_STRUCTURES_NEW,
   RULE_IMPLEMENTATION_MOVE,
   RULE_IMPLEMENTATION_RESULTS_DETAILS,
   RULE_IMPLEMENTATION_RESULTS,
@@ -57,9 +59,22 @@ export const RuleImplementationTabs = ({
             implementation_id: ruleImplementation.id,
           })}
         >
-          <FormattedMessage id="tabs.dq.implementation.links" />
+          <FormattedMessage id="tabs.dq.implementation.links.concepts" />
         </Menu.Item>
       )}
+      <Menu.Item
+        active={
+          match.path === IMPLEMENTATION_STRUCTURES ||
+          match.path === IMPLEMENTATION_STRUCTURES_NEW
+        }
+        as={Link}
+        to={linkTo.IMPLEMENTATION_STRUCTURES({
+          id: rule.id,
+          implementation_id: ruleImplementation.id,
+        })}
+      >
+        <FormattedMessage id="tabs.dq.implementation.structures" />
+      </Menu.Item>
       <Menu.Item
         active={match.path === RULE_IMPLEMENTATION_RESULTS}
         as={Link}

package/src/components/RuleImplementationsTable.js

@@ -15,6 +15,7 @@ export const RuleImplementationsTable = ({
   additionalColumns = [],
   checkedAll,
   checkRow,
+  structure,
   executeImplementationsOn,
   implementationsSort,
   sortImplementations,
@@ -127,6 +128,7 @@ RuleImplementationsTable.propTypes = {
   isRowChecked: PropTypes.bool,
   ruleImplementationsLoading: PropTypes.bool,
   sortImplementations: PropTypes.func,
+  structure: PropTypes.object,
   ruleImplementations: PropTypes.array,
   columns: PropTypes.array,
   withoutColumns: PropTypes.array,
@@ -134,11 +136,16 @@ RuleImplementationsTable.propTypes = {
 
 const mapStateToProps = (state, props) => ({
   columns: getRuleImplementationColumns(state),
-  ruleImplementations: _.getOr(
+  ruleImplementations:
+    props.ruleImplementations ||
+    (state?.structure?.implementations &&
+      _.map(({ implementation, type }) => ({
+        ...implementation,
+        implementation_structure_structure_type: type,
+      }))(state.structure.implementations)) ||
     state.ruleImplementations,
-    "ruleImplementations"
-  )(props),
   ruleImplementationsLoading: state.ruleImplementationsLoading,
+  structure: state.structure,
   implementationsSort: _.path("ruleImplementationQuery.sort")(state),
 });
 

package/src/components/RuleRoutes.js

@@ -15,6 +15,8 @@ import {
   RULE_IMPLEMENTATION_EVENTS,
   IMPLEMENTATION_CONCEPT_LINKS,
   IMPLEMENTATION_CONCEPT_LINKS_NEW,
+  IMPLEMENTATION_STRUCTURES,
+  IMPLEMENTATION_STRUCTURES_NEW,
   RULE_IMPLEMENTATION_MOVE,
   RULE_IMPLEMENTATION_NEW,
   RULE_IMPLEMENTATION_RESULT_DETAILS,
@@ -30,18 +32,20 @@ import {
 } from "../selectors";
 import EditRule from "./EditRule";
 import ExecutionDetails from "./ExecutionDetails";
+import ImplementationStructures from "./ImplementationStructures";
+import ImplementationStructuresNew from "./ImplementationStructuresNew";
 import MoveImplementation from "./MoveImplementation";
 import NewRule from "./NewRule";
 import NewRuleImplementation from "./NewRuleImplementation";
 import Rule from "./Rule";
 import RuleCrumbs from "./RuleCrumbs";
 import RuleEvents from "./RuleEvents";
+import RuleFormImplementations from "./RuleFormImplementations";
 import RuleImplementation from "./RuleImplementation";
 import RuleImplementationEvents from "./RuleImplementationEvents";
 import RuleImplementationLoader from "./RuleImplementationLoader";
 import RuleImplementationProperties from "./RuleImplementationProperties";
 import RuleImplementationResults from "./RuleImplementationResults";
-import RuleFormImplementations from "./RuleFormImplementations";
 import RuleImplementationsFromRuleLoader from "./RuleImplementationsFromRuleLoader";
 import RuleLoader from "./RuleLoader";
 import RuleProperties from "./RuleProperties";
@@ -353,6 +357,38 @@ const ImplementationRoutes = ({
                 </>
               )}
             />
+            <Route
+              exact
+              path={IMPLEMENTATION_STRUCTURES}
+              render={() => (
+                <>
+                  <RuleCrumbs />
+                  <Segment>
+                    {ruleLoaded && ruleImplementationLoaded && (
+                      <RuleImplementation>
+                        <ImplementationStructures />
+                      </RuleImplementation>
+                    )}
+                  </Segment>
+                </>
+              )}
+            />
+            <Route
+              exact
+              path={IMPLEMENTATION_STRUCTURES_NEW}
+              render={() => (
+                <>
+                  <RuleCrumbs />
+                  <Segment>
+                    {ruleLoaded && ruleImplementationLoaded && (
+                      <RuleImplementation>
+                        <ImplementationStructuresNew />
+                      </RuleImplementation>
+                    )}
+                  </Segment>
+                </>
+              )}
+            />
             <Route
               exact
               path={RULE_IMPLEMENTATION_RESULTS}

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { ImplementationStructureDelete } from "../ImplementationStructureDelete";
+
+describe("<ImplementationStructureDelete />", () => {
+  const renderOpts = {
+    messages: {
+      en: {
+        "implementationsStructures.delete.confirmation.header": "header",
+        "implementationsStructures.delete.confirmation.content": "content",
+      },
+    },
+  };
+
+  it("matches the latest snapshot", () => {
+    const props = {
+      implementationId: 1,
+      dataStructureId: 2,
+      deleteImplementationStructure: () => {},
+    };
+    const { container } = render(
+      <ImplementationStructureDelete {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { ImplementationStructureLink } from "../ImplementationStructureLink";
+
+describe("<ImplementationStructureLink />", () => {
+  const renderOpts = {
+    messages: {
+      en: {},
+    },
+  };
+
+  it("matches the latest snapshot", () => {
+    const props = {
+      id: 1,
+      current_version: { name: "foo" },
+    };
+    const { container } = render(
+      <ImplementationStructureLink {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,88 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { ImplementationStructures } from "../ImplementationStructures";
+
+describe("<ImplementationStructures />", () => {
+  const renderOpts = {
+    messages: {
+      en: {
+        "structure.name": "name",
+        "structure.system": "system",
+        "structure.path": "path",
+        "implementationsStructures.type": "type",
+        "links.actions.create": "create",
+        "implementationStructures.empty": "empty",
+        "implementationsStructures.type.dataset": "dataset",
+      },
+    },
+  };
+
+  it("matches the latest snapshot", () => {
+    const props = {
+      implementation: {
+        data_structures: [
+          {
+            data_structure: {
+              id: 1,
+              name: "foo",
+              system: { name: "bar" },
+              current_version: {
+                name: "qux",
+                path: ["baz"],
+              },
+            },
+            type: "dataset",
+          },
+        ],
+      },
+      canCreateLink: true,
+    };
+    const { container } = render(
+      <ImplementationStructures {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot without create permission", () => {
+    const props = {
+      implementation: {
+        data_structures: [
+          {
+            data_structure: {
+              id: 1,
+              name: "foo",
+              system: { name: "bar" },
+              path: ["baz"],
+              current_version: {
+                name: "qux",
+                path: ["baz"],
+              },
+            },
+            type: "dataset",
+          },
+        ],
+      },
+      canCreateLink: false,
+    };
+    const { container } = render(
+      <ImplementationStructures {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot without data_structures", () => {
+    const props = {
+      implementation: {
+        data_structures: [],
+      },
+      canCreateLink: true,
+    };
+    const { container } = render(
+      <ImplementationStructures {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});