Updates files to pre lingUI upgrade work

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

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -17,95 +17,57 @@ const readTeams = async queryParams => TeamsAPI.read(queryParams);
 
 const readTeamsOptions = async () => TeamsAPI.readOptions();
 
-class AddResourceRole extends React.Component {
+function AddResourceRole({ onSave, onClose, roles, i18n, resource }) {
-  constructor(props) {
+  const [selectedResource, setSelectedResource] = useState(null);
-    super(props);
+  const [selectedResourceRows, setSelectedResourceRows] = useState([]);
-
+  const [selectedRoleRows, setSelectedRoleRows] = useState([]);
-    this.state = {
+  const [currentStepId, setCurrentStepId] = useState(1);
-      selectedResource: null,
+  const [maxEnabledStep, setMaxEnabledStep] = useState(1);
-      selectedResourceRows: [],
-      selectedRoleRows: [],
-      currentStepId: 1,
-      maxEnabledStep: 1,
-    };
-
-    this.handleResourceCheckboxClick = this.handleResourceCheckboxClick.bind(
-      this
-    );
-    this.handleResourceSelect = this.handleResourceSelect.bind(this);
-    this.handleRoleCheckboxClick = this.handleRoleCheckboxClick.bind(this);
-    this.handleWizardNext = this.handleWizardNext.bind(this);
-    this.handleWizardSave = this.handleWizardSave.bind(this);
-    this.handleWizardGoToStep = this.handleWizardGoToStep.bind(this);
-  }
-
-  handleResourceCheckboxClick(user) {
-    const { selectedResourceRows, currentStepId } = this.state;
 
+  const handleResourceCheckboxClick = user => {
     const selectedIndex = selectedResourceRows.findIndex(
       selectedRow => selectedRow.id === user.id
     );
-
     if (selectedIndex > -1) {
       selectedResourceRows.splice(selectedIndex, 1);
-      const stateToUpdate = { selectedResourceRows };
       if (selectedResourceRows.length === 0) {
-        stateToUpdate.maxEnabledStep = currentStepId;
+        setMaxEnabledStep(currentStepId);
       }
-      this.setState(stateToUpdate);
+      setSelectedRoleRows(selectedResourceRows);
     } else {
-      this.setState(prevState => ({
+      setSelectedResourceRows([...selectedResourceRows, user]);
-        selectedResourceRows: [...prevState.selectedResourceRows, user],
-      }));
-    }
     }
+  };
 
-  handleRoleCheckboxClick(role) {
+  const handleRoleCheckboxClick = role => {
-    const { selectedRoleRows } = this.state;
-
     const selectedIndex = selectedRoleRows.findIndex(
       selectedRow => selectedRow.id === role.id
     );
 
     if (selectedIndex > -1) {
       selectedRoleRows.splice(selectedIndex, 1);
-      this.setState({ selectedRoleRows });
+      setSelectedRoleRows(selectedRoleRows);
     } else {
-      this.setState(prevState => ({
+      setSelectedRoleRows([...selectedRoleRows, role]);
-        selectedRoleRows: [...prevState.selectedRoleRows, role],
-      }));
-    }
     }
+  };
 
-  handleResourceSelect(resourceType) {
+  const handleResourceSelect = resourceType => {
-    this.setState({
+    setSelectedResource(resourceType);
-      selectedResource: resourceType,
+    setSelectedResourceRows([]);
-      selectedResourceRows: [],
+    setSelectedRoleRows([]);
-      selectedRoleRows: [],
+  };
-    });
-  }
 
-  handleWizardNext(step) {
+  const handleWizardNext = step => {
-    this.setState({
+    setCurrentStepId(step.id);
-      currentStepId: step.id,
+    setMaxEnabledStep(step.id);
-      maxEnabledStep: step.id,
+  };
-    });
-  }
 
-  handleWizardGoToStep(step) {
+  const handleWizardGoToStep = step => {
-    this.setState({
+    setCurrentStepId(step.id);
-      currentStepId: step.id,
+  };
-    });
-  }
-
-  async handleWizardSave() {
-    const { onSave } = this.props;
-    const {
-      selectedResourceRows,
-      selectedRoleRows,
-      selectedResource,
-    } = this.state;
 
+  const handleWizardSave = async () => {
     try {
       const roleRequests = [];
 
@@ -134,17 +96,7 @@ class AddResourceRole extends React.Component {
     } catch (err) {
       // TODO: handle this error
     }
-  }
+  };
-
-  render() {
-    const {
-      selectedResource,
-      selectedResourceRows,
-      selectedRoleRows,
-      currentStepId,
-      maxEnabledStep,
-    } = this.state;
-    const { onClose, roles, i18n, resource } = this.props;
 
   // Object roles can be user only, so we remove them when
   // showing role choices for team access
@@ -172,7 +124,6 @@ class AddResourceRole extends React.Component {
       key: 'last_name__icontains',
     },
   ];
-
   const userSortColumns = [
     {
       name: i18n._(t`Username`),
@@ -187,7 +138,6 @@ class AddResourceRole extends React.Component {
       key: 'last_name',
     },
   ];
-
   const teamSearchColumns = [
     {
       name: i18n._(t`Name`),
@@ -235,22 +185,20 @@ class AddResourceRole extends React.Component {
               t`Choose the type of resource that will be receiving new roles.  For example, if you'd like to add new roles to a set of users please choose Users and click Next.  You'll be able to select the specific resources in the next step.`
             )}
           </div>
-
           <SelectableCard
             isSelected={selectedResource === 'users'}
             label={i18n._(t`Users`)}
-              dataCy="add-role-users"
             ariaLabel={i18n._(t`Users`)}
-              onClick={() => this.handleResourceSelect('users')}
+            dataCy="add-role-users"
+            onClick={() => handleResourceSelect('users')}
           />
-            {resource?.type === 'credential' &&
+          {resource?.type === 'credential' && !resource?.organization ? null : (
-            !resource?.organization ? null : (
             <SelectableCard
               isSelected={selectedResource === 'teams'}
               label={i18n._(t`Teams`)}
-                dataCy="add-role-teams"
               ariaLabel={i18n._(t`Teams`)}
-                onClick={() => this.handleResourceSelect('teams')}
+              dataCy="add-role-teams"
+              onClick={() => handleResourceSelect('teams')}
             />
           )}
         </div>
@@ -267,7 +215,7 @@ class AddResourceRole extends React.Component {
               searchColumns={userSearchColumns}
               sortColumns={userSortColumns}
               displayKey="username"
-                onRowClick={this.handleResourceCheckboxClick}
+              onRowClick={handleResourceCheckboxClick}
               fetchItems={readUsers}
               fetchOptions={readUsersOptions}
               selectedLabel={i18n._(t`Selected`)}
@@ -279,7 +227,7 @@ class AddResourceRole extends React.Component {
             <SelectResourceStep
               searchColumns={teamSearchColumns}
               sortColumns={teamSortColumns}
-                onRowClick={this.handleResourceCheckboxClick}
+              onRowClick={handleResourceCheckboxClick}
               fetchItems={readTeams}
               fetchOptions={readTeamsOptions}
               selectedLabel={i18n._(t`Selected`)}
@@ -296,7 +244,7 @@ class AddResourceRole extends React.Component {
       name: i18n._(t`Select Roles to Apply`),
       component: (
         <SelectRoleStep
-            onRolesClick={this.handleRoleCheckboxClick}
+          onRolesClick={handleRoleCheckboxClick}
           roles={selectableRoles}
           selectedListKey={selectedResource === 'users' ? 'username' : 'name'}
           selectedListLabel={i18n._(t`Selected`)}
@@ -317,10 +265,10 @@ class AddResourceRole extends React.Component {
     <Wizard
       style={{ overflow: 'scroll' }}
       isOpen
-        onNext={this.handleWizardNext}
+      onNext={handleWizardNext}
       onClose={onClose}
-        onSave={this.handleWizardSave}
+      onSave={handleWizardSave}
-        onGoToStep={this.handleWizardGoToStep}
+      onGoToStep={step => handleWizardGoToStep(step)}
       steps={steps}
       title={wizardTitle}
       nextButtonText={currentStep.nextButtonText || undefined}
@@ -328,7 +276,6 @@ class AddResourceRole extends React.Component {
       cancelButtonText={i18n._(t`Cancel`)}
     />
   );
-  }
 }
 
 AddResourceRole.propTypes = {

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

@@ -1,22 +1,46 @@
 /* eslint-disable react/jsx-pascal-case */
 import React from 'react';
 import { shallow } from 'enzyme';
-import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import { act } from 'react-dom/test-utils';
+
+import {
+  mountWithContexts,
+  waitForElement,
+} from '../../../testUtils/enzymeHelpers';
 import AddResourceRole, { _AddResourceRole } from './AddResourceRole';
 import { TeamsAPI, UsersAPI } from '../../api';
 
-jest.mock('../../api');
+jest.mock('../../api/models/Teams');
+jest.mock('../../api/models/Users');
+
+// TODO: Once error handling is functional in
+// this component write tests for it
 
 describe('<_AddResourceRole />', () => {
   UsersAPI.read.mockResolvedValue({
     data: {
       count: 2,
       results: [
-        { id: 1, username: 'foo' },
+        { id: 1, username: 'foo', url: '' },
-        { id: 2, username: 'bar' },
+        { id: 2, username: 'bar', url: '' },
       ],
     },
   });
+  UsersAPI.readOptions.mockResolvedValue({
+    data: { related: {}, actions: { GET: {} } },
+  });
+  TeamsAPI.read.mockResolvedValue({
+    data: {
+      count: 2,
+      results: [
+        { id: 1, name: 'Team foo', url: '' },
+        { id: 2, name: 'Team bar', url: '' },
+      ],
+    },
+  });
+  TeamsAPI.readOptions.mockResolvedValue({
+    data: { related: {}, actions: { GET: {} } },
+  });
   const roles = {
     admin_role: {
       description: 'Can manage all aspects of the organization',
@@ -39,191 +63,165 @@ describe('<_AddResourceRole />', () => {
       />
     );
   });
-  test('handleRoleCheckboxClick properly updates state', () => {
+  test('should save properly', async () => {
-    const wrapper = shallow(
+    let wrapper;
-      <_AddResourceRole
+    act(() => {
-        onClose={() => {}}
+      wrapper = mountWithContexts(
-        onSave={() => {}}
-        roles={roles}
-        i18n={{ _: val => val.toString() }}
-      />
-    );
-    wrapper.setState({
-      selectedRoleRows: [
-        {
-          description: 'Can manage all aspects of the organization',
-          name: 'Admin',
-          id: 1,
-        },
-      ],
-    });
-    wrapper.instance().handleRoleCheckboxClick({
-      description: 'Can manage all aspects of the organization',
-      name: 'Admin',
-      id: 1,
-    });
-    expect(wrapper.state('selectedRoleRows')).toEqual([]);
-    wrapper.instance().handleRoleCheckboxClick({
-      description: 'Can manage all aspects of the organization',
-      name: 'Admin',
-      id: 1,
-    });
-    expect(wrapper.state('selectedRoleRows')).toEqual([
-      {
-        description: 'Can manage all aspects of the organization',
-        name: 'Admin',
-        id: 1,
-      },
-    ]);
-  });
-  test('handleResourceCheckboxClick properly updates state', () => {
-    const wrapper = shallow(
-      <_AddResourceRole
-        onClose={() => {}}
-        onSave={() => {}}
-        roles={roles}
-        i18n={{ _: val => val.toString() }}
-      />
-    );
-    wrapper.setState({
-      selectedResourceRows: [
-        {
-          id: 1,
-          username: 'foobar',
-        },
-      ],
-    });
-    wrapper.instance().handleResourceCheckboxClick({
-      id: 1,
-      username: 'foobar',
-    });
-    expect(wrapper.state('selectedResourceRows')).toEqual([]);
-    wrapper.instance().handleResourceCheckboxClick({
-      id: 1,
-      username: 'foobar',
-    });
-    expect(wrapper.state('selectedResourceRows')).toEqual([
-      {
-        id: 1,
-        username: 'foobar',
-      },
-    ]);
-  });
-  test('clicking user/team cards updates state', () => {
-    const spy = jest.spyOn(_AddResourceRole.prototype, 'handleResourceSelect');
-    const wrapper = mountWithContexts(
         <AddResourceRole onClose={() => {}} onSave={() => {}} roles={roles} />,
         { context: { network: { handleHttpError: () => {} } } }
-    ).find('AddResourceRole');
+      );
+    });
+    wrapper.update();
+
+    // Step 1
     const selectableCardWrapper = wrapper.find('SelectableCard');
     expect(selectableCardWrapper.length).toBe(2);
-    selectableCardWrapper.first().simulate('click');
+    act(() => wrapper.find('SelectableCard[label="Users"]').prop('onClick')());
-    expect(spy).toHaveBeenCalledWith('users');
+    wrapper.update();
-    expect(wrapper.state('selectedResource')).toBe('users');
+    await act(async () =>
-    selectableCardWrapper.at(1).simulate('click');
+      wrapper.find('Button[type="submit"]').prop('onClick')()
-    expect(spy).toHaveBeenCalledWith('teams');
-    expect(wrapper.state('selectedResource')).toBe('teams');
-  });
-  test('handleResourceSelect clears out selected lists and sets selectedResource', () => {
-    const wrapper = shallow(
-      <_AddResourceRole
-        onClose={() => {}}
-        onSave={() => {}}
-        roles={roles}
-        i18n={{ _: val => val.toString() }}
-      />
     );
-    wrapper.setState({
+    wrapper.update();
-      selectedResource: 'teams',
+
-      selectedResourceRows: [
+    // Step 2
-        {
+    await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
-          id: 1,
+    act(() =>
-          username: 'foobar',
+      wrapper.find('DataListCheck[name="foo"]').invoke('onChange')(true)
-        },
+    );
-      ],
+    wrapper.update();
-      selectedRoleRows: [
+    expect(wrapper.find('DataListCheck[name="foo"]').prop('checked')).toBe(
-        {
+      true
-          description: 'Can manage all aspects of the organization',
+    );
-          id: 1,
+    act(() => wrapper.find('Button[type="submit"]').prop('onClick')());
-          name: 'Admin',
+    wrapper.update();
-        },
+
-      ],
+    // Step 3
+    act(() =>
+      wrapper.find('Checkbox[aria-label="Admin"]').invoke('onChange')(true)
+    );
+    wrapper.update();
+    expect(wrapper.find('Checkbox[aria-label="Admin"]').prop('isChecked')).toBe(
+      true
+    );
+
+    // Save
+    await act(async () =>
+      wrapper.find('Button[type="submit"]').prop('onClick')()
+    );
+    expect(UsersAPI.associateRole).toBeCalledWith(1, 1);
   });
-    wrapper.instance().handleResourceSelect('users');
+
-    expect(wrapper.state()).toEqual({
+  test('should successfuly click user/team cards', async () => {
-      selectedResource: 'users',
+    let wrapper;
-      selectedResourceRows: [],
+    act(() => {
-      selectedRoleRows: [],
+      wrapper = mountWithContexts(
-      currentStepId: 1,
+        <AddResourceRole onClose={() => {}} onSave={() => {}} roles={roles} />,
-      maxEnabledStep: 1,
-    });
-    wrapper.instance().handleResourceSelect('teams');
-    expect(wrapper.state()).toEqual({
-      selectedResource: 'teams',
-      selectedResourceRows: [],
-      selectedRoleRows: [],
-      currentStepId: 1,
-      maxEnabledStep: 1,
-    });
-  });
-  test('handleWizardSave makes correct api calls, calls onSave when done', async () => {
-    const handleSave = jest.fn();
-    const wrapper = mountWithContexts(
-      <AddResourceRole onClose={() => {}} onSave={handleSave} roles={roles} />,
         { context: { network: { handleHttpError: () => {} } } }
-    ).find('AddResourceRole');
+      );
-    wrapper.setState({
-      selectedResource: 'users',
-      selectedResourceRows: [
-        {
-          id: 1,
-          username: 'foobar',
-        },
-      ],
-      selectedRoleRows: [
-        {
-          description: 'Can manage all aspects of the organization',
-          id: 1,
-          name: 'Admin',
-        },
-        {
-          description: 'May run any executable resources in the organization',
-          id: 2,
-          name: 'Execute',
-        },
-      ],
     });
-    await wrapper.instance().handleWizardSave();
+    wrapper.update();
-    expect(UsersAPI.associateRole).toHaveBeenCalledTimes(2);
+
-    expect(handleSave).toHaveBeenCalled();
+    const selectableCardWrapper = wrapper.find('SelectableCard');
-    wrapper.setState({
+    expect(selectableCardWrapper.length).toBe(2);
-      selectedResource: 'teams',
+    act(() => wrapper.find('SelectableCard[label="Users"]').prop('onClick')());
-      selectedResourceRows: [
+    wrapper.update();
-        {
+
-          id: 1,
+    await waitForElement(
-          name: 'foobar',
+      wrapper,
-        },
+      'SelectableCard[label="Users"]',
-      ],
+      el => el.prop('isSelected') === true
-      selectedRoleRows: [
+    );
-        {
+    act(() => wrapper.find('SelectableCard[label="Teams"]').prop('onClick')());
-          description: 'Can manage all aspects of the organization',
+    wrapper.update();
-          id: 1,
+
-          name: 'Admin',
+    await waitForElement(
-        },
+      wrapper,
-        {
+      'SelectableCard[label="Teams"]',
-          description: 'May run any executable resources in the organization',
+      el => el.prop('isSelected') === true
-          id: 2,
+    );
-          name: 'Execute',
-        },
-      ],
   });
-    await wrapper.instance().handleWizardSave();
+
-    expect(TeamsAPI.associateRole).toHaveBeenCalledTimes(2);
+  test('should reset values with resource type changes', async () => {
-    expect(handleSave).toHaveBeenCalled();
+    let wrapper;
+    act(() => {
+      wrapper = mountWithContexts(
+        <AddResourceRole onClose={() => {}} onSave={() => {}} roles={roles} />,
+        { context: { network: { handleHttpError: () => {} } } }
+      );
+    });
+    wrapper.update();
+
+    // Step 1
+    const selectableCardWrapper = wrapper.find('SelectableCard');
+    expect(selectableCardWrapper.length).toBe(2);
+    act(() => wrapper.find('SelectableCard[label="Users"]').prop('onClick')());
+    wrapper.update();
+    await act(async () =>
+      wrapper.find('Button[type="submit"]').prop('onClick')()
+    );
+    wrapper.update();
+
+    // Step 2
+    await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
+    act(() =>
+      wrapper.find('DataListCheck[name="foo"]').invoke('onChange')(true)
+    );
+    wrapper.update();
+    expect(wrapper.find('DataListCheck[name="foo"]').prop('checked')).toBe(
+      true
+    );
+    act(() => wrapper.find('Button[type="submit"]').prop('onClick')());
+    wrapper.update();
+
+    // Step 3
+    act(() =>
+      wrapper.find('Checkbox[aria-label="Admin"]').invoke('onChange')(true)
+    );
+    wrapper.update();
+    expect(wrapper.find('Checkbox[aria-label="Admin"]').prop('isChecked')).toBe(
+      true
+    );
+
+    // Go back to step 1
+    act(() => {
+      wrapper
+        .find('WizardNavItem[content="Select a Resource Type"]')
+        .find('button')
+        .prop('onClick')({ id: 1 });
+    });
+    wrapper.update();
+    expect(
+      wrapper
+        .find('WizardNavItem[content="Select a Resource Type"]')
+        .prop('isCurrent')
+    ).toBe(true);
+
+    // Go back to step 1 and this time select teams.  Doing so should clear following steps
+    act(() => wrapper.find('SelectableCard[label="Teams"]').prop('onClick')());
+    wrapper.update();
+    await act(async () =>
+      wrapper.find('Button[type="submit"]').prop('onClick')()
+    );
+    wrapper.update();
+
+    // Make sure no teams have been selected
+    await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
+    wrapper
+      .find('DataListCheck')
+      .map(item => expect(item.prop('checked')).toBe(false));
+    act(() => wrapper.find('Button[type="submit"]').prop('onClick')());
+    wrapper.update();
+
+    // Make sure that no roles have been selected
+    wrapper
+      .find('Checkbox')
+      .map(card => expect(card.prop('isChecked')).toBe(false));
+
+    // Make sure the save button is disabled
+    expect(wrapper.find('Button[type="submit"]').prop('isDisabled')).toBe(true);
   });
 
   test('should not display team as a choice in case credential does not have organization', () => {
-    const spy = jest.spyOn(_AddResourceRole.prototype, 'handleResourceSelect');
     const wrapper = mountWithContexts(
       <AddResourceRole
         onClose={() => {}}
@@ -232,11 +230,13 @@ describe('<_AddResourceRole />', () => {
         resource={{ type: 'credential', organization: null }}
       />,
       { context: { network: { handleHttpError: () => {} } } }
-    ).find('AddResourceRole');
+    );
-    const selectableCardWrapper = wrapper.find('SelectableCard');
+
-    expect(selectableCardWrapper.length).toBe(1);
+    expect(wrapper.find('SelectableCard').length).toBe(1);
-    selectableCardWrapper.first().simulate('click');
+    wrapper.find('SelectableCard[label="Users"]').simulate('click');
-    expect(spy).toHaveBeenCalledWith('users');
+    wrapper.update();
-    expect(wrapper.state('selectedResource')).toBe('users');
+    expect(
+      wrapper.find('SelectableCard[label="Users"]').prop('isSelected')
+    ).toBe(true);
   });
 });

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

@@ -7,9 +7,7 @@ import { t } from '@lingui/macro';
 import CheckboxCard from './CheckboxCard';
 import SelectedList from '../SelectedList';
 
-class RolesStep extends React.Component {
+function RolesStep({
-  render() {
-    const {
   onRolesClick,
   roles,
   selectedListKey,
@@ -17,8 +15,7 @@ class RolesStep extends React.Component {
   selectedResourceRows,
   selectedRoleRows,
   i18n,
-    } = this.props;
+}) {
-
   return (
     <Fragment>
       <div>
@@ -59,7 +56,6 @@ class RolesStep extends React.Component {
       </div>
     </Fragment>
   );
-  }
 }
 
 RolesStep.propTypes = {

awx/ui_next/src/components/AnsibleSelect/AnsibleSelect.jsx

@@ -12,20 +12,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { FormSelect, FormSelectOption } from '@patternfly/react-core';
 
-class AnsibleSelect extends React.Component {
+function AnsibleSelect({
-  constructor(props) {
-    super(props);
-    this.onSelectChange = this.onSelectChange.bind(this);
-  }
-
-  onSelectChange(val, event) {
-    const { onChange, name } = this.props;
-    event.target.name = name;
-    onChange(event, val);
-  }
-
-  render() {
-    const {
   id,
   data,
   i18n,
@@ -34,13 +21,19 @@ class AnsibleSelect extends React.Component {
   value,
   className,
   isDisabled,
-    } = this.props;
+  onChange,
+  name,
+}) {
+  const onSelectChange = (val, event) => {
+    event.target.name = name;
+    onChange(event, val);
+  };
 
   return (
     <FormSelect
       id={id}
       value={value}
-        onChange={this.onSelectChange}
+      onChange={onSelectChange}
       onBlur={onBlur}
       aria-label={i18n._(t`Select Input`)}
       validated={isValid ? 'default' : 'error'}
@@ -57,7 +50,6 @@ class AnsibleSelect extends React.Component {
       ))}
     </FormSelect>
   );
-  }
 }
 
 const Option = shape({

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
-import AnsibleSelect, { _AnsibleSelect } from './AnsibleSelect';
+import AnsibleSelect from './AnsibleSelect';
 
 const mockData = [
   {
@@ -16,6 +16,7 @@ const mockData = [
 ];
 
 describe('<AnsibleSelect />', () => {
+  const onChange = jest.fn();
   test('initially renders succesfully', async () => {
     mountWithContexts(
       <AnsibleSelect
@@ -29,19 +30,18 @@ describe('<AnsibleSelect />', () => {
   });
 
   test('calls "onSelectChange" on dropdown select change', () => {
-    const spy = jest.spyOn(_AnsibleSelect.prototype, 'onSelectChange');
     const wrapper = mountWithContexts(
       <AnsibleSelect
         id="bar"
         value="foo"
         name="bar"
-        onChange={() => {}}
+        onChange={onChange}
         data={mockData}
       />
     );
-    expect(spy).not.toHaveBeenCalled();
+    expect(onChange).not.toHaveBeenCalled();
     wrapper.find('select').simulate('change');
-    expect(spy).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalled();
   });
 
   test('Returns correct select options', () => {

awx/ui_next/src/components/ExpandCollapse/ExpandCollapse.jsx

@@ -31,10 +31,7 @@ const ToolbarItem = styled(PFToolbarItem)`
 
 // TODO: Recommend renaming this component to avoid confusion
 // with ExpandingContainer
-class ExpandCollapse extends React.Component {
+function ExpandCollapse({ isCompact, onCompact, onExpand, i18n }) {
-  render() {
-    const { isCompact, onCompact, onExpand, i18n } = this.props;
-
   return (
     <Fragment>
       <ToolbarItem>
@@ -59,7 +56,6 @@ class ExpandCollapse extends React.Component {
       </ToolbarItem>
     </Fragment>
   );
-  }
 }
 
 ExpandCollapse.propTypes = {

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

@@ -7,27 +7,19 @@ import { t } from '@lingui/macro';
 import AlertModal from '../AlertModal';
 import { Role } from '../../types';
 
-class DeleteRoleConfirmationModal extends React.Component {
+function DeleteRoleConfirmationModal({
-  static propTypes = {
+  role,
-    role: Role.isRequired,
+  username,
-    username: string,
+  onCancel,
-    onCancel: func.isRequired,
+  onConfirm,
-    onConfirm: func.isRequired,
+  i18n,
-  };
+}) {
-
+  const isTeamRole = () => {
-  static defaultProps = {
-    username: '',
-  };
-
-  isTeamRole() {
-    const { role } = this.props;
     return typeof role.team_id !== 'undefined';
-  }
+  };
 
-  render() {
-    const { role, username, onCancel, onConfirm, i18n } = this.props;
   const title = i18n._(
-      t`Remove ${this.isTeamRole() ? i18n._(t`Team`) : i18n._(t`User`)} Access`
+    t`Remove ${isTeamRole() ? i18n._(t`Team`) : i18n._(t`User`)} Access`
   );
   return (
     <AlertModal
@@ -49,7 +41,7 @@ class DeleteRoleConfirmationModal extends React.Component {
         </Button>,
       ]}
     >
-        {this.isTeamRole() ? (
+      {isTeamRole() ? (
         <Fragment>
           {i18n._(
             t`Are you sure you want to remove ${role.name} access from ${role.team_name}?  Doing so affects all members of the team.`
@@ -69,7 +61,17 @@ class DeleteRoleConfirmationModal extends React.Component {
       )}
     </AlertModal>
   );
-  }
 }
 
+DeleteRoleConfirmationModal.propTypes = {
+  role: Role.isRequired,
+  username: string,
+  onCancel: func.isRequired,
+  onConfirm: func.isRequired,
+};
+
+DeleteRoleConfirmationModal.defaultProps = {
+  username: '',
+};
+
 export default withI18n()(DeleteRoleConfirmationModal);

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

@@ -144,6 +144,7 @@ function ResourceAccessList({ i18n, apiModel, resource }) {
               setDeletionRole(role);
               setShowDeleteModal(true);
             }}
+            i18n={i18n}
           />
         )}
       />

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

@@ -24,19 +24,13 @@ const DataListItemCells = styled(PFDataListItemCells)`
   align-items: start;
 `;
 
-class ResourceAccessListItem extends React.Component {
+function ResourceAccessListItem({ accessRecord, onRoleDelete, i18n }) {
-  static propTypes = {
+  ResourceAccessListItem.propTypes = {
     accessRecord: AccessRecord.isRequired,
     onRoleDelete: func.isRequired,
   };
 
-  constructor(props) {
+  const getRoleLists = () => {
-    super(props);
-    this.renderChip = this.renderChip.bind(this);
-  }
-
-  getRoleLists() {
-    const { accessRecord } = this.props;
     const teamRoles = [];
     const userRoles = [];
 
@@ -52,10 +46,9 @@ class ResourceAccessListItem extends React.Component {
     accessRecord.summary_fields.direct_access.map(sort);
     accessRecord.summary_fields.indirect_access.map(sort);
     return [teamRoles, userRoles];
-  }
+  };
 
-  renderChip(role) {
+  const renderChip = role => {
-    const { accessRecord, onRoleDelete } = this.props;
     return (
       <Chip
         key={role.id}
@@ -67,11 +60,9 @@ class ResourceAccessListItem extends React.Component {
         {role.name}
       </Chip>
     );
-  }
+  };
 
-  render() {
+  const [teamRoles, userRoles] = getRoleLists();
-    const { accessRecord, i18n } = this.props;
-    const [teamRoles, userRoles] = this.getRoleLists();
 
   return (
     <DataListItem
@@ -117,7 +108,7 @@ class ResourceAccessListItem extends React.Component {
                     label={i18n._(t`User Roles`)}
                     value={
                       <ChipGroup numChips={5} totalChips={userRoles.length}>
-                          {userRoles.map(this.renderChip)}
+                        {userRoles.map(renderChip)}
                       </ChipGroup>
                     }
                   />
@@ -127,7 +118,7 @@ class ResourceAccessListItem extends React.Component {
                     label={i18n._(t`Team Roles`)}
                     value={
                       <ChipGroup numChips={5} totalChips={teamRoles.length}>
-                          {teamRoles.map(this.renderChip)}
+                        {teamRoles.map(renderChip)}
                       </ChipGroup>
                     }
                   />
@@ -139,7 +130,6 @@ class ResourceAccessListItem extends React.Component {
       </DataListItemRow>
     </DataListItem>
   );
-  }
 }
 
 export default withI18n()(ResourceAccessListItem);

awx/ui_next/src/components/Sort/Sort.jsx

@@ -1,7 +1,7 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 import { withI18n } from '@lingui/react';
-import { withRouter } from 'react-router-dom';
+import { useLocation, withRouter } from 'react-router-dom';
 import { t } from '@lingui/macro';
 import {
   Button,
@@ -31,15 +31,14 @@ const NoOptionDropdown = styled.div`
   border-bottom-color: var(--pf-global--BorderColor--200);
 `;
 
-class Sort extends React.Component {
+function Sort({ columns, qsConfig, onSort, i18n }) {
-  constructor(props) {
+  const location = useLocation();
-    super(props);
+  const [isSortDropdownOpen, setIsSortDropdownOpen] = useState(false);
 
   let sortKey;
   let sortOrder;
   let isNumeric;
 
-    const { qsConfig, location } = this.props;
   const queryParams = parseQueryString(qsConfig, location.search);
   if (queryParams.order_by && queryParams.order_by.startsWith('-')) {
     sortKey = queryParams.order_by.substr(1);
@@ -55,53 +54,30 @@ class Sort extends React.Component {
     isNumeric = false;
   }
 
-    this.state = {
+  const handleDropdownToggle = isOpen => {
-      isSortDropdownOpen: false,
+    setIsSortDropdownOpen(isOpen);
-      sortKey,
-      sortOrder,
-      isNumeric,
   };
 
-    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
+  const handleDropdownSelect = ({ target }) => {
-    this.handleDropdownSelect = this.handleDropdownSelect.bind(this);
-    this.handleSort = this.handleSort.bind(this);
-  }
-
-  handleDropdownToggle(isSortDropdownOpen) {
-    this.setState({ isSortDropdownOpen });
-  }
-
-  handleDropdownSelect({ target }) {
-    const { columns, onSort, qsConfig } = this.props;
-    const { sortOrder } = this.state;
     const { innerText } = target;
 
-    const [{ key: sortKey }] = columns.filter(({ name }) => name === innerText);
+    const [{ key }] = columns.filter(({ name }) => name === innerText);
-
+    sortKey = key;
-    let isNumeric;
+    if (qsConfig.integerFields.find(field => field === key)) {
-
-    if (qsConfig.integerFields.find(field => field === sortKey)) {
       isNumeric = true;
     } else {
       isNumeric = false;
     }
 
-    this.setState({ isSortDropdownOpen: false, sortKey, isNumeric });
+    setIsSortDropdownOpen(false);
     onSort(sortKey, sortOrder);
-  }
+  };
 
-  handleSort() {
+  const handleSort = () => {
-    const { onSort } = this.props;
+    onSort(sortKey, sortOrder === 'ascending' ? 'descending' : 'ascending');
-    const { sortKey, sortOrder } = this.state;
+  };
-    const newSortOrder = sortOrder === 'ascending' ? 'descending' : 'ascending';
-    this.setState({ sortOrder: newSortOrder });
-    onSort(sortKey, newSortOrder);
-  }
 
-  render() {
   const { up } = DropdownPosition;
-    const { columns, i18n } = this.props;
-    const { isSortDropdownOpen, sortKey, sortOrder, isNumeric } = this.state;
 
   const defaultSortedColumn = columns.find(({ key }) => key === sortKey);
 
@@ -124,39 +100,34 @@ class Sort extends React.Component {
   let SortIcon;
   if (isNumeric) {
     SortIcon =
-        sortOrder === 'ascending'
+      sortOrder === 'ascending' ? SortNumericDownIcon : SortNumericDownAltIcon;
-          ? SortNumericDownIcon
-          : SortNumericDownAltIcon;
   } else {
     SortIcon =
       sortOrder === 'ascending' ? SortAlphaDownIcon : SortAlphaDownAltIcon;
   }
-
   return (
     <Fragment>
       {sortedColumnName && (
         <InputGroup>
           {(sortDropdownItems.length > 0 && (
             <Dropdown
-                onToggle={this.handleDropdownToggle}
+              onToggle={handleDropdownToggle}
-                onSelect={this.handleDropdownSelect}
+              onSelect={handleDropdownSelect}
               direction={up}
               isOpen={isSortDropdownOpen}
               toggle={
-                  <DropdownToggle
+                <DropdownToggle id="awx-sort" onToggle={handleDropdownToggle}>
-                    id="awx-sort"
-                    onToggle={this.handleDropdownToggle}
-                  >
                   {sortedColumnName}
                 </DropdownToggle>
               }
               dropdownItems={sortDropdownItems}
             />
           )) || <NoOptionDropdown>{sortedColumnName}</NoOptionDropdown>}
+
           <Button
             variant={ButtonVariant.control}
             aria-label={i18n._(t`Sort`)}
-              onClick={this.handleSort}
+            onClick={handleSort}
           >
             <SortIcon />
           </Button>
@@ -164,7 +135,6 @@ class Sort extends React.Component {
       )}
     </Fragment>
   );
-  }
 }
 
 Sort.propTypes = {

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

@@ -1,5 +1,10 @@
 import React from 'react';
-import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import { act } from 'react-dom/test-utils';
+import {
+  mountWithContexts,
+  waitForElement,
+} from '../../../testUtils/enzymeHelpers';
+
 import Sort from './Sort';
 
 describe('<Sort />', () => {
@@ -105,7 +110,7 @@ describe('<Sort />', () => {
     expect(onSort).toHaveBeenCalledWith('foo', 'ascending');
   });
 
-  test('Changing dropdown correctly passes back new sort key', () => {
+  test('Changing dropdown correctly passes back new sort key', async () => {
     const qsConfig = {
       namespace: 'item',
       defaultParams: { page: 1, page_size: 5, order_by: 'foo' },
@@ -131,44 +136,18 @@ describe('<Sort />', () => {
 
     const wrapper = mountWithContexts(
       <Sort qsConfig={qsConfig} columns={columns} onSort={onSort} />
-    ).find('Sort');
+    );
-
+    act(() => wrapper.find('Dropdown').invoke('onToggle')(true));
-    wrapper.instance().handleDropdownSelect({ target: { innerText: 'Bar' } });
+    wrapper.update();
+    await waitForElement(wrapper, 'Dropdown', el => el.prop('isOpen') === true);
+    wrapper
+      .find('li')
+      .at(0)
+      .prop('onClick')({ target: { innerText: 'Bar' } });
+    wrapper.update();
     expect(onSort).toBeCalledWith('bar', 'ascending');
   });
 
-  test('Opening dropdown correctly updates state', () => {
-    const qsConfig = {
-      namespace: 'item',
-      defaultParams: { page: 1, page_size: 5, order_by: 'foo' },
-      integerFields: ['page', 'page_size'],
-    };
-
-    const columns = [
-      {
-        name: 'Foo',
-        key: 'foo',
-      },
-      {
-        name: 'Bar',
-        key: 'bar',
-      },
-      {
-        name: 'Bakery',
-        key: 'bakery',
-      },
-    ];
-
-    const onSort = jest.fn();
-
-    const wrapper = mountWithContexts(
-      <Sort qsConfig={qsConfig} columns={columns} onSort={onSort} />
-    ).find('Sort');
-    expect(wrapper.state('isSortDropdownOpen')).toEqual(false);
-    wrapper.instance().handleDropdownToggle(true);
-    expect(wrapper.state('isSortDropdownOpen')).toEqual(true);
-  });
-
   test('It displays correct sort icon', () => {
     const forwardNumericIconSelector = 'SortNumericDownIcon';
     const reverseNumericIconSelector = 'SortNumericDownAltIcon';

awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import { withRouter } from 'react-router-dom';
-import { withI18n } from '@lingui/react';
+import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import styled from 'styled-components';
 import {
@@ -518,7 +518,7 @@ class JobOutput extends Component {
   }
 
   render() {
-    const { job, i18n } = this.props;
+    const { job } = this.props;
 
     const {
       contentError,
@@ -596,6 +596,9 @@ class JobOutput extends Component {
           </OutputWrapper>
         </CardBody>
         {deletionError && (
+          <>
+            <I18n>
+              {({ i18n }) => (
                 <AlertModal
                   isOpen={deletionError}
                   variant="danger"
@@ -606,10 +609,13 @@ class JobOutput extends Component {
                   <ErrorDetail error={deletionError} />
                 </AlertModal>
               )}
+            </I18n>
+          </>
+        )}
       </Fragment>
     );
   }
 }
 
 export { JobOutput as _JobOutput };
-export default withI18n()(withRouter(JobOutput));
+export default withRouter(JobOutput);

awx/ui_next/src/screens/Project/shared/ProjectForm.jsx

@@ -310,7 +310,17 @@ function ProjectForm({ i18n, project, submitError, ...props }) {
   const { summary_fields = {} } = project;
   const [contentError, setContentError] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
-  const [scmSubFormState, setScmSubFormState] = useState(null);
+  const [scmSubFormState, setScmSubFormState] = useState({
+    scm_url: '',
+    scm_branch: '',
+    scm_refspec: '',
+    credential: '',
+    scm_clean: false,
+    scm_delete_on_update: false,
+    scm_update_on_launch: false,
+    allow_override: false,
+    scm_update_cache_timeout: 0,
+  });
   const [scmTypeOptions, setScmTypeOptions] = useState(null);
   const [credentials, setCredentials] = useState({
     scm: { typeId: null, value: null },

awx/ui_next/src/screens/Project/shared/ProjectSyncButton.jsx

@@ -6,8 +6,8 @@ import { SyncIcon } from '@patternfly/react-icons';
 import { number } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-
 import useRequest, { useDismissableError } from '../../../util/useRequest';
+
 import AlertModal from '../../../components/AlertModal';
 import ErrorDetail from '../../../components/ErrorDetail';
 import { ProjectsAPI } from '../../../api';

awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx

@@ -27,16 +27,14 @@ const DataListAction = styled(_DataListAction)`
   grid-template-columns: 40px;
 `;
 
-class TeamListItem extends React.Component {
+function TeamListItem({ team, isSelected, onSelect, detailUrl, i18n }) {
-  static propTypes = {
+  TeamListItem.propTypes = {
     team: Team.isRequired,
     detailUrl: string.isRequired,
     isSelected: bool.isRequired,
     onSelect: func.isRequired,
   };
 
-  render() {
-    const { team, isSelected, onSelect, detailUrl, i18n } = this.props;
   const labelId = `check-action-${team.id}`;
 
   return (
@@ -92,6 +90,5 @@ class TeamListItem extends React.Component {
       </DataListItemRow>
     </DataListItem>
   );
-  }
 }
 export default withI18n()(TeamListItem);