@truedat/auth 8.14.4 → 8.14.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/auth",
-  "version": "8.14.4",
+  "version": "8.14.5",
   "description": "Truedat Web Auth",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -54,14 +54,14 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.14.4",
+    "@truedat/test": "8.14.5",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
   },
   "dependencies": {
     "@apollo/client": "^3.13.8",
-    "@truedat/core": "8.14.4",
+    "@truedat/core": "8.14.5",
     "auth0-js": "^10.2.0",
     "axios": "^1.20.0",
     "graphql": "^16.11.0",
@@ -90,5 +90,5 @@
     "swr": "^2.3.3"
   },
   "overrides": {},
-  "gitHead": "3f043f28fd445df46a419f7872e23fe73e00e93d"
+  "gitHead": "a792103a77b3b2392be5777a8dc6675ac3882ffd"
 }

package/src/groups/components/GroupCard.js

@@ -45,8 +45,8 @@ export const GroupCard = ({ group }) => {
           <span className="gc-count-label">
             {formatMessage(
               isEmpty
-                ? { id: "group.members.none", defaultMessage: "Sin miembros" }
-                : { id: "navigation.members", defaultMessage: "miembros" },
+                ? { id: "group.members.none", defaultMessage: "No members" }
+                : { id: "navigation.members", defaultMessage: "members" },
             )}
           </span>
         </span>

package/src/groups/components/GroupCards.js

@@ -1,42 +1,137 @@
+import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { Link } from "react-router";
-import { Button, Icon } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { Button, Icon, Input, Message, Popup } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { lowerDeburrTrim } from "@truedat/core/services/sort";
 import { GROUP_CREATE } from "@truedat/core/routes";
 import { useGroups } from "../hooks/useGroups";
 import GroupCard from "./GroupCard";
 
-export const GroupCards = ({ groups = [] }) => (
-  <>
-    <div className="groups-toolbar">
-      <Button
-        primary
-        as={Link}
-        to={GROUP_CREATE}
-        className="group-create-button"
-      >
-        <span className="group-create-icon" aria-hidden="true">
-          <Icon name="users" />
-          <svg viewBox="0 0 16 16" focusable="false">
-            <path
-              d="M8 3v10M3 8h10"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
+export const GroupCards = ({ groups = [] }) => {
+  const [search, setSearch] = useState("");
+  const [hintOpen, setHintOpen] = useState(false);
+  useEffect(() => {
+    try {
+      setHintOpen(
+        localStorage.getItem("truedat.groups.search-hint.dismissed") !== "true",
+      );
+    } catch {
+      setHintOpen(true);
+    }
+  }, []);
+  const { formatMessage } = useIntl();
+  const query = lowerDeburrTrim(search);
+  const filteredGroups = query
+    ? groups.filter((group) =>
+        [
+          group.name,
+          group.alias,
+          group.description,
+          ...(group.users || []).flatMap((user) => [
+            user.user_name,
+            user.full_name,
+          ]),
+        ].some((value) => lowerDeburrTrim(value).includes(query)),
+      )
+    : groups;
+  const searchLabel = formatMessage({
+    id: "groups.search.placeholder",
+    defaultMessage: "Search groups or users…",
+  });
+  return (
+    <>
+      <div className="groups-toolbar">
+        <Popup
+          className="groups-search-hint-popup"
+          content={
+            <div className="groups-search-hint">
+              <FormattedMessage
+                id="groups.search.hint"
+                defaultMessage="You can now <emphasis>also</emphasis> search for users within groups"
+                values={{
+                  emphasis: (text) => (
+                    <strong>
+                      <em>{text}</em>
+                    </strong>
+                  ),
+                }}
+              />
+              <Button
+                icon
+                basic
+                className="groups-search-hint-close"
+                aria-label={formatMessage({
+                  id: "actions.close",
+                  defaultMessage: "Close",
+                })}
+                onClick={() => {
+                  setHintOpen(false);
+                  try {
+                    localStorage.setItem(
+                      "truedat.groups.search-hint.dismissed",
+                      "true",
+                    );
+                  } catch {
+                    // Keep the hint dismissed for this render if storage is unavailable.
+                  }
+                }}
+              >
+                <Icon name="close" />
+              </Button>
+            </div>
+          }
+          open={hintOpen}
+          on={[]}
+          position="top left"
+          trigger={
+            <Input
+              icon="search"
+              iconPosition="left"
+              value={search}
+              onChange={(_event, { value }) => setSearch(value)}
+              placeholder={searchLabel}
+              aria-label={searchLabel}
             />
-          </svg>
-        </span>
-        <FormattedMessage id="groups.actions.create" />
-      </Button>
-    </div>
-    <div className="groups-card-list">
-      {groups.map((group) => (
-        <GroupCard key={group.id} group={group} />
-      ))}
-    </div>
-  </>
-);
+          }
+        />
+        <Button
+          primary
+          as={Link}
+          to={GROUP_CREATE}
+          className="group-create-button"
+        >
+          <span className="group-create-icon" aria-hidden="true">
+            <Icon name="users" />
+            <svg viewBox="0 0 16 16" focusable="false">
+              <path
+                d="M8 3v10M3 8h10"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+              />
+            </svg>
+          </span>
+          <FormattedMessage id="groups.actions.create" />
+        </Button>
+      </div>
+      <div className="groups-card-list">
+        {filteredGroups.map((group) => (
+          <GroupCard key={group.id} group={group} />
+        ))}
+      </div>
+      {query && filteredGroups.length === 0 && (
+        <Message role="status">
+          <FormattedMessage
+            id="groups.search.no_results"
+            defaultMessage="No groups found for this search."
+          />
+        </Message>
+      )}
+    </>
+  );
+};
 GroupCards.propTypes = { groups: PropTypes.array };
 export const GroupsList = () => {
   const { groups, error, loading, retry } = useGroups();
@@ -46,7 +141,7 @@ export const GroupsList = () => {
         <p role="status">
           <FormattedMessage
             id="group.loading"
-            defaultMessage="Cargando grupo…"
+            defaultMessage="Loading groups…"
           />
         </p>
       )}
@@ -54,10 +149,7 @@ export const GroupsList = () => {
         <div role="alert">
           <FormattedMessage id="group.unavailable" />
           <Button onClick={() => retry().catch(() => {})}>
-            <FormattedMessage
-              id="group.members.retry"
-              defaultMessage="Reintentar"
-            />
+            <FormattedMessage id="group.members.retry" defaultMessage="Retry" />
           </Button>
         </div>
       )}

