@truedat/dq 4.42.6 → 4.43.2

package/CHANGELOG.md

@@ -1,14 +1,33 @@
 # Changelog
 
+## [4.43.2] 2022-05-03
+
+### Fixed
+
+- [TD-4709] `DatasetForm` wasn't behaving correctly on implementations with
+  no dataset
+
+## [4.43.1] 2022-04-28
+
+# Added
+
+- [TD-4538] Add Segment configuration and segment results for implementations
+
+## [4.43.0] 2022-04-26
+
+# Added
+
+- [TD-3186] Support for linking Implementations and Structures
+
 ## [4.42.3] 2022-04-13
 
-# Fixed
+### Fixed
 
 - [TD-4721] Remove sources error condition in NewRuleImplementation
 
 ## [4.42.1] 2022-04-12
 
-# Changed
+### Changed
 
 - [TD-4536] Support rule implementation with multiple populations
 
@@ -923,7 +942,7 @@ New major version for Truedat 4.0, no changes
 
 - [TD-1802] Added individual saga to retrieve filter values
 
-## [2.19.0]
+## [2.19.0] 2019-05-16
 
 ### Added
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "4.42.6",
+  "version": "4.43.2",
   "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.6",
+    "@truedat/test": "4.43.2",
     "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.6",
-    "@truedat/df": "4.42.6",
+    "@truedat/core": "4.43.2",
+    "@truedat/df": "4.43.2",
     "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": "3dda251b557b530f73e81cd12c70af259a93e421"
+  "gitHead": "26f59c4d36ab1ecfae705bbce4320ff443cce304"
 }

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";
@@ -18,6 +22,7 @@ const API_RULE_IMPLEMENTATION_FILTERS_SEARCH =
 const API_RULE_IMPLEMENTATIONS_UPLOAD = "/api/rule_implementations/upload";
 const API_RULE_RESULT = "/api/rule_results/:id";
 const API_RULE_RESULTS = "/api/rule_results";
+const API_SEGMENT_RESULTS = "/api/rule_results/:rule_result_id/segment_results";
 const API_SUBSCRIPTIONS_SEARCH = "/api/subscriptions/user/me/search";
 const API_SUBSCRIPTION = "/api/subscriptions/:id";
 const API_SUBSCRIPTIONS = "/api/subscriptions";
