Merge pull request #99 from jlmitch5/addOrgEmptyListAndUpdateCSS

Add org empty list and update css

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-c-page__sidebar{
-  --pf-l-page__sidebar--md--Width: 255px;
+  --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;
+}

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;

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 (
-      <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
+            <Fragment>
-            />
+              <DataListToolbar
-            <I18n>
+                addUrl={`${match.url}/add`}
-              {({ i18n }) => (
+                isAllSelected={selected.length === results.length}
-                <ul className="pf-c-data-list" aria-label={i18n._(t`Organizations List`)}>
+                sortedColumnKey={sortedColumnKey}
-                  { results.map(o => (
+                sortOrder={sortOrder}
-                    <OrganizationListItem
+                columns={this.columns}
-                      key={o.id}
+                onSearch={this.onSearch}
-                      itemId={o.id}
+                onSort={this.onSort}
-                      name={o.name}
+                onSelectAll={this.onSelectAll}
-                      detailUrl={`${match.url}/${o.id}`}
+                showDelete
-                      userCount={o.summary_fields.related_field_counts.users}
+                showSelectAll
-                      teamCount={o.summary_fields.related_field_counts.teams}
+              />
-                      isSelected={selected.includes(o.id)}
+              <I18n>
-                      onSelect={() => this.onSelect(o.id)}
+                {({ i18n }) => (
-                    />
+                  <ul className="pf-c-data-list" aria-label={i18n._(t`Organizations List`)}>
-                  ))}
+                    { results.map(o => (
-                </ul>
+                      <OrganizationListItem
-              )}
+                        key={o.id}
-            </I18n>
+                        itemId={o.id}
-            <Pagination
+                        name={o.name}
-              count={count}
+                        detailUrl={`${match.url}/${o.id}`}
-              page={page}
+                        userCount={o.summary_fields.related_field_counts.users}
-              pageCount={pageCount}
+                        teamCount={o.summary_fields.related_field_counts.teams}
-              page_size={page_size}
+                        isSelected={selected.includes(o.id)}
-              pageSizeOptions={this.pageSizeOptions}
+                        onSelect={() => this.onSelect(o.id)}
-              onSetPage={this.onSetPage}
+                      />
-            />
+                    ))}
-            { loading ? <div>loading...</div> : '' }
+                  </ul>
-            { error ? <div>error</div> : '' }
+                )}
-          </Card>
+              </I18n>
-        </PageSection>
+              <Pagination
-      </Fragment>
+                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>
     );
   }
 }