package/src/groups/components/GroupForm.js

@@ -30,6 +30,7 @@ export const GroupForm = ({
   onCancel,
   onDelete,
   memberFilters = false,
+  editingModal = false,
 }) => {
   const { formatMessage } = useIntl();
   const nameFieldId = useId();
@@ -74,7 +75,7 @@ export const GroupForm = ({
                 memberFilters
                   ? {
                       id: "group.form.name.label",
-                      defaultMessage: "Nombre del grupo",
+                      defaultMessage: "Group name",
                     }
                   : { id: "group.props.name" },
               )}
@@ -115,7 +116,7 @@ export const GroupForm = ({
                     message: formatMessage({
                       id: "group.description.maxLength",
                       defaultMessage:
-                        "La descripción no puede superar los 55 caracteres.",
+                        "The description cannot exceed 55 characters.",
                     }),
                   },
                 }
@@ -131,14 +132,14 @@ export const GroupForm = ({
                   ? "group.description.short"
                   : "group.props.description",
                 defaultMessage: memberFilters
-                  ? "Descripción breve"
-                  : "Descripción",
+                  ? "Short description"
+                  : "Description",
               })}
               onBlur={onBlur}
               onChange={(_e, { value }) => onChange(value)}
               placeholder={formatMessage({
                 id: "group.form.description.placeholder",
-                defaultMessage: "Descripción del grupo",
+                defaultMessage: "Group description",
               })}
               value={value || ""}
             />
