@truedat/qx 7.3.0 → 7.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/qx",
-  "version": "7.3.0",
+  "version": "7.3.2",
   "description": "Truedat Web Quality Experience package",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -35,7 +35,7 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "7.3.0",
+    "@truedat/test": "7.3.2",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -90,7 +90,7 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "7.3.0",
+    "@truedat/core": "7.3.2",
     "prop-types": "^15.8.1",
     "react-hook-form": "^7.45.4",
     "react-intl": "^5.20.10",
@@ -106,5 +106,5 @@
   "overrides": {
     "jsdom": "26.0.0"
   },
-  "gitHead": "cbf85fe17b535953689418b85658cc804d095dfb"
+  "gitHead": "3a5d8fc5160ffabc1ef86251883070331045f738"
 }

package/src/api.js

@@ -12,6 +12,8 @@ const API_QUALITY_CONTROL_SEARCH = "/api/quality_controls/search";
 const API_QUALITY_CONTROL_STATUS = "/api/quality_controls/:id/status";
 const API_QUALITY_CONTROL_VERSIONS = "/api/quality_controls/:id/versions";
 const API_QUALITY_CONTROLS = "/api/quality_controls";
+const API_SCORE_GROUPS_SEARCH = "/api/score_groups/search";
+const API_SCORE_GROUPS_FILTERS = "/api/score_groups/filters";
 const API_SCORE_GROUPS = "/api/score_groups";
 const API_SCORE_GROUP = "/api/score_groups/:id";
 const API_SCORE = "/api/scores/:id";
@@ -43,4 +45,6 @@ export {
   API_QUALITY_CONTROL_EXECUTION_GROUP,
   API_QUALITY_CONTROL_EXECUTION_GROUPS,
   API_QUALITY_CONTROL_SCORES,
+  API_SCORE_GROUPS_SEARCH,
+  API_SCORE_GROUPS_FILTERS,
 };

package/src/components/__tests__/__fixtures__/helper.js

@@ -161,6 +161,7 @@ export const messages = {
     "score.status.QUEUED": "Queued",
     "score.status.SUCCEEDED": "Succeeded",
     "score.status.STARTED": "Started",
+    "score.status.TIMEOUT": "Timeout",
     "sidemenu.executions": "My Executions",
     "score_groups.header": "My score Groups",
     "score_groups.table.header.created": "Created",

package/src/components/qualityControls/QualityControlActions.js

@@ -70,8 +70,12 @@ export default function QualityControlActions() {
       quality_control: { active: !qualityControl.active },
     }).then(() => mutate());
 
