add empty list functionality to org list

src/pages/Organizations/screens/OrganizationsList.jsx

@@ -6,13 +6,17 @@ import {
   withRouter
 } from 'react-router-dom';
 import { I18n, i18nMark } from '@lingui/react';
-import { t } from '@lingui/macro';
+import { Trans, t } from '@lingui/macro';
 import {
   Card,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody,
   PageSection,
   PageSectionVariants,
+  Title
 } from '@patternfly/react-core';
-
+import { CubesIcon } from '@patternfly/react-icons';
 import DataListToolbar from '../../../components/DataListToolbar';
 import OrganizationListItem from '../components/OrganizationListItem';
 import Pagination from '../../../components/Pagination';
@@ -157,7 +161,7 @@ class OrganizationsList extends Component {
 
       const pageCount = Math.ceil(count / page_size);
 
-      this.setState({
+      const stateToUpdate = {
         count,
         page,
         pageCount,
@@ -166,7 +170,17 @@ class OrganizationsList extends Component {
         sortedColumnKey,
         results,
         selected: [],
-      });
+      };
+
+      // This is in place to track whether or not the initial request
+      // return any results.  If it did not, we show the empty state.
+      // This will become problematic once search is in play because
+      // the first load may have query params (think bookmarked search)
+      if (typeof noInitialResults === 'undefined') {
+        stateToUpdate.noInitialResults = results.length === 0;
+      }
+
+      this.setState(stateToUpdate);
       this.updateUrl(queryParams);
     } catch (err) {
       this.setState({ error: true });
@@ -183,6 +197,7 @@ class OrganizationsList extends Component {
       count,
       error,
       loading,
+      noInitialResults,
       page,
       pageCount,
       page_size,
@@ -194,9 +209,26 @@ class OrganizationsList extends Component {
     const { match } = this.props;
 
     return (
-      <Fragment>
       <PageSection variant={medium}>
         <Card>
+          {noInitialResults && (
+            <EmptyState>
+              <EmptyStateIcon icon={CubesIcon} />
+              <Title size="lg">
+                <Trans>No Organizations Found</Trans>
+              </Title>
+              <EmptyStateBody>
+                <Trans>Please add an organization to populate this list</Trans>
+              </EmptyStateBody>
+            </EmptyState>
+          )}
+          {(
+            typeof noInitialResults !== 'undefined'
+            && !noInitialResults
+            && !loading
+            && !error
+          ) && (
+            <Fragment>
               <DataListToolbar
                 addUrl={`${match.url}/add`}
                 isAllSelected={selected.length === results.length}
@@ -237,9 +269,10 @@ class OrganizationsList extends Component {
               />
               { loading ? <div>loading...</div> : '' }
               { error ? <div>error</div> : '' }
+            </Fragment>
+          )}
         </Card>
       </PageSection>
-      </Fragment>
     );
   }
 }