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 && (
+
+
+
+ No Organizations Found
+
+
+ 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
: '' }
+
+ )}
+
+
);
}
}