Improves naming and updates resource list and adds search functionality

awx/ui_next/src/components/AddRole/AddResourceRole.jsx

@@ -258,7 +258,7 @@ class AddResourceRole extends React.Component {
                 sortColumns={userSortColumns}
                 displayKey="username"
                 onRowClick={this.handleResourceCheckboxClick}
-                onSearch={readUsers}
+                fetchItems={readUsers}
                 selectedLabel={i18n._(t`Selected`)}
                 selectedResourceRows={selectedResourceRows}
                 sortedColumnKey="username"
@@ -269,7 +269,7 @@ class AddResourceRole extends React.Component {
                 searchColumns={teamSearchColumns}
                 sortColumns={teamSortColumns}
                 onRowClick={this.handleResourceCheckboxClick}
-                onSearch={readTeams}
+                fetchItems={readTeams}
                 selectedLabel={i18n._(t`Selected`)}
                 selectedResourceRows={selectedResourceRows}
               />

awx/ui_next/src/components/AddRole/SelectResourceStep.jsx

@@ -1,8 +1,10 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
+import { withRouter, useLocation } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
+import useRequest from '../../util/useRequest';
+
 import { SearchColumns, SortColumns } from '../../types';
 import PaginatedDataList from '../PaginatedDataList';
 import DataListToolbar from '../DataListToolbar';
@@ -10,82 +12,55 @@ import CheckboxListItem from '../CheckboxListItem';
 import SelectedList from '../SelectedList';
 import { getQSConfig, parseQueryString } from '../../util/qs';
 
-class SelectResourceStep extends React.Component {
+const QS_Config = sortColumns => {
-  constructor(props) {
+  return getQSConfig('resource', {
-    super(props);
-
-    this.state = {
-      isInitialized: false,
-      count: null,
-      error: false,
-      resources: [],
-    };
-
-    this.qsConfig = getQSConfig('resource', {
     page: 1,
     page_size: 5,
     order_by: `${
-        props.sortColumns.filter(col => col.key === 'name').length
+      sortColumns.filter(col => col.key === 'name').length ? 'name' : 'username'
-          ? 'name'
-          : 'username'
     }`,
   });
-  }
+};
-
+function SelectResourceStep({
-  componentDidMount() {
-    this.readResourceList();
-  }
-
-  componentDidUpdate(prevProps) {
-    const { location } = this.props;
-    if (location !== prevProps.location) {
-      this.readResourceList();
-    }
-  }
-
-  async readResourceList() {
-    const { onSearch, location } = this.props;
-    const queryParams = parseQueryString(this.qsConfig, location.search);
-
-    this.setState({
-      isLoading: true,
-      error: false,
-    });
-    try {
-      const { data } = await onSearch(queryParams);
-      const { count, results } = data;
-
-      this.setState({
-        resources: results,
-        count,
-        isInitialized: true,
-        isLoading: false,
-        error: false,
-      });
-    } catch (err) {
-      this.setState({
-        isLoading: false,
-        error: true,
-      });
-    }
-  }
-
-  render() {
-    const { isInitialized, isLoading, count, error, resources } = this.state;
-
-    const {
   searchColumns,
   sortColumns,
   displayKey,
   onRowClick,
   selectedLabel,
   selectedResourceRows,
+  fetchItems,
   i18n,
-    } = this.props;
+}) {
+  const location = useLocation();
+
+  const {
+    isLoading,
+    error,
+    request: readResourceList,
+    result: { resources, itemCount },
+  } = useRequest(
+    useCallback(async () => {
+      const queryParams = parseQueryString(
+        QS_Config(sortColumns),
+        location.search
+      );
+
+      const {
+        data: { count, results },
+      } = await fetchItems(queryParams);
+      return { resources: results, itemCount: count };
+    }, [location, fetchItems, sortColumns]),
+    {
+      resources: [],
+      itemCount: 0,
+    }
+  );
+
+  useEffect(() => {
+    readResourceList();
+  }, [readResourceList]);
 
   return (
-      <Fragment>
-        {isInitialized && (
     <Fragment>
       <div>
         {i18n._(
@@ -102,9 +77,10 @@ class SelectResourceStep extends React.Component {
       )}
       <PaginatedDataList
         hasContentLoading={isLoading}
+        contentError={error}
         items={resources}
-              itemCount={count}
+        itemCount={itemCount}
-              qsConfig={this.qsConfig}
+        qsConfig={QS_Config(sortColumns)}
         onRowClick={onRowClick}
         toolbarSearchColumns={searchColumns}
         toolbarSortColumns={sortColumns}
@@ -123,19 +99,15 @@ class SelectResourceStep extends React.Component {
         showPageSizeOptions={false}
       />
     </Fragment>
-        )}
-        {error ? <div>error</div> : ''}
-      </Fragment>
   );
 }
-}
 
 SelectResourceStep.propTypes = {
   searchColumns: SearchColumns,
   sortColumns: SortColumns,
   displayKey: PropTypes.string,
   onRowClick: PropTypes.func,
-  onSearch: PropTypes.func.isRequired,
+  fetchItems: PropTypes.func.isRequired,
   selectedLabel: PropTypes.string,
   selectedResourceRows: PropTypes.arrayOf(PropTypes.object),
 };

awx/ui_next/src/components/AddRole/SelectResourceStep.test.jsx

@@ -1,7 +1,11 @@
 import React from 'react';
-import { createMemoryHistory } from 'history';
+import { act } from 'react-dom/test-utils';
+
 import { shallow } from 'enzyme';
-import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import {
+  mountWithContexts,
+  waitForElement,
+} from '../../../testUtils/enzymeHelpers';
 import { sleep } from '../../../testUtils/testUtils';
 import SelectResourceStep from './SelectResourceStep';
 
@@ -30,12 +34,12 @@ describe('<SelectResourceStep />', () => {
         sortColumns={sortColumns}
         displayKey="username"
         onRowClick={() => {}}
-        onSearch={() => {}}
+        fetchItems={() => {}}
       />
     );
   });
 
-  test('fetches resources on mount', async () => {
+  test('fetches resources on mount and adds items to list', async () => {
     const handleSearch = jest.fn().mockResolvedValue({
       data: {
         count: 2,
@@ -45,61 +49,24 @@ describe('<SelectResourceStep />', () => {
         ],
       },
     });
-    mountWithContexts(
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(
         <SelectResourceStep
           searchColumns={searchColumns}
           sortColumns={sortColumns}
           displayKey="username"
           onRowClick={() => {}}
-        onSearch={handleSearch}
+          fetchItems={handleSearch}
         />
       );
+    });
     expect(handleSearch).toHaveBeenCalledWith({
       order_by: 'username',
       page: 1,
       page_size: 5,
     });
-  });
+    waitForElement(wrapper, 'CheckBoxListItem', el => el.length === 2);
-
-  test('readResourceList properly adds rows to state', async () => {
-    const selectedResourceRows = [{ id: 1, username: 'foo', url: 'item/1' }];
-    const handleSearch = jest.fn().mockResolvedValue({
-      data: {
-        count: 2,
-        results: [
-          { id: 1, username: 'foo', url: 'item/1' },
-          { id: 2, username: 'bar', url: 'item/2' },
-        ],
-      },
-    });
-    const history = createMemoryHistory({
-      initialEntries: [
-        '/organizations/1/access?resource.page=1&resource.order_by=-username',
-      ],
-    });
-    const wrapper = mountWithContexts(
-      <SelectResourceStep
-        searchColumns={searchColumns}
-        sortColumns={sortColumns}
-        displayKey="username"
-        onRowClick={() => {}}
-        onSearch={handleSearch}
-        selectedResourceRows={selectedResourceRows}
-      />,
-      {
-        context: { router: { history, route: { location: history.location } } },
-      }
-    ).find('SelectResourceStep');
-    await wrapper.instance().readResourceList();
-    expect(handleSearch).toHaveBeenCalledWith({
-      order_by: '-username',
-      page: 1,
-      page_size: 5,
-    });
-    expect(wrapper.state('resources')).toEqual([
-      { id: 1, username: 'foo', url: 'item/1' },
-      { id: 2, username: 'bar', url: 'item/2' },
-    ]);
   });
 
   test('clicking on row fires callback with correct params', async () => {
@@ -111,20 +78,24 @@ describe('<SelectResourceStep />', () => {
         { id: 2, username: 'bar', url: 'item/2' },
       ],
     };
-    const wrapper = mountWithContexts(
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(
         <SelectResourceStep
           searchColumns={searchColumns}
           sortColumns={sortColumns}
           displayKey="username"
           onRowClick={handleRowClick}
-        onSearch={() => ({ data })}
+          fetchItems={() => ({ data })}
           selectedResourceRows={[]}
         />
       );
+    });
     await sleep(0);
     wrapper.update();
     const checkboxListItemWrapper = wrapper.find('CheckboxListItem');
     expect(checkboxListItemWrapper.length).toBe(2);
+
     checkboxListItemWrapper
       .first()
       .find('input[type="checkbox"]')

awx/ui_next/src/components/UserAndTeamAccessAdd/UserAndTeamAccessAdd.jsx

@@ -11,7 +11,7 @@ import Wizard from '../Wizard/Wizard';
 import useSelected from '../../util/useSelected';
 import SelectResourceStep from '../AddRole/SelectResourceStep';
 import SelectRoleStep from '../AddRole/SelectRoleStep';
-import getResourceTypes from './resources.data';
+import getResourceAccessConfig from './getResourceAccessConfig';
 
 const Grid = styled.div`
   display: grid;
@@ -28,7 +28,7 @@ function UserAndTeamAccessAdd({
   apiModel,
   onClose,
 }) {
-  const [selectedResourceType, setSelectedResourceType] = useState();
+  const [selectedResourceType, setSelectedResourceType] = useState(null);
   const [stepIdReached, setStepIdReached] = useState(1);
   const { id: userId } = useParams();
   const {
@@ -70,7 +70,7 @@ function UserAndTeamAccessAdd({
       name: i18n._(t`Add resource type`),
       component: (
         <Grid>
-          {getResourceTypes(i18n).map(resource => (
+          {getResourceAccessConfig(i18n).map(resource => (
             <SelectableCard
               key={resource.selectedResource}
               isSelected={
@@ -84,6 +84,7 @@ function UserAndTeamAccessAdd({
           ))}
         </Grid>
       ),
+      enableNext: selectedResourceType !== null,
     },
     {
       id: 2,
@@ -94,7 +95,7 @@ function UserAndTeamAccessAdd({
           sortColumns={selectedResourceType.sortColumns}
           displayKey="name"
           onRowClick={handleResourceSelect}
-          onSearch={selectedResourceType.fetchItems}
+          fetchItems={selectedResourceType.fetchItems}
           selectedLabel={i18n._(t`Selected`)}
           selectedResourceRows={resourcesSelected}
           sortedColumnKey="username"

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

@@ -65,9 +65,10 @@ describe('<UserAndTeamAccessAdd/>', () => {
     expect(wrapper.find('PFWizard').length).toBe(1);
   });
   test('should disable steps', async () => {
+    expect(wrapper.find('Button[type="submit"]').prop('isDisabled')).toBe(true);
     expect(
       wrapper
-        .find('WizardNavItem[text="Select ttems from list"]')
+        .find('WizardNavItem[text="Select items from list"]')
         .prop('isDisabled')
     ).toBe(true);
     expect(
@@ -93,7 +94,7 @@ describe('<UserAndTeamAccessAdd/>', () => {
     ).toBe(false);
     expect(
       wrapper
-        .find('WizardNavItem[text="Select ttems from list"]')
+        .find('WizardNavItem[text="Select items from list"]')
         .prop('isDisabled')
     ).toBe(false);
     expect(
@@ -119,6 +120,12 @@ describe('<UserAndTeamAccessAdd/>', () => {
     await act(async () =>
       wrapper.find('Button[type="submit"]').prop('onClick')()
     );
+    expect(JobTemplatesAPI.read).toHaveBeenCalledWith({
+      order_by: 'name',
+      page: 1,
+      page_size: 5,
+    });
+
     await waitForElement(wrapper, 'SelectResourceStep', el => el.length > 0);
     expect(JobTemplatesAPI.read).toHaveBeenCalled();
     await act(async () =>

awx/ui_next/src/components/UserAndTeamAccessAdd/getResourceAccessConfig.js

@@ -8,7 +8,7 @@ import {
   OrganizationsAPI,
 } from '../../api';
 
-export default function getResourceTypes(i18n) {
+export default function getResourceAccessConfig(i18n) {
   return [
     {
       selectedResource: 'jobTemplate',
@@ -38,7 +38,7 @@ export default function getResourceTypes(i18n) {
           key: 'name',
         },
       ],
-      fetchItems: () => JobTemplatesAPI.read(),
+      fetchItems: queryParams => JobTemplatesAPI.read(queryParams),
     },
     {
       selectedResource: 'workflowJobTemplate',
@@ -68,7 +68,7 @@ export default function getResourceTypes(i18n) {
           key: 'name',
         },
       ],
-      fetchItems: () => WorkflowJobTemplatesAPI.read(),
+      fetchItems: queryParams => WorkflowJobTemplatesAPI.read(queryParams),
     },
     {
       selectedResource: 'credential',
@@ -109,7 +109,7 @@ export default function getResourceTypes(i18n) {
           key: 'name',
         },
       ],
-      fetchItems: () => CredentialsAPI.read(),
+      fetchItems: queryParams => CredentialsAPI.read(queryParams),
     },
     {
       selectedResource: 'inventory',
@@ -135,7 +135,7 @@ export default function getResourceTypes(i18n) {
           key: 'name',
         },
       ],
-      fetchItems: () => InventoriesAPI.read(),
+      fetchItems: queryParams => InventoriesAPI.read(queryParams),
     },
     {
       selectedResource: 'project',
@@ -176,7 +176,7 @@ export default function getResourceTypes(i18n) {
           key: 'name',
         },
       ],
-      fetchItems: () => ProjectsAPI.read(),
+      fetchItems: queryParams => ProjectsAPI.read(queryParams),
     },
     {
       selectedResource: 'organization',
@@ -202,7 +202,7 @@ export default function getResourceTypes(i18n) {
           key: 'name',
         },
       ],
-      fetchItems: () => OrganizationsAPI.read(),
+      fetchItems: queryParams => OrganizationsAPI.read(queryParams),
     },
   ];
 }

awx/ui_next/src/screens/Team/TeamAccess/TeamAccessList.jsx

@@ -12,7 +12,7 @@ import DataListToolbar from '../../../components/DataListToolbar';
 import PaginatedDataList from '../../../components/PaginatedDataList';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import TeamAccessListItem from './TeamAccessListItem';
-import UserAndTeamAccessAdd from '../../../components/UserAccessAdd/UserAndTeamAccessAdd';
+import UserAndTeamAccessAdd from '../../../components/UserAndTeamAccessAdd/UserAndTeamAccessAdd';
 
 const QS_CONFIG = getQSConfig('team', {
   page: 1,

awx/ui_next/src/screens/User/UserAccess/UserAccessList.jsx

@@ -10,7 +10,7 @@ import useRequest from '../../../util/useRequest';
 import PaginatedDataList from '../../../components/PaginatedDataList';
 import DatalistToolbar from '../../../components/DataListToolbar';
 import UserAccessListItem from './UserAccessListItem';
-import UserAndTeamAccessAdd from '../../../components/UserAccessAdd/UserAndTeamAccessAdd';
+import UserAndTeamAccessAdd from '../../../components/UserAndTeamAccessAdd/UserAndTeamAccessAdd';
 
 const QS_CONFIG = getQSConfig('roles', {
   page: 1,