@truedat/auth 7.5.9 → 7.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/auth",
-  "version": "7.5.9",
+  "version": "7.5.11",
   "description": "Truedat Web Auth",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -15,48 +15,15 @@
   },
   "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/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",
-    "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.6.2",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.0.0",
-    "jest-environment-jsdom": "^29.0.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "redux-saga-test-plan": "^4.0.4",
-    "rimraf": "^3.0.2",
-    "semantic-ui-react": "^2.1.4"
-  },
   "jest": {
     "maxWorkers": "50%",
     "testTimeout": 10000,
     "moduleDirectories": [
-      "<rootDir>/src",
-      "../../node_modules"
+      "<rootDir>/src"
     ],
     "moduleNameMapper": {
       "\\.(css|less|png)$": "identity-obj-proxy",
@@ -66,13 +33,7 @@
     "setupFilesAfterEnv": [
       "@truedat/test/setup"
     ],
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ],
     "testEnvironment": "jsdom",
-    "testPathIgnorePatterns": [
-      "<rootDir>/node_modules/"
-    ],
     "transform": {
       "\\.js$": [
         "babel-jest",
@@ -80,34 +41,49 @@
           "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",
-    "auth0-js": "9.23.3",
-    "decode-uri-component": "^0.2.2",
-    "jwt-decode": "^2.2.0",
+    "@apollo/client": "^3.13.5",
+    "@truedat/core": "7.5.11",
+    "auth0-js": "^9.28.0",
+    "axios": "^1.8.4",
+    "graphql": "^16.10.0",
+    "is-hotkey": "^0.2.0",
+    "is-url": "^1.2.4",
+    "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
-    "path-to-regexp": "^1.7.0",
+    "moment": "^2.30.1",
+    "path-to-regexp": "^8.2.0",
     "prop-types": "^15.8.1",
     "query-string": "^7.1.2",
-    "react-hook-form": "^7.30.0",
-    "react-intl": "^5.20.10",
-    "react-redux": "^7.2.4",
-    "react-router-dom": "^5.2.0",
-    "redux": "^4.1.1",
-    "redux-saga": "^1.2.1",
+    "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": "^4.1.7",
-    "semantic-ui-react": "^2.1.4"
-  },
-  "peerDependencies": {
-    "react": ">= 16.8.6 < 17",
-    "react-dom": ">= 16.8.6 < 17",
-    "semantic-ui-react": ">= 2.0.3 < 2.2"
+    "reselect": "^5.1.1",
+    "semantic-ui-calendar-react": "^0.15.3",
+    "semantic-ui-react": "^3.0.0-beta.2",
+    "swr": "^2.3.3",
+    "validator": "^13.15.0"
   },
-  "gitHead": "03770e3241daa955de2e6e40fdaea91e3d147860"
+  "gitHead": "cbb92d5206752fe2add4195432b0401da17a0f23"
 }

package/src/groups/components/EditGroup.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Header, Icon, Container, Segment } from "semantic-ui-react";
 import { connect } from "react-redux";

package/src/groups/components/Group.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Header, Button, Icon, Grid } from "semantic-ui-react";

package/src/groups/components/GroupBreadcrumbs.js

@@ -1,6 +1,5 @@
-import React from "react";
 import { Breadcrumb } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { GROUPS } from "@truedat/core/routes";
 

package/src/groups/components/GroupCard.js

@@ -1,8 +1,7 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Button, Card, Icon } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { ConfirmModal } from "@truedat/core/components";
 import { linkTo } from "@truedat/core/routes";
