@truedat/dq 4.50.2 → 4.51.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [4.51.0] 2022-09-13
+
+### Added
+
+- [TD-3415] View with current user's execution groups
+
+## [4.50.4] 2022-08-31
+
+### Added
+
+- [TD-5091] Add labels attribute for DomainSelector component
+
 ## [4.50.0] 2022-08-18
 
 ## Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "4.50.2",
+  "version": "4.51.0",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -93,8 +93,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.6.4",
-    "@truedat/core": "4.50.2",
-    "@truedat/df": "4.50.2",
+    "@truedat/core": "4.51.0",
+    "@truedat/df": "4.51.0",
     "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": "5785ca8828b3c25947e8d2587c909f729fbee317"
+  "gitHead": "a3d9290433e773d9c605d9a0d9fa51908c5becad"
 }

package/src/api/queries.js

@@ -65,3 +65,36 @@ export const IMPLEMENTATION_RESULT = gql`
     }
   }
 `;
+
+export const MY_EXECUTION_GROUPS_QUERY = gql`
+  query MyExecutionGroups(
+    $after: Cursor
+    $before: Cursor
+    $last: Int
+    $first: Int
+  ) {
+    me {
+      id
+      executionGroupsConnection(
+        first: $first
+        last: $last
+        before: $before
+        after: $after
+      ) {
+        totalCount
+        page {
+          id
+          dfContent
+          insertedAt
+          statusCounts
+        }
+        pageInfo {
+          startCursor
+          endCursor
+          hasNextPage
+          hasPreviousPage
+        }
+      }
+    }
+  }
+`;

package/src/components/ExecutionGroup.js

@@ -1,21 +1,23 @@
-import { flow, pick, filter, reject, size, prop, sortBy } from "lodash/fp";
+import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
 import { Table } from "semantic-ui-react";
+import { DateTime } from "@truedat/core/components";
 import { columnDecorator } from "@truedat/core/services";
-import DateTime from "@truedat/core/components/DateTime";
 import ExecutionGroupMessage from "./ExecutionGroupMessage";
 import RuleResultDecorator from "./RuleResultDecorator";
 import RuleImplementationResultsLink from "./RuleImplementationResultsLink";
 import RuleEventDecorator from "./RuleEventDecorator";
+import ExecutionGroupContent from "./ExecutionGroupContent";
+import ExecutionGroupBreadcrumbs from "./ExecutionGroupBreadcrumbs";
 
