fix tests for OrganizationTeams, OrganizationTeamsList

src/pages/Organizations/components/OrganizationTeamsList.jsx

@@ -1,11 +1,20 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import {
-  DataList, DataListItem, DataListCell, Text,
-  TextContent, TextVariants
+  DataList,
+  DataListItem,
+  DataListCell,
+  Text,
+  TextContent,
+  TextVariants,
+  Title,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody,
 } from '@patternfly/react-core';
+import { CubesIcon } from '@patternfly/react-icons';
 import { I18n, i18nMark } from '@lingui/react';
-import { t } from '@lingui/macro';
+import { Trans, t } from '@lingui/macro';
 import { withRouter, Link } from 'react-router-dom';
 
 import Pagination from '../../../components/Pagination';
@@ -94,7 +103,17 @@ class OrganizationTeamsList extends React.Component {
                 )}
               </Fragment> // TODO: replace with proper error handling
             )}
-            {teams.length > 0 && (
+            {teams.length === 0 ? (
+              <EmptyState>
+                <EmptyStateIcon icon={CubesIcon} />
+                <Title size="lg">
+                  <Trans>No Teams Found</Trans>
+                </Title>
+                <EmptyStateBody>
+                  <Trans>Please add a team to populate this list</Trans>
+                </EmptyStateBody>
+              </EmptyState>
+            ) : (
               <Fragment>
                 <DataListToolbar
                   sortedColumnKey={queryParams.sort_by}
@@ -132,14 +151,22 @@ class OrganizationTeamsList extends React.Component {
   }
 }
 
+const Item = PropTypes.shape({
+  id: PropTypes.number.isRequired,
+  url: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+});
+
+const QueryParams = PropTypes.shape({
+  page: PropTypes.number,
+  page_size: PropTypes.number,
+  order_by: PropTypes.string,
+});
+
 OrganizationTeamsList.propTypes = {
-  teams: PropTypes.arrayOf({}).isRequired,
+  teams: PropTypes.arrayOf(Item).isRequired,
   itemCount: PropTypes.number.isRequired,
-  queryParams: PropTypes.shape({
-    page: PropTypes.number,
-    page_size: PropTypes.number,
-    order_by: PropTypes.string,
-  }).isRequired
+  queryParams: QueryParams.isRequired
 };
 
 export { OrganizationTeamsList as _OrganizationTeamsList };

src/pages/Organizations/screens/Organization/Organization.jsx

@@ -160,7 +160,6 @@ class Organization extends Component {
               render={() => (
                 <OrganizationTeams
                   id={Number(match.params.id)}
-                  searchString={location.search}
                   api={api}
                 />
               )}

src/pages/Organizations/screens/Organization/OrganizationTeams.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import OrganizationTeamsList from '../../components/OrganizationTeamsList';
@@ -17,6 +17,7 @@ class OrganizationTeams extends React.Component {
     this.readOrganizationTeamsList = this.readOrganizationTeamsList.bind(this);
 
     this.state = {
+      isInitialized: false,
       isLoading: false,
       error: null,
       itemCount: 0,
@@ -36,8 +37,8 @@ class OrganizationTeams extends React.Component {
   }
 
   getQueryParams () {
-    const { searchString } = this.props;
-    const searchParams = parseQueryString(searchString.substring(1));
+    const { location } = this.props;
+    const searchParams = parseQueryString(location.search.substring(1));
 
     return {
       ...DEFAULT_QUERY_PARAMS,
@@ -57,36 +58,44 @@ class OrganizationTeams extends React.Component {
         itemCount: count,
         teams: results,
         isLoading: false,
+        isInitialized: true,
       });
     } catch (error) {
       this.setState({
         error,
-        isLoading: false
+        isLoading: false,
+        isInitialized: true,
       });
     }
   }
 
   render () {
-    const { teams, itemCount, isLoading } = this.state;
+    const { teams, itemCount, isLoading, isInitialized, error } = this.state;
 
-    if (isLoading) {
-      return <div>Loading...</div>;
+    if (error) {
+      // TODO: better error state
+      return <div>{error.message}</div>;
     }
 
+    // TODO: better loading state
     return (
-      <OrganizationTeamsList
-        teams={teams}
-        itemCount={itemCount}
-        queryParams={this.getQueryParams()}
-      />
+      <Fragment>
+        {isLoading && (<div>Loading...</div>)}
+        {isInitialized && (
+          <OrganizationTeamsList
+            teams={teams}
+            itemCount={itemCount}
+            queryParams={this.getQueryParams()}
+          />
+        )}
+      </Fragment>
     );
   }
 }
 
 OrganizationTeams.propTypes = {
   id: PropTypes.number.isRequired,
-  searchString: PropTypes.string.isRequired,
-  api: PropTypes.shape().isRequired, // TODO: remove?
+  api: PropTypes.shape().isRequired,
 };
 
 export { OrganizationTeams as _OrganizationTeams };