@@ -15,7 +14,8 @@ export const GroupCard = ({
   <Card key={id}>
     <Card.Content>
       <Card.Header as={Link} to={linkTo.GROUP({ id })}>
-        <Icon name="group" /> {name}
+        <Icon name="group" />
+        {name}
       </Card.Header>
       <Card.Description>{description}</Card.Description>
     </Card.Content>

package/src/groups/components/GroupCards.js

@@ -1,6 +1,5 @@
-import React from "react";
 import PropTypes from "prop-types";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { connect } from "react-redux";
 import { Icon, Card } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
@@ -26,7 +25,7 @@ export const GroupCards = ({ groups }) => (
 );
 
 GroupCards.propTypes = {
-  groups: PropTypes.array
+  groups: PropTypes.array,
 };
 
 const mapStateToProps = ({ groups }) => ({ groups });

package/src/groups/components/GroupForm.js

@@ -1,6 +1,5 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
-import React from "react";
 import { useForm, Controller } from "react-hook-form";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";

package/src/groups/components/GroupLoader.js

@@ -1,59 +1,27 @@
-import React from "react";
-import { withRouter } from "react-router-dom";
-import PropTypes from "prop-types";
-import { compose } from "redux";
-import { connect } from "react-redux";
+import { useEffect } from "react";
+import { useParams } from "react-router";
+import { useDispatch, useSelector } from "react-redux";
 import { Loading } from "@truedat/core/components";
 import { clearGroup, fetchGroup } from "../routines";
 
-class GroupLoader extends React.Component {
-  static propTypes = {
-    fetchGroup: PropTypes.func.isRequired,
-    clearGroup: PropTypes.func.isRequired,
-    match: PropTypes.object.isRequired,
-    groupLoading: PropTypes.bool.isRequired,
-  };
+const GroupLoader = () => {
+  const dispatch = useDispatch();
+  const groupLoading = useSelector((state) => state.groupLoading);
+  const { id } = useParams();
 
-  componentDidMount() {
-    const { clearGroup, fetchGroup, match } = this.props;
-    if (match) {
-      const { id } = match.params;
-      if (id) {
-        fetchGroup({ id });
-      } else {
-        clearGroup();
-      }
+  useEffect(() => {
+    if (id) {
+      dispatch(fetchGroup({ id }));
+    } else {
+      dispatch(clearGroup());
     }
-  }
 
-  componentDidUpdate(prevProps) {
-    const { clearGroup, fetchGroup, match } = this.props;
-    if (match) {
-      const { id } = match.params;
-      if (prevProps.match.params.id !== id) {
-        if (id) {
-          fetchGroup({ id });
-        } else {
-          clearGroup();
-        }
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    const { clearGroup } = this.props;
-    clearGroup();
-  }
-
-  render() {
-    const { groupLoading } = this.props;
-    return groupLoading ? <Loading /> : null;
-  }
-}
+    return () => {
+      dispatch(clearGroup());
+    };
+  }, [dispatch, id]);
 
-const mapStateToProps = ({ groupLoading }) => ({ groupLoading });
+  return groupLoading ? <Loading /> : null;
+};
 
-export default compose(
-  withRouter,
-  connect(mapStateToProps, { clearGroup, fetchGroup })
-)(GroupLoader);
+export default GroupLoader;

package/src/groups/components/GroupUsers.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { connect } from "react-redux";
 import { Segment, Button, Divider } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -12,6 +12,7 @@ import GroupUsersTable from "./GroupUsersTable";
 export const GroupUsers = ({ group, groupLoading }) => {
   const [filter, setFilter] = useState("");
   const { formatMessage } = useIntl();
+
   return groupLoading || _.isEmpty(group) ? null : (
     <Segment attached="bottom">
       <Button
@@ -34,7 +35,7 @@ export const GroupUsers = ({ group, groupLoading }) => {
 
 GroupUsers.propTypes = {
   group: PropTypes.object,
-  groupLoading: PropTypes.bool
+  groupLoading: PropTypes.bool,
 };
 
 const mapStateToProps = ({ group, groupLoading }) => ({ group, groupLoading });

package/src/groups/components/GroupUsersTable.js

@@ -1,9 +1,9 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { Table, Header, Icon, Button } from "semantic-ui-react";
 import { ConfirmModal } from "@truedat/core/components";
 import { linkTo } from "@truedat/core/routes";
@@ -32,7 +32,7 @@ export const GroupUsersTable = ({
   deleteGroupUser,
   group,
 }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const [sortBy, setSortBy] = useState("full_name");
   const [ascending, setAscending] = useState(true);
   const { formatMessage } = useIntl();
@@ -83,7 +83,7 @@ export const GroupUsersTable = ({
             {columns.map((column, i) =>
               column.name == "full_name" ? (
                 <Table.Cell
-                  onClick={() => history.push(linkTo.USER({ id: user.id }))}
+                  onClick={() => navigate(linkTo.USER({ id: user.id }))}
                   width={_.prop("width")(column)}
                   key={i}
                   textAlign={column.textAlign}

package/src/groups/components/GroupsLoader.js

@@ -1,10 +1,10 @@
-import React from "react";
+import { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Loading } from "@truedat/core/components";
 import { fetchGroups } from "../routines";
 
-class GroupsLoader extends React.Component {
+class GroupsLoader extends Component {
   static propTypes = {
     fetchGroups: PropTypes.func,
     groupsLoading: PropTypes.bool,

package/src/groups/components/GroupsSearchLoader.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Dimmer, Loader } from "semantic-ui-react";

package/src/groups/components/NewGroup.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Header, Icon, Container, Segment } from "semantic-ui-react";
 import { connect } from "react-redux";

package/src/groups/components/__tests__/Group.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import Group from "../Group";
 

package/src/groups/components/__tests__/GroupCard.spec.js

@@ -1,18 +1,34 @@
-import React from "react";
-import { shallow } from "enzyme";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import { GroupCard } from "../GroupCard";
 
 describe("<GroupCard />", () => {
   const deleteGroup = jest.fn();
   const group = {
-    id: 1,
+    id: "1",
     name: "administrators",
-    description: "Administrators"
+    description: "Administrators",
   };
   const props = { group, deleteGroup };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<GroupCard {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<GroupCard {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("calls deleteGroup when delete button is clicked", async () => {
+    const rendered = render(<GroupCard {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(rendered.getByRole("button", { name: /delete/i }));
+
+    await user.click(
+      rendered.getByRole("button", { name: /modal-affirmative-action/i })
+    );
+
+    expect(deleteGroup).toHaveBeenCalledTimes(1);
   });
 });

package/src/groups/components/__tests__/GroupCards.spec.js

@@ -1,14 +1,17 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { GroupCards } from "../GroupCards";
 
 describe("<GroupCards />", () => {
   const deleteGroup = jest.fn();
-  const groups = [{ id: 1 }, { id: 2 }];
+  const groups = [
+    { id: "1", name: "administrators", description: "Administrators" },
+    { id: "2", name: "users", description: "Regular users" },
+  ];
   const props = { groups, deleteGroup };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<GroupCards {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<GroupCards {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/groups/components/__tests__/GroupLoader.spec.js

@@ -0,0 +1,71 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import { useParams } from "react-router";
+import { clearGroup, fetchGroup } from "../../routines";
+import GroupLoader from "../GroupLoader";
+
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useParams: jest.fn(),
+}));
+
+describe("GroupLoader", () => {
+  const renderOpts = {
+    dispatch: jest.fn(),
+    state: {
+      groupLoading: false,
+    },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useParams.mockReturnValue({});
+  });
+
+  it("renders nothing when not loading", async () => {
+    const rendered = render(<GroupLoader />, renderOpts);
+    await waitForLoad(rendered);
+
+    expect(rendered.container).toMatchSnapshot();
+    expect(rendered.queryByTestId("loading")).not.toBeInTheDocument();
+  });
+
+  it("renders loading component when loading", async () => {
+    const loadingRenderOpts = {
+      ...renderOpts,
+      state: {
+        groupLoading: true,
+      },
+    };
+
+    const rendered = render(<GroupLoader />, loadingRenderOpts);
+
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("dispatches fetchGroup when id is present", async () => {
+    useParams.mockReturnValue({ id: "123" });
+
+    const rendered = render(<GroupLoader />, renderOpts);
+    await waitForLoad(rendered);
+
+    expect(renderOpts.dispatch).toHaveBeenCalledWith(fetchGroup({ id: "123" }));
+  });
+
+  it("dispatches clearGroup when id is not present", async () => {
+    useParams.mockReturnValue({});
+
+    const rendered = render(<GroupLoader />, renderOpts);
+    await waitForLoad(rendered);
+
+    expect(renderOpts.dispatch).toHaveBeenCalledWith(clearGroup());
+  });
+
+  it("dispatches clearGroup on unmount", async () => {
+    const rendered = render(<GroupLoader />, renderOpts);
+    await waitForLoad(rendered);
+
+    rendered.unmount();
+
+    expect(renderOpts.dispatch).toHaveBeenCalledWith(clearGroup());
+  });
+});

package/src/groups/components/__tests__/GroupUsers.spec.js

@@ -1,17 +1,13 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import { GroupUsers } from "../GroupUsers";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<GroupUsers />", () => {
-  it("matches the latest snapshot", () => {
-    const group = { id: 2, name: "grupo1 ", description: "aaa bbb cc" };
-    const props = { group };
-    const wrapper = shallow(<GroupUsers {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  const group = { id: "2", name: "grupo1", description: "aaa bbb cc" };
+  const props = { group };
+
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<GroupUsers {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/groups/components/__tests__/GroupUsersTable.spec.js

@@ -1,21 +1,12 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import { GroupUsersTable } from "../GroupUsersTable";
 
-const mockHistory = {
-  push: jest.fn()
-};
-
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useHistory: () => mockHistory
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useNavigate: () => jest.fn(),
 }));
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<GroupUsersTable />", () => {
   const group = { id: 2, name: "grupo1 ", description: "aaa bbb cc" };
   const groupUsers = [
@@ -23,50 +14,51 @@ describe("<GroupUsersTable />", () => {
       id: 9,
       full_name: "user 1",
       email: "test1@test.com",
-      user_name: "user 1"
+      user_name: "user 1",
     },
     {
       id: 3,
       full_name: "user 2",
       email: "test2@test.com",
-      user_name: "user 2"
+      user_name: "user 2",
     },
     {
       id: 4,
       full_name: "a user 3",
       email: "test3@test.com",
-      user_name: "auser_3"
-    }
+      user_name: "auser_3",
+    },
   ];
+  const props = { group, groupUsers };
 
-  it("matches the latest snapshot", () => {
-    const props = { group, groupUsers };
-    const wrapper = shallow(<GroupUsersTable {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<GroupUsersTable {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("filters users according to search filter", () => {
+  it("filters users according to search filter", async () => {
     const filter = "1";
-    const props = { filter, group, groupUsers };
-    const wrapper = shallow(<GroupUsersTable {...props} />);
-    expect(wrapper.find("TableBody").find("TableRow").length).toBe(1);
+    const rendered = render(<GroupUsersTable {...props} filter={filter} />);
+    await waitForLoad(rendered);
+
+    // Only one row should be visible with filter "1"
+    const rows = rendered.container.querySelectorAll("tbody tr");
+    expect(rows.length).toBe(1);
   });
 
-  it("sorts users according to sortcolumn", () => {
-    const props = { group, groupUsers };
-    const wrapper = shallow(<GroupUsersTable {...props} />);
-    wrapper
-      .find("TableHeaderCell")
-      .at(1)
-      .prop("onClick")();
-    expect(
-      wrapper
-        .find("TableBody")
-        .find("TableRow")
-        .at(0)
-        .find("TableCell")
-        .at(1)
-        .props().content
-    ).toEqual("auser_3");
+  it("sorts users when column header is clicked", async () => {
+    const rendered = render(<GroupUsersTable {...props} />);
+    await waitForLoad(rendered);
+
+    // Click on the username column header to sort
+    const usernameHeader = rendered.getByText(/user_name/i);
+    userEvent.click(usernameHeader);
+
+    // First row should now contain "auser_3" after sorting
+    const firstRowCells = rendered.container.querySelectorAll(
+      "tbody tr:first-child td"
+    );
+    expect(firstRowCells[1].textContent).toContain("auser_3");
   });
 });