@truedat/auth 8.14.3 → 8.14.5

package/src/users/components/UserCard.js

@@ -1,32 +1,181 @@
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { Icon, Card } from "semantic-ui-react";
+import { Icon, Card, Label, Popup } from "semantic-ui-react";
 import { Link } from "react-router";
+import { useIntl } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
-import { deleteUser } from "../routines";
 
-export const UserCard = ({
-  user: { user_name, id, full_name, email, external_id },
-  showFullName = true,
-}) => (
-  <Card key={id}>
-    <Card.Content>
-      <Card.Header as={Link} to={linkTo.USER({ id })}>
-        <Icon name="user" />
-        {user_name}
-      </Card.Header>
-      <Card.Description>
-        {showFullName ? full_name : external_id}
-        <br />
-        {email}
-      </Card.Description>
-    </Card.Content>
-  </Card>
+const getInitials = (fullName, userName) => {
+  const normalizedFullName = fullName?.trim() || "";
+
+  if (normalizedFullName) {
+    const parts = normalizedFullName.split(/\s+/);
+    return parts.length >= 2
+      ? (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+      : parts[0][0].toUpperCase();
+  }
+  return userName ? userName[0].toUpperCase() : "?";
+};
+
+const getGroupName = (group) => {
+  if (typeof group === "string") {
+    return group;
+  }
+
+  return group?.alias || group?.name || String(group);
+};
+
+const renderGroupsBadgeLabel = (groupsCount, id) => (
+  <Label
+    as={Link}
+    to={linkTo.USER({ id })}
+    attached="bottom right"
+    className="overlapping groups-badge"
+  >
+    <Icon name="users" />
+    {groupsCount}
+  </Label>
 );
 
+const GroupsBadge = ({ groups, id }) => {
+  const { formatMessage } = useIntl();
+  const groupsCount = groups.length;
+
+  if (groupsCount === 0) {
+    return null;
+  }
+
+  const label = renderGroupsBadgeLabel(groupsCount, id);
+
+  return (
+    <Popup
+      className="uc-groups-popover"
+      transition={{ duration: 0 }}
+      content={
+        <div className="uc-groups-popup">
+          <div className="uc-groups-popup__header">
+            <Icon name="users" />
+            <span>{formatMessage({ id: "user.form.groups" })}</span>
+          </div>
+          <ul className="uc-groups-popup__list">
+            {groups.map((group) => {
+              const groupName = getGroupName(group);
+              return (
+                <li className="uc-groups-popup__item" key={groupName}>
+                  <span className="uc-groups-popup__marker">
+                    {groupName[0]?.toUpperCase()}
+                  </span>
+                  <span className="uc-groups-popup__name">{groupName}</span>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      }
+      position="bottom center"
+      trigger={label}
+    />
+  );
+};
+
+GroupsBadge.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  groups: PropTypes.array,
+};
+
+export const UserCard = ({
+  user: { user_name, id, full_name, email, external_id, groups },
+}) => {
+  const { formatMessage } = useIntl();
+  const userName = user_name?.trim() || "";
+  const fullName = full_name?.trim() || "";
+  const displayName = fullName || userName;
+  const editUserLabel = formatMessage({ id: "users.actions.edit" });
+  const editPasswordLabel = formatMessage({
+    id: "user.actions.edit_password",
+  });
+  const usernameDetail = fullName ? userName : "";
+  const userEmail = email?.trim() || "";
+  const externalId = external_id?.trim() || "";
+  const userGroups = groups || [];
+
+  return (
+    <Card key={id} className="td-card-base td-card--user">
+      <Card.Content
+        as={Link}
+        className="uc-card-link"
+        to={linkTo.USER({ id })}
+        aria-label={formatMessage(
+          { id: "user.info.open" },
+          { name: displayName },
+        )}
+      >
+        <div className="uc-summary">
+          <div className="uc-avatar">{getInitials(full_name, user_name)}</div>
+          <div className="uc-name" title={displayName}>
+            {displayName}
+          </div>
+        </div>
+
+        <div className="uc-meta-grid">
+          {usernameDetail && (
+            <>
+              <Icon name="user" />
+              <span className="uc-username">{usernameDetail}</span>
+            </>
+          )}
+          {userEmail && (
+            <>
+              <Icon name="mail" />
+              <span className="uc-email">{userEmail}</span>
+            </>
+          )}
+          {externalId && (
+            <>
+              <Icon name="id badge" />
+              <span
+                className="uc-external-id"
+                title={`${formatMessage({
+                  id: "user.form.external_id",
+                  defaultMessage: "External ID",
+                })}: ${externalId}`}
+              >
+                {externalId}
+              </span>
+            </>
+          )}
+        </div>
+      </Card.Content>
+
+      <div className="uc-actions">
+        <Link
+          className="uc-action-btn"
+          to={linkTo.USER_EDIT({ id })}
+          aria-label={editUserLabel}
+          title={editUserLabel}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Icon name="pencil alternate" />
+          <span className="uc-action-label">{editUserLabel}</span>
+        </Link>
+        <Link
+          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" />
+          <span className="uc-action-label">{editPasswordLabel}</span>
+        </Link>
+      </div>
+
+      <GroupsBadge groups={userGroups} id={id} />
+    </Card>
+  );
+};
+
 UserCard.propTypes = {
   user: PropTypes.object,
-  showFullName: PropTypes.bool,
 };
 
-export default connect(null, { deleteUser })(UserCard);
+export default UserCard;

package/src/users/components/UserCards.js

@@ -3,53 +3,208 @@ import { Fragment, useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Link } from "react-router";
-import { Button, Card, Header, Icon, Message } from "semantic-ui-react";
+import {
+  Accordion,
+  Button,
+  Card,
+  Input,
+  Header,
+  Icon,
+  Label,
+  Message,
+} from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
-import SearchInput from "@truedat/core/components/SearchInput";
 import { USERS_NEW } from "@truedat/core/routes";
 import { filterUsers } from "../selectors/filterUsers";
 import UserCard from "./UserCard";
+import UsersTable from "./UsersTable";
 
-export const UserCards = ({ users: allUsers, showFullName }) => {
+const ROLE_ORDER = ["admin", "user", "agent", "service"];
+const rolePosition = (role = "") => {
+  const position = ROLE_ORDER.indexOf(_.toLower(role));
+  return position === -1 ? ROLE_ORDER.length : position;
+};
+const userSortKey = ({ full_name = "", user_name = "" }) =>
+  `${_.toLower(full_name)}|${_.toLower(user_name)}`;
+const roleSort = ([roleA], [roleB]) => {
+  const posA = rolePosition(roleA);
+  const posB = rolePosition(roleB);
+  if (posA === posB && posA === ROLE_ORDER.length) {
+    return _.toLower(roleA).localeCompare(_.toLower(roleB));
+  }
+  return posA - posB;
+};
+
+export const UserCards = ({ users: allUsers }) => {
   const [filter, setFilter] = useState("");
+  const [sort, setSort] = useState({ column: "name", ascending: true });
+  const [view, setView] = useState(() => {
+    try {
+      return localStorage.getItem("truedat.users.view") === "table"
+        ? "table"
+        : "cards";
+    } catch {
+      return "cards";
+    }
+  });
+  const changeView = (value) => {
+    setView(value);
+    try {
+      localStorage.setItem("truedat.users.view", value);
+    } catch {
+      /* Storage may be unavailable. The selection remains local. */
+    }
+  };
+  const [openRoles, setOpenRoles] = useState({});
   const { formatMessage } = useIntl();
-  const users = _.flow(_.sortBy("user_name"), filterUsers(filter))(allUsers);
+  const toggleRole = (role) => {
+    setOpenRoles((prev) => ({ ...prev, [role]: !(prev[role] ?? true) }));
+  };
+  const resetFilters = () => setFilter("");
+  const users = _.flow(
+    filterUsers(filter),
+    _.sortBy(userSortKey),
+  )(allUsers || []);
+  const hasFilters = Boolean(filter.trim());
   const usersByRole = _.flow(
-    _.sortBy("role"),
     _.groupBy("role"),
     _.toPairs,
-  )(users);
+  )(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 (
     <>
-      <SearchInput
-        onChange={(_e, data) => _.flow(_.propOr("", "value"), setFilter)(data)}
-        placeholder={formatMessage({ id: "user.search.placeholder" })}
-        value={filter}
-      />
-      <Button
-        floated="right"
-        primary
-        content={formatMessage({ id: "users.actions.create" })}
-        icon="add user"
-        as={Link}
-        to={USERS_NEW}
-      />
-      {usersByRole.map(([role, users]) => (
-        <Fragment key={role}>
-          <Header
-            as="h3"
-            dividing
-            content={formatMessage({ id: `user.type.${role}` })}
-          />
-          <Card.Group>
-            {users.map((user, i) => (
-              <UserCard key={i} user={user} showFullname={showFullName} />
+      <div className="users-toolbar">
+        <Input
+          iconPosition="left"
+          value={filter}
+          onChange={(_event, { value }) => setFilter(value)}
+          placeholder={formatMessage({ id: "user.search.placeholder" })}
+        >
+          <Icon name="search" aria-hidden="true" />
+          <input />
+        </Input>
+        <div className="users-toolbar-actions">
+          <div
+            className="ui buttons users-view-buttons"
+            role="group"
+            aria-label={formatMessage({ id: "users.view.label" })}
+          >
+            {["cards", "table"].map((mode) => (
+              <button
+                key={mode}
+                type="button"
+                className={`ui ${view === mode ? "active primary " : ""}button`}
+                aria-pressed={view === mode}
+                onClick={() => changeView(mode)}
+              >
+                <Icon name={mode === "cards" ? "grid layout" : "list"} />
+                {formatMessage({ id: `users.view.${mode}` })}
+              </button>
             ))}
-          </Card.Group>
-        </Fragment>
-      ))}
-      {_.trim(filter) !== "" && _.isEmpty(users) ? (
+          </div>
+          <Button
+            primary
+            content={formatMessage({ id: "users.actions.create" })}
+            icon="add user"
+            as={Link}
+            to={USERS_NEW}
+          />
+        </div>
+      </div>
+      {hasFilters && (
+        <div className="selectedFilters users-filters">
+          <a
+            className="resetFilters"
+            role="button"
+            tabIndex={0}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                event.currentTarget.click();
+              }
+            }}
+            onClick={resetFilters}
+          >
+            <FormattedMessage id="users.filter.clear" />
+          </a>
+        </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], index) => {
+            const active = openRoles[role] ?? true;
+            const panelId = `users-role-panel-${role}`;
+
+            return (
+              <Fragment key={role}>
+                <Accordion.Title
+                  active={active}
+                  className={`users-role-title users-role-title--${role}`}
+                >
+                  <button
+                    type="button"
+                    className="users-role-toggle"
+                    aria-expanded={active}
+                    aria-controls={panelId}
+                    onClick={() => toggleRole(role)}
+                  >
+                    <span className="users-role-title-content">
+                      <Icon
+                        className="users-role-chevron"
+                        name={active ? "angle up" : "angle down"}
+                        aria-hidden="true"
+                      />
+                      <Header as="h3" className="users-role-title-header">
+                        <Header.Content>
+                          {formatMessage({ id: `user.type.${role}` })}
+                        </Header.Content>
+                      </Header>
+                      <Label circular className="users-role-count">
+                        {users.length}
+                      </Label>
+                    </span>
+                  </button>
+                  {index === 0 && results}
+                </Accordion.Title>
+                <Accordion.Content
+                  id={panelId}
+                  active={active}
+                  className="users-role-content"
+                >
+                  <Card.Group className="users-role-card-group">
+                    {users.map((user, i) => (
+                      <UserCard key={user.id || i} user={user} />
+                    ))}
+                  </Card.Group>
+                </Accordion.Content>
+              </Fragment>
+            );
+          })}
+        </Accordion>
+      )}
+      {_.isEmpty(users) ? (
         <Message
           className="users-message"
           header={
@@ -66,13 +221,11 @@ export const UserCards = ({ users: allUsers, showFullName }) => {
 
 UserCards.propTypes = {
   users: PropTypes.array,
-  showFullName: PropTypes.bool,
 };
 
 export const mapStateToProps = (state) => ({
   users: state.users,
   UserCard: state.userCard,
-  showFullName: state.userCardFullName,
 });
 
 export default connect(mapStateToProps)(UserCards);

package/src/users/components/UserFormFields.js

@@ -0,0 +1,206 @@
+import PropTypes from "prop-types";
+import { Form } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { Controller } from "react-hook-form";
+import UserTypeSelector from "./UserTypeSelector";
+
+const isEmail = (value) => !value || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+
+const groupName = (group) => (typeof group === "string" ? group : group.name);
+
+const buildGroupOptions = (groups = [], selected = []) => {
+  const fromGroups = groups.map((g, i) => ({
+    key: `g_${i}`,
+    text: typeof g === "string" ? g : g.alias || g.name || "",
+    value: typeof g === "string" ? g : g.name || "",
+  }));
+  const existing = groups.map(groupName);
+  const fromSelected = (selected || [])
+    .filter((v) => typeof v === "string" && !existing.includes(v))
+    .filter((v, i, a) => a.indexOf(v) === i)
+    .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
+    .map((text, i) => ({ key: `s_${i}`, text, value: text }));
+  return [...fromGroups, ...fromSelected];
+};
+
+const TextField = ({
+  control,
+  errors,
+  name,
+  rules,
+  disabled,
+  icon,
+  required,
+}) => {
+  const { formatMessage } = useIntl();
+  return (
+    <Controller
+      control={control}
+      name={name}
+      rules={rules}
+      render={({ field: { onBlur, onChange, value, ref } }) => (
+        <Form.Input
+          name={name}
+          input={{ ref }}
+          disabled={disabled}
+          id={name}
+          autoComplete="off"
+          {...(icon ? { icon, iconPosition: "left" } : {})}
+          error={errors[name]?.message}
+          label={{
+            children: formatMessage({ id: `user.form.${name}` }),
+            htmlFor: name,
+          }}
+          onBlur={onBlur}
+          onChange={(_e, { value: v }) => onChange(v)}
+          placeholder={formatMessage({ id: `user.form.placeholder.${name}` })}
+          value={value}
+          required={required}
+        />
+      )}
+    />
+  );
+};
+
+TextField.propTypes = {
+  control: PropTypes.object.isRequired,
+  errors: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  rules: PropTypes.object,
+  disabled: PropTypes.bool,
+  icon: PropTypes.string,
+  required: PropTypes.bool,
+};
+
+const Section = ({ barClass, labelId, children }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <>
+      <div className="um-section-header">
+        <div className={`um-section-bar um-section-bar--${barClass}`} />
+        <span className="um-section-label">
+          {formatMessage({ id: labelId })}
+        </span>
+      </div>
+      {children}
+    </>
+  );
+};
+
+Section.propTypes = {
+  barClass: PropTypes.string.isRequired,
+  labelId: PropTypes.string.isRequired,
+  children: PropTypes.node,
+};
+
+// Personal, type and account fields shared by the create and edit user modals.
+// Both modals validate and focus the first invalid field the same way.
+export const UserFormFields = ({ control, errors, isSubmitting, groups }) => {
+  const { formatMessage } = useIntl();
+  const requiredMessage = (field) =>
+    formatMessage(
+      { id: "form.validation.required" },
+      { prop: formatMessage({ id: `user.form.${field}` }) },
+    );
+
+  return (
+    <>
+      <div className="um-form-top um-section">
+        <div className="um-section">
+          <Section barClass="personal" labelId="user.section.personal">
+            <div className="um-personal-fields">
+              <TextField
+                control={control}
+                errors={errors}
+                name="full_name"
+                rules={{ required: requiredMessage("full_name") }}
+                disabled={isSubmitting}
+                icon="user"
+                required
+              />
+              <TextField
+                control={control}
+                errors={errors}
+                name="email"
+                rules={{
+                  validate: (v) =>
+                    isEmail(v) ||
+                    formatMessage({ id: "form.validation.email.invalid" }),
+                }}
+                disabled={isSubmitting}
+                icon="at"
+              />
+            </div>
+          </Section>
+        </div>
+        <Controller
+          control={control}
+          name="role"
+          render={({ field: { onBlur, onChange, value } }) => (
+            <UserTypeSelector
+              disabled={isSubmitting}
+              id="role"
+              label={formatMessage({ id: "user.form.role" })}
+              onBlur={onBlur}
+              onChange={onChange}
+              value={value || "user"}
+              required
+            />
+          )}
+        />
+      </div>
+      <div className="um-section">
+        <Section barClass="account" labelId="user.section.account">
+          <div className="um-form-grid">
+            <TextField
+              control={control}
+              errors={errors}
+              name="user_name"
+              rules={{ required: requiredMessage("user_name") }}
+              disabled={isSubmitting}
+              icon="user circle"
+              required
+            />
+            <TextField
+              control={control}
+              errors={errors}
+              name="external_id"
+              disabled={isSubmitting}
+            />
+          </div>
+        </Section>
+        <Controller
+          control={control}
+          name="groups"
+          render={({ field: { onBlur, onChange, value } }) => (
+            <Form.Dropdown
+              disabled={isSubmitting}
+              id="groups"
+              label={formatMessage({ id: "user.form.groups" })}
+              search
+              selection
+              multiple
+              allowAdditions
+              options={buildGroupOptions(groups, value)}
+              onBlur={onBlur}
+              onChange={(_e, { value: v }) => onChange(v)}
+              placeholder={formatMessage({
+                id: "user.form.placeholder.groups",
+              })}
+              value={value}
+            />
+          )}
+        />
+      </div>
+    </>
+  );
+};
+
+UserFormFields.propTypes = {
+  control: PropTypes.object.isRequired,
+  errors: PropTypes.object.isRequired,
+  isSubmitting: PropTypes.bool,
+  groups: PropTypes.array,
+};
+
+export default UserFormFields;

package/src/users/components/UserGroupAclRow.js

@@ -1,11 +1,16 @@
 import PropTypes from "prop-types";
 import { Table } from "semantic-ui-react";
 import { DomainTooltip } from "@truedat/bg/taxonomy/components/DomainPath";
+import UserGroupLink from "./UserGroupLink";
 
-export const UserGroupAclRow = ({ resource, role, group }) => (
+export const UserGroupAclRow = ({ resource, role, group, groupId }) => (
   <Table.Row>
+    <Table.Cell>
+      <span className="um-group-chip">
+        <UserGroupLink id={groupId} name={group} />
+      </span>
+    </Table.Cell>
     <Table.Cell content={<DomainTooltip domain={resource} />} />
-    <Table.Cell content={group} />
     <Table.Cell content={role} />
   </Table.Row>
 );
@@ -14,6 +19,7 @@ UserGroupAclRow.propTypes = {
   resource: PropTypes.object,
   role: PropTypes.string,
   group: PropTypes.string,
+  groupId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
 export default UserGroupAclRow;