@truedat/dq 4.56.2 → 4.56.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [4.56.4] 2022-11-26
+
+### Fixed
+
+- [TD-5247] Keep table name if structure field dropdown item changes
+
+## [4.56.3] 2022-11-24
+
+### Added
+
+- [TD-5286] Implementation results pagination
+
 ## [4.56.2] 2022-11-24
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "4.56.2",
+  "version": "4.56.4",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.56.0",
+    "@truedat/test": "4.56.4",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -93,8 +93,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.0",
-    "@truedat/core": "4.56.2",
-    "@truedat/df": "4.56.2",
+    "@truedat/core": "4.56.4",
+    "@truedat/df": "4.56.4",
     "graphql": "^15.5.3",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -114,5 +114,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "d76f2da5ed4892e557e4aa159d4e9ff009e0e853"
+  "gitHead": "f327860aa80db650f562d53dc22218307f43e0ac"
 }

package/src/api/queries.js

@@ -15,16 +15,17 @@ export const IMPLEMENTATION_VERSIONS_QUERY = gql`
   }
 `;
 
-export const IMPLEMENTATION_RESULTS_QUERY = gql`
-  query Implementation($id: ID!) {
+export const IMPLEMENTATION_RESULTS_CONNECTION_QUERY = gql`
+  query Implementation(
+    $id: ID!
+    $after: Cursor
+    $before: Cursor
+    $last: Int
+    $first: Int
+  ) {
     implementation(id: $id) {
       id
-      implementationKey
-      lastQualityEvent {
-        insertedAt
-        message
-        type
-      }
+      version
       versions {
         id
         implementationKey
@@ -32,7 +33,20 @@ export const IMPLEMENTATION_RESULTS_QUERY = gql`
         status
         minimum
         goal
-        results {
+      }
+      lastQualityEvent {
+        insertedAt
+        message
+        type
+      }
+      resultsConnection(
+        first: $first
+        last: $last
+        before: $before
+        after: $after
+      ) {
+        totalCount
+        page {
           id
           date
           details
@@ -43,8 +57,22 @@ export const IMPLEMENTATION_RESULTS_QUERY = gql`
           records
           result
           resultType
+          implementation {
+            id
+            version
+          }
+          __typename
+        }
+        pageInfo {
+          startCursor
+          endCursor
+          hasNextPage
+          hasPreviousPage
+          __typename
         }
+        __typename
       }
+      __typename
     }
   }
 `;

package/src/components/ConditionSummary.js

@@ -9,26 +9,31 @@ import { linkTo } from "@truedat/core/routes";
 
 const concatValues = (values, link) => _.join(link)(values);
 
-const LinkToStructure = ({ value }) =>
+const LinkToStructure = ({ value, aliasArray }) =>
   value?.id ? (
     <Link to={linkTo.STRUCTURE({ id: value.id })}>
-      <span className="highlighted">{`"${
-        !_.isEmpty(value.path) ? path(value) : value.name
-      }"`}</span>{" "}
+      <div className="highlighted">
+        {qualifySqlIdentifier({ aliasArray, value })}
+      </div>{" "}
     </Link>
   ) : (
     <span>{value.name}</span>
   );
 
