From fbc07ee2f2da6696d025a3c4fe1b51cd1c849661 Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Wed, 20 Sep 2023 20:50:38 +0000
Subject: [PATCH 1/3] Access tab - add users

Issue: AAH-2284
---
 CHANGES/2284.feature                          |   1 +
 src/api/response-types/namespace.ts           |   1 +
 src/components/index.ts                       |   3 +-
 src/components/rbac/access-tab.tsx            | 446 +++++++++++++++---
 src/components/rbac/preview-roles.tsx         |  29 +-
 ...e-permissions.tsx => role-permissions.tsx} |   2 +-
 src/components/rbac/select-group.tsx          |   2 +-
 src/components/rbac/select-user.tsx           | 212 +++++++++
 src/containers/ansible-remote/detail.tsx      |  11 +-
 src/containers/ansible-remote/tab-access.tsx  | 143 +++++-
 src/containers/ansible-repository/detail.tsx  |  17 +-
 .../ansible-repository/tab-access.tsx         | 143 +++++-
 .../execution_environment_detail_access.tsx   | 235 ++++++---
 .../namespace-detail/namespace-detail.tsx     | 229 ++++++---
 src/utilities/assign-roles.ts                 |  34 ++
 src/utilities/index.ts                        |   1 +
 16 files changed, 1231 insertions(+), 278 deletions(-)
 create mode 100644 CHANGES/2284.feature
 rename src/components/rbac/{group-role-permissions.tsx => role-permissions.tsx} (92%)
 create mode 100644 src/components/rbac/select-user.tsx
 create mode 100644 src/utilities/assign-roles.ts

