@truedat/auth 8.14.2 → 8.14.4

package/src/users/components/__tests__/__snapshots__/UserRoutes.spec.js.snap

@@ -71,10 +71,7 @@ exports[`<UserRoutes /> renders correctly with users/:id route 1`] = `
     UsersLoader
   </div>
   <div>
-    UserLoader
-  </div>
-  <div>
-    User
+    UsersAndGroups
   </div>
 </div>
 `;
@@ -85,10 +82,7 @@ exports[`<UserRoutes /> renders correctly with users/:id/edit route 1`] = `
     UsersLoader
   </div>
   <div>
-    UserLoader
-  </div>
-  <div>
-    EditUser
+    UsersAndGroups
   </div>
 </div>
 `;
@@ -99,10 +93,7 @@ exports[`<UserRoutes /> renders correctly with users/:id/password route 1`] = `
     UsersLoader
   </div>
   <div>
-    UserLoader
-  </div>
-  <div>
-    UserPassword
+    UsersAndGroups
   </div>
 </div>
 `;
@@ -113,7 +104,7 @@ exports[`<UserRoutes /> renders correctly with users/new route 1`] = `
     UsersLoader
   </div>
   <div>
-    NewUser
+    UsersAndGroups
   </div>
 </div>
 `;

package/src/users/hooks/useSortedGroups.js

@@ -0,0 +1,13 @@
+import _ from "lodash/fp";
+import { useMemo } from "react";
+import { useGroups } from "../../groups/hooks/useGroups";
+
+const caseInsensitiveName = ({ name }) => _.lowerCase(name);
+
+// Group options for the user forms, sorted as the former Redux `groups` state was.
+export const useSortedGroups = () => {
+  const { groups } = useGroups();
+  return useMemo(() => _.sortBy(caseInsensitiveName)(groups), [groups]);
+};
+
+export default useSortedGroups;

package/src/users/hooks/useUserModalOperation.js

@@ -0,0 +1,55 @@
+import { useEffect, useId, useRef } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useIntl } from "react-intl";
+import { clearUserModalOperation } from "../reducers/userModalOperation";
+
+export default function useUserModalOperation(
+  routine,
+  onClose,
+  onSuccess = onClose,
+) {
+  const id = useId();
+  const dispatch = useDispatch();
+  const { formatMessage } = useIntl();
+  const request = useRef(0);
+  const pending = useRef(false);
+  const operation = useSelector((state) => state.userModalOperation?.[id]);
+  const isSubmitting = operation?.status === "pending";
+
+  useEffect(() => () => dispatch(clearUserModalOperation(id)), [dispatch, id]);
+
+  useEffect(() => {
+    if (operation?.requestId !== request.current || !pending.current) return;
+    if (operation.status === "error") pending.current = false;
+    if (operation.status === "success") {
+      pending.current = false;
+      onSuccess();
+    }
+  }, [operation, onSuccess]);
+
+  const submit = (payload) => {
+    if (pending.current) return;
+    pending.current = true;
+    request.current += 1;
+    dispatch({
+      ...routine(payload),
+      meta: { userModalId: id, requestId: request.current },
+    });
+  };
+
+  return {
+    submit,
+    isSubmitting,
+    onClose: () => {
+      if (!pending.current) onClose();
+    },
+    error:
+      operation?.status === "error"
+        ? formatMessage({
+            id: "user.modal.operation.error",
+            defaultMessage:
+              "The operation could not be completed. Please try again.",
+          })
+        : null,
+  };
+}

package/src/users/reducers/__tests__/userRedirect.spec.js

@@ -1,4 +1,3 @@
-import { linkTo } from "@truedat/core/routes";
 import { clearRedirect } from "@truedat/core/routines";
 import { createUser, deleteUser, updateUser } from "../../routines";
 import { userRedirect } from "..";
