@truedat/auth 7.5.7 → 7.5.10

package/src/users/components/NewUser.js

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

package/src/users/components/Password.js

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

package/src/users/components/User.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Divider, Header, Grid, Icon, Segment } from "semantic-ui-react";
 import { connect } from "react-redux";
@@ -41,7 +40,8 @@ export const User = ({ user }) => {
               user.external_id
             ) : (
               <>
-                {user.external_id} <br />
+                {user.external_id}
+                <br />
               </>
             )}
             {user.full_name}

package/src/users/components/UserAclRow.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Table } from "semantic-ui-react";
 
@@ -11,7 +10,7 @@ export const UserAclRow = ({ resource, role }) => (
 
 UserAclRow.propTypes = {
   resource: PropTypes.string,
-  role: PropTypes.string
+  role: PropTypes.string,
 };
 
 export default UserAclRow;

package/src/users/components/UserAcls.js

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

package/src/users/components/UserActions.js

@@ -1,6 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import { Button, Icon } from "semantic-ui-react";

package/src/users/components/UserBreadcrumbs.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 { USERS } from "@truedat/core/routes";
 
@@ -16,7 +15,7 @@ export const UserBreadcrumbs = ({ name }) => (
 );
 
 UserBreadcrumbs.propTypes = {
-  name: PropTypes.string
+  name: PropTypes.string,
 };
 
 export default UserBreadcrumbs;

package/src/users/components/UserCard.js

@@ -1,8 +1,7 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Icon, Card } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { linkTo } from "@truedat/core/routes";
 import { deleteUser } from "../routines";
 
