Merge pull request #5809 from AlexSCorey/5799-TeamEditUpdate

Fixes update failure on TeamEdit

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

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

@@ -37,7 +37,7 @@ function Team({ i18n, setBreadcrumb }) {
         setHasContentLoading(false);
       }
     })();
-  }, [id, setBreadcrumb]);
+  }, [id, setBreadcrumb, location]);
 
   const tabsArray = [
     { name: i18n._(t`Details`), link: `/teams/${id}/details`, id: 0 },

awx/ui_next/src/screens/Team/TeamEdit/TeamEdit.jsx

@@ -1,6 +1,6 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
+import { withRouter, useHistory } from 'react-router-dom';
 import { CardBody } from '@components/Card';
 
 import { TeamsAPI } from '@api';
@@ -8,48 +8,22 @@ import { Config } from '@contexts/Config';
 
 import TeamForm from '../shared/TeamForm';
 
-class TeamEdit extends Component {
-  constructor(props) {
-    super(props);
+function TeamEdit({ team }) {
+  const history = useHistory();
+  const [error, setError] = useState(null);
 
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-    this.handleSuccess = this.handleSuccess.bind(this);
-
-    this.state = {
-      error: '',
-    };
-  }
-
-  async handleSubmit(values) {
-    const { team } = this.props;
+  const handleSubmit = async values => {
     try {
       await TeamsAPI.update(team.id, values);
-      this.handleSuccess();
+      history.push(`/teams/${team.id}/details`);
     } catch (err) {
-      this.setState({ error: err });
-    }
+      setError(err);
     }
+  };
 
-  handleCancel() {
-    const {
-      team: { id },
-      history,
-    } = this.props;
-    history.push(`/teams/${id}/details`);
-  }
-
-  handleSuccess() {
-    const {
-      team: { id },
-      history,
-    } = this.props;
-    history.push(`/teams/${id}/details`);
-  }
-
-  render() {
-    const { team } = this.props;
-    const { error } = this.state;
+  const handleCancel = () => {
+    history.push(`/teams/${team.id}/details`);
+  };
 
   return (
     <CardBody>
@@ -57,8 +31,8 @@ class TeamEdit extends Component {
         {({ me }) => (
           <TeamForm
             team={team}
-              handleSubmit={this.handleSubmit}
-              handleCancel={this.handleCancel}
+            handleSubmit={handleSubmit}
+            handleCancel={handleCancel}
             me={me || {}}
           />
         )}
@@ -67,7 +41,6 @@ class TeamEdit extends Component {
     </CardBody>
   );
 }
-}
 
 TeamEdit.propTypes = {
   team: PropTypes.shape().isRequired,

awx/ui_next/src/screens/Team/TeamEdit/TeamEdit.test.jsx

@@ -20,8 +20,12 @@ describe('<TeamEdit />', () => {
     },
   };
 
-  test('handleSubmit should call api update', async () => {
-    const wrapper = mountWithContexts(<TeamEdit team={mockData} />);
+  test('handleSubmit should call api update and then navigate to the details page', async () => {
+    const history = createMemoryHistory({});
+
+    const wrapper = mountWithContexts(<TeamEdit team={mockData} />, {
+      context: { router: { history } },
+    });
 
     const updatedTeamData = {
       name: 'new name',
@@ -32,6 +36,7 @@ describe('<TeamEdit />', () => {
     });
 
     expect(TeamsAPI.update).toHaveBeenCalledWith(1, updatedTeamData);
+    expect(history.location.pathname).toEqual('/teams/1/details');
   });
 
   test('should navigate to team detail when cancel is clicked', async () => {