@@ -27,12 +26,24 @@ describe("reducers: userRedirect", () => {
 
   it("should handle the updateUser.SUCCESS action", () => {
     const payload = { data: { id: "1" } };
-    const url = linkTo.USER({ id: "1" });
     expect(userRedirect("foo", { type: updateUser.SUCCESS, payload })).toBe(
-      url,
+      "/users/1",
     );
   });
 
+  it.each([createUser.SUCCESS, updateUser.SUCCESS])(
+    "preserves the redirect for modal operation %s",
+    (type) => {
+      expect(
+        userRedirect("foo", {
+          type,
+          payload: { data: { id: "1" } },
+          meta: { userModalId: "modal", requestId: 1 },
+        }),
+      ).toBe("foo");
+    },
+  );
+
   it("should ignore unknown actions", () => {
     expect(userRedirect("foo", { type: "bar", payload })).toEqual("foo");
   });

package/src/users/reducers/index.js

@@ -3,3 +3,4 @@ export * from "./users";
 export * from "./usersSearch";
 export * from "./userRedirect";
 export * from "./canInit";
+export { userModalOperation } from "./userModalOperation";

package/src/users/reducers/userModalOperation.js

@@ -0,0 +1,29 @@
+import _ from "lodash/fp";
+import {
+  createUser,
+  updateUser,
+  updatePassword,
+  deleteUser,
+} from "../routines";
+
+export const clearUserModalOperation = (id) => ({
+  type: "CLEAR_USER_MODAL_OPERATION",
+  payload: id,
+});
+
+export const userModalOperation = (state = {}, { type, meta, payload }) => {
+  if (type === "CLEAR_USER_MODAL_OPERATION") return _.omit([payload])(state);
+  if (!meta?.userModalId) return state;
+  const { userModalId, requestId } = meta;
+  const routines = [createUser, updateUser, updatePassword, deleteUser];
+  if (routines.some((routine) => routine.TRIGGER === type)) {
+    return { ...state, [userModalId]: { requestId, status: "pending" } };
+  }
+  if (state[userModalId]?.requestId !== requestId) return state;
+  const status = routines.some((routine) => routine.SUCCESS === type)
+    ? "success"
+    : routines.some((routine) => routine.FAILURE === type)
+      ? "error"
+      : null;
+  return status ? { ...state, [userModalId]: { requestId, status } } : state;
+};

package/src/users/reducers/userRedirect.js

@@ -5,15 +5,16 @@ import { createUser, deleteUser, updateUser } from "../routines";
 
 const initialState = "";
 
-export const userRedirect = (state = initialState, { type, payload }) => {
+export const userRedirect = (state = initialState, { type, payload, meta }) => {
   switch (type) {
     case clearRedirect.TRIGGER:
       return initialState;
     case createUser.SUCCESS:
-      return USERS;
+      return meta?.userModalId ? state : USERS;
     case updateUser.SUCCESS:
-      const data = _.get("data")(payload);
-      return linkTo.USER({ ...data });
+      return meta?.userModalId
+        ? state
+        : linkTo.USER({ ..._.get("data")(payload) });
     case deleteUser.SUCCESS:
       return state;
     default:

package/src/users/sagas/__tests__/updateUser.spec.js

@@ -7,7 +7,7 @@ import {
   updatePasswordSaga,
 } from "../updateUser";
 import { updateUser, updatePassword } from "../../routines";
-import { API_USER } from "../../api";
+import { API_USER, API_USER_CHANGE_PASSWORD } from "../../api";
 
 describe("sagas: updateUserRequestSaga", () => {
   it("should invoke updateUserSaga on updateUser.TRIGGER", () => {
@@ -94,3 +94,21 @@ describe("sagas: updateUserSaga", () => {
     }).not.toThrow();
   });
 });
+
+it("changes the current password without requesting the administrative user list", () => {
+  const payload = {
+    user: { old_password: "old-example", new_password: "new-example" },
+  };
+  const meta = { userModalId: "self-password", requestId: 1 };
+  testSaga(updatePasswordSaga, { payload, meta })
+    .next()
+    .put(updatePassword.request())
+    .next()
+    .call(apiJsonPut, API_USER_CHANGE_PASSWORD, payload, JSON_OPTS)
+    .next({ data: {} })
+    .put({ ...updatePassword.success({}), meta })
+    .next()
+    .put(updatePassword.fulfill())
+    .next()
+    .isDone();
+});

package/src/users/sagas/createUser.js

@@ -1,21 +1,28 @@
 import { call, put, takeLatest } from "redux-saga/effects";
 import { apiJsonPost, JSON_OPTS } from "@truedat/core/services/api";
-import { createUser } from "../routines";
+import { createUser, fetchUsers } from "../routines";
 import { API_USERS } from "../api";
 
-export function* createUserSaga({ payload: user }) {
+export function* createUserSaga({ payload: user, meta }) {
   try {
     const url = API_USERS;
     const requestData = { user };
     yield put(createUser.request());
     const { data } = yield call(apiJsonPost, url, requestData, JSON_OPTS);
-    yield put(createUser.success(data));
+    yield put({ ...createUser.success(data), ...(meta ? { meta } : {}) });
+    if (meta?.userModalId) yield put(fetchUsers());
   } catch (error) {
     if (error.response) {
       const { status, data } = error.response;
-      yield put(createUser.failure({ status, data }));
+      yield put({
+        ...createUser.failure({ status, data }),
+        ...(meta ? { meta } : {}),
+      });
     } else {
-      yield put(createUser.failure(error.message));
+      yield put({
+        ...createUser.failure(error.message),
+        ...(meta ? { meta } : {}),
+      });
     }
   } finally {
     yield put(createUser.fulfill());

package/src/users/sagas/deleteUser.js

@@ -1,24 +1,31 @@
 import { compile } from "path-to-regexp";
 import { call, put, takeLatest } from "redux-saga/effects";
 import { apiJsonDelete, JSON_OPTS } from "@truedat/core/services/api";
-import { deleteUser } from "../routines";
+import { deleteUser, fetchUsers } from "../routines";
 import { API_USER } from "../api";
 
 const toApiPath = compile(API_USER);
 
-export function* deleteUserSaga({ payload }) {
+export function* deleteUserSaga({ payload, meta }) {
   try {
     const user = payload;
     const url = toApiPath({ id: `${user.id}` });
     yield put(deleteUser.request());
     const { data } = yield call(apiJsonDelete, url, JSON_OPTS);
-    yield put(deleteUser.success(data));
+    yield put({ ...deleteUser.success(data), ...(meta ? { meta } : {}) });
+    if (meta?.userModalId) yield put(fetchUsers());
   } catch (error) {
     if (error.response) {
       const { status, data } = error.response;
-      yield put(deleteUser.failure({ status, data }));
+      yield put({
+        ...deleteUser.failure({ status, data }),
+        ...(meta ? { meta } : {}),
+      });
     } else {
-      yield put(deleteUser.failure(error.message));
+      yield put({
+        ...deleteUser.failure(error.message),
+        ...(meta ? { meta } : {}),
+      });
     }
   } finally {
     yield put(deleteUser.fulfill());

package/src/users/sagas/updateUser.js

@@ -1,36 +1,47 @@
 import { compile } from "path-to-regexp";
 import { all, call, put, takeLatest } from "redux-saga/effects";
 import { apiJsonPut, JSON_OPTS } from "@truedat/core/services/api";
-import { updateUser, updatePassword } from "../routines";
+import { updateUser, updatePassword, fetchUsers } from "../routines";
 import { API_USER, API_USER_CHANGE_PASSWORD } from "../api";
 
-export function* updateUserSaga({ payload: user }) {
+export function* updateUserSaga({ payload: user, meta }) {
   try {
     const url = compile(API_USER)({ id: `${user.id}` });
     const requestData = { user };
     yield put(updateUser.request());
     const { data } = yield call(apiJsonPut, url, requestData, JSON_OPTS);
-    yield put(updateUser.success(data));
+    yield put({ ...updateUser.success(data), ...(meta ? { meta } : {}) });
+    if (meta?.userModalId) yield put(fetchUsers());
   } catch (error) {
     if (error.response) {
       const { status, data } = error.response;
-      yield put(updateUser.failure({ status, data }));
+      yield put({
+        ...updateUser.failure({ status, data }),
+        ...(meta ? { meta } : {}),
+      });
     } else {
-      yield put(updateUser.failure(error.message));
+      yield put({
+        ...updateUser.failure(error.message),
+        ...(meta ? { meta } : {}),
+      });
     }
   } finally {
     yield put(updateUser.fulfill());
   }
 }
 
-export function* updatePasswordSaga({ payload }) {
+export function* updatePasswordSaga({ payload, meta }) {
   try {
     const url = API_USER_CHANGE_PASSWORD;
     yield put(updatePassword.request());
     const { data } = yield call(apiJsonPut, url, payload, JSON_OPTS);
-    yield put(updatePassword.success(data));
+    yield put({ ...updatePassword.success(data), ...(meta ? { meta } : {}) });
+    if (meta?.userModalId && payload.user.id) yield put(fetchUsers());
   } catch (error) {
-    yield put(updatePassword.failure(error.message));
+    yield put({
+      ...updatePassword.failure(error.message),
+      ...(meta ? { meta } : {}),
+    });
   } finally {
     yield put(updatePassword.fulfill());
   }

package/src/users/selectors/__tests__/filterUsers.spec.js

@@ -42,3 +42,14 @@ describe("selectors: filterUsers", () => {
     expect(filteredUsers).toEqual(expect.arrayContaining([miguel]));
   });
 });
+
+it.each([" ext-1 ", "calidad", "data"])(
+  "searches external IDs and group names/aliases: %s",
+  (query) => {
+    const user = {
+      external_id: "EXT-1",
+      groups: [{ name: "data", alias: "Calidád" }],
+    };
+    expect(filterUsers(query)([user, { user_name: "other" }])).toEqual([user]);
+  },
+);

package/src/users/selectors/__tests__/getUserAcls.spec.js

@@ -30,6 +30,7 @@ describe("selectors: getUserGroupAcls", () => {
           resource: acl3.resource,
           role: acl3.role.name,
           group: acl3.group.name,
+          groupId: acl3.group.id,
         },
       ]),
     );

package/src/users/selectors/__tests__/getUserGroupAcls.spec.js

@@ -28,11 +28,13 @@ describe("selectors: getUserGroupAcls", () => {
         resource: aclWithAlias.resource,
         role: aclWithAlias.role.name,
         group: aclWithAlias.group.alias,
+        groupId: aclWithAlias.group.id,
       },
       {
         resource: aclWithoutAlias.resource,
         role: aclWithoutAlias.role.name,
         group: aclWithoutAlias.group.name,
+        groupId: aclWithoutAlias.group.id,
       },
     ]);
   });

package/src/users/selectors/filterUsers.js

@@ -5,7 +5,15 @@ export const filterUsers = (usersFilter) =>
   lowerDeburrTrim(usersFilter)
     ? _.filter(
         _.flow(
-          _.at(["user_name", "full_name", "email"]),
+          (user) => [
+            user.user_name,
+            user.full_name,
+            user.email,
+            user.external_id,
+            ...(user.groups || []).flatMap((group) =>
+              typeof group === "string" ? [group] : [group.name, group.alias],
+            ),
+          ],
           _.map(lowerDeburrTrim),
           _.some(_.includes(lowerDeburrTrim(usersFilter))),
         ),

package/src/users/selectors/getUserGroupAcls.js

@@ -8,6 +8,7 @@ const buildGroupAcl = (m) => ({
   resource: m.resource,
   role: m.role.name,
   group: m.group.alias || m.group.name,
+  groupId: m.group.id,
 });
 
 export const getUserGroupAcls = createSelector([getUser], (user) =>

package/src/users/components/User.js

@@ -1,68 +0,0 @@
-import _ from "lodash/fp";
-import PropTypes from "prop-types";
-import { Divider, Header, Grid, Icon, Segment } from "semantic-ui-react";
-import { connect } from "react-redux";
-import { FormattedMessage, useIntl } from "react-intl";
-import UserActions from "./UserActions";
-import UserAcls from "./UserAcls";
-import UserBreadcrumbs from "./UserBreadcrumbs";
-import UserGroupAcls from "./UserGroupAcls";
-
-export const User = ({ user }) => {
-  const { formatMessage } = useIntl();
-  return _.isEmpty(user) ? null : (
-    <>
-      <UserBreadcrumbs name={user.user_name} />
-      <Segment>
-        <Grid>
-          <Grid.Column width={8}>
-            <Header floated="left" as="h2">
-              <Icon
-                circular
-                name={formatMessage({
-                  id: "users.header.icon",
-                  defaultMessage: "users",
-                })}
-              />
-              <Header.Content>
-                {user.user_name}
-                <Header.Subheader>
-                  <FormattedMessage id={`user.type.${user?.role}`} />
-                </Header.Subheader>
-              </Header.Content>
-            </Header>
-          </Grid.Column>
-          <Grid.Column width={8} textAlign="right">
-            <UserActions />
-          </Grid.Column>
-          <Grid.Column width={8}>
-            {user.external_id == null ? (
-              user.external_id
-            ) : (
-              <>
-                {user.external_id}
-                <br />
-              </>
-            )}
-            {user.full_name}
-            <br />
-            {user.email}
-            <br />
-            {_.join(" ")(user.groups)}
-            <Divider hidden />
-            <UserAcls />
-            <UserGroupAcls />
-          </Grid.Column>
-        </Grid>
-      </Segment>
-    </>
-  );
-};
-
-User.propTypes = {
-  user: PropTypes.object,
-};
-
-const mapStateToProps = ({ user }) => ({ user });
-
-export default connect(mapStateToProps)(User);

package/src/users/components/UserPassword.js

@@ -1,24 +0,0 @@
-import _ from "lodash/fp";
-import { connect } from "react-redux";
-import PropTypes from "prop-types";
-import { useIntl } from "react-intl";
-import UserBreadcrumbs from "./UserBreadcrumbs";
-import Password from "./Password";
-
-export const UserPassword = ({ user }) => {
-  const { formatMessage } = useIntl();
-  return (
-    <>
-      <UserBreadcrumbs name={formatMessage({ id: "user.password.change" })} />
-      <Password id={_.get("id")(user)} userName={_.get("user_name")(user)} />
-    </>
-  );
-};
-
-UserPassword.propTypes = {
-  user: PropTypes.object,
-};
-
-const mapStateToProps = ({ user }) => ({ user });
-
-export default connect(mapStateToProps)(UserPassword);

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

@@ -1,20 +0,0 @@
-import { render } from "@truedat/test/render";
-import User from "../User";
-
-describe("<User />", () => {
-  const user = {
-    id: "1",
-    user_name: "joe",
-    role: "admin",
-    full_name: "Joe Bloggs",
-    email: "joe@bloggs.net",
-  };
-  const renderOpts = {
-    state: { user },
-  };
-
-  it("matches the latest snapshot", () => {
-    const { container } = render(<User />, renderOpts);
-    expect(container).toMatchSnapshot();
-  });
-});

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

@@ -1,24 +0,0 @@
-import { render, waitForLoad } from "@truedat/test/render";
-import { UserPassword } from "../UserPassword";
-
-const renderOpts = {
-  state: {
-    authentication: {
-      user_name: "foo",
-    },
-  },
-};
-
-describe("<UserPassword />", () => {
-  const user = {
-    id: 1,
-    user_name: "joe",
-  };
-  const props = { user };
-
-  it("matches the latest snapshot", async () => {
-    const rendered = render(<UserPassword {...props} />, renderOpts);
-    await waitForLoad(rendered);
-    expect(rendered.container).toMatchSnapshot();
-  });
-});