@truedat/auth 8.14.2 → 8.14.4

package/src/users/components/UserTypeSelector.js

@@ -0,0 +1,109 @@
+import PropTypes from "prop-types";
+import { Icon } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+
+export const userTypeOptions = [
+  { value: "admin", messageId: "user.type.admin", icon: "shield" },
+  { value: "user", messageId: "user.type.user", icon: "user" },
+  { value: "service", messageId: "user.type.service", icon: "settings" },
+  { value: "agent", messageId: "user.type.agent", icon: "send" },
+];
+
+const UserTypeSelector = ({
+  id,
+  label,
+  value,
+  onChange,
+  onBlur,
+  required,
+  disabled,
+}) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div className={`field ${required ? "required" : ""}`}>
+      <label id={`${id}-label`} htmlFor={id}>
+        {label}
+      </label>
+      <div
+        id={id}
+        className="um-user-type-selector"
+        role="radiogroup"
+        aria-labelledby={`${id}-label`}
+      >
+        {userTypeOptions.map(({ value: typeValue, messageId, icon }) => {
+          const isSelected = value === typeValue;
+
+          return (
+            <button
+              key={typeValue}
+              type="button"
+              disabled={disabled}
+              tabIndex={isSelected ? 0 : -1}
+              onKeyDown={(event) => {
+                const keys = [
+                  "ArrowRight",
+                  "ArrowDown",
+                  "ArrowLeft",
+                  "ArrowUp",
+                  "Home",
+                  "End",
+                ];
+                if (!keys.includes(event.key)) return;
+                event.preventDefault();
+                const index = userTypeOptions.findIndex(
+                  (option) => option.value === typeValue,
+                );
+                const next =
+                  event.key === "Home"
+                    ? 0
+                    : event.key === "End"
+                      ? userTypeOptions.length - 1
+                      : (index +
+                          (keys.indexOf(event.key) < 2 ? 1 : -1) +
+                          userTypeOptions.length) %
+                        userTypeOptions.length;
+                onChange(userTypeOptions[next].value);
+                event.currentTarget.parentElement
+                  .querySelectorAll("button")
+                  [next].focus();
+              }}
+              className={`um-user-type-button ${
+                isSelected ? "um-user-type-button--active" : ""
+              }`}
+              role="radio"
+              aria-checked={isSelected}
+              aria-label={formatMessage({ id: messageId })}
+              onClick={() => onChange(typeValue)}
+              onBlur={onBlur}
+            >
+              <Icon name={icon} />
+              <span>{formatMessage({ id: messageId })}</span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+UserTypeSelector.propTypes = {
+  id: PropTypes.string,
+  label: PropTypes.string,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  value: PropTypes.string,
+};
+
+UserTypeSelector.defaultProps = {
+  id: "role",
+  label: "",
+  onBlur: () => {},
+  onChange: () => {},
+  required: false,
+  value: "user",
+};
+
+export default UserTypeSelector;

package/src/users/components/UsersAndGroups.js

@@ -1,15 +1,37 @@
-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 { useLocation, useNavigate, useParams } from "react-router";
+import { Loader } from "@truedat/core/router";
 import { GROUPS, USERS } from "@truedat/core/routes";
 import { GroupsList } from "../../groups/components/GroupCards";
+import UserLoader from "./UserLoader";
 import UserCards from "./UserCards";
 import UserTabs from "./UserTabs";
+import UserInfoModal from "./UserInfoModal";
+import EditUserModal from "./EditUserModal";
+import UserPasswordModal from "./UserPasswordModal";
+import NewUser from "./NewUser";
+
+const getModalType = (pathname, id) => {
+  if (pathname.endsWith("/new")) return "new";
+  if (!id) return null;
+  if (pathname.endsWith("/edit")) return "edit";
+  if (pathname.endsWith("/password")) return "password";
+  return "info";
+};
 
 export const UsersAndGroups = () => {
   const { formatMessage } = useIntl();
-  const path = usePath();
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const modalType = getModalType(pathname, id);
+  const isUsersPath = pathname === USERS || pathname.startsWith(USERS + "/");
+  const isGroupsPath = pathname === GROUPS || pathname.startsWith(GROUPS + "/");
+  const onClose = () => navigate(USERS);
+
+  const isNewModal = modalType === "new";
+  const isUserModal = Boolean(isUsersPath && (id || isNewModal));
 
   return (
     <Segment>
@@ -30,9 +52,21 @@ export const UsersAndGroups = () => {
       </Header>
       <UserTabs />
       <Segment attached="bottom">
-        {path === USERS && <UserCards />}
-        {(path === GROUPS || path.startsWith(`${GROUPS}/`)) && <GroupsList />}
+        {isUsersPath && <UserCards />}
+        {isGroupsPath && <GroupsList />}
       </Segment>
+
+      {id && isUserModal && <Loader loaders={<UserLoader />} />}
+      {isUserModal && modalType === "new" && <NewUser onClose={onClose} />}
+      {isUserModal && modalType === "info" && (
+        <UserInfoModal onClose={onClose} />
+      )}
+      {isUserModal && modalType === "edit" && (
+        <EditUserModal onClose={onClose} />
+      )}
+      {isUserModal && modalType === "password" && (
+        <UserPasswordModal onClose={onClose} />
+      )}
     </Segment>
   );
 };

package/src/users/components/UsersTable.js

@@ -0,0 +1,234 @@
+import { useState } from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router";
+import { useIntl } from "react-intl";
+import { Button, Icon, Table } from "semantic-ui-react";
+import { linkTo } from "@truedat/core/routes";
+import { lowerDeburrTrim } from "@truedat/core/services/sort";
+import { DeleteUserModal } from "./UserActions";
+import { userTypeOptions } from "./UserTypeSelector";
+
+const columns = [
+  "type",
+  "name",
+  "external_id",
+  "email",
+  "groups",
+  "roles",
+  "actions",
+];
+
+export default function UsersTable({ users, sort, onSort }) {
+  const { formatMessage } = useIntl();
+  const [deleting, setDeleting] = useState(null);
+  const message = (key) => formatMessage({ id: `users.table.${key}` });
+  const sortValue = (user) => {
+    if (sort.column === "groups") return user.groups?.length || 0;
+    if (sort.column === "type")
+      return lowerDeburrTrim(
+        formatMessage({
+          id: `user.type.${user.role}`,
+          defaultMessage: user.role || "",
+        }),
+      );
+    return lowerDeburrTrim(
+      sort.column === "name"
+        ? user.full_name?.trim() || user.user_name
+        : user[sort.column],
+    );
+  };
+  const sorted = [...users].sort((a, b) => {
+    const left = sortValue(a);
+    const right = sortValue(b);
+    const order =
+      typeof left === "number" ? left - right : left.localeCompare(right);
+    return (
+      (sort.ascending ? order : -order) ||
+      String(a.id).localeCompare(String(b.id))
+    );
+  });
+  return (
+    <>
+      <div
+        className="users-table-scroll"
+        role="region"
+        aria-label={message("view")}
+        tabIndex={0}
+      >
+        <Table unstackable className="users-table">
+          <Table.Header>
+            <Table.Row>
+              {columns.map((column) => (
+                <Table.HeaderCell
+                  key={column}
+                  scope="col"
+                  textAlign={
+                    column === "actions"
+                      ? "right"
+                      : column === "type"
+                        ? "center"
+                        : undefined
+                  }
+                  aria-sort={
+                    sort.column === column
+                      ? sort.ascending
+                        ? "ascending"
+                        : "descending"
+                      : undefined
+                  }
+                >
+                  {["roles", "actions"].includes(column) ? (
+                    message(column)
+                  ) : (
+                    <button
+                      type="button"
+                      className="users-table-sort"
+                      onClick={() =>
+                        onSort({
+                          column,
+                          ascending:
+                            sort.column === column ? !sort.ascending : true,
+                        })
+                      }
+                    >
+                      {message(column)}
+                      <Icon
+                        className={
+                          sort.column === column ? "" : "users-sort-hidden"
+                        }
+                        name={sort.ascending ? "angle up" : "angle down"}
+                        aria-hidden="true"
+                      />
+                    </button>
+                  )}
+                </Table.HeaderCell>
+              ))}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {sorted.map((user) => {
+              const name = user.full_name?.trim() || user.user_name;
+              const type = userTypeOptions.find(
+                (option) => option.value === user.role,
+              );
+              const typeLabel = formatMessage({
+                id: `user.type.${user.role}`,
+                defaultMessage: user.role || message("unknown"),
+              });
+              const roles =
+                Array.isArray(user.acls) &&
+                user.acls.every(
+                  (acl) => acl?.role?.id != null || acl?.role?.name,
+                )
+                  ? new Set(
+                      user.acls.map(({ role }) =>
+                        role.id != null ? `id:${role.id}` : `name:${role.name}`,
+                      ),
+                    ).size
+                  : null;
+              return (
+                <Table.Row key={user.id}>
+                  <Table.Cell
+                    textAlign="center"
+                    verticalAlign="middle"
+                    className="users-table-type"
+                  >
+                    <span title={typeLabel} role="img" aria-label={typeLabel}>
+                      <Icon
+                        name={type?.icon || "question circle"}
+                        aria-hidden="true"
+                      />
+                    </span>
+                  </Table.Cell>
+                  <Table.Cell>
+                    <Link
+                      className="users-table-name"
+                      to={linkTo.USER({ id: user.id })}
+                    >
+                      {name}
+                    </Link>
+                    {user.full_name?.trim() && user.user_name && (
+                      <span className="users-table-username">
+                        {user.user_name}
+                      </span>
+                    )}
+                  </Table.Cell>
+                  <Table.Cell>{user.external_id || "—"}</Table.Cell>
+                  <Table.Cell>{user.email || "—"}</Table.Cell>
+                  <Table.Cell>
+                    {user.groups?.length ? (
+                      <span
+                        aria-label={`${message("groups")}: ${user.groups.length}`}
+                      >
+                        <Icon name="users" aria-hidden="true" />
+                        {user.groups.length}
+                      </span>
+                    ) : (
+                      "—"
+                    )}
+                  </Table.Cell>
+                  <Table.Cell>
+                    {roles === null ? (
+                      message("unknown")
+                    ) : roles ? (
+                      <span aria-label={`${message("roles")}: ${roles}`}>
+                        <Icon name="shield" aria-hidden="true" />
+                        {roles}
+                      </span>
+                    ) : (
+                      "—"
+                    )}
+                  </Table.Cell>
+                  <Table.Cell textAlign="right" className="users-table-actions">
+                    <Button
+                      as={Link}
+                      role="link"
+                      to={linkTo.USER({ id: user.id })}
+                      icon="eye"
+                      basic
+                      aria-label={message("show")}
+                      title={message("show")}
+                    />
+                    <Button
+                      as={Link}
+                      role="link"
+                      to={linkTo.USER_EDIT({ id: user.id })}
+                      icon="pencil"
+                      basic
+                      aria-label={message("edit")}
+                      title={message("edit")}
+                    />
+                    <Button
+                      icon="trash alternate outline"
+                      basic
+                      color="red"
+                      aria-label={message("delete")}
+                      title={message("delete")}
+                      onClick={() => setDeleting(user)}
+                    />
+                  </Table.Cell>
+                </Table.Row>
+              );
+            })}
+          </Table.Body>
+        </Table>
+      </div>
+      {deleting && (
+        <DeleteUserModal
+          id={deleting.id}
+          name={deleting.full_name || deleting.user_name}
+          onClose={() => setDeleting(null)}
+        />
+      )}
+    </>
+  );
+}
+
+UsersTable.propTypes = {
+  users: PropTypes.array.isRequired,
+  sort: PropTypes.shape({
+    column: PropTypes.string.isRequired,
+    ascending: PropTypes.bool.isRequired,
+  }).isRequired,
+  onSort: PropTypes.func.isRequired,
+};

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

@@ -1,18 +1,92 @@
-import { render, waitForLoad } from "@truedat/test/render";
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { createStore, combineReducers, applyMiddleware } from "redux";
+import { Route, Routes } from "react-router";
+import { render } from "@truedat/test/render";
+import { userModalOperation } from "../../reducers/userModalOperation";
+import { updateUser } from "../../routines";
 import EditUser from "../EditUser";
 
-const renderOpts = {
-  state: {
-    user: { id: 123, user_name: "fred", full_name: "fredrik foobar" },
-  },
+jest.mock("../../hooks/useSortedGroups", () => ({
+  __esModule: true,
+  default: () => [],
+}));
+
+const account = {
+  id: 123,
+  user_name: "test.user",
+  full_name: "Test User",
+  role: "user",
+};
+
+const routes = (
+  <Routes>
+    <Route path="/users/:id/edit" element={<EditUser />} />
+    <Route path="/users" element={<div>User list</div>} />
+  </Routes>
+);
+
+const renderOptions = {
+  state: { user: account },
+  routes: ["/users/123/edit"],
 };
 
 describe("<EditUser />", () => {
-  beforeEach(() => jest.useRealTimers());
+  it("shows the selected Redux user in the shared modal and cancels to the list", async () => {
+    const dispatch = jest.fn();
+    const rendered = render(routes, { ...renderOptions, dispatch });
+    expect(rendered.getByRole("dialog")).toHaveClass("user-modal--edit");
+    expect(document.getElementById("full_name")).toHaveValue(account.full_name);
+    fireEvent.click(rendered.getByRole("button", { name: "actions.cancel" }));
+    expect(await rendered.findByText("User list")).toBeVisible();
+    expect(dispatch).not.toHaveBeenCalledWith(
+      expect.objectContaining({ type: updateUser.TRIGGER }),
+    );
+  });
 
-  it("matches the latest snapshot", async () => {
-    const rendered = render(<EditUser />, renderOpts);
-    await waitForLoad(rendered);
-    expect(rendered.container).toMatchSnapshot();
+  it("retains errors and closes only after its own successful update", async () => {
+    const actions = [];
+    const store = createStore(
+      combineReducers({ user: () => account, userModalOperation }),
+      applyMiddleware(() => (next) => (action) => {
+        actions.push(action);
+        return next(action);
+      }),
+    );
+    const rendered = render(
+      <Provider store={store}>{routes}</Provider>,
+      renderOptions,
+    );
+    fireEvent.change(document.getElementById("full_name"), {
+      target: { value: "Updated User" },
+    });
+    fireEvent.submit(document.getElementById("edit-user-form"));
+    await waitFor(() =>
+      expect(
+        actions.filter(({ type }) => type === updateUser.TRIGGER),
+      ).toHaveLength(1),
+    );
+    const request = actions.find(({ type }) => type === updateUser.TRIGGER);
+    expect(request.payload).toEqual(
+      expect.objectContaining({ id: account.id, full_name: "Updated User" }),
+    );
+    act(() =>
+      store.dispatch({ ...updateUser.failure("error"), meta: request.meta }),
+    );
+    expect(rendered.getByRole("dialog")).toBeVisible();
+    expect(document.getElementById("full_name")).toHaveValue("Updated User");
+    fireEvent.submit(document.getElementById("edit-user-form"));
+    await waitFor(() =>
+      expect(
+        actions.filter(({ type }) => type === updateUser.TRIGGER),
+      ).toHaveLength(2),
+    );
+    const retry = actions.filter(({ type }) => type === updateUser.TRIGGER)[1];
+    act(() =>
+      store.dispatch({ ...updateUser.success({}), meta: request.meta }),
+    );
+    expect(rendered.getByRole("dialog")).toBeVisible();
+    act(() => store.dispatch({ ...updateUser.success({}), meta: retry.meta }));
+    expect(await rendered.findByText("User list")).toBeVisible();
   });
 });

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

@@ -1,10 +1,40 @@
 import { render, waitForLoad } from "@truedat/test/render";
-import NewUser from "../NewUser";
+import { NewUser } from "../NewUser";
 
 describe("<NewUser />", () => {
-  it("matches the latest snapshot", async () => {
-    const rendered = render(<NewUser />);
+  const props = {
+    createUser: jest.fn(),
+    groups: [{ id: 1, name: "data", alias: "Data" }],
+    isSubmitting: false,
+    onClose: jest.fn(),
+  };
+
+  it("renders the new user modal fields", async () => {
+    const rendered = render(<NewUser {...props} />);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText(/users.actions.create/i)).toBeInTheDocument();
+    expect(
+      rendered.getByPlaceholderText(/user.form.placeholder.full_name/i),
+    ).toBeInTheDocument();
+    expect(
+      rendered.getByPlaceholderText(/user.form.placeholder.email/i),
+    ).toBeInTheDocument();
+    expect(
+      rendered.getByPlaceholderText(/user.form.placeholder.user_name/i),
+    ).toBeInTheDocument();
+    expect(rendered.baseElement.querySelector("#password")).toBeVisible();
+    expect(
+      rendered.getByLabelText(/user.form.password_confirmation/i),
+    ).toBeInTheDocument();
+  });
+
+  it("disables creation until the form is valid", async () => {
+    const rendered = render(<NewUser {...props} />);
     await waitForLoad(rendered);
-    expect(rendered.container).toMatchSnapshot();
+
+    expect(
+      rendered.getByRole("button", { name: /user.create.submit/i }),
+    ).toBeDisabled();
   });
 });