-const columns = [
+const COLUMNS = [
   {
     name: "ruleImplementations.props.status",
     fieldDecorator: RuleEventDecorator,
-    fieldSelector: pick(["_embedded.quality_events"]),
+    fieldSelector: _.pick(["_embedded.quality_events"]),
   },
   {
     name: "ruleImplementations.props.implementation_key",
@@ -54,9 +56,9 @@ const columns = [
 
 export const ExecutionRow = ({ execution }) => (
   <Table.Row>
-    {columns.map(({ textAlign, ...column }, j) => (
+    {COLUMNS.map(({ textAlign, ...column }, i) => (
       <Table.Cell
-        key={j}
+        key={i}
         content={columnDecorator(column)(execution)}
         textAlign={textAlign}
       />
@@ -68,31 +70,35 @@ ExecutionRow.propTypes = {
   execution: PropTypes.object,
 };
 
-export const ExecutionGroup = ({ executionGroup, executionGroupLoading }) => {
+const isCompleted = _.flow(_.prop("_embedded.status"), (s) =>
+  _.includes(s)(["SUCCEEDED", "FAILED"])
+);
+
+export const ExecutionGroup = ({ executionGroup }) => {
   const { formatMessage } = useIntl();
-  const executions = sortBy("_embedded.implementation.implementation_key")(
+  const executions = _.sortBy("_embedded.implementation.implementation_key")(
     executionGroup?._embedded?.executions
   );
-  const count = size(executions);
-  const missingResultCount = flow(reject("_embedded.result"), size)(executions);
-  const errorCount = flow(
-    filter(flow(prop("_embedded.quality_events"), size)),
-    size
-  )(executions);
+  const count = _.size(executions);
+  const pendingCount = _.flow(_.reject(isCompleted), _.size)(executions);
+  const content = executionGroup?.df_content;
 
-  return executionGroupLoading ? null : (
+  /*
+   * executionGroupLoading is causing an empty table to flash briefly when
+   * navigating between execution groups, so executionGroup === null is
+   * used here instead.
+   */
+  return executionGroup === null ? null : (
     <>
-      <ExecutionGroupMessage
-        count={count}
-        pending={missingResultCount - errorCount}
-        error={errorCount}
-      />
+      <ExecutionGroupBreadcrumbs timestamp={executionGroup?.inserted_at} />
+      {_.isEmpty(content) ? null : <ExecutionGroupContent content={content} />}
+      <ExecutionGroupMessage count={count} pending={pendingCount} />
       <Table>
         <Table.Header>
           <Table.Row>
-            {columns.map(({ name: id, textAlign }) => (
+            {COLUMNS.map(({ name: id, textAlign }, i) => (
               <Table.HeaderCell
-                key={id}
+                key={i}
                 content={formatMessage({ id })}
                 textAlign={textAlign}
               />

package/src/components/ExecutionGroupBreadcrumbs.js

@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Breadcrumb } from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { DateTime } from "@truedat/core/components";
+import { EXECUTION_GROUPS } from "@truedat/core/routes";
+
+export const ExecutionGroupBreadcrumbs = ({ timestamp }) => (
+  <Breadcrumb>
+    <Breadcrumb.Section as={Link} to={EXECUTION_GROUPS}>
+      <FormattedMessage id="sidemenu.executions" />
+    </Breadcrumb.Section>
+    <Breadcrumb.Divider icon="right angle" />
+    <Breadcrumb.Section active>
+      <DateTime value={timestamp} />
+    </Breadcrumb.Section>
+  </Breadcrumb>
+);
+
+ExecutionGroupBreadcrumbs.propTypes = {
+  timestamp: PropTypes.string,
+};
+
+export default ExecutionGroupBreadcrumbs;

package/src/components/ExecutionGroupContent.js

@@ -0,0 +1,42 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useQuery } from "@apollo/client";
+import { TEMPLATES_QUERY } from "@truedat/core/api/queries";
+
+const DynamicFormViewer = React.lazy(() =>
+  import("@truedat/df/components/DynamicFormViewer")
+);
+
+const templateFieldNames = _.flow(
+  _.prop("content"),
+  _.flatMap("fields"),
+  _.map("name")
+);
+
+export const ExecutionGroupContent = ({ content }) => {
+  const { data } = useQuery(TEMPLATES_QUERY, {
+    variables: { scope: "qe" },
+  });
+  // NOTE: We don't have the template name, so select one with fields matching content
+  const contentFieldNames = _.keys(content);
+  const matchingFieldCount = _.flow(
+    templateFieldNames,
+    _.intersection(contentFieldNames),
+    _.size
+  );
+  const template = _.flow(
+    _.propOr([], "templates"),
+    _.maxBy(matchingFieldCount)
+  )(data);
+
+  return template ? (
+    <DynamicFormViewer template={template} content={content} />
+  ) : null;
+};
+
+ExecutionGroupContent.propTypes = {
+  content: PropTypes.object,
+};
+
+export default ExecutionGroupContent;

package/src/components/ExecutionGroupLink.js

@@ -0,0 +1,18 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+import { DateTime } from "@truedat/core/components";
+import { linkTo } from "@truedat/core/routes";
+
+export const ExecutionGroupLink = ({ id, insertedAt }) => (
+  <Link to={linkTo.EXECUTION_GROUP({ id })}>
+    <DateTime value={insertedAt} />
+  </Link>
+);
+
+ExecutionGroupLink.propTypes = {
+  id: PropTypes.string,
+  insertedAt: PropTypes.string,
+};
+
+export default ExecutionGroupLink;

package/src/components/ExecutionGroupLoader.js

@@ -6,7 +6,7 @@ import { fetchExecutionGroup, clearExecutionGroup } from "../routines";
 
 export const ExecutionGroupLoader = ({
   fetchExecutionGroup,
-  clearExecutionGroup
+  clearExecutionGroup,
 }) => {
   const { id } = useParams();
   useEffect(() => {
@@ -23,7 +23,6 @@ export const ExecutionGroupLoader = ({
 ExecutionGroupLoader.propTypes = {
   clearExecutionGroup: PropTypes.func,
   fetchExecutionGroup: PropTypes.func,
-  id: PropTypes.number
 };
 
 const mapDispatchToProps = { clearExecutionGroup, fetchExecutionGroup };

package/src/components/ExecutionGroupMessage.js

@@ -21,7 +21,7 @@ export const ExecutionGroupMessage = ({ count, pending }) => {
 
 ExecutionGroupMessage.propTypes = {
   count: PropTypes.number,
-  pending: PropTypes.number
+  pending: PropTypes.number,
 };
 
 export default ExecutionGroupMessage;

package/src/components/ExecutionGroups.js

@@ -0,0 +1,80 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useQuery } from "@apollo/client";
+import queryString from "query-string";
+import { useIntl } from "react-intl";
+import { useLocation, Link } from "react-router-dom";
+import { Header, Menu, Segment } from "semantic-ui-react";
+import { MY_EXECUTION_GROUPS_QUERY } from "../api/queries";
+import ExecutionGroupsTable from "./ExecutionGroupsTable";
+
+const PAGE_SIZE = 20;
+
+export const Pagination = ({ pageInfo }) => {
+  const { endCursor, startCursor, hasPreviousPage, hasNextPage } =
+    pageInfo || {};
+  const next =
+    hasNextPage && endCursor ? { search: "?after=" + endCursor } : null;
+  const prev =
+    hasPreviousPage && startCursor
+      ? { search: "?before=" + startCursor }
+      : null;
+  return (
+    <Menu pagination role="navigation">
+      <Menu.Item
+        as={next ? Link : null}
+        link={!!next}
+        content="«"
+        disabled={!hasNextPage}
+        to={{ search: "" }}
+        replace={next ? true : null}
+        aria-label="Latest"
+      />
+      <Menu.Item
+        as={next ? Link : null}
+        link={!!next}
+        content="⟨"
+        disabled={!hasNextPage}
+        to={next}
+        replace={next ? true : null}
+        aria-label="Later"
+      />
+      <Menu.Item
+        as={prev ? Link : null}
+        link={!!prev}
+        content="⟩"
+        disabled={!hasPreviousPage}
+        to={prev}
+        replace={prev ? true : null}
+        aria-label="Earlier"
+      />
+    </Menu>
+  );
+};
+
+Pagination.propTypes = {
+  pageInfo: PropTypes.object,
+};
+
+export const ExecutionGroups = () => {
+  const { formatMessage } = useIntl();
+  const { search } = useLocation();
+  const { before, after } = queryString.parse(search);
+  const variables = after
+    ? { after, before, first: PAGE_SIZE }
+    : { after, before, last: PAGE_SIZE };
+  const { loading, error, data } = useQuery(MY_EXECUTION_GROUPS_QUERY, {
+    variables,
+  });
+  if (error) return null;
+  const connection = data?.me?.executionGroupsConnection;
+  return (
+    <Segment loading={loading}>
+      <Header as="h2" content={formatMessage({ id: "sidemenu.executions" })} />
+      <Pagination {...connection} />
+      {loading ? null : <ExecutionGroupsTable {...connection} />}
+    </Segment>
+  );
+};
+
+export default ExecutionGroups;

package/src/components/ExecutionGroupsTable.js

@@ -0,0 +1,61 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { connect } from "react-redux";
+import { Table } from "semantic-ui-react";
+import { columnDecorator } from "@truedat/core/services";
+import { executionGroupsColumnsSelector } from "../selectors/executionGroupsColumnsSelector";
+
+export const HeaderRow = ({ columns }) => (
+  <Table.Row>
+    {columns.map(({ name: id, textAlign }, i) => (
+      <Table.HeaderCell key={i} textAlign={textAlign}>
+        <FormattedMessage id={id} defaultMessage={id} />
+      </Table.HeaderCell>
+    ))}
+  </Table.Row>
+);
+
+HeaderRow.propTypes = {
+  columns: PropTypes.arrayOf(PropTypes.object),
+};
+
+export const ExecutionGroupRow = ({ columns, ...props }) => (
+  <Table.Row>
+    {columns.map((col, i) => (
+      <Table.Cell
+        key={i}
+        textAlign={col.textAlign}
+        content={columnDecorator(col)(props)}
+      />
+    ))}
+  </Table.Row>
+);
+
+ExecutionGroupRow.propTypes = {
+  columns: PropTypes.arrayOf(PropTypes.object),
+};
+
+export const ExecutionGroupsTable = ({ columns, page }) => (
+  <Table>
+    <Table.Header>
+      <HeaderRow columns={columns} />
+    </Table.Header>
+    <Table.Body>
+      {page?.map((props, key) => (
+        <ExecutionGroupRow key={key} columns={columns} {...props} />
+      ))}
+    </Table.Body>
+  </Table>
+);
+
+ExecutionGroupsTable.propTypes = {
+  columns: PropTypes.array,
+  page: PropTypes.array,
+};
+
+const mapStateToProps = (state) => ({
+  columns: executionGroupsColumnsSelector(state),
+});
+
+export default connect(mapStateToProps)(ExecutionGroupsTable);

package/src/components/QualityRoutes.js

@@ -1,35 +1,43 @@
 import React from "react";
-import { Route } from "react-router-dom";
+import { Route, Switch } from "react-router-dom";
 import { Unauthorized } from "@truedat/core/components";
 import { useAuthorized } from "@truedat/core/hooks";
 import {
   EXECUTION_GROUP,
+  EXECUTION_GROUPS,
   IMPLEMENTATIONS,
   IMPLEMENTATIONS_PENDING,
   RULES,
 } from "@truedat/core/routes";
 import ExecutionGroup from "./ExecutionGroup";
 import ExecutionGroupLoader from "./ExecutionGroupLoader";
+import ExecutionGroups from "./ExecutionGroups";
 import ImplementationsRoutes from "./ImplementationsRoutes";
 import RulesRoutes from "./RulesRoutes";
 
+const ExecutionsRoutes = () => (
+  <Switch>
+    <Route
+      path={EXECUTION_GROUP}
+      render={() => (
+        <>
+          <ExecutionGroupLoader />
+          <ExecutionGroup />
+        </>
+      )}
+    />
+    <Route path={EXECUTION_GROUPS} render={() => <ExecutionGroups />} />
+  </Switch>
+);
+
 const QualityRoutes = () => {
   const authorized = useAuthorized("quality");
 
   return (
     <>
       <Route
-        path={EXECUTION_GROUP}
-        render={() =>
-          authorized ? (
-            <>
-              <ExecutionGroupLoader />
-              <ExecutionGroup />
-            </>
-          ) : (
-            <Unauthorized />
-          )
-        }
+        path={EXECUTION_GROUPS}
+        render={() => (authorized ? <ExecutionsRoutes /> : <Unauthorized />)}
       />
       <Route
         path={RULES}

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

@@ -1,54 +1,51 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
-import { ExecutionGroup } from "../ExecutionGroup";
+import { render } from "@truedat/test/render";
+import ExecutionGroup from "../ExecutionGroup";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
-describe("<ExecutionGroup />", () => {
-  const rule = {
-    id: 1,
-    name: "rule_name",
-  };
-  const implementation = {
+const rule = {
+  id: 1,
+  name: "rule_name",
+};
+const implementation = {
+  id: 1,
+  implementation_key: "foo",
+  rule_id: 1,
+  result_type: "percentage",
+  minimum: 10,
+  goal: 20,
+};
+const result = {
+  id: 1,
+  implementation_key: "foo",
+  date: "2020-01-01 00:00:00Z",
+  result: 30,
+  records: 100,
+  errors: 30,
+  result_type: "percentage",
+  minimum: 10,
+  goal: 20,
+};
+const quality_events = [
+  {
+    inserted_at: "2020-01-01 00:00:00Z",
+    execution_id: 1,
     id: 1,
-    implementation_key: "foo",
-    rule_id: 1,
-    result_type: "percentage",
-    minimum: 10,
-    goal: 20,
-  };
-  const result = {
-    id: 1,
-    implementation_key: "foo",
-    date: "2020-01-01 00:00:00Z",
-    result: 30,
-    records: 100,
-    errors: 30,
-    result_type: "percentage",
-    minimum: 10,
-    goal: 20,
-  };
-  const quality_events = [
-    {
-      inserted_at: "2020-01-01 00:00:00Z",
-      execution_id: 1,
-      id: 1,
-      type: "SUCCESS",
-      message: "",
-    },
-  ];
-  const executions = [
-    { id: 1, _embedded: { rule, implementation, result, quality_events } },
-  ];
-  const props = {
-    executionGroup: { id: 1, _embedded: { executions } },
-  };
+    type: "SUCCESS",
+    message: "",
+  },
+];
+const executions = [
+  { id: 1, _embedded: { rule, implementation, result, quality_events } },
+];
+const state = {
+  executionGroup: { id: 1, _embedded: { executions } },
+  executionGroupsLoading: false,
+};
+const renderOpts = { state };
 
+describe("<ExecutionGroup />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<ExecutionGroup {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<ExecutionGroup />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import ExecutionGroupBreadcrumbs from "../ExecutionGroupBreadcrumbs";
+
+describe("<ExecutionGroupBreadcrumbs />", () => {
+  it("matches the latest snapshot", () => {
+    const props = { timestamp: "2022-02-02T12:34:56.789Z" };
+    const { container } = render(<ExecutionGroupBreadcrumbs {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { multipleTemplatesMock } from "@truedat/test/mocks";
+import ExecutionGroupContent from "../ExecutionGroupContent";
+
+const renderOpts = {
+  fallback: "lazy",
+  mocks: [multipleTemplatesMock({ scope: "qe" })],
+  state: {},
+};
+
+describe("<ExecutionGroupContent />", () => {
+  const content = { field1: "foo" };
+
+  it("matches the latest snapshot and renders dynamic content", async () => {
+    const { container, queryByText } = render(
+      <ExecutionGroupContent content={content} />,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+
+    expect(container).toMatchSnapshot();
+    expect(queryByText("field1")).toBeInTheDocument();
+    expect(queryByText("foo")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import ExecutionGroupLink from "../ExecutionGroupLink";
+
+describe("<ExecutionGroupLink />", () => {
+  it("matches the latest snapshot", () => {
+    const props = { id: "123", insertedAt: "2022-02-02T12:34:56.789Z" };
+    const { container } = render(<ExecutionGroupLink {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+});