Adds User Organization List

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

@@ -7,7 +7,9 @@ class Users extends Base {
   }
 
   associateRole(userId, roleId) {
-    return this.http.post(`${this.baseUrl}${userId}/roles/`, { id: roleId });
+    return this.http.post(`${this.baseUrl}${userId}/roles/`, {
+      id: roleId,
+    });
   }
 
   disassociateRole(userId, roleId) {
@@ -16,6 +18,12 @@ class Users extends Base {
       disassociate: true,
     });
   }
+
+  readOrganizations(userId, params) {
+    return this.http.get(`${this.baseUrl}${userId}/organizations/`, {
+      params,
+    });
+  }
 }
 
 export default Users;

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

@@ -9,7 +9,7 @@ import RoutedTabs from '@components/RoutedTabs';
 import ContentError from '@components/ContentError';
 import UserDetail from './UserDetail';
 import UserEdit from './UserEdit';
-import UserOrganizations from './UserOrganizations';
+import UserOrganizationList from './UserOrganizationList';
 import UserTeams from './UserTeams';
 import UserTokens from './UserTokens';
 import { UsersAPI } from '@api';
@@ -130,10 +130,9 @@ class User extends Component {
                 render={() => <UserDetail user={user} />}
               />
             )}
-            <Route
-              path="/users/:id/organizations"
-              render={() => <UserOrganizations id={Number(match.params.id)} />}
-            />
+            <Route path="/users/:id/organizations">
+              <UserOrganizationList id={Number(match.params.id)} />
+            </Route>
             <Route
               path="/users/:id/teams"
               render={() => <UserTeams id={Number(match.params.id)} />}

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

@@ -0,0 +1,71 @@
+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 UserOrganizationListItem from '../UserOrganizationListItem';
+
+const QS_CONFIG = getQSConfig('organizations', {
+  page: 1,
+  page_size: 20,
+  order_by: 'name',
+  type: 'organization',
+});
+
+function UserOrganizationList({ i18n }) {
+  const location = useLocation();
+  const { id: userId } = useParams();
+
+  const {
+    result: { organizations, count },
+    error: contentError,
+    isLoading,
+    request: fetchOrgs,
+  } = useRequest(
+    useCallback(async () => {
+      const params = parseQueryString(QS_CONFIG, location.search);
+      const {
+        data: { results, count: orgCount },
+      } = await UsersAPI.readOrganizations(userId, params);
+      return {
+        organizations: results,
+        count: orgCount,
+      };
+    }, [userId, location.search]),
+    {
+      organizations: [],
+      count: 0,
+    }
+  );
+
+  useEffect(() => {
+    fetchOrgs();
+  }, [fetchOrgs]);
+
+  return (
+    <PaginatedDataList
+      items={organizations}
+      contentError={contentError}
+      hasContentLoading={isLoading}
+      itemCount={count}
+      pluralizedItemName={i18n._(t`Organizations`)}
+      qsConfig={QS_CONFIG}
+      renderItem={organization => (
+        <UserOrganizationListItem
+          key={organization.id}
+          value={organization.name}
+          organization={organization}
+          detailUrl={`/organizations/${organization.id}/details`}
+          onSelect={() => {}}
+          isSelected={false}
+        />
+      )}
+    />
+  );
+}
+
+export default withI18n()(UserOrganizationList);

awx/ui_next/src/screens/User/UserOrganizationList/index.js

@@ -0,0 +1 @@
+export { default } from './UserOrganizationList';

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import {
+  DataList,
+  DataListItemCells,
+  DataListItemRow,
+  DataListItem,
+  DataListCell,
+} from '@patternfly/react-core';
+
+function UserOrganizationListItem({ organization, i18n }) {
+  return (
+    <DataList aria-label={i18n._(t`User Organization List Item`)}>
+      <DataListItem aria-labelledby={i18n._(t`User Organization List Item`)}>
+        <DataListItemRow>
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key={organization.id}>
+                <Link to={`/organizations/${organization.id}/details`}>
+                  {organization.name}
+                </Link>
+              </DataListCell>,
+              <DataListCell key={organization.description}>
+                {organization.description}
+              </DataListCell>,
+            ]}
+          />
+        </DataListItemRow>
+      </DataListItem>
+    </DataList>
+  );
+}
+
+export default withI18n()(UserOrganizationListItem);

awx/ui_next/src/screens/User/UserOrganizationListItem/index.js

@@ -0,0 +1 @@
+export { default } from './UserOrganizationListItem';

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

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

awx/ui_next/src/screens/User/UserOrganizations/index.js

@@ -1 +0,0 @@
-export { default } from './UserOrganizations';