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

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>

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

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

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;

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;