@@ -26,6 +31,8 @@ export {
   API_CONCEPT_RULES,
   API_EXECUTION_GROUP,
   API_EXECUTION_GROUPS,
+  API_IMPLEMENTATIONS_STRUCTURES,
+  API_IMPLEMENTATIONS_STRUCTURE,
   API_REMEDIATION_PLAN,
   API_RULE,
   API_RULES,
@@ -41,6 +48,7 @@ export {
   API_RULE_IMPLEMENTATIONS_UPLOAD,
   API_RULE_RESULT,
   API_RULE_RESULTS,
+  API_SEGMENT_RESULTS,
   API_SUBSCRIPTIONS_SEARCH,
   API_SUBSCRIPTION,
   API_SUBSCRIPTIONS,

package/src/components/ConditionSummary.js

@@ -217,6 +217,7 @@ ConditionSummary.propTypes = {
   icon: PropTypes.string,
   rows: PropTypes.array,
   type: PropTypes.string,
+  alias: PropTypes.array,
 };
 
 export default ConditionSummary;

package/src/components/FieldSummary.js

@@ -0,0 +1,86 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Header, Icon, Segment, Table } from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { linkTo } from "@truedat/core/routes";
+
+export const empty = (rows) =>
+  rows && _.every((r) => _.isEmpty(r) || _.isNil(r))(rows);
+
+const ConditionCell = ({ row, alias }) => {
+  const alias_text = _.flow(
+    _.find({ index: row.structure?.parent_index }),
+    _.propOr(null, "text")
+  )(alias);
+
+  return (
+    <Table.Row>
+      <Table.Cell width={5}>
+        {_.has("structure")(row) && (
+          <>
+            <Link
+              to={linkTo.STRUCTURE({
+                id: _.path("structure.id")(row),
+              })}
+            >
+              <span className="highlighted">
+                {alias_text && `(${alias_text}).`}{" "}
+                {`"${_.pathOr("", "structure.name")(row)}"`}
+              </span>
+            </Link>
+          </>
+        )}
+      </Table.Cell>
+    </Table.Row>
+  );
+};
+
+ConditionCell.propTypes = {
+  row: PropTypes.object,
+  alias: PropTypes.array,
+};
+
+export const FieldSummary = ({ rows, type, icon, alias }) => {
+  const wrappedRows = [rows];
+  return empty(rows) ? null : (
+    <>
+      <Header as="h3">
+        <Icon name={icon} size="small" />
+        <Header.Content>
+          <FormattedMessage
+            id={`ruleImplementations.summary.headers.${type}`}
+          />
+        </Header.Content>
+      </Header>
+      {wrappedRows.map((rows, i) => (
+        <Segment key={i}>
+          <Table basic="very">
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell>
+                  <FormattedMessage id={`ruleImplementation.summary.field`} />
+                </Table.HeaderCell>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {rows.map((row, i) => (
+                <ConditionCell key={i} row={row} alias={alias} />
+              ))}
+            </Table.Body>
+          </Table>
+        </Segment>
+      ))}
+    </>
+  );
+};
+
+FieldSummary.propTypes = {
+  icon: PropTypes.string,
+  rows: PropTypes.array,
+  type: PropTypes.string,
+  alias: PropTypes.array,
+};
+
+export default FieldSummary;

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/ImplementationSummary.js

@@ -6,6 +6,7 @@ import { Link } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
 import ConditionSummary, { empty, path } from "./ConditionSummary";
+import FieldSummary from "./FieldSummary";
 import InformationSummary from "./InformationSummary";
 import "../styles/ImplementationSummary.less";
 
@@ -15,6 +16,7 @@ const defaults = [
   "dataset",
   "populations",
   "validations",
+  "segments",
 ];
 
 const FormattedLink = ({ value, operator = {} }) =>
@@ -130,7 +132,7 @@ DatasetSummary.propTypes = {
 
 export const ImplementationSummary = ({ ruleImplementation, activeSteps }) => {
   const steps = _.isEmpty(activeSteps) ? defaults : activeSteps;
-  const { dataset, populations, validations } =
+  const { dataset, populations, validations, segments } =
     _.pick(steps)(ruleImplementation);
   const alias = _.map(_.propOr({}, "alias"))(dataset);
   return (
@@ -158,6 +160,14 @@ export const ImplementationSummary = ({ ruleImplementation, activeSteps }) => {
           alias={alias}
         />
       )}
+      {segments && _.includes("segments")(steps) && (
+        <FieldSummary
+          type="segments"
+          icon="grid layout"
+          rows={segments}
+          alias={alias}
+        />
+      )}
     </>
   );
 };

package/src/components/NewRemediation.js

@@ -2,11 +2,13 @@ import _ from "lodash/fp";
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Button, Header, Icon, Segment } from "semantic-ui-react";
+import { Button, Header, Icon, Container, Segment } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { createRemediation, fetchRuleImplementation } from "../routines";
 import RemediationForm from "./RemediationForm";
 
+import "../styles/remediationPlan.less";
+
 export const NewRemediation = ({
   manageRemediations,
   onSaveRemediation,
@@ -23,25 +25,30 @@ export const NewRemediation = ({
 
   return !manageRemediations || _.isEmpty(templates) ? null : (
     <>
-      {!isEdit ? (
-        <Button
-          primary
-          onClick={() => setIsEdit(!isEdit)}
-          content={formatMessage({ id: "remediation.actions.create" })}
-        />
-      ) : (
-        <>
-          <Header as="h2">
-            <Icon name="plug" />
-            <Header.Content>
-              <FormattedMessage id="remediation.actions.create" />
-            </Header.Content>
-          </Header>
-          <Segment>
-            <RemediationForm onSave={onSave} latestResultId={latestResultId} />
-          </Segment>
-        </>
-      )}
+      <Container className="new-remedation-container" fluid>
+        {!isEdit ? (
+          <Button
+            primary
+            onClick={() => setIsEdit(!isEdit)}
+            content={formatMessage({ id: "remediation.actions.create" })}
+          />
+        ) : (
+          <>
+            <Header as="h2">
+              <Icon name="plug" />
+              <Header.Content>
+                <FormattedMessage id="remediation.actions.create" />
+              </Header.Content>
+            </Header>
+            <Segment>
+              <RemediationForm
+                onSave={onSave}
+                latestResultId={latestResultId}
+              />
+            </Segment>
+          </>
+        )}
+      </Container>
     </>
   );
 };