@truedat/auth 8.14.1 → 8.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/auth",
-  "version": "8.14.1",
+  "version": "8.14.2",
   "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.1",
+    "@truedat/test": "8.14.2",
     "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.1",
+    "@truedat/core": "8.14.2",
     "auth0-js": "^10.2.0",
     "axios": "^1.20.0",
     "graphql": "^16.11.0",
@@ -90,5 +90,5 @@
     "swr": "^2.3.3"
   },
   "overrides": {},
-  "gitHead": "391e4e51eebb33b37b9676e541cda5f6f262e5e7"
+  "gitHead": "3814d239579315d817ba0e3467771e6a128e5788"
 }

package/src/groups/components/EditGroup.js

@@ -1,14 +1,48 @@
-import _ from "lodash/fp";
-import PropTypes from "prop-types";
+import { useNavigate, useParams } from "react-router";
 import { Header, Icon, Container, Segment } from "semantic-ui-react";
-import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
-import { updateGroup } from "../routines";
+import { GROUPS } from "@truedat/core/routes";
+import { useGroup, useGroupUsers } from "../hooks/useGroups";
+import { useGroupOperation } from "../hooks/useGroupOperation";
 import GroupBreadcrumbs from "./GroupBreadcrumbs";
 import GroupForm from "./GroupForm";
 
