@truedat/auth 8.14.0 → 8.14.2

package/src/groups/components/GroupUsersTable.js

@@ -1,21 +1,22 @@
 import _ from "lodash/fp";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { connect } from "react-redux";
-import { useNavigate } from "react-router";
-import { Table, Header, Icon, Button } from "semantic-ui-react";
-import ConfirmModal from "@truedat/core/components/ConfirmModal";
+import { Link } from "react-router";
+import { Table, Icon, Button } from "semantic-ui-react";
+import SearchInput from "@truedat/core/components/SearchInput";
 import { linkTo } from "@truedat/core/routes";
 import { columnDecorator } from "@truedat/core/services";
 import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
-import { deleteGroupUser } from "../routines";
+import GroupDeleteModal from "./GroupDeleteModal";
+
+const EMPTY_USERS = [];
 
 const toSearchable = _.flow(_.deburr, _.toLower, _.trim);
 
 const matchesFilter = (filter) =>
   _.flow(
-    _.at(["user_name", "full_name", "email"]),
+    _.at(["user_name", "full_name", "email", "external_id"]),
     _.map(toSearchable),
     _.some(_.includes(toSearchable(filter))),
   );
@@ -24,15 +25,18 @@ const columns = [
   { name: "full_name", width: 2, sort: { name: "full_name" } },
   { name: "user_name", width: 2, sort: { name: "user_name" } },
   { name: "email", width: 2, sort: { name: "email" } },
+  { name: "external_id", width: 2, sort: { name: "external_id" } },
 ];
 
 export const GroupUsersTable = ({
   filter,
+  onFilterChange,
   groupUsers,
-  deleteGroupUser,
+  users = EMPTY_USERS,
   group,
+  readOnly = false,
 }) => {
-  const navigate = useNavigate();
+  const [removing, setRemoving] = useState(null);
   const [sortBy, setSortBy] = useState("full_name");
   const [ascending, setAscending] = useState(true);
   const { formatMessage } = useIntl();
@@ -44,97 +48,146 @@ export const GroupUsersTable = ({
       setAscending(true);
     }
   };
+  const members = useMemo(() => {
+    const externalIds = new Map(
+      users.map(({ id, external_id }) => [String(id), external_id]),
+    );
+    return (groupUsers || EMPTY_USERS).map((user) => ({
+      ...user,
+      external_id: user.external_id ?? externalIds.get(String(user.id)),
+    }));
+  }, [groupUsers, users]);
   const direction = ascending ? "ascending" : "descending";
   const data = _.flow(
     _.trim(filter) ? _.filter(matchesFilter(filter)) : _.identity,
     _.sortBy(accentInsensitivePathOrder(sortBy)),
     ascending ? _.identity : _.reverse,
-  )(groupUsers);
-  return _.isEmpty(data) ? (
-    <Header
-      as="h4"
-      icon="search"
-      content={formatMessage({ id: "groupUsers.search.results.empty" })}
-    />
-  ) : (
-    <Table sortable>
-      <Table.Header>
-        <Table.Row>
-          {columns.map((columnSpec, key) => (
-            <Table.HeaderCell
-              key={key}
-              width={columnSpec.width}
-              content={formatMessage({
-                id: `user.props.${columnSpec.header || columnSpec.name}`,
-              })}
-              sorted={
-                _.pathEq("sort.name", sortBy)(columnSpec) ? direction : null
-              }
-              className={_.path("sort.name")(columnSpec) ? "" : "disabled"}
-              onClick={() => handleSort(columnSpec)}
-            />
-          ))}
-          <Table.HeaderCell key="delete_action" width={1} />
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        {data.map((user, i) => (
-          <Table.Row key={`${user.id}_${i}`}>
-            {columns.map((column, i) =>
-              column.name == "full_name" ? (
-                <Table.Cell
-                  onClick={() => navigate(linkTo.USER({ id: user.id }))}
-                  width={_.prop("width")(column)}
-                  key={i}
-                  textAlign={column.textAlign}
-                  content={<a>{columnDecorator(column)(user)}</a>}
-                  className="pointer"
-                />
-              ) : (
+  )(members);
+  return (
+    <>
+      {removing && (
+        <GroupDeleteModal
+          group={group}
+          member={removing}
+          onClose={() => setRemoving(null)}
+        />
+      )}
+      <Table sortable unstackable className="group-users-table">
+        <Table.Header>
+          <Table.Row>
+            {columns.map((columnSpec, key) => (
+              <Table.HeaderCell
+                key={key}
+                width={columnSpec.width}
+                content={
+                  <div className="group-column-heading">
+                    <span>
+                      {formatMessage({
+                        id:
+                          columnSpec.name === "external_id"
+                            ? "user.form.external_id"
+                            : `user.props.${columnSpec.header || columnSpec.name}`,
+                      })}
+                    </span>
+                    {columnSpec.name === "full_name" && onFilterChange && (
+                      <span
+                        onClick={(event) => event.stopPropagation()}
+                        onKeyDown={(event) => event.stopPropagation()}
+                      >
+                        <SearchInput
+                          value={filter}
+                          aria-label={formatMessage({
+                            id: "user.search.placeholder",
+                          })}
+                          placeholder={formatMessage({
+                            id: "user.search.placeholder",
+                          })}
+                          onChange={(_event, { value }) =>
+                            onFilterChange(value)
+                          }
+                        />
+                      </span>
+                    )}
+                  </div>
+                }
+                sorted={
+                  _.pathEq("sort.name", sortBy)(columnSpec) ? direction : null
+                }
+                className={_.path("sort.name")(columnSpec) ? "" : "disabled"}
+                tabIndex={0}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    handleSort(columnSpec);
+                  }
+                }}
+                onClick={() => handleSort(columnSpec)}
+              />
+            ))}
+            {!readOnly && <Table.HeaderCell key="delete_action" width={1} />}
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {_.isEmpty(data) && (
+            <Table.Row>
+              <Table.Cell colSpan={columns.length + (readOnly ? 0 : 1)}>
+                {formatMessage({ id: "groupUsers.search.results.empty" })}
+              </Table.Cell>
+            </Table.Row>
+          )}
+          {data.map((user) => (
+            <Table.Row key={user.id}>
+              {columns.map((column, i) => (
                 <Table.Cell
                   width={_.prop("width")(column)}
                   key={i}
                   textAlign={column.textAlign}
-                  content={columnDecorator(column)(user)}
+                  content={
+                    column.name === "full_name" ? (
+                      <Link to={linkTo.USER({ id: user.id })}>
+                        {columnDecorator(column)(user)}
+                      </Link>
+                    ) : (
+                      columnDecorator(column)(user)
+                    )
+                  }
+                  className={
+                    column.name === "full_name" ? "pointer" : undefined
+                  }
                 />
-              ),
-            )}
-            <Table.Cell className="pointer" textAlign="center">
-              <ConfirmModal
-                icon="trash"
-                trigger={
-                  <Button icon color="red" basic size="mini">
-                    <Icon name="trash alternate outline" color="red" />
+              ))}
+              {!readOnly && (
+                <Table.Cell className="pointer" textAlign="center">
+                  <Button
+                    type="button"
+                    icon
+                    negative
+                    basic
+                    size="mini"
+                    aria-label={formatMessage({
+                      id: "groupUsers.actions.delete.confirmation.header",
+                    })}
+                    onClick={() => setRemoving(user)}
+                  >
+                    <Icon name="trash alternate outline" />
                   </Button>
-                }
-                header={formatMessage({
-                  id: "groupUsers.actions.delete.confirmation.header",
-                })}
-                content={formatMessage({
-                  id: "groupUsers.actions.delete.confirmation.content",
-                })}
-                onConfirm={() => deleteGroupUser({ user, group, groupUsers })}
-                onOpen={(e) => e.stopPropagation()}
-                onClose={(e) => e.stopPropagation()}
-              />
-            </Table.Cell>
-          </Table.Row>
-        ))}
-      </Table.Body>
-    </Table>
+                </Table.Cell>
+              )}
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+    </>
   );
 };
 
 GroupUsersTable.propTypes = {
   filter: PropTypes.string,
+  readOnly: PropTypes.bool,
+  onFilterChange: PropTypes.func,
   groupUsers: PropTypes.array,
-  deleteGroupUser: PropTypes.func,
+  users: PropTypes.array,
   group: PropTypes.object,
 };
 
