@truedat/qx 7.6.0 → 7.6.2

package/src/components/scores/ScoreGroupsTable.js

@@ -1,18 +1,24 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
+import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
-import { Table, Header, Icon, Label } from "semantic-ui-react";
+import { Table, Header, Icon } from "semantic-ui-react";
 import { Loading } from "@truedat/core/components";
 import { columnDecorator } from "@truedat/core/services";
 import { useSearchContext } from "@truedat/core/search/SearchContext";
+import { getMyScoreGroupsColumns } from "@truedat/qx/components/selectors/getMyScoreGroupsColumns";
 import Pagination from "@truedat/core/search/Pagination";
 
 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>
+  <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 = {
@@ -20,66 +26,65 @@ HeaderRow.propTypes = {
 };
 
 export const ScoreGroupRow = ({ columns, ...props }) => (
-  <Table.Row>{columns.map((col, i) => (
+  <Table.Row>
+    {columns.map((col, i) => (
       <Table.Cell
         key={i}
         textAlign={col.textAlign}
         content={columnDecorator(col)(props)}
       />
-    ))}</Table.Row>
+    ))}
+  </Table.Row>
 );
 
 ScoreGroupRow.propTypes = {
   columns: PropTypes.arrayOf(PropTypes.object),
 };
 
-export default function ScoreGroupsTable() {
+export function ScoreGroupsTable({ columns }) {
   const { searchData, loading } = useSearchContext();
   const scoreGroups = _.propOr([], "data")(searchData);
 
-  const statusDecorator = (field, color) => {
-    return field ? (
-      <Label
-        circular
-        color={
-          {
-            PENDING: "yellow",
-            QUEUED: "yellow",
-            STARTED: "yellow",
-            SUCCEEDED: "green",
-            FAILED: "red",
-            TIMEOUT: "red",
-          }[color]
-        }
-      >{field}</Label>
-    ) : null;
-  };
+  return (
+    <>
+      {loading ? <Loading /> : null}
+      <>
+        {!_.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} />
+                    ))
+                  : null}
+              </Table.Body>
+            </Table>
+            <Pagination />
+          </>
+        ) : null}
+        {_.isEmpty(scoreGroups) ? (
+          <Header as="h4">
+            <Icon name="search" />
+            <Header.Content>
+              <FormattedMessage id="score_groups.search.results.empty" />
+            </Header.Content>
+          </Header>
+        ) : null}
+      </>
+    </>
+  );
+}
 
-  const statusColumns = _.map((status) => ({
-    name: `score.status.${status}`,
-    fieldSelector: _.pathOr(null, `status_summary.${status}`),
-    fieldDecorator: (field) => statusDecorator(field, status),
-    textAlign: "center",
-    width: 2,
-  }))(["PENDING", "QUEUED", "STARTED", "SUCCEEDED", "FAILED", "TIMEOUT"]);
+ScoreGroupsTable.propTypes = {
+  columns: PropTypes.array,
+};
 
-  const columns = [
-    {
-      name: "score_groups.table.header.created",
-      width: 4,
-      fieldSelector: _.identity,
-      fieldDecorator: ScoreGroupLink,
-    },
-    ...statusColumns,
-  ];
+const mapStateToProps = (state) => ({
+  columns: getMyScoreGroupsColumns(state),
+});
 
-  return (<>{loading ? <Loading /> : null}<>{!_.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} />
-                  ))
-                : null}</Table.Body></Table><Pagination /></>
-      ) : null}{_.isEmpty(scoreGroups) ? (
-        <Header as="h4"><Icon name="search" /><Header.Content><FormattedMessage id="score_groups.search.results.empty" /></Header.Content></Header>
-      ) : null}</></>);
-}
+export default connect(mapStateToProps)(ScoreGroupsTable);

package/src/components/scores/ScorePagination.js

@@ -0,0 +1,28 @@
+import _ from "lodash/fp";
+import { Pagination as SemanticPagination } from "semantic-ui-react";
+import { useScoreContext } from "../scores/ScoreContext";
+
+export const MAX_PAGES = 100;
+
+export const ScorePagination = () => {
+  const { totalPages, currentPage, selectPage } = useScoreContext();
+
+  return totalPages > MAX_PAGES ? (
+    <SemanticPagination
+      activePage={currentPage}
+      boundaryRange={0}
+      lastItem={null}
+      totalPages={MAX_PAGES}
+      onPageChange={(_e, { activePage }) => selectPage(activePage)}
+    />
+  ) : totalPages ? (
+    <SemanticPagination
+      activePage={currentPage}
+      disabled={totalPages <= 1}
+      totalPages={totalPages}
+      onPageChange={(_e, { activePage }) => selectPage(activePage)}
+    />
+  ) : null;
+};
+
+export default ScorePagination;

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

