@truedat/qx 7.5.9 → 7.5.10

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@truedat/qx",
-  "version": "7.5.9",
+  "version": "7.5.10",
   "description": "Truedat Web Quality Experience package",
   "sideEffects": false,
-  "jsnext:main": "src/index.js",
   "module": "src/index.js",
   "files": [
-    "src"
+    "src",
+    "index.js"
   ],
   "author": "Bluetab Solutions",
   "license": "GPL-3.0",
@@ -15,58 +15,23 @@
   },
   "scripts": {
     "clean": "rimraf yarn-error.log",
-    "debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
     "test": "TZ=UTC jest --coverage",
-    "test:watch": "TZ=UTC jest --watch",
     "eslint": "eslint src/**",
     "eslint:fix": "eslint --fix src/**"
   },
-  "devDependencies": {
-    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.5",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
-    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.19.6",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "7.5.9",
-    "babel-jest": "^28.1.0",
-    "babel-plugin-dynamic-import-node": "^2.3.3",
-    "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-react-intl": "^5.1.18",
-    "babel-plugin-transform-semantic-ui-react-imports": "^1.4.1",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.0.0",
-    "jest-environment-jsdom": "^29.0.0",
-    "jsdom": "^26.0.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "rimraf": "^3.0.2",
-    "semantic-ui-react": "^2.1.4"
-  },
   "jest": {
     "maxWorkers": "50%",
     "testTimeout": 10000,
     "moduleDirectories": [
-      "<rootDir>/src",
-      "../../node_modules"
-    ],
-    "setupFilesAfterEnv": [
-      "@truedat/test/setup"
+      "<rootDir>/src"
     ],
     "moduleNameMapper": {
-      "\\.(css|less)$": "identity-obj-proxy",
+      "\\.(css|less|png)$": "identity-obj-proxy",
       "^@truedat/([^/]+)$": "<rootDir>/../$1/src/index",
       "^@truedat/([^/]+)/(.*)$": "<rootDir>/../$1/src/$2"
     },
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
+    "setupFilesAfterEnv": [
+      "@truedat/test/setup"
     ],
     "testEnvironment": "jsdom",
     "testMatch": [
@@ -74,9 +39,6 @@
       "**/?(*.)+(spec|test).[jt]s?(x)",
       "!**/__fixtures__/**"
     ],
-    "testPathIgnorePatterns": [
-      "<rootDir>/node_modules/"
-    ],
     "transform": {
       "\\.js$": [
         "babel-jest",
@@ -84,27 +46,46 @@
           "rootMode": "upward"
         }
       ]
-    },
-    "transformIgnorePatterns": [
-      "/node_modules/(?!@truedat).*"
-    ]
+    }
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@truedat/test": "7.5.10",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "redux-saga-test-plan": "^4.0.6"
   },
   "dependencies": {
-    "@truedat/core": "7.5.9",
+    "@apollo/client": "^3.13.5",
+    "axios": "^1.8.4",
+    "graphql": "^16.10.0",
+    "is-hotkey": "^0.2.0",
+    "is-url": "^1.2.4",
+    "lodash": "^4.17.21",
+    "match-sorter": "^8.0.0",
+    "moment": "^2.30.1",
+    "path-to-regexp": "^8.2.0",
     "prop-types": "^15.8.1",
-    "react-hook-form": "^7.45.4",
-    "react-intl": "^5.20.10",
-    "react-router-dom": "^5.2.0",
-    "semantic-ui-react": "^2.1.4",
-    "swr": "^2.0.0"
-  },
-  "peerDependencies": {
-    "react": ">= 16.8.6 < 17",
-    "react-dom": ">= 16.8.6 < 17",
-    "semantic-ui-react": ">= 2.0.3 < 2.2"
-  },
-  "overrides": {
-    "jsdom": "26.0.0"
+    "query-string": "^7.1.2",
+    "react": "^19.0.0",
+    "react-csv": "^2.2.2",
+    "react-dom": "^19.0.0",
+    "react-dropzone": "^14.3.8",
+    "react-hook-form": "^7.54.2",
+    "react-intl": "^7.1.10",
+    "react-moment": "^1.1.3",
+    "react-redux": "^9.2.0",
+    "react-router": "^7.4.0",
+    "redux": "^5.0.1",
+    "redux-saga": "^1.3.0",
+    "redux-saga-routines": "^3.2.3",
+    "reselect": "^5.1.1",
+    "semantic-ui-calendar-react": "^0.15.3",
+    "semantic-ui-react": "^3.0.0-beta.2",
+    "swr": "^2.3.3"
   },