-const mapStateToProps = (state) => ({
-  groupUsers: state.groupUsers,
-  group: state.group,
-});
-
-export default connect(mapStateToProps, { deleteGroupUser })(GroupUsersTable);
+export default GroupUsersTable;

package/src/groups/components/NewGroup.js

@@ -1,13 +1,19 @@
-import PropTypes from "prop-types";
+import { useNavigate } from "react-router";
 import { Header, Icon, Container, Segment } from "semantic-ui-react";
-import { connect } from "react-redux";
 import { FormattedMessage, useIntl } from "react-intl";
-import { createGroup } from "../routines";
+import { GROUPS } from "@truedat/core/routes";
+import { useGroupUsers } from "../hooks/useGroups";
+import { useGroupOperation } from "../hooks/useGroupOperation";
 import GroupForm from "./GroupForm";
 import GroupBreadcrumbs from "./GroupBreadcrumbs";
 
-const NewGroup = ({ createGroup }) => {
+const NewGroup = () => {
   const { formatMessage } = useIntl();
+  const navigate = useNavigate();
+  const { users, hasData, loading, error, retry } = useGroupUsers();
+  const { submit, pending, failed } = useGroupOperation("create", null, () =>
+    navigate(GROUPS),
+  );
   return (
     <>
       <GroupBreadcrumbs name="groups.actions.create" />
@@ -26,14 +32,36 @@ const NewGroup = ({ createGroup }) => {
             />
           </Header.Content>
         </Header>
-        <GroupForm onSubmit={createGroup} />
+        {loading && !hasData ? (
+          <p role="status">Cargando usuarios…</p>
+        ) : !hasData ? (
+          <div role="alert">
+            No se han podido cargar los usuarios.
+            <button type="button" onClick={() => retry().catch(() => {})}>
+              Reintentar
+            </button>
+          </div>
+        ) : (
+          <>
+            {error && (
+              <div role="alert">
+                No se han podido actualizar los usuarios.
+                <button type="button" onClick={() => retry().catch(() => {})}>
+                  Reintentar
+                </button>
+              </div>
+            )}
+            {failed && (
+              <p role="alert">
+                No se ha podido crear el grupo. Inténtalo de nuevo.
+              </p>
+            )}
+            <GroupForm onSubmit={submit} users={users} isSubmitting={pending} />
+          </>
+        )}
       </Container>
     </>
   );
 };
 
-NewGroup.propTypes = {
-  createGroup: PropTypes.func,
-};
-
-export default connect(null, { createGroup })(NewGroup);
+export default NewGroup;

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

@@ -0,0 +1,105 @@
+import { useParams } from "react-router";
+import { SWRConfig, useSWRConfig } from "swr";
+import { act, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import { apiJson } from "@truedat/core/services/api";
+import EditGroup from "../EditGroup";
+
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useParams: jest.fn(),
+  useNavigate: () => jest.fn(),
+}));
+jest.mock("@truedat/core/services/api", () => ({
+  apiJson: jest.fn(),
+  apiJsonPut: jest.fn(),
+  JSON_OPTS: {},
+}));
+
+const groups = {
+  1: { id: 1, name: "Team one", users: [{ id: 11 }] },
+  2: { id: 2, name: "Team two", users: [{ id: 22 }] },
+};
+
+const RefreshGroup = () => {
+  const { mutate } = useSWRConfig();
+  return (
+    <button type="button" onClick={() => mutate("/api/groups/1")}>
+      Refresh group
+    </button>
+  );
+};
+
+const setup = () => {
+  const cache = new Map();
+  const swrConfig = { provider: () => cache, dedupingInterval: 0 };
+  return {
+    cache,
+    swrConfig,
+    ui: render(
+      <SWRConfig value={swrConfig}>
+        <RefreshGroup />
+        <EditGroup />
+      </SWRConfig>,
+    ),
+  };
+};
+
+describe("<EditGroup />", () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+    useParams.mockReturnValue({ id: "1" });
+    apiJson.mockImplementation((url) =>
+      Promise.resolve({
+        data: {
+          data:
+            url === "/api/users"
+              ? []
+              : url === "/api/groups"
+                ? Object.values(groups)
+                : groups[url.split("/").pop()],
+        },
+      }),
+    );
+  });
+
+  it("reinitializes the form when navigating between cached groups", async () => {
+    const { ui, swrConfig } = setup();
+    const user = userEvent.setup({ delay: null });
+    const name = await ui.findByRole("textbox", { name: "group.props.name" });
+    await user.clear(name);
+    await user.type(name, "Unsaved team one");
+
+    useParams.mockReturnValue({ id: "2" });
+    ui.rerender(
+      <SWRConfig value={swrConfig}>
+        <EditGroup />
+      </SWRConfig>,
+    );
+
+    await waitFor(() =>
+      expect(ui.getByRole("textbox", { name: "group.props.name" })).toHaveValue(
+        "Team two",
+      ),
+    );
+  });
+
+  it("keeps an edit draft when a background group refresh fails", async () => {
+    const { ui } = setup();
+    const user = userEvent.setup({ delay: null });
+    const name = await ui.findByRole("textbox", { name: "group.props.name" });
+    await user.clear(name);
+    await user.type(name, "Unsaved draft");
+
+    apiJson.mockRejectedValue(new Error("offline"));
+    await user.click(ui.getByRole("button", { name: "Refresh group" }));
+    expect(
+      await ui.findByText(
+        "No se ha podido actualizar el grupo o sus usuarios.",
+      ),
+    ).toBeInTheDocument();
+
+    expect(name).toHaveValue("Unsaved draft");
+  });
+});

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