@@ -0,0 +1,64 @@
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { ScoreContextProvider, useScoreContext } from "../ScoreContext";
+import { score } from "./__fixtures__/scoreHelper";
+
+const mockUseQualityControlScores = jest.fn();
+const mockUseScoreDelete = jest.fn();
+
+jest.mock("@truedat/qx/hooks/useScores", () => ({
+  useQualityControlScores: () => mockUseQualityControlScores(),
+  useScoreDelete: () => mockUseScoreDelete(),
+}));
+
+const TestComponent = () => {
+  const context = useScoreContext();
+  return <div data-testid="test-component">{JSON.stringify(context)}</div>;
+};
+
+describe("<ScoreContextProvider />", () => {
+  beforeEach(() => {
+    mockUseQualityControlScores.mockReturnValue({
+      trigger: jest.fn().mockResolvedValue({
+        data: {
+          data: {
+            scores: [score],
+            last_execution_result: {},
+            current_page: 1,
+            total_pages: 5,
+            page_size: 10,
+          },
+        },
+      }),
+
+      loading: false,
+    });
+
+    mockUseScoreDelete.mockReturnValue({
+      trigger: jest.fn(),
+    });
+  });
+
+  it("provides score context to children", async () => {
+    const rendered = render(
+      <ScoreContextProvider qualityControlId={1}>
+        <TestComponent />
+      </ScoreContextProvider>
+    );
+
+    await waitFor(() => {
+      const contextData = JSON.parse(
+        rendered.getByTestId("test-component").textContent
+      );
+      expect(contextData).toMatchObject({
+        scores: [score],
+        loadingQualityScores: false,
+        lastExecutionResult: {},
+        currentPage: 1,
+        totalPages: 5,
+        size: 10,
+        page: 1,
+      });
+    });
+  });
+});

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

