From 04bad1aeef25e268f35fb3ba3a19c5dbc5891cd9 Mon Sep 17 00:00:00 2001
From: CD Cabrera <ccabrera@redhat.com>
Date: Wed, 13 Jul 2022 15:08:06 -0400
Subject: [PATCH] refactor(creds,sources,scans): discovery-149 emptyState grid
 (#121)

* credentials, sources, scansEmptyState, remove grid
---
 .../credentialsEmptyState.test.js.snap        | 194 +++++++++---------
 .../credentials/credentialsEmptyState.js      |  56 +++--
 .../scansEmptyState.test.js.snap              | 172 +++++++---------
 src/components/scans/scansEmptyState.js       |  25 +--
 .../__snapshots__/sources.test.js.snap        |  86 ++++----
 .../sourcesEmptyState.test.js.snap            |  86 ++++----
 src/components/sources/sourcesEmptyState.js   |  21 +-
 7 files changed, 293 insertions(+), 347 deletions(-)

diff --git a/src/components/credentials/__tests__/__snapshots__/credentialsEmptyState.test.js.snap b/src/components/credentials/__tests__/__snapshots__/credentialsEmptyState.test.js.snap
index ee8663e2..736ef8a7 100644
--- a/src/components/credentials/__tests__/__snapshots__/credentialsEmptyState.test.js.snap
+++ b/src/components/credentials/__tests__/__snapshots__/credentialsEmptyState.test.js.snap
@@ -2,123 +2,115 @@
 
 exports[`CredentialsEmptyState Component should render a basic component 1`] = `
 <div
-  class="container-fluid"
+  class="pf-c-empty-state pf-m-lg quipucords-empty-state"
 >
   <div
-    class="row"
+    class="pf-c-empty-state__content"
   >
+    <svg
+      aria-hidden="true"
+      class="pf-c-empty-state__icon"
+      fill="currentColor"
+      height="1em"
+      role="img"
+      style="vertical-align: -0.125em;"
+      viewBox="0 0 1024 1024"
+      width="1em"
+    >
+      <path
+        d="M576,303 C576,294.715729 569.284271,288 561,288 L463,288 C454.715729,288 448,294.715729 448,303 L448,448 L303,448 C294.715729,448 288,454.715729 288,463 L288,561 C288,569.284271 294.715729,576 303,576 L448,576 L448,720.9 C447.983373,729.207373 454.6927,735.961429 463,736 L561,736 C569.3073,735.961429 576.016627,729.207373 576,720.9 L576,576 L721,576 C724.969024,576.026638 728.784638,574.468589 731.600595,571.671405 C734.416553,568.87422 736.000031,565.069113 736.000031,561.1 L736.000031,463.1 C736.016627,454.792627 729.3073,448.038571 721,448 L576,448 L576,303 Z M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 Z M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0 Z"
+      />
+    </svg>
+    <h1
+      class="pf-c-title pf-m-2xl"
+      data-ouia-component-id="OUIA-Generated-Title-1"
+      data-ouia-component-type="PF4/Title"
+      data-ouia-safe="true"
+    >
+      t(view.empty-state, {"context":"title","name":"Quipucords"})
+    </h1>
     <div
-      class="pf-c-empty-state pf-m-lg quipucords-empty-state"
+      class="pf-c-empty-state__body"
+    >
+      t(view.empty-state, {"context":"description_credentials","name":"The Quipucords tool"})
+    </div>
+    <div
+      class="pf-c-empty-state__primary"
     >
       <div
-        class="pf-c-empty-state__content"
+        class="dropdown btn-group btn-group-lg btn-group-primary"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-c-empty-state__icon"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style="vertical-align: -0.125em;"
-          viewBox="0 0 1024 1024"
-          width="1em"
+        <button
+          aria-expanded="false"
+          aria-haspopup="true"
+          class="dropdown-toggle btn btn-lg btn-primary"
+          id="createCredentialButton"
+          role="button"
+          type="button"
         >
-          <path
-            d="M576,303 C576,294.715729 569.284271,288 561,288 L463,288 C454.715729,288 448,294.715729 448,303 L448,448 L303,448 C294.715729,448 288,454.715729 288,463 L288,561 C288,569.284271 294.715729,576 303,576 L448,576 L448,720.9 C447.983373,729.207373 454.6927,735.961429 463,736 L561,736 C569.3073,735.961429 576.016627,729.207373 576,720.9 L576,576 L721,576 C724.969024,576.026638 728.784638,574.468589 731.600595,571.671405 C734.416553,568.87422 736.000031,565.069113 736.000031,561.1 L736.000031,463.1 C736.016627,454.792627 729.3073,448.038571 721,448 L576,448 L576,303 Z M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 Z M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0 Z"
+          Add Credential 
+          <span
+            class="caret"
           />
-        </svg>
-        <h1
-          class="pf-c-title pf-m-2xl"
-          data-ouia-component-id="OUIA-Generated-Title-1"
-          data-ouia-component-type="PF4/Title"
-          data-ouia-safe="true"
-        >
-          t(view.empty-state, {"context":"title","name":"Quipucords"})
-        </h1>
-        <div
-          class="pf-c-empty-state__body"
-        >
-          t(view.empty-state, {"context":"description_credentials","name":"The Quipucords tool"})
-        </div>
-        <div
-          class="pf-c-empty-state__primary"
+        </button>
+        <ul
+          aria-labelledby="createCredentialButton"
+          class="dropdown-menu dropdown-menu-right"
+          role="menu"
         >
-          <div
-            class="dropdown btn-group btn-group-lg btn-group-primary"
+          <li
+            class=""
+            role="presentation"
           >
-            <button
-              aria-expanded="false"
-              aria-haspopup="true"
-              class="dropdown-toggle btn btn-lg btn-primary"
-              id="createCredentialButton"
-              role="button"
-              type="button"
+            <a
+              href="#"
+              role="menuitem"
+              tabindex="-1"
             >
-              Add Credential 
-              <span
-                class="caret"
-              />
-            </button>
-            <ul
-              aria-labelledby="createCredentialButton"
-              class="dropdown-menu dropdown-menu-right"
-              role="menu"
+              Network Credential
+            </a>
+          </li>
+          <li
+            class=""
+            role="presentation"
+          >
+            <a
+              href="#"
+              role="menuitem"
+              tabindex="-1"
             >
-              <li
-                class=""
-                role="presentation"
-              >
-                <a
-                  href="#"
-                  role="menuitem"
-                  tabindex="-1"
-                >
-                  Network Credential
-                </a>
-              </li>
-              <li
-                class=""
-                role="presentation"
-              >
-                <a
-                  href="#"
-                  role="menuitem"
-                  tabindex="-1"
-                >
-                  Satellite Credential
-                </a>
-              </li>
-              <li
-                class=""
-                role="presentation"
-              >
-                <a
-                  href="#"
-                  role="menuitem"
-                  tabindex="-1"
-                >
-                  VCenter Credential
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
-        <div
-          class="pf-c-empty-state__secondary"
-        >
-          <button
-            aria-disabled="false"
-            class="pf-c-button pf-m-link"
-            data-ouia-component-id="OUIA-Generated-Button-link-1"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
+              Satellite Credential
+            </a>
+          </li>
+          <li
+            class=""
+            role="presentation"
           >
-            t(view.empty-state, {"context":"label_source"})
-          </button>
-        </div>
+            <a
+              href="#"
+              role="menuitem"
+              tabindex="-1"
+            >
+              VCenter Credential
+            </a>
+          </li>
+        </ul>
       </div>
     </div>
+    <div
+      class="pf-c-empty-state__secondary"
+    >
+      <button
+        aria-disabled="false"
+        class="pf-c-button pf-m-link"
+        data-ouia-component-id="OUIA-Generated-Button-link-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
+      >
+        t(view.empty-state, {"context":"label_source"})
+      </button>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/credentials/credentialsEmptyState.js b/src/components/credentials/credentialsEmptyState.js
index 34cc0647..33f2755f 100644
--- a/src/components/credentials/credentialsEmptyState.js
+++ b/src/components/credentials/credentialsEmptyState.js
@@ -12,40 +12,36 @@ import {
   Title
 } from '@patternfly/react-core';
 import { AddCircleOIcon } from '@patternfly/react-icons';
-import { DropdownButton, Grid, MenuItem, Row } from 'patternfly-react';
+import { DropdownButton, MenuItem } from 'patternfly-react';
 import helpers from '../../common/helpers';
 import { translate } from '../i18n/i18n';
 
 const CredentialsEmptyState = ({ onAddCredential, onAddSource, t, uiSentenceStartName, uiShortName }) => (
-  <Grid fluid>
-    <Row>
-      <EmptyState className="quipucords-empty-state" variant={EmptyStateVariant.large}>
-        <EmptyStateIcon icon={AddCircleOIcon} />
-        <Title headingLevel="h1">{t('view.empty-state', { context: 'title', name: uiShortName })}</Title>
-        <EmptyStateBody>
-          {t('view.empty-state', { context: ['description', 'credentials'], name: uiSentenceStartName })}
-        </EmptyStateBody>
-        <EmptyStatePrimary>
-          <DropdownButton bsStyle="primary" bsSize="large" title="Add Credential" pullRight id="createCredentialButton">
-            <MenuItem eventKey="1" onClick={() => onAddCredential('network')}>
-              Network Credential
-            </MenuItem>
-            <MenuItem eventKey="2" onClick={() => onAddCredential('satellite')}>
-              Satellite Credential
-            </MenuItem>
-            <MenuItem eventKey="2" onClick={() => onAddCredential('vcenter')}>
-              VCenter Credential
-            </MenuItem>
-          </DropdownButton>
-        </EmptyStatePrimary>
-        <EmptyStateSecondaryActions>
-          <Button variant={ButtonVariant.link} onClick={onAddSource}>
-            {t('view.empty-state', { context: ['label', 'source'] })}
-          </Button>
-        </EmptyStateSecondaryActions>
-      </EmptyState>
-    </Row>
-  </Grid>
+  <EmptyState className="quipucords-empty-state" variant={EmptyStateVariant.large}>
+    <EmptyStateIcon icon={AddCircleOIcon} />
+    <Title headingLevel="h1">{t('view.empty-state', { context: 'title', name: uiShortName })}</Title>
+    <EmptyStateBody>
+      {t('view.empty-state', { context: ['description', 'credentials'], name: uiSentenceStartName })}
+    </EmptyStateBody>
+    <EmptyStatePrimary>
+      <DropdownButton bsStyle="primary" bsSize="large" title="Add Credential" pullRight id="createCredentialButton">
+        <MenuItem eventKey="1" onClick={() => onAddCredential('network')}>
+          Network Credential
+        </MenuItem>
+        <MenuItem eventKey="2" onClick={() => onAddCredential('satellite')}>
+          Satellite Credential
+        </MenuItem>
+        <MenuItem eventKey="2" onClick={() => onAddCredential('vcenter')}>
+          VCenter Credential
+        </MenuItem>
+      </DropdownButton>
+    </EmptyStatePrimary>
+    <EmptyStateSecondaryActions>
+      <Button variant={ButtonVariant.link} onClick={onAddSource}>
+        {t('view.empty-state', { context: ['label', 'source'] })}
+      </Button>
+    </EmptyStateSecondaryActions>
+  </EmptyState>
 );
 
 CredentialsEmptyState.propTypes = {
diff --git a/src/components/scans/__tests__/__snapshots__/scansEmptyState.test.js.snap b/src/components/scans/__tests__/__snapshots__/scansEmptyState.test.js.snap
index 8371e764..a200fb39 100644
--- a/src/components/scans/__tests__/__snapshots__/scansEmptyState.test.js.snap
+++ b/src/components/scans/__tests__/__snapshots__/scansEmptyState.test.js.snap
@@ -8,59 +8,51 @@ exports[`ScansEmptyState Component should render a connected component: connecte
 
 exports[`ScansEmptyState Component should render a non-connected component: non-connected do not exist 1`] = `
 <div
-  class="container-fluid"
+  class="pf-c-empty-state pf-m-lg quipucords-empty-state"
 >
   <div
-    class="row"
+    class="pf-c-empty-state__content"
   >
+    <svg
+      aria-hidden="true"
+      class="pf-c-empty-state__icon"
+      fill="currentColor"
+      height="1em"
+      role="img"
+      style="vertical-align: -0.125em;"
+      viewBox="0 0 1024 1024"
+      width="1em"
+    >
+      <path
+        d="M576,303 C576,294.715729 569.284271,288 561,288 L463,288 C454.715729,288 448,294.715729 448,303 L448,448 L303,448 C294.715729,448 288,454.715729 288,463 L288,561 C288,569.284271 294.715729,576 303,576 L448,576 L448,720.9 C447.983373,729.207373 454.6927,735.961429 463,736 L561,736 C569.3073,735.961429 576.016627,729.207373 576,720.9 L576,576 L721,576 C724.969024,576.026638 728.784638,574.468589 731.600595,571.671405 C734.416553,568.87422 736.000031,565.069113 736.000031,561.1 L736.000031,463.1 C736.016627,454.792627 729.3073,448.038571 721,448 L576,448 L576,303 Z M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 Z M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0 Z"
+      />
+    </svg>
+    <h1
+      class="pf-c-title pf-m-2xl"
+      data-ouia-component-id="OUIA-Generated-Title-2"
+      data-ouia-component-type="PF4/Title"
+      data-ouia-safe="true"
+    >
+      t(view.empty-state, {"context":"title","name":"Quipucords"})
+    </h1>
+    <div
+      class="pf-c-empty-state__body"
+    >
+      t(view.empty-state, {"context":"description_sources"})
+    </div>
     <div
-      class="pf-c-empty-state pf-m-lg quipucords-empty-state"
+      class="pf-c-empty-state__primary"
     >
-      <div
-        class="pf-c-empty-state__content"
+      <button
+        aria-disabled="false"
+        class="pf-c-button pf-m-primary"
+        data-ouia-component-id="OUIA-Generated-Button-primary-2"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-c-empty-state__icon"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style="vertical-align: -0.125em;"
-          viewBox="0 0 1024 1024"
-          width="1em"
-        >
-          <path
-            d="M576,303 C576,294.715729 569.284271,288 561,288 L463,288 C454.715729,288 448,294.715729 448,303 L448,448 L303,448 C294.715729,448 288,454.715729 288,463 L288,561 C288,569.284271 294.715729,576 303,576 L448,576 L448,720.9 C447.983373,729.207373 454.6927,735.961429 463,736 L561,736 C569.3073,735.961429 576.016627,729.207373 576,720.9 L576,576 L721,576 C724.969024,576.026638 728.784638,574.468589 731.600595,571.671405 C734.416553,568.87422 736.000031,565.069113 736.000031,561.1 L736.000031,463.1 C736.016627,454.792627 729.3073,448.038571 721,448 L576,448 L576,303 Z M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 Z M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0 Z"
-          />
-        </svg>
-        <h1
-          class="pf-c-title pf-m-2xl"
-          data-ouia-component-id="OUIA-Generated-Title-2"
-          data-ouia-component-type="PF4/Title"
-          data-ouia-safe="true"
-        >
-          t(view.empty-state, {"context":"title","name":"Quipucords"})
-        </h1>
-        <div
-          class="pf-c-empty-state__body"
-        >
-          t(view.empty-state, {"context":"description_sources"})
-        </div>
-        <div
-          class="pf-c-empty-state__primary"
-        >
-          <button
-            aria-disabled="false"
-            class="pf-c-button pf-m-primary"
-            data-ouia-component-id="OUIA-Generated-Button-primary-2"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            t(view.empty-state, {"context":"label_source"})
-          </button>
-        </div>
-      </div>
+        t(view.empty-state, {"context":"label_source"})
+      </button>
     </div>
   </div>
 </div>
@@ -68,59 +60,51 @@ exports[`ScansEmptyState Component should render a non-connected component: non-
 
 exports[`ScansEmptyState Component should render a non-connected component: non-connected exist 1`] = `
 <div
-  class="container-fluid"
+  class="pf-c-empty-state pf-m-lg quipucords-empty-state"
 >
   <div
-    class="row"
+    class="pf-c-empty-state__content"
   >
+    <svg
+      aria-hidden="true"
+      class="pf-c-empty-state__icon"
+      fill="currentColor"
+      height="1em"
+      role="img"
+      style="vertical-align: -0.125em;"
+      viewBox="0 0 1024 1024"
+      width="1em"
+    >
+      <path
+        d="M576,303 C576,294.715729 569.284271,288 561,288 L463,288 C454.715729,288 448,294.715729 448,303 L448,448 L303,448 C294.715729,448 288,454.715729 288,463 L288,561 C288,569.284271 294.715729,576 303,576 L448,576 L448,720.9 C447.983373,729.207373 454.6927,735.961429 463,736 L561,736 C569.3073,735.961429 576.016627,729.207373 576,720.9 L576,576 L721,576 C724.969024,576.026638 728.784638,574.468589 731.600595,571.671405 C734.416553,568.87422 736.000031,565.069113 736.000031,561.1 L736.000031,463.1 C736.016627,454.792627 729.3073,448.038571 721,448 L576,448 L576,303 Z M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 Z M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0 Z"
+      />
+    </svg>
+    <h1
+      class="pf-c-title pf-m-2xl"
+      data-ouia-component-id="OUIA-Generated-Title-1"
+      data-ouia-component-type="PF4/Title"
+      data-ouia-safe="true"
+    >
+      t(view.empty-state, {"context":"title_scans"})
+    </h1>
+    <div
+      class="pf-c-empty-state__body"
+    >
+      t(view.empty-state, {"context":"description_scans"})
+    </div>
     <div
-      class="pf-c-empty-state pf-m-lg quipucords-empty-state"
+      class="pf-c-empty-state__primary"
     >
-      <div
-        class="pf-c-empty-state__content"
+      <button
+        aria-disabled="false"
+        class="pf-c-button pf-m-primary"
+        data-ouia-component-id="OUIA-Generated-Button-primary-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-c-empty-state__icon"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style="vertical-align: -0.125em;"
-          viewBox="0 0 1024 1024"
-          width="1em"
-        >
-          <path
-            d="M576,303 C576,294.715729 569.284271,288 561,288 L463,288 C454.715729,288 448,294.715729 448,303 L448,448 L303,448 C294.715729,448 288,454.715729 288,463 L288,561 C288,569.284271 294.715729,576 303,576 L448,576 L448,720.9 C447.983373,729.207373 454.6927,735.961429 463,736 L561,736 C569.3073,735.961429 576.016627,729.207373 576,720.9 L576,576 L721,576 C724.969024,576.026638 728.784638,574.468589 731.600595,571.671405 C734.416553,568.87422 736.000031,565.069113 736.000031,561.1 L736.000031,463.1 C736.016627,454.792627 729.3073,448.038571 721,448 L576,448 L576,303 Z M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 Z M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0 Z"
-          />
-        </svg>
-        <h1
-          class="pf-c-title pf-m-2xl"
-          data-ouia-component-id="OUIA-Generated-Title-1"
-          data-ouia-component-type="PF4/Title"
-          data-ouia-safe="true"
-        >
-          t(view.empty-state, {"context":"title_scans"})
-        </h1>
-        <div
-          class="pf-c-empty-state__body"
-        >
-          t(view.empty-state, {"context":"description_scans"})
-        </div>
-        <div
-          class="pf-c-empty-state__primary"
-        >
-          <button
-            aria-disabled="false"
-            class="pf-c-button pf-m-primary"
-            data-ouia-component-id="OUIA-Generated-Button-primary-1"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            t(view.empty-state, {"context":"label_source-navigate"})
-          </button>
-        </div>
-      </div>
+        t(view.empty-state, {"context":"label_source-navigate"})
+      </button>
     </div>
   </div>
 </div>
diff --git a/src/components/scans/scansEmptyState.js b/src/components/scans/scansEmptyState.js
index 7e13f546..51eec323 100644
--- a/src/components/scans/scansEmptyState.js
+++ b/src/components/scans/scansEmptyState.js
@@ -10,7 +10,6 @@ import {
   Title
 } from '@patternfly/react-core';
 import { AddCircleOIcon } from '@patternfly/react-icons';
-import { Grid, Row } from 'patternfly-react';
 import SourcesEmptyState from '../sources/sourcesEmptyState';
 import helpers from '../../common/helpers';
 import { connectRouter, reduxActions, reduxSelectors, reduxTypes, store } from '../../redux';
@@ -43,20 +42,16 @@ class ScansEmptyState extends React.Component {
 
     if (sourcesExist) {
       return (
-        <Grid fluid>
-          <Row>
-            <EmptyState className="quipucords-empty-state" variant={EmptyStateVariant.large}>
-              <EmptyStateIcon icon={AddCircleOIcon} />
-              <Title headingLevel="h1">{t('view.empty-state', { context: ['title', 'scans'] })}</Title>
-              <EmptyStateBody>{t('view.empty-state', { context: ['description', 'scans'] })}</EmptyStateBody>
-              <EmptyStatePrimary>
-                <Button onClick={this.onAddSource}>
-                  {t('view.empty-state', { context: ['label', 'source-navigate'] })}
-                </Button>
-              </EmptyStatePrimary>
-            </EmptyState>
-          </Row>
-        </Grid>
+        <EmptyState className="quipucords-empty-state" variant={EmptyStateVariant.large}>
+          <EmptyStateIcon icon={AddCircleOIcon} />
+          <Title headingLevel="h1">{t('view.empty-state', { context: ['title', 'scans'] })}</Title>
+          <EmptyStateBody>{t('view.empty-state', { context: ['description', 'scans'] })}</EmptyStateBody>
+          <EmptyStatePrimary>
+            <Button onClick={this.onAddSource}>
+              {t('view.empty-state', { context: ['label', 'source-navigate'] })}
+            </Button>
+          </EmptyStatePrimary>
+        </EmptyState>
       );
     }
 
diff --git a/src/components/sources/__tests__/__snapshots__/sources.test.js.snap b/src/components/sources/__tests__/__snapshots__/sources.test.js.snap
index 897aad12..b053bce0 100644
--- a/src/components/sources/__tests__/__snapshots__/sources.test.js.snap
+++ b/src/components/sources/__tests__/__snapshots__/sources.test.js.snap
@@ -96,59 +96,51 @@ exports[`Sources Component should render a non-connected component pending: pend
 
 exports[`Sources Component should render a non-connected component with empty state: empty state 1`] = `
 <div
-  class="container-fluid"
+  class="pf-c-empty-state pf-m-lg quipucords-empty-state"
 >
   <div
-    class="row"
+    class="pf-c-empty-state__content"
   >
+    <svg
+      aria-hidden="true"
+      class="pf-c-empty-state__icon"
+      fill="currentColor"
+      height="1em"
+      role="img"
+      style="vertical-align: -0.125em;"
+      viewBox="0 0 1024 1024"
+      width="1em"
+    >
+      <path
+        d="M576,303 C576,294.715729 569.284271,288 561,288 L463,288 C454.715729,288 448,294.715729 448,303 L448,448 L303,448 C294.715729,448 288,454.715729 288,463 L288,561 C288,569.284271 294.715729,576 303,576 L448,576 L448,720.9 C447.983373,729.207373 454.6927,735.961429 463,736 L561,736 C569.3073,735.961429 576.016627,729.207373 576,720.9 L576,576 L721,576 C724.969024,576.026638 728.784638,574.468589 731.600595,571.671405 C734.416553,568.87422 736.000031,565.069113 736.000031,561.1 L736.000031,463.1 C736.016627,454.792627 729.3073,448.038571 721,448 L576,448 L576,303 Z M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 Z M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0 Z"
+      />
+    </svg>
+    <h1
+      class="pf-c-title pf-m-2xl"
+      data-ouia-component-id="OUIA-Generated-Title-1"
+      data-ouia-component-type="PF4/Title"
+      data-ouia-safe="true"
+    >
+      t(view.empty-state, {"context":"title","name":"Quipucords"})
+    </h1>
     <div
-      class="pf-c-empty-state pf-m-lg quipucords-empty-state"
+      class="pf-c-empty-state__body"
     >
-      <div
-        class="pf-c-empty-state__content"
+      t(view.empty-state, {"context":"description_sources"})
+    </div>
+    <div
+      class="pf-c-empty-state__primary"
+    >
+      <button
+        aria-disabled="false"
+        class="pf-c-button pf-m-primary"
+        data-ouia-component-id="OUIA-Generated-Button-primary-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-c-empty-state__icon"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style="vertical-align: -0.125em;"
-          viewBox="0 0 1024 1024"
-          width="1em"
-        >
-          <path
-            d="M576,303 C576,294.715729 569.284271,288 561,288 L463,288 C454.715729,288 448,294.715729 448,303 L448,448 L303,448 C294.715729,448 288,454.715729 288,463 L288,561 C288,569.284271 294.715729,576 303,576 L448,576 L448,720.9 C447.983373,729.207373 454.6927,735.961429 463,736 L561,736 C569.3073,735.961429 576.016627,729.207373 576,720.9 L576,576 L721,576 C724.969024,576.026638 728.784638,574.468589 731.600595,571.671405 C734.416553,568.87422 736.000031,565.069113 736.000031,561.1 L736.000031,463.1 C736.016627,454.792627 729.3073,448.038571 721,448 L576,448 L576,303 Z M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 Z M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0 Z"
-          />
-        </svg>
-        <h1
-          class="pf-c-title pf-m-2xl"
-          data-ouia-component-id="OUIA-Generated-Title-1"
-          data-ouia-component-type="PF4/Title"
-          data-ouia-safe="true"
-        >
-          t(view.empty-state, {"context":"title","name":"Quipucords"})
-        </h1>
-        <div
-          class="pf-c-empty-state__body"
-        >
-          t(view.empty-state, {"context":"description_sources"})
-        </div>
-        <div
-          class="pf-c-empty-state__primary"
-        >
-          <button
-            aria-disabled="false"
-            class="pf-c-button pf-m-primary"
-            data-ouia-component-id="OUIA-Generated-Button-primary-1"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            t(view.empty-state, {"context":"label_source"})
-          </button>
-        </div>
-      </div>
+        t(view.empty-state, {"context":"label_source"})
+      </button>
     </div>
   </div>
 </div>
diff --git a/src/components/sources/__tests__/__snapshots__/sourcesEmptyState.test.js.snap b/src/components/sources/__tests__/__snapshots__/sourcesEmptyState.test.js.snap
index 9f3d010a..ae2ae0ce 100644
--- a/src/components/sources/__tests__/__snapshots__/sourcesEmptyState.test.js.snap
+++ b/src/components/sources/__tests__/__snapshots__/sourcesEmptyState.test.js.snap
@@ -2,59 +2,51 @@
 
 exports[`SourcesEmptyState Component should render a basic component 1`] = `
 <div
-  class="container-fluid"
+  class="pf-c-empty-state pf-m-lg quipucords-empty-state"
 >
   <div
-    class="row"
+    class="pf-c-empty-state__content"
   >
+    <svg
+      aria-hidden="true"
+      class="pf-c-empty-state__icon"
+      fill="currentColor"
+      height="1em"
+      role="img"
+      style="vertical-align: -0.125em;"
+      viewBox="0 0 1024 1024"
+      width="1em"
+    >
+      <path
+        d="M576,303 C576,294.715729 569.284271,288 561,288 L463,288 C454.715729,288 448,294.715729 448,303 L448,448 L303,448 C294.715729,448 288,454.715729 288,463 L288,561 C288,569.284271 294.715729,576 303,576 L448,576 L448,720.9 C447.983373,729.207373 454.6927,735.961429 463,736 L561,736 C569.3073,735.961429 576.016627,729.207373 576,720.9 L576,576 L721,576 C724.969024,576.026638 728.784638,574.468589 731.600595,571.671405 C734.416553,568.87422 736.000031,565.069113 736.000031,561.1 L736.000031,463.1 C736.016627,454.792627 729.3073,448.038571 721,448 L576,448 L576,303 Z M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 Z M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0 Z"
+      />
+    </svg>
+    <h1
+      class="pf-c-title pf-m-2xl"
+      data-ouia-component-id="OUIA-Generated-Title-1"
+      data-ouia-component-type="PF4/Title"
+      data-ouia-safe="true"
+    >
+      t(view.empty-state, {"context":"title","name":"Quipucords"})
+    </h1>
+    <div
+      class="pf-c-empty-state__body"
+    >
+      t(view.empty-state, {"context":"description_sources"})
+    </div>
     <div
-      class="pf-c-empty-state pf-m-lg quipucords-empty-state"
+      class="pf-c-empty-state__primary"
     >
-      <div
-        class="pf-c-empty-state__content"
+      <button
+        aria-disabled="false"
+        class="pf-c-button pf-m-primary"
+        data-ouia-component-id="OUIA-Generated-Button-primary-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-c-empty-state__icon"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style="vertical-align: -0.125em;"
-          viewBox="0 0 1024 1024"
-          width="1em"
-        >
-          <path
-            d="M576,303 C576,294.715729 569.284271,288 561,288 L463,288 C454.715729,288 448,294.715729 448,303 L448,448 L303,448 C294.715729,448 288,454.715729 288,463 L288,561 C288,569.284271 294.715729,576 303,576 L448,576 L448,720.9 C447.983373,729.207373 454.6927,735.961429 463,736 L561,736 C569.3073,735.961429 576.016627,729.207373 576,720.9 L576,576 L721,576 C724.969024,576.026638 728.784638,574.468589 731.600595,571.671405 C734.416553,568.87422 736.000031,565.069113 736.000031,561.1 L736.000031,463.1 C736.016627,454.792627 729.3073,448.038571 721,448 L576,448 L576,303 Z M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 Z M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0 Z"
-          />
-        </svg>
-        <h1
-          class="pf-c-title pf-m-2xl"
-          data-ouia-component-id="OUIA-Generated-Title-1"
-          data-ouia-component-type="PF4/Title"
-          data-ouia-safe="true"
-        >
-          t(view.empty-state, {"context":"title","name":"Quipucords"})
-        </h1>
-        <div
-          class="pf-c-empty-state__body"
-        >
-          t(view.empty-state, {"context":"description_sources"})
-        </div>
-        <div
-          class="pf-c-empty-state__primary"
-        >
-          <button
-            aria-disabled="false"
-            class="pf-c-button pf-m-primary"
-            data-ouia-component-id="OUIA-Generated-Button-primary-1"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            t(view.empty-state, {"context":"label_source"})
-          </button>
-        </div>
-      </div>
+        t(view.empty-state, {"context":"label_source"})
+      </button>
     </div>
   </div>
 </div>
diff --git a/src/components/sources/sourcesEmptyState.js b/src/components/sources/sourcesEmptyState.js
index ab818ec2..cb6fc80e 100644
--- a/src/components/sources/sourcesEmptyState.js
+++ b/src/components/sources/sourcesEmptyState.js
@@ -10,7 +10,6 @@ import {
   Title
 } from '@patternfly/react-core';
 import { AddCircleOIcon } from '@patternfly/react-icons';
-import { Grid, Row } from 'patternfly-react';
 import helpers from '../../common/helpers';
 import { translate } from '../i18n/i18n';
 
@@ -24,18 +23,14 @@ import { translate } from '../i18n/i18n';
  * @returns {React.ReactNode}
  */
 const SourcesEmptyState = ({ onAddSource, t, uiShortName }) => (
-  <Grid fluid>
-    <Row>
-      <EmptyState className="quipucords-empty-state" variant={EmptyStateVariant.large}>
-        <EmptyStateIcon icon={AddCircleOIcon} />
-        <Title headingLevel="h1">{t('view.empty-state', { context: ['title'], name: uiShortName })}</Title>
-        <EmptyStateBody>{t('view.empty-state', { context: ['description', 'sources'] })}</EmptyStateBody>
-        <EmptyStatePrimary>
-          <Button onClick={onAddSource}>{t('view.empty-state', { context: ['label', 'source'] })}</Button>
-        </EmptyStatePrimary>
-      </EmptyState>
-    </Row>
-  </Grid>
+  <EmptyState className="quipucords-empty-state" variant={EmptyStateVariant.large}>
+    <EmptyStateIcon icon={AddCircleOIcon} />
+    <Title headingLevel="h1">{t('view.empty-state', { context: ['title'], name: uiShortName })}</Title>
+    <EmptyStateBody>{t('view.empty-state', { context: ['description', 'sources'] })}</EmptyStateBody>
+    <EmptyStatePrimary>
+      <Button onClick={onAddSource}>{t('view.empty-state', { context: ['label', 'source'] })}</Button>
+    </EmptyStatePrimary>
+  </EmptyState>
 );
 
 /**