@@ -1,15 +1,23 @@
-import { fireEvent, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
-import ConnectedGroup, { Group } from "../Group";
+import { useGroup } from "../../hooks/useGroups";
+import { Group } from "../Group";
 
-const group = { id: 2, name: "grupo1 ", description: "aaa bbb cc" };
+jest.mock("../../hooks/useGroups", () => ({ useGroup: jest.fn() }));
+jest.mock("../GroupDeleteModal", () => ({ group }) => (
+  <div>Delete group {group.name}</div>
+));
+
+const group = { id: "2", name: "grupo1 ", description: "aaa bbb cc" };
 
 describe("<Group />", () => {
+  beforeEach(() => {
+    useGroup.mockReturnValue({ group, loading: false, retry: jest.fn() });
+  });
+
   it("matches the latest snapshot", () => {
-    const { container } = render(
-      <Group group={group} deleteGroup={jest.fn()} groupLoading={false} />,
-    );
+    const { container } = render(<Group />);
     expect(container).toMatchSnapshot();
   });
 
@@ -20,58 +28,32 @@ describe("<Group />", () => {
       alias: "Grupo Alias",
       description: "aaa bbb cc",
     };
-    const { getByText } = render(
-      <Group group={group} deleteGroup={jest.fn()} />,
-    );
+    useGroup.mockReturnValue({ group, loading: false, retry: jest.fn() });
+    const { getByText } = render(<Group />);
 
     expect(getByText("Grupo Alias")).toBeInTheDocument();
     expect(getByText("grupo1")).toBeInTheDocument();
   });
 
-  it("renders nothing while the group is loading", () => {
-    const rendered = render(
-      <Group group={group} deleteGroup={jest.fn()} groupLoading={true} />,
-    );
-    expect(rendered.container).toBeEmptyDOMElement();
-  });
-
-  it("renders nothing when the group has no id", () => {
-    const rendered = render(
-      <Group
-        group={{ name: "no id", description: "x" }}
-        deleteGroup={jest.fn()}
-        groupLoading={false}
-      />,
-    );
-    expect(rendered.container).toBeEmptyDOMElement();
+  it("shows a loading status while the group is loading", () => {
+    useGroup.mockReturnValue({ group: undefined, loading: true });
+    const rendered = render(<Group />);
+    expect(rendered.getByRole("status")).toBeInTheDocument();
   });
 
-  it("maps group state from the store for the connected component", () => {
-    const rendered = render(<ConnectedGroup />, {
-      state: {
-        group: { id: 2, name: "from store", description: "stored desc" },
-        groupLoading: false,
-      },
-    });
-    expect(rendered.getByText(/from store/i)).toBeInTheDocument();
+  it("shows an unavailable message when the group cannot be loaded", () => {
+    useGroup.mockReturnValue({ group: undefined, loading: false });
+    const rendered = render(<Group />);
+    expect(rendered.getByRole("alert")).toBeInTheDocument();
   });
 
-  it("calls deleteGroup with the group id when delete is confirmed", async () => {
+  it("opens the delete dialog from the group actions menu", async () => {
     const user = userEvent.setup({ delay: null });
-    const deleteGroup = jest.fn();
-    const rendered = render(
-      <Group group={group} deleteGroup={deleteGroup} groupLoading={false} />,
-    );
-    const dropdown = rendered.getByRole("listbox");
-    fireEvent.click(dropdown);
-    await waitFor(() =>
-      expect(rendered.getByText(/actions.delete/i)).toBeInTheDocument(),
-    );
-    await user.click(rendered.getByText(/actions.delete/i));
+    const rendered = render(<Group />);
+    await user.click(rendered.getByRole("listbox"));
+    await user.click(rendered.getByText("actions.delete"));
     await waitFor(() =>
-      expect(rendered.getByText(/confirmation.yes/i)).toBeInTheDocument(),
+      expect(rendered.getByText(/Delete group grupo1/)).toBeInTheDocument(),
     );
-    await user.click(rendered.getByText(/confirmation.yes/i));
-    expect(deleteGroup).toHaveBeenCalledWith({ id: group.id });
   });
 });

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

@@ -1,15 +1,13 @@
-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",
     name: "administrators",
     description: "Administrators",
   };
-  const props = { group, deleteGroup };
+  const props = { group };
 
   it("matches the latest snapshot", async () => {
     const rendered = render(<GroupCard {...props} />);
@@ -22,27 +20,17 @@ describe("<GroupCard />", () => {
       ...group,
       alias: "Admins",
     };
-    const rendered = render(
-      <GroupCard group={aliasGroup} deleteGroup={deleteGroup} />,
-    );
+    const rendered = render(<GroupCard group={aliasGroup} />);
     await waitForLoad(rendered);
 
     expect(rendered.getByText("Admins")).toBeInTheDocument();
-    expect(rendered.queryByText("administrators")).not.toBeInTheDocument();
+    expect(rendered.getByText("administrators")).toBeInTheDocument();
   });
 
-  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);
+  it("does not offer deletion from the card", () => {
+    const ui = render(<GroupCard {...props} />);
+    expect(
+      ui.queryByRole("button", { name: /delete/i }),
+    ).not.toBeInTheDocument();
   });
 });

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

@@ -0,0 +1,27 @@
+import { fireEvent } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import GroupDropdown from "../GroupDropdown";
+
+it("closes only the dropdown with Escape and restores the menu styles", () => {
+  const ui = render(
+    <GroupDropdown
+      selection
+      aria-label="Filter"
+      options={[{ key: 1, value: 1, text: "One" }]}
+    />,
+  );
+  const trigger = ui.getByRole("listbox", { name: "Filter" });
+  fireEvent.click(trigger);
+  const menu = trigger.querySelector(".menu");
+  expect(menu).toHaveAttribute("popover", "manual");
+  expect(menu.style.position).toBe("fixed");
+  const outerEscape = jest.fn();
+  document.addEventListener("keydown", outerEscape);
+  fireEvent.keyDown(trigger, { key: "Escape" });
+  expect(outerEscape).not.toHaveBeenCalled();
+  expect(menu).not.toHaveAttribute("popover");
+  expect(menu.style.position).toBe("");
+  fireEvent.keyDown(trigger, { key: "Escape" });
+  expect(outerEscape).toHaveBeenCalledTimes(1);
+  document.removeEventListener("keydown", outerEscape);
+});