-const FormattedLink = ({ value, operator = {} }) => {
+LinkToStructure.propTypes = {
+  value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  aliasArray: PropTypes.array,
+};
+
+const FormattedLink = ({ value, aliasArray, operator = {} }) => {
   switch (operator?.value_type) {
     case "field":
-      return <LinkToStructure value={value} />;
+      return <LinkToStructure value={value} aliasArray={aliasArray} />;
     case "field_list":
       return (
         <>
           {_.map.convert({ cap: false })((v, i) => (
-            <LinkToStructure key={i} value={v} />
+            <LinkToStructure key={i} value={v} aliasArray={aliasArray} />
           ))(value)}
         </>
       );
@@ -49,6 +54,7 @@ const FormattedLink = ({ value, operator = {} }) => {
 FormattedLink.propTypes = {
   value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   operator: PropTypes.object,
+  aliasArray: PropTypes.array,
 };
 
 const nilOrEmpty = (v) => _.isNil(v) || v === "";
@@ -101,7 +107,7 @@ export const getValues = ({ value = [], operator = {}, value_modifier }) => {
     ? valuesFromKeys(
         defaultOrValue,
         ["name"],
-        ["path", "id", "type", "parent_index"],
+        ["path", "metadata", "id", "type", "parent_index"],
         value_modifier
       )
     : valuesFromKeys(defaultOrValue, ["raw"], [], value_modifier);
@@ -124,12 +130,15 @@ OperatorMessage.propTypes = {
   operator: PropTypes.object,
 };
 
+const qualifySqlIdentifier = ({ aliasArray, value }) =>
+  _.flow(
+    _.find({ index: value?.parent_index }),
+    _.propOr(null, "text"),
+    _.defaultTo(value?.metadata?.table || _.last(value?.path)),
+    (qualifier) => (qualifier ? `(${qualifier}).${value?.name}` : value?.name)
+  )(aliasArray);
+
 const ConditionCell = ({ row, alias, validationPopulationCondition }) => {
-  const alias_text =
-    _.flow(
-      _.find({ index: row.structure?.parent_index }),
-      _.propOr(null, "text")
-    )(alias) || (row.structure ? _.last(row.structure.path) : null);
   const values = getValues(row);
   const operator = _.prop("operator")(row);
   const { formatMessage } = useIntl();
@@ -154,8 +163,10 @@ const ConditionCell = ({ row, alias, validationPopulationCondition }) => {
                     })}
                   >
                     <span className="highlighted">
-                      {alias_text && `(${alias_text}).`}{" "}
-                      {`"${_.pathOr("", "structure.name")(row)}"`}
+                      {qualifySqlIdentifier({
+                        aliasArray: alias,
+                        value: row.structure,
+                      })}
                     </span>
                   </Link>
                 </>
@@ -190,8 +201,10 @@ const ConditionCell = ({ row, alias, validationPopulationCondition }) => {
                                     })}
                                   >
                                     <span className="highlighted">
-                                      {alias_text && `(${alias_text}).`}{" "}
-                                      {`"${_.pathOr("", "name")(row)}"`}
+                                      {qualifySqlIdentifier({
+                                        aliasArray: alias,
+                                        value: row,
+                                      })}
                                     </span>
                                   </Link>
                                 ) : (
@@ -214,7 +227,11 @@ const ConditionCell = ({ row, alias, validationPopulationCondition }) => {
         <Table.Cell width={5}>
           {_.map.convert({ cap: false })((value, i) => (
             <Fragment key={i}>
-              <FormattedLink value={value} operator={operator} />
+              <FormattedLink
+                value={value}
+                operator={operator}
+                aliasArray={alias}
+              />
               {i + 1 < _.size(values) && (
                 <span>
                   {" "}

package/src/components/ImplementationExecutions.js

@@ -58,33 +58,36 @@ ExecutionRow.propTypes = {
   implementation: PropTypes.object,
 };
 
-export const ImplementationExecutions = ({ page }) => (
-  <Table basic="very">
-    <Table.Header>
-      <Table.Row>
-        <Table.HeaderCell width="1" textAlign="right">
-          <FormattedMessage id="ruleImplementations.props.version" />
-        </Table.HeaderCell>
-        <Table.HeaderCell width="2">
-          <FormattedMessage id="execution" />
-        </Table.HeaderCell>
-        <Table.HeaderCell width="2">
-          <FormattedMessage id="execution.latestEvent.insertedAt" />
-        </Table.HeaderCell>
-        <Table.HeaderCell width="2">
-          <FormattedMessage id="execution.latestEvent.type" />
-        </Table.HeaderCell>
-        <Table.HeaderCell>
-          <FormattedMessage id="execution.latestEvent.message" />
-        </Table.HeaderCell>
-      </Table.Row>
-    </Table.Header>
-    <Table.Body>
-      {page.map((props, key) => (
-        <ExecutionRow key={key} {...props} />
-      ))}
-    </Table.Body>
-  </Table>
+export const ImplementationExecutions = (connection) => (
+  <>
+    <Table basic="very">
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell width="1" textAlign="right">
+            <FormattedMessage id="ruleImplementations.props.version" />
+          </Table.HeaderCell>
+          <Table.HeaderCell width="2">
+            <FormattedMessage id="execution" />
+          </Table.HeaderCell>
+          <Table.HeaderCell width="2">
+            <FormattedMessage id="execution.latestEvent.insertedAt" />
+          </Table.HeaderCell>
+          <Table.HeaderCell width="2">
+            <FormattedMessage id="execution.latestEvent.type" />
+          </Table.HeaderCell>
+          <Table.HeaderCell>
+            <FormattedMessage id="execution.latestEvent.message" />
+          </Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {connection.page.map((props, key) => (
+          <ExecutionRow key={key} {...props} />
+        ))}
+      </Table.Body>
+    </Table>
+    <CursorPagination {...connection} />
+  </>
 );
 
 ImplementationExecutions.propTypes = {
@@ -111,9 +114,6 @@ export const ImplementationExecutionsLoader = () => {
           <Grid.Column>
             <ImplementationExecutionFilters />
           </Grid.Column>
-          <Grid.Column textAlign="right">
-            <CursorPagination {...connection} />
-          </Grid.Column>
         </Grid.Row>
       </Grid>
       {loading ? <Loading /> : null}

package/src/components/RuleImplementationResults.js

@@ -4,29 +4,28 @@ import { useParams } from "react-router-dom";
 import { useQuery } from "@apollo/client";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { Message, Divider } from "semantic-ui-react";
+import { Segment, Message, Divider } from "semantic-ui-react";
 import { columnDecorator } from "@truedat/core/services";
 import { DateTime, Loading } from "@truedat/core/components";
-import { IMPLEMENTATION_RESULTS_QUERY } from "../api/queries";
+import { CursorPagination } from "@truedat/core/components";
+import { useLocation } from "react-router-dom";
+import queryString from "query-string";
+import { IMPLEMENTATION_RESULTS_CONNECTION_QUERY } from "../api/queries";
 import RuleResultsTable from "./RuleResultsTable";
 
+export const PAGE_SIZE = 20;
+
 export const getCustomColumnsWithData = (ruleResults, columns) =>
   _.filter((column) =>
     _.any(_.flow(columnDecorator(column), _.negate(_.isEmpty)))(ruleResults)
   )(columns);
 
-export const RuleImplementationResults = ({ ruleImplementation }) => {
+export const RuleImplementationResults = ({ implementation, results }) => {
   const { formatMessage, locale } = useIntl();
 
-  if (_.isEmpty(ruleImplementation)) return null;
-
-  const implementationVersions = _.propOr([], "versions")(ruleImplementation);
-  const currentImplementationVersion = _.flow(
-    _.filter((version) => version.id === ruleImplementation.id),
-    _.first
-  )(implementationVersions);
+  if (_.isEmpty(implementation)) return null;
 
-  const { lastQualityEvent } = ruleImplementation;
+  const { lastQualityEvent } = implementation;
 
   return (
     <>
@@ -46,31 +45,45 @@ export const RuleImplementationResults = ({ ruleImplementation }) => {
           <p style={{ whiteSpace: "pre-wrap" }}>{lastQualityEvent.message}</p>
         </Message>
       ) : null}
-      <RuleResultsTable
-        currentImplementationVersion={currentImplementationVersion}
-        implementationVersions={implementationVersions}
-      />
+      <RuleResultsTable implementation={implementation} results={results} />
     </>
   );
 };
 
 RuleImplementationResults.propTypes = {
-  ruleImplementation: PropTypes.object,
+  results: PropTypes.array,
+  implementation: PropTypes.object,
 };
 
 export const RuleImplementationResultsLoader = (props) => {
   const { implementation_id: id } = useParams();
-  const { loading, error, data } = useQuery(IMPLEMENTATION_RESULTS_QUERY, {
-    variables: { id },
-  });
+
+  const { search } = useLocation();
+  const { before, after } = queryString.parse(search);
+  const variables = after
+    ? { id, after, before, first: PAGE_SIZE }
+    : { id, after, before, last: PAGE_SIZE };
+
+  const { loading, error, data } = useQuery(
+    IMPLEMENTATION_RESULTS_CONNECTION_QUERY,
+    {
+      variables,
+    }
+  );
   if (error) return null;
   if (loading) return <Loading />;
-  const ruleImplementation = data?.implementation;
+  const implementation = data?.implementation;
+  const connection = data?.implementation?.resultsConnection;
+  const results = implementation?.resultsConnection?.page;
   return (
-    <RuleImplementationResults
-      ruleImplementation={ruleImplementation}
-      {...props}
-    />
+    <Segment attached="bottom">
+      <RuleImplementationResults
+        implementation={implementation}
+        results={results}
+        {...props}
+      />
+      <CursorPagination {...connection} />
+    </Segment>
   );
 };
 

package/src/components/RuleResultRow.js

@@ -79,7 +79,10 @@ export const RuleResultRow = ({
             <>
               <Icon
                 name="circle"
-                color={selectColor({ ...ruleImplementation, ...ruleResult })}
+                color={selectColor({
+                  ...ruleImplementation,
+                  ...ruleResult,
+                })}
               />
               {`${parseFloat(ruleResult.result)} %`}
             </>

package/src/components/RuleResultsTable.js

@@ -21,22 +21,14 @@ export const getCustomColumnsWithData = (ruleResults, columns) =>
     _.any(_.flow(columnDecorator(column), _.negate(_.isEmpty)))(ruleResults)
   )(columns);
 
-export const RuleResultsTable = ({
-  columns,
-  implementationVersions,
-  currentImplementationVersion,
-}) => {
+export const RuleResultsTable = ({ columns, implementation, results }) => {
   const isAdmin = useAuthorized();
   const { formatMessage } = useIntl();
 
-  const ruleResults = _.flow(
-    _.map((iv) => _.pathOr([], "results")(iv)),
-    _.flatten
-  )(implementationVersions);
-  const optionalColumns = getOptionalColumnsWithData(ruleResults);
-  const customColumns = getCustomColumnsWithData(ruleResults, columns);
+  const optionalColumns = getOptionalColumnsWithData(results);
+  const customColumns = getCustomColumnsWithData(results, columns);
 
-  return _.isEmpty(ruleResults) ? (
+  return _.isEmpty(results) ? (
     <Message
       style={{ marginTop: "14px" }}
       header={formatMessage({
@@ -77,28 +69,43 @@ export const RuleResultsTable = ({
         </Table.Row>
       </Table.Header>
       <Table.Body>
-        {implementationVersions.map((version) =>
-          _.pathOr(
-            [],
-            "results"
-          )(version).map((result, key) => (
+        {_.flow(
+          _.groupBy("implementation.version"),
+          _.toPairs, // first element: version number; second element: version results.
+          // order by descending version number
+          _.orderBy(
+            (versionAndResultsTuple) => versionAndResultsTuple[0],
+            "desc"
+          ),
+          _.mapValues((versionAndResultsTuple) =>
+            versionAndResultsTuple[1].map(
+              (result, indexWithinVersionGroup) => ({
+                indexWithinVersionGroup,
+                ...result,
+              })
+            )
+          ),
+          _.reduce((acc, versionResults) => [...acc, ...versionResults], []),
+          _.map((result) => (
             <RuleResultRow
-              key={key}
+              key={result.id}
               optionalColumns={optionalColumns}
               ruleResult={result}
               customColumns={customColumns}
-              ruleImplementation={version}
-              active={currentImplementationVersion.id === version.id}
+              ruleImplementation={_.find(
+                (version) => version?.id === result?.implementation?.id
+              )(implementation?.versions)}
+              active={implementation.version === result.implementation.version}
               tagLabel={
-                key === 0
+                result.indexWithinVersionGroup === 0
                   ? `${formatMessage({
                       id: "ruleImplementations.props.version",
-                    })}: ${version.version}`
+                    })}: ${result.implementation.version}`
                   : null
               }
             />
           ))
-        )}
+        )(results)}
       </Table.Body>
     </Table>
   );
@@ -106,8 +113,8 @@ export const RuleResultsTable = ({
 
 RuleResultsTable.propTypes = {
   columns: PropTypes.array,
-  implementationVersions: PropTypes.array,
-  currentImplementationVersion: PropTypes.object,
+  implementation: PropTypes.object,
+  results: PropTypes.array,
 };
 
 const mapStateToProps = (state) => ({

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

@@ -266,6 +266,18 @@ describe("<NewRuleImplementation> NewRuleImplementation doSubmit", () => {
                 fields: [
                   {
                     id: 11127109,
+                    metadata: {
+                      data_type_class: "string",
+                      database: "xe",
+                      default: "None",
+                      host: "localhost",
+                      nullable: false,
+                      order: "4",
+                      precision: "25",
+                      schema: "HR",
+                      table: "EMPLOYEES",
+                      type: "VARCHAR2",
+                    },
                     name: "EMAIL",
                     parent_index: 4,
                     path: undefined,
@@ -273,6 +285,18 @@ describe("<NewRuleImplementation> NewRuleImplementation doSubmit", () => {
                   },
                   {
                     id: 11127116,
+                    metadata: {
+                      data_type_class: "string",
+                      database: "xe",
+                      default: "None",
+                      host: "localhost",
+                      nullable: true,
+                      order: "5",
+                      precision: "20",
+                      schema: "HR",
+                      table: "EMPLOYEES",
+                      type: "VARCHAR2",
+                    },
                     name: "PHONE_NUMBER",
                     parent_index: 4,
                     path: undefined,

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

@@ -1,78 +1,31 @@
 import _ from "lodash/fp";
 import React from "react";
 import { render } from "@truedat/test/render";
-import {
-  RuleImplementationResults,
+import RuleImplementationResults, {
   getCustomColumnsWithData,
+  PAGE_SIZE,
 } from "../RuleImplementationResults";
 
+import { implementationResultsMock } from "./__fixtures__/implementationResultsMocks";
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({ implementation_id: "2" }),
+}));
+
 describe("<RuleImplementationResults />", () => {
-  const ruleImplementation = {
-    id: 1,
-    implementation_key: "default_key",
-    versions: [
-      {
-        implementation_key: "default_key",
-        id: 1,
-        goal: "20.0",
-        minimum: "10.0",
-        results: [
-          {
-            errors: 2,
-            hasRemediation: false,
-            hasSegments: true,
-            id: "66577",
-            records: 31,
-            result: "93.54",
-            resultType: "percentage",
-          },
-          {
-            errors: 2,
-            hasRemediation: false,
-            hasSegments: true,
-            id: "66578",
-            records: 31,
-            result: "93.54",
-            resultType: "percentage",
-          },
-        ],
-      },
-      {
-        implementation_key: "key_2",
-        id: 2,
-        goal: "20.0",
-        minimum: "10.0",
-        results: [
-          {
-            errors: 2,
-            hasRemediation: false,
-            hasSegments: true,
-            id: "66579",
-            records: 31,
-            result: "93.54",
-            resultType: "percentage",
-          },
-          {
-            errors: 2,
-            hasRemediation: false,
-            hasSegments: true,
-            id: "66580",
-            records: 31,
-            result: "93.54",
-            resultType: "percentage",
-          },
-        ],
-      },
-    ],
+  const renderOpts = {
+    mocks: [implementationResultsMock({ id: "2", last: PAGE_SIZE })],
   };
+
   const ruleResultsColumns = [{ foo: "bar", name: "foo" }];
-  const props = {
-    ruleImplementation,
-    ruleResultsColumns,
-  };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(<RuleImplementationResults {...props} />);
+  it("matches the latest snapshot", async () => {
+    const { container, findByRole } = render(
+      <RuleImplementationResults />,
+      renderOpts
+    );
+    expect(await findByRole("table")).toBeInTheDocument();
     expect(container).toMatchSnapshot();
   });
 });