RoutedTabs is now a functional component

src/app.scss

@@ -283,19 +283,6 @@
   margin-bottom: 10px;
 }
 
-.orgListAlert-actionBtn{
-  margin:0 10px;
-}
-
-.orgListDetete-progressBar{
-  padding-right: 32px;
-}
-
-.orgListDelete-progressBar-noShow{
-  display: none;
-  padding-right: 32px;
-}
-
 .OrgsTab-closeButton {
   color: black;
   float:right;

src/components/Tabs/RoutedTabs.jsx

@@ -1,55 +1,44 @@
 import React from 'react';
 
-import {
-  withRouter
-} from 'react-router-dom';
-
 import {
   Tab,
   Tabs
 } from '@patternfly/react-core';
 
-class RoutedTabs extends React.Component {
-  constructor (props) {
-    super(props);
+export default function RoutedTabs (props) {
+  const { history, tabsArray } = props;
+  const getActiveTabId = () => {
+    if (history && history.location.pathname) {
+      const matchTab = tabsArray.find(selectedTab => selectedTab.link
+        === history.location.pathname);
+      return matchTab.id;
+    }
+    return 0;
+  };
 
-    this.handleTabSelect = this.handleTabSelect.bind(this);
+  function handleTabSelect (event, eventKey) {
+    if (history && history.location.pathname) {
+      const tab = tabsArray.find(tabElement => tabElement.id === eventKey);
+      history.push(tab.link);
+    }
   }
 
-  getActiveTabId () {
-    const { history, tabsArray } = this.props;
-    const matchTab = tabsArray.find(selectedTab => selectedTab.link === history.location.pathname);
-    return matchTab ? matchTab.id : 0;
-  }
-
-  handleTabSelect (event, eventKey) {
-    const { history, tabsArray } = this.props;
-
-    const tab = tabsArray.find(tabElement => tabElement.id === eventKey);
-    history.push(tab.link);
-  }
-
-  render () {
-    const { tabsArray } = this.props;
-    return (
-      <Tabs
-        activeKey={this.getActiveTabId()}
-        onSelect={this.handleTabSelect}
-      >
-        {tabsArray.map(tabElement => (
-          <Tab
-            className={`${tabElement.name}`}
-            aria-label={`${tabElement.name}`}
-            eventKey={tabElement.id}
-            key={tabElement.id}
-            link={tabElement.link}
-            title={tabElement.name}
-          />
-        ))}
-      </Tabs>
-    );
-  }
+  return (
+    <Tabs
+      activeKey={getActiveTabId()}
+      onSelect={handleTabSelect}
+    >
+      {tabsArray.map(tabElement => (
+        <Tab
+          className={`${tabElement.name}`}
+          aria-label={`${tabElement.name}`}
+          eventKey={tabElement.id}
+          key={tabElement.id}
+          link={tabElement.link}
+          title={tabElement.name}
+        />
+      ))}
+    </Tabs>
+  );
 }
 
-export { RoutedTabs as _RoutedTabs };
-export default withRouter(RoutedTabs);

src/pages/Organizations/screens/Organization/Organization.jsx

@@ -63,9 +63,6 @@ class Organization extends Component {
       this.setState({ organization: data, loading: false });
     } catch (error) {
       handleHttpError(error) || this.setState({ error: true, loading: false });
-      this.setState({ error: true });
-    } finally {
-      this.setState({ loading: false });
     }
   }
 
@@ -78,35 +75,41 @@ class Organization extends Component {
     const {
       organization,
       error,
-      loading,
+      loading
     } = this.state;
-
     let cardHeader = (
-      <CardHeader>
-        <I18n>
-          {({ i18n }) => (
-            <React.Fragment>
-              <RoutedTabs
-                labeltext={i18n._(t`Organization detail tabs`)}
-                tabsArray={[
-                  { name: i18nMark('Details'), link: `${match.url}/details`, id: 0 },
-                  { name: i18nMark('Access'), link: `${match.url}/access`, id: 1 },
-                  { name: i18nMark('Teams'), link: `${match.url}/teams`, id: 2 },
-                  { name: i18nMark('Notifications'), link: `${match.url}/notifications`, id: 3 },
-                ]}
-              />
-              <Link
-                aria-label="Close"
-                title="Close"
-                to="/organizations"
-              >
-                <TimesIcon className="OrgsTab-closeButton" />
-              </Link>
-            </React.Fragment>
-          )}
-        </I18n>
-      </CardHeader>
-    );
+      loading ? ''
+        : (
+          <CardHeader>
+            <I18n>
+              {({ i18n }) => (
+                <React.Fragment>
+                  <RoutedTabs
+                    match={match}
+                    history={history}
+                    labeltext={i18n._(t`Organization detail tabs`)}
+                    tabsArray={[
+                      { name: i18nMark('Details'), link: `${match.url}/details`, id: 0 },
+                      { name: i18nMark('Access'), link: `${match.url}/access`, id: 1 },
+                      { name: i18nMark('Teams'), link: `${match.url}/teams`, id: 2 },
+                      { name: i18nMark('Notifications'), link: `${match.url}/notifications`, id: 3 },
+                    ]}
+                  />
+                  <Link
+                    aria-label="Close"
+                    title="Close"
+                    to="/organizations"
+                  >
+                    <TimesIcon className="OrgsTab-closeButton" />
+                  </Link>
+                </React.Fragment>
+              )}
+            </I18n>
+          </CardHeader>
+        ));
+    if (!match) {
+      cardHeader = null;
+    }
 
     if (location.pathname.endsWith('edit')) {
       cardHeader = null;