@truedat/auth 8.5.9 → 8.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/auth",
-  "version": "8.5.9",
+  "version": "8.6.1",
   "description": "Truedat Web Auth",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -51,15 +51,15 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.5.9",
+    "@truedat/test": "8.6.1",
     "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.5.9",
-    "auth0-js": "^9.28.0",
+    "@truedat/core": "8.6.1",
+    "auth0-js": "^10.0.0",
     "axios": "^1.15.0",
     "graphql": "^16.11.0",
     "is-hotkey": "^0.2.0",
@@ -93,5 +93,5 @@
   "resolutions": {
     "superagent@npm:^7.1.5": "10.2.3"
   },
-  "gitHead": "45e6137b5aa9452db78901e8b0eaa16cc7953b7c"
+  "gitHead": "932eb0895ec71961f52a09309b99ae017977a899"
 }

package/src/groups/components/Group.js

@@ -62,7 +62,10 @@ export const Group = ({ group, groupLoading, deleteGroup }) => {
             })}
           />
           <Header.Content>
-            {group.name}{" "}
+            {group.alias ? group.alias : group.name}{" "}
+            {group.alias ? (
+              <Header.Subheader>{group.name}</Header.Subheader>
+            ) : null}
             <Header.Subheader>{group.description}</Header.Subheader>
           </Header.Content>
         </Header>

package/src/groups/components/GroupCard.js