@@ -196,7 +197,9 @@ export const GroupForm = ({
             secondary
             disabled={isSubmitting}
             onClick={onCancel}
-            content={formatMessage({ id: "actions.cancel" })}
+            content={formatMessage({
+              id: editingModal ? "actions.close" : "actions.cancel",
+            })}
           />
         ) : (
           <HistoryBackButton
@@ -209,7 +212,9 @@ export const GroupForm = ({
           primary
           loading={isSubmitting}
           disabled={isSubmitting || !isDirty || !isValid}
-          content={formatMessage({ id: "actions.save" })}
+          content={formatMessage({
+            id: editingModal ? "actions.edit" : "actions.save",
+          })}
         />
       </div>
     </Form>
@@ -219,6 +224,7 @@ export const GroupForm = ({
 GroupForm.propTypes = {
   users: PropTypes.array,
   memberFilters: PropTypes.bool,
+  editingModal: PropTypes.bool,
   group: PropTypes.object,
   groupUsers: PropTypes.array,
   onSubmit: PropTypes.func,

package/src/groups/components/GroupFormModal.js

@@ -46,7 +46,7 @@ const GroupFormModal = ({ editing = false, onClose }) => {
             ? formatMessage(
                 {
                   id: "group.edit.title",
-                  defaultMessage: "Editar grupo {name}",
+                  defaultMessage: "Edit group {name}",
                 },
                 { name: group?.name || "" },
               )
@@ -62,7 +62,7 @@ const GroupFormModal = ({ editing = false, onClose }) => {
             ? formatMessage({
                 id: "group.operation.error",
                 defaultMessage:
-                  "No se ha podido completar la operación. Inténtalo de nuevo.",
+                  "The operation could not be completed. Please try again.",
               })
             : null
         }
@@ -72,6 +72,7 @@ const GroupFormModal = ({ editing = false, onClose }) => {
           <GroupForm
             key={editing ? group.id : "new"}
             memberFilters
+            editingModal={editing}
             group={editing ? group : {}}
             groupUsers={editing ? groupUsers : []}
             users={users}
@@ -89,8 +90,8 @@ const GroupFormModal = ({ editing = false, onClose }) => {
                 loading || usersLoading ? "group.loading" : "group.unavailable",
               defaultMessage:
                 loading || usersLoading
-                  ? "Cargando grupo…"
-                  : "El grupo no está disponible.",
+                  ? "Loading group…"
+                  : "The group is unavailable.",
             })}
           </p>
         )}
@@ -98,12 +99,12 @@ const GroupFormModal = ({ editing = false, onClose }) => {
           <div role="alert">
             {formatMessage({
               id: "group.members.error",
-              defaultMessage: "No se han podido cargar los usuarios.",
+              defaultMessage: "Could not load users.",
             })}
             <button type="button" onClick={() => retryUsers().catch(() => {})}>
               {formatMessage({
                 id: "group.members.retry",
-                defaultMessage: "Reintentar",
+                defaultMessage: "Retry",
               })}
             </button>
           </div>
@@ -114,7 +115,7 @@ const GroupFormModal = ({ editing = false, onClose }) => {
             <button type="button" onClick={() => retry().catch(() => {})}>
               {formatMessage({
                 id: "group.members.retry",
-                defaultMessage: "Reintentar",
+                defaultMessage: "Retry",
               })}
             </button>
           </div>

package/src/groups/components/GroupInfoModal.js

@@ -29,7 +29,7 @@ const GroupInfoModal = ({ onClose }) => {
           ? group.name
           : formatMessage({
               id: "group.loading",
-              defaultMessage: "Cargando grupo…",
+              defaultMessage: "Loading group…",
             })
       }
       subtitle={ready ? group.description || "" : ""}
@@ -60,7 +60,7 @@ const GroupInfoModal = ({ onClose }) => {
           <Button type="button" onClick={() => retry().catch(() => {})}>
             {formatMessage({
               id: "group.members.retry",
-              defaultMessage: "Reintentar",
+              defaultMessage: "Retry",
             })}
           </Button>
         </div>
@@ -69,8 +69,8 @@ const GroupInfoModal = ({ onClose }) => {
           {formatMessage({
             id: loading ? "group.loading" : "group.unavailable",
             defaultMessage: loading
-              ? "Cargando grupo…"
-              : "El grupo no está disponible.",
+              ? "Loading group…"
+              : "The group is unavailable.",
           })}
         </p>
       ) : empty ? (
@@ -79,13 +79,13 @@ const GroupInfoModal = ({ onClose }) => {
           <h3>
             {formatMessage({
               id: "group.members.empty.title",
-              defaultMessage: "Este grupo no tiene miembros",
+              defaultMessage: "This group has no members",
             })}
           </h3>
           <p>
             {formatMessage({
               id: "group.members.empty.description",
-              defaultMessage: "Edita el grupo para añadir miembros.",
+              defaultMessage: "Edit the group to add members.",
             })}
           </p>
           <Button

package/src/groups/components/GroupMemberPicker.js

@@ -310,7 +310,7 @@ const GroupMemberPicker = ({
                       aria-label={formatMessage(
                         {
                           id: "group.members.remove",
-                          defaultMessage: "Eliminar a {name} del grupo",
+                          defaultMessage: "Remove {name} from the group",
                         },
                         { name },
                       )}
@@ -325,9 +325,7 @@ const GroupMemberPicker = ({
               })}
             </ul>
           ) : (
-            <p>
-              {message("group.members.empty", "No hay miembros seleccionados")}
-            </p>
+            <p>{message("group.members.empty", "No members selected")}</p>
           )}
         </section>
         {showFilters && failed && (

package/src/groups/components/GroupRouteModal.js

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { useNavigate, useLocation, useParams } from "react-router";
 import { GROUPS } from "@truedat/core/routes";
 import GroupFormModal from "./GroupFormModal";
@@ -9,11 +9,14 @@ const GroupRouteModal = ({ mode }) => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
   const { id } = useParams();
+  const keyboardClose = useRef(false);
   useEffect(() => {
     const opener = document.activeElement;
+    const keyboardFocus = opener?.matches(":focus-visible");
     return () => {
+      const restoreFocus = keyboardFocus || keyboardClose.current;
       requestAnimationFrame(() => {
-        if (document.querySelector(".group-modal")) return;
+        if (!restoreFocus || document.querySelector(".group-modal")) return;
         if (opener?.isConnected && opener !== document.body) opener.focus();
         else
           document
@@ -22,14 +25,16 @@ const GroupRouteModal = ({ mode }) => {
       });
     };
   }, [pathname]);
-  const onClose = useCallback(() => {
-    navigate(GROUPS);
-    requestAnimationFrame(() => {
-      document
-        .querySelector(`a[href="${pathname.replace(/\/edit$/, "")}"]`)
-        ?.focus();
-    });
-  }, [navigate, pathname]);
+  const onClose = useCallback(
+    (event) => {
+      keyboardClose.current =
+        event?.key === "Escape" ||
+        event?.detail === 0 ||
+        event?.currentTarget?.matches?.(":focus-visible");
+      navigate(GROUPS);
+    },
+    [navigate],
+  );
   return mode === "info" ? (
     <GroupInfoModal key={id} onClose={onClose} />
   ) : (

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

@@ -1,3 +1,6 @@
+import { StrictMode } from "react";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { render, waitForLoad } from "@truedat/test/render";
 import { GroupCards } from "../GroupCards";
 
@@ -15,3 +18,94 @@ describe("<GroupCards />", () => {
     expect(rendered.container).toMatchSnapshot();
   });
 });
+
+const searchableGroups = [
+  {
+    id: 1,
+    name: "finance",
+    alias: "Finanzas",
+    description: "Gestión de presupuestos",
+    users: [{ user_name: "jgarcia", full_name: "José García" }],
+  },
+  { id: 2, name: "quality", users: [{ user_name: "jgarcia" }] },
+  { id: 3, name: "empty", users: [] },
+  { id: 4, name: "other" },
+];
+
+it.each([
+  ["FINANCE", 1],
+  ["finanzas", 1],
+  ["gestion", 1],
+  ["  JGARC  ", 2],
+  ["jose garcia", 1],
+  ["  ", 4],
+])("matches groups and their members for %s", async (search, count) => {
+  const user = userEvent.setup({ delay: null });
+  render(<GroupCards groups={searchableGroups} />);
+  await user.type(screen.getByRole("textbox"), search);
+  expect(screen.getAllByRole("article")).toHaveLength(count);
+});
+
+it("shows no results and restores all groups when the search is cleared", async () => {
+  const user = userEvent.setup({ delay: null });
+  render(<GroupCards groups={searchableGroups} />);
+  const search = screen.getByRole("textbox");
+  await user.type(search, "unmatched");
+  expect(screen.queryAllByRole("article")).toHaveLength(0);
+  expect(screen.getByRole("status")).toBeInTheDocument();
+  await user.clear(search);
+  expect(screen.getAllByRole("article")).toHaveLength(4);
+  expect(screen.queryByRole("status")).not.toBeInTheDocument();
+});
+
+describe("group search introduction", () => {
+  const key = "truedat.groups.search-hint.dismissed";
+  const hint = "also";
+  const options = { state: { authentication: { user_name: "alice" } } };
+  beforeEach(() => localStorage.clear());
+  afterEach(() => jest.restoreAllMocks());
+
+  it("keeps the hint visible until dismissed and remembers the dismissal", async () => {
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(
+      <StrictMode>
+        <GroupCards />
+      </StrictMode>,
+      options,
+    );
+    expect(screen.getByText(hint).tagName).toBe("EM");
+    expect(screen.getByText(hint).parentElement.tagName).toBe("STRONG");
+    expect(localStorage.getItem(key)).toBeNull();
+    await user.click(screen.getByRole("textbox"));
+    expect(screen.getByText(hint)).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Close" }));
+    expect(screen.queryByText(hint)).not.toBeInTheDocument();
+    expect(localStorage.getItem(key)).toBe("true");
+    rendered.rerender(
+      <StrictMode>
+        <GroupCards groups={searchableGroups} />
+      </StrictMode>,
+    );
+    rendered.unmount();
+    render(<GroupCards />, options);
+    expect(screen.queryByText(hint)).not.toBeInTheDocument();
+  });
+
+  it("remembers dismissal across users in the same browser", () => {
+    localStorage.setItem(key, "true");
+    render(<GroupCards />, { state: { authentication: { user_name: "bob" } } });
+    expect(screen.queryByText(hint)).not.toBeInTheDocument();
+    expect(localStorage.length).toBe(1);
+  });
+
+  it("keeps search usable when storage is unavailable", async () => {
+    jest.spyOn(Storage.prototype, "getItem").mockImplementation(() => {
+      throw new Error("unavailable");
+    });
+    const user = userEvent.setup({ delay: null });
+    render(<GroupCards groups={searchableGroups} />, options);
+    expect(screen.getByText(hint)).toBeInTheDocument();
+    await user.type(screen.getByRole("textbox"), "finance");
+    expect(screen.getAllByRole("article")).toHaveLength(1);
+  });
+});

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

@@ -78,7 +78,7 @@ describe("<GroupForm />", () => {
       "Team Alpha",
     );
     await user.type(
-      rendered.getByPlaceholderText(/Descripción del grupo/i),
+      rendered.getByPlaceholderText(/Group description/i),
       "Alpha description",
     );
     await user.type(
@@ -94,7 +94,7 @@ describe("<GroupForm />", () => {
         rendered.getByPlaceholderText(/group.form.name.placeholder/i),
       ).toHaveValue("Team Alpha"),
     );
-    expect(rendered.getByPlaceholderText(/Descripción del grupo/i)).toHaveValue(
+    expect(rendered.getByPlaceholderText(/Group description/i)).toHaveValue(
       "Alpha description",
     );
     expect(