Merge pull request #5786 from marshmalien/4951-org-team-links

Fix organization team links

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

awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeams.jsx

@@ -30,7 +30,9 @@ function OrganizationTeams({ id, i18n }) {
           data: { count = 0, results = [] },
         } = await OrganizationsAPI.readTeams(id, params);
         setItemCount(count);
-        setTeams(results);
+        setTeams(
+          results.map(team => ({ ...team, url: `/teams/${team.id}/details` }))
+        );
       } catch (error) {
         setContentError(error);
       } finally {

awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeams.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 
 import { OrganizationsAPI } from '@api';
-import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
 import { sleep } from '@testUtils/testUtils';
 
 import OrganizationTeams from './OrganizationTeams';
@@ -65,7 +65,9 @@ describe('<OrganizationTeams />', () => {
     wrapper.update();
 
     const list = wrapper.find('PaginatedDataList');
-    expect(list.prop('items')).toEqual(listData.data.results);
+    list.find('DataListCell').forEach((el, index) => {
+      expect(el.text()).toBe(listData.data.results[index].name);
+    });
     expect(list.prop('itemCount')).toEqual(listData.data.count);
     expect(list.prop('qsConfig')).toEqual({
       namespace: 'team',
@@ -78,4 +80,15 @@ describe('<OrganizationTeams />', () => {
       integerFields: ['page', 'page_size'],
     });
   });
+
+  test('should show content error for failed instance group fetch', async () => {
+    OrganizationsAPI.readTeams.mockImplementationOnce(() =>
+      Promise.reject(new Error())
+    );
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<OrganizationTeams id={1} />);
+    });
+    await waitForElement(wrapper, 'ContentError', el => el.length === 1);
+  });
 });

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

@@ -1,7 +1,14 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom';
+import {
+  Link,
+  Redirect,
+  Route,
+  Switch,
+  useLocation,
+  useParams,
+} from 'react-router-dom';
 import { Card, PageSection } from '@patternfly/react-core';
 import CardCloseButton from '@components/CardCloseButton';
 import { TabbedCardHeader } from '@components/Card';
@@ -11,62 +18,31 @@ import TeamDetail from './TeamDetail';
 import TeamEdit from './TeamEdit';
 import { TeamsAPI } from '@api';
 