@@ -0,0 +1,66 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import { useScoreContext } from "../../scores/ScoreContext";
+import { ScorePagination, MAX_PAGES } from "../ScorePagination";
+
+jest.mock("../../scores/ScoreContext", () => {
+  const originalModule = jest.requireActual("../../scores/ScoreContext");
+  return {
+    __esModule: true,
+    ...originalModule,
+    useScoreContext: jest.fn(),
+  };
+});
+
+describe("<ScorePagination />", () => {
+  it("matches the latest snapshot", async () => {
+    useScoreContext.mockReturnValue({
+      totalPages: 10,
+      currentPage: 1,
+      selectPage: jest.fn(),
+    });
+
+    const rendered = render(<ScorePagination />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot (totalPages > 100)", async () => {
+    useScoreContext.mockReturnValue({
+      totalPages: 200,
+      currentPage: 1,
+      selectPage: jest.fn(),
+    });
+
+    const rendered = render(<ScorePagination />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("has no last item if totalPages exceeds page limit", async () => {
+    useScoreContext.mockReturnValue({
+      totalPages: MAX_PAGES + 1,
+      currentPage: 1,
+      selectPage: jest.fn(),
+    });
+
+    const rendered = render(<ScorePagination />);
+    await waitForLoad(rendered);
+    const pagination = rendered.container.querySelector(".ui.pagination");
+    expect(pagination.querySelector("[aria-label='Last item']")).toBeNull();
+  });
+
+  it("has a last item if totalPages is within the page limit", async () => {
+    useScoreContext.mockReturnValue({
+      totalPages: MAX_PAGES,
+      currentPage: 1,
+      selectPage: jest.fn(),
+    });
+
+    const rendered = render(<ScorePagination />);
+    await waitForLoad(rendered);
+    const pagination = rendered.container.querySelector(".ui.pagination");
+    expect(
+      pagination.querySelector("[aria-label='Last item']")
+    ).toHaveTextContent("»");
+  });
+});

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

@@ -95,6 +95,19 @@ exports[`<ScoreDetails /> matches the latest snapshot 1`] = `
           Deviation
         </div>
       </div>
+      <div
+        class="item"
+        role="listitem"
+      >
+        <div
+          class="header"
+        >
+          scores.props.created_at
+        </div>
+        <div
+          class="description"
+        />
+      </div>
       <div
         class="item"
         role="listitem"

package/src/components/scores/__tests__/__snapshots__/ScorePagination.spec.js.snap

@@ -0,0 +1,220 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ScorePagination /> matches the latest snapshot (totalPages > 100) 1`] = `
+<div>
+  <div
+    aria-label="Pagination Navigation"
+    class="ui pagination menu"
+    role="navigation"
+  >
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      aria-label="First item"
+      class="item"
+      tabindex="0"
+      type="firstItem"
+      value="1"
+    >
+      «
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      aria-label="Previous item"
+      class="item"
+      tabindex="0"
+      type="prevItem"
+      value="1"
+    >
+      ⟨
+    </a>
+    <a
+      aria-current="true"
+      aria-disabled="false"
+      class="active item"
+      tabindex="0"
+      type="pageItem"
+      value="1"
+    >
+      1
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      class="item"
+      tabindex="0"
+      type="pageItem"
+      value="2"
+    >
+      2
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      class="item"
+      tabindex="0"
+      type="pageItem"
+      value="3"
+    >
+      3
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      class="item"
+      tabindex="0"
+      type="pageItem"
+      value="4"
+    >
+      4
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="true"
+      class="item"
+      tabindex="-1"
+      type="ellipsisItem"
+      value="5"
+    >
+      ...
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      aria-label="Next item"
+      class="item"
+      tabindex="0"
+      type="nextItem"
+      value="2"
+    >
+      ⟩
+    </a>
+  </div>
+</div>
+`;
+
+exports[`<ScorePagination /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    aria-label="Pagination Navigation"
+    class="ui pagination menu"
+    role="navigation"
+  >
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      aria-label="First item"
+      class="item"
+      tabindex="0"
+      type="firstItem"
+      value="1"
+    >
+      «
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      aria-label="Previous item"
+      class="item"
+      tabindex="0"
+      type="prevItem"
+      value="1"
+    >
+      ⟨
+    </a>
+    <a
+      aria-current="true"
+      aria-disabled="false"
+      class="active item"
+      tabindex="0"
+      type="pageItem"
+      value="1"
+    >
+      1
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      class="item"
+      tabindex="0"
+      type="pageItem"
+      value="2"
+    >
+      2
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      class="item"
+      tabindex="0"
+      type="pageItem"
+      value="3"
+    >
+      3
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      class="item"
+      tabindex="0"
+      type="pageItem"
+      value="4"
+    >
+      4
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      class="item"
+      tabindex="0"
+      type="pageItem"
+      value="5"
+    >
+      5
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="true"
+      class="item"
+      tabindex="-1"
+      type="ellipsisItem"
+      value="6"
+    >
+      ...
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      class="item"
+      tabindex="0"
+      type="pageItem"
+      value="10"
+    >
+      10
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      aria-label="Next item"
+      class="item"
+      tabindex="0"
+      type="nextItem"
+      value="2"
+    >
+      ⟩
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      aria-label="Last item"
+      class="item"
+      tabindex="0"
+      type="lastItem"
+      value="10"
+    >
+      »
+    </a>
+  </div>
+</div>
+`;

package/src/components/scores/index.js

@@ -1,15 +1,17 @@
+import MyScoreGroups from "./MyScoreGroups";
 import Score from "./Score";
+import ScoreContext from "./ScoreContext";
 import ScoreDetails from "./ScoreDetails";
 import ScoreEvents from "./ScoreEvents";
 import ScoreGroup from "./ScoreGroup";
 import ScoreGroupPopup from "./ScoreGroupPopup";
-import MyScoreGroups from "./MyScoreGroups";
 
 export {
+  MyScoreGroups,
   Score,
+  ScoreContext,
   ScoreDetails,
   ScoreEvents,
   ScoreGroup,
   ScoreGroupPopup,
-  MyScoreGroups,
 };

package/src/components/selectors/__tests__/__snapshots__/getMyScoreGroupsColumns.spec.js.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`selectors: getMyScoreGroupsColumns should return default columns when no state is provided 1`] = `
+[
+  {
+    "fieldDecorator": [Function],
+    "fieldSelector": [Function],
+    "name": "score_groups.table.header.created",
+    "width": 4,
+  },
+  {
+    "fieldDecorator": [Function],
+    "fieldSelector": [Function],
+    "name": "score.status.PENDING",
+    "textAlign": "center",
+    "width": 2,
+  },
+  {
+    "fieldDecorator": [Function],
+    "fieldSelector": [Function],
+    "name": "score.status.QUEUED",
+    "textAlign": "center",
+    "width": 2,
+  },
+  {
+    "fieldDecorator": [Function],
+    "fieldSelector": [Function],
+    "name": "score.status.STARTED",
+    "textAlign": "center",
+    "width": 2,
+  },
+  {
+    "fieldDecorator": [Function],
+    "fieldSelector": [Function],
+    "name": "score.status.SUCCEEDED",
+    "textAlign": "center",
+    "width": 2,
+  },
+  {
+    "fieldDecorator": [Function],
+    "fieldSelector": [Function],
+    "name": "score.status.FAILED",
+    "textAlign": "center",
+    "width": 2,
+  },
+  {
+    "fieldDecorator": [Function],
+    "fieldSelector": [Function],
+    "name": "score.status.TIMEOUT",
+    "textAlign": "center",
+    "width": 2,
+  },
+]
+`;

package/src/components/selectors/__tests__/__snapshots__/getQualityControlScoresColumns.spec.js.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`selectors: getQualityControlScoresColumns should return default columns when no state is provided 1`] = `
+[
+  {
+    "fieldDecorator": [Function],
+    "fieldSelector": [Function],
+    "name": "execution_timestamp",
+  },
+  {
+    "fieldDecorator": [Function],
+    "name": "status",
+  },
+  {
+    "fieldDecorator": [Function],
+    "fieldSelector": [Function],
+    "name": "quality",
+  },
+  {
+    "fieldDecorator": [Function],
+    "fieldSelector": [Function],
+    "name": "control_mode",
+  },
+  {
+    "fieldDecorator": [Function],
+    "fieldSelector": [Function],
+    "name": "created_at",
+  },
+  {
+    "fieldDecorator": [Function],
+    "name": "quality_control_status",
+  },
+]
+`;