@@ -8,14 +8,14 @@ import { linkTo } from "@truedat/core/routes";
 import { deleteGroup } from "../routines";
 
 export const GroupCard = ({
-  group: { name, description, id },
+  group: { name, description, alias, id },
   deleteGroup,
 }) => (
   <Card key={id}>
     <Card.Content>
       <Card.Header as={Link} to={linkTo.GROUP({ id })}>
         <Icon name="group" />
-        {name}
+        {alias || name}
       </Card.Header>
       <Card.Description>{description}</Card.Description>
     </Card.Content>
@@ -43,7 +43,7 @@ export const GroupCard = ({
           content={
             <FormattedMessage
               id="group.actions.delete.confirmation.content"
-              values={{ name: <i>{name}</i> }}
+              values={{ name: <i>{alias || name}</i> }}
             />
           }
           onConfirm={() => deleteGroup({ id })}

package/src/groups/components/GroupForm.js

@@ -80,6 +80,22 @@ export const GroupForm = ({
           />
         )}
       />
+      <Controller
+        control={control}
+        name="alias"
+        render={({ field: { onBlur, onChange, value } }) => (
+          <Form.Input
+            autoComplete="off"
+            label={formatMessage({ id: "group.props.alias" })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({
+              id: "group.form.alias.placeholder",
+            })}
+            value={value || ""}
+          />
+        )}
+      />
       <Controller
         control={control}
         name="user_ids"

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

@@ -1,15 +1,77 @@
+import { fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
-import Group from "../Group";
+import ConnectedGroup, { Group } from "../Group";
 
 const group = { id: 2, name: "grupo1 ", description: "aaa bbb cc" };
 
-const renderOpts = {
-  state: { group, deleteGroup: jest.fn() },
-};
-
 describe("<Group />", () => {
   it("matches the latest snapshot", () => {
-    const { container } = render(<Group />, renderOpts);
+    const { container } = render(
+      <Group group={group} deleteGroup={jest.fn()} groupLoading={false} />
+    );
     expect(container).toMatchSnapshot();
   });
+
+  it("renders alias with the group name as a subheader when alias is present", () => {
+    const group = {
+      id: 2,
+      name: "grupo1",
+      alias: "Grupo Alias",
+      description: "aaa bbb cc",
+    };
+    const { getByText } = render(
+      <Group group={group} deleteGroup={jest.fn()} />
+    );
+
+    expect(getByText("Grupo Alias")).toBeInTheDocument();
+    expect(getByText("grupo1")).toBeInTheDocument();
+  });
+
+  it("renders nothing while the group is loading", () => {
+    const rendered = render(
+      <Group group={group} deleteGroup={jest.fn()} groupLoading={true} />
+    );
+    expect(rendered.container).toBeEmptyDOMElement();
+  });
+
+  it("renders nothing when the group has no id", () => {
+    const rendered = render(
+      <Group
+        group={{ name: "no id", description: "x" }}
+        deleteGroup={jest.fn()}
+        groupLoading={false}
+      />
+    );
+    expect(rendered.container).toBeEmptyDOMElement();
+  });
+
+  it("maps group state from the store for the connected component", () => {
+    const rendered = render(<ConnectedGroup />, {
+      state: {
+        group: { id: 2, name: "from store", description: "stored desc" },
+        groupLoading: false,
+      },
+    });
+    expect(rendered.getByText(/from store/i)).toBeInTheDocument();
+  });
+
+  it("calls deleteGroup with the group id when delete is confirmed", async () => {
+    const user = userEvent.setup({ delay: null });
+    const deleteGroup = jest.fn();
+    const rendered = render(
+      <Group group={group} deleteGroup={deleteGroup} groupLoading={false} />
+    );
+    const dropdown = rendered.getByRole("listbox");
+    fireEvent.click(dropdown);
+    await waitFor(() =>
+      expect(rendered.getByText(/actions.delete/i)).toBeInTheDocument()
+    );
+    await user.click(rendered.getByText(/actions.delete/i));
+    await waitFor(() =>
+      expect(rendered.getByText(/confirmation.yes/i)).toBeInTheDocument()
+    );
+    await user.click(rendered.getByText(/confirmation.yes/i));
+    expect(deleteGroup).toHaveBeenCalledWith({ id: group.id });
+  });
 });

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

@@ -17,6 +17,20 @@ describe("<GroupCard />", () => {
     expect(rendered.container).toMatchSnapshot();
   });
 
+  it("renders alias instead of name when alias is present", async () => {
+    const aliasGroup = {
+      ...group,
+      alias: "Admins",
+    };
+    const rendered = render(
+      <GroupCard group={aliasGroup} deleteGroup={deleteGroup} />,
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText("Admins")).toBeInTheDocument();
+    expect(rendered.queryByText("administrators")).not.toBeInTheDocument();
+  });
+
   it("calls deleteGroup when delete button is clicked", async () => {
     const rendered = render(<GroupCard {...props} />);
     await waitForLoad(rendered);
@@ -26,7 +40,7 @@ describe("<GroupCard />", () => {
     await user.click(rendered.getByRole("button", { name: /delete/i }));
 
     await user.click(
-      rendered.getByRole("button", { name: /modal-affirmative-action/i })
+      rendered.getByRole("button", { name: /modal-affirmative-action/i }),
     );
 
     expect(deleteGroup).toHaveBeenCalledTimes(1);

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

@@ -0,0 +1,80 @@
+import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
+import GroupForm from "../GroupForm";
+
+describe("<GroupForm />", () => {
+  const renderOpts = {
+    state: {
+      users: [{ id: 101, full_name: "John Doe", user_name: "jdoe" }],
+    },
+  };
+
+  it("renders the alias input with the default group alias", async () => {
+    const group = {
+      id: 1,
+      name: "Administrators",
+      alias: "admin-group",
+      description: "Group description",
+    };
+
+    const rendered = render(
+      <GroupForm
+        group={group}
+        groupUsers={[{ id: 101 }]}
+        onSubmit={jest.fn()}
+      />,
+      renderOpts
+    );
+
+    await waitForLoad(rendered);
+    await waitFor(() =>
+      expect(
+        rendered.getByPlaceholderText(/group.form.alias.placeholder/i)
+      ).toHaveValue("admin-group")
+    );
+  });
+
+  it("updates name, description, alias and users fields", async () => {
+    const onSubmit = jest.fn();
+    const rendered = render(
+      <GroupForm group={{}} groupUsers={[]} onSubmit={onSubmit} />,
+      renderOpts
+    );
+
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+
+    await user.type(
+      rendered.getByPlaceholderText(/group.form.name.placeholder/i),
+      "Team Alpha"
+    );
+    await user.type(
+      rendered.getByPlaceholderText(/group.form.description.placeholder/i),
+      "Alpha description"
+    );
+    await user.type(
+      rendered.getByPlaceholderText(/group.form.alias.placeholder/i),
+      "alpha-team"
+    );
+
+    await user.click(rendered.getByRole("combobox"));
+    await user.click(rendered.getByRole("option", { name: /jdoe/i }));
+
+    await waitFor(() =>
+      expect(
+        rendered.getByPlaceholderText(/group.form.name.placeholder/i)
+      ).toHaveValue("Team Alpha")
+    );
+    expect(
+      rendered.getByPlaceholderText(/group.form.description.placeholder/i)
+    ).toHaveValue("Alpha description");
+    expect(
+      rendered.getByPlaceholderText(/group.form.alias.placeholder/i)
+    ).toHaveValue("alpha-team");
+    expect(rendered.getByText(/jdoe/i)).toBeInTheDocument();
+    expect(onSubmit).not.toHaveBeenCalled();
+    expect(rendered.getByRole("button", { name: /save/i })).not.toBeDisabled();
+  });
+});

package/src/groups/reducers/__tests__/groupRedirect.spec.js

@@ -1,10 +1,9 @@
-import { linkTo } from "@truedat/core/routes";
 import { clearRedirect } from "@truedat/core/routines";
 import {
   createGroup,
   deleteGroup,
   deleteGroupUser,
-  updateGroup
+  updateGroup,
 } from "../../routines";
 import { groupRedirect } from "..";
 
@@ -40,12 +39,9 @@ describe("reducers: groupRedirect", () => {
     );
   });
 
-  it("should handle the deleteGroupUser.SUCCESS action", () => {
-    const meta = { group_id: "1" };
-    const url = linkTo.GROUP({ id: "1" });
-
-    expect(groupRedirect("foo", { type: deleteGroupUser.SUCCESS, meta })).toBe(
-      url
+  it("should ignore deleteGroupUser.SUCCESS action", () => {
+    expect(groupRedirect("foo", { type: deleteGroupUser.SUCCESS })).toEqual(
+      "foo"
     );
   });
 

package/src/groups/reducers/__tests__/groupUsers.spec.js

@@ -1,4 +1,4 @@
-import { clearGroup, fetchGroup } from "../../routines";
+import { clearGroup, deleteGroupUser, fetchGroup } from "../../routines";
 import { groupUsers, initialState } from "../groupUsers";
 
 const fooState = { foo: "bar" };
@@ -14,20 +14,20 @@ describe("reducers: groupUsers", () => {
         id: 1,
         user_name: "user_name1",
         full_name: "user name 1",
-        email: "email1@test.com"
+        email: "email1@test.com",
       },
       {
         id: 2,
         user_name: "user_name2",
         full_name: "user name 2",
-        email: "email2@test.com"
-      }
+        email: "email2@test.com",
+      },
     ];
 
     expect(
       groupUsers(fooState, {
         type: fetchGroup.SUCCESS,
-        payload: { data: { users } }
+        payload: { data: { users } },
       })
     ).toBe(users);
   });
@@ -36,6 +36,24 @@ describe("reducers: groupUsers", () => {
     expect(groupUsers(fooState, { type: clearGroup.TRIGGER })).toEqual([]);
   });
 
+  it("should handle the deleteGroupUser action", () => {
+    const users = [
+      {
+        id: 2,
+        user_name: "user_name2",
+        full_name: "user name 2",
+        email: "email2@test.com",
+      },
+    ];
+
+    expect(
+      groupUsers(fooState, {
+        type: deleteGroupUser.SUCCESS,
+        payload: { data: { users } },
+      })
+    ).toBe(users);
+  });
+
   it("should ignore unknown actions", () => {
     expect(groupUsers(fooState, { type: "FOO" })).toBe(fooState);
   });

package/src/groups/reducers/group.js

@@ -3,7 +3,7 @@ import { clearGroup, fetchGroup, updateGroup, createGroup } from "../routines";
 
 const initialState = {};
 
-const pickFields = _.pick(["id", "name", "description"]);
+const pickFields = _.pick(["id", "name", "description", "alias"]);
 
 const group = (state = initialState, { type, payload }) => {
   switch (type) {

package/src/groups/reducers/groupRedirect.js

@@ -1,12 +1,10 @@
-import _ from "lodash/fp";
 import { clearRedirect } from "@truedat/core/routines";
-import { linkTo, GROUPS } from "@truedat/core/routes";
+import { GROUPS } from "@truedat/core/routes";
 import { createGroup, deleteGroup, updateGroup } from "../routines";
-import { deleteGroupUser } from "../../groups/routines";
 
 const initialState = "";
 
-export const groupRedirect = (state = initialState, { type, meta }) => {
+export const groupRedirect = (state = initialState, { type }) => {
   switch (type) {
     case clearRedirect.TRIGGER:
       return initialState;
@@ -16,10 +14,6 @@ export const groupRedirect = (state = initialState, { type, meta }) => {
       return GROUPS;
     case deleteGroup.SUCCESS:
       return GROUPS;
-    case deleteGroupUser.SUCCESS: {
-      const id = _.prop("group_id")(meta);
-      return linkTo.GROUP({ id });
-    }
     default:
       return state;
   }

package/src/groups/reducers/groupUsers.js

@@ -1,11 +1,12 @@
 import _ from "lodash/fp";
-import { clearGroup, fetchGroup } from "../routines";
+import { clearGroup, deleteGroupUser, fetchGroup } from "../routines";
 
 export const initialState = [];
 
 export const groupUsers = (state = initialState, { type, payload }) => {
   switch (type) {
     case fetchGroup.SUCCESS:
+    case deleteGroupUser.SUCCESS:
       return _.pathOr([], "data.users")(payload);
     case clearGroup.TRIGGER:
       return initialState;

package/src/groups/sagas/__tests__/deleteGroup.spec.js

@@ -0,0 +1,93 @@
+import { compile } from "path-to-regexp";
+import { testSaga } from "redux-saga-test-plan";
+import { apiJsonDelete, JSON_OPTS } from "@truedat/core/services/api";
+import { deleteGroupRequestSaga, deleteGroupSaga } from "../deleteGroup";
+import { deleteGroup, fetchGroups } from "../../routines";
+import { API_GROUP } from "../../api";
+
+describe("sagas: deleteGroupRequestSaga", () => {
+  it("should invoke deleteGroupSaga on deleteGroup.TRIGGER", () => {
+    expect(() => {
+      testSaga(deleteGroupRequestSaga)
+        .next()
+        .takeLatest(deleteGroup.TRIGGER, deleteGroupSaga)
+        .finish()
+        .isDone();
+    }).not.toThrow();
+  });
+
+  it("should throw exception if an unhandled action is received", () => {
+    expect(() => {
+      testSaga(deleteGroupRequestSaga)
+        .next()
+        .takeLatest("FOO", deleteGroupRequestSaga);
+    }).toThrow();
+  });
+});
+
+describe("sagas: deleteGroupSaga", () => {
+  const payload = { id: "1", name: "group-1" };
+  const url = compile(API_GROUP)({ id: `${payload.id}` });
+
+  it("should put a success action and fetchGroups when a response is returned", () => {
+    expect(() => {
+      testSaga(deleteGroupSaga, { payload })
+        .next()
+        .put(deleteGroup.request())
+        .next()
+        .call(apiJsonDelete, url, JSON_OPTS)
+        .next({ data: payload })
+        .put(deleteGroup.success(payload))
+        .next()
+        .put(fetchGroups())
+        .next()
+        .put(deleteGroup.fulfill())
+        .next()
+        .isDone();
+    }).not.toThrow();
+  });
+
+  it("should put a failure action when the call returns an error response", () => {
+    const error = {
+      response: { status: 500, data: { message: "Request failed" } },
+    };
+
+    expect(() => {
+      testSaga(deleteGroupSaga, { payload })
+        .next()
+        .put(deleteGroup.request())
+        .next()
+        .call(apiJsonDelete, url, JSON_OPTS)
+        .throw(error)
+        .put(
+          deleteGroup.failure({
+            status: 500,
+            data: { message: "Request failed" },
+          })
+        )
+        .next()
+        .put(deleteGroup.fulfill())
+        .next()
+        .isDone();
+    }).not.toThrow();
+  });
+
+  it("should put a failure action when the call returns an error message", () => {
+    const message = "Request failed";
+    const error = { message };
+
+    expect(() => {
+      testSaga(deleteGroupSaga, { payload })
+        .next()
+        .put(deleteGroup.request())
+        .next()
+        .call(apiJsonDelete, url, JSON_OPTS)
+        .throw(error)
+        .put(deleteGroup.failure(message))
+        .next()
+        .put(deleteGroup.fulfill())
+        .next()
+        .isDone();
+    }).not.toThrow();
+  });
+});

package/src/groups/sagas/deleteGroup.js

@@ -1,7 +1,7 @@
 import { compile } from "path-to-regexp";
 import { call, put, takeLatest } from "redux-saga/effects";
 import { apiJsonDelete, JSON_OPTS } from "@truedat/core/services/api";
-import { deleteGroup } from "../routines";
+import { deleteGroup, fetchGroups } from "../routines";
 import { API_GROUP } from "../api";
 
 const toApiPath = compile(API_GROUP);
@@ -13,6 +13,7 @@ export function* deleteGroupSaga({ payload }) {
     yield put(deleteGroup.request());
     const { data } = yield call(apiJsonDelete, url, JSON_OPTS);
     yield put(deleteGroup.success(data));
+    yield put(fetchGroups());
   } catch (error) {
     if (error.response) {
       const { status, data } = error.response;

package/src/messages/en.js

@@ -13,10 +13,12 @@ export default {
   "group.actions.delete.confirmation.header": "Delete Group",
   "group.form.description.placeholder": "Description",
   "group.form.name.placeholder": "Group Name",
+  "group.form.alias.placeholder": "Group Alias",
   "group.form.users.placeholder": "Select user",
   "group.props.description": "Description",
   "group.props.members": "{members} users",
   "group.props.name": "Name",
+  "group.props.alias": "Alias",
   "group.props.users": "Users",
   "groupUsers.actions.delete.confirmation.content": "Selected user will be deleted from group, ¿are you sure?",
   "groupUsers.actions.delete.confirmation.header": "Remove user from group",

package/src/messages/es.js

@@ -13,10 +13,12 @@ export default {
   "group.actions.delete.confirmation.header": "Eliminar grupo",
   "group.form.description.placeholder": "Description",
   "group.form.name.placeholder": "Nombre del grupo",
+  "group.form.alias.placeholder": "Alias del grupo",
   "group.form.users.placeholder": "Seleccionar usuario",
   "group.props.description": "Description",
   "group.props.members": "{members} usuarios",
   "group.props.name": "Nombre",
+  "group.props.alias": "Alias",
   "group.props.users": "Usuarios",
   "groupUsers.actions.delete.confirmation.content": "Se va a eliminar al usuario seleccionado del grupo, ¿está seguro?",
   "groupUsers.actions.delete.confirmation.header": "Eliminar usuario de grupo",

package/src/users/components/GroupUserCrumbs.js

@@ -15,7 +15,7 @@ export const GroupUserCrumbs = ({ group, groupLoading, action }) => {
       {action === "show" && (
         <>
           <Breadcrumb.Divider icon="right angle" />
-          {group.name}
+          {group.alias || group.name}
         </>
       )}
       {action === "add" && (
@@ -26,7 +26,7 @@ export const GroupUserCrumbs = ({ group, groupLoading, action }) => {
             to={linkTo.GROUP({ id: group.id })}
             active={action === "show"}
           >
-            {group.name}
+            {group.alias || group.name}
           </Breadcrumb.Section>
           <Breadcrumb.Divider icon="right angle" />
           <FormattedMessage id="groups.crumbs.groupUser.add" />

package/src/users/components/UserForm.js

@@ -6,17 +6,29 @@ import { Button, Form } from "semantic-ui-react";
 import { connect } from "react-redux";
 import { HistoryBackButton } from "@truedat/core/components";
 
-const toOption = (g, i) => ({ key: i, text: g, value: g });
+const groupOptions = (groups = [], values) => {
+  const groupOpts = _.map.convert({ cap: false })((g, i) => {
+    const displayText = typeof g === "string" ? g : g.alias || g.name || "";
+    const value = typeof g === "string" ? g : g.name || "";
+    return { key: `group_${i}`, text: displayText, value: value };
+  })(groups);
 
-const groupOptions = (groups, values) =>
-  _.flow(
-    _.concat(""),
-    _.concat(values),
+  const valueOpts = _.flow(
     _.filter(_.isString),
+    _.reject((value) =>
+      _.some((g) => (typeof g === "string" ? g : g.name) === value, groups),
+    ),
     _.uniq,
     _.sortBy(_.lowerCase),
-    _.map.convert({ cap: false })(toOption)
-  )(groups);
+    _.map.convert({ cap: false })((text, i) => ({
+      key: `value_${i}`,
+      text,
+      value: text,
+    })),
+  )(values || []);
+
+  return _.concat(groupOpts, valueOpts);
+};
 
 const userTypeOptions = (formatMessage) => [
   { text: formatMessage({ id: "user.type.user" }), value: "user" },
@@ -41,13 +53,13 @@ export const PasswordFormFields = ({ control, errors }) => {
         rules={{
           required: formatMessage(
             { id: "form.validation.required" },
-            { prop: formatMessage({ id: "user.form.password" }) }
+            { prop: formatMessage({ id: "user.form.password" }) },
           ),
           minLength: {
             value: 6,
             message: formatMessage(
               { id: "form.validation.minLength" },
-              { prop: formatMessage({ id: "user.form.password" }), value: 6 }
+              { prop: formatMessage({ id: "user.form.password" }), value: 6 },
             ),
           },
         }}
@@ -132,7 +144,7 @@ export const UserForm = ({ isSubmitting, onSubmit, user, groups }) => {
         rules={{
           required: formatMessage(
             { id: "form.validation.required" },
-            { prop: formatMessage({ id: "user.form.user_name" }) }
+            { prop: formatMessage({ id: "user.form.user_name" }) },
           ),
         }}
         render={({ field: { onBlur, onChange, value } }) => (
@@ -216,7 +228,7 @@ export const UserForm = ({ isSubmitting, onSubmit, user, groups }) => {
               error
                 ? formatMessage(
                     { id: "invalid", defaultMessage: "{prop} is required" },
-                    { prop: formatMessage({ id: "user.form.full_name" }) }
+                    { prop: formatMessage({ id: "user.form.full_name" }) },
                   )
                 : false
             }
@@ -265,7 +277,7 @@ export const UserForm = ({ isSubmitting, onSubmit, user, groups }) => {
             onBlur={onBlur}
             onChange={(_e, { value }) => onChange(value)}
             placeholder={formatMessage({ id: "user.form.placeholder.groups" })}
-            value={value || ""}
+            value={value || []}
           />
         )}
       />
@@ -294,12 +306,12 @@ UserForm.propTypes = {
   isSubmitting: PropTypes.bool,
   onSubmit: PropTypes.func,
   user: PropTypes.object,
-  groups: PropTypes.arrayOf(PropTypes.string),
+  groups: PropTypes.array,
 };
 
 const mapStateToProps = ({ userUpdating, userCreating, groups }) => ({
   isSubmitting: userUpdating || userCreating,
-  groups: _.map("name")(groups),
+  groups: groups || [],
 });
 
 export default connect(mapStateToProps)(UserForm);

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

@@ -0,0 +1,73 @@
+import { render } from "@truedat/test/render";
+import { GroupUserCrumbs } from "../GroupUserCrumbs";
+
+describe("<GroupUserCrumbs />", () => {
+  const group = {
+    id: "1",
+    name: "administrators",
+    alias: "Admins",
+  };
+
+  it("renders alias when action is show", () => {
+    const rendered = render(
+      <GroupUserCrumbs group={group} action="show" groupLoading={false} />
+    );
+
+    expect(rendered.getByText("Admins")).toBeInTheDocument();
+    expect(rendered.queryByText("administrators")).not.toBeInTheDocument();
+  });
+
+  it("renders alias link when action is add", () => {
+    const rendered = render(
+      <GroupUserCrumbs group={group} action="add" groupLoading={false} />
+    );
+
+    expect(rendered.getByRole("link", { name: /Admins/i })).toBeInTheDocument();
+  });
+
+  it("renders nothing while group is loading", () => {
+    const rendered = render(
+      <GroupUserCrumbs group={group} action="show" groupLoading />
+    );
+
+    expect(rendered.container).toBeEmptyDOMElement();
+  });
+
+  it("renders nothing when group has no name", () => {
+    const rendered = render(
+      <GroupUserCrumbs
+        group={{ id: "1", name: "", alias: "Admins" }}
+        action="show"
+        groupLoading={false}
+      />
+    );
+
+    expect(rendered.container).toBeEmptyDOMElement();
+  });
+
+  it("renders group name when alias is missing", () => {
+    const rendered = render(
+      <GroupUserCrumbs
+        group={{ id: "1", name: "administrators" }}
+        action="add"
+        groupLoading={false}
+      />
+    );
+
+    expect(
+      rendered.getByRole("link", { name: /administrators/i })
+    ).toBeInTheDocument();
+  });
+
+  it("renders group name on show when alias is missing", () => {
+    const rendered = render(
+      <GroupUserCrumbs
+        group={{ id: "1", name: "administrators" }}
+        action="show"
+        groupLoading={false}
+      />
+    );
+
+    expect(rendered.getByText(/administrators/i)).toBeInTheDocument();
+  });
+});

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

@@ -98,4 +98,86 @@ describe("<UserForm />", () => {
       })
     );
   });
+
+  it("shows group alias values in the groups dropdown", async () => {
+    const groups = [
+      { name: "admins", alias: "Administrators" },
+      { name: "users", alias: "Users" },
+    ];
+    const rendered = render(<UserForm groups={groups} />, {
+      ...renderOpts,
+      state: { ...renderOpts.state, groups },
+    });
+
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    await user.click(rendered.getByRole("combobox"));
+
+    await waitFor(() =>
+      expect(rendered.getByText("Administrators")).toBeInTheDocument()
+    );
+    expect(rendered.getByText("Users")).toBeInTheDocument();
+  });
+
+  it("submits external id and custom groups values", async () => {
+    const onSubmit = jest.fn();
+    const groups = [
+      { name: "admins", alias: "Administrators" },
+      { name: "users", alias: "Users" },
+    ];
+    const rendered = render(
+      <UserForm
+        onSubmit={(props) => onSubmit(props)}
+        groups={groups}
+        user={{
+          id: 123,
+          user_name: "fred",
+          full_name: "fredrik foobar",
+          groups: ["zzz", "admins", "ZZZ"],
+        }}
+      />,
+      {
+        ...renderOpts,
+        state: {
+          ...renderOpts.state,
+          groups,
+        },
+      }
+    );
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    const groupsDropdown = rendered.container.querySelector(
+      '.ui.dropdown[name="groups"]'
+    );
+    const externalIdInput = rendered.getByRole("textbox", {
+      name: /external_id/i,
+    });
+    const selectedGroupDeleteIcon = rendered.container.querySelector(
+      '.ui.dropdown[name="groups"] .ui.label[value="zzz"] .delete.icon'
+    );
+
+    await user.click(groupsDropdown);
+    await user.click(selectedGroupDeleteIcon);
+    await user.clear(externalIdInput);
+    await user.type(externalIdInput, "ext-123");
+
+    await waitFor(() =>
+      expect(rendered.getByRole("button", { name: /save/i })).not.toBeDisabled()
+    );
+
+    await user.click(rendered.getByRole("button", { name: /save/i }));
+
+    await waitFor(() =>
+      expect(onSubmit).toHaveBeenCalledWith({
+        email: "",
+        external_id: "ext-123",
+        full_name: "fredrik foobar",
+        groups: ["admins", "ZZZ"],
+        role: "user",
+        user_name: "fred",
+      })
+    );
+  });
 });

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

@@ -8,6 +8,8 @@ const renderOpts = {
       "user.acl.role": "role",
       "user.acl.domain": "domain",
       "user.acl": "acl",
+      "user.acl.group": "group",
+      "user.group.acl": "group acl",
     },
   },
   state: {
@@ -33,4 +35,23 @@ describe("<UserGroupAcls />", () => {
     const { container } = render(<UserGroupAcls />, renderOpts);
     await waitFor(() => expect(container).toMatchSnapshot());
   });
+
+  it("renders group alias when provided by the selector", async () => {
+    const rendered = render(
+      <UserGroupAcls
+        acls={[
+          {
+            resource: "resource1",
+            role: "role1",
+            group: "Group One",
+          },
+        ]}
+      />,
+      renderOpts
+    );
+
+    await waitFor(() =>
+      expect(rendered.queryByText(/group one/i)).toBeInTheDocument()
+    );
+  });
 });

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

@@ -248,15 +248,9 @@ exports[`<EditUser /> matches the latest snapshot 1`] = `
             role="listbox"
           >
             <div
-              aria-checked="false"
-              aria-selected="true"
-              class="selected item"
-              role="option"
-              style="pointer-events: all;"
+              class="message"
             >
-              <span
-                class="text"
-              />
+              No results found.
             </div>
           </div>
         </div>

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

@@ -228,15 +228,9 @@ exports[`<InitialUser /> matches the latest snapshot 1`] = `
             role="listbox"
           >
             <div
-              aria-checked="false"
-              aria-selected="true"
-              class="selected item"
-              role="option"
-              style="pointer-events: all;"
+              class="message"
             >
-              <span
-                class="text"
-              />
+              No results found.
             </div>
           </div>
         </div>

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

@@ -248,15 +248,9 @@ exports[`<NewUser /> matches the latest snapshot 1`] = `
             role="listbox"
           >
             <div
-              aria-checked="false"
-              aria-selected="true"
-              class="selected item"
-              role="option"
-              style="pointer-events: all;"
+              class="message"
             >
-              <span
-                class="text"
-              />
+              No results found.
             </div>
           </div>
         </div>

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

@@ -212,15 +212,9 @@ exports[`<UserForm /> matches the latest snapshot 1`] = `
           role="listbox"
         >
           <div
-            aria-checked="false"
-            aria-selected="true"
-            class="selected item"
-            role="option"
-            style="pointer-events: all;"
+            class="message"
           >
-            <span
-              class="text"
-            />
+            No results found.
           </div>
         </div>
       </div>

package/src/users/selectors/__tests__/getUserGroupAcls.spec.js

@@ -1,40 +1,43 @@
-import { getUserAcls } from "..";
+import { getUserGroupAcls } from "..";
 
-describe("selectors: getUserAcls", () => {
-  const acl1 = {
+describe("selectors: getUserGroupAcls", () => {
+  const aclWithAlias = {
     resource: { id: 1, name: "resource1", type: "domain" },
-    role: { id: 2, name: "role1" }
+    role: { id: 2, name: "role1" },
+    group: { id: 6, name: "group5", alias: "Group Five" },
   };
 
-  const acl2 = {
+  const aclWithoutAlias = {
     resource: { id: 2, name: "resource2", type: "domain" },
-    role: { id: 3, name: "role2" }
+    role: { id: 3, name: "role2" },
+    group: { id: 7, name: "group6" },
   };
 
-  const acl3 = {
+  const aclWithoutGroup = {
     resource: { id: 4, name: "resource3", type: "domain" },
     role: { id: 5, name: "role5" },
-    group: { id: 6, name: "group5" }
   };
 
-  const acls = [acl1, acl2, acl3];
+  const user = { acls: [aclWithAlias, aclWithoutAlias, aclWithoutGroup] };
 
-  const user = { acls: acls };
+  it("returns only group ACLs and prefers group.alias over group.name", () => {
+    const res = getUserGroupAcls({ user });
 
-  it("should return user acls", () => {
-    const res = getUserAcls({ user });
-    expect(res).toHaveLength(2);
-    expect(res).toEqual(
-      expect.arrayContaining([
-        { resource: acl1.resource.name, role: acl1.role.name },
-        { resource: acl2.resource.name, role: acl2.role.name }
-      ])
-    );
+    expect(res).toEqual([
+      {
+        resource: aclWithAlias.resource.name,
+        role: aclWithAlias.role.name,
+        group: aclWithAlias.group.alias,
+      },
+      {
+        resource: aclWithoutAlias.resource.name,
+        role: aclWithoutAlias.role.name,
+        group: aclWithoutAlias.group.name,
+      },
+    ]);
   });
 
-  it("should return empty array when we have no acls", () => {
-    const res = getUserAcls({ user: { acls: [] } });
-    expect(res).toHaveLength(0);
-    expect(res).toEqual(expect.arrayContaining([]));
+  it("returns an empty array when the user has no ACLs", () => {
+    expect(getUserGroupAcls({ user: { acls: [] } })).toEqual([]);
   });
 });

package/src/users/selectors/getUserGroupAcls.js

@@ -2,15 +2,15 @@ import _ from "lodash/fp";
 import { createSelector } from "reselect";
 import { getUser } from "./getUser";
 
-const isGroupAcl = m => !_.flow(_.prop("group"), _.isEmpty)(m);
+const isGroupAcl = (m) => !_.flow(_.prop("group"), _.isEmpty)(m);
 
-const buildGroupAcl = m => ({
+const buildGroupAcl = (m) => ({
   resource: m.resource.name,
   role: m.role.name,
-  group: m.group.name
+  group: m.group.alias || m.group.name,
 });
 
-export const getUserGroupAcls = createSelector([getUser], user =>
+export const getUserGroupAcls = createSelector([getUser], (user) =>
   _.flow(
     _.prop("acls"),
     _.filter(isGroupAcl),