@truedat/auth 8.14.4 → 8.14.5

package/src/users/components/UserCard.js

@@ -49,6 +49,7 @@ const GroupsBadge = ({ groups, id }) => {
   return (
     <Popup
       className="uc-groups-popover"
+      transition={{ duration: 0 }}
       content={
         <div className="uc-groups-popup">
           <div className="uc-groups-popup__header">
@@ -135,7 +136,7 @@ export const UserCard = ({
                 className="uc-external-id"
                 title={`${formatMessage({
                   id: "user.form.external_id",
-                  defaultMessage: "ID externo",
+                  defaultMessage: "External ID",
                 })}: ${externalId}`}
               >
                 {externalId}
@@ -150,6 +151,7 @@ export const UserCard = ({
           className="uc-action-btn"
           to={linkTo.USER_EDIT({ id })}
           aria-label={editUserLabel}
+          title={editUserLabel}
           onClick={(e) => e.stopPropagation()}
         >
           <Icon name="pencil alternate" />
@@ -159,6 +161,7 @@ export const UserCard = ({
           className="uc-action-btn uc-action-btn--key"
           to={linkTo.USER_EDIT_PASSWORD({ id })}
           aria-label={editPasswordLabel}
+          title={editPasswordLabel}
           onClick={(e) => e.stopPropagation()}
         >
           <Icon name="key" />

package/src/users/components/UserCards.js

@@ -14,14 +14,10 @@ import {
   Message,
 } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
-import SearchContext from "@truedat/core/search/SearchContext";
-import SearchFilters from "@truedat/core/search/SearchFilters";
-import FilterDropdown from "@truedat/core/components/FilterDropdown";
 import { USERS_NEW } from "@truedat/core/routes";
 import { filterUsers } from "../selectors/filterUsers";
 import UserCard from "./UserCard";
 import UsersTable from "./UsersTable";
-import { userTypeOptions } from "./UserTypeSelector";
 
 const ROLE_ORDER = ["admin", "user", "agent", "service"];
 const rolePosition = (role = "") => {
@@ -41,10 +37,6 @@ const roleSort = ([roleA], [roleB]) => {
 
 export const UserCards = ({ users: allUsers }) => {
   const [filter, setFilter] = useState("");
-  const [selectedFilters, setSelectedFilters] = useState([]);
-  const [openFilter, setOpenFilter] = useState(null);
-  const [types, setTypes] = useState([]);
-  const [groups, setGroups] = useState([]);
   const [sort, setSort] = useState({ column: "name", ascending: true });
   const [view, setView] = useState(() => {
     try {
@@ -68,102 +60,65 @@ export const UserCards = ({ users: allUsers }) => {
   const toggleRole = (role) => {
     setOpenRoles((prev) => ({ ...prev, [role]: !(prev[role] ?? true) }));
   };
-  const groupOptions = _.uniqBy("value")(
-    (allUsers || []).flatMap((user) =>
-      (user.groups || []).map((group) => ({
-        key: typeof group === "string" ? group : group.name,
-        value: typeof group === "string" ? group : group.name,
-        text: typeof group === "string" ? group : group.alias || group.name,
-      })),
-    ),
-  ).sort((a, b) => a.text.localeCompare(b.text));
-  const filterOptions = {
-    "users.type": userTypeOptions.map(({ value, messageId }) => ({
-      value,
-      text: formatMessage({ id: messageId }),
-    })),
-    "users.groups": groupOptions,
-  };
-  const resetFilters = () => {
-    setFilter("");
-    setTypes([]);
-    setGroups([]);
-    setSelectedFilters([]);
-    setOpenFilter(null);
-  };
-  const removeFilter = ({ filter: name }) => {
-    setSelectedFilters((values) => values.filter((value) => value !== name));
-    (name === "users.type" ? setTypes : setGroups)([]);
-    setOpenFilter(null);
-  };
+  const resetFilters = () => setFilter("");
   const users = _.flow(
     filterUsers(filter),
-    _.filter(
-      (user) =>
-        (!types.length || types.includes(user.role)) &&
-        (!groups.length ||
-          (user.groups || []).some((group) =>
-            groups.includes(typeof group === "string" ? group : group.name),
-          )),
-    ),
     _.sortBy(userSortKey),
   )(allUsers || []);
-  const hasFilters = Boolean(filter.trim() || types.length || groups.length);
+  const hasFilters = Boolean(filter.trim());
   const usersByRole = _.flow(
     _.groupBy("role"),
     _.toPairs,
   )(users).sort(roleSort);
 
+  const results = (
+    <div className="users-results" role="status">
+      <Label>
+        {hasFilters && (
+          <>
+            <FormattedMessage
+              id="users.results.filtered"
+              values={{ count: users.length }}
+            />{" "}
+          </>
+        )}
+        <FormattedMessage
+          id="users.results"
+          values={{ count: (allUsers || []).length }}
+        />
+      </Label>
+    </div>
+  );
+
   return (
     <>
       <div className="users-toolbar">
         <Input
           iconPosition="left"
-          action
           value={filter}
           onChange={(_event, { value }) => setFilter(value)}
           placeholder={formatMessage({ id: "user.search.placeholder" })}
         >
           <Icon name="search" aria-hidden="true" />
           <input />
-          <SearchContext
-            value={{
-              availableGroupedFilters: [
-                [
-                  "",
-                  Object.keys(filterOptions).filter(
-                    (name) => !selectedFilters.includes(name),
-                  ),
-                ],
-              ],
-              addFilter: ({ filter: name }) => {
-                setSelectedFilters((values) => [...values, name]);
-                setOpenFilter(name);
-              },
-              resetFilters,
-              loadingFilters: false,
-            }}
-          >
-            <SearchFilters />
-          </SearchContext>
         </Input>
         <div className="users-toolbar-actions">
           <div
-            className="users-view-buttons"
+            className="ui buttons users-view-buttons"
             role="group"
             aria-label={formatMessage({ id: "users.view.label" })}
           >
             {["cards", "table"].map((mode) => (
-              <Button
+              <button
                 key={mode}
                 type="button"
-                toggle
-                active={view === mode}
+                className={`ui ${view === mode ? "active primary " : ""}button`}
                 aria-pressed={view === mode}
                 onClick={() => changeView(mode)}
-                icon={mode === "cards" ? "grid layout" : "list"}
-                content={formatMessage({ id: `users.view.${mode}` })}
-              />
+              >
+                <Icon name={mode === "cards" ? "grid layout" : "list"} />
+                {formatMessage({ id: `users.view.${mode}` })}
+              </button>
             ))}
           </div>
           <Button
@@ -175,34 +130,8 @@ export const UserCards = ({ users: allUsers }) => {
           />
         </div>
       </div>
-      <div className="selectedFilters users-filters">
-        {selectedFilters.length > 0 && (
-          <div className="appliedFilters">
-            <FormattedMessage id="search.applied_filters" />
-          </div>
-        )}
-        {selectedFilters.map((name) => (
-          <FilterDropdown
-            key={name}
-            filter={name}
-            loading={false}
-            options={openFilter === name ? filterOptions[name] : null}
-            activeValues={name === "users.type" ? types : groups}
-            openFilter={() => setOpenFilter(name)}
-            closeFilter={() =>
-              setOpenFilter((current) => (current === name ? null : current))
-            }
-            removeFilter={removeFilter}
-            toggleFilterValue={({ value }) =>
-              (name === "users.type" ? setTypes : setGroups)((values) =>
-                values.includes(value)
-                  ? values.filter((item) => item !== value)
-                  : [...values, value],
-              )
-            }
-          />
-        ))}
-        {(hasFilters || selectedFilters.length > 0) && (
+      {hasFilters && (
+        <div className="selectedFilters users-filters">
           <a
             className="resetFilters"
             role="button"
@@ -217,29 +146,14 @@ export const UserCards = ({ users: allUsers }) => {
           >
             <FormattedMessage id="users.filter.clear" />
           </a>
-        )}
-      </div>
-      <div className="users-results" role="status">
-        <Label>
-          {hasFilters && (
-            <>
-              <FormattedMessage
-                id="users.results.filtered"
-                values={{ count: users.length }}
-              />{" "}
-            </>
-          )}
-          <FormattedMessage
-            id="users.results"
-            values={{ count: (allUsers || []).length }}
-          />
-        </Label>
-      </div>
+        </div>
+      )}
+      {(view === "table" || usersByRole.length === 0) && results}
       {view === "table" ? (
         <UsersTable users={users} sort={sort} onSort={setSort} />
       ) : (
         <Accordion fluid styled className="users-role-accordion">
-          {usersByRole.map(([role, users]) => {
+          {usersByRole.map(([role, users], index) => {
             const active = openRoles[role] ?? true;
             const panelId = `users-role-panel-${role}`;
 
@@ -272,6 +186,7 @@ export const UserCards = ({ users: allUsers }) => {
                       </Label>
                     </span>
                   </button>
+                  {index === 0 && results}
                 </Accordion.Title>
                 <Accordion.Content
                   id={panelId}

package/src/users/components/UserInfoModal.js

@@ -8,8 +8,7 @@ import TrueModal from "@truedat/core/components/TrueModal";
 import { linkTo } from "@truedat/core/routes";
 import { useGroups } from "../../groups/hooks/useGroups";
 import { getUserAcls, getUserGroupAcls } from "../selectors";
-import { UserAcls } from "./UserAcls";
-import { UserGroupAcls } from "./UserGroupAcls";
+import { UnifiedAcls } from "./UserAcls";
 import UserGroupLink from "./UserGroupLink";
 import { userTypeOptions } from "./UserTypeSelector";
 
@@ -28,7 +27,6 @@ export const UserInfoModal = ({
   const { formatMessage } = useIntl();
   const [groupByRole, setGroupByRole] = useState(false);
   const [aclsOpen, setAclsOpen] = useState(true);
-  const [groupAclsOpen, setGroupAclsOpen] = useState(true);
 
   if (!user?.id) return null;
 
@@ -39,10 +37,10 @@ export const UserInfoModal = ({
     (nameParts.length > 1 ? nameParts[nameParts.length - 1][0] : "");
   const userType = userTypeOptions.find(({ value }) => value === user.role);
   const unavailable = formatMessage({ id: "user.info.unavailable" });
-  const hasAcls = acls?.length > 0;
-  const hasGroupAcls = groupAcls?.length > 0;
+  const permissions = [...(acls || []), ...(groupAcls || [])];
+  const roleCount = new Set(permissions.map(({ role }) => role)).size;
+  const hasAcls = permissions.length > 0;
   const aclsPanelId = `user-acls-panel-${user.id}`;
-  const groupAclsPanelId = `user-group-acls-panel-${user.id}`;
 
   return (
     <TrueModal
@@ -61,7 +59,7 @@ export const UserInfoModal = ({
         },
         {
           key: "edit",
-          content: formatMessage({ id: "users.actions.edit" }),
+          content: formatMessage({ id: "actions.edit" }),
           primary: true,
           as: Link,
           to: linkTo.USER_EDIT({ id: user.id }),
@@ -163,21 +161,22 @@ export const UserInfoModal = ({
                   <Icon name="shield alternate" />
                 </span>
                 <span className="um-acl-title">
-                  <FormattedMessage id="user.info.direct_permissions" />
-                  <span className="um-acl-count">
-                    ({new Set(acls.map(({ role }) => role)).size})
-                  </span>
+                  <FormattedMessage id="user.acl" />
+                  <span className="um-acl-count">({roleCount})</span>
                 </span>
                 <Icon name={aclsOpen ? "chevron up" : "chevron down"} />
               </button>
-              <div className="um-acl-grouping">
-                <Checkbox
-                  toggle
-                  label={formatMessage({ id: "user.info.group_by_role" })}
-                  checked={groupByRole}
-                  onChange={(_event, { checked }) => setGroupByRole(checked)}
-                />
-              </div>
+              {roleCount > 1 && (
+                <div className="um-acl-grouping">
+                  <Checkbox
+                    id={`user-group-by-role-${user.id}`}
+                    toggle
+                    label={formatMessage({ id: "user.info.group_by_role" })}
+                    checked={groupByRole}
+                    onChange={(_event, { checked }) => setGroupByRole(checked)}
+                  />
+                </div>
+              )}
             </div>
             {aclsOpen && (
               <div
@@ -185,13 +184,13 @@ export const UserInfoModal = ({
                 className="um-acl-panel"
                 role="region"
                 aria-label={formatMessage({
-                  id: "user.info.direct_permissions",
+                  id: "user.acl",
                 })}
                 tabIndex={0}
               >
-                <UserAcls
-                  acls={acls}
-                  groupBy={groupByRole ? "role" : "domain"}
+                <UnifiedAcls
+                  acls={permissions}
+                  groupBy={groupByRole && roleCount > 1 ? "role" : "group"}
                 />
               </div>
             )}
@@ -202,45 +201,6 @@ export const UserInfoModal = ({
             <FormattedMessage id="user.info.no_permissions" />
           </p>
         )}
-
-        {hasGroupAcls ? (
-          <div className="um-acl-section um-acl-section--groups">
-            <button
-              type="button"
-              className="um-acl-header"
-              aria-expanded={groupAclsOpen}
-              aria-controls={groupAclsPanelId}
-              onClick={() => setGroupAclsOpen((open) => !open)}
-            >
-              <span className="um-acl-icon--groups">
-                <Icon name="users" />
-              </span>
-              <span className="um-acl-title">
-                <FormattedMessage id="user.info.group_permissions" />
-                <span className="um-acl-count">({groupAcls.length})</span>
-              </span>
-              <Icon name={groupAclsOpen ? "chevron up" : "chevron down"} />
-            </button>
-            {groupAclsOpen && (
-              <div
-                id={groupAclsPanelId}
-                className="um-acl-panel"
-                role="region"
-                aria-label={formatMessage({
-                  id: "user.info.group_permissions",
-                })}
-                tabIndex={0}
-              >
-                <UserGroupAcls acls={groupAcls} />
-              </div>
-            )}
-          </div>
-        ) : (
-          <p className="um-empty">
-            <Icon name="users" aria-hidden="true" />
-            <FormattedMessage id="user.info.no_group_permissions" />
-          </p>
-        )}
       </div>
     </TrueModal>
   );

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

@@ -37,7 +37,7 @@ describe("<EditUser />", () => {
     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" }));
+    fireEvent.click(rendered.getByRole("button", { name: "actions.close" }));
     expect(await rendered.findByText("User list")).toBeVisible();
     expect(dispatch).not.toHaveBeenCalledWith(
       expect.objectContaining({ type: updateUser.TRIGGER }),

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

@@ -1,6 +1,6 @@
 import { screen, waitFor, within } from "@testing-library/react";
 import { render } from "@truedat/test/render";
-import UserAcls, { UserAcls as UserAclsTable } from "../UserAcls";
+import UserAcls, { UserAcls as UserAclsTable, UnifiedAcls } from "../UserAcls";
 
 const renderOpts = {
   messages: {
@@ -53,3 +53,42 @@ it("groups roles by domain identity and deduplicates repeated assignments", () =
     within(screen.getAllByRole("row")[2]).getAllByRole("listitem"),
   ).toHaveLength(2);
 });
+
+it.each(["group", "role"])(
+  "keeps each permission's origin when grouping unified permissions by %s",
+  (groupBy) => {
+    const resource = { id: 1, name: "Finance", type: "domain" };
+    const acls = [
+      { resource, role: "Reader" },
+      { resource, role: "Reader", group: "Team", groupId: 7 },
+      { resource, role: "Reader", group: "Team", groupId: 8 },
+      { resource, role: "Editor", group: "Team", groupId: 7 },
+    ];
+    render(<UnifiedAcls acls={acls} groupBy={groupBy} />);
+    const rows = screen.getAllByRole("row").slice(1);
+    expect(rows).toHaveLength(4);
+    expect(
+      screen
+        .getAllByRole("link", { name: "Team" })
+        .map((link) => link.getAttribute("href")),
+    ).toEqual(
+      groupBy === "group"
+        ? ["/groups/7", "/groups/8"]
+        : ["/groups/7", "/groups/7", "/groups/8"],
+    );
+    const directRow = rows.find((row) =>
+      within(row).queryByRole("cell", { name: "" }),
+    );
+    expect(directRow).toBeDefined();
+    if (groupBy === "role") {
+      expect(screen.getByRole("cell", { name: "Reader" })).toHaveAttribute(
+        "rowspan",
+        "3",
+      );
+    } else {
+      expect(
+        screen.getAllByRole("link", { name: "Team" })[0].closest("td"),
+      ).toHaveAttribute("rowspan", "2");
+    }
+  },
+);

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

@@ -29,7 +29,7 @@ describe("<UserCard />", () => {
     );
     expect(rendered.getByText("employee-123")).toHaveAttribute(
       "title",
-      "ID externo: employee-123",
+      "External ID: employee-123",
     );
     expect(rendered.getByText(user.user_name)).toBeInTheDocument();
     expect(rendered.getByText(user.email)).toBeInTheDocument();

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

@@ -159,51 +159,6 @@ it("works when storage is unavailable and reuses the delete confirmation", async
   set.mockRestore();
 });
 
-it("combines type and group filters and keeps all group options available", async () => {
-  localStorage.clear();
-  const user = userEvent.setup({ delay: null });
-  render(
-    <UserCards
-      users={[
-        { id: 1, user_name: "Alpha", role: "user", groups: ["Data"], acls: [] },
-        {
-          id: 2,
-          user_name: "Beta",
-          role: "admin",
-          groups: [{ name: "quality", alias: "Quality" }],
-        },
-        {
-          id: 3,
-          user_name: "Gamma",
-          role: "user",
-          groups: ["Data"],
-          acls: [{ role: {} }],
-        },
-      ]}
-    />,
-  );
-  await user.click(screen.getByRole("button", { name: "users.view.table" }));
-  await user.click(screen.getByText("Filters", { exact: true }));
-  await user.click(screen.getByRole("option", { name: "type", exact: true }));
-  await user.click(screen.getByRole("option", { name: "user.type.user" }));
-  await user.keyboard("{Escape}");
-  await user.click(screen.getByText("Filters", { exact: true }));
-  await user.click(screen.getByRole("option", { name: "groups", exact: true }));
-  expect(screen.getByRole("option", { name: "Quality" })).toBeInTheDocument();
-  await user.click(screen.getByRole("option", { name: "Data" }));
-  await user.keyboard("{Escape}");
-  expect(screen.getAllByRole("row")).toHaveLength(3);
-  expect(screen.getAllByText("users.table.unknown")).toHaveLength(1);
-  await user.type(
-    screen.getByPlaceholderText(/user.search.placeholder/),
-    "alpha",
-  );
-  expect(screen.getAllByRole("row")).toHaveLength(2);
-  await user.click(screen.getByRole("button", { name: "users.filter.clear" }));
-  expect(screen.getAllByRole("row")).toHaveLength(4);
-  localStorage.clear();
-});
-
 describe("<UserCards /> role sections", () => {
   beforeEach(() => localStorage.clear());
   const users = [

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

@@ -31,9 +31,7 @@ describe("User modal shell", () => {
     fireEvent.change(document.getElementById("full_name"), {
       target: { value: "Alice Updated" },
     });
-    await keyboard.click(
-      screen.getByRole("button", { name: "Eliminar usuario" }),
-    );
+    await keyboard.click(screen.getByRole("button", { name: "Delete user" }));
     expect(screen.getAllByRole("dialog")).toHaveLength(1);
     expect(
       screen.getByRole("button", { name: "user.delete.submit" }),
@@ -43,9 +41,7 @@ describe("User modal shell", () => {
       screen.getByRole("button", { name: "actions.cancel" }),
     );
     expect(document.getElementById("full_name")).toHaveValue("Alice Updated");
-    await keyboard.click(
-      screen.getByRole("button", { name: "Eliminar usuario" }),
-    );
+    await keyboard.click(screen.getByRole("button", { name: "Delete user" }));
     await keyboard.click(
       screen.getByRole("button", { name: "user.delete.submit" }),
     );
@@ -445,7 +441,7 @@ describe("User form interactions and content", () => {
       screen.queryByRole("heading", { name: /^Grupos/ }),
     ).not.toBeInTheDocument();
     expect(screen.getByText("Sin roles asignados")).toBeVisible();
-    expect(screen.getByText("Sin roles heredados de grupos")).toBeVisible();
+    expect(screen.queryByRole("table")).not.toBeInTheDocument();
   });
 
   it("validates the edit form like the creation form and focuses the first invalid field", async () => {
@@ -505,3 +501,54 @@ describe("User form interactions and content", () => {
     expect(screen.getByText("¿Confirmas la eliminación?").tagName).toBe("P");
   });
 });
+
+describe("Unified user permissions", () => {
+  const resource = { id: 1, type: "domain", name: "Finance" };
+  const user = { id: 1, full_name: "Alice", role: "user" };
+
+  it.each([[[]], [[{ resource, role: "Reader" }]]])(
+    "hides role grouping for zero or one distinct role across direct and inherited permissions",
+    (acls) => {
+      render(
+        <UserInfoModal
+          user={user}
+          acls={acls}
+          groupAcls={[{ resource, role: "Reader", group: "Team", groupId: 7 }]}
+          onClose={jest.fn()}
+        />,
+      );
+      expect(screen.queryByRole("checkbox")).not.toBeInTheDocument();
+      expect(screen.getAllByRole("table")).toHaveLength(1);
+      expect(screen.getByRole("link", { name: "Team" })).toHaveAttribute(
+        "href",
+        "/groups/7",
+      );
+    },
+  );
+
+  it("switches between group and role grouping in one collapsible table", async () => {
+    render(
+      <UserInfoModal
+        user={user}
+        acls={[{ resource, role: "Editor" }]}
+        groupAcls={[{ resource, role: "Reader", group: "Team", groupId: 7 }]}
+        onClose={jest.fn()}
+      />,
+    );
+    const keyboard = userEvent.setup({ delay: null });
+    const grouping = screen.getByRole("checkbox");
+    expect(grouping).not.toBeChecked();
+    await keyboard.click(grouping);
+    expect(grouping).toBeChecked();
+    expect(screen.getAllByRole("table")).toHaveLength(1);
+    expect(screen.getByRole("link", { name: "Team" })).toHaveAttribute(
+      "href",
+      "/groups/7",
+    );
+    const header = screen.getByRole("button", { expanded: true });
+    await keyboard.click(header);
+    expect(screen.queryByRole("table")).not.toBeInTheDocument();
+    await keyboard.click(header);
+    expect(screen.getByRole("table")).toBeVisible();
+  });
+});

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

@@ -57,6 +57,7 @@ exports[`<UserCard /> matches the latest snapshot 1`] = `
         class="uc-action-btn"
         data-discover="true"
         href="/users/1/edit"
+        title="users.actions.edit"
       >
         <i
           aria-hidden="true"
@@ -73,6 +74,7 @@ exports[`<UserCard /> matches the latest snapshot 1`] = `
         class="uc-action-btn uc-action-btn--key"
         data-discover="true"
         href="/users/1/password"
+        title="user.actions.edit_password"
       >
         <i
           aria-hidden="true"