@truedat/ai 7.5.9 → 7.5.11

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@truedat/ai",
-  "version": "7.5.9",
+  "version": "7.5.11",
   "description": "Truedat Web Artificial Intelligence package",
   "sideEffects": false,
-  "jsnext:main": "src/index.js",
   "module": "src/index.js",
   "files": [
     "src"
@@ -15,63 +14,25 @@
   },
   "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",
-    "testPathIgnorePatterns": [
-      "<rootDir>/node_modules/"
-    ],
     "transform": {
       "\\.js$": [
         "babel-jest",
@@ -79,23 +40,42 @@
           "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.11",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "redux-saga-test-plan": "^4.0.6"
   },
   "dependencies": {
-    "@truedat/core": "7.5.9",
+    "axios": "^1.8.4",
+    "is-hotkey": "^0.2.0",
+    "is-url": "^1.2.4",
+    "lodash": "^4.17.21",
+    "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",
-    "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"
+    "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",
+    "semantic-ui-calendar-react": "^0.15.3",
+    "semantic-ui-react": "^3.0.0-beta.2",
+    "swr": "^2.3.3"
   },
-  "gitHead": "03770e3241daa955de2e6e40fdaea91e3d147860"
+  "gitHead": "cbb92d5206752fe2add4195432b0401da17a0f23"
 }

package/src/components/AiRoutes.js

@@ -1,17 +1,7 @@
 import React from "react";
-import { Route, Switch } from "react-router-dom";
-import { Unauthorized } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
-import {
-  AI_SANDBOX,
-  ACTIONS,
-  ACTION,
-  ACTION_EDIT,
-  ACTION_NEW,
-  RESOURCE_MAPPINGS,
-  PROMPTS,
-  PROVIDERS,
-} from "@truedat/core/routes";
+import { Route, Routes } from "react-router";
+import { ProtectedRoute } from "@truedat/core/router";
+
 import ResourceMappings from "./resourceMappings/ResourceMappings";
 import Prompts from "./prompts/Prompts";
 import Providers from "./providers/Providers";
@@ -22,44 +12,47 @@ import ActionEdit from "./actions/ActionEdit";
 import ActionNew from "./actions/ActionNew";
 
 export default function AiRoutes() {
-  const authorized = useAuthorized("manage_ai");
-
   return (
-    <Switch>
-      <Route
-        path={RESOURCE_MAPPINGS}
-        render={() => (authorized ? <ResourceMappings /> : <Unauthorized />)}
-      />
-      <Route
-        path={PROMPTS}
-        render={() => (authorized ? <Prompts /> : <Unauthorized />)}
-      />
-      <Route
-        path={PROVIDERS}
-        render={() => (authorized ? <Providers /> : <Unauthorized />)}
-      />
+    <Routes>
       <Route
-        path={AI_SANDBOX}
-        render={() => (authorized ? <AiSandbox /> : <Unauthorized />)}
-      />
+        path={"resource_mappings"}
+        element={<ProtectedRoute authorization={"manage_ai"} />}
+      >
+        <Route index element={<ResourceMappings />} />
+      </Route>
+
       <Route
-        path={ACTIONS}
-        exact
-        render={() => (authorized ? <Actions /> : <Unauthorized />)}
-      />
+        path={"prompts"}
+        element={<ProtectedRoute authorization={"manage_ai"} />}
+      >
+        <Route index element={<Prompts />} />
+      </Route>
+
       <Route
-        path={ACTION_NEW}
-        exact
-        render={() => (authorized ? <ActionNew /> : <Unauthorized />)}
-      />
+        path={"providers"}
+        element={<ProtectedRoute authorization={"manage_ai"} />}
+      >
+        <Route index element={<Providers />} />
+      </Route>
+
       <Route
-        path={ACTION_EDIT}
-        render={() => (authorized ? <ActionEdit /> : <Unauthorized />)}
-      />
+        path={"aiSandbox"}
+        element={<ProtectedRoute authorization={"manage_ai"} />}
+      >
+        <Route index element={<AiSandbox />} />
+      </Route>
+
       <Route
-        path={ACTION}
-        render={() => (authorized ? <Action /> : <Unauthorized />)}
-      />
-    </Switch>
+        path={"tasks"}
+        element={<ProtectedRoute authorization={"manage_ai"} />}
+      >
+        <Route index element={<Actions />} />
+        <Route path={"new"} element={<ActionNew />} />
+        <Route path={":id/edit"} element={<ActionEdit />} />
+        <Route path={":id"} element={<Action />} />
+      </Route>
+
+      <Route path="*" element={null} />
+    </Routes>
   );
 }

