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
2026-01-17 12:41:19 -03:30 · 2019-01-24 23:53:10 -05:00 · 2019-01-24 23:53:10 -05:00 · b820e411d3
commit b820e411d3
parent dd522c240e
18 changed files with 363 additions and 356 deletions
--- a/tests/pages/Organizations/components/OrganizationBreadcrumb.test.jsx
+++ b/tests/pages/Organizations/components/OrganizationBreadcrumb.test.jsx
@ -1,18 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { MemoryRouter } from 'react-router-dom';
-import OrganizationBreadcrumb from '../../../../src/pages/Organizations/components/OrganizationBreadcrumb';
-
-describe('<OrganizationBreadcrumb />', () => {
-  test('initially renders succesfully', () => {
-    mount(
-      <MemoryRouter initialEntries={['/organizations']} initialIndex={0}>
-        <OrganizationBreadcrumb
-          match={{ path: '/organizations', url: '/organizations' }}
-          location={{ search: '', pathname: '/organizations' }}
-          parentObj={[{ name: 'Organizations', url: '/organizations' }]}
-        />
-      </MemoryRouter>
-    );
-  });
-});
--- a/tests/pages/Organizations/screens/Organization/OrganizationDetail.test.jsx
+++ b/tests/pages/Organizations/screens/Organization/OrganizationDetail.test.jsx
@ -10,9 +10,8 @@ describe('<OrganizationDetail />', () => {
      <I18nProvider>
        <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
          <OrganizationDetail
-            match={{ path: '/organizations/:id', url: '/organizations/1' }}
-            location={{ search: '', pathname: '/organizations/1' }}
-            params={{}}
+            match={{ url: '/organizations/1' }}
+            organization={{ name: 'Default' }}
          />
        </MemoryRouter>
      </I18nProvider>
--- a/tests/pages/Organizations/utils.test.jsx
+++ b/tests/pages/Organizations/utils.test.jsx
@ -1,12 +0,0 @@
-import getTabName from '../../../src/pages/Organizations/utils';
-
-describe('getTabName', () => {
-  test('returns tab name', () => {
-    expect(getTabName('details')).toBe('Details');
-    expect(getTabName('access')).toBe('Access');
-    expect(getTabName('teams')).toBe('Teams');
-    expect(getTabName('notifications')).toBe('Notifications');
-    expect(getTabName('unknown')).toBe('');
-    expect(getTabName()).toBe('');
-  });
-});
--- a/src/app.scss
+++ b/src/app.scss
@ -57,8 +57,8 @@
 //

 .pf-c-page__main-section.pf-m-condensed {
-  padding-top: 16px;
-  padding-bottom: 16px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }

 //
--- a/src/components/Breadcrumbs/Breadcrumbs.jsx
+++ b/src/components/Breadcrumbs/Breadcrumbs.jsx
@ -0,0 +1,70 @@
+import React, { Fragment } from 'react';
+import {
+  PageSection,
+  PageSectionVariants,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbHeading
+} from '@patternfly/react-core';
+import {
+  Link,
+  Route,
+  withRouter
+} from 'react-router-dom';
+import './breadcrumbs.scss';
+
+const Breadcrumbs = ({ breadcrumbConfig }) => {
+  const { light } = PageSectionVariants;
+
+  return (
+    <PageSection
+      variant={light}
+      className="pf-m-condensed"
+    >
+      <Breadcrumb>
+        <Route
+          render={(props) => <Crumb breadcrumbConfig={breadcrumbConfig} {...props} />}
+        />
+      </Breadcrumb>
+    </PageSection>
+  );
+};
+
+const Crumb = ({ breadcrumbConfig, match }) => {
+  const crumb = breadcrumbConfig[match.url];
+
+  let crumbElement = (
+    <BreadcrumbItem key={match.url}>
+      <Link to={match.url}>
+        {crumb}
+      </Link>
+    </BreadcrumbItem>
+  );
+
+  if (match.isExact) {
+    crumbElement = (
+      <BreadcrumbHeading
+        key="breadcrumb-heading"
+        className="heading"
+      >
+        {crumb}
+      </BreadcrumbHeading>
+    );
+  }
+
+  if (!crumb) {
+    crumbElement = null;
+  }
+
+  return (
+    <Fragment>
+      {crumbElement}
+      <Route
+        path={`${match.url}/:path`}
+        render={(props) => <Crumb breadcrumbConfig={breadcrumbConfig} {...props} />}
+      />
+    </Fragment>
+  );
+};
+
+export default withRouter(Breadcrumbs);
--- a/src/components/Breadcrumbs/breadcrumbs.scss
+++ b/src/components/Breadcrumbs/breadcrumbs.scss
@ -0,0 +1,15 @@
+.pf-c-breadcrumb__item {
+  text-transform: capitalize;
+}
+
+.pf-c-breadcrumb__item.heading {
+  --pf-c-breadcrumb__heading--FontSize: 20px;
+  line-height: 24px;
+  flex: 100%;
+}
+
+.pf-c-breadcrumb__item:nth-last-child(2) {
+  .pf-c-breadcrumb__item-divider {
+    display: none;
+  }
+}
--- a/src/components/DataListToolbar/styles.scss
+++ b/src/components/DataListToolbar/styles.scss
@ -3,7 +3,7 @@
  --awx-toolbar--BorderColor: var(--pf-global--Color--light-200);
  --awx-toolbar--BorderWidth: var(--pf-global--BorderWidth--sm);

-  border: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor);
+  border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor);
  background-color: var(--awx-toolbar--BackgroundColor);
  height: 70px;
  padding-top: 5px;
