@truedat/auth 8.14.3 → 8.14.4

package/src/users/components/UserCards.js

@@ -3,53 +3,293 @@ 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 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";
 
-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 [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 {
+      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 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 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 usersByRole = _.flow(
-    _.sortBy("role"),
     _.groupBy("role"),
     _.toPairs,
-  )(users);
+  )(users).sort(roleSort);
 
   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"
+          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"
+            role="group"
+            aria-label={formatMessage({ id: "users.view.label" })}
+          >
+            {["cards", "table"].map((mode) => (
+              <Button
+                key={mode}
+                type="button"
+                toggle
+                active={view === mode}
+                aria-pressed={view === mode}
+                onClick={() => changeView(mode)}
+                icon={mode === "cards" ? "grid layout" : "list"}
+                content={formatMessage({ id: `users.view.${mode}` })}
+              />
             ))}
-          </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>
+      <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) && (
+          <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>
+      <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>
+      {view === "table" ? (
+        <UsersTable users={users} sort={sort} onSort={setSort} />
+      ) : (
+        <Accordion fluid styled className="users-role-accordion">
+          {usersByRole.map(([role, users]) => {
+            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>
+                </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 +306,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;

package/src/users/components/UserGroupAcls.js

@@ -15,10 +15,10 @@ export const UserGroupAcls = ({ acls }) => {
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell
-              content={formatMessage({ id: "user.acl.domain" })}
+              content={formatMessage({ id: "user.acl.group" })}
             />
             <Table.HeaderCell
-              content={formatMessage({ id: "user.acl.group" })}
+              content={formatMessage({ id: "user.acl.domain" })}
             />
             <Table.HeaderCell
               content={formatMessage({ id: "user.acl.role" })}

package/src/users/components/UserGroupLink.js

@@ -0,0 +1,21 @@
+import PropTypes from "prop-types";
+import { Icon } from "semantic-ui-react";
+import { Link } from "react-router";
+import { linkTo } from "@truedat/core/routes";
+
+const UserGroupLink = ({ id, name }) =>
+  id != null ? (
+    <Link to={linkTo.GROUP({ id })} target="_blank" rel="noopener noreferrer">
+      <Icon name="external alternate" aria-hidden="true" />
+      <span>{name}</span>
+    </Link>
+  ) : (
+    name
+  );
+
+UserGroupLink.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  name: PropTypes.string,
+};
+
+export default UserGroupLink;