package/src/components/TranslationModal.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import {
   Button,
@@ -21,7 +21,7 @@ import {
 import { useIntl } from "react-intl";
 import FieldViewerValue from "@truedat/df/components/FieldViewerValue";
 import { splitTranslatableFields } from "@truedat/core/services/i18nContent";
-import { useRequestTranslation } from "../hooks/useTranslations";
+import { useRequestTranslation } from "@truedat/ai/hooks/useTranslations";
 
 const TranslationModal = ({
   open,
@@ -44,7 +44,6 @@ const TranslationModal = ({
   const translatableFields = _.keysIn(translatable);
 
   const defaultContent = _.find({ is_default: true })(i18nContent);
-
   const initializeTemplate = () => {
     const templateContent = _.flow(
       _.map((group) => {
@@ -271,7 +270,7 @@ const TranslationModal = ({
               </dl>
             ) : null}
             {_.map(({ name: groupName, fields, checked }) => (
-              <React.Fragment key={groupName}>
+              <Fragment key={groupName}>
                 <Divider />
                 <h3>
                   <Checkbox
@@ -291,7 +290,7 @@ const TranslationModal = ({
                       type,
                       widget,
                     }) => (
-                      <React.Fragment key={fieldName}>
+                      <Fragment key={fieldName}>
                         <dt>
                           <h4>
                             <Checkbox
@@ -350,11 +349,11 @@ const TranslationModal = ({
                             widget={widget}
                           />
                         </dd>
-                      </React.Fragment>
+                      </Fragment>
                     )
                   )(fields)}
                 </dl>
-              </React.Fragment>
+              </Fragment>
             ))(translateTemplate)}
           </Segment>
         </Grid.Column>
@@ -467,7 +466,6 @@ const TranslationModal = ({
                   )(translateContent)}
                 </TableRow>
               ) : null}
-
               {_.map(({ fields }) =>
                 _.map(
                   ({
@@ -592,8 +590,8 @@ const TranslationModal = ({
           {translateResult === "success"
             ? renderResult()
             : translateResult === "error"
-            ? renderError()
-            : renderRequest()}
+              ? renderError()
+              : renderRequest()}
         </Modal.Description>
       </Modal.Content>
     </Modal>

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { act, fireEvent, waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import TranslationModal from "../TranslationModal";

package/src/components/actions/Action.js

@@ -1,7 +1,6 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { Loading } from "@truedat/core/components";
 import { Header, Icon, Grid, Segment } from "semantic-ui-react";
 import { useIntl } from "react-intl";

package/src/components/actions/ActionActions.js

@@ -1,9 +1,8 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { linkTo, ACTIONS } from "@truedat/core/routes";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { Button, Icon } from "semantic-ui-react";
 import { ConfirmModal, GroupActions } from "@truedat/core/components";
 import { useActionDelete, useActionSetActive } from "../../hooks/useActions";
@@ -72,7 +71,7 @@ ConfirmDeleteModal.propTypes = {
 
 export const ActionActions = ({ action, actionMutate }) => {
   const { formatMessage } = useIntl();
-  const history = useHistory();
+  const navigate = useNavigate();
   const { is_enabled: active, id, name } = action || {};
 
   const { trigger: handleDelete } = useActionDelete({ id: id });
@@ -89,7 +88,7 @@ export const ActionActions = ({ action, actionMutate }) => {
 
   const onConfirmDelete = async () => {
     await handleDelete();
-    history.push(ACTIONS);
+    navigate(ACTIONS);
   };
 
   const onConfirmToggle = async () => {

package/src/components/actions/ActionBreadcrumbs.js

@@ -1,7 +1,6 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Breadcrumb } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { ACTIONS } from "@truedat/core/routes";
 

package/src/components/actions/ActionDetail.js

@@ -1,15 +1,16 @@
 import _ from "lodash/fp";
-import React from "react";
+import { lazy } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Segment, List, Divider } from "semantic-ui-react";
 
-const DynamicFormViewer = React.lazy(() =>
-  import("@truedat/df/components/DynamicFormViewer")
+const DynamicFormViewer = lazy(
+  () => import("@truedat/df/components/DynamicFormViewer")
 );
 
 export const ActionDetail = ({ action }) => {
   const user = _.path("user.full_name")(action);
+
   return (
     <Segment attached="bottom">
       <List size="big" relaxed>

package/src/components/actions/ActionEdit.js

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { useParams } from "react-router";
 import {
   Checkbox,
   Container,
@@ -28,7 +28,7 @@ const ActionEdit = () => {
   const [isEnabled, setIsEnabled] = useState(true);
 
   useEffect(() => {
-    if (action?.deleted_at) history.push(linkTo.ACTION({ id: action?.id }));
+    if (action?.deleted_at) navigate(linkTo.ACTION({ id: action?.id }));
     setIsEnabled(action?.is_enabled);
   }, [action]);
 

package/src/components/actions/ActionForm.js

@@ -1,15 +1,15 @@
 import _ from "lodash/fp";
-import React, { useEffect, useState } from "react";
+import { lazy, useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { HistoryBackButton } from "@truedat/core/components";
-import { Form, Header, Label, Button } from "semantic-ui-react";
+import { Form, Label, Button } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
 import { useAgents } from "@truedat/auth/hooks/useUsers";
 
-const SelectableDynamicForm = React.lazy(() =>
-  import("@truedat/df/components/SelectableDynamicForm")
+const SelectableDynamicForm = lazy(
+  () => import("@truedat/df/components/SelectableDynamicForm")
 );
 
 const ActionForm = ({
@@ -19,7 +19,7 @@ const ActionForm = ({
   onSubmit,
 }) => {
   const { formatMessage } = useIntl();
-  const history = useHistory();
+  const navigate = useNavigate();
   const { agents } = useAgents();
 
   const [action, setAction] = useState();
@@ -81,7 +81,7 @@ const ActionForm = ({
     };
 
     onSubmit(payload).then((response) => {
-      history.push(linkTo.ACTION({ id: response?.data?.data?.id }));
+      navigate(linkTo.ACTION({ id: response?.data?.data?.id }));
     });
   };
 

package/src/components/actions/ActionNew.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import {
   Checkbox,
   Container,

package/src/components/actions/Actions.js

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   Header,
   Icon,
@@ -8,7 +7,7 @@ import {
   Button,
 } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { ACTION_NEW } from "@truedat/core/routes";
 import { useActionsSearch } from "../../hooks/useActions";
 import { ActionsTable } from "./ActionsTable";

package/src/components/actions/ActionsContext.js

@@ -1,8 +1,8 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect, useContext, createContext } from "react";
+import { useState, useEffect, use, createContext } from "react";
 
 export const ActionsContext = createContext();
-export const useActionsContext = () => useContext(ActionsContext);
+export const useActionsContext = () => use(ActionsContext);
 
 export const ActionsContextProvider = (props) => {
   const children = _.prop("children")(props);
@@ -44,9 +44,5 @@ export const ActionsContextProvider = (props) => {
     setSortDirection,
   };
 
-  return (
-    <ActionsContext.Provider value={context}>
-      {children}
-    </ActionsContext.Provider>
-  );
+  return <ActionsContext value={context}>{children}</ActionsContext>;
 };

package/src/components/actions/ActionsTable.js

@@ -1,7 +1,6 @@
 import _ from "lodash/fp";
-import React from "react";
 import { FormattedMessage } from "react-intl";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Table, Header, Icon } from "semantic-ui-react";
 import { linkTo } from "@truedat/core/routes";
 import { Loading } from "@truedat/core/components";

package/src/components/actions/__tests__/Action.spec.js

@@ -1,9 +1,10 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
+import { useAction } from "@truedat/ai/hooks/useActions";
+import { templateByNameMock } from "@truedat/test/mocks";
 import Action from "../Action";
 
 const action = {
-  id: 3,
+  id: "3",
   name: "foo",
   type: "baz",
   user: {
@@ -16,44 +17,21 @@ const action = {
   is_enabled: true,
   dynamic_content: {},
 };
-jest.mock("@truedat/ai/hooks/useActions", () => {
-  const originalModule = jest.requireActual("@truedat/ai/hooks/useActions");
 
-  return {
-    __esModule: true,
-    ...originalModule,
-    useAction: () => ({
-      action,
-      loading: false,
-      mutate: jest.fn(),
-    }),
-  };
-});
+jest.mock("@truedat/ai/hooks/useActions");
+useAction.mockImplementation(() => ({
+  action,
+  mutate: jest.fn(),
+}));
 
 const renderOpts = {
-  messages: {
-    en: {
-      "ai.actions.actions.delete.confirmation.content":
-        "Action will be deleted. Are you sure?",
-      "ai.actions.actions.delete.confirmation.header": "Delete action",
-      "ai.actions.actions.delete": "Delete",
-      "ai.actions.actions.disable.confirmation.content":
-        " Action will be disabled. Are you sure?",
-      "ai.actions.actions.disable.confirmation.header": "Disable action",
-      "ai.actions.actions.disable": "Disable",
-      "ai.actions.actions.edit": "Edit",
-      "ai.actions.actions.form.user": "Agent",
-      "ai.actions.is_enabled.true": "Active",
-      "navigation.admin.actions": "Actions",
-      "ai.actions.form.type": "Type",
-    },
-  },
-  fallback: "lazy",
+  mocks: [templateByNameMock({ name: "baz", domainIds: undefined })],
 };
 
 describe("<Action />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(<Action />, renderOpts);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<Action />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/actions/__tests__/ActionActions.spec.js

@@ -1,9 +1,8 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import ActionActions from "../ActionActions";
 
 const action = {
-  id: 3,
+  id: "3",
   name: "foo",
   type: "baz",
   user: {
@@ -17,23 +16,6 @@ const action = {
   dynamic_content: {},
 };
 
-const renderOpts = {
-  messages: {
-    en: {
-      "ai.actions.actions.delete.confirmation.content":
-        "Action will be deleted. Are you sure?",
-      "ai.actions.actions.delete.confirmation.header": "Delete action",
-      "ai.actions.actions.delete": "Delete",
-      "ai.actions.actions.disable.confirmation.content":
-        " Action will be disabled. Are you sure?",
-      "ai.actions.actions.disable.confirmation.header": "Disable action",
-      "ai.actions.actions.disable": "Disable",
-      "ai.actions.actions.edit": "Edit",
-      "navigation.admin.actions": "Actions",
-    },
-  },
-};
-
 describe("<ActionActions />", () => {
   const props = {
     action,
@@ -41,7 +23,7 @@ describe("<ActionActions />", () => {
   };
 
   it("matches the latest snapshot", () => {
-    const { container } = render(<ActionActions {...props} />, renderOpts);
+    const { container } = render(<ActionActions {...props} />);
     expect(container).toMatchSnapshot();
   });
 });

package/src/components/actions/__tests__/ActionBreadcrumbs.spec.js

@@ -1,21 +1,12 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import ActionBreadcrumbs from "../ActionBreadcrumbs";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "navigation.admin.actions": "Actions",
-    },
-  },
-};
-
 describe("<ActionBreadcrumbs />", () => {
   const text = "edit";
   const props = { text };
 
   it("matches the latest snapshot", () => {
-    const { container } = render(<ActionBreadcrumbs {...props} />, renderOpts);
+    const { container } = render(<ActionBreadcrumbs {...props} />);
     expect(container).toMatchSnapshot();
   });
 });