-class Team extends Component {
+function Team({ i18n, setBreadcrumb }) {
-  constructor(props) {
+  const [team, setTeam] = useState(null);
-    super(props);
+  const [contentError, setContentError] = useState(null);
+  const [hasContentLoading, setHasContentLoading] = useState(true);
+  const location = useLocation();
+  const { id } = useParams();
 
-    this.state = {
+  useEffect(() => {
-      team: null,
+    (async () => {
-      hasContentLoading: true,
-      contentError: null,
-      isInitialized: false,
-    };
-    this.loadTeam = this.loadTeam.bind(this);
-  }
-
-  async componentDidMount() {
-    await this.loadTeam();
-    this.setState({ isInitialized: true });
-  }
-
-  async componentDidUpdate(prevProps) {
-    const { location, match } = this.props;
-    const url = `/teams/${match.params.id}/`;
-
-    if (
-      prevProps.location.pathname.startsWith(url) &&
-      prevProps.location !== location &&
-      location.pathname === `${url}details`
-    ) {
-      await this.loadTeam();
-    }
-  }
-
-  async loadTeam() {
-    const { match, setBreadcrumb } = this.props;
-    const id = parseInt(match.params.id, 10);
-
-    this.setState({ contentError: null, hasContentLoading: true });
       try {
         const { data } = await TeamsAPI.readDetail(id);
         setBreadcrumb(data);
-      this.setState({ team: data });
+        setTeam(data);
-    } catch (err) {
+      } catch (error) {
-      this.setState({ contentError: err });
+        setContentError(error);
       } finally {
-      this.setState({ hasContentLoading: false });
+        setHasContentLoading(false);
       }
-  }
+    })();
-
+  }, [id, setBreadcrumb]);
-  render() {
-    const { location, match, i18n } = this.props;
-
-    const { team, contentError, hasContentLoading, isInitialized } = this.state;
 
   const tabsArray = [
-      { name: i18n._(t`Details`), link: `${match.url}/details`, id: 0 },
+    { name: i18n._(t`Details`), link: `/teams/${id}/details`, id: 0 },
-      { name: i18n._(t`Users`), link: `${match.url}/users`, id: 1 },
+    { name: i18n._(t`Users`), link: `/teams/${id}/users`, id: 1 },
-      { name: i18n._(t`Access`), link: `${match.url}/access`, id: 2 },
+    { name: i18n._(t`Access`), link: `/teams/${id}/access`, id: 2 },
   ];
 
   let cardHeader = (
@@ -76,10 +52,6 @@ class Team extends Component {
     </TabbedCardHeader>
   );
 
-    if (!isInitialized) {
-      cardHeader = null;
-    }
-
   if (location.pathname.endsWith('edit')) {
     cardHeader = null;
   }
@@ -108,15 +80,14 @@ class Team extends Component {
         <Switch>
           <Redirect from="/teams/:id" to="/teams/:id/details" exact />
           {team && (
-              <Route
+            <Route path="/teams/:id/details">
-                path="/teams/:id/edit"
+              <TeamDetail team={team} />
-                render={() => <TeamEdit team={team} />}
+            </Route>
-              />
           )}
           {team && (
             <Route
-                path="/teams/:id/details"
+              path="/teams/:id/edit"
-                render={() => <TeamDetail team={team} />}
+              render={() => <TeamEdit team={team} />}
             />
           )}
           {team && (
@@ -137,8 +108,8 @@ class Team extends Component {
             render={() =>
               !hasContentLoading && (
                 <ContentError isNotFound>
-                    {match.params.id && (
+                  {id && (
-                      <Link to={`/teams/${match.params.id}/details`}>
+                    <Link to={`/teams/${id}/details`}>
                       {i18n._(`View Team Details`)}
                     </Link>
                   )}
@@ -146,13 +117,11 @@ class Team extends Component {
               )
             }
           />
-            ,
         </Switch>
       </Card>
     </PageSection>
   );
 }
-}
 
-export default withI18n()(withRouter(Team));
+export default withI18n()(Team);
 export { Team as _Team };

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { createMemoryHistory } from 'history';
 import { TeamsAPI } from '@api';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
@@ -34,17 +35,28 @@ async function getTeams() {
 }
 
 describe('<Team />', () => {
-  test('initially renders succesfully', () => {
+  let wrapper;
+
+  beforeEach(() => {
     TeamsAPI.readDetail.mockResolvedValue({ data: mockTeam });
     TeamsAPI.read.mockImplementation(getTeams);
-    mountWithContexts(<Team setBreadcrumb={() => {}} me={mockMe} />);
+  });
+
+  test('initially renders succesfully', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <Team setBreadcrumb={() => {}} me={mockMe} />
+      );
+    });
+    expect(wrapper.find('Team').length).toBe(1);
   });
 
   test('should show content error when user attempts to navigate to erroneous route', async () => {
     const history = createMemoryHistory({
       initialEntries: ['/teams/1/foobar'],
     });
-    const wrapper = mountWithContexts(
+    await act(async () => {
+      wrapper = mountWithContexts(
         <Team setBreadcrumb={() => {}} me={mockMe} />,
         {
           context: {
@@ -62,6 +74,7 @@ describe('<Team />', () => {
           },
         }
       );
+    });
     await waitForElement(wrapper, 'ContentError', el => el.length === 1);
   });
 });

awx/ui_next/src/screens/Team/TeamList/index.js

@@ -1,2 +1,2 @@
-export { default as TeamList } from './TeamList';
+export { default } from './TeamList';
 export { default as TeamListItem } from './TeamListItem';

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

@@ -1,37 +1,27 @@
-import React, { Component, Fragment } from 'react';
+import React, { useState, useCallback } from 'react';
-import { Route, withRouter, Switch } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
 import { Config } from '@contexts/Config';
-import Breadcrumbs from '@components/Breadcrumbs/Breadcrumbs';
+import Breadcrumbs from '@components/Breadcrumbs';
-
+import TeamList from './TeamList';
-import TeamsList from './TeamList/TeamList';
+import TeamAdd from './TeamAdd';
-import TeamAdd from './TeamAdd/TeamAdd';
 import Team from './Team';
 
-class Teams extends Component {
+function Teams({ i18n }) {
-  constructor(props) {
+  const [breadcrumbConfig, setBreadcrumbConfig] = useState({
-    super(props);
-
-    const { i18n } = props;
-
-    this.state = {
-      breadcrumbConfig: {
     '/teams': i18n._(t`Teams`),
     '/teams/add': i18n._(t`Create New Team`),
-      },
+  });
-    };
-  }
-
-  setBreadcrumbConfig = team => {
-    const { i18n } = this.props;
 
+  const buildBreadcrumbConfig = useCallback(
+    team => {
       if (!team) {
         return;
       }
 
-    const breadcrumbConfig = {
+      setBreadcrumbConfig({
         '/teams': i18n._(t`Teams`),
         '/teams/add': i18n._(t`Create New Team`),
         [`/teams/${team.id}`]: `${team.name}`,
@@ -39,41 +29,30 @@ class Teams extends Component {
         [`/teams/${team.id}/details`]: i18n._(t`Details`),
         [`/teams/${team.id}/users`]: i18n._(t`Users`),
         [`/teams/${team.id}/access`]: i18n._(t`Access`),
-    };
+      });
-
+    },
-    this.setState({ breadcrumbConfig });
+    [i18n]
-  };
+  );
-
-  render() {
-    const { match, history, location } = this.props;
-    const { breadcrumbConfig } = this.state;
 
   return (
-      <Fragment>
+    <>
       <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
       <Switch>
-          <Route path={`${match.path}/add`} render={() => <TeamAdd />} />
+        <Route path="/teams/add">
-          <Route
+          <TeamAdd />
-            path={`${match.path}/:id`}
+        </Route>
-            render={() => (
+        <Route path="/teams/:id">
+          <Team setBreadcrumb={buildBreadcrumbConfig} />
+        </Route>
+        <Route path="/teams">
           <Config>
-                {({ me }) => (
+            {({ me }) => <TeamList path="/teams" me={me || {}} />}
-                  <Team
-                    history={history}
-                    location={location}
-                    setBreadcrumb={this.setBreadcrumbConfig}
-                    me={me || {}}
-                  />
-                )}
           </Config>
-            )}
+        </Route>
-          />
-          <Route path={`${match.path}`} render={() => <TeamsList />} />
       </Switch>
-      </Fragment>
+    </>
   );
 }
-}
 
 export { Teams as _Teams };
-export default withI18n()(withRouter(Teams));
+export default withI18n()(Teams);