diff --git a/src/app.scss b/src/app.scss
index 8997ddb56c..555c87ecbc 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -2,26 +2,35 @@
// masthead overrides
//
-.pf-l-page__header-brand {
+.pf-c-page__header-brand {
max-width: 255px;
}
-.pf-l-page__header-brand-link {
+.pf-c-page__header-brand-link {
max-width: 85px;
}
-.pf-l-page__header-brand-link img {
+.pf-c-page__header-brand-link img {
transform: scale(1.1, 1.1);
position: relative;
- top: -4px;
+}
+
+.pf-c-page__header-tools .pf-l-toolbar__item {
+ margin-left: 20px;
+}
+
+.pf-c-page__header-tools .pf-c-dropdown__toggle:before {
+ --pf-c-dropdown__toggle--BorderBottomColor: var(--pf-global--BackgroundColor--light-100);
+ --pf-c-dropdown__toggle--hover--BorderBottomColor: var(--pf-global--BackgroundColor--light-100);
+ --pf-c-dropdown__toggle--expanded--BorderBottomColor: var(--pf-global--BackgroundColor--light-100);
}
//
// sidebar overrides
//
-.pf-l-page__sidebar{
- --pf-l-page__sidebar--md--Width: 255px;
+.pf-c-page__sidebar{
+ --pf-c-page__sidebar--md--Width: 255px;
.pf-c-nav {
overflow-y: auto;
@@ -114,6 +123,7 @@
//
// about modal overrides
//
+
.pf-c-backdrop .pf-c-about-modal-box {
--pf-c-about-modal-box--MaxHeight: 40rem;
--pf-c-about-modal-box--MaxWidth: 63rem;
@@ -127,61 +137,25 @@
}
}
-.awx-lookup {
- min-height: 36px;
-}
.pf-c-input-group__text {
&:hover {
cursor: pointer;
}
}
-.awx-c-tag--pill {
- color: white;
- background-color: rgb(0, 123, 186);
- border-radius: 3px;
- margin: 1px 2px;
- padding: 0 10px;
- display: inline-block;
-}
+
//
-// layout styles
+// data list overrides
//
-.at-align-right {
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
-}
-//
-// list styles
-//
-.awx-c-list {
- border-top: 1px solid #d7d7d7;
- border-bottom: 1px solid #d7d7d7;
-}
-.at-c-listCardBody {
- --pf-c-card__footer--PaddingX: 0;
- --pf-c-card__footer--PaddingY: 0;
- --pf-c-card__body--PaddingX: 0;
- --pf-c-card__body--PaddingY: 0;
-}
+
.pf-c-data-list__item {
--pf-c-data-list__item--PaddingLeft: 20px;
--pf-c-data-list__item--PaddingRight: 20px;
}
+
//
// pf modal overrides
//
-.awx-c-modal {
- width: 550px;
- margin: 0;
-}
-.awx-c-icon--remove {
- padding-left: 10px;
- &:hover {
- cursor: pointer;
- }
-}
.pf-c-modal-box__footer {
--pf-c-modal-box__footer--PaddingTop: 0;
--pf-c-modal-box__footer--PaddingBottom: 0;
@@ -198,3 +172,72 @@
--pf-c-modal-box__body--PaddingLeft: 20px;
--pf-c-modal-box__body--PaddingRight: 20px;
}
+
+//
+// pf card overrides
+//
+
+.pf-c-card {
+ display: flex;
+}
+
+.pf-c-card__header {
+ padding: 0;
+}
+
+//
+// pf empty state overrides
+//
+
+.pf-c-empty-state {
+ align-self: center;
+}
+
+//
+// assorted custom component styles
+// note that these should be given a consistent prefix
+// and bem style, as well as moved into component-based scss files
+//
+
+.awx-lookup {
+ min-height: 36px;
+}
+
+.awx-c-modal {
+ width: 550px;
+ margin: 0;
+}
+
+.awx-c-icon--remove {
+ padding-left: 10px;
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+.at-align-right {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+}
+
+.awx-c-list {
+ border-top: 1px solid #d7d7d7;
+ border-bottom: 1px solid #d7d7d7;
+}
+
+.awx-c-tag--pill {
+ color: var(--pf-global--BackgroundColor--light-100);
+ background-color: rgb(0, 123, 186);
+ border-radius: 3px;
+ margin: 1px 2px;
+ padding: 0 10px;
+ display: inline-block;
+}
+
+.at-c-listCardBody {
+ --pf-c-card__footer--PaddingX: 0;
+ --pf-c-card__footer--PaddingY: 0;
+ --pf-c-card__body--PaddingX: 0;
+ --pf-c-card__body--PaddingY: 0;
+}
\ No newline at end of file
diff --git a/src/components/Tabs/tabs.scss b/src/components/Tabs/tabs.scss
index 15c557dea8..7bdad3a81f 100644
--- a/src/components/Tabs/tabs.scss
+++ b/src/components/Tabs/tabs.scss
@@ -35,6 +35,10 @@
}
}
+ .pf-c-tabs__item:first-child .pf-c-tabs__button:before {
+ border-left: 0;
+ }
+
.pf-c-tabs__item:not(.pf-m-current):hover
.pf-c-tabs__button::after {
border-top: none;
diff --git a/src/pages/Organizations/screens/OrganizationsList.jsx b/src/pages/Organizations/screens/OrganizationsList.jsx
index 57c6c742cb..d19078b575 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,64 @@ 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
+
+
+ ) || (
+
+
+
+ {({ i18n }) => (
+
+ { results.map(o => (
+ this.onSelect(o.id)}
+ />
+ ))}
+
+ )}
+
+
+ { loading ? loading...
: '' }
+ { error ? error
: '' }
+
+ )}
+
+
);
}
}