diff --git a/CHANGES/2284.feature b/CHANGES/2284.feature
new file mode 100644
index 0000000000..8a6c57d0f7
--- /dev/null
+++ b/CHANGES/2284.feature
@@ -0,0 +1 @@
+Add Users section to Access tab (Namespaces, Remotes, Repositories, EEs)
diff --git a/src/api/response-types/namespace.ts b/src/api/response-types/namespace.ts
index f05ebd7845..46d421ff8c 100644
--- a/src/api/response-types/namespace.ts
+++ b/src/api/response-types/namespace.ts
@@ -17,6 +17,7 @@ export class NamespaceListType {
 
 export class NamespaceType extends NamespaceListType {
   groups: GroupObjectPermissionType[];
+  users: { username: string; object_roles: string[] }[];
   resources: string;
   owners: string[];
   links: NamespaceLinkType[];
diff --git a/src/components/index.ts b/src/components/index.ts
index af6a56cffe..82f0b62dbe 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -87,12 +87,12 @@ export { AccessTab } from './rbac/access-tab';
 export { DeleteGroupModal } from './rbac/delete-group-modal';
 export { DeleteUserModal } from './rbac/delete-user-modal';
 export { GroupModal } from './rbac/group-modal';
-export { GroupRolePermissions } from './rbac/group-role-permissions';
 export { PermissionCategories } from './rbac/permission-categories';
 export { PermissionChipSelector } from './rbac/permission-chip-selector';
 export { PreviewRoles } from './rbac/preview-roles';
 export { RoleForm } from './rbac/role-form';
 export { RoleHeader } from './rbac/role-header';
+export { RolePermissions } from './rbac/role-permissions';
 export {
   CheckboxRow,
   ExpandableRow,
@@ -101,6 +101,7 @@ export {
 } from './rbac/role-list-table';
 export { SelectGroup } from './rbac/select-group';
 export { SelectRoles } from './rbac/select-roles';
+export { SelectUser } from './rbac/select-user';
 export { UserForm } from './rbac/user-form';
 export { UserFormPage } from './rbac/user-form-page';
 export { RenderPluginDoc } from './render-plugin-doc/render-plugin-doc';
diff --git a/src/components/rbac/access-tab.tsx b/src/components/rbac/access-tab.tsx
index a5da3b5f33..612f6244b4 100644
--- a/src/components/rbac/access-tab.tsx
+++ b/src/components/rbac/access-tab.tsx
@@ -2,6 +2,7 @@ import { Trans, t } from '@lingui/macro';
 import {
   Button,
   DropdownItem,
+  Spinner,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -13,61 +14,110 @@ import { GroupType, RoleType } from 'src/api';
 import {
   DeleteModal,
   EmptyStateNoData,
+  EmptyStateXs,
   ExpandableRow,
-  GroupRolePermissions,
   ListItemActions,
   LoadingPageSpinner,
   PreviewRoles,
   RoleListTable,
+  RolePermissions,
   SelectGroup,
   SelectRoles,
+  SelectUser,
   SortTable,
   WizardModal,
 } from 'src/components';
 import { ParamHelper } from 'src/utilities';
 
+interface UserType {
+  username: string;
+  object_roles: string[];
+}
+
 interface IProps {
+  // users
+  user?: UserType;
+  users: UserType[];
+  addUser?: (user, roles) => void;
+  removeUser?: (user) => void;
+  addUserRole?: (role, users) => void;
+  removeUserRole?: (role, user) => void;
+  showUserRemoveModal?: UserType;
+  showUserSelectWizard?: { user?: UserType; roles?: RoleType[] };
+
+  // groups
   group?: GroupType;
   groups: GroupType[];
-  name: string;
-  pulpObjectType: string;
-  selectRolesMessage: string;
-  urlPrefix: string;
-  canEditOwners: boolean;
   addGroup?: (group, roles) => void;
   removeGroup?: (group) => void;
   addRole?: (role, groups) => void;
   removeRole?: (role, group) => void;
   showGroupRemoveModal?: GroupType;
   showGroupSelectWizard?: { group?: GroupType; roles?: RoleType[] };
+
+  // roles
   showRoleRemoveModal?: string;
   showRoleSelectWizard?: { roles?: RoleType[] };
+
+  // parent
+  name: string;
+  pulpObjectType: string;
+  selectRolesMessage: string;
+  urlPrefix: string;
+  canEditOwners: boolean;
   updateProps: (prop) => void;
 }
 
+const SectionTitle = ({ title }: { title: string }) => (
+  <h2 className='pf-c-title'>{title}</h2>
+);
+const SectionSeparator = () => (
+  <div
+    style={{
+      backgroundColor: 'var(--pf-global--BackgroundColor--light-300)',
+      height: '16px',
+      margin: '16px -16px',
+    }}
+  />
+);
+
 export class AccessTab extends React.Component<IProps> {
   render() {
-    const { groups, group, canEditOwners } = this.props;
-    const { showGroupRemoveModal, showGroupSelectWizard } = this.props;
-    const loading = !groups;
-    const noData = groups?.length === 0;
+    const {
+      canEditOwners,
+      group,
+      groups,
+      showGroupRemoveModal,
+      showGroupSelectWizard,
+      showUserRemoveModal,
+      showUserSelectWizard,
+      user,
+      users,
+      updateProps,
+    } = this.props;
 
-    const buttonAdd = (
-      <Button
-        onClick={() =>
-          this.props.updateProps({
-            showGroupSelectWizard: {},
-          })
-        }
-      >
-        {t`Select a group`}
+    const loading = !groups && !users;
+    const noData = users?.length === 0 && groups?.length === 0;
+
+    const buttonAdd = (title, props) => (
+      <Button key={title} onClick={() => updateProps(props)}>
+        {title}
       </Button>
     );
 
+    const buttonUserAdd = buttonAdd(t`Select a user`, {
+      showUserSelectWizard: {},
+    });
+    const buttonGroupAdd = buttonAdd(t`Select a group`, {
+      showGroupSelectWizard: {},
+    });
+
     return loading ? (
       <LoadingPageSpinner />
     ) : (
       <>
+        {showUserRemoveModal ? this.renderUserRemoveModal() : null}
+        {showUserSelectWizard ? this.renderUserSelectWizard() : null}
         {showGroupRemoveModal ? this.renderGroupRemoveModal() : null}
         {showGroupSelectWizard ? this.renderGroupSelectWizard() : null}
 
@@ -76,23 +126,111 @@ export class AccessTab extends React.Component<IProps> {
             title={t`There are currently no owners assigned.`}
             description={
               canEditOwners
-                ? t`Please add an owner by using the button below.`
+                ? t`Please add an owner by using the buttons below.`
                 : ''
             }
+            button={
+              canEditOwners ? (
+                <>
+                  {buttonUserAdd} {buttonGroupAdd}
+                </>
+              ) : null
+            }
+          />
+        ) : user || group ? (
+          this.renderRoles()
+        ) : (
+          <>
+            {this.renderSection({
+              buttonAdd: buttonUserAdd,
+              canEditOwners,
+              emptyStateTitle: t`There are currently no users assigned.`,
+              emptyStateExtra: t`Except for members of groups below.`,
+              items: users,
+              renderItems: () =>
+                this.renderList({
+                  ariaLabel: t`User list`,
+                  canEditOwners,
+                  itemName: t`User`,
+                  buttonAdd: buttonUserAdd,
+                  items: users,
+                  renderItem: (item, index) => this.renderUserRow(item, index),
+                  sortField: 'username',
+                }),
+              title: t`Users`,
+            })}
+            <SectionSeparator />
+            {this.renderSection({
+              buttonAdd: buttonGroupAdd,
+              canEditOwners,
+              emptyStateTitle: t`There are currently no groups assigned.`,
+              items: groups,
+              renderItems: () =>
+                this.renderList({
+                  ariaLabel: t`Group list`,
+                  canEditOwners,
+                  itemName: t`Group`,
+                  buttonAdd: buttonGroupAdd,
+                  items: groups,
+                  renderItem: (item, index) => this.renderGroupRow(item, index),
+                  sortField: 'name',
+                }),
+              title: t`Groups`,
+            })}
+          </>
+        )}
+      </>
+    );
+  }
+
+  private renderSection({
+    buttonAdd,
+    canEditOwners,
+    emptyStateTitle,
+    emptyStateExtra = '',
+    items,
+    renderItems,
+    title,
+  }) {
+    const loading = !items;
+    const noData = items?.length === 0;
+
+    return (
+      <>
+        <SectionTitle title={title} />
+        {loading ? (
+          <Spinner />
+        ) : noData ? (
+          <EmptyStateXs
+            title={emptyStateTitle}
+            description={
+              <>
+                {emptyStateExtra}
+                {emptyStateExtra && <br />}
+                {canEditOwners
+                  ? t`Please add an owner by using the button below.`
+                  : ''}
+              </>
+            }
             button={canEditOwners ? buttonAdd : null}
           />
-        ) : group ? (
-          this.renderRoles({ group })
         ) : (
-          this.renderGroups({ buttonAdd, groups })
+          renderItems()
         )}
       </>
     );
   }
 
-  private renderGroups({ buttonAdd, groups }) {
-    const { canEditOwners } = this.props;
-    const sortedGroups = sortBy(groups, 'name');
+  private renderList({
+    ariaLabel,
+    buttonAdd,
+    canEditOwners,
+    itemName,
+    items,
+    renderItem,
+    sortField,
+  }) {
+    const sorted = sortBy(items, sortField);
 
     return (
       <>
@@ -107,16 +245,16 @@ export class AccessTab extends React.Component<IProps> {
         )}
 
         <table
-          aria-label={t`Group list`}
+          aria-label={ariaLabel}
           className='hub-c-table-content pf-c-table'
         >
           <SortTable
             options={{
               headers: [
                 {
-                  title: t`Group`,
+                  title: itemName,
                   type: 'none',
-                  id: 'name',
+                  id: sortField,
                 },
                 {
                   title: '',
@@ -128,26 +266,63 @@ export class AccessTab extends React.Component<IProps> {
             params={{}}
             updateParams={() => null}
           />
-          <tbody>
-            {sortedGroups.map((group, i) => this.renderGroupRow(group, i))}
-          </tbody>
+          <tbody>{sorted.map(renderItem)}</tbody>
         </table>
       </>
     );
   }
 
+  private renderUserRow(user, index: number) {
+    const { urlPrefix, canEditOwners, updateProps } = this.props;
+
+    const dropdownItems = [
+      canEditOwners && (
+        <DropdownItem
+          key='remove'
+          onClick={() =>
+            updateProps({
+              showUserRemoveModal: user,
+            })
+          }
+        >
+          <Trans>Remove user</Trans>
+        </DropdownItem>
+      ),
+    ];
+
+    return (
+      <tr data-cy={`AccessTab-row-user-${user.username}`} key={index}>
+        <td>
+          <Link
+            to={
+              urlPrefix +
+              '?' +
+              ParamHelper.getQueryString({
+                user: user.username,
+                tab: 'access',
+              })
+            }
+          >
+            {user.username}
+          </Link>
+        </td>
+        <ListItemActions kebabItems={dropdownItems} />
+      </tr>
+    );
+  }
+
   private renderGroupRow(group, index: number) {
-    const { urlPrefix, canEditOwners } = this.props;
+    const { urlPrefix, canEditOwners, updateProps } = this.props;
 
     const dropdownItems = [
       canEditOwners && (
         <DropdownItem
           key='remove'
-          onClick={() => {
-            this.props.updateProps({
+          onClick={() =>
+            updateProps({
               showGroupRemoveModal: group,
-            });
-          }}
+            })
+          }
         >
           <Trans>Remove group</Trans>
         </DropdownItem>
@@ -155,14 +330,14 @@ export class AccessTab extends React.Component<IProps> {
     ];
 
     return (
-      <tr data-cy={`AccessTab-row-${group.name}`} key={index}>
+      <tr data-cy={`AccessTab-row-group-${group.name}`} key={index}>
         <td>
           <Link
             to={
               urlPrefix +
               '?' +
               ParamHelper.getQueryString({
-                group: group?.id || group?.name,
+                group: group.name,
                 tab: 'access',
               })
             }
@@ -175,20 +350,27 @@ export class AccessTab extends React.Component<IProps> {
     );
   }
 
-  private renderRoles({ group }) {
-    const { canEditOwners } = this.props;
-    const { showRoleRemoveModal, showRoleSelectWizard } = this.props;
-    const roles = group?.object_roles;
-    const sortedRoles = sortBy(roles);
+  private renderRoles() {
+    const {
+      canEditOwners,
+      group,
+      showRoleRemoveModal,
+      showRoleSelectWizard,
+      updateProps,
+      user,
+    } = this.props;
 
-    if (!group) {
+    if ((!user && !group) || (user && group)) {
       return null;
     }
 
+    const roles = (user || group).object_roles;
+    const sortedRoles = sortBy(roles);
+
     const buttonAdd = (
       <Button
         onClick={() =>
-          this.props.updateProps({
+          updateProps({
             showRoleSelectWizard: {},
           })
         }
@@ -199,8 +381,13 @@ export class AccessTab extends React.Component<IProps> {
 
     return (
       <>
-        {showRoleRemoveModal ? this.renderRoleRemoveModal(group) : null}
-        {showRoleSelectWizard ? this.renderRoleSelectWizard(group) : null}
+        {showRoleRemoveModal ? this.renderRoleRemoveModal() : null}
+        {showRoleSelectWizard ? this.renderRoleSelectWizard() : null}
+
+        <h3 className='pf-c-title'>
+          {user ? <Trans>User {user.username}</Trans> : null}
+          {group ? <Trans>Group {group.name}</Trans> : null}
+        </h3>
 
         {canEditOwners && (
           <div>
@@ -239,7 +426,7 @@ export class AccessTab extends React.Component<IProps> {
             <ExpandableRow
               key={i}
               rowIndex={i}
-              expandableRowContent={<GroupRolePermissions name={role} />}
+              expandableRowContent={<RolePermissions name={role} />}
               data-cy={`RoleListTable-ExpandableRow-row-${role}`}
             >
               <td>{role}</td>
@@ -248,9 +435,7 @@ export class AccessTab extends React.Component<IProps> {
                   canEditOwners && (
                     <DropdownItem
                       key='remove-role'
-                      onClick={() =>
-                        this.props.updateProps({ showRoleRemoveModal: role })
-                      }
+                      onClick={() => updateProps({ showRoleRemoveModal: role })}
                     >
                       {t`Remove role`}
                     </DropdownItem>
@@ -264,10 +449,38 @@ export class AccessTab extends React.Component<IProps> {
     );
   }
 
+  private renderUserRemoveModal() {
+    const { name, showUserRemoveModal: user } = this.props;
+    if (!user) {
+      return;
+    }
+
+    const username = user.username;
+
+    return (
+      <DeleteModal
+        cancelAction={() =>
+          this.props.updateProps({ showUserRemoveModal: null })
+        }
+        deleteAction={() => this.props.removeUser(user)}
+        title={t`Remove user ${username}?`}
+      >
+        <Trans>
+          You are about to remove <b>{username}</b> from <b>{name}</b>.
+          <br />
+          This will also remove all associated permissions.
+        </Trans>
+      </DeleteModal>
+    );
+  }
+
   private renderGroupRemoveModal() {
-    const group = this.props.showGroupRemoveModal as GroupType;
+    const { name, showGroupRemoveModal: group } = this.props;
+    if (!group) {
+      return;
+    }
+
     const groupname = group.name;
-    const name = this.props.name;
 
     return (
       <DeleteModal
@@ -286,22 +499,24 @@ export class AccessTab extends React.Component<IProps> {
     );
   }
 
-  private renderRoleRemoveModal(group) {
-    const groupname = group.name;
-    const name = this.props.name;
-    const role = this.props.showRoleRemoveModal;
+  private renderRoleRemoveModal() {
+    const { name, user, group, showRoleRemoveModal: role } = this.props;
+    const userOrGroupName = group?.name || user?.username;
 
     return (
       <DeleteModal
         cancelAction={() =>
           this.props.updateProps({ showRoleRemoveModal: null })
         }
-        deleteAction={() => this.props.removeRole(role, group)}
+        deleteAction={() => {
+          group && this.props.removeRole(role, group);
+          user && this.props.removeUserRole(role, user);
+        }}
         title={t`Remove role ${role}?`}
       >
         <Trans>
-          You are about to remove <b>{role}</b> from <b>{groupname}</b> for{' '}
-          <b>{name}</b>.
+          You are about to remove <b>{role}</b> from <b>{userOrGroupName}</b>{' '}
+          for <b>{name}</b>.
           <br />
           This will also remove all associated permissions.
         </Trans>
@@ -309,10 +524,89 @@ export class AccessTab extends React.Component<IProps> {
     );
   }
 
+  private renderUserSelectWizard() {
+    const {
+      users,
+      pulpObjectType,
+      selectRolesMessage,
+      showUserSelectWizard: { user, roles = [] },
+      updateProps,
+    } = this.props;
+
+    const hasUser = !!user;
+    const hasRoles = !!roles?.length;
+
+    // if we enable edit, find user in users, convert object_roles name to { role: name }
+    const assignedRoles = [];
+
+    const steps = [
+      {
+        id: 0,
+        name: t`Select a user`,
+        component: (
+          <SelectUser
+            assignedUsers={users}
+            selectedUser={user}
+            updateUser={(user) =>
+              updateProps({
+                showUserSelectWizard: { user, roles },
+              })
+            }
+          />
+        ),
+        backButtonText: t`Cancel`,
+        enableNext: hasUser,
+      },
+      {
+        id: 1,
+        name: t`Select role(s)`,
+        component: (
+          <SelectRoles
+            assignedRoles={assignedRoles}
+            selectedRoles={roles}
+            onRolesUpdate={(roles) =>
+              updateProps({
+                showUserSelectWizard: { user, roles },
+              })
+            }
+            message={selectRolesMessage}
+            pulpObjectType={pulpObjectType}
+          />
+        ),
+        canJumpTo: hasUser,
+        enableNext: hasUser && hasRoles,
+      },
+      {
+        id: 2,
+        name: t`Preview`,
+        component: <PreviewRoles user={user} selectedRoles={roles} />,
+        nextButtonText: t`Add`,
+        canJumpTo: hasUser && hasRoles,
+        isFinished: true,
+      },
+    ];
+
+    return (
+      <WizardModal
+        steps={steps}
+        title={t`Select a user`}
+        onClose={() =>
+          updateProps({
+            showUserSelectWizard: null,
+          })
+        }
+        onSave={() => this.props.addUser(user, roles)}
+      />
+    );
+  }
+
   private renderGroupSelectWizard() {
-    const { groups, pulpObjectType, selectRolesMessage } = this.props;
     const {
+      groups,
+      pulpObjectType,
+      selectRolesMessage,
       showGroupSelectWizard: { group, roles = [] },
+      updateProps,
     } = this.props;
 
     const hasGroup = !!group;
@@ -330,7 +624,7 @@ export class AccessTab extends React.Component<IProps> {
             assignedGroups={groups}
             selectedGroup={group}
             updateGroup={(group) =>
-              this.props.updateProps({
+              updateProps({
                 showGroupSelectWizard: { group, roles },
               })
             }
@@ -347,7 +641,7 @@ export class AccessTab extends React.Component<IProps> {
             assignedRoles={assignedRoles}
             selectedRoles={roles}
             onRolesUpdate={(roles) =>
-              this.props.updateProps({
+              updateProps({
                 showGroupSelectWizard: { group, roles },
               })
             }
@@ -373,7 +667,7 @@ export class AccessTab extends React.Component<IProps> {
         steps={steps}
         title={t`Select a group`}
         onClose={() =>
-          this.props.updateProps({
+          updateProps({
             showGroupSelectWizard: null,
           })
         }
@@ -382,16 +676,19 @@ export class AccessTab extends React.Component<IProps> {
     );
   }
 
-  private renderRoleSelectWizard(group) {
-    const { pulpObjectType } = this.props;
+  private renderRoleSelectWizard() {
     const {
+      group,
+      pulpObjectType,
       showRoleSelectWizard: { roles = [] },
+      updateProps,
+      user,
     } = this.props;
 
     const hasRoles = !!roles?.length;
 
     const assignedRoles =
-      group?.object_roles?.map((name) => ({ role: name })) || [];
+      (group || user || {}).object_roles?.map((name) => ({ role: name })) || [];
 
     const steps = [
       {
@@ -402,7 +699,7 @@ export class AccessTab extends React.Component<IProps> {
             assignedRoles={assignedRoles}
             selectedRoles={roles}
             onRolesUpdate={(roles) =>
-              this.props.updateProps({ showRoleSelectWizard: { roles } })
+              updateProps({ showRoleSelectWizard: { roles } })
             }
             pulpObjectType={pulpObjectType}
           />
@@ -413,7 +710,9 @@ export class AccessTab extends React.Component<IProps> {
       {
         id: 1,
         name: t`Preview`,
-        component: <PreviewRoles group={group} selectedRoles={roles} />,
+        component: (
+          <PreviewRoles user={user} group={group} selectedRoles={roles} />
+        ),
         nextButtonText: t`Add`,
         canJumpTo: hasRoles,
         isFinished: true,
@@ -425,11 +724,14 @@ export class AccessTab extends React.Component<IProps> {
         steps={steps}
         title={t`Select role(s)`}
         onClose={() =>
-          this.props.updateProps({
+          updateProps({
             showRoleSelectWizard: null,
           })
         }
-        onSave={() => this.props.addRole(group, roles)}
+        onSave={() => {
+          group && this.props.addRole(group, roles);
+          user && this.props.addUserRole(user, roles);
+        }}
       />
     );
   }
diff --git a/src/components/rbac/preview-roles.tsx b/src/components/rbac/preview-roles.tsx
index 693342d9b0..8987d2a954 100644
--- a/src/components/rbac/preview-roles.tsx
+++ b/src/components/rbac/preview-roles.tsx
@@ -1,14 +1,19 @@
 import { Trans } from '@lingui/macro';
 import { Divider, Flex, FlexItem, Label } from '@patternfly/react-core';
 import React from 'react';
-import { GroupType, RoleType } from 'src/api';
+import { RoleType } from 'src/api';
 import { Tooltip } from 'src/components';
 import { useContext } from 'src/loaders/app-context';
 import { translateLockedRolesDescription } from 'src/utilities';
 
 interface Props {
-  group: GroupType;
   selectedRoles: RoleType[];
+  user?: {
+    username: string;
+  };
+  group?: {
+    name: string;
+  };
 }
 
 const splitByDot = (perm: string) => {
@@ -21,23 +26,31 @@ const splitByDot = (perm: string) => {
   );
 };
 
-export const PreviewRoles = ({ group, selectedRoles }: Props) => {
+export const PreviewRoles = ({ user, group, selectedRoles }: Props) => {
   const { model_permissions } = useContext().user;
 
   return (
     <div className='hub-custom-wizard-layout'>
       <p>
-        <Trans>
-          The following roles will be applied to group:{' '}
-          <strong>{group.name}</strong>
-        </Trans>
+        {user ? (
+          <Trans>
+            The following roles will be applied to user:{' '}
+            <strong>{user.username}</strong>
+          </Trans>
+        ) : null}
+        {group ? (
+          <Trans>
+            The following roles will be applied to group:{' '}
+            <strong>{group.name}</strong>
+          </Trans>
+        ) : null}
       </p>
       <Flex direction={{ default: 'column' }} className='hub-preview-roles'>
         {selectedRoles.map((role) => (
           <React.Fragment key={role.name}>
             <FlexItem>
               <strong>{role.name}</strong>{' '}
-              {role?.description &&
+              {role.description &&
                 `- ${translateLockedRolesDescription(
                   role.name,
                   role.description,
diff --git a/src/components/rbac/group-role-permissions.tsx b/src/components/rbac/role-permissions.tsx
similarity index 92%
rename from src/components/rbac/group-role-permissions.tsx
rename to src/components/rbac/role-permissions.tsx
index 54e918e3c1..344d7b8210 100644
--- a/src/components/rbac/group-role-permissions.tsx
+++ b/src/components/rbac/role-permissions.tsx
@@ -7,7 +7,7 @@ interface IProps {
   name: string;
 }
 
-export const GroupRolePermissions = ({ name }: IProps) => {
+export const RolePermissions = ({ name }: IProps) => {
   const [role, setRole] = useState(null);
 
   useEffect(() => {
diff --git a/src/components/rbac/select-group.tsx b/src/components/rbac/select-group.tsx
index 0c99938920..7eb86c7593 100644
--- a/src/components/rbac/select-group.tsx
+++ b/src/components/rbac/select-group.tsx
@@ -65,7 +65,7 @@ export const SelectGroup: React.FC<IProps> = ({
       <div className='hub-custom-wizard-layout hub-no-data'>
         <EmptyStateNoData
           title={t`No assignable groups.`}
-          description={t`There are currently no groups that can be assigned to this namespace.`}
+          description={t`There are currently no groups that can be assigned ownership.`}
         />
       </div>
     );
diff --git a/src/components/rbac/select-user.tsx b/src/components/rbac/select-user.tsx
new file mode 100644
index 0000000000..79f3998f9c
--- /dev/null
+++ b/src/components/rbac/select-user.tsx
@@ -0,0 +1,212 @@
+import { Trans, t } from '@lingui/macro';
+import { Flex, FlexItem, Label } from '@patternfly/react-core';
+import React, { useEffect, useState } from 'react';
+import { UserAPI } from 'src/api';
+import {
+  AppliedFilters,
+  CompoundFilter,
+  EmptyStateFilter,
+  EmptyStateNoData,
+  LoadingPageSpinner,
+  Pagination,
+  RadioRow,
+  RoleListTable,
+} from 'src/components';
+import { filterIsSet } from 'src/utilities';
+
+interface UserType {
+  username: string;
+}
+
+interface IProps {
+  assignedUsers: UserType[];
+  selectedUser?: UserType;
+  updateUser?: (user) => void;
+}
+
+export const SelectUser: React.FC<IProps> = ({
+  assignedUsers,
+  selectedUser,
+  updateUser,
+}) => {
+  const [inputText, setInputText] = useState<string>('');
+  const [users, setUsers] = useState<UserType[]>([]);
+  const [usersCount, setUsersCount] = useState<number>(0);
+
+  const [loading, setLoading] = useState<boolean>(true);
+  const [localParams, setLocalParams] = useState({
+    page: 1,
+    page_size: 10,
+  });
+
+  useEffect(() => {
+    queryUsers();
+  }, [localParams]);
+
+  const queryUsers = () => {
+    setLoading(true);
+    UserAPI.list(localParams).then(({ data }) => {
+      setUsers(data.data);
+      setUsersCount(data.meta.count);
+      setLoading(false);
+    });
+  };
+
+  if (loading) {
+    return (
+      <div className='hub-custom-wizard-layout hub-loading-wizard'>
+        <LoadingPageSpinner />
+      </div>
+    );
+  }
+
+  const isSelected = ({ username }) => selectedUser?.username === username;
+
+  const noData = users.length === 0;
+
+  if (noData && !filterIsSet(localParams, ['username__contains'])) {
+    return (
+      <div className='hub-custom-wizard-layout hub-no-data'>
+        <EmptyStateNoData
+          title={t`No assignable users.`}
+          description={t`There are currently no users that can be assigned ownership.`}
+        />
+      </div>
+    );
+  }
+
+  const isAssigned = ({ username }) =>
+    assignedUsers.some((user) => user.username === username);
+
+  const tabHeader = {
+    headers: [
+      {
+        title: '',
+        type: 'none',
+        id: 'expander',
+      },
+      {
+        title: t`User`,
+        type: 'alpha',
+        id: 'username',
+      },
+    ],
+  };
+
+  return (
+    <div className='hub-custom-wizard-layout'>
+      <Flex
+        justifyContent={{
+          default: noData
+            ? 'justifyContentFlexStart'
+            : 'justifyContentSpaceBetween',
+        }}
+        direction={{ default: 'column' }}
+      >
+        <FlexItem className='hub-select-roles-content'>
+          <Flex
+            justifyContent={{
+              default: noData
+                ? 'justifyContentFlexStart'
+                : 'justifyContentSpaceBetween',
+            }}
+            direction={{ default: 'column' }}
+          >
+            {selectedUser ? (
+              <FlexItem>
+                <Flex>
+                  <FlexItem>
+                    <strong>
+                      <Trans>Selected user</Trans>
+                    </strong>
+                  </FlexItem>
+
+                  <FlexItem flex={{ default: 'flex_1' }}>
+                    <Flex>
+                      <FlexItem
+                        key={selectedUser.username}
+                        className='hub-permission'
+                      >
+                        <Label>{selectedUser.username}</Label>
+                      </FlexItem>
+                    </Flex>
+                  </FlexItem>
+                </Flex>
+              </FlexItem>
+            ) : null}
+
+            <FlexItem>
+              <div className='hub-filter'>
+                <CompoundFilter
+                  inputText={inputText}
+                  onChange={(inputText) => setInputText(inputText)}
+                  params={localParams}
+                  updateParams={(p) => setLocalParams(p)}
+                  filterConfig={[
+                    {
+                      id: 'username__contains',
+                      title: t`Name`,
+                    },
+                  ]}
+                />
+              </div>
+
+              <AppliedFilters
+                updateParams={(p) => {
+                  setLocalParams(p);
+                  setInputText('');
+                }}
+                params={localParams}
+                niceNames={{ username__contains: t`Name` }}
+                ignoredParams={['sort', 'page_size', 'page']}
+                style={{ marginTop: '8px' }}
+              />
+            </FlexItem>
+
+            <FlexItem style={{ flexGrow: 1 }}>
+              {noData && filterIsSet(localParams, ['username__contains']) ? (
+                <div className='hub-no-filter-data'>
+                  <EmptyStateFilter />
+                </div>
+              ) : (
+                <div className='hub-selected-roles-list'>
+                  <RoleListTable
+                    isStickyHeader
+                    params={localParams}
+                    updateParams={(p) => {
+                      setLocalParams(p);
+                    }}
+                    tableHeader={tabHeader}
+                  >
+                    {users.map((user, i) => (
+                      <RadioRow
+                        rowIndex={i}
+                        key={user.username}
+                        isSelected={isSelected(user)}
+                        onSelect={() => updateUser(user)}
+                        isDisabled={isAssigned(user)}
+                        data-cy={`UserListTable-CheckboxRow-row-${user.username}`}
+                      >
+                        <td>{user.username}</td>
+                      </RadioRow>
+                    ))}
+                  </RoleListTable>
+                </div>
+              )}
+            </FlexItem>
+          </Flex>
+        </FlexItem>
+
+        {!noData && (
+          <FlexItem>
+            <Pagination
+              params={localParams}
+              updateParams={(p) => setLocalParams(p)}
+              count={usersCount}
+            />
+          </FlexItem>
+        )}
+      </Flex>
+    </div>
+  );
+};
diff --git a/src/containers/ansible-remote/detail.tsx b/src/containers/ansible-remote/detail.tsx
index 6ba6c2f06b..3fe0904f66 100644
--- a/src/containers/ansible-remote/detail.tsx
+++ b/src/containers/ansible-remote/detail.tsx
@@ -21,11 +21,11 @@ const tabs = [
 ];
 
 const AnsibleRemoteDetail = PageWithTabs<AnsibleRemoteType>({
-  breadcrumbs: ({ name, tab, params: { group } }) =>
+  breadcrumbs: ({ name, tab, params: { user, group } }) =>
     [
       { url: formatPath(Paths.ansibleRemotes), name: t`Remotes` },
       { url: formatPath(Paths.ansibleRemoteDetail, { name }), name },
-      tab.id === 'access' && group
+      tab.id === 'access' && (group || user)
         ? {
             url: formatPath(
               Paths.ansibleRepositoryDetail,
@@ -35,9 +35,9 @@ const AnsibleRemoteDetail = PageWithTabs<AnsibleRemoteType>({
             name: tab.name,
           }
         : null,
-      tab.id === 'access' && group
-        ? { name: t`Group ${group}` }
-        : { name: tab.name },
+      tab.id === 'access' && group ? { name: t`Group ${group}` } : null,
+      tab.id === 'access' && user ? { name: t`User ${user}` } : null,
+      tab.id === 'access' && !user && !group ? { name: tab.name } : null,
     ].filter(Boolean),
   condition: canViewAnsibleRemotes,
   displayName: 'AnsibleRemoteDetail',
@@ -78,6 +78,7 @@ const AnsibleRemoteDetail = PageWithTabs<AnsibleRemoteType>({
   tabs,
   tabUpdateParams: (p) => {
     delete p.group;
+    delete p.user;
     return p;
   },
 });
diff --git a/src/containers/ansible-remote/tab-access.tsx b/src/containers/ansible-remote/tab-access.tsx
index 4de1657b70..2796eee2bb 100644
--- a/src/containers/ansible-remote/tab-access.tsx
+++ b/src/containers/ansible-remote/tab-access.tsx
@@ -6,11 +6,17 @@ import {
   GroupAPI,
   GroupType,
   RoleType,
+  UserAPI,
 } from 'src/api';
 import { AccessTab } from 'src/components';
 import { Paths, formatPath } from 'src/paths';
 import { canEditAnsibleRemoteAccess } from 'src/permissions';
-import { errorMessage, parsePulpIDFromURL } from 'src/utilities';
+import { assignRoles, errorMessage, parsePulpIDFromURL } from 'src/utilities';
+
+interface UserType {
+  username: string;
+  object_roles: string[];
+}
 
 interface TabProps {
   item: AnsibleRemoteType;
@@ -36,8 +42,16 @@ export const RemoteAccessTab = ({
   const id = item?.pulp_href && parsePulpIDFromURL(item.pulp_href);
   const [name, setName] = useState<string>(item?.name);
   const [groups, setGroups] = useState<GroupType[]>(null); // loading
+  const [users, setUsers] = useState<UserType[]>(null); // loading
   const [canEditOwners, setCanEditOwners] = useState<boolean>(false);
   const [selectedGroup, setSelectedGroup] = useState<GroupType>(null);
+  const [selectedUser, setSelectedUser] = useState<UserType>(null);
+  const [showUserRemoveModal, setShowUserRemoveModal] =
+    useState<UserType>(null);
+  const [showUserSelectWizard, setShowUserSelectWizard] = useState<{
+    user?: UserType;
+    roles?: RoleType[];
+  }>(null);
   const [showGroupRemoveModal, setShowGroupRemoveModal] =
     useState<GroupType>(null);
   const [showGroupSelectWizard, setShowGroupSelectWizard] = useState<{
@@ -50,7 +64,9 @@ export const RemoteAccessTab = ({
   }>(null);
 
   const query = () => {
+    setUsers(null);
     setGroups(null);
+
     AnsibleRemoteAPI.myPermissions(id)
       .then(({ data: { permissions } }) => {
         setCanEditOwners(
@@ -62,39 +78,28 @@ export const RemoteAccessTab = ({
             featureFlags,
           }),
         );
-        AnsibleRemoteAPI.listRoles(id)
+        // TODO handle pagination
+        AnsibleRemoteAPI.listRoles(id, { page_size: 100 })
           .then(({ data: { roles } }) => {
-            const groupRoles = [];
-            for (const { groups, role } of roles) {
-              for (const name of groups) {
-                const groupIndex = groupRoles.findIndex((g) => g.name === name);
-                if (groupIndex == -1) {
-                  groupRoles.push({ name, object_roles: [role] });
-                } else {
-                  groupRoles[groupIndex].object_roles.push(role);
-                }
-              }
-            }
+            const { users, groups } = assignRoles(roles);
 
             setName(name);
-            setGroups(groupRoles);
+            setUsers(users as UserType[]);
+            setGroups(groups as GroupType[]);
           })
           .catch(() => {
+            setUsers([]);
             setGroups([]);
           });
       })
       .catch(() => {
+        setUsers([]);
         setGroups([]);
         setCanEditOwners(false);
       });
   };
 
-  const updateGroupRoles = ({
-    roles,
-    alertSuccess,
-    alertFailure,
-    stateUpdate,
-  }) => {
+  const updateRoles = ({ roles, alertSuccess, alertFailure, stateUpdate }) => {
     Promise.all(roles)
       .then(() => {
         addAlert({
@@ -115,6 +120,36 @@ export const RemoteAccessTab = ({
       });
   };
 
+  const addUser = (user, roles) => {
+    const rolePromises = roles.map((role) =>
+      AnsibleRemoteAPI.addRole(id, {
+        role: role.name,
+        users: [user.username],
+      }),
+    );
+    updateRoles({
+      roles: rolePromises,
+      alertSuccess: t`User "${user.username}" has been successfully added to "${name}".`,
+      alertFailure: t`User "${user.username}" could not be added to "${name}".`,
+      stateUpdate: { showUserSelectWizard: null },
+    });
+  };
+
+  const removeUser = (user) => {
+    const roles = user.object_roles.map((role) =>
+      AnsibleRemoteAPI.removeRole(id, {
+        role,
+        users: [user.username],
+      }),
+    );
+    updateRoles({
+      roles,
+      alertSuccess: t`User "${user.username}" has been successfully removed from "${name}".`,
+      alertFailure: t`User "${user.username}" could not be removed from "${name}".`,
+      stateUpdate: { showUserRemoveModal: null },
+    });
+  };
+
   const addGroup = (group, roles) => {
     const rolePromises = roles.map((role) =>
       AnsibleRemoteAPI.addRole(id, {
@@ -122,7 +157,7 @@ export const RemoteAccessTab = ({
         groups: [group.name],
       }),
     );
-    updateGroupRoles({
+    updateRoles({
       roles: rolePromises,
       alertSuccess: t`Group "${group.name}" has been successfully added to "${name}".`,
       alertFailure: t`Group "${group.name}" could not be added to "${name}".`,
@@ -137,13 +172,42 @@ export const RemoteAccessTab = ({
         groups: [group.name],
       }),
     );
-    updateGroupRoles({
+    updateRoles({
       roles,
       alertSuccess: t`Group "${group.name}" has been successfully removed from "${name}".`,
       alertFailure: t`Group "${group.name}" could not be removed from "${name}".`,
       stateUpdate: { showGroupRemoveModal: null },
     });
   };
+
+  const addUserRole = (user, roles) => {
+    const rolePromises = roles.map((role) =>
+      AnsibleRemoteAPI.addRole(id, {
+        role: role.name,
+        users: [user.username],
+      }),
+    );
+    updateRoles({
+      roles: rolePromises,
+      alertSuccess: t`User "${user.username}" roles successfully updated in "${name}".`,
+      alertFailure: t`User "${user.username}" roles could not be update in "${name}".`,
+      stateUpdate: { showRoleSelectWizard: null },
+    });
+  };
+
+  const removeUserRole = (role, user) => {
+    const removedRole = AnsibleRemoteAPI.removeRole(id, {
+      role,
+      users: [user.username],
+    });
+    updateRoles({
+      roles: [removedRole],
+      alertSuccess: t`User "${user.username}" roles successfully updated in "${name}".`,
+      alertFailure: t`User "${user.username}" roles could not be update in "${name}".`,
+      stateUpdate: { showRoleRemoveModal: null },
+    });
+  };
+
   const addRole = (group, roles) => {
     const rolePromises = roles.map((role) =>
       AnsibleRemoteAPI.addRole(id, {
@@ -151,19 +215,20 @@ export const RemoteAccessTab = ({
         groups: [group.name],
       }),
     );
-    updateGroupRoles({
+    updateRoles({
       roles: rolePromises,
       alertSuccess: t`Group "${group.name}" roles successfully updated in "${name}".`,
       alertFailure: t`Group "${group.name}" roles could not be update in "${name}".`,
       stateUpdate: { showRoleSelectWizard: null },
     });
   };
+
   const removeRole = (role, group) => {
     const removedRole = AnsibleRemoteAPI.removeRole(id, {
       role,
       groups: [group.name],
     });
-    updateGroupRoles({
+    updateRoles({
       roles: [removedRole],
       alertSuccess: t`Group "${group.name}" roles successfully updated in "${name}".`,
       alertFailure: t`Group "${group.name}" roles could not be update in "${name}".`,
@@ -174,6 +239,12 @@ export const RemoteAccessTab = ({
   const updateProps = (props) => {
     Object.entries(props).forEach(([k, v]) => {
       switch (k) {
+        case 'showUserRemoveModal':
+          setShowUserRemoveModal(v as UserType);
+          break;
+        case 'showUserSelectWizard':
+          setShowUserSelectWizard(v as { user?: UserType; roles?: RoleType[] });
+          break;
         case 'showGroupRemoveModal':
           setShowGroupRemoveModal(v as GroupType);
           break;
@@ -195,6 +266,22 @@ export const RemoteAccessTab = ({
   };
 
   useEffect(query, [item.pulp_href]);
+
+  useEffect(() => {
+    if (!users) {
+      return;
+    }
+
+    if (!params?.user) {
+      setSelectedUser(null);
+      return;
+    }
+
+    UserAPI.list({ username: params.user }).then(({ data: { data } }) => {
+      setSelectedUser(users.find((u) => u.username === data[0].username));
+    });
+  }, [params?.user, users]);
+
   useEffect(() => {
     if (!groups) {
       return;
@@ -214,6 +301,8 @@ export const RemoteAccessTab = ({
     <AccessTab
       addGroup={addGroup}
       addRole={addRole}
+      addUser={addUser}
+      addUserRole={addUserRole}
       canEditOwners={canEditOwners}
       group={selectedGroup}
       groups={groups}
@@ -221,12 +310,18 @@ export const RemoteAccessTab = ({
       pulpObjectType='remotes/ansible/collection'
       removeGroup={removeGroup}
       removeRole={removeRole}
+      removeUser={removeUser}
+      removeUserRole={removeUserRole}
       selectRolesMessage={t`The selected roles will be added to this specific Ansible remote.`}
       showGroupRemoveModal={showGroupRemoveModal}
       showGroupSelectWizard={showGroupSelectWizard}
       showRoleRemoveModal={showRoleRemoveModal}
       showRoleSelectWizard={showRoleSelectWizard}
+      showUserRemoveModal={showUserRemoveModal}
+      showUserSelectWizard={showUserSelectWizard}
       updateProps={updateProps}
+      user={selectedUser}
+      users={users}
       urlPrefix={formatPath(Paths.ansibleRemoteDetail, {
         name,
       })}
diff --git a/src/containers/ansible-repository/detail.tsx b/src/containers/ansible-repository/detail.tsx
index 8c5ce38527..84b3b349f4 100644
--- a/src/containers/ansible-repository/detail.tsx
+++ b/src/containers/ansible-repository/detail.tsx
@@ -32,12 +32,12 @@ const tabs = [
 const AnsibleRepositoryDetail = PageWithTabs<
   AnsibleRepositoryType & { remote?: AnsibleRemoteType }
 >({
-  breadcrumbs: ({ name, tab, params: { repositoryVersion, group } }) =>
+  breadcrumbs: ({ name, tab, params: { repositoryVersion, user, group } }) =>
     [
       { url: formatPath(Paths.ansibleRepositories), name: t`Repositories` },
       { url: formatPath(Paths.ansibleRepositoryDetail, { name }), name },
-      (tab.id === 'repository-versions' && repositoryVersion) ||
-      (tab.id === 'access' && group)
+      (tab.id === 'access' && (group || user)) ||
+      (tab.id === 'repository-versions' && repositoryVersion)
         ? {
             url: formatPath(
               Paths.ansibleRepositoryDetail,
@@ -47,11 +47,15 @@ const AnsibleRepositoryDetail = PageWithTabs<
             name: tab.name,
           }
         : null,
+      tab.id === 'access' && group ? { name: t`Group ${group}` } : null,
+      tab.id === 'access' && user ? { name: t`User ${user}` } : null,
       tab.id === 'repository-versions' && repositoryVersion
         ? { name: t`Version ${repositoryVersion}` }
-        : tab.id === 'access' && group
-        ? { name: t`Group ${group}` }
-        : { name: tab.name },
+        : null,
+      (tab.id === 'access' && !user && !group) ||
+      (tab.id === 'repository-versions' && !repositoryVersion)
+        ? { name: tab.name }
+        : null,
     ].filter(Boolean),
   condition: canViewAnsibleRepositories,
   displayName: 'AnsibleRepositoryDetail',
@@ -124,6 +128,7 @@ const AnsibleRepositoryDetail = PageWithTabs<
   tabUpdateParams: (p) => {
     delete p.repositoryVersion;
     delete p.group;
+    delete p.user;
     return p;
   },
 });
diff --git a/src/containers/ansible-repository/tab-access.tsx b/src/containers/ansible-repository/tab-access.tsx
index 43944bcc69..e026738cda 100644
--- a/src/containers/ansible-repository/tab-access.tsx
+++ b/src/containers/ansible-repository/tab-access.tsx
@@ -6,11 +6,17 @@ import {
   GroupAPI,
   GroupType,
   RoleType,
+  UserAPI,
 } from 'src/api';
 import { AccessTab } from 'src/components';
 import { Paths, formatPath } from 'src/paths';
 import { canEditAnsibleRepositoryAccess } from 'src/permissions';
-import { errorMessage, parsePulpIDFromURL } from 'src/utilities';
+import { assignRoles, errorMessage, parsePulpIDFromURL } from 'src/utilities';
+
+interface UserType {
+  username: string;
+  object_roles: string[];
+}
 
 interface TabProps {
   item: AnsibleRepositoryType;
@@ -36,8 +42,16 @@ export const RepositoryAccessTab = ({
   const id = item?.pulp_href && parsePulpIDFromURL(item.pulp_href);
   const [name, setName] = useState<string>(item?.name);
   const [groups, setGroups] = useState<GroupType[]>(null); // loading
+  const [users, setUsers] = useState<UserType[]>(null); // loading
   const [canEditOwners, setCanEditOwners] = useState<boolean>(false);
   const [selectedGroup, setSelectedGroup] = useState<GroupType>(null);
+  const [selectedUser, setSelectedUser] = useState<UserType>(null);
+  const [showUserRemoveModal, setShowUserRemoveModal] =
+    useState<UserType>(null);
+  const [showUserSelectWizard, setShowUserSelectWizard] = useState<{
+    user?: UserType;
+    roles?: RoleType[];
+  }>(null);
   const [showGroupRemoveModal, setShowGroupRemoveModal] =
     useState<GroupType>(null);
   const [showGroupSelectWizard, setShowGroupSelectWizard] = useState<{
@@ -50,7 +64,9 @@ export const RepositoryAccessTab = ({
   }>(null);
 
   const query = () => {
+    setUsers(null);
     setGroups(null);
+
     AnsibleRepositoryAPI.myPermissions(id)
       .then(({ data: { permissions } }) => {
         setCanEditOwners(
@@ -62,39 +78,28 @@ export const RepositoryAccessTab = ({
             featureFlags,
           }),
         );
-        AnsibleRepositoryAPI.listRoles(id)
+        // TODO handle pagination
+        AnsibleRepositoryAPI.listRoles(id, { page_size: 100 })
           .then(({ data: { roles } }) => {
-            const groupRoles = [];
-            for (const { groups, role } of roles) {
-              for (const name of groups) {
-                const groupIndex = groupRoles.findIndex((g) => g.name === name);
-                if (groupIndex == -1) {
-                  groupRoles.push({ name, object_roles: [role] });
-                } else {
-                  groupRoles[groupIndex].object_roles.push(role);
-                }
-              }
-            }
+            const { users, groups } = assignRoles(roles);
 
             setName(name);
-            setGroups(groupRoles);
+            setUsers(users as UserType[]);
+            setGroups(groups as GroupType[]);
           })
           .catch(() => {
+            setUsers([]);
             setGroups([]);
           });
       })
       .catch(() => {
+        setUsers([]);
         setGroups([]);
         setCanEditOwners(false);
       });
   };
 
-  const updateGroupRoles = ({
-    roles,
-    alertSuccess,
-    alertFailure,
-    stateUpdate,
-  }) => {
+  const updateRoles = ({ roles, alertSuccess, alertFailure, stateUpdate }) => {
     Promise.all(roles)
       .then(() => {
         addAlert({
@@ -115,6 +120,36 @@ export const RepositoryAccessTab = ({
       });
   };
 
+  const addUser = (user, roles) => {
+    const rolePromises = roles.map((role) =>
+      AnsibleRepositoryAPI.addRole(id, {
+        role: role.name,
+        users: [user.username],
+      }),
+    );
+    updateRoles({
+      roles: rolePromises,
+      alertSuccess: t`User "${user.username}" has been successfully added to "${name}".`,
+      alertFailure: t`User "${user.username}" could not be added to "${name}".`,
+      stateUpdate: { showUserSelectWizard: null },
+    });
+  };
+
+  const removeUser = (user) => {
+    const roles = user.object_roles.map((role) =>
+      AnsibleRepositoryAPI.removeRole(id, {
+        role,
+        users: [user.username],
+      }),
+    );
+    updateRoles({
+      roles,
+      alertSuccess: t`User "${user.username}" has been successfully removed from "${name}".`,
+      alertFailure: t`User "${user.username}" could not be removed from "${name}".`,
+      stateUpdate: { showUserRemoveModal: null },
+    });
+  };
+
   const addGroup = (group, roles) => {
     const rolePromises = roles.map((role) =>
       AnsibleRepositoryAPI.addRole(id, {
@@ -122,7 +157,7 @@ export const RepositoryAccessTab = ({
         groups: [group.name],
       }),
     );
-    updateGroupRoles({
+    updateRoles({
       roles: rolePromises,
       alertSuccess: t`Group "${group.name}" has been successfully added to "${name}".`,
       alertFailure: t`Group "${group.name}" could not be added to "${name}".`,
@@ -137,13 +172,42 @@ export const RepositoryAccessTab = ({
         groups: [group.name],
       }),
     );
-    updateGroupRoles({
+    updateRoles({
       roles,
       alertSuccess: t`Group "${group.name}" has been successfully removed from "${name}".`,
       alertFailure: t`Group "${group.name}" could not be removed from "${name}".`,
       stateUpdate: { showGroupRemoveModal: null },
     });
   };
+
+  const addUserRole = (user, roles) => {
+    const rolePromises = roles.map((role) =>
+      AnsibleRepositoryAPI.addRole(id, {
+        role: role.name,
+        users: [user.username],
+      }),
+    );
+    updateRoles({
+      roles: rolePromises,
+      alertSuccess: t`User "${user.username}" roles successfully updated in "${name}".`,
+      alertFailure: t`User "${user.username}" roles could not be update in "${name}".`,
+      stateUpdate: { showRoleSelectWizard: null },
+    });
+  };
+
+  const removeUserRole = (role, user) => {
+    const removedRole = AnsibleRepositoryAPI.removeRole(id, {
+      role,
+      users: [user.username],
+    });
+    updateRoles({
+      roles: [removedRole],
+      alertSuccess: t`User "${user.username}" roles successfully updated in "${name}".`,
+      alertFailure: t`User "${user.username}" roles could not be update in "${name}".`,
+      stateUpdate: { showRoleRemoveModal: null },
+    });
+  };
+
   const addRole = (group, roles) => {
     const rolePromises = roles.map((role) =>
       AnsibleRepositoryAPI.addRole(id, {
@@ -151,19 +215,20 @@ export const RepositoryAccessTab = ({
         groups: [group.name],
       }),
     );
-    updateGroupRoles({
+    updateRoles({
       roles: rolePromises,
       alertSuccess: t`Group "${group.name}" roles successfully updated in "${name}".`,
       alertFailure: t`Group "${group.name}" roles could not be update in "${name}".`,
       stateUpdate: { showRoleSelectWizard: null },
     });
   };
+
   const removeRole = (role, group) => {
     const removedRole = AnsibleRepositoryAPI.removeRole(id, {
       role,
       groups: [group.name],
     });
-    updateGroupRoles({
+    updateRoles({
       roles: [removedRole],
       alertSuccess: t`Group "${group.name}" roles successfully updated in "${name}".`,
       alertFailure: t`Group "${group.name}" roles could not be update in "${name}".`,
@@ -174,6 +239,12 @@ export const RepositoryAccessTab = ({
   const updateProps = (props) => {
     Object.entries(props).forEach(([k, v]) => {
       switch (k) {
+        case 'showUserRemoveModal':
+          setShowUserRemoveModal(v as UserType);
+          break;
+        case 'showUserSelectWizard':
+          setShowUserSelectWizard(v as { user?: UserType; roles?: RoleType[] });
+          break;
         case 'showGroupRemoveModal':
           setShowGroupRemoveModal(v as GroupType);
           break;
@@ -195,6 +266,22 @@ export const RepositoryAccessTab = ({
   };
 
   useEffect(query, [item.pulp_href]);
+
+  useEffect(() => {
+    if (!users) {
+      return;
+    }
+
+    if (!params?.user) {
+      setSelectedUser(null);
+      return;
+    }
+
+    UserAPI.list({ username: params.user }).then(({ data: { data } }) => {
+      setSelectedUser(users.find((u) => u.username === data[0].username));
+    });
+  }, [params?.user, users]);
+
   useEffect(() => {
     if (!groups) {
       return;
@@ -214,6 +301,8 @@ export const RepositoryAccessTab = ({
     <AccessTab
       addGroup={addGroup}
       addRole={addRole}
+      addUser={addUser}
+      addUserRole={addUserRole}
       canEditOwners={canEditOwners}
       group={selectedGroup}
       groups={groups}
@@ -221,12 +310,18 @@ export const RepositoryAccessTab = ({
       pulpObjectType='repositories/ansible/ansible'
       removeGroup={removeGroup}
       removeRole={removeRole}
+      removeUser={removeUser}
+      removeUserRole={removeUserRole}
       selectRolesMessage={t`The selected roles will be added to this specific Ansible repository.`}
       showGroupRemoveModal={showGroupRemoveModal}
       showGroupSelectWizard={showGroupSelectWizard}
       showRoleRemoveModal={showRoleRemoveModal}
       showRoleSelectWizard={showRoleSelectWizard}
+      showUserRemoveModal={showUserRemoveModal}
+      showUserSelectWizard={showUserSelectWizard}
       updateProps={updateProps}
+      user={selectedUser}
+      users={users}
       urlPrefix={formatPath(Paths.ansibleRepositoryDetail, {
         name,
       })}
diff --git a/src/containers/execution-environment-detail/execution_environment_detail_access.tsx b/src/containers/execution-environment-detail/execution_environment_detail_access.tsx
index 8044e9c34e..ce184d279b 100644
--- a/src/containers/execution-environment-detail/execution_environment_detail_access.tsx
+++ b/src/containers/execution-environment-detail/execution_environment_detail_access.tsx
@@ -5,12 +5,13 @@ import {
   GroupAPI,
   GroupType,
   RoleType,
+  UserAPI,
 } from 'src/api';
 import { AccessTab } from 'src/components';
 import { AppContext } from 'src/loaders/app-context';
 import { Paths, formatEEPath } from 'src/paths';
 import { withRouter } from 'src/utilities';
-import { ParamHelper, errorMessage } from 'src/utilities';
+import { ParamHelper, assignRoles, errorMessage } from 'src/utilities';
 import {
   IDetailSharedProps,
   withContainerParamFix,
@@ -18,18 +19,28 @@ import {
 } from './base';
 import './execution-environment-detail.scss';
 
+interface UserType {
+  username: string;
+  object_roles: string[];
+}
+
 interface IState {
-  name: string;
-  groups: GroupType[];
   canEditOwners: boolean;
-  selectedGroup: GroupType;
+  groups: GroupType[];
+  name: string;
   params: {
-    group?: number;
+    group?: string;
+    user?: string;
   };
+  selectedGroup: GroupType;
+  selectedUser: UserType;
   showGroupRemoveModal?: GroupType;
   showGroupSelectWizard?: { group?: GroupType; roles?: RoleType[] };
   showRoleRemoveModal?: string;
   showRoleSelectWizard?: { roles?: RoleType[] };
+  showUserRemoveModal?: UserType;
+  showUserSelectWizard?: { user?: UserType; roles?: RoleType[] };
+  users: UserType[];
 }
 
 class ExecutionEnvironmentDetailAccess extends React.Component<
@@ -39,18 +50,24 @@ class ExecutionEnvironmentDetailAccess extends React.Component<
   constructor(props) {
     super(props);
 
-    const params = ParamHelper.parseParamString(this.props.location.search);
+    const params = ParamHelper.parseParamString(
+      this.props.location.search,
+    ) as IState['params'];
 
     this.state = {
-      name: props.containerRepository.name,
-      groups: null, // loading
       canEditOwners: false,
-      selectedGroup: null,
+      groups: null, // loading
+      name: props.containerRepository.name,
       params,
+      selectedGroup: null,
+      selectedUser: null,
       showGroupRemoveModal: null,
       showGroupSelectWizard: null,
       showRoleRemoveModal: null,
       showRoleSelectWizard: null,
+      showUserRemoveModal: null,
+      showUserSelectWizard: null,
+      users: null, // loading
     };
   }
 
@@ -60,13 +77,20 @@ class ExecutionEnvironmentDetailAccess extends React.Component<
 
   componentDidUpdate(prevProps) {
     if (prevProps.location.search !== this.props.location.search) {
-      const params = ParamHelper.parseParamString(this.props.location.search);
+      const params = ParamHelper.parseParamString(
+        this.props.location.search,
+      ) as IState['params'];
 
-      if (!params['group']) {
+      if (!params.group) {
         this.setState({
           selectedGroup: null,
         });
       }
+      if (!params.user) {
+        this.setState({
+          selectedUser: null,
+        });
+      }
 
       this.setState({ params }, () =>
         this.queryNamespace(this.props.containerRepository.namespace),
@@ -74,17 +98,24 @@ class ExecutionEnvironmentDetailAccess extends React.Component<
     }
   }
 
-  updateGroupRoles({ roles, alertSuccess, alertFailure, stateUpdate }) {
+  updateRoles({ roles, alertSuccess, alertFailure, stateUpdate }) {
+    const {
+      addAlert,
+      containerRepository: { namespace },
+    } = this.props;
+
     Promise.all(roles)
       .then(() => {
-        this.props.addAlert({
+        addAlert({
           title: alertSuccess,
           variant: 'success',
         });
-        this.queryNamespace(this.props.containerRepository.namespace); // ensure reload() sets groups: null to trigger loading spinner
+
+        // ensure reload() sets users/groups: null to trigger loading spinner
+        this.queryNamespace(namespace);
       })
       .catch(({ response: { status, statusText } }) => {
-        this.props.addAlert({
+        addAlert({
           title: alertFailure,
           variant: 'danger',
           description: errorMessage(status, statusText),
@@ -96,22 +127,65 @@ class ExecutionEnvironmentDetailAccess extends React.Component<
   }
 
   render() {
-    const { name, groups, canEditOwners, selectedGroup } = this.state;
+    const { canEditOwners, groups, name, selectedGroup, selectedUser, users } =
+      this.state;
 
     return (
       <AccessTab
-        showGroupRemoveModal={this.state.showGroupRemoveModal}
-        showGroupSelectWizard={this.state.showGroupSelectWizard}
-        showRoleRemoveModal={this.state.showRoleRemoveModal}
-        showRoleSelectWizard={this.state.showRoleSelectWizard}
         canEditOwners={canEditOwners}
         group={selectedGroup}
         groups={groups}
         name={name}
         pulpObjectType='pulp_container/namespaces'
+        selectRolesMessage={t`The selected roles will be added to this specific Execution Environment.`}
+        showGroupRemoveModal={this.state.showGroupRemoveModal}
+        showGroupSelectWizard={this.state.showGroupSelectWizard}
+        showRoleRemoveModal={this.state.showRoleRemoveModal}
+        showRoleSelectWizard={this.state.showRoleSelectWizard}
+        showUserRemoveModal={this.state.showUserRemoveModal}
+        showUserSelectWizard={this.state.showUserSelectWizard}
         updateProps={(prop) => {
           this.setState(prop);
         }}
+        urlPrefix={formatEEPath(Paths.executionEnvironmentDetailAccess, {
+          container: name,
+        })}
+        user={selectedUser}
+        users={users}
+        addUser={(user, roles) => {
+          const rolePromises = roles.map((role) =>
+            ExecutionEnvironmentNamespaceAPI.addRole(
+              this.props.containerRepository.namespace.id,
+              {
+                role: role.name,
+                users: [user.username],
+              },
+            ),
+          );
+          this.updateRoles({
+            roles: rolePromises,
+            alertSuccess: t`User "${user.username}" has been successfully added to "${name}".`,
+            alertFailure: t`User "${user.username}" could not be added to "${name}".`,
+            stateUpdate: { showUserSelectWizard: null },
+          });
+        }}
+        removeUser={(user) => {
+          const roles = user.object_roles.map((role) =>
+            ExecutionEnvironmentNamespaceAPI.removeRole(
+              this.props.containerRepository.namespace.id,
+              {
+                role,
+                users: [user.username],
+              },
+            ),
+          );
+          this.updateRoles({
+            roles,
+            alertSuccess: t`User "${user.username}" has been successfully removed from "${name}".`,
+            alertFailure: t`User "${user.username}" could not be removed from "${name}".`,
+            stateUpdate: { showUserRemoveModal: null },
+          });
+        }}
         addGroup={(group, roles) => {
           const rolePromises = roles.map((role) =>
             ExecutionEnvironmentNamespaceAPI.addRole(
@@ -122,7 +196,7 @@ class ExecutionEnvironmentDetailAccess extends React.Component<
               },
             ),
           );
-          this.updateGroupRoles({
+          this.updateRoles({
             roles: rolePromises,
             alertSuccess: t`Group "${group.name}" has been successfully added to "${name}".`,
             alertFailure: t`Group "${group.name}" could not be added to "${name}".`,
@@ -139,13 +213,45 @@ class ExecutionEnvironmentDetailAccess extends React.Component<
               },
             ),
           );
-          this.updateGroupRoles({
+          this.updateRoles({
             roles,
             alertSuccess: t`Group "${group.name}" has been successfully removed from "${name}".`,
             alertFailure: t`Group "${group.name}" could not be removed from "${name}".`,
             stateUpdate: { showGroupRemoveModal: null },
           });
         }}
+        addUserRole={(user, roles) => {
+          const rolePromises = roles.map((role) =>
+            ExecutionEnvironmentNamespaceAPI.addRole(
+              this.props.containerRepository.namespace.id,
+              {
+                role: role.name,
+                users: [user.username],
+              },
+            ),
+          );
+          this.updateRoles({
+            roles: rolePromises,
+            alertSuccess: t`User "${user.username}" roles successfully updated in "${name}".`,
+            alertFailure: t`User "${user.username}" roles could not be update in "${name}".`,
+            stateUpdate: { showRoleSelectWizard: null },
+          });
+        }}
+        removeUserRole={(role, user) => {
+          const removedRole = ExecutionEnvironmentNamespaceAPI.removeRole(
+            this.props.containerRepository.namespace.id,
+            {
+              role,
+              users: [user.username],
+            },
+          );
+          this.updateRoles({
+            roles: [removedRole],
+            alertSuccess: t`User "${user.username}" roles successfully updated in "${name}".`,
+            alertFailure: t`User "${user.username}" roles could not be update in "${name}".`,
+            stateUpdate: { showRoleRemoveModal: null },
+          });
+        }}
         addRole={(group, roles) => {
           const rolePromises = roles.map((role) =>
             ExecutionEnvironmentNamespaceAPI.addRole(
@@ -156,7 +262,7 @@ class ExecutionEnvironmentDetailAccess extends React.Component<
               },
             ),
           );
-          this.updateGroupRoles({
+          this.updateRoles({
             roles: rolePromises,
             alertSuccess: t`Group "${group.name}" roles successfully updated in "${name}".`,
             alertFailure: t`Group "${group.name}" roles could not be update in "${name}".`,
@@ -171,34 +277,23 @@ class ExecutionEnvironmentDetailAccess extends React.Component<
               groups: [group.name],
             },
           );
-          this.updateGroupRoles({
+          this.updateRoles({
             roles: [removedRole],
             alertSuccess: t`Group "${group.name}" roles successfully updated in "${name}".`,
             alertFailure: t`Group "${group.name}" roles could not be update in "${name}".`,
             stateUpdate: { showRoleRemoveModal: null },
           });
         }}
-        selectRolesMessage={t`The selected roles will be added to this specific Execution Environment.`}
-        urlPrefix={formatEEPath(Paths.executionEnvironmentDetailAccess, {
-          container: name,
-        })}
       />
     );
   }
 
-  assignRolesToGroup(roles) {
-    const groupRoles = [];
-    for (const { groups, role } of roles) {
-      for (const name of groups) {
-        const groupIndex = groupRoles.findIndex((g) => g.name === name);
-        if (groupIndex == -1) {
-          groupRoles.push({ name, object_roles: [role] });
-        } else {
-          groupRoles[groupIndex].object_roles.push(role);
-        }
-      }
-    }
-    return groupRoles;
+  querySelectedUser(username, users) {
+    UserAPI.list({ username }).then(({ data: { data } }) => {
+      this.setState({
+        selectedUser: users.find((u) => u.username === data[0].username),
+      });
+    });
   }
 
   querySelectedGroup(name, groups) {
@@ -209,36 +304,44 @@ class ExecutionEnvironmentDetailAccess extends React.Component<
     });
   }
 
-  queryNamespace({ id, name: repoName }) {
+  queryNamespace({ id, name }) {
     const { hasPermission } = this.context;
-    ExecutionEnvironmentNamespaceAPI.myPermissions(id)
-      .then(({ data: { permissions } }) => {
-        ExecutionEnvironmentNamespaceAPI.listRoles(id)
-          .then(({ data: { roles } }) => {
-            const groupRoles = this.assignRolesToGroup(roles);
-
-            this.setState({
-              name: repoName,
-              groups: groupRoles,
-              canEditOwners:
-                permissions.includes('container.change_containernamespace') ||
-                hasPermission('container.change_containernamespace'),
-            });
-
-            if (this.state.params?.group) {
-              this.querySelectedGroup(this.state.params.group, groupRoles);
-            }
-          })
-          .catch(() => {
-            this.setState({
-              groups: [],
-            });
-          });
+    Promise.all([
+      ExecutionEnvironmentNamespaceAPI.myPermissions(id).then(
+        ({ data: { permissions } }) => permissions,
+      ),
+      // TODO handle pagination
+      ExecutionEnvironmentNamespaceAPI.listRoles(id, { page_size: 100 }).then(
+        ({ data: { roles } }) => roles,
+      ),
+    ])
+      .then(([permissions, roles]) => {
+        const { users, groups } = assignRoles(roles) as {
+          users: UserType[];
+          groups: GroupType[];
+        };
+
+        this.setState({
+          name,
+          canEditOwners:
+            permissions.includes('container.change_containernamespace') ||
+            hasPermission('container.change_containernamespace'),
+          groups,
+          users,
+        });
+
+        if (this.state.params?.user) {
+          this.querySelectedUser(this.state.params.user, users);
+        }
+        if (this.state.params?.group) {
+          this.querySelectedGroup(this.state.params.group, groups);
+        }
       })
       .catch(() => {
         this.setState({
-          groups: [],
           canEditOwners: false,
+          groups: [],
+          users: [],
         });
       });
   }
diff --git a/src/containers/namespace-detail/namespace-detail.tsx b/src/containers/namespace-detail/namespace-detail.tsx
index eae34fc9dc..019becc54b 100644
--- a/src/containers/namespace-detail/namespace-detail.tsx
+++ b/src/containers/namespace-detail/namespace-detail.tsx
@@ -59,6 +59,11 @@ import {
 } from 'src/utilities';
 import './namespace-detail.scss';
 
+interface UserType {
+  username: string;
+  object_roles: string[];
+}
+
 interface IState {
   alerts: AlertType[];
   canSign: boolean;
@@ -68,6 +73,7 @@ interface IState {
   deleteCollection: CollectionVersionSearch;
   filteredCount: number;
   group: GroupType;
+  user: UserType;
   isDeletionPending: boolean;
   isNamespacePending: boolean;
   isOpenNamespaceModal: boolean;
@@ -75,16 +81,20 @@ interface IState {
   isOpenWisdomModal: boolean;
   namespace: NamespaceType;
   params: {
-    group?: number;
+    group?: string;
     keywords?: string;
     namespace?: string;
     page?: number;
     page_size?: number;
+    repository_name?: string;
     sort?: string;
     tab?: string;
+    user?: string;
   };
   redirect: string;
   showControls: boolean;
+  showUserRemoveModal?: UserType;
+  showUserSelectWizard?: { user?: UserType; roles?: RoleType[] };
   showGroupRemoveModal?: GroupType;
   showGroupSelectWizard?: { group?: GroupType; roles?: RoleType[] };
   showImportModal: boolean;
@@ -96,7 +106,7 @@ interface IState {
 }
 
 export class NamespaceDetail extends React.Component<RouteProps, IState> {
-  nonAPIParams = ['tab', 'group'];
+  nonAPIParams = ['tab', 'group', 'user'];
 
   // namespace is a positional url argument, so don't include it in the
   // query params
@@ -107,11 +117,11 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
     const params = ParamHelper.parseParamString(props.location.search, [
       'page',
       'page_size',
-    ]);
+    ]) as IState['params'];
 
-    params['namespace'] = props.routeParams.namespace;
-    if (props.routeParams.repo && !params['repository_name']) {
-      params['repository_name'] = props.routeParams.repo;
+    params.namespace = props.routeParams.namespace;
+    if (props.routeParams.repo && !params.repository_name) {
+      params.repository_name = props.routeParams.repo;
     }
 
     this.state = {
@@ -123,6 +133,7 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
       deleteCollection: null,
       filteredCount: 0,
       group: null,
+      user: null,
       isDeletionPending: false,
       isNamespacePending: false,
       isOpenNamespaceModal: false,
@@ -154,44 +165,56 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
     const params = ParamHelper.parseParamString(this.props.location.search, [
       'page',
       'page_size',
-    ]);
+    ]) as IState['params'];
 
     if (prevProps.location.search !== this.props.location.search) {
-      params['namespace'] = this.props.routeParams.namespace;
+      params.namespace = this.props.routeParams.namespace;
 
       this.setState({
         params,
-        group: this.filterGroup(params['group'], this.state.namespace.groups),
+        group: this.filterGroup(params.group, this.state.namespace.groups),
+        user: this.filterUser(params.user, this.state.namespace.users),
       });
     }
 
     if (
       prevProps.routeParams.repo !== this.props.routeParams.repo &&
       this.props.routeParams.repo &&
-      (!params['repository_name'] ||
-        params['repository_name'] === prevProps.routeParams.repo)
+      (!params.repository_name ||
+        params.repository_name === prevProps.routeParams.repo)
     ) {
-      params['repository_name'] = this.props.routeParams.repo;
+      params.repository_name = this.props.routeParams.repo;
       this.setState({ params });
     }
   }
 
-  filterGroup(groupId, groups) {
-    return groupId ? groups.find(({ id }) => Number(groupId) === id) : null;
+  filterUser(username, users) {
+    return username ? users.find((u) => u.username === username) : null;
+  }
+
+  filterGroup(name, groups) {
+    return name ? groups.find((g) => g.name === name) : null;
   }
 
-  private updateGroups({ groups, alertSuccess, alertFailure, stateUpdate }) {
+  private updateRoles({
+    users = null,
+    groups = null,
+    alertSuccess,
+    alertFailure,
+    stateUpdate,
+  }) {
     const { name } = this.state.namespace;
     MyNamespaceAPI.update(name, {
       ...this.state.namespace,
-      groups,
+      users: users || this.state.namespace.users,
+      groups: groups || this.state.namespace.groups,
     })
       .then(() => {
         this.addAlert({
           title: alertSuccess,
           variant: 'success',
         });
-        this.load(); // ensure reload() sets groups: null to trigger loading spinner
+        this.load(); // ensure reload() sets users/groups: null to trigger loading spinner
       })
       .catch(({ response: { status, statusText } }) => {
         this.addAlert({
@@ -241,7 +264,8 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
       { id: 'access', name: t`Access` },
     ].filter(Boolean);
 
-    const tab = params['tab'] || 'collections';
+    const tab = params.tab || 'collections';
+    const { user, group } = params;
 
     const breadcrumbs = [
       namespaceBreadcrumb(),
@@ -254,23 +278,19 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
               })
             : null,
       },
-      tab === 'access'
+      tab === 'access' && (group || user)
         ? {
+            url: formatPath(
+              Paths.namespaceDetail,
+              { namespace: namespace.name },
+              { tab },
+            ),
             name: t`Access`,
-            url: params.group
-              ? formatPath(
-                  Paths.namespaceDetail,
-                  {
-                    namespace: namespace.name,
-                  },
-                  { tab: 'access' },
-                )
-              : null,
           }
         : null,
-      tab === 'access' && params.group
-        ? { name: t`Group ${params.group}` }
-        : null,
+      tab === 'access' && group ? { name: t`Group ${group}` } : null,
+      tab === 'access' && user ? { name: t`User ${user}` } : null,
+      tab === 'access' && !user && !group ? { name: t`Access` } : null,
     ].filter(Boolean);
 
     const repositoryUrl = getRepoURL('published');
@@ -294,6 +314,7 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
       'sort',
       'tab',
       'group',
+      'user',
       'view_type',
     ];
 
@@ -304,17 +325,18 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
         'galaxy.change_namespace',
       ) || hasPermission('galaxy.change_namespace');
 
-    // remove ?group (access tab) when switching tabs
+    // remove ?user/group (access tab) when switching tabs
     const tabParams = { ...params };
     delete tabParams.group;
+    delete tabParams.user;
 
-    const repository = params['repository_name'] || null;
+    const repository = params.repository_name || null;
     const deleteFromRepo = this.state.deleteAll
       ? null
       : deleteCollection?.repository?.name;
 
     return (
-      <React.Fragment>
+      <>
         <AlertList alerts={alerts} closeAlert={(i) => this.closeAlert(i)} />
         <ImportModal
           isOpen={showImportModal}
@@ -486,6 +508,8 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
           {tab === 'resources' ? this.renderResources(namespace) : null}
           {tab === 'access' ? (
             <AccessTab
+              showUserRemoveModal={this.state.showUserRemoveModal}
+              showUserSelectWizard={this.state.showUserSelectWizard}
               showGroupRemoveModal={this.state.showGroupRemoveModal}
               showGroupSelectWizard={this.state.showGroupSelectWizard}
               showRoleRemoveModal={this.state.showRoleRemoveModal}
@@ -493,12 +517,39 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
               canEditOwners={canEditOwners}
               group={this.state.group}
               groups={namespace.groups}
+              user={this.state.user}
+              users={namespace.users}
               name={namespace.name}
               pulpObjectType='pulp_ansible/namespaces'
               selectRolesMessage={t`The selected roles will be added to this specific namespace.`}
               updateProps={(prop) => {
                 this.setState(prop);
               }}
+              addUser={(user, roles) => {
+                const { users, name } = namespace;
+                const newUser = {
+                  ...user,
+                  object_roles: roles.map(({ name }) => name),
+                };
+                const newUsers = [...users, newUser];
+
+                this.updateRoles({
+                  users: newUsers,
+                  alertSuccess: t`User "${user.username}" has been successfully added to "${name}".`,
+                  alertFailure: t`User "${user.username}" could not be added to "${name}".`,
+                  stateUpdate: { showUserSelectWizard: null },
+                });
+              }}
+              removeUser={(user) => {
+                const { name, users } = namespace;
+                const newUsers = users.filter((u) => u !== user);
+                this.updateRoles({
+                  users: newUsers,
+                  alertSuccess: t`User "${user.username}" has been successfully removed from "${name}".`,
+                  alertFailure: t`User "${user.username}" could not be removed from "${name}".`,
+                  stateUpdate: { showUserRemoveModal: null },
+                });
+              }}
               addGroup={(group, roles) => {
                 const { groups, name } = namespace;
                 const newGroup = {
@@ -507,7 +558,7 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
                 };
                 const newGroups = [...groups, newGroup];
 
-                this.updateGroups({
+                this.updateRoles({
                   groups: newGroups,
                   alertSuccess: t`Group "${group.name}" has been successfully added to "${name}".`,
                   alertFailure: t`Group "${group.name}" could not be added to "${name}".`,
@@ -517,13 +568,48 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
               removeGroup={(group) => {
                 const { name, groups } = namespace;
                 const newGroups = groups.filter((g) => g !== group);
-                this.updateGroups({
+                this.updateRoles({
                   groups: newGroups,
                   alertSuccess: t`Group "${group.name}" has been successfully removed from "${name}".`,
                   alertFailure: t`Group "${group.name}" could not be removed from "${name}".`,
                   stateUpdate: { showGroupRemoveModal: null },
                 });
               }}
+              addUserRole={(user, roles) => {
+                const { name, users } = namespace;
+                const newUser = {
+                  ...user,
+                  object_roles: [
+                    ...user.object_roles,
+                    ...roles.map(({ name }) => name),
+                  ],
+                };
+                const newUsers = users.map((u) => (u === user ? newUser : u));
+
+                this.updateRoles({
+                  users: newUsers,
+                  alertSuccess: t`User "${user.username}" roles successfully updated in "${name}".`,
+                  alertFailure: t`User "${user.username}" roles could not be update in "${name}".`,
+                  stateUpdate: { showRoleSelectWizard: null },
+                });
+              }}
+              removeUserRole={(role, user) => {
+                const { name, users } = namespace;
+                const newUser = {
+                  ...user,
+                  object_roles: user.object_roles.filter(
+                    (name) => name !== role,
+                  ),
+                };
+                const newUsers = users.map((u) => (u === user ? newUser : u));
+
+                this.updateRoles({
+                  users: newUsers,
+                  alertSuccess: t`User "${user.username}" roles successfully updated in "${name}".`,
+                  alertFailure: t`User "${user.username}" roles could not be update in "${name}".`,
+                  stateUpdate: { showRoleRemoveModal: null },
+                });
+              }}
               addRole={(group, roles) => {
                 const { name, groups } = namespace;
                 const newGroup = {
@@ -537,7 +623,7 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
                   g === group ? newGroup : g,
                 );
 
-                this.updateGroups({
+                this.updateRoles({
                   groups: newGroups,
                   alertSuccess: t`Group "${group.name}" roles successfully updated in "${name}".`,
                   alertFailure: t`Group "${group.name}" roles could not be update in "${name}".`,
@@ -556,7 +642,7 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
                   g === group ? newGroup : g,
                 );
 
-                this.updateGroups({
+                this.updateRoles({
                   groups: newGroups,
                   alertSuccess: t`Group "${group.name}" roles successfully updated in "${name}".`,
                   alertFailure: t`Group "${group.name}" roles could not be update in "${name}".`,
@@ -577,7 +663,7 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
             onCancel={() => this.setState({ isOpenSignModal: false })}
           />
         )}
-      </React.Fragment>
+      </>
     );
   }
 
@@ -753,11 +839,15 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
         ]) => {
           this.setState({
             canSign: canSignNamespace(this.context, myNamespace?.data),
-            group: this.filterGroup(
-              this.state.params['group'],
-              namespace['groups'],
-            ),
-            namespace,
+            group: this.filterGroup(this.state.params.group, namespace.groups),
+            user: this.filterUser(this.state.params.user, namespace.users),
+            namespace: {
+              ...namespace,
+              users: namespace.users.map(({ name, object_roles }) => ({
+                username: name,
+                object_roles,
+              })),
+            },
             showControls: !!myNamespace,
             unfilteredCount,
           });
@@ -777,11 +867,11 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
     const { can_upload_signatures } = this.context.featureFlags;
     const { ai_deny_index } = this.context.featureFlags;
     const { hasPermission } = this.context;
-    const repository = this.state.params['repository_name'] || null;
+    const repository = this.state.params.repository_name || null;
 
     const dropdownItems = [
       <DropdownItem
-        key='1'
+        key='edit'
         component={
           <Link
             to={formatPath(Paths.editNamespace, {
@@ -792,31 +882,30 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
           </Link>
         }
       />,
-      hasPermission('galaxy.delete_namespace') && (
-        <React.Fragment key={'2'}>
-          {unfilteredCount === 0 ? (
-            <DropdownItem
-              onClick={() => this.setState({ isOpenNamespaceModal: true })}
-            >{t`Delete namespace`}</DropdownItem>
-          ) : (
-            <Tooltip
-              isVisible={false}
-              content={
-                <Trans>
-                  Cannot delete namespace until <br />
-                  collections&apos; dependencies have <br />
-                  been deleted
-                </Trans>
-              }
-              position='left'
-            >
-              <DropdownItem isDisabled>{t`Delete namespace`}</DropdownItem>
-            </Tooltip>
-          )}
-        </React.Fragment>
-      ),
+      hasPermission('galaxy.delete_namespace') &&
+        (unfilteredCount === 0 ? (
+          <DropdownItem
+            key='delete'
+            onClick={() => this.setState({ isOpenNamespaceModal: true })}
+          >{t`Delete namespace`}</DropdownItem>
+        ) : (
+          <Tooltip
+            key='delete'
+            isVisible={false}
+            content={
+              <Trans>
+                Cannot delete namespace until <br />
+                collections&apos; dependencies have <br />
+                been deleted
+              </Trans>
+            }
+            position='left'
+          >
+            <DropdownItem isDisabled>{t`Delete namespace`}</DropdownItem>
+          </Tooltip>
+        )),
       <DropdownItem
-        key='3'
+        key='imports'
         component={
           <Link
             to={formatPath(
diff --git a/src/utilities/assign-roles.ts b/src/utilities/assign-roles.ts
new file mode 100644
index 0000000000..94227a9913
--- /dev/null
+++ b/src/utilities/assign-roles.ts
@@ -0,0 +1,34 @@
+import { sortBy } from 'lodash';
+
+export const assignRoles = (roles) => {
+  const userRoles = {};
+  const groupRoles = {};
+
+  roles.forEach(({ users, groups, role }) => {
+    (users || []).forEach((username) => {
+      userRoles[username] ||= [];
+      userRoles[username].push(role);
+    });
+    (groups || []).forEach((name) => {
+      groupRoles[name] ||= [];
+      groupRoles[name].push(role);
+    });
+  });
+
+  return {
+    users: sortBy(
+      Object.entries(userRoles).map(([username, object_roles]) => ({
+        username,
+        object_roles,
+      })),
+      'username',
+    ),
+    groups: sortBy(
+      Object.entries(groupRoles).map(([name, object_roles]) => ({
+        name,
+        object_roles,
+      })),
+      'name',
+    ),
+  };
+};
diff --git a/src/utilities/index.ts b/src/utilities/index.ts
index 3e2547b23f..6eba9ec3ee 100644
--- a/src/utilities/index.ts
+++ b/src/utilities/index.ts
@@ -1,3 +1,4 @@
+export { assignRoles } from './assign-roles';
 export { canSignEE, canSignNamespace } from './can-sign';
 export { chipGroupProps } from './chip-group-props';
 export { convertContentSummaryCounts } from './content-summary';

From ace5f04dc5cf9d15fbc5053b9173b0dd14277afc Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Tue, 26 Sep 2023 20:53:48 +0000
Subject: [PATCH 2/3] test fix

---
 src/containers/namespace-detail/namespace-detail.tsx | 11 +++++++----
 test/cypress/e2e/misc/rbac_access.js                 |  6 +++---
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/containers/namespace-detail/namespace-detail.tsx b/src/containers/namespace-detail/namespace-detail.tsx
index 019becc54b..0cbdbb6c4d 100644
--- a/src/containers/namespace-detail/namespace-detail.tsx
+++ b/src/containers/namespace-detail/namespace-detail.tsx
@@ -843,10 +843,13 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
             user: this.filterUser(this.state.params.user, namespace.users),
             namespace: {
               ...namespace,
-              users: namespace.users.map(({ name, object_roles }) => ({
-                username: name,
-                object_roles,
-              })),
+              // transform to use username, don't break when missing
+              users: namespace.users
+                ? namespace.users.map(({ name, object_roles }) => ({
+                    username: name,
+                    object_roles,
+                  }))
+                : [],
             },
             showControls: !!myNamespace,
             unfilteredCount,
diff --git a/test/cypress/e2e/misc/rbac_access.js b/test/cypress/e2e/misc/rbac_access.js
index a1d3a4b482..be81dfeee9 100644
--- a/test/cypress/e2e/misc/rbac_access.js
+++ b/test/cypress/e2e/misc/rbac_access.js
@@ -124,13 +124,13 @@ function testAccessTab({
     .parent('.pf-c-alert')
     .find('button')
     .click();
-  cy.get('tr[data-cy="AccessTab-row-access_group"]');
+  cy.get('tr[data-cy="AccessTab-row-group-access_group"]');
 
   // group list view, try modal, open group
   cy.get('button').contains('Select a group').click();
   cy.get('.pf-c-wizard__footer-cancel').click();
 
-  cy.get('tr[data-cy="AccessTab-row-access_group"] a').click();
+  cy.get('tr[data-cy="AccessTab-row-group-access_group"] a').click();
 
   // role list view, use modal
   cy.get(`[data-cy="RoleListTable-ExpandableRow-row-${role}"]`);
@@ -179,7 +179,7 @@ function testAccessTab({
 
   // list view, delete, see empty
   cy.get(
-    'tr[data-cy="AccessTab-row-access_group"] [data-cy=kebab-toggle] button',
+    'tr[data-cy="AccessTab-row-group-access_group"] [data-cy=kebab-toggle] button',
   ).click();
   cy.get('.pf-c-dropdown__menu-item').contains('Remove group').click();
   cy.get('.pf-c-modal-box__body b').contains('access_group');

From 97d8fee7f681a2bf0f3775019fa8b3dfcd6f4e5d Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Thu, 12 Oct 2023 18:28:29 +0000
Subject: [PATCH 3/3] filterUser - use name, after transform; wrap Access in
 section

---
 .../execution_environment_detail_access.tsx   | 290 +++++++++---------
 .../namespace-detail/namespace-detail.tsx     | 286 ++++++++---------
 2 files changed, 291 insertions(+), 285 deletions(-)

diff --git a/src/containers/execution-environment-detail/execution_environment_detail_access.tsx b/src/containers/execution-environment-detail/execution_environment_detail_access.tsx
index ce184d279b..08c50b96ed 100644
--- a/src/containers/execution-environment-detail/execution_environment_detail_access.tsx
+++ b/src/containers/execution-environment-detail/execution_environment_detail_access.tsx
@@ -131,160 +131,162 @@ class ExecutionEnvironmentDetailAccess extends React.Component<
       this.state;
 
     return (
-      <AccessTab
-        canEditOwners={canEditOwners}
-        group={selectedGroup}
-        groups={groups}
-        name={name}
-        pulpObjectType='pulp_container/namespaces'
-        selectRolesMessage={t`The selected roles will be added to this specific Execution Environment.`}
-        showGroupRemoveModal={this.state.showGroupRemoveModal}
-        showGroupSelectWizard={this.state.showGroupSelectWizard}
-        showRoleRemoveModal={this.state.showRoleRemoveModal}
-        showRoleSelectWizard={this.state.showRoleSelectWizard}
-        showUserRemoveModal={this.state.showUserRemoveModal}
-        showUserSelectWizard={this.state.showUserSelectWizard}
-        updateProps={(prop) => {
-          this.setState(prop);
-        }}
-        urlPrefix={formatEEPath(Paths.executionEnvironmentDetailAccess, {
-          container: name,
-        })}
-        user={selectedUser}
-        users={users}
-        addUser={(user, roles) => {
-          const rolePromises = roles.map((role) =>
-            ExecutionEnvironmentNamespaceAPI.addRole(
-              this.props.containerRepository.namespace.id,
-              {
-                role: role.name,
-                users: [user.username],
-              },
-            ),
-          );
-          this.updateRoles({
-            roles: rolePromises,
-            alertSuccess: t`User "${user.username}" has been successfully added to "${name}".`,
-            alertFailure: t`User "${user.username}" could not be added to "${name}".`,
-            stateUpdate: { showUserSelectWizard: null },
-          });
-        }}
-        removeUser={(user) => {
-          const roles = user.object_roles.map((role) =>
-            ExecutionEnvironmentNamespaceAPI.removeRole(
+      <section className='body'>
+        <AccessTab
+          canEditOwners={canEditOwners}
+          group={selectedGroup}
+          groups={groups}
+          name={name}
+          pulpObjectType='pulp_container/namespaces'
+          selectRolesMessage={t`The selected roles will be added to this specific Execution Environment.`}
+          showGroupRemoveModal={this.state.showGroupRemoveModal}
+          showGroupSelectWizard={this.state.showGroupSelectWizard}
+          showRoleRemoveModal={this.state.showRoleRemoveModal}
+          showRoleSelectWizard={this.state.showRoleSelectWizard}
+          showUserRemoveModal={this.state.showUserRemoveModal}
+          showUserSelectWizard={this.state.showUserSelectWizard}
+          updateProps={(prop) => {
+            this.setState(prop);
+          }}
+          urlPrefix={formatEEPath(Paths.executionEnvironmentDetailAccess, {
+            container: name,
+          })}
+          user={selectedUser}
+          users={users}
+          addUser={(user, roles) => {
+            const rolePromises = roles.map((role) =>
+              ExecutionEnvironmentNamespaceAPI.addRole(
+                this.props.containerRepository.namespace.id,
+                {
+                  role: role.name,
+                  users: [user.username],
+                },
+              ),
+            );
+            this.updateRoles({
+              roles: rolePromises,
+              alertSuccess: t`User "${user.username}" has been successfully added to "${name}".`,
+              alertFailure: t`User "${user.username}" could not be added to "${name}".`,
+              stateUpdate: { showUserSelectWizard: null },
+            });
+          }}
+          removeUser={(user) => {
+            const roles = user.object_roles.map((role) =>
+              ExecutionEnvironmentNamespaceAPI.removeRole(
+                this.props.containerRepository.namespace.id,
+                {
+                  role,
+                  users: [user.username],
+                },
+              ),
+            );
+            this.updateRoles({
+              roles,
+              alertSuccess: t`User "${user.username}" has been successfully removed from "${name}".`,
+              alertFailure: t`User "${user.username}" could not be removed from "${name}".`,
+              stateUpdate: { showUserRemoveModal: null },
+            });
+          }}
+          addGroup={(group, roles) => {
+            const rolePromises = roles.map((role) =>
+              ExecutionEnvironmentNamespaceAPI.addRole(
+                this.props.containerRepository.namespace.id,
+                {
+                  role: role.name,
+                  groups: [group.name],
+                },
+              ),
+            );
+            this.updateRoles({
+              roles: rolePromises,
+              alertSuccess: t`Group "${group.name}" has been successfully added to "${name}".`,
+              alertFailure: t`Group "${group.name}" could not be added to "${name}".`,
+              stateUpdate: { showGroupSelectWizard: null },
+            });
+          }}
+          removeGroup={(group) => {
+            const roles = group.object_roles.map((role) =>
+              ExecutionEnvironmentNamespaceAPI.removeRole(
+                this.props.containerRepository.namespace.id,
+                {
+                  role,
+                  groups: [group.name],
+                },
+              ),
+            );
+            this.updateRoles({
+              roles,
+              alertSuccess: t`Group "${group.name}" has been successfully removed from "${name}".`,
+              alertFailure: t`Group "${group.name}" could not be removed from "${name}".`,
+              stateUpdate: { showGroupRemoveModal: null },
+            });
+          }}
+          addUserRole={(user, roles) => {
+            const rolePromises = roles.map((role) =>
+              ExecutionEnvironmentNamespaceAPI.addRole(
+                this.props.containerRepository.namespace.id,
+                {
+                  role: role.name,
+                  users: [user.username],
+                },
+              ),
+            );
+            this.updateRoles({
+              roles: rolePromises,
+              alertSuccess: t`User "${user.username}" roles successfully updated in "${name}".`,
+              alertFailure: t`User "${user.username}" roles could not be update in "${name}".`,
+              stateUpdate: { showRoleSelectWizard: null },
+            });
+          }}
+          removeUserRole={(role, user) => {
+            const removedRole = ExecutionEnvironmentNamespaceAPI.removeRole(
               this.props.containerRepository.namespace.id,
               {
                 role,
                 users: [user.username],
               },
-            ),
-          );
-          this.updateRoles({
-            roles,
-            alertSuccess: t`User "${user.username}" has been successfully removed from "${name}".`,
-            alertFailure: t`User "${user.username}" could not be removed from "${name}".`,
-            stateUpdate: { showUserRemoveModal: null },
-          });
-        }}
-        addGroup={(group, roles) => {
-          const rolePromises = roles.map((role) =>
-            ExecutionEnvironmentNamespaceAPI.addRole(
-              this.props.containerRepository.namespace.id,
-              {
-                role: role.name,
-                groups: [group.name],
-              },
-            ),
-          );
-          this.updateRoles({
-            roles: rolePromises,
-            alertSuccess: t`Group "${group.name}" has been successfully added to "${name}".`,
-            alertFailure: t`Group "${group.name}" could not be added to "${name}".`,
-            stateUpdate: { showGroupSelectWizard: null },
-          });
-        }}
-        removeGroup={(group) => {
-          const roles = group.object_roles.map((role) =>
-            ExecutionEnvironmentNamespaceAPI.removeRole(
+            );
+            this.updateRoles({
+              roles: [removedRole],
+              alertSuccess: t`User "${user.username}" roles successfully updated in "${name}".`,
+              alertFailure: t`User "${user.username}" roles could not be update in "${name}".`,
+              stateUpdate: { showRoleRemoveModal: null },
+            });
+          }}
+          addRole={(group, roles) => {
+            const rolePromises = roles.map((role) =>
+              ExecutionEnvironmentNamespaceAPI.addRole(
+                this.props.containerRepository.namespace.id,
+                {
+                  role: role.name,
+                  groups: [group.name],
+                },
+              ),
+            );
+            this.updateRoles({
+              roles: rolePromises,
+              alertSuccess: t`Group "${group.name}" roles successfully updated in "${name}".`,
+              alertFailure: t`Group "${group.name}" roles could not be update in "${name}".`,
+              stateUpdate: { showRoleSelectWizard: null },
+            });
+          }}
+          removeRole={(role, group) => {
+            const removedRole = ExecutionEnvironmentNamespaceAPI.removeRole(
               this.props.containerRepository.namespace.id,
               {
                 role,
                 groups: [group.name],
               },
-            ),
-          );
-          this.updateRoles({
-            roles,
-            alertSuccess: t`Group "${group.name}" has been successfully removed from "${name}".`,
-            alertFailure: t`Group "${group.name}" could not be removed from "${name}".`,
-            stateUpdate: { showGroupRemoveModal: null },
-          });
-        }}
-        addUserRole={(user, roles) => {
-          const rolePromises = roles.map((role) =>
-            ExecutionEnvironmentNamespaceAPI.addRole(
-              this.props.containerRepository.namespace.id,
-              {
-                role: role.name,
-                users: [user.username],
-              },
-            ),
-          );
-          this.updateRoles({
-            roles: rolePromises,
-            alertSuccess: t`User "${user.username}" roles successfully updated in "${name}".`,
-            alertFailure: t`User "${user.username}" roles could not be update in "${name}".`,
-            stateUpdate: { showRoleSelectWizard: null },
-          });
-        }}
-        removeUserRole={(role, user) => {
-          const removedRole = ExecutionEnvironmentNamespaceAPI.removeRole(
-            this.props.containerRepository.namespace.id,
-            {
-              role,
-              users: [user.username],
-            },
-          );
-          this.updateRoles({
-            roles: [removedRole],
-            alertSuccess: t`User "${user.username}" roles successfully updated in "${name}".`,
-            alertFailure: t`User "${user.username}" roles could not be update in "${name}".`,
-            stateUpdate: { showRoleRemoveModal: null },
-          });
-        }}
-        addRole={(group, roles) => {
-          const rolePromises = roles.map((role) =>
-            ExecutionEnvironmentNamespaceAPI.addRole(
-              this.props.containerRepository.namespace.id,
-              {
-                role: role.name,
-                groups: [group.name],
-              },
-            ),
-          );
-          this.updateRoles({
-            roles: rolePromises,
-            alertSuccess: t`Group "${group.name}" roles successfully updated in "${name}".`,
-            alertFailure: t`Group "${group.name}" roles could not be update in "${name}".`,
-            stateUpdate: { showRoleSelectWizard: null },
-          });
-        }}
-        removeRole={(role, group) => {
-          const removedRole = ExecutionEnvironmentNamespaceAPI.removeRole(
-            this.props.containerRepository.namespace.id,
-            {
-              role,
-              groups: [group.name],
-            },
-          );
-          this.updateRoles({
-            roles: [removedRole],
-            alertSuccess: t`Group "${group.name}" roles successfully updated in "${name}".`,
-            alertFailure: t`Group "${group.name}" roles could not be update in "${name}".`,
-            stateUpdate: { showRoleRemoveModal: null },
-          });
-        }}
-      />
+            );
+            this.updateRoles({
+              roles: [removedRole],
+              alertSuccess: t`Group "${group.name}" roles successfully updated in "${name}".`,
+              alertFailure: t`Group "${group.name}" roles could not be update in "${name}".`,
+              stateUpdate: { showRoleRemoveModal: null },
+            });
+          }}
+        />
+      </section>
     );
   }
 
diff --git a/src/containers/namespace-detail/namespace-detail.tsx b/src/containers/namespace-detail/namespace-detail.tsx
index 0cbdbb6c4d..733e44b153 100644
--- a/src/containers/namespace-detail/namespace-detail.tsx
+++ b/src/containers/namespace-detail/namespace-detail.tsx
@@ -189,7 +189,9 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
   }
 
   filterUser(username, users) {
-    return username ? users.find((u) => u.username === username) : null;
+    return username
+      ? users.find((u) => u.name === username || u.username === username)
+      : null;
   }
 
   filterGroup(name, groups) {
@@ -507,152 +509,154 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
           ) : null}
           {tab === 'resources' ? this.renderResources(namespace) : null}
           {tab === 'access' ? (
-            <AccessTab
-              showUserRemoveModal={this.state.showUserRemoveModal}
-              showUserSelectWizard={this.state.showUserSelectWizard}
-              showGroupRemoveModal={this.state.showGroupRemoveModal}
-              showGroupSelectWizard={this.state.showGroupSelectWizard}
-              showRoleRemoveModal={this.state.showRoleRemoveModal}
-              showRoleSelectWizard={this.state.showRoleSelectWizard}
-              canEditOwners={canEditOwners}
-              group={this.state.group}
-              groups={namespace.groups}
-              user={this.state.user}
-              users={namespace.users}
-              name={namespace.name}
-              pulpObjectType='pulp_ansible/namespaces'
-              selectRolesMessage={t`The selected roles will be added to this specific namespace.`}
-              updateProps={(prop) => {
-                this.setState(prop);
-              }}
-              addUser={(user, roles) => {
-                const { users, name } = namespace;
-                const newUser = {
-                  ...user,
-                  object_roles: roles.map(({ name }) => name),
-                };
-                const newUsers = [...users, newUser];
+            <section className='body'>
+              <AccessTab
+                showUserRemoveModal={this.state.showUserRemoveModal}
+                showUserSelectWizard={this.state.showUserSelectWizard}
+                showGroupRemoveModal={this.state.showGroupRemoveModal}
+                showGroupSelectWizard={this.state.showGroupSelectWizard}
+                showRoleRemoveModal={this.state.showRoleRemoveModal}
+                showRoleSelectWizard={this.state.showRoleSelectWizard}
+                canEditOwners={canEditOwners}
+                group={this.state.group}
+                groups={namespace.groups}
+                user={this.state.user}
+                users={namespace.users}
+                name={namespace.name}
+                pulpObjectType='pulp_ansible/namespaces'
+                selectRolesMessage={t`The selected roles will be added to this specific namespace.`}
+                updateProps={(prop) => {
+                  this.setState(prop);
+                }}
+                addUser={(user, roles) => {
+                  const { users, name } = namespace;
+                  const newUser = {
+                    ...user,
+                    object_roles: roles.map(({ name }) => name),
+                  };
+                  const newUsers = [...users, newUser];
 
-                this.updateRoles({
-                  users: newUsers,
-                  alertSuccess: t`User "${user.username}" has been successfully added to "${name}".`,
-                  alertFailure: t`User "${user.username}" could not be added to "${name}".`,
-                  stateUpdate: { showUserSelectWizard: null },
-                });
-              }}
-              removeUser={(user) => {
-                const { name, users } = namespace;
-                const newUsers = users.filter((u) => u !== user);
-                this.updateRoles({
-                  users: newUsers,
-                  alertSuccess: t`User "${user.username}" has been successfully removed from "${name}".`,
-                  alertFailure: t`User "${user.username}" could not be removed from "${name}".`,
-                  stateUpdate: { showUserRemoveModal: null },
-                });
-              }}
-              addGroup={(group, roles) => {
-                const { groups, name } = namespace;
-                const newGroup = {
-                  ...group,
-                  object_roles: roles.map(({ name }) => name),
-                };
-                const newGroups = [...groups, newGroup];
+                  this.updateRoles({
+                    users: newUsers,
+                    alertSuccess: t`User "${user.username}" has been successfully added to "${name}".`,
+                    alertFailure: t`User "${user.username}" could not be added to "${name}".`,
+                    stateUpdate: { showUserSelectWizard: null },
+                  });
+                }}
+                removeUser={(user) => {
+                  const { name, users } = namespace;
+                  const newUsers = users.filter((u) => u !== user);
+                  this.updateRoles({
+                    users: newUsers,
+                    alertSuccess: t`User "${user.username}" has been successfully removed from "${name}".`,
+                    alertFailure: t`User "${user.username}" could not be removed from "${name}".`,
+                    stateUpdate: { showUserRemoveModal: null },
+                  });
+                }}
+                addGroup={(group, roles) => {
+                  const { groups, name } = namespace;
+                  const newGroup = {
+                    ...group,
+                    object_roles: roles.map(({ name }) => name),
+                  };
+                  const newGroups = [...groups, newGroup];
 
-                this.updateRoles({
-                  groups: newGroups,
-                  alertSuccess: t`Group "${group.name}" has been successfully added to "${name}".`,
-                  alertFailure: t`Group "${group.name}" could not be added to "${name}".`,
-                  stateUpdate: { showGroupSelectWizard: null },
-                });
-              }}
-              removeGroup={(group) => {
-                const { name, groups } = namespace;
-                const newGroups = groups.filter((g) => g !== group);
-                this.updateRoles({
-                  groups: newGroups,
-                  alertSuccess: t`Group "${group.name}" has been successfully removed from "${name}".`,
-                  alertFailure: t`Group "${group.name}" could not be removed from "${name}".`,
-                  stateUpdate: { showGroupRemoveModal: null },
-                });
-              }}
-              addUserRole={(user, roles) => {
-                const { name, users } = namespace;
-                const newUser = {
-                  ...user,
-                  object_roles: [
-                    ...user.object_roles,
-                    ...roles.map(({ name }) => name),
-                  ],
-                };
-                const newUsers = users.map((u) => (u === user ? newUser : u));
+                  this.updateRoles({
+                    groups: newGroups,
+                    alertSuccess: t`Group "${group.name}" has been successfully added to "${name}".`,
+                    alertFailure: t`Group "${group.name}" could not be added to "${name}".`,
+                    stateUpdate: { showGroupSelectWizard: null },
+                  });
+                }}
+                removeGroup={(group) => {
+                  const { name, groups } = namespace;
+                  const newGroups = groups.filter((g) => g !== group);
+                  this.updateRoles({
+                    groups: newGroups,
+                    alertSuccess: t`Group "${group.name}" has been successfully removed from "${name}".`,
+                    alertFailure: t`Group "${group.name}" could not be removed from "${name}".`,
+                    stateUpdate: { showGroupRemoveModal: null },
+                  });
+                }}
+                addUserRole={(user, roles) => {
+                  const { name, users } = namespace;
+                  const newUser = {
+                    ...user,
+                    object_roles: [
+                      ...user.object_roles,
+                      ...roles.map(({ name }) => name),
+                    ],
+                  };
+                  const newUsers = users.map((u) => (u === user ? newUser : u));
 
-                this.updateRoles({
-                  users: newUsers,
-                  alertSuccess: t`User "${user.username}" roles successfully updated in "${name}".`,
-                  alertFailure: t`User "${user.username}" roles could not be update in "${name}".`,
-                  stateUpdate: { showRoleSelectWizard: null },
-                });
-              }}
-              removeUserRole={(role, user) => {
-                const { name, users } = namespace;
-                const newUser = {
-                  ...user,
-                  object_roles: user.object_roles.filter(
-                    (name) => name !== role,
-                  ),
-                };
-                const newUsers = users.map((u) => (u === user ? newUser : u));
+                  this.updateRoles({
+                    users: newUsers,
+                    alertSuccess: t`User "${user.username}" roles successfully updated in "${name}".`,
+                    alertFailure: t`User "${user.username}" roles could not be update in "${name}".`,
+                    stateUpdate: { showRoleSelectWizard: null },
+                  });
+                }}
+                removeUserRole={(role, user) => {
+                  const { name, users } = namespace;
+                  const newUser = {
+                    ...user,
+                    object_roles: user.object_roles.filter(
+                      (name) => name !== role,
+                    ),
+                  };
+                  const newUsers = users.map((u) => (u === user ? newUser : u));
 
-                this.updateRoles({
-                  users: newUsers,
-                  alertSuccess: t`User "${user.username}" roles successfully updated in "${name}".`,
-                  alertFailure: t`User "${user.username}" roles could not be update in "${name}".`,
-                  stateUpdate: { showRoleRemoveModal: null },
-                });
-              }}
-              addRole={(group, roles) => {
-                const { name, groups } = namespace;
-                const newGroup = {
-                  ...group,
-                  object_roles: [
-                    ...group.object_roles,
-                    ...roles.map(({ name }) => name),
-                  ],
-                };
-                const newGroups = groups.map((g) =>
-                  g === group ? newGroup : g,
-                );
+                  this.updateRoles({
+                    users: newUsers,
+                    alertSuccess: t`User "${user.username}" roles successfully updated in "${name}".`,
+                    alertFailure: t`User "${user.username}" roles could not be update in "${name}".`,
+                    stateUpdate: { showRoleRemoveModal: null },
+                  });
+                }}
+                addRole={(group, roles) => {
+                  const { name, groups } = namespace;
+                  const newGroup = {
+                    ...group,
+                    object_roles: [
+                      ...group.object_roles,
+                      ...roles.map(({ name }) => name),
+                    ],
+                  };
+                  const newGroups = groups.map((g) =>
+                    g === group ? newGroup : g,
+                  );
 
-                this.updateRoles({
-                  groups: newGroups,
-                  alertSuccess: t`Group "${group.name}" roles successfully updated in "${name}".`,
-                  alertFailure: t`Group "${group.name}" roles could not be update in "${name}".`,
-                  stateUpdate: { showRoleSelectWizard: null },
-                });
-              }}
-              removeRole={(role, group) => {
-                const { name, groups } = namespace;
-                const newGroup = {
-                  ...group,
-                  object_roles: group.object_roles.filter(
-                    (name) => name !== role,
-                  ),
-                };
-                const newGroups = groups.map((g) =>
-                  g === group ? newGroup : g,
-                );
+                  this.updateRoles({
+                    groups: newGroups,
+                    alertSuccess: t`Group "${group.name}" roles successfully updated in "${name}".`,
+                    alertFailure: t`Group "${group.name}" roles could not be update in "${name}".`,
+                    stateUpdate: { showRoleSelectWizard: null },
+                  });
+                }}
+                removeRole={(role, group) => {
+                  const { name, groups } = namespace;
+                  const newGroup = {
+                    ...group,
+                    object_roles: group.object_roles.filter(
+                      (name) => name !== role,
+                    ),
+                  };
+                  const newGroups = groups.map((g) =>
+                    g === group ? newGroup : g,
+                  );
 
-                this.updateRoles({
-                  groups: newGroups,
-                  alertSuccess: t`Group "${group.name}" roles successfully updated in "${name}".`,
-                  alertFailure: t`Group "${group.name}" roles could not be update in "${name}".`,
-                  stateUpdate: { showRoleRemoveModal: null },
-                });
-              }}
-              urlPrefix={formatPath(Paths.namespaceDetail, {
-                namespace: namespace.name,
-              })}
-            />
+                  this.updateRoles({
+                    groups: newGroups,
+                    alertSuccess: t`Group "${group.name}" roles successfully updated in "${name}".`,
+                    alertFailure: t`Group "${group.name}" roles could not be update in "${name}".`,
+                    stateUpdate: { showRoleRemoveModal: null },
+                  });
+                }}
+                urlPrefix={formatPath(Paths.namespaceDetail, {
+                  namespace: namespace.name,
+                })}
+              />
+            </section>
           ) : null}
         </Main>
         {canSign && (