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,65 +8,38 @@ import { Config } from '@contexts/Config';
 
 import TeamForm from '../shared/TeamForm';
 
-class TeamEdit extends Component {
+function TeamEdit({ team }) {
-  constructor(props) {
+  const history = useHistory();
-    super(props);
+  const [error, setError] = useState(null);
 
-    this.handleSubmit = this.handleSubmit.bind(this);
+  const handleSubmit = async values => {
-    this.handleCancel = this.handleCancel.bind(this);
-    this.handleSuccess = this.handleSuccess.bind(this);
-
-    this.state = {
-      error: '',
-    };
-  }
-
-  async handleSubmit(values) {
-    const { team } = this.props;
     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 handleCancel = () => {
-    const {
+    history.push(`/teams/${team.id}/details`);
-      team: { id },
+  };
-      history,
-    } = this.props;
-    history.push(`/teams/${id}/details`);
-  }
 
-  handleSuccess() {
+  return (
-    const {
+    <CardBody>
-      team: { id },
+      <Config>
-      history,
+        {({ me }) => (
-    } = this.props;
+          <TeamForm
-    history.push(`/teams/${id}/details`);
+            team={team}
-  }
+            handleSubmit={handleSubmit}
-
+            handleCancel={handleCancel}
-  render() {
+            me={me || {}}
-    const { team } = this.props;
+          />
-    const { error } = this.state;
+        )}
-
+      </Config>
-    return (
+      {error ? <div>error</div> : null}
-      <CardBody>
+    </CardBody>
-        <Config>
+  );
-          {({ me }) => (
-            <TeamForm
-              team={team}
-              handleSubmit={this.handleSubmit}
-              handleCancel={this.handleCancel}
-              me={me || {}}
-            />
-          )}
-        </Config>
-        {error ? <div>error</div> : null}
-      </CardBody>
-    );
-  }
 }
 
 TeamEdit.propTypes = {

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

@@ -20,8 +20,12 @@ describe('<TeamEdit />', () => {
     },
   };
 
-  test('handleSubmit should call api update', async () => {
+  test('handleSubmit should call api update and then navigate to the details page', async () => {
-    const wrapper = mountWithContexts(<TeamEdit team={mockData} />);
+    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 () => {