add user teams list

awx/ui_next/src/api/models/Users.js

@@ -34,6 +34,12 @@ class Users extends Base {
   readRoleOptions(userId) {
     return this.http.options(`${this.baseUrl}${userId}/roles/`);
   }
+
+  readTeams(userId, params) {
+    return this.http.get(`${this.baseUrl}${userId}/teams/`, {
+      params,
+    });
+  }
 }
 
 export default Users;

awx/ui_next/src/screens/User/UserOrganizations/UserOrganizationListItem.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
 import {
   DataListItemCells,
   DataListItemRow,
@@ -9,14 +7,18 @@ import {
 } from '@patternfly/react-core';
 import DataListCell from '../../../components/DataListCell';
 
-function UserOrganizationListItem({ organization, i18n }) {
+export default function UserOrganizationListItem({ organization }) {
+  const labelId = `organization-${organization.id}`;
   return (
-    <DataListItem aria-labelledby={i18n._(t`User Organization List Item`)}>
+    <DataListItem aria-labelledby={labelId}>
       <DataListItemRow>
         <DataListItemCells
           dataListCells={[
             <DataListCell key={organization.id}>
-              <Link to={`/organizations/${organization.id}/details`}>
+              <Link
+                to={`/organizations/${organization.id}/details`}
+                id={labelId}
+              >
                 {organization.name}
               </Link>
             </DataListCell>,
@@ -29,5 +31,3 @@ function UserOrganizationListItem({ organization, i18n }) {
     </DataListItem>
   );
 }
-
-export default withI18n()(UserOrganizationListItem);

awx/ui_next/src/screens/User/UserTeams/UserTeams.jsx

@@ -1,10 +1,6 @@
-import React, { Component } from 'react';
-import { CardBody } from '../../../components/Card';
+import React from 'react';
+import UserTeamsList from './UserTeamsList';
 
-class UserAdd extends Component {
-  render() {
-    return <CardBody>Coming soon :)</CardBody>;
-  }
+export default function UserTeams() {
+  return <UserTeamsList />;
 }
-
-export default UserAdd;

awx/ui_next/src/screens/User/UserTeams/UserTeamsList.jsx

@@ -0,0 +1,70 @@
+import React, { useCallback, useEffect } from 'react';
+import { withI18n } from '@lingui/react';
+import { useLocation, useParams } from 'react-router-dom';
+import { t } from '@lingui/macro';
+
+import PaginatedDataList from '../../../components/PaginatedDataList';
+import useRequest from '../../../util/useRequest';
+import { UsersAPI } from '../../../api';
+import { getQSConfig, parseQueryString } from '../../../util/qs';
+import UserTeamListItem from './UserTeamsListItem';
+
+const QS_CONFIG = getQSConfig('teams', {
+  page: 1,
+  page_size: 20,
+  order_by: 'name',
+});
+
+function UserTeamsList({ i18n }) {
+  const location = useLocation();
+  const { id: userId } = useParams();
+
+  const {
+    result: { teams, count },
+    error: contentError,
+    isLoading,
+    request: fetchOrgs,
+  } = useRequest(
+    useCallback(async () => {
+      const params = parseQueryString(QS_CONFIG, location.search);
+      const {
+        data: { results, count: teamCount },
+      } = await UsersAPI.readTeams(userId, params);
+      return {
+        teams: results,
+        count: teamCount,
+      };
+    }, [userId, location.search]),
+    {
+      teams: [],
+      count: 0,
+    }
+  );
+
+  useEffect(() => {
+    fetchOrgs();
+  }, [fetchOrgs]);
+
+  return (
+    <PaginatedDataList
+      items={teams}
+      contentError={contentError}
+      hasContentLoading={isLoading}
+      itemCount={count}
+      pluralizedItemName={i18n._(t`Teams`)}
+      qsConfig={QS_CONFIG}
+      renderItem={team => (
+        <UserTeamListItem
+          key={team.id}
+          value={team.name}
+          team={team}
+          detailUrl={`/teams/${team.id}/details`}
+          onSelect={() => {}}
+          isSelected={false}
+        />
+      )}
+    />
+  );
+}
+
+export default withI18n()(UserTeamsList);

awx/ui_next/src/screens/User/UserTeams/UserTeamsListItem.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import {
+  DataListItemCells,
+  DataListItemRow,
+  DataListItem,
+} from '@patternfly/react-core';
+import DataListCell from '../../../components/DataListCell';
+
+function UserTeamsListItem({ team, i18n }) {
+  return (
+    <DataListItem aria-labelledby={`team-${team.id}`}>
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="name">
+              <Link to={`/teams/${team.id}/details`} id={`team-${team.id}`}>
+                {team.name}
+              </Link>
+            </DataListCell>,
+            <DataListCell key="organization">
+              {team.summary_fields.organization && (
+                <>
+                  <b css="margin-right: 24px">{i18n._(t`Organization`)}</b>
+                  <Link
+                    to={`/organizations/${team.summary_fields.organization.id}/details`}
+                  >
+                    <b>{team.summary_fields.organization.name}</b>
+                  </Link>
+                </>
+              )}
+            </DataListCell>,
+            <DataListCell key="description">{team.description}</DataListCell>,
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+  );
+}
+
+export default withI18n()(UserTeamsListItem);