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,52 +209,70 @@ class OrganizationsList extends Component {
     const { match } = this.props;
 
     return (
-      <Fragment>
+      <PageSection variant={medium}>
-        <PageSection variant={medium}>
+        <Card>
-          <Card>
+          {noInitialResults && (
-            <DataListToolbar
+            <EmptyState>
-              addUrl={`${match.url}/add`}
+              <EmptyStateIcon icon={CubesIcon} />
-              isAllSelected={selected.length === results.length}
+              <Title size="lg">
-              sortedColumnKey={sortedColumnKey}
+                <Trans>No Organizations Found</Trans>
-              sortOrder={sortOrder}
+              </Title>
-              columns={this.columns}
+              <EmptyStateBody>
-              onSearch={this.onSearch}
+                <Trans>Please add an organization to populate this list</Trans>
-              onSort={this.onSort}
+              </EmptyStateBody>
-              onSelectAll={this.onSelectAll}
+            </EmptyState>
-              showDelete
+          )}
-              showSelectAll
+          {(
-            />
+            typeof noInitialResults !== 'undefined'
-            <I18n>
+            && !noInitialResults
-              {({ i18n }) => (
+            && !loading
-                <ul className="pf-c-data-list" aria-label={i18n._(t`Organizations List`)}>
+            && !error
-                  { results.map(o => (
+          ) && (
-                    <OrganizationListItem
+            <Fragment>
-                      key={o.id}
+              <DataListToolbar
-                      itemId={o.id}
+                addUrl={`${match.url}/add`}
-                      name={o.name}
+                isAllSelected={selected.length === results.length}
-                      detailUrl={`${match.url}/${o.id}`}
+                sortedColumnKey={sortedColumnKey}
-                      userCount={o.summary_fields.related_field_counts.users}
+                sortOrder={sortOrder}
-                      teamCount={o.summary_fields.related_field_counts.teams}
+                columns={this.columns}
-                      isSelected={selected.includes(o.id)}
+                onSearch={this.onSearch}
-                      onSelect={() => this.onSelect(o.id)}
+                onSort={this.onSort}
-                    />
+                onSelectAll={this.onSelectAll}
-                  ))}
+                showDelete
-                </ul>
+                showSelectAll
-              )}
+              />
-            </I18n>
+              <I18n>
-            <Pagination
+                {({ i18n }) => (
-              count={count}
+                  <ul className="pf-c-data-list" aria-label={i18n._(t`Organizations List`)}>
-              page={page}
+                    { results.map(o => (
-              pageCount={pageCount}
+                      <OrganizationListItem
-              page_size={page_size}
+                        key={o.id}
-              pageSizeOptions={this.pageSizeOptions}
+                        itemId={o.id}
-              onSetPage={this.onSetPage}
+                        name={o.name}
-            />
+                        detailUrl={`${match.url}/${o.id}`}
-            { loading ? <div>loading...</div> : '' }
+                        userCount={o.summary_fields.related_field_counts.users}
-            { error ? <div>error</div> : '' }
+                        teamCount={o.summary_fields.related_field_counts.teams}
-          </Card>
+                        isSelected={selected.includes(o.id)}
-        </PageSection>
+                        onSelect={() => this.onSelect(o.id)}
-      </Fragment>
+                      />
+                    ))}
+                  </ul>
+                )}
+              </I18n>
+              <Pagination
+                count={count}
+                page={page}
+                pageCount={pageCount}
+                page_size={page_size}
+                pageSizeOptions={this.pageSizeOptions}
+                onSetPage={this.onSetPage}
+              />
+              { loading ? <div>loading...</div> : '' }
+              { error ? <div>error</div> : '' }
+            </Fragment>
+          )}
+        </Card>
+      </PageSection>
     );
   }
 }