@@ -13,7 +12,8 @@ export const UserCard = ({
   <Card key={id}>
     <Card.Content>
       <Card.Header as={Link} to={linkTo.USER({ id })}>
-        <Icon name="user" /> {user_name}
+        <Icon name="user" />
+        {user_name}
       </Card.Header>
       <Card.Description>
         {showFullName ? full_name : external_id}

package/src/users/components/UserCards.js

@@ -1,8 +1,8 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { Fragment, useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Button, Card, Header, Icon, Message } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { SearchInput } from "@truedat/core/components";
@@ -19,6 +19,7 @@ export const UserCards = ({ users: allUsers, showFullName }) => {
     _.groupBy("role"),
     _.toPairs
   )(users);
+
   return (
     <>
       <SearchInput
@@ -35,7 +36,7 @@ export const UserCards = ({ users: allUsers, showFullName }) => {
         to={USERS_NEW}
       />
       {usersByRole.map(([role, users]) => (
-        <React.Fragment key={role}>
+        <Fragment key={role}>
           <Header
             as="h3"
             dividing
@@ -46,7 +47,7 @@ export const UserCards = ({ users: allUsers, showFullName }) => {
               <UserCard key={i} user={user} showFullname={showFullName} />
             ))}
           </Card.Group>
-        </React.Fragment>
+        </Fragment>
       ))}
       {_.trim(filter) !== "" && _.isEmpty(users) ? (
         <Message

package/src/users/components/UserDomainsFilter.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
 import { Form } from "semantic-ui-react";
 import { setDashboardDomains } from "@truedat/core/routines";
@@ -45,10 +45,7 @@ export const UserDomainsFilter = ({
             disabled={domainIds === "loading"}
             onClick={onClick}
           >
-            {formatMessage({
-              id: "userDomainsFilter.button",
-              defaultMessage: "Apply filters",
-            })}
+            {formatMessage({ id: "userDomainsFilter.button" })}
           </Form.Button>
         </Form.Field>
       </Form.Group>

package/src/users/components/UserForm.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { useForm, useWatch, Controller } from "react-hook-form";
@@ -9,6 +8,7 @@ import isEmail from "validator/lib/isEmail";
 import { HistoryBackButton } from "@truedat/core/components";
 
 const toOption = (g, i) => ({ key: i, text: g, value: g });
+
 const groupOptions = (groups, values) =>
   _.flow(
     _.concat(""),
@@ -20,27 +20,16 @@ const groupOptions = (groups, values) =>
   )(groups);
 
 const userTypeOptions = (formatMessage) => [
-  {
-    text: formatMessage({ id: "user.type.user" }),
-    value: "user",
-  },
-  {
-    text: formatMessage({ id: "user.type.admin" }),
-    value: "admin",
-  },
-  {
-    text: formatMessage({ id: "user.type.service" }),
-    value: "service",
-  },
-  {
-    text: formatMessage({ id: "user.type.agent" }),
-    value: "agent",
-  },
+  { text: formatMessage({ id: "user.type.user" }), value: "user" },
+  { text: formatMessage({ id: "user.type.admin" }), value: "admin" },
+  { text: formatMessage({ id: "user.type.service" }), value: "service" },
+  { text: formatMessage({ id: "user.type.agent" }), value: "agent" },
 ];
 
 export const PasswordFormFields = ({ control, errors }) => {
   const { formatMessage } = useIntl();
   const password = useWatch({ control, name: "password", defaultValue: "" });
+
   return (
     <>
       <Controller
@@ -55,10 +44,7 @@ export const PasswordFormFields = ({ control, errors }) => {
             value: 6,
             message: formatMessage(
               { id: "form.validation.minLength" },
-              {
-                prop: formatMessage({ id: "user.form.password" }),
-                value: 6,
-              }
+              { prop: formatMessage({ id: "user.form.password" }), value: 6 }
             ),
           },
         }}
@@ -130,22 +116,11 @@ export const UserForm = ({ isSubmitting, onSubmit, user, groups }) => {
       rep_password: "",
       ...user,
     },
-    /*
-     * Remove PasswordFormFields' inputs (password, rep_password) if it is not
-     * mounted (user update). Keep them if it is mounted (user creation).
-     * Otherwise, td-auth returns forbidden because password updates are handled
-     * in the Password form, using /api/password, not in this UserForm that
-     * PUTs to /api/users/<user_id>
-     * https://stackoverflow.com/q/70105636
-     * This was not needed in v6, but it is in v7:
-     * https://react-hook-form.com/migrate-v6-to-v7/
-     *   Important: input value and reference will no longer get removed after
-     *   unmount unless shouldUnregister is true.
-     */
     shouldUnregister: true,
   });
 
   const { errors, isDirty, isValid } = formState;
+
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
       <Controller

package/src/users/components/UserGroupAclRow.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Table } from "semantic-ui-react";
 
@@ -13,7 +12,7 @@ export const UserGroupAclRow = ({ resource, role, group }) => (
 UserGroupAclRow.propTypes = {
   resource: PropTypes.string,
   role: PropTypes.string,
-  group: PropTypes.string
+  group: PropTypes.string,
 };
 
 export default UserGroupAclRow;

package/src/users/components/UserGroupAcls.js

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

package/src/users/components/UserLoader.js

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

package/src/users/components/UserPassword.js

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

package/src/users/components/UserRoutes.js

@@ -1,14 +1,80 @@
-import React from "react";
-import { Route } from "react-router-dom";
-import { PASSWORD } from "@truedat/core/routes";
-import AdminUserRoutes from "./AdminUserRoutes";
+import { Routes, Route } from "react-router";
+import { ProtectedRoute, Loader } from "@truedat/core/router";
+import { Divider, Segment } from "semantic-ui-react";
 import Password from "./Password";
 
-export const UserRoutes = () => (
+import GroupsLoader from "../../groups/components/GroupsLoader";
+import GroupLoader from "../../groups/components/GroupLoader";
+import Group from "../../groups/components/Group";
+import GroupUsers from "../../groups/components/GroupUsers";
+import NewGroup from "../../groups/components/NewGroup";
+import EditGroup from "../../groups/components/EditGroup";
+import EditUser from "./EditUser";
+import GroupUserCrumbs from "./GroupUserCrumbs";
+import NewUser from "./NewUser";
+import User from "./User";
+import UserLoader from "./UserLoader";
+import UsersAndGroups from "./UsersAndGroups";
+import UsersLoader from "./UsersLoader";
+import UserPassword from "./UserPassword";
+
+const UsersGroupsLoader = () => (
   <>
-    <AdminUserRoutes />
-    <Route path={PASSWORD} component={Password} />
+    <UsersLoader />
+    <GroupsLoader />
   </>
 );
 
+export const UserRoutes = () => (
+  <Routes>
+    <Route
+      path={"users"}
+      element={
+        <ProtectedRoute>
+          <Loader loaders={<UsersGroupsLoader />} />
+        </ProtectedRoute>
+      }
+    >
+      <Route index element={<UsersAndGroups />} />
+      <Route path={"new"} element={<NewUser />} />
+
+      <Route path={":id"} element={<Loader loaders={<UserLoader />} />}>
+        <Route index element={<User />} />
+        <Route path={"edit"} element={<EditUser />} />
+        <Route path={"password"} element={<UserPassword />} />
+      </Route>
+    </Route>
+    <Route
+      path={"groups"}
+      element={
+        <ProtectedRoute>
+          <Loader loaders={<UsersGroupsLoader />} />
+        </ProtectedRoute>
+      }
+    >
+      <Route index element={<UsersAndGroups />} />
+      <Route path={"new"} element={<NewGroup />} />
+
+      <Route path={":id"} element={<Loader loaders={<GroupLoader />} />}>
+        <Route
+          index
+          element={
+            <>
+              <GroupUserCrumbs action="show" />
+              <Segment>
+                <Group />
+                <Divider />
+                <GroupUsers />
+              </Segment>
+            </>
+          }
+        />
+        <Route path={"edit"} element={<EditGroup />} />
+      </Route>
+    </Route>
+    <Route path={"password"} element={<Password />} />
+    <Route path="*" element={null} />
+  </Routes>
+);
+
 export default UserRoutes;

package/src/users/components/UserSelector.js

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

package/src/users/components/UserTabs.js

@@ -1,5 +1,4 @@
-import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { Menu } from "semantic-ui-react";
 import { usePath } from "@truedat/core/hooks";

package/src/users/components/UsersAndGroups.js

@@ -1,8 +1,8 @@
-import React from "react";
 import { connect } from "react-redux";
-import { Route, Switch } from "react-router-dom";
+import { Route, Routes } from "react-router";
 import { Header, Icon, Segment } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
+import { usePath } from "@truedat/core/hooks";
 import { GROUPS, USERS } from "@truedat/core/routes";
 import GroupCards from "../../groups/components/GroupCards";
 import UserCards from "./UserCards";
@@ -10,6 +10,8 @@ import UserTabs from "./UserTabs";
 
 export const UsersAndGroups = () => {
   const { formatMessage } = useIntl();
+  const path = usePath();
+
   return (
     <Segment>
       <Header as="h2">
@@ -29,10 +31,8 @@ export const UsersAndGroups = () => {
       </Header>
       <UserTabs />
       <Segment attached="bottom">
-        <Switch>
-          <Route path={USERS} render={() => <UserCards />} exact />
-          <Route path={GROUPS} render={() => <GroupCards />} exact />
-        </Switch>
+        {path === USERS && <UserCards />}
+        {path === GROUPS && <GroupCards />}
       </Segment>
     </Segment>
   );

package/src/users/components/UsersLoader.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 { fetchUsers } from "../routines";
 
-class UsersLoader extends React.Component {
+class UsersLoader extends Component {
   static propTypes = {
     fetchUsers: PropTypes.func,
     usersLoading: PropTypes.bool,

package/src/users/components/UsersSearchLoader.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-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";
@@ -28,6 +28,7 @@ export const UsersSearchLoader = ({
       clearUsersSearch();
     };
   }, [searchUsers, clearUsersSearch, query, domains, roles, permission]);
+
   return loading && !hideLoading ? (
     <Dimmer active inverted>
       <Loader size="massive" inverted />

package/src/users/components/__tests__/CanInitLoader.spec.js

@@ -1,21 +1,14 @@
-import React from "react";
-import { shallow, mount } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { CanInitLoader } from "../CanInitLoader";
 
 describe("<CanInitLoader />", () => {
-  const fetchCanInit = jest.fn();
-
-  it("matches the latest snapshot", () => {
+  it("triggers fetchCanInit on mount", async () => {
+    const fetchCanInit = jest.fn();
     const props = { fetchCanInit };
-    const wrapper = shallow(<CanInitLoader {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
 
-  it("calls fetchCanInit when component mounts", () => {
-    const fetchCanInit = jest.fn();
+    const rendered = render(<CanInitLoader {...props} />);
+    await waitForLoad(rendered);
 
-    const props = { fetchCanInit };
-    mount(<CanInitLoader {...props} />);
-    expect(fetchCanInit.mock.calls.length).toBe(1);
+    expect(fetchCanInit).toHaveBeenCalledTimes(1);
   });
 });

package/src/users/components/__tests__/EditUser.spec.js

@@ -1,37 +1,7 @@
-import React from "react";
-import { waitFor } from "@testing-library/react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import EditUser from "../EditUser";
 
 const renderOpts = {
-  messages: {
-    en: {
-      "actions.cancel": "cancel",
-      "actions.save": "save",
-      "form.validation.minLength": "{prop} min length {value}",
-      "form.validation.required": "{prop} required",
-      "navigation.members.users": "Users",
-      "user.form.email": "Email address",
-      "user.form.external_id": "External ID",
-      "user.form.full_name": "Full name",
-      "user.form.groups": "Groups",
-      "user.form.password": "password",
-      "user.form.user_name": "Username",
-      "user.form.password_confirmation": "confirm",
-      "user.form.placeholder.email": "pperez@example.com",
-      "user.form.placeholder.external_id": "pperez",
-      "user.form.placeholder.full_name": "Pepe Perez",
-      "user.form.placeholder.user_name": "pperez",
-      "user.form.placeholder.groups": "Madrid DG",
-      "user.form.role": "role",
-      "user.type.admin": "admin",
-      "user.type.service": "service",
-      "user.type.user": "user",
-      "user.type.agent": "Ai Agent",
-      "users.actions.create": "create",
-      "users.actions.edit": "edit",
-    },
-  },
   state: {
     user: { id: 123, user_name: "fred", full_name: "fredrik foobar" },
   },
@@ -39,7 +9,8 @@ const renderOpts = {
 
 describe("<EditUser />", () => {
   it("matches the latest snapshot", async () => {
-    const { container } = render(<EditUser />, renderOpts);
-    await waitFor(() => expect(container).toMatchSnapshot());
+    const rendered = render(<EditUser />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/users/components/__tests__/InitialUser.spec.js

@@ -1,40 +1,10 @@
-import React from "react";
-import { waitFor } from "@testing-library/react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import InitialUser from "../InitialUser";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "actions.cancel": "cancel",
-      "actions.save": "save",
-      "form.validation.minLength": "{prop} min length {value}",
-      "form.validation.required": "{prop} required",
-      "users.actions.create_admin_account": "Configure Admin Account",
-      "user.form.email": "Email address",
-      "user.form.external_id": "External ID",
-      "user.form.full_name": "Full name",
-      "user.form.groups": "Groups",
-      "user.form.password": "password",
-      "user.form.user_name": "Username",
-      "user.form.password_confirmation": "confirm",
-      "user.form.placeholder.email": "pperez@example.com",
-      "user.form.placeholder.external_id": "pperez",
-      "user.form.placeholder.full_name": "Pepe Perez",
-      "user.form.placeholder.user_name": "pperez",
-      "user.form.placeholder.groups": "Madrid DG",
-      "user.form.role": "role",
-      "user.type.admin": "admin",
-      "user.type.service": "service",
-      "user.type.user": "user",
-      "user.type.agent": "Ai Agent",
-    },
-  },
-};
-
 describe("<InitialUser />", () => {
   it("matches the latest snapshot", async () => {
-    const { container } = render(<InitialUser />, renderOpts);
-    await waitFor(() => expect(container).toMatchSnapshot());
+    const rendered = render(<InitialUser />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });