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

__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>
-    );
-  });
-});

__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' }}
+            match={{ url: '/organizations/1' }}
-            location={{ search: '', pathname: '/organizations/1' }}
+            organization={{ name: 'Default' }}
-            params={{}}
           />
         </MemoryRouter>
       </I18nProvider>

__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('');
-  });
-});

src/app.scss

@@ -57,8 +57,8 @@
 //
 
 .pf-c-page__main-section.pf-m-condensed {
-  padding-top: 16px;
+  padding-top: 10px;
-  padding-bottom: 16px;
+  padding-bottom: 10px;
 }
 
 //

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);

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;
+  }
+}

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;

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
+    this.fetchNotifications(queryParams);
-    const { tab, ...queryParamsWithoutTab } = queryParams;
-    this.fetchNotifications(queryParamsWithoutTab);
   }
 
   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}

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 Tab = ({ children, link, replace }) => (
-  const tabClasses = () => {
+  <li className="pf-c-tabs__item">
-    let classes = 'pf-c-tabs__item';
+    <NavLink
-    if (tab === currentTab) {
+      to={link}
-      classes += ' pf-m-current';
+      replace={replace}
-    }
+      className="pf-c-tabs__button"
-
+      activeClassName="pf-m-current"
-    return classes;
+    >
-  };
+      {children}
-
+    </NavLink>
-  const tabParams = () => {
+  </li>
-    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>
-  );
-};
 
 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 }) => (
+const Tabs = ({ children, labelText, closeButton }) => (
-  <div className="pf-c-tabs" aria-label={labelText}>
+  <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
+    &:after {
-  .pf-c-tabs__button::after {
+      content: '';
-    border-bottom: 3px solid var(--pf-c-tabs__item--m-current--Color);
+      bottom: 0;
-    border-top: none;
+      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;
-}

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 }) => (
+class Organizations extends Component {
-  <Switch>
+  state = {
-    <Route
+    breadcrumbConfig: {
-      path={`${match.path}/add`}
+      '/organizations': i18nMark('Organizations'),
-      render={() => (
+      '/organizations/add': i18nMark('Create New Organization')
-        <OrganizationAdd
+    }
-          api={api}
+  }
+
+  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}
         />
-      )}
+        <Switch>
-    />
+          <Route
-    <Route
+            path={`${match.path}/add`}
-      path={`${match.path}/:id`}
+            render={() => (
-      render={() => (
+              <OrganizationAdd
-        <Organization
+                api={api}
-          api={api}
+              />
-          history={history}
+            )}
-        />
+          />
-      )}
+          <Route
-    />
+            path={`${match.path}/:id`}
-    <Route
+            render={() => (
-      path={`${match.path}`}
+              <Organization
-      render={() => (
+                api={api}
-        <OrganizationsList
+                history={history}
-          api={api}
+                location={location}
-        />
+                setBreadcrumb={this.setBreadcrumbConfig}
-      )}
+              />
-    />
+            )}
-  </Switch>
+          />
-);
+          <Route
+            path={`${match.path}`}
+            render={() => (
+              <OrganizationsList
+                api={api}
+              />
+            )}
+          />
+        </Switch>
+      </Fragment>
+    );
+  }
+}
+
+export default Organizations;

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={{
+          to={`${detailUrl}`}
-            pathname: detailUrl,
-            state: { breadcrumb: [parentBreadcrumb, { name, url: 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>

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

@@ -1,128 +1,166 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
-import { i18nMark } from '@lingui/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: null,
-      organization,
       error: false,
-      loading: false,
+      loading: true,
-      mounted: false
     };
 
     this.fetchOrganization = this.fetchOrganization.bind(this);
   }
 
   componentDidMount () {
-    this.setState({ mounted: true }, () => {
+    this.fetchOrganization();
-      const { organization } = this.state;
-      if (organization === 'loading') {
-        this.fetchOrganization();
-      }
-    });
   }
 
-  componentWillUnmount () {
+  async componentDidUpdate (prevProps) {
-    this.setState({ mounted: false });
+    const { location } = this.props;
+    if (location !== prevProps.location) {
+      await this.fetchOrganization();
+    }
   }
 
   async fetchOrganization () {
-    const { mounted } = this.state;
+    const {
-    const { api } = this.props;
+      api,
-
+      match,
-    if (mounted) {
+      setBreadcrumb
-      this.setState({ error: false, loading: true });
+    } = this.props;
-
+    try {
-      const { match } = this.props;
+      const { data } = await api.getOrganizationDetails(+match.params.id);
-      const { parentBreadcrumbObj, organization } = this.state;
+      this.setState({ organization: data });
-      try {
+      setBreadcrumb(data);
-        const { data } = await api.getOrganizationDetails(match.params.id);
+    } catch (error) {
-        if (organization === 'loading') {
+      this.setState({ error: true });
-          this.setState({ organization: data });
+    } finally {
-        }
+      this.setState({ loading: false });
-        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 });
-      }
     }
   }
 
   render () {
-    const { location, match, api, history } = this.props;
+    const {
-    const { parentBreadcrumbObj, organization, error, loading } = this.state;
+      location,
-    const params = new URLSearchParams(location.search);
+      match,
-    const currentTab = params.get('tab') || 'details';
+      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>
+      <PageSection>
-        <OrganizationBreadcrumb
+        <Card>
-          parentObj={parentBreadcrumbObj}
+          { cardHeader }
-          currentTab={currentTab}
-          location={location}
-          organization={organization}
-        />
-        <PageSection>
           <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}
+                  match={match}
-                  currentTab={currentTab}
+                  location={location}
-                  history={history}
+                />
+              )}
+            />
+            <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>
+        </Card>
-      </Fragment>
+      </PageSection>
     );
   }
 }

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

@@ -1,115 +1,15 @@
-import React, { Fragment } from 'react';
+import React from 'react';
-import { I18n } from '@lingui/react';
+import { withRouter, Link } from 'react-router-dom';
-import { Trans, t } from '@lingui/macro';
+import { Trans } from '@lingui/macro';
-import {
+import { CardBody } from '@patternfly/react-core';
-  Card,
-  CardHeader,
-  CardBody,
-} from '@patternfly/react-core';
-import {
-  Switch,
-  Link,
-  Route
-} from 'react-router-dom';
 
-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';
+export default withRouter(OrganizationDetail);
-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;

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

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)}

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;