-const EditGroup = ({ updateGroup, group, groupUsers }) =>
-  _.isEmpty(group) ? null : (
+const EditGroup = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const {
+    group,
+    members,
+    hasData: hasGroup,
+    loading,
+    error,
+    retry,
+  } = useGroup(id);
+  const {
+    users,
+    hasData: hasUsers,
+    loading: usersLoading,
+    error: usersError,
+    retry: retryUsers,
+  } = useGroupUsers();
+  const { submit, pending, failed } = useGroupOperation("update", id, () =>
+    navigate(GROUPS),
+  );
+  if ((loading && !hasGroup) || (usersLoading && !hasUsers))
+    return <p role="status">Cargando grupo…</p>;
+  if (!hasGroup || !hasUsers || !group)
+    return (
+      <div role="alert">
+        No se ha podido cargar el grupo o sus usuarios.
+        <button
+          type="button"
+          onClick={() => Promise.allSettled([retry(), retryUsers()])}
+        >
+          Reintentar
+        </button>
+      </div>
+    );
+  return (
     <>
       <GroupBreadcrumbs name="groups.actions.edit" />
       <Container text as={Segment}>
@@ -18,23 +52,33 @@ const EditGroup = ({ updateGroup, group, groupUsers }) =>
             <FormattedMessage id="groups.actions.edit" />
           </Header.Content>
         </Header>
-        {group && (
-          <GroupForm
-            onSubmit={(props) => updateGroup({ ...props, id: group.id })}
-            group={group}
-            groupUsers={groupUsers}
-          />
+        {(error || usersError) && (
+          <div role="alert">
+            No se ha podido actualizar el grupo o sus usuarios.
+            <button
+              type="button"
+              onClick={() => Promise.allSettled([retry(), retryUsers()])}
+            >
+              Reintentar
+            </button>
+          </div>
+        )}
+        {failed && (
+          <p role="alert">
+            No se ha podido guardar el grupo. Inténtalo de nuevo.
+          </p>
         )}
+        <GroupForm
+          key={group.id}
+          onSubmit={(values) => submit({ ...values, id: group.id })}
+          group={group}
+          groupUsers={members}
+          users={users}
+          isSubmitting={pending}
+        />
       </Container>
     </>
   );
-
-EditGroup.propTypes = {
-  group: PropTypes.object,
-  groupUsers: PropTypes.array,
-  updateGroup: PropTypes.func,
 };
 
-const mapStateToProps = ({ group, groupUsers }) => ({ group, groupUsers });
-
-export default connect(mapStateToProps, { updateGroup })(EditGroup);
+export default EditGroup;

package/src/groups/components/Group.js

@@ -1,50 +1,59 @@
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { useCallback, useState } from "react";
+import { useNavigate, useParams } from "react-router";
 import { Header, Button, Icon, Grid } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
-import ConfirmModal from "@truedat/core/components/ConfirmModal";
+import { GROUPS } from "@truedat/core/routes";
 import GroupActions from "@truedat/core/components/GroupActions";
-import { deleteGroup } from "../routines";
+import { useGroup } from "../hooks/useGroups";
+import GroupDeleteModal from "./GroupDeleteModal";
 
-const ModalDelete = ({ group: { id, name }, deleteGroup }) => {
+const ModalDelete = ({ group }) => {
+  const [open, setOpen] = useState(false);
+  const navigate = useNavigate();
+  const onDeleted = useCallback(() => navigate(GROUPS), [navigate]);
   return (
-    <ConfirmModal
-      icon="trash"
-      trigger={
-        <Button
-          icon={<Icon name="trash alternate outline" color="red" />}
-          content={<FormattedMessage id="actions.delete" />}
+    <>
+      <Button
+        type="button"
+        icon={<Icon name="trash alternate outline" color="red" />}
+        content={<FormattedMessage id="actions.delete" />}
+        onClick={() => setOpen(true)}
+      />
+      {open && (
+        <GroupDeleteModal
+          group={group}
+          onClose={() => setOpen(false)}
+          onDeleted={onDeleted}
         />
-      }
-      header={
-        <FormattedMessage id="group.actions.delete.confirmation.header" />
-      }
-      content={
-        <FormattedMessage
-          id="group.actions.delete.confirmation.content"
-          values={{ name: <i>{name}</i> }}
-        />
-      }
-      onConfirm={() => deleteGroup({ id })}
-    />
+      )}
+    </>
   );
 };
 
-ModalDelete.propTypes = {
-  group: PropTypes.object,
-  deleteGroup: PropTypes.func,
-};
+ModalDelete.propTypes = { group: PropTypes.object.isRequired };
 
-export const Group = ({ group, groupLoading, deleteGroup }) => {
+export const Group = () => {
+  const { id } = useParams();
+  const { group, loading, error, retry } = useGroup(id);
   const { formatMessage } = useIntl();
-  if (groupLoading || !group.id) return null;
+  if (loading) return <p role="status">Cargando grupo…</p>;
+  if (error || !group) {
+    return (
+      <div role="alert">
+        No se ha podido cargar el grupo.
+        <Button type="button" onClick={() => retry().catch(() => {})}>
+          Reintentar
+        </Button>
+      </div>
+    );
+  }
   const actions = [
     {
       key: "delete",
       icon: "trash alternate outline",
       value: "delete",
       as: ModalDelete,
-      deleteGroup,
       group,
       selected: false,
       active: false,
@@ -78,15 +87,4 @@ export const Group = ({ group, groupLoading, deleteGroup }) => {
   );
 };
 
-Group.propTypes = {
-  group: PropTypes.object,
-  groupLoading: PropTypes.bool,
-  deleteGroup: PropTypes.func,
-};
-
-const mapStateToProps = (state) => ({
-  group: state.group,
-  groupLoading: state.groupLoading,
-});
-
-export default connect(mapStateToProps, { deleteGroup })(Group);
+export default Group;

package/src/groups/components/GroupCard.js

@@ -1,61 +1,58 @@
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { Button, Card, Icon } from "semantic-ui-react";
+import { Icon } from "semantic-ui-react";
 import { Link } from "react-router";
-import { FormattedMessage } from "react-intl";
-import ConfirmModal from "@truedat/core/components/ConfirmModal";
+import { useIntl } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
-import { deleteGroup } from "../routines";
 
-export const GroupCard = ({
-  group: { name, description, alias, id },
-  deleteGroup,
-}) => (
-  <Card key={id}>
-    <Card.Content>
-      <Card.Header as={Link} to={linkTo.GROUP({ id })}>
-        <Icon name="group" />
-        {alias || name}
-      </Card.Header>
-      <Card.Description>{description}</Card.Description>
-    </Card.Content>
-    <Card.Content extra>
-      <div className="ui two buttons">
-        <Button
-          basic
-          color="green"
-          as={Link}
+export const GroupCard = ({ group }) => {
+  const { formatMessage } = useIntl();
+  const { id, name, alias, description, users } = group;
+  const displayName = alias || name;
+  const count = Array.isArray(users) ? users.length : null;
+  const isEmpty = count === 0;
+  return (
+    <article className="td-group-card">
+      <Link className="gc-content" to={linkTo.GROUP({ id })}>
+        <span className="gc-avatar" aria-hidden="true">
+          <Icon name="users" />
+        </span>
+        <h3>{displayName}</h3>
+        {alias && alias !== name && <span className="gc-name">{name}</span>}
+        {description && <p className="gc-description">{description}</p>}
+      </Link>
+      <div className="gc-actions">
+        <Link
           to={linkTo.GROUP_EDIT({ id })}
-          content={<FormattedMessage id="actions.edit" />}
-        />
-        <ConfirmModal
-          icon="trash"
-          trigger={
-            <Button
-              basic
-              negative
-              content={<FormattedMessage id="actions.delete" />}
-            />
-          }
-          header={
-            <FormattedMessage id="group.actions.delete.confirmation.header" />
-          }
-          content={
-            <FormattedMessage
-              id="group.actions.delete.confirmation.content"
-              values={{ name: <i>{alias || name}</i> }}
-            />
-          }
-          onConfirm={() => deleteGroup({ id })}
-        />
+          aria-label={formatMessage({ id: "actions.edit" })}
+          title={formatMessage({ id: "actions.edit" })}
+        >
+          <Icon name="pencil alternate" />
+          <span className="gc-action-label">
+            {formatMessage({ id: "actions.edit" })}
+          </span>
+        </Link>
       </div>
-    </Card.Content>
-  </Card>
-);
-
-GroupCard.propTypes = {
-  group: PropTypes.object,
-  deleteGroup: PropTypes.func,
+      {count !== null && (
+        <span className={`gc-count${isEmpty ? " gc-count--empty" : ""}`}>
+          <Icon name="users" />
+          {isEmpty ? (
+            <span className="gc-count-empty-marker" aria-hidden="true">
+              -
+            </span>
+          ) : (
+            count
+          )}
+          <span className="gc-count-label">
+            {formatMessage(
+              isEmpty
+                ? { id: "group.members.none", defaultMessage: "Sin miembros" }
+                : { id: "navigation.members", defaultMessage: "miembros" },
+            )}
+          </span>
+        </span>
+      )}
+    </article>
+  );
 };
-
-export default connect(null, { deleteGroup })(GroupCard);
+GroupCard.propTypes = { group: PropTypes.object.isRequired };
+export default GroupCard;

package/src/groups/components/GroupCards.js

@@ -1,33 +1,68 @@
 import PropTypes from "prop-types";
 import { Link } from "react-router";
-import { connect } from "react-redux";
-import { Icon, Card } from "semantic-ui-react";
+import { Button, Icon } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { GROUP_CREATE } from "@truedat/core/routes";
+import { useGroups } from "../hooks/useGroups";
 import GroupCard from "./GroupCard";
 
-export const GroupCards = ({ groups }) => (
-  <Card.Group>
-    <Card link as={Link} to={GROUP_CREATE} className="create group">
-      <Card.Content textAlign="center">
-        <Card.Header>
-          <FormattedMessage id="groups.actions.create" />
-        </Card.Header>
-        <Card.Description>
-          <Icon floated="center" name="add" size="massive" />
-        </Card.Description>
-      </Card.Content>
-    </Card>
-    {groups.map((group, i) => (
-      <GroupCard key={i} group={group} />
-    ))}
-  </Card.Group>
+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"
+            />
+          </svg>
+        </span>
+        <FormattedMessage id="groups.actions.create" />
+      </Button>
+    </div>
+    <div className="groups-card-list">
+      {groups.map((group) => (
+        <GroupCard key={group.id} group={group} />
+      ))}
+    </div>
+  </>
 );
-
-GroupCards.propTypes = {
-  groups: PropTypes.array,
+GroupCards.propTypes = { groups: PropTypes.array };
+export const GroupsList = () => {
+  const { groups, error, loading, retry } = useGroups();
+  return (
+    <>
+      {loading && (
+        <p role="status">
+          <FormattedMessage
+            id="group.loading"
+            defaultMessage="Cargando grupo…"
+          />
+        </p>
+      )}
+      {error && (
+        <div role="alert">
+          <FormattedMessage id="group.unavailable" />
+          <Button onClick={() => retry().catch(() => {})}>
+            <FormattedMessage
+              id="group.members.retry"
+              defaultMessage="Reintentar"
+            />
+          </Button>
+        </div>
+      )}
+      <GroupCards groups={groups} />
+    </>
+  );
 };
-
-const mapStateToProps = ({ groups }) => ({ groups });
-
-export default connect(mapStateToProps)(GroupCards);
+export default GroupsList;

package/src/groups/components/GroupDeleteModal.js

@@ -0,0 +1,98 @@
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { TrueModal } from "@truedat/core/components/TrueModal";
+import { useGroupOperation } from "../hooks/useGroupOperation";
+
+export const GroupDeleteModal = ({ group, onClose, onDeleted, member }) => {
+  const { formatMessage } = useIntl();
+  const { submit, pending, failed } = useGroupOperation(
+    member ? "removeMember" : "delete",
+    group?.id,
+    () => {
+      onClose();
+      onDeleted?.();
+    },
+  );
+  const message = (id, defaultMessage) => formatMessage({ id, defaultMessage });
+  return (
+    <TrueModal
+      open
+      size="mini"
+      headerColor="#ffffff"
+      headerTextColor="var(--td-danger, #b91c1c)"
+      aria-busy={pending}
+      className="group-modal group-modal--delete"
+      title={message(
+        member
+          ? "groupUsers.actions.delete.confirmation.header"
+          : "group.actions.delete.confirmation.header",
+      )}
+      icon="warning sign"
+      onClose={() => !pending && onClose()}
+      closeDisabled={pending}
+      closeOnEscape={!pending}
+      closeOnDimmerClick={!pending}
+      banner={
+        failed
+          ? message(
+              "group.operation.error",
+              "No se ha podido completar la operación. Inténtalo de nuevo.",
+            )
+          : null
+      }
+      bannerType="danger"
+      actions={[
+        {
+          key: "cancel",
+          content: message("actions.cancel"),
+          secondary: true,
+          disabled: pending,
+          onClick: onClose,
+        },
+        {
+          key: "delete",
+          content: message("actions.delete"),
+          negative: true,
+          loading: pending,
+          disabled: pending,
+          onClick: () => submit(member ? { id: member.id } : {}),
+        },
+      ]}
+    >
+      <p>
+        {formatMessage(
+          {
+            id: member
+              ? "groupUsers.actions.delete.confirmation.content"
+              : "group.delete.description",
+            defaultMessage: member
+              ? "Se va a eliminar al usuario seleccionado del grupo, ¿estás seguro?"
+              : "Se va a eliminar el grupo <strong>{name}</strong>. <danger>Esta acción no se puede deshacer.</danger>",
+          },
+          {
+            name: group?.alias || group?.name,
+            strong: (chunks) => <strong>{chunks}</strong>,
+            danger: (chunks) => (
+              <span className="group-danger-text">{chunks}</span>
+            ),
+          },
+        )}
+      </p>
+      {!member && (
+        <p>
+          {message(
+            "group.delete.confirm",
+            "¿Seguro que quieres eliminar este grupo?",
+          )}
+        </p>
+      )}
+    </TrueModal>
+  );
+};
+GroupDeleteModal.propTypes = {
+  group: PropTypes.object.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onDeleted: PropTypes.func,
+  member: PropTypes.object,
+};
+export default GroupDeleteModal;

package/src/groups/components/GroupDropdown.js

@@ -0,0 +1,92 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { Form } from "semantic-ui-react";
+
+const GroupDropdown = ({ onOpen, onClose, ...props }) => {
+  const anchor = useRef(null);
+  const [open, setOpen] = useState(false);
+  useLayoutEffect(() => {
+    if (!open) return undefined;
+    const trigger = anchor.current?.querySelector(".ui.dropdown");
+    const menu = trigger?.querySelector(":scope > .menu");
+    if (!menu) return undefined;
+    const previousStyle = menu.getAttribute("style");
+    const frame = { current: null };
+    const position = () => {
+      const rect = trigger.getBoundingClientRect();
+      const below = window.innerHeight - rect.bottom - 8;
+      const above = rect.top - 8;
+      const upward = below < 180 && above > below;
+      const maxHeight = Math.max(0, Math.min(180, upward ? above : below));
+      const width = Math.min(rect.width, window.innerWidth - 16);
+      const styles = {
+        position: "fixed",
+        margin: "0",
+        inset: "auto",
+        left: `${Math.max(8, Math.min(rect.left, window.innerWidth - width - 8))}px`,
+        width: `${width}px`,
+        minWidth: "0",
+        maxHeight: `${maxHeight}px`,
+        top: upward ? "auto" : `${rect.bottom}px`,
+        bottom: upward ? `${window.innerHeight - rect.top}px` : "auto",
+      };
+      Object.assign(menu.style, styles);
+    };
+    const schedule = (event) => {
+      if (event?.target === menu) return;
+      cancelAnimationFrame(frame.current);
+      frame.current = requestAnimationFrame(position);
+    };
+    menu.classList.add("group-dropdown-layer");
+    menu.setAttribute("popover", "manual");
+    position();
+    menu.showPopover?.();
+    const handleEscape = (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      setOpen(false);
+    };
+    window.addEventListener("keydown", handleEscape, true);
+    window.addEventListener("resize", schedule);
+    document.addEventListener("scroll", schedule, true);
+    const observer =
+      typeof ResizeObserver === "undefined"
+        ? null
+        : new ResizeObserver(schedule);
+    observer?.observe(trigger);
+    return () => {
+      cancelAnimationFrame(frame.current);
+      observer?.disconnect();
+      window.removeEventListener("keydown", handleEscape, true);
+      window.removeEventListener("resize", schedule);
+      document.removeEventListener("scroll", schedule, true);
+      if (menu.hidePopover && menu.matches(":popover-open")) menu.hidePopover();
+      menu.removeAttribute("popover");
+      menu.classList.remove("group-dropdown-layer");
+      if (previousStyle === null) menu.removeAttribute("style");
+      else menu.setAttribute("style", previousStyle);
+    };
+  }, [open]);
+  return (
+    <div className="group-dropdown-anchor" ref={anchor}>
+      <Form.Dropdown
+        {...props}
+        open={open}
+        onOpen={(event, data) => {
+          anchor.current
+            ?.querySelector("input.search")
+            ?.focus({ preventScroll: true });
+          setOpen(true);
+          onOpen?.(event, data);
+        }}
+        onClose={(event, data) => {
+          setOpen(false);
+          onClose?.(event, data);
+        }}
+      />
+    </div>
+  );
+};
+GroupDropdown.propTypes = { onOpen: PropTypes.func, onClose: PropTypes.func };
+export default GroupDropdown;