@truedat/qx 7.0.8 → 7.1.0

package/src/components/{qualityControls/ExecutionPopup.js → scores/ScoreGroupPopup.js}

@@ -1,17 +1,15 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
 import { useIntl } from "react-intl";
 import { Button, Popup } from "semantic-ui-react";
-import ExecutionForm from "./ExecutionForm";
+import ScoreGroupForm from "./ScoreGroupForm";
 
-export const ExecutionPopup = ({
-  disabled,
-  executionGroupLoading,
-  count,
+export default function ScoreGroupPopup({
+  disabled = false,
+  loading,
+  count = 1,
   onSubmit,
-  executionGroupType = "implementation",
-}) => {
+}) {
   const { formatMessage } = useIntl();
   const [open, setOpen] = useState(false);
 
@@ -29,35 +27,28 @@ export const ExecutionPopup = ({
         <Button
           secondary
           disabled={disabled}
-          loading={executionGroupLoading}
+          loading={loading}
           content={formatMessage({
             id:
               count === 1
-                ? executionGroupType + ".actions.do_execution"
-                : executionGroupType + "s.actions.do_execution",
+                ? "quality_control.actions.do_execution"
+                : "quality_controls.actions.do_execution",
           })}
         />
       }
     >
-      <ExecutionForm
+      <ScoreGroupForm
         count={count}
         onSubmit={onSubmit}
         onCancel={() => setOpen(false)}
       />
     </Popup>
   );
-};
+}
 