+  const canExecute = _.includes("execute")(actions);
+
   const availableActions = _.flow(
-    _.reject(_.includes(["delete_score"])),
+    _.reject((action) =>
+      _.includes(action, ["delete_score", "update_main", "execute"])
+    ),
     _.map((action) => {
       const actionIcon = {
         create_draft: "edit",
@@ -142,6 +146,7 @@ export default function QualityControlActions() {
       ) : null}
 
       {qualityControl.active &&
+      canExecute &&
       !_.includes(qualityControl.status)(["deprecated", "versioned"]) ? (
         <ScoreGroupPopup
           loading={groupCreating}

package/src/components/qualityControls/QualityControlEditor.js

@@ -24,7 +24,7 @@ const SourceSelector = React.lazy(() =>
   import("@truedat/cx/sources/components/SourceSelector")
 );
 
-export default function  QualityControlEditor({
+export default function QualityControlEditor({
   value,
   onPublish,
   onSave,

package/src/components/qualityControls/QualityControls.js

@@ -19,6 +19,7 @@ import { useSearchContext } from "@truedat/core/search/SearchContext";
 import SearchWidget from "@truedat/core/search/SearchWidget";
 import { useScoreGroupCreate } from "@truedat/qx/hooks/useScoreGroups";
 import { ScoreGroupPopup } from "../scores";
+import QualityControlsPagination from "./QualityControlsPagination";
 import QualityControlsTable from "./QualityControlsTable";
 import QualityControlsLabelResults from "./QualityControlsLabelResults";
 
@@ -27,7 +28,7 @@ export const QualityControls = () => {
   const history = useHistory();
 
   const { data } = useAuthorizedAction({
-    action: "createQualityControls",
+    action: "writeQualityControls",
   });
   const canCreate = _.prop("has_any_domain")(data);
 
@@ -122,7 +123,7 @@ export const QualityControls = () => {
     const body = _.isEmpty(selectedQualityControls)
       ? {
           score_group,
-          search: { query, must: searchMust },
+          search: { ...(!_.isEmpty(query) && { query }), must: searchMust },
         }
       : {
           score_group,
@@ -205,6 +206,7 @@ export const QualityControls = () => {
           executeQualityControlOn={executeQualityControlOn}
           isRowChecked={isRowChecked}
         />
+        <QualityControlsPagination />
       </Dimmer.Dimmable>
     </Segment>
   );

package/src/components/qualityControls/QualityControlsPagination.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { Pagination } from "@truedat/core/components";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+
+export default function QualityControlsPagination() {
+  const { count, size, page, selectPage } = useSearchContext();
+  const totalPages = Math.ceil(count / size);
+
+  return (
+    <Pagination
+      totalPages={totalPages}
+      activePage={page}
+      selectPage={selectPage}
+    />
+  );
+}

package/src/components/qualityControls/QualityControlsTable.js

@@ -27,6 +27,7 @@ DateDecorator.propTypes = {
 export const columns = [
   {
     name: "name",
+    sort: { name: "name.raw" },
     fieldSelector: _.pick(["id", "name"]),
     fieldDecorator: ({ id, name }) => (
       <Link to={linkTo.QUALITY_CONTROL({ id })}>{name}</Link>

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

@@ -53,7 +53,15 @@ jest.mock("@truedat/qx/hooks/useScoreGroups", () => {
   };
 });
 
-const actions = ["deprecate", "create_draft", "toggle_active"];
+const actions = [
+  "deprecate",
+  "create_draft",
+  "toggle_active",
+  "delete_score",
+  "update_main",
+  "execute",
+];
+
 const mutate = jest.fn();
 const qualityControl = qualityControlData();
 
@@ -62,7 +70,7 @@ const context = {
   qualityControl,
   mutate,
 };
-const variables = { scope: "qe" };
+const variables = { scope: "qxe" };
 const renderOpts = {
   mocks: [singleTemplateMock(variables)],
   messages,

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

@@ -17,7 +17,17 @@ jest.mock("@truedat/qx/hooks/useQualityControls", () => {
 
   return {
     useQualityControl: jest.fn(() => ({
-      data: { data: qualityControlData() },
+      data: {
+        data: qualityControlData(),
+        _actions: [
+          "deprecate",
+          "create_draft",
+          "toggle_active",
+          "delete_score",
+          "update_main",
+          "execute",
+        ],
+      },
       loading: false,
       mutate: jest.fn(),
     })),

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

@@ -23,7 +23,7 @@ jest.mock("@truedat/qx/hooks/useScoreGroups", () => ({
 }));
 
 const renderOpts = {
-  mocks: [singleTemplateMock({ scope: "qe", domainIds: undefined })],
+  mocks: [singleTemplateMock({ scope: "qxe", domainIds: undefined })],
   messages,
   fallback: "loading",
 };
@@ -148,7 +148,6 @@ describe("<QualityControls />", () => {
       },
       search: {
         must: "",
-        query: "",
       },
     });
   });

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

@@ -0,0 +1,44 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { SearchContextProvider } from "@truedat/core/search/SearchContext";
+import QualityControlsPagination from "../QualityControlsPagination";
+
+const useFilters = () => ({
+  trigger: () => ({
+    then: (callback) =>
+      callback({
+        data: { data: {} },
+      }),
+  }),
+});
+
+const useSearch = () => ({
+  trigger: () => ({
+    then: (callback) =>
+      callback({
+        data: { data: [] },
+        headers: { "x-total-count": 22 },
+      }),
+  }),
+});
+
+const searchProps = {
+  useSearch: useSearch,
+  useFilters: useFilters,
+  count: 20,
+  size: 20,
+  page: 1,
+  selectPage: jest.fn(),
+};
+
+describe("<QualityControlsPagination />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container, findByText } = render(
+      <SearchContextProvider {...searchProps}>
+        <QualityControlsPagination />
+      </SearchContextProvider>
+    );
+    await findByText(/1/);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -90,7 +90,52 @@ exports[`<QualityControlHeader /> matches the latest snapshot with control quali
             />
             <div
               class="left menu transition"
-            />
+            >
+              <div
+                aria-checked="false"
+                aria-selected="true"
+                class="selected item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <i
+                  aria-hidden="true"
+                  class="folder open outline icon"
+                />
+                <span
+                  class="text"
+                >
+                  Deprecate
+                </span>
+              </div>
+              <a
+                aria-checked="false"
+                aria-selected="false"
+                class="item"
+                href="/qualityControls/8/new_draft"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <i
+                  aria-hidden="true"
+                  class="edit icon"
+                />
+                <span
+                  class="text"
+                >
+                  Create Draft
+                </span>
+              </a>
+              <button
+                class="ui button"
+              >
+                <i
+                  aria-hidden="true"
+                  class="pause icon"
+                />
+                Disable
+              </button>
+            </div>
           </div>
         </div>
       </div>

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

@@ -145,7 +145,7 @@ exports[`<QualityControls /> matches the latest snapshot 1`] = `
             class=""
           >
             <th
-              class="disabled"
+              class=""
             >
               Name
             </th>

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

@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<QualityControlsPagination /> 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"
+      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="4"
+    >
+      »
+    </a>
+  </div>
+</div>
+`;

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

@@ -12,7 +12,7 @@ exports[`<QualityControlsTable /> matches the latest snapshot 1`] = `
         class=""
       >
         <th
-          class="disabled"
+          class=""
         >
           Name
         </th>

package/src/components/scores/MyScoreGroups.js

@@ -1,11 +1,17 @@
-import _ from "lodash/fp";
 import React from "react";
+import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
-import { Header, Icon, Grid, Segment } from "semantic-ui-react";
-
+import { Header, Icon, Grid, Segment, Divider } from "semantic-ui-react";
+import { SearchContextProvider } from "@truedat/core/search/SearchContext";
+import SearchWidget from "@truedat/core/search/SearchWidget";
+import {
+  useScoreGroupsSearch,
+  useScoreGroupsFilters,
+} from "@truedat/qx/hooks/useScoreGroups";
+import { useAuthorized } from "@truedat/core/hooks";
 import ScoreGroupsTable from "./ScoreGroupsTable";
 
-export default function MyScoreGroups() {
+export function MyScoreGroupsContent({ isAdmin }) {
   return (
     <Segment>
       <Grid>
@@ -18,7 +24,33 @@ export default function MyScoreGroups() {
           </Header>
         </Grid.Column>
       </Grid>
+      <Divider hidden />
+      {isAdmin ? <SearchWidget /> : null}
       <ScoreGroupsTable />
     </Segment>
   );
 }
+
+MyScoreGroupsContent.propTypes = {
+  isAdmin: PropTypes.bool,
+};
+
+export default function MyScoreGroups() {
+  const isAdmin = useAuthorized();
+  const enrichSearchPayload = isAdmin ? {} : { created_by: "me" };
+
+  const searchProps = {
+    initialSortColumn: "inserted_at",
+    initialSortDirection: "ascending",
+    useSearch: useScoreGroupsSearch,
+    useFilters: useScoreGroupsFilters,
+    pageSize: 20,
+    enrichSearchPayload,
+  };
+
+  return (
+    <SearchContextProvider {...searchProps}>
+      <MyScoreGroupsContent isAdmin={isAdmin} />
+    </SearchContextProvider>
+  );
+}

package/src/components/scores/ScoreGroupBreadcrumbs.js

@@ -4,12 +4,12 @@ import { Breadcrumb } from "semantic-ui-react";
 import { Link } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
 import { DateTime } from "@truedat/core/components";
-import { SCORE_GROUPS } from "@truedat/core/routes";
+import { MY_SCORE_GROUPS } from "@truedat/core/routes";
 
 export default function ScoreGroupBreadcrumbs({ timestamp }) {
   return (
     <Breadcrumb>
-      <Breadcrumb.Section as={Link} to={SCORE_GROUPS}>
+      <Breadcrumb.Section as={Link} to={MY_SCORE_GROUPS}>
         <FormattedMessage id="sidemenu.executions" />
       </Breadcrumb.Section>
       <Breadcrumb.Divider icon="right angle" />

package/src/components/scores/ScoreGroupForm.js

@@ -40,7 +40,7 @@ export default function ScoreGroupForm({ count, onSubmit, onCancel }) {
       />
       <Form loading={templatesLoading}>
         <TemplateSelector
-          scope="qe"
+          scope="qxe"
           selectedValue={template?.id}
           onChange={handleTemplateSelected}
           onLoad={handleTemplatesLoaded}

package/src/components/scores/ScoreGroupsTable.js

@@ -3,8 +3,10 @@ import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Table, Header, Icon, Label } from "semantic-ui-react";
+import { Loading } from "@truedat/core/components";
 import { columnDecorator } from "@truedat/core/services";
-import { useMyScoreGroupsIndex } from "../../hooks/useScoreGroups";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import Pagination from "@truedat/core/search/Pagination";
 
 import ScoreGroupLink from "./ScoreGroupLink";
 
@@ -39,41 +41,36 @@ ScoreGroupRow.propTypes = {
 };
 
 export default function ScoreGroupsTable() {
-  const { data } = useMyScoreGroupsIndex();
-  const scoreGroups = data?.data;
+  const { searchData, loading } = useSearchContext();
+  const scoreGroups = _.propOr([], "data")(searchData);
 
-  const presentStatuses = _.flow(
-    _.flatMap(_.flow(_.prop("status_summary"), _.keys)),
-    _.uniq
-  )(scoreGroups);
+  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;
+  };
 
-  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 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"]);
 
   const columns = [
     {
@@ -87,27 +84,35 @@ export default function ScoreGroupsTable() {
 
   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>
-      )}
+      {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}
+      </>
     </>
   );
 }

package/src/components/scores/ScoreRoutes.js

@@ -2,7 +2,6 @@ import React from "react";
 import { Route, Switch } from "react-router-dom";
 import {
   MY_SCORE_GROUPS,
-  SCORE_GROUPS,
   SCORE_GROUP,
   SCORE,
   SCORE_EVENTS,

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

@@ -1,31 +1,71 @@
 import React from "react";
 import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import { useAuthorized } from "@truedat/core/hooks";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import MyScoreGroups from "../MyScoreGroups";
 
 const renderOpts = { messages };
 
+jest.mock("@truedat/core/hooks", () => ({
+  useAuthorized: jest.fn(() => true),
+}));
+
 jest.mock("@truedat/qx/hooks/useScoreGroups", () => {
+  const originalModule = jest.requireActual("@truedat/qx/hooks/useScoreGroups");
   const { scoreGroupData } = jest.requireActual(
     "@truedat/qx/components/scores/__tests__/__fixtures__/scoreHelper"
   );
+  const data = {
+    data: [
+      scoreGroupData({ status_summary: { PENDING: 1, QUEUED: 2 } }),
+      scoreGroupData({ status_summary: { SUCCEEDED: 1, FAILED: 3 } }),
+    ],
+  };
 
   return {
-    useMyScoreGroupsIndex: jest.fn(() => ({
-      data: {
-        data: [
-          scoreGroupData({ status_summary: { PENDING: 1, QUEUED: 2 } }),
-          scoreGroupData({ status_summary: { SUCCEEDED: 1, FAILED: 3 } }),
-        ],
-      },
-      loading: false,
-    })),
+    __esModule: true,
+    ...originalModule,
+    useScoreGroupsFilters: () => ({
+      trigger: () => ({
+        then: (callback) =>
+          callback({
+            data: {},
+          }),
+      }),
+    }),
+    useScoreGroupsSearch: () => ({
+      trigger: () => ({
+        then: (callback) =>
+          callback({
+            data,
+            headers: { "x-total-count": 2 },
+          }),
+      }),
+    }),
   };
 });
 
 describe("<MyScoreGroups />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const { container } = render(<MyScoreGroups />, renderOpts);
+
+    await waitFor(() => {
+      expect(container.querySelector(".loading")).toBeNull();
+    });
+
     expect(container).toMatchSnapshot();
   });
+
+  it("non_admin user do not show searchwidget", async () => {
+    useAuthorized.mockImplementationOnce(() => false);
+
+    const { container, queryByText } = render(<MyScoreGroups />, renderOpts);
+
+    await waitFor(() => {
+      expect(container.querySelector(".loading")).toBeNull();
+    });
+
+    expect(queryByText("Filters")).not.toBeInTheDocument();
+  });
 });

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

@@ -9,7 +9,7 @@ import ScoreGroupForm from "../ScoreGroupForm";
 const renderOpts = {
   mocks: [
     singleTemplateMock({
-      scope: "qe",
+      scope: "qxe",
       domainIds: undefined,
     }),
   ],

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

@@ -7,7 +7,7 @@ import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import ScoreGroupPopup from "../ScoreGroupPopup";
 
 const renderOpts = {
-  mocks: [singleTemplateMock({ scope: "qe" })],
+  mocks: [singleTemplateMock({ scope: "qxe" })],
   messages,
   fallback: "lazy",
 };

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

@@ -1,40 +1,42 @@
 import React from "react";
 import { render } from "@truedat/test/render";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import SearchContextWrapper from "@truedat/core/components/common/SearchContextWrapper";
+import { scoreGroupData } from "@truedat/qx/components/scores/__tests__/__fixtures__/scoreHelper";
 import ScoreGroupsTable from "../ScoreGroupsTable";
-import { useMyScoreGroupsIndex } from "../../../hooks/useScoreGroups";
 
-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,
-    })),
-  };
-});
+const searchProps = {
+  searchData: {
+    data: [
+      scoreGroupData({ status_summary: { PENDING: 1, QUEUED: 2 } }),
+      scoreGroupData({ status_summary: { SUCCEEDED: 1, FAILED: 3 } }),
+    ],
+  },
+  loading: false,
+};
 
 const renderOpts = { messages };
 
 describe("<ScoreGroupsTable />", () => {
   it("matches the latest snapshot", () => {
-    const { container } = render(<ScoreGroupsTable />, renderOpts);
+    const { container } = render(
+      <SearchContextWrapper props={searchProps}>
+        <ScoreGroupsTable />
+      </SearchContextWrapper>,
+      renderOpts
+    );
+
     expect(container).toMatchSnapshot();
   });
+
   it("matches the latest snapshot for empty list", () => {
-    useMyScoreGroupsIndex.mockImplementation(() => ({
-      data: { data: [] },
-      loading: false,
-    }));
-    const { container } = render(<ScoreGroupsTable />, renderOpts);
+    const newSearchProps = { ...searchProps, searchData: { data: [] } };
+    const { container } = render(
+      <SearchContextWrapper props={newSearchProps}>
+        <ScoreGroupsTable />
+      </SearchContextWrapper>,
+      renderOpts
+    );
     expect(container).toMatchSnapshot();
   });
 });

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

@@ -26,6 +26,58 @@ exports[`<MyScoreGroups /> matches the latest snapshot 1`] = `
         </h2>
       </div>
     </div>
+    <div
+      class="ui hidden divider"
+    />
+    <div
+      class="ui action left icon input"
+    >
+      <i
+        aria-hidden="true"
+        class="search link icon"
+      />
+      <input
+        placeholder="Search..."
+        type="text"
+        value=""
+      />
+      <div
+        aria-busy="false"
+        aria-disabled="false"
+        aria-expanded="false"
+        class="ui button floating labeled scrolling dropdown icon"
+        role="listbox"
+        tabindex="0"
+      >
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          class="divider text"
+          role="alert"
+        >
+          Filters
+        </div>
+        <i
+          aria-hidden="true"
+          class="filter icon"
+        />
+        <div
+          class="menu transition"
+        >
+          <div
+            class="item"
+            role="option"
+          >
+            <em>
+              (reset filters)
+            </em>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="selectedFilters"
+    />
     <table
       class="ui celled collapsing striped table"
     >
@@ -50,6 +102,11 @@ exports[`<MyScoreGroups /> matches the latest snapshot 1`] = `
           >
             Queued
           </th>
+          <th
+            class="center aligned"
+          >
+            Started
+          </th>
           <th
             class="center aligned"
           >
@@ -60,6 +117,11 @@ exports[`<MyScoreGroups /> matches the latest snapshot 1`] = `
           >
             Failed
           </th>
+          <th
+            class="center aligned"
+          >
+            Timeout
+          </th>
         </tr>
       </thead>
       <tbody
@@ -105,6 +167,12 @@ exports[`<MyScoreGroups /> matches the latest snapshot 1`] = `
           <td
             class="center aligned"
           />
+          <td
+            class="center aligned"
+          />
+          <td
+            class="center aligned"
+          />
         </tr>
         <tr
           class=""
@@ -128,6 +196,9 @@ exports[`<MyScoreGroups /> matches the latest snapshot 1`] = `
           <td
             class="center aligned"
           />
+          <td
+            class="center aligned"
+          />
           <td
             class="center aligned"
           >
@@ -146,9 +217,72 @@ exports[`<MyScoreGroups /> matches the latest snapshot 1`] = `
               3
             </div>
           </td>
+          <td
+            class="center aligned"
+          />
         </tr>
       </tbody>
     </table>
+    <div
+      aria-label="Pagination Navigation"
+      class="ui pagination menu"
+      role="navigation"
+    >
+      <a
+        aria-current="false"
+        aria-disabled="true"
+        aria-label="First item"
+        class="disabled item"
+        tabindex="-1"
+        type="firstItem"
+        value="1"
+      >
+        «
+      </a>
+      <a
+        aria-current="false"
+        aria-disabled="true"
+        aria-label="Previous item"
+        class="disabled item"
+        tabindex="-1"
+        type="prevItem"
+        value="1"
+      >
+        ⟨
+      </a>
+      <a
+        aria-current="true"
+        aria-disabled="true"
+        class="active disabled item"
+        tabindex="-1"
+        type="pageItem"
+        value="1"
+      >
+        1
+      </a>
+      <a
+        aria-current="false"
+        aria-disabled="true"
+        aria-label="Next item"
+        class="disabled item"
+        tabindex="-1"
+        type="nextItem"
+        value="1"
+      >
+        ⟩
+      </a>
+      <a
+        aria-current="false"
+        aria-disabled="true"
+        aria-label="Last item"
+        class="disabled item"
+        tabindex="-1"
+        type="lastItem"
+        value="1"
+      >
+        »
+      </a>
+    </div>
   </div>
 </div>
 `;

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

@@ -8,7 +8,7 @@ exports[`<ScoreGroup /> matches the latest snapshot 1`] = `
   >
     <a
       class="section"
-      href="/scoreGroups"
+      href="/myScoreGroups"
     >
       My Executions
     </a>

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

@@ -7,7 +7,7 @@ exports[`<ScoreGroupBreadcrumbs /> matches the latest snapshot 1`] = `
   >
     <a
       class="section"
-      href="/scoreGroups"
+      href="/myScoreGroups"
     >
       My Executions
     </a>

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

@@ -26,6 +26,11 @@ exports[`<ScoreGroupsTable /> matches the latest snapshot 1`] = `
         >
           Queued
         </th>
+        <th
+          class="center aligned"
+        >
+          Started
+        </th>
         <th
           class="center aligned"
         >
@@ -36,6 +41,11 @@ exports[`<ScoreGroupsTable /> matches the latest snapshot 1`] = `
         >
           Failed
         </th>
+        <th
+          class="center aligned"
+        >
+          Timeout
+        </th>
       </tr>
     </thead>
     <tbody
@@ -81,6 +91,12 @@ exports[`<ScoreGroupsTable /> matches the latest snapshot 1`] = `
         <td
           class="center aligned"
         />
+        <td
+          class="center aligned"
+        />
+        <td
+          class="center aligned"
+        />
       </tr>
       <tr
         class=""
@@ -104,6 +120,9 @@ exports[`<ScoreGroupsTable /> matches the latest snapshot 1`] = `
         <td
           class="center aligned"
         />
+        <td
+          class="center aligned"
+        />
         <td
           class="center aligned"
         >
@@ -122,6 +141,9 @@ exports[`<ScoreGroupsTable /> matches the latest snapshot 1`] = `
             3
           </div>
         </td>
+        <td
+          class="center aligned"
+        />
       </tr>
     </tbody>
   </table>

package/src/hooks/useScoreGroups.js

@@ -2,7 +2,12 @@ import { compile } from "path-to-regexp";
 import useSWR from "swr";
 import useSWRMutations from "swr/mutation";
 import { apiJson, apiJsonPost } from "@truedat/core/services/api";
-import { API_SCORE_GROUPS, API_SCORE_GROUP } from "../api";
+import {
+  API_SCORE_GROUPS,
+  API_SCORE_GROUP,
+  API_SCORE_GROUPS_SEARCH,
+  API_SCORE_GROUPS_FILTERS,
+} from "../api";
 
 export const useScoreGroupCreate = () => {
   return useSWRMutations(API_SCORE_GROUPS, (url, { arg }) =>
@@ -21,3 +26,15 @@ export const useMyScoreGroupsIndex = () => {
   const { data, error, mutate } = useSWR(url, apiJson);
   return { data: data?.data, error, loading: !error && !data, mutate };
 };
+
+export const useScoreGroupsSearch = () => {
+  return useSWRMutations(API_SCORE_GROUPS_SEARCH, (url, { arg }) =>
+    apiJsonPost(url, arg)
+  );
+};
+
+export const useScoreGroupsFilters = () => {
+  return useSWRMutations(API_SCORE_GROUPS_FILTERS, (url, { arg }) =>
+    apiJsonPost(url, arg)
+  );
+};

package/src/hooks/useScores.js

@@ -15,6 +15,7 @@ export const useScoreShow = (id) => {
   const { data, error, mutate } = useSWR(url, apiJson);
   return { data: data?.data?.data, error, loading: !error && !data, mutate };
 };
+
 export const useScoreDelete = () => {
   return useSWRMutations(API_SCORE, (_url, { arg }) =>
     apiJsonDelete(compile(API_SCORE)(arg))