--- a/src/components/NotificationsList/Notifications.list.jsx
+++ b/src/components/NotificationsList/Notifications.list.jsx
@ -65,9 +65,7 @@ class Notifications extends Component {

  componentDidMount () {
    const queryParams = this.getQueryParams();
-    // TODO: remove this hack once tab query param is gone
-    const { tab, ...queryParamsWithoutTab } = queryParams;
-    this.fetchNotifications(queryParamsWithoutTab);
+    this.fetchNotifications(queryParams);
  }

  onSearch () {
@ -81,10 +79,8 @@ class Notifications extends Component {
    const { search } = location;

    const searchParams = parseQueryString(search.substring(1));
-    // TODO: remove this hack once tab query param is gone
-    const { tab, ...queryParamsWithoutTab } = searchParams;

-    return Object.assign({}, this.defaultParams, queryParamsWithoutTab, overrides);
+    return Object.assign({}, this.defaultParams, searchParams, overrides);
  }

  onSort = (sortedColumnKey, sortOrder) => {
@ -240,8 +236,6 @@ class Notifications extends Component {
      }

      this.setState(stateToUpdate);
-      // TODO: remove this hack once tab query param is gone
-      this.updateUrl({ ...queryParams, tab: 'notifications' });

      const notificationTemplateIds = results
        .map(notificationTemplate => notificationTemplate.id)
@ -299,7 +293,7 @@ class Notifications extends Component {
          <EmptyState>
            <EmptyStateIcon icon={CubesIcon} />
            <Title size="lg">
-              <Trans>No Notifictions Found</Trans>
+              <Trans>No Notifications Found</Trans>
            </Title>
            <EmptyStateBody>
              <Trans>Please add a notification template to populate this list</Trans>
@ -331,7 +325,7 @@ class Notifications extends Component {
                      itemId={o.id}
                      name={o.name}
                      notificationType={o.notification_type}
-                      detailUrl={`notifications/${o.id}`}
+                      detailUrl={`/notifications/${o.id}`}
                      isSelected={selected.includes(o.id)}
                      onSelect={() => this.onSelect(o.id)}
                      toggleNotification={this.toggleNotification}
--- a/src/components/Tabs/Tab.jsx
+++ b/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;
--- a/src/components/Tabs/Tabs.jsx
+++ b/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>
 );

--- a/src/components/Tabs/tabs.scss
+++ b/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;
-}
--- a/src/pages/Organizations/Organizations.jsx
+++ b/src/pages/Organizations/Organizations.jsx
@ -1,36 +1,80 @@
-import React from 'react';
+import React, { Component, Fragment } from 'react';
 import { Route, Switch } from 'react-router-dom';
+import { i18nMark } from '@lingui/react';

 import OrganizationsList from './screens/OrganizationsList';
 import OrganizationAdd from './screens/OrganizationAdd';
 import Organization from './screens/Organization/Organization';
+import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';

-export default ({ api, match, history }) => (
-  <Switch>
-    <Route
-      path={`${match.path}/add`}
-      render={() => (
-        <OrganizationAdd
-          api={api}
+class Organizations extends Component {
+  state = {
+    breadcrumbConfig: {
+      '/organizations': i18nMark('Organizations'),
+      '/organizations/add': i18nMark('Create New Organization')
+    }
+  }
+
+  setBreadcrumbConfig = (organization) => {
+    if (!organization) {
+      return;
+    }
+
+    const breadcrumbConfig = {
+      '/organizations': i18nMark('Organizations'),
+      '/organizations/add': i18nMark('Create New Organization'),
+      [`/organizations/${organization.id}`]: `${organization.name}`,
+      [`/organizations/${organization.id}/edit`]: i18nMark('Edit Details'),
+      [`/organizations/${organization.id}/details`]: i18nMark('Details'),
+      [`/organizations/${organization.id}/access`]: i18nMark('Access'),
+      [`/organizations/${organization.id}/teams`]: i18nMark('Teams'),
+      [`/organizations/${organization.id}/notifications`]: i18nMark('Notifications'),
+    };
+
+    this.setState({ breadcrumbConfig });
+  }
+
+  render () {
+    const { match, api, history, location } = this.props;
+    const { breadcrumbConfig } = this.state;
+
+    return (
+      <Fragment>
+        <Breadcrumbs
+          breadcrumbConfig={breadcrumbConfig}
        />
-      )}
-    />
-    <Route
-      path={`${match.path}/:id`}
-      render={() => (
-        <Organization
-          api={api}
-          history={history}
-        />
-      )}
-    />
-    <Route
-      path={`${match.path}`}
-      render={() => (
-        <OrganizationsList
-          api={api}
-        />
-      )}
-    />
-  </Switch>
-);
+        <Switch>
+          <Route
+            path={`${match.path}/add`}
+            render={() => (
+              <OrganizationAdd
+                api={api}
+              />
+            )}
+          />
+          <Route
+            path={`${match.path}/:id`}
+            render={() => (
+              <Organization
+                api={api}
+                history={history}
+                location={location}
+                setBreadcrumb={this.setBreadcrumbConfig}
+              />
+            )}
+          />
+          <Route
+            path={`${match.path}`}
+            render={() => (
+              <OrganizationsList
+                api={api}
+              />
+            )}
+          />
+        </Switch>
+      </Fragment>
+    );
+  }
+}
+
+export default Organizations;
--- a/src/pages/Organizations/components/OrganizationListItem.jsx
+++ b/src/pages/Organizations/components/OrganizationListItem.jsx
@ -17,7 +17,6 @@ export default ({
  isSelected,
  onSelect,
  detailUrl,
-  parentBreadcrumb
 }) => (
  <li key={itemId} className="pf-c-data-list__item" aria-labelledby="check-action-item1">
    <div className="pf-c-data-list__check">
@ -35,17 +34,14 @@ export default ({
    <div className="pf-c-data-list__cell">
      <span id="check-action-item1">
        <Link
-          to={{
-            pathname: detailUrl,
-            state: { breadcrumb: [parentBreadcrumb, { name, url: detailUrl }] }
-          }}
+          to={`${detailUrl}`}
        >
          <b>{name}</b>
        </Link>
      </span>
    </div>
    <div className="pf-c-data-list__cell">
-      <Link to={`${detailUrl}?tab=access`}>
+      <Link to={`${detailUrl}/access`}>
        <Trans>Users</Trans>
      </Link>
      <Badge isRead>
@ -53,7 +49,7 @@ export default ({
        {userCount}
        {' '}
      </Badge>
-      <Link to={`${detailUrl}?tab=teams`}>
+      <Link to={`${detailUrl}/teams`}>
        <Trans>Teams</Trans>
      </Link>
      <Badge isRead>
--- a/src/pages/Organizations/screens/Organization/Organization.jsx
+++ b/src/pages/Organizations/screens/Organization/Organization.jsx
@ -1,128 +1,166 @@
-import React, { Component, Fragment } from 'react';
-import { i18nMark } from '@lingui/react';
+import React, { Component } from 'react';
+import { I18n, i18nMark } from '@lingui/react';
+import { Trans, t } from '@lingui/macro';
 import {
  Switch,
  Route,
  withRouter,
+  Redirect
 } from 'react-router-dom';
 import {
+  Card,
+  CardBody,
+  CardHeader,
  PageSection
 } from '@patternfly/react-core';

-import OrganizationBreadcrumb from '../../components/OrganizationBreadcrumb';
 import OrganizationDetail from './OrganizationDetail';
 import OrganizationEdit from './OrganizationEdit';
+import OrganizationNotifications from './OrganizationNotifications';
+import Tabs from '../../../../components/Tabs/Tabs';
+import Tab from '../../../../components/Tabs/Tab';

 class Organization extends Component {
  constructor (props) {
    super(props);

-    let { breadcrumb: parentBreadcrumbObj, organization } = props.location.state || {};
-    if (!parentBreadcrumbObj) {
-      parentBreadcrumbObj = 'loading';
-    }
-    if (!organization) {
-      organization = 'loading';
-    }
    this.state = {
-      parentBreadcrumbObj,
-      organization,
+      organization: null,
      error: false,
-      loading: false,
-      mounted: false
+      loading: true,
    };

    this.fetchOrganization = this.fetchOrganization.bind(this);
  }

  componentDidMount () {
-    this.setState({ mounted: true }, () => {
-      const { organization } = this.state;
-      if (organization === 'loading') {
-        this.fetchOrganization();
-      }
-    });
+    this.fetchOrganization();
  }

-  componentWillUnmount () {
-    this.setState({ mounted: false });
+  async componentDidUpdate (prevProps) {
+    const { location } = this.props;
+    if (location !== prevProps.location) {
+      await this.fetchOrganization();
+    }
  }

  async fetchOrganization () {
-    const { mounted } = this.state;
-    const { api } = this.props;
-
-    if (mounted) {
-      this.setState({ error: false, loading: true });
-
-      const { match } = this.props;
-      const { parentBreadcrumbObj, organization } = this.state;
-      try {
-        const { data } = await api.getOrganizationDetails(match.params.id);
-        if (organization === 'loading') {
-          this.setState({ organization: data });
-        }
-        const { name } = data;
-        if (parentBreadcrumbObj === 'loading') {
-          this.setState({ parentBreadcrumbObj: [{ name: i18nMark('Organizations'), url: '/organizations' }, { name, url: match.url }] });
-        }
-      } catch (err) {
-        this.setState({ error: true });
-      } finally {
-        this.setState({ loading: false });
-      }
+    const {
+      api,
+      match,
+      setBreadcrumb
+    } = this.props;
+    try {
+      const { data } = await api.getOrganizationDetails(+match.params.id);
+      this.setState({ organization: data });
+      setBreadcrumb(data);
+    } catch (error) {
+      this.setState({ error: true });
+    } finally {
+      this.setState({ loading: false });
    }
  }

  render () {
-    const { location, match, api, history } = this.props;
-    const { parentBreadcrumbObj, organization, error, loading } = this.state;
-    const params = new URLSearchParams(location.search);
-    const currentTab = params.get('tab') || 'details';
+    const {
+      location,
+      match,
+      api,
+      history
+    } = this.props;
+
+    const {
+      organization,
+      error,
+      loading
+    } = this.state;
+
+    const tabElements = [
+      { name: i18nMark('Details'), link: `${match.url}/details` },
+      { name: i18nMark('Access'), link: `${match.url}/access` },
+      { name: i18nMark('Teams'), link: `${match.url}/teams` },
+      { name: i18nMark('Notifications'), link: `${match.url}/notifications` },
+    ];
+
+    let cardHeader = (
+      <CardHeader>
+        <I18n>
+          {({ i18n }) => (
+            <Tabs
+              labelText={i18n._(t`Organization detail tabs`)}
+              closeButton={{ link: '/organizations', text: i18nMark('Close') }}
+            >
+              {tabElements.map(tabElement => (
+                <Tab
+                  key={tabElement.name}
+                  link={tabElement.link}
+                  replace
+                >
+                  {tabElement.name}
+                </Tab>
+              ))}
+            </Tabs>
+          )}
+        </I18n>
+      </CardHeader>
+    );
+
+    if (location.pathname.endsWith('edit')) {
+      cardHeader = null;
+    }

    return (
-      <Fragment>
-        <OrganizationBreadcrumb
-          parentObj={parentBreadcrumbObj}
-          currentTab={currentTab}
-          location={location}
-          organization={organization}
-        />
-        <PageSection>
+      <PageSection>
+        <Card>
+          { cardHeader }
          <Switch>
+            <Redirect
+              from="/organizations/:id"
+              to="/organizations/:id/details"
+              exact
+            />
            <Route
-              path={`${match.path}/edit`}
+              path="/organizations/:id/edit"
              render={() => (
                <OrganizationEdit
-                  location={location}
                  match={match}
-                  parentBreadcrumbObj={parentBreadcrumbObj}
-                  organization={organization}
-                  params={params}
-                  currentTab={currentTab}
                />
              )}
            />
            <Route
-              path={`${match.path}`}
+              path="/organizations/:id/details"
              render={() => (
                <OrganizationDetail
-                  location={location}
-                  match={match}
-                  parentBreadcrumbObj={parentBreadcrumbObj}
                  organization={organization}
-                  params={params}
-                  currentTab={currentTab}
-                  history={history}
+                  match={match}
+                  location={location}
+                />
+              )}
+            />
+            <Route
+              path="/organizations/:id/access"
+              render={() => <CardBody><h1><Trans>Access</Trans></h1></CardBody>}
+            />
+            <Route
+              path="/organizations/:id/teams"
+              render={() => <CardBody><h1><Trans>Teams</Trans></h1></CardBody>}
+            />
+            <Route
+              path="/organizations/:id/notifications"
+              render={() => (
+                <OrganizationNotifications
                  api={api}
+                  match={match}
+                  location={location}
+                  history={history}
                />
              )}
            />
          </Switch>
          {error ? 'error!' : ''}
          {loading ? 'loading...' : ''}
-        </PageSection>
-      </Fragment>
+        </Card>
+      </PageSection>
    );
  }
 }
--- a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
+++ b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
@ -1,115 +1,15 @@
-import React, { Fragment } from 'react';
-import { I18n } from '@lingui/react';
-import { Trans, t } from '@lingui/macro';
-import {
-  Card,
-  CardHeader,
-  CardBody,
-} from '@patternfly/react-core';
-import {
-  Switch,
-  Link,
-  Route
-} from 'react-router-dom';
+import React from 'react';
+import { withRouter, Link } from 'react-router-dom';
+import { Trans } from '@lingui/macro';
+import { CardBody } from '@patternfly/react-core';

-import OrganizationNotifications from './OrganizationNotifications';
+const OrganizationDetail = ({ match, organization }) => (
+  <CardBody>
+    <h1><Trans>{`${organization && organization.name} Detail View`}</Trans></h1>
+    <Link to={`/organizations/${match.params.id}/edit`}>
+      <Trans>Edit Details</Trans>
+    </Link>
+  </CardBody>
+);

-import Tab from '../../../../components/Tabs/Tab';
-import Tabs from '../../../../components/Tabs/Tabs';
-import getTabName from '../../utils';
-
-const OrganizationDetail = ({
-  location,
-  match,
-  parentBreadcrumbObj,
-  organization,
-  params,
-  currentTab,
-  api,
-  history
-}) => {
-  // TODO: set objectName by param or through grabbing org detail get from api
-  const tabList = ['details', 'access', 'teams', 'notifications'];
-
-  const deleteResourceView = () => (
-    <Fragment>
-      <Trans>{`deleting ${currentTab} association with orgs  `}</Trans>
-      <Link to={{ pathname: `${match.url}`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
-        <Trans>{`confirm removal of ${currentTab}/cancel and go back to ${currentTab} view.`}</Trans>
-      </Link>
-    </Fragment>
-  );
-
-  const addResourceView = () => (
-    <Fragment>
-      <Trans>{`adding ${currentTab}   `}</Trans>
-      <Link to={{ pathname: `${match.url}`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
-        <Trans>{`save/cancel and go back to ${currentTab} view`}</Trans>
-      </Link>
-    </Fragment>
-  );
-
-  const resourceView = () => {
-    let relatedTemplate;
-    switch (currentTab) {
-      case 'notifications':
-        relatedTemplate = (
-          <OrganizationNotifications
-            api={api}
-            match={match}
-            location={location}
-            history={history}
-          />
-        );
-        break;
-      default:
-        relatedTemplate = (
-          <Fragment>
-            <Trans>{`${currentTab} detail view  `}</Trans>
-            <Link to={{ pathname: `${match.url}/add-resource`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
-              <Trans>{`add ${currentTab}`}</Trans>
-            </Link>
-            {'  '}
-            <Link to={{ pathname: `${match.url}/delete-resources`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
-              <Trans>{`delete ${currentTab}`}</Trans>
-            </Link>
-          </Fragment>
-        );
-    }
-    return relatedTemplate;
-  };
-
-  return (
-    <Card className="at-c-orgPane">
-      <CardHeader>
-        <I18n>
-          {({ i18n }) => (
-            <Tabs labelText={i18n._(t`Organization detail tabs`)}>
-              {tabList.map(tab => (
-                <Tab
-                  key={tab}
-                  tab={tab}
-                  location={location}
-                  match={match}
-                  currentTab={currentTab}
-                  breadcrumb={parentBreadcrumbObj}
-                >
-                  <Trans>{getTabName(tab)}</Trans>
-                </Tab>
-              ))}
-            </Tabs>
-          )}
-        </I18n>
-      </CardHeader>
-      <CardBody className="at-c-listCardBody">
-        <Switch>
-          <Route path={`${match.path}/delete-resources`} component={() => deleteResourceView()} />
-          <Route path={`${match.path}/add-resource`} component={() => addResourceView()} />
-          <Route path={`${match.path}`} render={(props) => resourceView(props)} />
-        </Switch>
-      </CardBody>
-    </Card>
-  );
-};
-
-export default OrganizationDetail;
+export default withRouter(OrganizationDetail);
--- a/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
+++ b/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
@ -1,22 +1,17 @@
 import React from 'react';
 import { Trans } from '@lingui/macro';
-import {
-  Card,
-  CardBody
-} from '@patternfly/react-core';
 import {
  Link
 } from 'react-router-dom';
+import { CardBody } from '@patternfly/react-core';

-const OrganizationEdit = ({ match, parentBreadcrumbObj, organization }) => (
-  <Card className="at-c-orgPane">
-    <CardBody>
-      <Trans>edit view   </Trans>
-      <Link to={{ pathname: `/organizations/${match.params.id}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
-        <Trans>save/cancel and go back to view</Trans>
-      </Link>
-    </CardBody>
-  </Card>
+const OrganizationEdit = ({ match }) => (
+  <CardBody>
+    <h1><Trans>edit view</Trans></h1>
+    <Link to={`/organizations/${match.params.id}`}>
+      <Trans>save/cancel and go back to view</Trans>
+    </Link>
+  </CardBody>
 );

 export default OrganizationEdit;
--- a/src/pages/Organizations/screens/OrganizationsList.jsx
+++ b/src/pages/Organizations/screens/OrganizationsList.jsx
@ -6,11 +6,10 @@ import {
  withRouter
 } from 'react-router-dom';
 import { I18n, i18nMark } from '@lingui/react';
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/macro';
 import {
  PageSection,
  PageSectionVariants,
-  Title,
 } from '@patternfly/react-core';

 import DataListToolbar from '../../../components/DataListToolbar';
@ -177,7 +176,6 @@ class OrganizationsList extends Component {

  render () {
    const {
-      light,
      medium,
    } = PageSectionVariants;
    const {
@ -193,15 +191,9 @@ class OrganizationsList extends Component {
      selected,
    } = this.state;
    const { match } = this.props;
-    const parentBreadcrumb = { name: i18nMark('Organizations'), url: match.url };

    return (
      <Fragment>
-        <PageSection variant={light} className="pf-m-condensed">
-          <Title size="2xl">
-            <Trans>Organizations</Trans>
-          </Title>
-        </PageSection>
        <PageSection variant={medium}>
          <DataListToolbar
            addUrl={`${match.url}/add`}
@ -224,7 +216,6 @@ class OrganizationsList extends Component {
                    itemId={o.id}
                    name={o.name}
                    detailUrl={`${match.url}/${o.id}`}
-                    parentBreadcrumb={parentBreadcrumb}
                    userCount={o.summary_fields.related_field_counts.users}
                    teamCount={o.summary_fields.related_field_counts.teams}
                    isSelected={selected.includes(o.id)}
--- a/src/pages/Organizations/utils.jsx
+++ b/src/pages/Organizations/utils.jsx
@ -1,15 +0,0 @@
-const getTabName = (tab) => {
-  let tabName = '';
-  if (tab === 'details') {
-    tabName = 'Details';
-  } else if (tab === 'access') {
-    tabName = 'Access';
-  } else if (tab === 'teams') {
-    tabName = 'Teams';
-  } else if (tab === 'notifications') {
-    tabName = 'Notifications';
-  }
-  return tabName;
-};
-
-export default getTabName;