@truedat/qx 8.2.2 → 8.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/qx",
-  "version": "8.2.2",
+  "version": "8.2.4",
   "description": "Truedat Web Quality Experience package",
   "sideEffects": false,
   "module": "src/index.js",
@@ -53,7 +53,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.2.2",
+    "@truedat/test": "8.2.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -86,5 +86,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "ef27133e5868b9aad2d95d7f2c69f36063d4327b"
+  "gitHead": "b98f63284093c90c57faa1794b6ccc1fcf761d89"
 }

package/src/components/qualityControls/QualityControlRow.js

@@ -9,9 +9,14 @@ export default function QualityControlRow({
   withCheck = false,
   onChange,
   checked,
+  onClick,
+  active,
 }) {
   return _.isEmpty(columns) || _.isEmpty(qualityControl) ? null : (
-    <Table.Row>
+    <Table.Row
+      active={active}
+      onClick={() => onClick && onClick(qualityControl)}
+    >
       {withCheck ? (
         <Table.Cell collapsing width="1" textAlign="center">
           <Checkbox
@@ -38,4 +43,6 @@ QualityControlRow.propTypes = {
   withCheck: PropTypes.bool,
   onChange: PropTypes.func,
   checked: PropTypes.bool,
+  onClick: PropTypes.func,
+  active: PropTypes.bool,
 };

package/src/components/qualityControls/QualityControlSelector.js

@@ -0,0 +1,88 @@
+import _ from "lodash/fp";
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Segment } from "semantic-ui-react";
+import SearchWidget from "@truedat/core/search/SearchWidget";
+import {
+  SearchContextProvider,
+  useSearchContext,
+} from "@truedat/core/search/SearchContext";
+import {
+  useQualityControlsSearch,
+  useQualityControlsFilters,
+} from "../../hooks/useQualityControls";
+import QualityControlsTable from "./QualityControlsTable";
+import QualityControlsPagination from "./QualityControlsPagination";
+
+function QualityControlSelectorContent({
+  selectedQualityControl: qualityControl,
+  onSelect,
+  disabled,
+}) {
+  const [selectedQualityControl, setSelectedQualityControl] = useState(null);
+  const { searchData } = useSearchContext();
+
+  const qualityControls = searchData?.data;
+
+  useEffect(() => {
+    setSelectedQualityControl(qualityControl);
+  }, [qualityControl]);
+
+  const handleSelect = (qualityControl) => {
+    if (disabled) return;
+    const selectedQualityControl = _.find(
+      (qc) => qc.quality_control_id === qualityControl.quality_control_id
+    )(qualityControls);
+    setSelectedQualityControl(qualityControl);
+    onSelect && onSelect(selectedQualityControl || qualityControl);
+  };
+
+  return (
+    <Segment>
+      <SearchWidget />
+      <QualityControlsTable
+        onSelect={handleSelect}
+        selectedQualityControl={selectedQualityControl}
+        selectable={true}
+        placeToTop={true}
+      />
+      <QualityControlsPagination />
+    </Segment>
+  );
+}
+
+QualityControlSelectorContent.propTypes = {
+  onSelect: PropTypes.func,
+  selectedQualityControl: PropTypes.object,
+  disabled: PropTypes.bool,
+};
+
+export const QualityControlSelector = (props) => {
+  const defaultFilters = _.propOr({}, "defaultFilters")(props);
+  const pageSize = _.propOr(10, "pageSize")(props);
+
+  const searchProps = {
+    initialSortColumn: "name.raw",
+    initialSortDirection: "ascending",
+    useSearch: useQualityControlsSearch,
+    useFilters: useQualityControlsFilters,
+    pageSize,
+    defaultFilters,
+  };
+
+  return (
+    <SearchContextProvider {...searchProps}>
+      <QualityControlSelectorContent {...props} />
+    </SearchContextProvider>
+  );
+};
+
+QualityControlSelector.propTypes = {
+  pageSize: PropTypes.number,
+  defaultFilters: PropTypes.object,
+  selectedQualityControl: PropTypes.object,
+  onSelect: PropTypes.func,
+  disabled: PropTypes.bool,
+};
+
+export default QualityControlSelector;

package/src/components/qualityControls/QualityControlsTable.js

@@ -84,6 +84,10 @@ export default function QualityControlsTable({
   checkRow,
   executeQualityControlOn,
   isRowChecked,
+  onSelect,
+  selectedQualityControl,
+  selectable = false,
+  placeToTop = false,
 }) {
   const {
     searchData,
@@ -94,12 +98,23 @@ export default function QualityControlsTable({
   } = useSearchContext();
   const { formatMessage } = useIntl();
 
-  const qualityControls = searchData?.data;
+  const qualityControls = searchData?.data || [];
+
+  // Place selectedQualityControl at top if it's not already in the current page
+  const tableData =
+    _.has("quality_control_id")(selectedQualityControl) && placeToTop
+      ? _.any(
+          (qc) =>
+            qc.quality_control_id === selectedQualityControl.quality_control_id
+        )(qualityControls)
+        ? qualityControls
+        : [selectedQualityControl, ...qualityControls]
+      : qualityControls;
 
   return (
     <>
-      {!_.isEmpty(qualityControls) && (
-        <Table sortable>
+      {!_.isEmpty(tableData) && (
+        <Table sortable selectable={selectable}>
           <Table.Header>
             <Table.Row>
               {executeQualityControlOn ? (
@@ -137,7 +152,7 @@ export default function QualityControlsTable({
             </Table.Row>
           </Table.Header>
           <Table.Body>
-            {qualityControls.map((qc, i) => (
+            {tableData.map((qc, i) => (
               <QualityControlRow
                 key={i}
                 checked={isRowChecked && isRowChecked(qc)}
@@ -145,12 +160,18 @@ export default function QualityControlsTable({
                 columns={columns}
                 onChange={() => checkRow && checkRow(qc)}
                 withCheck={executeQualityControlOn}
+                onClick={onSelect}
+                active={
+                  selectedQualityControl &&
+                  selectedQualityControl.quality_control_id ===
+                    qc.quality_control_id
+                }
               />
             ))}
           </Table.Body>
         </Table>
       )}
-      {_.isEmpty(qualityControls) && !loading && (
+      {_.isEmpty(tableData) && !loading && (
         <Header as="h4">
           <Icon name="search" />
           <Header.Content>
@@ -168,4 +189,8 @@ QualityControlsTable.propTypes = {
   checkRow: PropTypes.func,
   executeQualityControlOn: PropTypes.bool,
   isRowChecked: PropTypes.func,
+  onSelect: PropTypes.func,
+  selectedQualityControl: PropTypes.object,
+  selectable: PropTypes.bool,
+  placeToTop: PropTypes.bool,
 };

package/src/components/qualityControls/__tests__/QualityControlSelector.spec.js

@@ -0,0 +1,265 @@
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
+import { QualityControlSelector } from "../QualityControlSelector";
+import { qualityControlData } from "./__fixtures__/qualityControlHelper";
+
+const qualityControls = [
+  qualityControlData({ id: 8, name: "Test QC 1", quality_control_id: 8 }),
+  qualityControlData({ id: 9, name: "Test QC 2", quality_control_id: 9 }),
+  qualityControlData({ id: 10, name: "Test QC 3", quality_control_id: 10 }),
+];
+
+const data = {
+  _actions: {},
+  data: qualityControls,
+  headers: { "x-total-count": 3 },
+};
+
+const filterData = {
+  data: {
+    status: {
+      values: ["draft", "published"],
+    },
+  },
+};
+
+jest.mock("@truedat/core/search/SearchContext", () => {
+  const originalModule = jest.requireActual(
+    "@truedat/core/search/SearchContext"
+  );
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useSearchContext: jest.fn(),
+  };
+});
+
+jest.mock("../../../hooks/useQualityControls", () => {
+  const originalModule = jest.requireActual("../../../hooks/useQualityControls");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useQualityControlsFilters: jest.fn(),
+    useQualityControlsSearch: jest.fn(),
+  };
+});
+
+jest.mock("@truedat/core/search/SearchWidget", () => {
+  return function SearchWidget() {
+    return <div data-testid="search-widget">SearchWidget</div>;
+  };
+});
+
+jest.mock("../QualityControlsTable", () => {
+  return function QualityControlsTable({
+    onSelect,
+    selectedQualityControl,
+    selectable,
+    placeToTop,
+  }) {
+    return (
+      <div data-testid="quality-controls-table">
+        <div data-testid="selectable">{selectable ? "true" : "false"}</div>
+        <div data-testid="place-to-top">{placeToTop ? "true" : "false"}</div>
+        {selectedQualityControl && (
+          <div data-testid="selected-quality-control">
+            {selectedQualityControl.quality_control_id}
+          </div>
+        )}
+        <button
+          data-testid="select-qc-8"
+          onClick={() =>
+            onSelect &&
+            onSelect({
+              quality_control_id: 8,
+              name: "Test QC 1",
+            })
+          }
+        >
+          Select QC 8
+        </button>
+        <button
+          data-testid="select-qc-9"
+          onClick={() =>
+            onSelect &&
+            onSelect({
+              quality_control_id: 9,
+              name: "Test QC 2",
+            })
+          }
+        >
+          Select QC 9
+        </button>
+      </div>
+    );
+  };
+});
+
+jest.mock("../QualityControlsPagination", () => {
+  return function QualityControlsPagination() {
+    return <div data-testid="quality-controls-pagination">Pagination</div>;
+  };
+});
+
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import {
+  useQualityControlsFilters,
+  useQualityControlsSearch,
+} from "../../../hooks/useQualityControls";
+
+describe("<QualityControlSelector />", () => {
+  const mockUseSearchContext = useSearchContext;
+  const mockUseQualityControlsFilters = useQualityControlsFilters;
+  const mockUseQualityControlsSearch = useQualityControlsSearch;
+
+  beforeEach(() => {
+    mockUseQualityControlsFilters.mockReturnValue({
+      trigger: jest.fn(() => ({
+        then: (callback) =>
+          callback({
+            data: filterData,
+          }),
+      })),
+    });
+
+    mockUseQualityControlsSearch.mockReturnValue({
+      trigger: jest.fn(() => ({
+        then: (callback) =>
+          callback({
+            data,
+            headers: {},
+          }),
+      })),
+    });
+
+    mockUseSearchContext.mockReturnValue({
+      searchData: {
+        data: qualityControls,
+        scroll_id: null,
+      },
+      loading: false,
+      searchMust: {},
+      setOnSearchChange: jest.fn(),
+      handleSortSelection: jest.fn(),
+      sortColumn: "name.raw",
+      sortDirection: "ascending",
+      count: 3,
+      size: 10,
+      page: 1,
+      selectPage: jest.fn(),
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<QualityControlSelector />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders SearchWidget, QualityControlsTable, and QualityControlsPagination", async () => {
+    const rendered = render(<QualityControlSelector />);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("search-widget")).toBeInTheDocument();
+    expect(rendered.getByTestId("quality-controls-table")).toBeInTheDocument();
+    expect(
+      rendered.getByTestId("quality-controls-pagination")
+    ).toBeInTheDocument();
+  });
+
+  it("passes selectable and placeToTop props to QualityControlsTable", async () => {
+    const rendered = render(<QualityControlSelector />);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("selectable")).toHaveTextContent("true");
+    expect(rendered.getByTestId("place-to-top")).toHaveTextContent("true");
+  });
+
+  it("calls onSelect when a quality control is selected", async () => {
+    const onSelect = jest.fn();
+    const rendered = render(<QualityControlSelector onSelect={onSelect} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(rendered.getByTestId("select-qc-8"));
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith(
+      expect.objectContaining({
+        quality_control_id: 8,
+        name: "Test QC 1",
+      })
+    );
+  });
+
+  it("does not call onSelect when disabled", async () => {
+    const onSelect = jest.fn();
+    const rendered = render(
+      <QualityControlSelector onSelect={onSelect} disabled={true} />
+    );
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(rendered.getByTestId("select-qc-8"));
+
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it("displays selected quality control when provided", async () => {
+    const selectedQualityControl = {
+      quality_control_id: 8,
+      name: "Test QC 1",
+    };
+
+    const rendered = render(
+      <QualityControlSelector selectedQualityControl={selectedQualityControl} />
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("selected-quality-control")).toHaveTextContent(
+      "8"
+    );
+  });
+
+  it("updates selected quality control when prop changes", async () => {
+    const selectedQualityControl = {
+      quality_control_id: 9,
+      name: "Test QC 2",
+    };
+
+    const rendered = render(
+      <QualityControlSelector selectedQualityControl={selectedQualityControl} />
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("selected-quality-control")).toHaveTextContent(
+      "9"
+    );
+  });
+
+  it("uses custom pageSize when provided", async () => {
+    const rendered = render(<QualityControlSelector pageSize={7} />);
+    await waitForLoad(rendered);
+
+    expect(mockUseQualityControlsSearch).toHaveBeenCalled();
+  });
+
+  it("uses defaultFilters when provided", async () => {
+    const defaultFilters = { status: ["published"] };
+    const rendered = render(
+      <QualityControlSelector defaultFilters={defaultFilters} />
+    );
+    await waitForLoad(rendered);
+
+    expect(mockUseQualityControlsSearch).toHaveBeenCalled();
+  });
+});
+

package/src/components/qualityControls/__tests__/__snapshots__/QualityControlSelector.spec.js.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<QualityControlSelector /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <div
+      data-testid="search-widget"
+    >
+      SearchWidget
+    </div>
+    <div
+      data-testid="quality-controls-table"
+    >
+      <div
+        data-testid="selectable"
+      >
+        true
+      </div>
+      <div
+        data-testid="place-to-top"
+      >
+        true
+      </div>
+      <button
+        data-testid="select-qc-8"
+      >
+        Select QC 8
+      </button>
+      <button
+        data-testid="select-qc-9"
+      >
+        Select QC 9
+      </button>
+    </div>
+    <div
+      data-testid="quality-controls-pagination"
+    >
+      Pagination
+    </div>
+  </div>
+</div>
+`;