-  "gitHead": "03770e3241daa955de2e6e40fdaea91e3d147860"
+  "gitHead": "8a8c49e9d5d6bb4e5f2b503b063bfd6dd20a503d"
 }

package/src/components/QxRoutes.js

@@ -1,7 +1,6 @@
 import React from "react";
-import { Route, Switch } from "react-router-dom";
-import { Unauthorized } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
+import { Route, Routes } from "react-router";
+import { ProtectedRoute } from "@truedat/core/router";
 import {
   DATA_VIEWS,
   FUNCTIONS,
@@ -14,38 +13,58 @@ import DataViews from "./dataViews/DataViews";
 import Functions from "./functions/Functions";
 import QualityControlRoutes from "./qualityControls/QualityControlRoutes";
 import ScoreRoutes from "./scores/ScoreRoutes";
-
+import ScoreGroupsRoutes from "./scores/ScoreGroupsRoutes";
 export default function QxRoutes() {
-  const authorized = useAuthorized("quality_control");
-
   return (
-    <Switch>
+    <Routes>
       <Route
         path={DATA_VIEWS}
-        render={() => (authorized ? <DataViews /> : <Unauthorized />)}
+        element={
+          <ProtectedRoute authorization="quality_control">
+            <DataViews />
+          </ProtectedRoute>
+        }
       />
       <Route
         path={FUNCTIONS}
-        render={() => (authorized ? <Functions /> : <Unauthorized />)}
+        element={
+          <ProtectedRoute authorization="quality_control">
+            <Functions />
+          </ProtectedRoute>
+        }
       />
       <Route
-        path={QUALITY_CONTROLS}
-        render={() =>
-          authorized ? <QualityControlRoutes /> : <Unauthorized />
+        path={`${QUALITY_CONTROLS}/*`}
+        element={
+          <ProtectedRoute authorization="quality_control">
+            <QualityControlRoutes />
+          </ProtectedRoute>
         }
       />
       <Route
-        path={SCORES}
-        render={() => (authorized ? <ScoreRoutes /> : <Unauthorized />)}
+        path={`${SCORES}/*`}
+        element={
+          <ProtectedRoute authorization="quality_control">
+            <ScoreRoutes />
+          </ProtectedRoute>
+        }
       />
       <Route
-        path={SCORE_GROUPS}
-        render={() => (authorized ? <ScoreRoutes /> : <Unauthorized />)}
+        path={`${SCORE_GROUPS}/*`}
+        element={
+          <ProtectedRoute authorization="quality_control">
+            <ScoreGroupsRoutes />
+          </ProtectedRoute>
+        }
       />
       <Route
-        path={MY_SCORE_GROUPS}
-        render={() => (authorized ? <ScoreRoutes /> : <Unauthorized />)}
+        path={`${MY_SCORE_GROUPS}/*`}
+        element={
+          <ProtectedRoute authorization="quality_control">
+            <ScoreGroupsRoutes />
+          </ProtectedRoute>
+        }
       />
-    </Switch>
+    </Routes>
   );
 }

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

@@ -0,0 +1,73 @@
+import React from "react";
+import { render, waitForLoad } from "@truedat/test/render";
+import QxRoutes from "../QxRoutes";
+import { useAuthorized } from "@truedat/core/hooks/useAuthorized";
+import {
+  DATA_VIEWS,
+  FUNCTIONS,
+  QUALITY_CONTROLS,
+  MY_SCORE_GROUPS,
+  SCORE_GROUPS,
+  SCORES,
+} from "@truedat/core/routes";
+
+jest.mock("@truedat/core/hooks/useAuthorized", () => ({
+  useAuthorized: jest.fn(() => true),
+}));
+
+// Mock all child components
+jest.mock("../dataViews/DataViews", () => () => <div>DataViews</div>);
+jest.mock("../functions/Functions", () => () => <div>Functions</div>);
+jest.mock("../qualityControls/QualityControlRoutes", () => () => (
+  <div>QualityControlRoutes</div>
+));
+jest.mock("../scores/ScoreRoutes", () => () => <div>ScoreRoutes</div>);
+
+describe("<QxRoutes />", () => {
+  it("renders correctly with default route", async () => {
+    const rendered = render(<QxRoutes />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with data views route", async () => {
+    const rendered = render(<QxRoutes />, {
+      routes: [DATA_VIEWS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with functions route", async () => {
+    const rendered = render(<QxRoutes />, {
+      routes: [FUNCTIONS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with quality controls route", async () => {
+    const rendered = render(<QxRoutes />, {
+      routes: [QUALITY_CONTROLS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with scores route", async () => {
+    const rendered = render(<QxRoutes />, {
+      routes: [SCORES],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders unauthorized component when not authorized", async () => {
+    useAuthorized.mockReturnValueOnce(false);
+    const rendered = render(<QxRoutes />, {
+      routes: [QUALITY_CONTROLS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+});

package/src/components/__tests__/__snapshots__/QxRoutes.spec.js.snap

@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<QxRoutes /> renders correctly with data views route 1`] = `
+<div>
+  <div>
+    DataViews
+  </div>
+</div>
+`;
+
+exports[`<QxRoutes /> renders correctly with default route 1`] = `<div />`;
+
+exports[`<QxRoutes /> renders correctly with functions route 1`] = `
+<div>
+  <div>
+    Functions
+  </div>
+</div>
+`;
+
+exports[`<QxRoutes /> renders correctly with quality controls route 1`] = `
+<div>
+  <div>
+    QualityControlRoutes
+  </div>
+</div>
+`;
+
+exports[`<QxRoutes /> renders correctly with scores route 1`] = `
+<div>
+  <div>
+    ScoreRoutes
+  </div>
+</div>
+`;
+
+exports[`<QxRoutes /> renders unauthorized component when not authorized 1`] = `
+<div>
+  <div
+    class="ui icon visible bottom attached message center"
+  >
+    <i
+      aria-hidden="true"
+      class="warning sign icon"
+    />
+    <div
+      class="content"
+    >
+      <div
+        class="header"
+      >
+        view.unauthorized.head
+      </div>
+      <p>
+        view.unauthorized.content
+      </p>
+    </div>
+  </div>
+</div>
+`;

package/src/components/common/ClauseViewer.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useContext } from "react";
+import { Fragment, use } from "react";
 import PropTypes from "prop-types";
 import { Divider, Label, Segment } from "semantic-ui-react";
 import { useFunctions } from "@truedat/qx/hooks/useFunctions";
@@ -16,17 +16,17 @@ export default function ClauseViewer({ clause }) {
       {loading
         ? null
         : _map(({ expressions }, idx) => (
-            <QxContext.Provider value={{ functions }} key={idx}>
+            <QxContext value={{ functions }} key={idx}>
               <Segment textAlign="center" className="no-margin">
                 {_map((expression, idx) => (
-                  <React.Fragment key={idx}>
+                  <Fragment key={idx}>
                     <ExpressionViewer expression={expression} />
                     {idx == _.size(expressions) - 1 ? null : (
                       <Divider horizontal className="divider-compact">
                         OR
                       </Divider>
                     )}
-                  </React.Fragment>
+                  </Fragment>
                 ))(expressions)}
               </Segment>
               {idx == _.size(clause) - 1 ? null : (
@@ -34,7 +34,7 @@ export default function ClauseViewer({ clause }) {
                   AND
                 </Divider>
               )}
-            </QxContext.Provider>
+            </QxContext>
           ))(clause)}
     </Segment>
   );
@@ -58,7 +58,7 @@ ExpressionViewer.propTypes = {
 };
 
 function ExpressionFunctionViewer({ value }) {
-  const { functions } = useContext(QxContext);
+  const { functions } = use(QxContext);
   const { name, type } = value;
   const func = _.find({ name, type })(functions);
   return isConditionFunction(func) ? (

package/src/components/common/DescriptionInput.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import { useState } from "react";
 import { useIntl } from "react-intl";
 import { Input, List } from "semantic-ui-react";

package/src/components/common/ResourceSelector.js

@@ -1,6 +1,6 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
-import React, { useContext } from "react";
+import { use } from "react";
 import { useIntl } from "react-intl";
 import { Controller, useFormContext } from "react-hook-form";
 import { Form, Dropdown } from "semantic-ui-react";
@@ -13,8 +13,7 @@ import {
 
 export default function ResourceSelector({ required, labelId }) {
   const { formatMessage } = useIntl();
-  const { field, referenceDatasets, dataViews, sourceId } =
-    useContext(QxContext);
+  const { field, referenceDatasets, dataViews, sourceId } = use(QxContext);
   const { control, setValue, watch } = useFormContext();
 
   const sourceDataViews = _.filter({ source_id: parseInt(sourceId) })(

package/src/components/common/TestFormWrapper.js

@@ -1,20 +1,9 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { FormProvider, useForm } from "react-hook-form";
 import QxContext from "@truedat/qx/components/QxContext";
 import { useFunctions } from "@truedat/qx/hooks/useFunctions";
 
-jest.mock("@truedat/core/hooks/useUserFilters", () => {
-  const originalModule = jest.requireActual(
-    "@truedat/core/hooks/useUserFilters"
-  );
-
-  return {
-    __esModule: true,
-    ...originalModule,
-    useUserFilters: jest.fn(() => ({})),
-  };
-});
+jest.mock("@truedat/core/hooks/useUserFilters");
 jest.mock("@truedat/qx/hooks/useFunctions", () => {
   const originalModule = jest.requireActual("@truedat/qx/hooks/useFunctions");
 
@@ -59,7 +48,7 @@ export default function TestFormWrapper({
 
   return (
     <FormProvider {...form}>
-      <QxContext.Provider value={qxContext}>{children}</QxContext.Provider>
+      <QxContext value={qxContext}>{children}</QxContext>
     </FormProvider>
   );
 }

package/src/components/common/TypeSelector.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import { useIntl } from "react-intl";
 import { Dropdown } from "semantic-ui-react";
 import { typeToIcon, types } from "@truedat/qx/types";

package/src/components/common/__tests__/DescriptionInput.spec.js

@@ -1,8 +1,5 @@
-import _ from "lodash/fp";
-import React from "react";
-import { act } from "react-dom/test-utils";
 import userEvent from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import DescriptionInput from "../DescriptionInput";
 
 const renderOpts = {
@@ -15,30 +12,24 @@ const renderOpts = {
 };
 
 describe("<DescriptionInput />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(
-      <DescriptionInput value="value" />,
-      renderOpts
-    );
-
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<DescriptionInput value="value" />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
+
   it("handles user input", async () => {
+    const user = userEvent.setup({ delay: null });
     const props = {
       onBlur: jest.fn(),
       onChange: jest.fn(),
     };
-    const { getByRole } = render(<DescriptionInput {...props} />, renderOpts);
-
-    await act(async () => {
-      userEvent.click(getByRole("listitem"));
-    });
-
-    userEvent.type(getByRole("textbox"), "description");
+    const rendered = render(<DescriptionInput {...props} />, renderOpts);
+    await waitForLoad(rendered);
 
-    await act(async () => {
-      userEvent.click(getByRole("list"));
-    });
+    await user.click(rendered.getByRole("listitem"));
+    await user.type(rendered.getByRole("textbox"), "description");
+    await user.click(rendered.getByRole("list"));
 
     const [_event, { value: lastValue }] = props.onChange.mock.lastCall;