Refactor breadcrumbs, tabs, routing.

* Cleanup previous params logic from Notificaitons list
* Add shared breadcrumbs and tabs components
* Structure Organization screens to render only cardBody content
* Add styles
* Fetch organization when location changes

src/components/Tabs/Tab.jsx

@@ -1,40 +1,18 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
-
+import { NavLink } from 'react-router-dom';
 import './tabs.scss';
 
-const Tab = ({ location, match, tab, currentTab, children, breadcrumb }) => {
-  const tabClasses = () => {
-    let classes = 'pf-c-tabs__item';
-    if (tab === currentTab) {
-      classes += ' pf-m-current';
-    }
-
-    return classes;
-  };
-
-  const tabParams = () => {
-    const params = new URLSearchParams(location.search);
-    if (params.get('tab') !== undefined) {
-      params.set('tab', tab);
-    } else {
-      params.append('tab', tab);
-    }
-
-    return `?${params.toString()}`;
-  };
-
-  return (
-    <li className={tabClasses()}>
-      <Link
-        className="pf-c-tabs__button"
-        to={{ pathname: `${match.url}`, search: tabParams(), state: { breadcrumb } }}
-        replace={tab === currentTab}
-      >
-        {children}
-      </Link>
-    </li>
-  );
-};
+const Tab = ({ children, link, replace }) => (
+  <li className="pf-c-tabs__item">
+    <NavLink
+      to={link}
+      replace={replace}
+      className="pf-c-tabs__button"
+      activeClassName="pf-m-current"
+    >
+      {children}
+    </NavLink>
+  </li>
+);
 
 export default Tab;

src/components/Tabs/Tabs.jsx

@@ -1,11 +1,37 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
+import { Button } from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
+import Tooltip from '../Tooltip';
 import './tabs.scss';
 
-const Tabs = ({ children, labelText }) => (
-  <div className="pf-c-tabs" aria-label={labelText}>
+const Tabs = ({ children, labelText, closeButton }) => (
+  <div
+    aria-label={labelText}
+    className="pf-c-tabs pf-u-flex-direction-row pf-u-justify-content-space-between"
+  >
     <ul className="pf-c-tabs__list">
       {children}
     </ul>
+    {closeButton
+      && (
+        <div className="pf-u-align-self-center">
+          <Tooltip
+            message={closeButton.text}
+            position="top"
+          >
+            <Link to={closeButton.link}>
+              <Button
+                variant="plain"
+                aria-label={closeButton.text}
+              >
+                <TimesIcon />
+              </Button>
+            </Link>
+          </Tooltip>
+        </div>
+      )
+    }
   </div>
 );
 

src/components/Tabs/tabs.scss

@@ -1,9 +1,3 @@
-.at-c-orgPane {
-  a {
-    display: block;
-  }
-}
-
 .pf-c-card__header {
   --pf-c-card__header--PaddingBottom: 0;
   --pf-c-card__header--PaddingX: 0;
@@ -29,22 +23,34 @@
   .pf-c-tabs__button {
     --pf-c-tabs__button--PaddingLeft: 20px;
     --pf-c-tabs__button--PaddingRight: 20px;
-  }
+    display: block;
 
-  .pf-c-tabs__item.pf-m-current
-  .pf-c-tabs__button::after {
-    border-bottom: 3px solid var(--pf-c-tabs__item--m-current--Color);
-    border-top: none;
+    &:after {
+      content: '';
+      bottom: 0;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
   }
 
   .pf-c-tabs__item:not(.pf-m-current):hover
   .pf-c-tabs__button::after {
+    border-top: none;
+  }
+
+  .pf-c-tabs__item:hover
+  .pf-c-tabs__button:not(.pf-m-current)::after {
     border-bottom: 3px solid var(--pf-global--Color--dark-200);
     border-top: none;
   }
+
+  .pf-c-tabs__button.pf-m-current::after {
+    content: '';
+    border-bottom: 3px solid var(--pf-c-tabs__item--m-current--Color);
+    border-top: none;
+    margin-left: 1px;
+  }
 }
 
-.pf-c-breadcrumb__item.heading {
-  flex: 100%;
-  font-size: 20px;
-}