-ExecutionPopup.propTypes = {
+ScoreGroupPopup.propTypes = {
   count: PropTypes.number,
   disabled: PropTypes.bool,
-  executionGroupLoading: PropTypes.bool,
+  loading: PropTypes.bool,
   onSubmit: PropTypes.func,
-  executionGroupType: PropTypes.string,
 };
-
-const mapStateToProps = ({ executionGroupLoading }) => ({
-  executionGroupLoading,
-});
-
-export default connect(mapStateToProps)(ExecutionPopup);

package/src/components/scores/ScoreGroupsTable.js

@@ -0,0 +1,113 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { Table, Header, Icon, Label } from "semantic-ui-react";
+import { columnDecorator } from "@truedat/core/services";
+import { useMyScoreGroupsIndex } from "../../hooks/useScoreGroups";
+
+import ScoreGroupLink from "./ScoreGroupLink";
+
+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 ScoreGroupRow = ({ columns, ...props }) => (
+  <Table.Row>
+    {columns.map((col, i) => (
+      <Table.Cell
+        key={i}
+        textAlign={col.textAlign}
+        content={columnDecorator(col)(props)}
+      />
+    ))}
+  </Table.Row>
+);
+
+ScoreGroupRow.propTypes = {
+  columns: PropTypes.arrayOf(PropTypes.object),
+};
+
+export default function ScoreGroupsTable() {
+  const { data } = useMyScoreGroupsIndex();
+  const scoreGroups = data?.data;
+
+  const presentStatuses = _.flow(
+    _.flatMap(_.flow(_.prop("status_summary"), _.keys)),
+    _.uniq
+  )(scoreGroups);
+
+  const statusColumns = _.flow(
+    _.filter((status) => _.includes(status)(presentStatuses)),
+    _.map((status) => ({
+      name: `score.status.${status}`,
+      fieldSelector: `status_summary.${status}`,
+      fieldDecorator: (count) =>
+        count ? (
+          <Label
+            circular
+            color={
+              {
+                PENDING: "yellow",
+                QUEUED: "yellow",
+                STARTED: "yellow",
+                SUCCEEDED: "green",
+                FAILED: "red",
+                TIMEOUT: "red",
+              }[status]
+            }
+          >
+            {count}
+          </Label>
+        ) : null,
+      textAlign: "center",
+      width: 2,
+    }))
+  )(["PENDING", "QUEUED", "STARTED", "SUCCEEDED", "FAILED", "TIMEOUT"]);
+
+  const columns = [
+    {
+      name: "score_groups.table.header.created",
+      width: 4,
+      fieldSelector: _.identity,
+      fieldDecorator: ScoreGroupLink,
+    },
+    ...statusColumns,
+  ];
+
+  return (
+    <>
+      {!_.isEmpty(scoreGroups) && (
+        <Table collapsing striped celled>
+          <Table.Header>
+            <HeaderRow columns={columns} />
+          </Table.Header>
+          <Table.Body>
+            {scoreGroups &&
+              scoreGroups.map((props, key) => (
+                <ScoreGroupRow key={key} columns={columns} {...props} />
+              ))}
+          </Table.Body>
+        </Table>
+      )}
+      {_.isEmpty(scoreGroups) && (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            <FormattedMessage id="score_groups.search.results.empty" />
+          </Header.Content>
+        </Header>
+      )}
+    </>
+  );
+}

package/src/components/scores/ScoreRoutes.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { Route, Switch } from "react-router-dom";
+import {
+  MY_SCORE_GROUPS,
+  SCORE_GROUPS,
+  SCORE_GROUP,
+  SCORE,
+  SCORE_EVENTS,
+} from "@truedat/core/routes";
+
+import { MyScoreGroups, ScoreGroup, Score, ScoreDetails, ScoreEvents } from ".";
+import "../../styles/scores.less";
+
+export default function ScoreRoutes() {
+  return (
+    <Switch>
+      <Route exact path={MY_SCORE_GROUPS} render={() => <MyScoreGroups />} />
+      <Route exact path={SCORE_GROUP} render={() => <ScoreGroup />} />
+      <Route
+        path={SCORE}
+        render={() => (
+          <Score>
+            <Switch>
+              <Route exact path={SCORE} render={() => <ScoreDetails />} />
+              <Route exact path={SCORE_EVENTS} render={() => <ScoreEvents />} />
+            </Switch>
+          </Score>
+        )}
+      />
+    </Switch>
+  );
+}

package/src/components/{executions/ExecutionStatusDecorator.js → scores/ScoreStatusDecorator.js}

@@ -2,30 +2,32 @@ import _ from "lodash/fp";
 import { FormattedMessage } from "react-intl";
 import React from "react";
 import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
 import { Icon } from "semantic-ui-react";
+import { linkTo } from "@truedat/core/routes";
 
 const PENDING = { name: "info circle", color: "grey" };
 
 export const icons = {
   PENDING,
+  QUEUED: { name: "play circle outline", color: "green" },
   STARTED: { name: "play circle outline", color: "green" },
   SUCCEEDED: { name: "check circle outline", color: "green" },
   FAILED: { name: "warning circle", color: "red" },
 };
 
-export const ExecutionStatusDecorator = (status) => {
+export default function ScoreStatusDecorator({ id, status }) {
   const icon = _.propOr(PENDING, _.toUpper(status))(icons);
-  const messageId = "quality_control_execution_group.status." + status;
+  const messageId = "score.status." + status;
   return (
-    <>
+    <Link to={linkTo.SCORE({ id })}>
       <Icon size="large" {...icon} />
       <FormattedMessage id={messageId} />
-    </>
+    </Link>
   );
-};
+}
 
-ExecutionStatusDecorator.propTypes = {
+ScoreStatusDecorator.propTypes = {
+  id: PropTypes.number,
   status: PropTypes.string,
 };
-
-export default ExecutionStatusDecorator;

package/src/components/scores/ScoreTabs.js

@@ -0,0 +1,32 @@
+import _ from "lodash/fp";
+import React from "react";
+import { Menu } from "semantic-ui-react";
+import { Link, useLocation, useParams } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { linkTo } from "@truedat/core/routes";
+
+export default function ScoreTabs() {
+  const { pathname } = useLocation();
+  const urlParams = useParams();
+
+  const tabs = [
+    {
+      url: linkTo.SCORE(urlParams),
+      text: "tabs.qx.score.details",
+    },
+    {
+      url: linkTo.SCORE_EVENTS(urlParams),
+      text: "tabs.qx.score.score_events",
+    },
+  ];
+
+  return (
+    <Menu attached="top" pointing secondary tabular>
+      {tabs.map(({ url, text }, key) => (
+        <Menu.Item key={key} active={pathname === url} as={Link} to={url}>
+          <FormattedMessage id={text} />
+        </Menu.Item>
+      ))}
+    </Menu>
+  );
+}

package/src/components/scores/__tests__/MyScoreGroups.spec.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import MyScoreGroups from "../MyScoreGroups";
+
+const renderOpts = { messages };
+
+jest.mock("@truedat/qx/hooks/useScoreGroups", () => {
+  const { scoreGroupData } = jest.requireActual(
+    "@truedat/qx/components/scores/__tests__/__fixtures__/scoreHelper"
+  );
+
+  return {
+    useMyScoreGroupsIndex: jest.fn(() => ({
+      data: {
+        data: [
+          scoreGroupData({ status_summary: { PENDING: 1, QUEUED: 2 } }),
+          scoreGroupData({ status_summary: { SUCCEEDED: 1, FAILED: 3 } }),
+        ],
+      },
+      loading: false,
+    })),
+  };
+});
+
+describe("<MyScoreGroups />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<MyScoreGroups />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/scores/__tests__/QualityBar.spec.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import { scoreData } from "@truedat/qx/components/scores/__tests__/__fixtures__/scoreHelper";
+import ScoreContext from "../ScoreContext";
+import QualityBar from "../QualityBar";
+
+const renderOpts = { messages };
+
+describe("<QualityBar />", () => {
+  it("matches the latest snapshot", () => {
+    const context = {
+      score: scoreData(),
+    };
+
+    const { container } = render(
+      <ScoreContext.Provider value={context}>
+        <QualityBar />
+      </ScoreContext.Provider>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("when score is failed", () => {
+    const context = {
+      score: scoreData({ status: "FAILED" }),
+    };
+
+    const { queryByText } = render(
+      <ScoreContext.Provider value={context}>
+        <QualityBar />
+      </ScoreContext.Provider>,
+      renderOpts
+    );
+
+    expect(queryByText(/Failed/i)).toBeInTheDocument();
+  });
+
+  it("when score is empty", () => {
+    const context = {
+      score: scoreData({ score_content: undefined }),
+    };
+
+    const { queryByText } = render(
+      <ScoreContext.Provider value={context}>
+        <QualityBar />
+      </ScoreContext.Provider>,
+      renderOpts
+    );
+
+    expect(queryByText(/No results/i)).toBeInTheDocument();
+  });
+});

package/src/components/scores/__tests__/Score.spec.js

@@ -0,0 +1,41 @@
+import _ from "lodash/fp";
+import React from "react";
+import { render } from "@truedat/test/render";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import { useScoreShow } from "@truedat/qx/hooks/useScores";
+import Score from "../Score";
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({ id: "8" }),
+}));
+
+jest.mock("@truedat/qx/hooks/useScores", () => {
+  const { scoreData } = jest.requireActual(
+    "@truedat/qx/components/scores/__tests__/__fixtures__/scoreHelper"
+  );
+
+  return {
+    useScoreShow: jest.fn(() => ({
+      data: scoreData(),
+      loading: false,
+    })),
+  };
+});
+
+const renderOpts = { messages };
+
+describe("<Score />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<Score />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot when has no score", () => {
+    useScoreShow.mockImplementation(() => ({
+      data: undefined,
+    }));
+    const { container } = render(<Score />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/scores/__tests__/ScoreCrumbs.spec.js

@@ -0,0 +1,39 @@
+import _ from "lodash/fp";
+import React from "react";
+import { render } from "@truedat/test/render";
+import { scoreData } from "@truedat/qx/components/scores/__tests__/__fixtures__/scoreHelper";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import ScoreContext from "../ScoreContext";
+import ScoreCrumbs from "../ScoreCrumbs";
+
+const renderOpts = { messages };
+
+describe("<ScoreCrumbs />", () => {
+  it("matches the latest snapshot", () => {
+    const context = {
+      score: scoreData(),
+    };
+    const { container } = render(
+      <ScoreContext.Provider value={context}>
+        <ScoreCrumbs />
+      </ScoreContext.Provider>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("show message if is not executed", () => {
+    const context = {
+      score: scoreData({ execution_timestamp: undefined }),
+    };
+    const { queryByText } = render(
+      <ScoreContext.Provider value={context}>
+        <ScoreCrumbs />
+      </ScoreContext.Provider>,
+      renderOpts
+    );
+
+    expect(queryByText(/Not executed/i)).toBeInTheDocument();
+  });
+});

package/src/components/scores/__tests__/ScoreDetails.spec.js

@@ -0,0 +1,38 @@
+import _ from "lodash/fp";
+import React from "react";
+import { render } from "@truedat/test/render";
+import { scoreData } from "./__fixtures__/scoreHelper";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import ScoreContext from "../ScoreContext";
+import ScoreDetails from "../ScoreDetails";
+
+const renderOpts = { messages };
+
+describe("<ScoreDetails />", () => {
+  it("matches the latest snapshot", () => {
+    const context = {
+      score: scoreData(),
+    };
+    const { container } = render(
+      <ScoreContext.Provider value={context}>
+        <ScoreDetails />
+      </ScoreContext.Provider>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("do not display details if not available.", () => {
+    const context = {
+      score: scoreData({ details: undefined }),
+    };
+    const { queryByText } = render(
+      <ScoreContext.Provider value={context}>
+        <ScoreDetails />
+      </ScoreContext.Provider>,
+      renderOpts
+    );
+    expect(queryByText(/Details/i)).not.toBeInTheDocument();
+  });
+});

package/src/components/scores/__tests__/ScoreEvents.spec.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { scoreData } from "@truedat/qx/components/scores/__tests__/__fixtures__/scoreHelper";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import ScoreContext from "../ScoreContext";
+import ScoreEvents from "../ScoreEvents";
+
+const renderOpts = { messages };
+
+describe("<ScoreEvents />", () => {
+  it("matches the latest snapshot", () => {
+    const context = {
+      score: scoreData(),
+    };
+    const { container } = render(
+      <ScoreContext.Provider value={context}>
+        <ScoreEvents />
+      </ScoreContext.Provider>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/scores/__tests__/ScoreGroup.spec.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import { useScoreGroupShow } from "@truedat/qx/hooks/useScoreGroups";
+import ScoreGroup from "../ScoreGroup";
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({ id: "8" }),
+}));
+
+jest.mock("@truedat/qx/hooks/useScoreGroups", () => {
+  const { scoreGroup } = jest.requireActual(
+    "@truedat/qx/components/scores/__tests__/__fixtures__/scoreHelper"
+  );
+
+  return {
+    useScoreGroupShow: jest.fn(() => ({
+      data: { data: scoreGroup },
+      loading: false,
+    })),
+  };
+});
+
+const renderOpts = { messages, fallback: "lazy" };
+
+describe("<ScoreGroup />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<ScoreGroup />, renderOpts);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot when scoreGroup is empty", () => {
+    useScoreGroupShow.mockImplementation(() => ({
+      data: { data: [] },
+      loading: false,
+    }));
+    const { container } = render(<ScoreGroup />, renderOpts);
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/scores/__tests__/ScoreGroupBreadcrumbs.spec.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import ScoreGroupBreadcrumbs from "../ScoreGroupBreadcrumbs";
+
+const renderOpts = { messages };
+
+describe("<ScoreGroupBreadcrumbs />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <ScoreGroupBreadcrumbs timestamp="2025-01-23T10:10:00Z" />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/scores/__tests__/ScoreGroupForm.spec.js

@@ -0,0 +1,78 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { singleTemplateMock } from "@truedat/test/mocks";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import ScoreGroupForm from "../ScoreGroupForm";
+
+const renderOpts = {
+  mocks: [
+    singleTemplateMock({
+      scope: "qe",
+      domainIds: undefined,
+    }),
+  ],
+  messages,
+  fallback: "lazy",
+};
+
+const props = {
+  count: 10,
+  onSubmit: jest.fn(),
+  onCancel: jest.fn(),
+};
+describe("<ScoreGroupForm />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(
+      <ScoreGroupForm {...props} />,
+      renderOpts
+    );
+
+    await waitFor(() => {
+      expect(queryByText(/lazy/i)).not.toBeInTheDocument();
+      expect(container.querySelector(".loading")).not.toBeInTheDocument();
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+  it("matches the latest snapshot for count 1", async () => {
+    const { container, queryByText } = render(
+      <ScoreGroupForm {...props} count={1} />,
+      renderOpts
+    );
+
+    await waitFor(() => {
+      expect(queryByText(/lazy/i)).not.toBeInTheDocument();
+      expect(container.querySelector(".loading")).not.toBeInTheDocument();
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("writes to form, submit and confirm", async () => {
+    const onSubmit = jest.fn();
+    const { container, queryByText, findByText, findByPlaceholderText } =
+      render(<ScoreGroupForm {...props} onSubmit={onSubmit} />, renderOpts);
+
+    await waitFor(() => {
+      expect(queryByText(/lazy/i)).not.toBeInTheDocument();
+      expect(container.querySelector(".loading")).not.toBeInTheDocument();
+    });
+
+    userEvent.type(await findByPlaceholderText("field1"), "foo");
+    userEvent.click(await findByText(/Create/i));
+
+    await waitFor(() =>
+      expect(onSubmit).toHaveBeenCalledWith({
+        content: {
+          field1: {
+            origin: "user",
+            value: "foo",
+          },
+        },
+        df_type: "template1",
+      })
+    );
+  });
+});

package/src/components/scores/__tests__/ScoreGroupLink.spec.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import ScoreGroupLink from "../ScoreGroupLink";
+
+const renderOpts = { messages };
+
+describe("<ScoreGroupLink />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <ScoreGroupLink id="8" inserted_at="2025-01-23T10:10:00Z" />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});