adds sorting by role on org access lists

awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.jsx

@@ -78,7 +78,33 @@ function ResourceAccessList({ i18n, apiModel, resource }) {
       fetchItems: fetchAccessRecords,
     }
   );
+  const toolbarSearchColumns = [
+    {
+      name: i18n._(t`Username`),
+      key: 'username__icontains',
+      isDefault: true,
+    },
+    {
+      name: i18n._(t`First Name`),
+      key: 'first_name__icontains',
+    },
+    {
+      name: i18n._(t`Last Name`),
+      key: 'last_name__icontains',
+    },
+  ];
 
+  if (location.pathname.includes('/organizations')) {
+    const roles = Object.values(
+      resource.summary_fields.object_roles
+    ).map(opt => [opt.id.toString(), opt.name]);
+
+    toolbarSearchColumns.push({
+      name: i18n._(t`Roles`),
+      key: `or__roles__in`,
+      options: roles,
+    });
+  }
   return (
     <>
       <PaginatedDataList
@@ -88,21 +114,7 @@ function ResourceAccessList({ i18n, apiModel, resource }) {
         itemCount={itemCount}
         pluralizedItemName={i18n._(t`Roles`)}
         qsConfig={QS_CONFIG}
-        toolbarSearchColumns={[
+        toolbarSearchColumns={toolbarSearchColumns}
-          {
-            name: i18n._(t`Username`),
-            key: 'username__icontains',
-            isDefault: true,
-          },
-          {
-            name: i18n._(t`First Name`),
-            key: 'first_name__icontains',
-          },
-          {
-            name: i18n._(t`Last Name`),
-            key: 'last_name__icontains',
-          },
-        ]}
         toolbarSortColumns={[
           {
             name: i18n._(t`Username`),

awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import { createMemoryHistory } from 'history';
 import {
   mountWithContexts,
   waitForElement,
@@ -17,7 +18,24 @@ describe('<ResourceAccessList />', () => {
     id: 1,
     name: 'Default',
     summary_fields: {
-      object_roles: {},
+      object_roles: {
+        admin_role: {
+          description: 'Can manage all aspects of the organization',
+          name: 'Admin',
+          id: 2,
+          user_only: true,
+        },
+        execute_role: {
+          description: 'May run any executable resources in the organization',
+          name: 'Execute',
+          id: 3,
+        },
+        project_admin_role: {
+          description: 'Can manage all projects of the organization',
+          name: 'Project Admin',
+          id: 4,
+        },
+      },
       user_capabilities: {
         edit: true,
       },
@@ -87,12 +105,16 @@ describe('<ResourceAccessList />', () => {
     });
     TeamsAPI.disassociateRole.mockResolvedValue({});
     UsersAPI.disassociateRole.mockResolvedValue({});
+    const history = createMemoryHistory({
+      initialEntries: ['/organizations/1/access'],
+    });
     await act(async () => {
       wrapper = mountWithContexts(
         <ResourceAccessList
           resource={organization}
           apiModel={OrganizationsAPI}
-        />
+        />,
+        { context: { router: { history } } }
       );
     });
     wrapper.update();
@@ -168,4 +190,24 @@ describe('<ResourceAccessList />', () => {
     expect(OrganizationsAPI.readAccessList).toHaveBeenCalledTimes(2);
     done();
   });
+  test('should call api to get org details', async () => {
+    await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+
+    expect(
+      wrapper.find('PaginatedDataList').prop('toolbarSearchColumns')
+    ).toStrictEqual([
+      { isDefault: true, key: 'username__icontains', name: 'Username' },
+      { key: 'first_name__icontains', name: 'First Name' },
+      { key: 'last_name__icontains', name: 'Last Name' },
+      {
+        key: 'or__roles__in',
+        name: 'Roles',
+        options: [
+          ['2', 'Admin'],
+          ['3', 'Execute'],
+          ['4', 'Project Admin'],
+        ],
+      },
+    ]);
+  });
 });