diff --git a/src/pages/Organizations/screens/OrganizationsList.jsx b/src/pages/Organizations/screens/OrganizationsList.jsx index 57c6c742cb..20a662c6df 100644 --- a/src/pages/Organizations/screens/OrganizationsList.jsx +++ b/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 ( - - - - - - {({ i18n }) => ( -
    - { results.map(o => ( - this.onSelect(o.id)} - /> - ))} -
- )} -
- - { loading ?
loading...
: '' } - { error ?
error
: '' } -
-
-
+ + + {noInitialResults && ( + + + + <Trans>No Organizations Found</Trans> + + + Please add an organization to populate this list + + + )} + {( + typeof noInitialResults !== 'undefined' + && !noInitialResults + && !loading + && !error + ) && ( + + + + {({ i18n }) => ( +
    + { results.map(o => ( + this.onSelect(o.id)} + /> + ))} +
+ )} +
+ + { loading ?
loading...
: '' } + { error ?
error
: '' } +
+ )} +
+
); } }