Merge pull request #28 from jlmitch5/orgUrls

add routes and breadcrumbs for org detail/edit/related routes

__tests__/components/DataListToolbar.test.jsx

@@ -4,8 +4,6 @@ import DataListToolbar from '../../src/components/DataListToolbar';
 
 describe('<DataListToolbar />', () => {
   const columns = [{ name: 'Name', key: 'name', isSortable: true }];
-  const noop = () => {};
-
   let toolbar;
 
   afterEach(() => {

__tests__/components/Tooltip.test.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Tooltip from '../../src/components/Tooltip';
+
+describe('<Tooltip />', () => {
+  let elem;
+  let content;
+  let mouseOverHandler;
+  let mouseOutHandler;
+
+  test('initially renders without crashing', () => {
+    elem = mount(<Tooltip />);
+    expect(elem.length).toBe(1);
+  });
+
+  test('shows/hides with mouse over and leave', () => {
+    elem = mount(<Tooltip />);
+    mouseOverHandler = elem.find('.mouseOverHandler');
+    mouseOutHandler = elem.find('.mouseOutHandler');
+    expect(elem.state().isDisplayed).toBe(false);
+    elem.update();
+    content = elem.find('.pf-c-tooltip__content');
+    expect(content.length).toBe(0);
+    mouseOverHandler.props().onMouseOver();
+    expect(elem.state().isDisplayed).toBe(true);
+    elem.update();
+    content = elem.find('.pf-c-tooltip__content');
+    expect(content.length).toBe(1);
+    mouseOutHandler.props().onMouseLeave();
+    expect(elem.state().isDisplayed).toBe(false);
+    elem.update();
+    content = elem.find('.pf-c-tooltip__content');
+    expect(content.length).toBe(0);
+  });
+
+  test('shows/hides with focus and blur', () => {
+    elem = mount(<Tooltip />);
+    mouseOverHandler = elem.find('.mouseOverHandler');
+    mouseOutHandler = elem.find('.mouseOutHandler');
+    expect(elem.state().isDisplayed).toBe(false);
+    elem.update();
+    content = elem.find('.pf-c-tooltip__content');
+    expect(content.length).toBe(0);
+    mouseOverHandler.props().onFocus();
+    expect(elem.state().isDisplayed).toBe(true);
+    elem.update();
+    content = elem.find('.pf-c-tooltip__content');
+    expect(content.length).toBe(1);
+    mouseOutHandler.props().onBlur();
+    expect(elem.state().isDisplayed).toBe(false);
+    elem.update();
+    content = elem.find('.pf-c-tooltip__content');
+    expect(content.length).toBe(0);
+  });
+});

__tests__/pages/Organizations.jsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import { HashRouter } from 'react-router-dom';
-
-import { mount } from 'enzyme';
-
-import api from '../../src/api';
-import { API_ORGANIZATIONS } from '../../src/endpoints';
-import Organizations from '../../src/pages/Organizations';
-
-describe('<Organizations />', () => {
-  let pageWrapper;
-
-  const results = [
-    {
-      id: 1,
-      name: 'org 1',
-      summary_fields: {
-        related_field_counts: {
-          users: 1,
-          teams: 1,
-          admins: 1
-        }
-      }
-    },
-    {
-      id: 2,
-      name: 'org 2',
-      summary_fields: {
-        related_field_counts: {
-          users: 1,
-          teams: 1,
-          admins: 1
-        }
-      }
-    },
-    {
-      id: 3,
-      name: 'org 3',
-      summary_fields: {
-        related_field_counts: {
-          users: 1,
-          teams: 1,
-          admins: 1
-        }
-      }
-    },
-  ];
-  const count = results.length;
-  const response = { data: { count, results } };
-
-  beforeEach(() => {
-    api.get = jest.fn().mockImplementation(() => Promise.resolve(response));
-    pageWrapper = mount(<HashRouter><Organizations /></HashRouter>);
-  });
-
-  afterEach(() => {
-    pageWrapper.unmount();
-  });
-
-  test('it renders expected content', () => {
-    const pageSections = pageWrapper.find('PageSection');
-    const title = pageWrapper.find('Title');
-
-    expect(pageWrapper.length).toBe(1);
-    expect(pageSections.length).toBe(2);
-    expect(title.length).toBe(1);
-    expect(title.props().size).toBe('2xl');
-    pageSections.forEach(section => {
-      expect(section.props().variant).toBeDefined();
-    });
-    expect(pageWrapper.find('ul').length).toBe(1);
-    expect(pageWrapper.find('ul li').length).toBe(0);
-    // will render all list items on update
-    pageWrapper.update();
-    expect(pageWrapper.find('ul li').length).toBe(count);
-  });
-
-  test('API Organization endpoint is valid', () => {
-    expect(API_ORGANIZATIONS).toBeDefined();
-  });
-
-  test('it displays a tooltip on delete hover', () => {
-    const tooltip = '.pf-c-tooltip__content';
-    const deleteButton = 'button[aria-label="Delete"]';
-
-    expect(pageWrapper.find(tooltip).length).toBe(0);
-    pageWrapper.find(deleteButton).simulate('mouseover');
-    expect(pageWrapper.find(tooltip).length).toBe(1);
-  });
-});

__tests__/pages/Organizations/components/OrganizationBreadcrumb.test.jsx

@@ -0,0 +1,18 @@
+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/components/OrganizationDetail.test.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { MemoryRouter } from 'react-router-dom';
+import OrganizationDetail from '../../../../src/pages/Organizations/components/OrganizationDetail';
+
+describe('<OrganizationDetail />', () => {
+  test('initially renders succesfully', () => {
+    mount(
+      <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
+        <OrganizationDetail
+          match={{ path: '/organizations/:id', url: '/organizations/1' }}
+          location={{ search: '', pathname: '/organizations/1' }}
+        />
+      </MemoryRouter>
+    );
+  });
+});

__tests__/pages/Organizations/components/OrganizationEdit.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { MemoryRouter } from 'react-router-dom';
+import OrganizationEdit from '../../../../src/pages/Organizations/components/OrganizationEdit';
+
+describe('<OrganizationEdit />', () => {
+  test('initially renders succesfully', () => {
+    mount(
+      <MemoryRouter initialEntries={['/organizations/1/edit']} initialIndex={0}>
+        <OrganizationEdit
+          match={{ path: '/organizations/:id/edit', url: '/organizations/1/edit', params: { id: 1 } }}
+        />
+      </MemoryRouter>
+    );
+  });
+});

__tests__/pages/Organizations/components/OrganizationListItem.test.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { MemoryRouter } from 'react-router-dom';
+import OrganizationListItem from '../../../../src/pages/Organizations/components/OrganizationListItem';
+
+describe('<OrganizationListItem />', () => {
+  test('initially renders succesfully', () => {
+    mount(
+      <MemoryRouter initialEntries={['/organizations']} initialIndex={0}>
+        <OrganizationListItem />
+      </MemoryRouter>
+    );
+  });
+});

__tests__/pages/Organizations/index.test.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { mount } from 'enzyme';
+import Organizations from '../../../src/pages/Organizations/index';
+
+describe('<Organizations />', () => {
+  test('initially renders succesfully', () => {
+    mount(
+      <MemoryRouter initialEntries={['/organizations']} initialIndex={0}>
+        <Organizations
+          match={{ path: '/organizations', url: '/organizations' }}
+          location={{ search: '', pathname: '/organizations' }}
+        />
+      </MemoryRouter>
+    );
+  });
+});

__tests__/pages/Organizations/utils.test.jsx

@@ -0,0 +1,13 @@
+import getTabName from '../../../src/pages/Organizations/utils';
+
+describe('getTabName', () => {
+  test('returns tab name', () => {
+    expect(getTabName('details')).toBe('Details');
+    expect(getTabName('users')).toBe('Users');
+    expect(getTabName('teams')).toBe('Teams');
+    expect(getTabName('admins')).toBe('Admins');
+    expect(getTabName('notifications')).toBe('Notifications');
+    expect(getTabName('unknown')).toBe('');
+    expect(getTabName()).toBe('');
+  });
+});

__tests__/pages/Organizations/views/Organization.add.test.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import OrganizationAdd from '../../../../src/pages/Organizations/views/Organization.add';
+
+describe('<OrganizationAdd />', () => {
+  test('initially renders succesfully', () => {
+    mount(
+      <OrganizationAdd
+        match={{ path: '/organizations/add', url: '/organizations/add' }}
+        location={{ search: '', pathname: '/organizations/add' }}
+      />
+    );
+  });
+});

__tests__/pages/Organizations/views/Organization.view.test.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { MemoryRouter } from 'react-router-dom';
+import OrganizationView from '../../../../src/pages/Organizations/views/Organization.view';
+
+describe('<OrganizationView />', () => {
+  test('initially renders succesfully', () => {
+    mount(
+      <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
+        <OrganizationView
+          match={{ path: '/organizations/:id', url: '/organizations/1' }}
+          location={{ search: '', pathname: '/organizations/1' }}
+        />
+      </MemoryRouter>
+    );
+  });
+});

__tests__/pages/Organizations/views/Organizations.list.test.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { MemoryRouter } from 'react-router-dom';
+import OrganizationsList from '../../../../src/pages/Organizations/views/Organizations.list';
+
+describe('<OrganizationsList />', () => {
+  test('initially renders succesfully', () => {
+    mount(
+      <MemoryRouter initialEntries={['/organizations']} initialIndex={0}>
+        <OrganizationsList
+          match={{ path: '/organizations', url: '/organizations' }}
+          location={{ search: '', pathname: '/organizations' }}
+        />
+      </MemoryRouter>
+    );
+  });
+});

package.json

@@ -5,7 +5,7 @@
   "main": "index.jsx",
   "scripts": {
     "start": "webpack-dev-server --config ./webpack.config.js --mode development",
-    "test": "jest --watchAll --coverage",
+    "test": "jest --watch --coverage",
     "lint": "./node_modules/eslint/bin/eslint.js src/**/*.js src/**/*.jsx"
   },
   "keywords": [],

src/components/DataListToolbar/DataListToolbar.jsx

@@ -6,8 +6,6 @@ import {
   DropdownPosition,
   DropdownToggle,
   DropdownItem,
-  FormGroup,
-  KebabToggle,
   Level,
   LevelItem,
   TextInput,
@@ -24,11 +22,14 @@ import {
   SortNumericUpIcon,
   TrashAltIcon,
 } from '@patternfly/react-icons';
+import {
+  Link
+} from 'react-router-dom';
 
 import Tooltip from '../Tooltip';
 
 class DataListToolbar extends React.Component {
-  constructor(props) {
+  constructor (props) {
     super(props);
 
     const { sortedColumnKey } = this.props;
@@ -72,15 +73,7 @@ class DataListToolbar extends React.Component {
     this.setState({ isSearchDropdownOpen: false, searchKey: key });
   };
 
-  onActionToggle = isActionDropdownOpen => {
+  render () {
-    this.setState({ isActionDropdownOpen });
-  };
-
-  onActionSelect = ({ target }) => {
-    this.setState({ isActionDropdownOpen: false });
-  };
-
-  render() {
     const { up } = DropdownPosition;
     const {
       columns,
@@ -90,9 +83,10 @@ class DataListToolbar extends React.Component {
       onSort,
       sortedColumnKey,
       sortOrder,
+      addUrl
     } = this.props;
     const {
-      isActionDropdownOpen,
+      // isActionDropdownOpen,
       isSearchDropdownOpen,
       isSortDropdownOpen,
       searchKey,
@@ -107,19 +101,29 @@ class DataListToolbar extends React.Component {
       .filter(({ key }) => key === sortedColumnKey);
     const sortedColumnName = sortedColumn.name;
     const isSortNumeric = sortedColumn.isNumeric;
+    const displayedSortIcon = () => {
+      let icon;
+      if (sortOrder === 'ascending') {
+        icon = isSortNumeric ? (<SortNumericUpIcon />) : (<SortAlphaUpIcon />);
+      } else {
+        icon = isSortNumeric ? (<SortNumericDownIcon />) : (<SortAlphaDownIcon />);
+      }
+      return icon;
+    };
 
     return (
       <div className="awx-toolbar">
         <Level>
           <LevelItem>
-            <Toolbar style={{ marginLeft: "20px" }}>
+            <Toolbar style={{ marginLeft: '20px' }}>
               <ToolbarGroup>
                 <ToolbarItem>
                   <Checkbox
                     checked={isAllSelected}
                     onChange={onSelectAll}
                     aria-label="Select all"
-                    id="select-all"/>
+                    id="select-all"
+                  />
                 </ToolbarItem>
               </ToolbarGroup>
               <ToolbarGroup>
@@ -132,10 +136,12 @@ class DataListToolbar extends React.Component {
                       isOpen={isSearchDropdownOpen}
                       toggle={(
                         <DropdownToggle
-                          onToggle={this.onSearchDropdownToggle}>
+                          onToggle={this.onSearchDropdownToggle}
+                        >
                           { searchColumnName }
                         </DropdownToggle>
-                      )}>
+                      )}
+                    >
                       {columns.filter(({ key }) => key !== searchKey).map(({ key, name }) => (
                         <DropdownItem key={key} component="button">
                           { name }
@@ -146,12 +152,14 @@ class DataListToolbar extends React.Component {
                       type="search"
                       aria-label="search text input"
                       value={searchValue}
-                      onChange={this.handleSearchInputChange}/>
+                      onChange={this.handleSearchInputChange}
+                    />
                     <Button
                       variant="tertiary"
                       aria-label="Search"
-                      onClick={() => onSearch(searchValue)}>
+                      onClick={() => onSearch(searchValue)}
-                      <i className="fas fa-search" aria-hidden="true"></i>
+                    >
+                      <i className="fas fa-search" aria-hidden="true" />
                     </Button>
                   </div>
                 </ToolbarItem>
@@ -165,31 +173,28 @@ class DataListToolbar extends React.Component {
                     isOpen={isSortDropdownOpen}
                     toggle={(
                       <DropdownToggle
-                        onToggle={this.onSortDropdownToggle}>
+                        onToggle={this.onSortDropdownToggle}
+                      >
                         { sortedColumnName }
                       </DropdownToggle>
-                    )}>
+                    )}
+                  >
                     {columns
                       .filter(({ key, isSortable }) => isSortable && key !== sortedColumnKey)
                       .map(({ key, name }) => (
-                      <DropdownItem key={key} component="button">
+                        <DropdownItem key={key} component="button">
-                        { name }
+                          { name }
-                      </DropdownItem>
+                        </DropdownItem>
-                    ))}
+                      ))}
                   </Dropdown>
                 </ToolbarItem>
                 <ToolbarItem>
                   <Button
-                    onClick={() => onSort(sortedColumnKey, sortOrder === "ascending" ? "descending" : "ascending")}
+                    onClick={() => onSort(sortedColumnKey, sortOrder === 'ascending' ? 'descending' : 'ascending')}
                     variant="plain"
-                    aria-label="Sort">
+                    aria-label="Sort"
-                    {
+                  >
-                      isSortNumeric ? (
+                    {displayedSortIcon()}
-                        sortOrder === "ascending" ? <SortNumericUpIcon /> : <SortNumericDownIcon />
-                      ) : (
-                        sortOrder === "ascending" ? <SortAlphaUpIcon /> : <SortAlphaDownIcon />
-                      )
-                    }
                   </Button>
                 </ToolbarItem>
               </ToolbarGroup>
@@ -210,12 +215,16 @@ class DataListToolbar extends React.Component {
           <LevelItem>
             <Tooltip message="Delete" position="top">
               <Button variant="plain" aria-label="Delete">
-                <TrashAltIcon/>
+                <TrashAltIcon />
               </Button>
             </Tooltip>
-            <Button variant="primary" aria-label="Add">
+            {addUrl && (
-              Add
+              <Link to={addUrl}>
-            </Button>
+                <Button variant="primary" aria-label="Add">
+                  Add
+                </Button>
+              </Link>
+            )}
           </LevelItem>
         </Level>
       </div>
@@ -223,4 +232,4 @@ class DataListToolbar extends React.Component {
   }
 }
 
-export default DataListToolbar;
+export default DataListToolbar;

src/components/Tooltip/Tooltip.jsx

@@ -3,36 +3,36 @@ import React from 'react';
 class Tooltip extends React.Component {
   transforms = {
     top: {
-      bottom: "100%",
+      bottom: '100%',
-      left: "50%",
+      left: '50%',
-      transform: "translate(-50%, -25%)"
+      transform: 'translate(-50%, -25%)'
     },
     bottom: {
-      top: "100%",
+      top: '100%',
-      left: "50%",
+      left: '50%',
-      transform: "translate(-50%, 25%)"
+      transform: 'translate(-50%, 25%)'
     },
     left: {
-      top: "50%",
+      top: '50%',
-      right: "100%",
+      right: '100%',
-      transform: "translate(-25%, -50%)"
+      transform: 'translate(-25%, -50%)'
     },
     right: {
-      bottom: "100%",
+      bottom: '100%',
-      left: "50%",
+      left: '50%',
-      transform: "translate(25%, 50%)"
+      transform: 'translate(25%, 50%)'
     },
   };
 
-  constructor(props) {
+  constructor (props) {
-    super(props)
+    super(props);
 
     this.state = {
       isDisplayed: false
     };
   }
 
-  render() {
+  render () {
     const {
       children,
       message,
@@ -44,24 +44,33 @@ class Tooltip extends React.Component {
 
     return (
       <span
-        style={{ position: "relative"}}
+        style={{ position: 'relative' }}
-        onMouseLeave={() => this.setState({ isDisplayed: false })}>
+        className="mouseOutHandler"
-        { isDisplayed &&
+        onMouseLeave={() => this.setState({ isDisplayed: false })}
-          <div
+        onBlur={() => this.setState({ isDisplayed: false })}
-            style={{ position: "absolute", zIndex: "10", ...this.transforms[position] }}
+      >
-            className={`pf-c-tooltip pf-m-${position}`}>
+        { isDisplayed
-            <div className="pf-c-tooltip__arrow"></div>
+          && (
-            <div className="pf-c-tooltip__content">
+            <div
-              { message }
+              style={{ position: 'absolute', zIndex: '10', ...this.transforms[position] }}
+              className={`pf-c-tooltip pf-m-${position}`}
+            >
+              <div className="pf-c-tooltip__arrow" />
+              <div className="pf-c-tooltip__content">
+                { message }
+              </div>
             </div>
-          </div>
+          )
         }
         <span
-          onMouseOver={() => this.setState({ isDisplayed: true })}>
+          className="mouseOverHandler"
+          onMouseOver={() => this.setState({ isDisplayed: true })}
+          onFocus={() => this.setState({ isDisplayed: true })}
+        >
           { children }
         </span>
       </span>
-    )
+    );
   }
 }
 

src/pages/Organizations/components/OrganizationBreadcrumb.jsx

@@ -0,0 +1,78 @@
+import React, { Fragment } from 'react';
+import {
+  PageSection,
+  PageSectionVariants,
+  Title,
+} from '@patternfly/react-core';
+import {
+  Link
+} from 'react-router-dom';
+
+import getTabName from '../utils';
+
+const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location }) => {
+  const { light } = PageSectionVariants;
+  let breadcrumb = '';
+  if (parentObj !== 'loading') {
+    const generateCrumb = (noLastLink = false) => (
+      <Fragment>
+        {parentObj
+          .map(({ url, name }, index) => {
+            let elem;
+            if (noLastLink && parentObj.length - 1 === index) {
+              elem = (<Fragment key={name}>{name}</Fragment>);
+            } else {
+              elem = (
+                <Link
+                  key={name}
+                  to={{ pathname: url, state: { breadcrumb: parentObj, organization } }}
+                >
+                  {name}
+                </Link>
+              );
+            }
+            return elem;
+          })
+          .reduce((prev, curr) => [prev, ' > ', curr])}
+      </Fragment>
+    );
+
+    if (currentTab && currentTab !== 'details') {
+      breadcrumb = (
+        <Fragment>
+          {generateCrumb()}
+          {' > '}
+          {getTabName(currentTab)}
+        </Fragment>
+      );
+    } else if (location.pathname.indexOf('edit') > -1) {
+      breadcrumb = (
+        <Fragment>
+          {generateCrumb()}
+          {' > edit'}
+        </Fragment>
+      );
+    } else if (location.pathname.indexOf('add') > -1) {
+      breadcrumb = (
+        <Fragment>
+          {generateCrumb()}
+          {' > add'}
+        </Fragment>
+      );
+    } else {
+      breadcrumb = (
+        <Fragment>
+          {generateCrumb(true)}
+        </Fragment>
+      );
+    }
+  }
+
+  return (
+    <PageSection variant={light} className="pf-m-condensed">
+      <Title size="2xl">{breadcrumb}</Title>
+    </PageSection>
+  );
+};
+
+export default OrganizationBreadcrumb;

src/pages/Organizations/components/OrganizationDetail.jsx

@@ -0,0 +1,140 @@
+import React, { Fragment } from 'react';
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  PageSection,
+  PageSectionVariants,
+  ToolbarGroup,
+  ToolbarItem,
+  ToolbarSection,
+} from '@patternfly/react-core';
+import {
+  Switch,
+  Link,
+  Route
+} from 'react-router-dom';
+
+import getTabName from '../utils';
+
+import '../tabs.scss';
+
+const DetailTab = ({ location, match, tab, currentTab, children, breadcrumb }) => {
+  const tabClasses = () => {
+    let classes = 'at-c-tabs__tab';
+    if (tab === currentTab) {
+      classes += ' at-m-selected';
+    }
+
+    return classes;
+  };
+
+  const updateTab = () => {
+    const params = new URLSearchParams(location.search);
+    if (params.get('tab') !== undefined) {
+      params.set('tab', tab);
+    } else {
+      params.append('tab', tab);
+    }
+
+    return `?${params.toString()}`;
+  };
+
+  return (
+    <ToolbarItem className={tabClasses()}>
+      <Link to={{ pathname: `${match.url}`, search: updateTab(), state: { breadcrumb } }} replace={tab === currentTab}>
+        {children}
+      </Link>
+    </ToolbarItem>
+  );
+};
+
+const OrganizationDetail = ({
+  location,
+  match,
+  parentBreadcrumbObj,
+  organization,
+  params,
+  currentTab
+}) => {
+  // TODO: set objectName by param or through grabbing org detail get from api
+  const { medium } = PageSectionVariants;
+
+  const deleteResourceView = () => (
+    <Fragment>
+      {`deleting ${currentTab} association with orgs  `}
+      <Link to={{ pathname: `${match.url}`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
+        {`confirm removal of ${currentTab}/cancel and go back to ${currentTab} view.`}
+      </Link>
+    </Fragment>
+  );
+
+  const addResourceView = () => (
+    <Fragment>
+      {`adding ${currentTab}   `}
+      <Link to={{ pathname: `${match.url}`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
+        {`save/cancel and go back to ${currentTab} view`}
+      </Link>
+    </Fragment>
+  );
+
+  const resourceView = () => (
+    <Fragment>
+      {`${currentTab} detail view  `}
+      <Link to={{ pathname: `${match.url}/add-resource`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
+        {`add ${currentTab}`}
+      </Link>
+      {'  '}
+      <Link to={{ pathname: `${match.url}/delete-resources`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
+        {`delete ${currentTab}`}
+      </Link>
+    </Fragment>
+  );
+
+  const detailTabs = (tabs) => (
+    <ToolbarSection aria-label="Organization detail tabs">
+      <ToolbarGroup className="at-c-tabs">
+        {tabs.map(tab => (
+          <DetailTab
+            key={tab}
+            tab={tab}
+            location={location}
+            match={match}
+            currentTab={currentTab}
+            breadcrumb={parentBreadcrumbObj}
+          >
+            {getTabName(tab)}
+          </DetailTab>
+        ))}
+      </ToolbarGroup>
+    </ToolbarSection>
+  );
+
+  return (
+    <PageSection variant={medium}>
+      <Card className="at-c-orgPane">
+        <CardHeader>
+          {detailTabs(['details', 'users', 'teams', 'admins', 'notifications'])}
+        </CardHeader>
+        <CardBody>
+          {(currentTab && currentTab !== 'details') ? (
+            <Switch>
+              <Route path={`${match.path}/delete-resources`} component={() => deleteResourceView()} />
+              <Route path={`${match.path}/add-resource`} component={() => addResourceView()} />
+              <Route path={`${match.path}`} component={() => resourceView()} />
+            </Switch>
+          ) : (
+            <Fragment>
+              {'detail view  '}
+              <Link to={{ pathname: `${match.url}/edit`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
+                {'edit'}
+              </Link>
+            </Fragment>
+          )}
+        </CardBody>
+      </Card>
+    </PageSection>
+  );
+};
+
+export default OrganizationDetail;

src/pages/Organizations/components/OrganizationEdit.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  Card,
+  CardBody,
+  PageSection,
+  PageSectionVariants
+} from '@patternfly/react-core';
+import {
+  Link
+} from 'react-router-dom';
+
+const OrganizationEdit = ({ match, parentBreadcrumbObj, organization }) => {
+  const { medium } = PageSectionVariants;
+
+  return (
+    <PageSection variant={medium}>
+      <Card className="at-c-orgPane">
+        <CardBody>
+          {'edit view   '}
+          <Link to={{ pathname: `/organizations/${match.params.id}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
+            {'save/cancel and go back to view'}
+          </Link>
+        </CardBody>
+      </Card>
+    </PageSection>
+  );
+};
+
+export default OrganizationEdit;

src/pages/Organizations/components/OrganizationListItem.jsx

@@ -3,8 +3,21 @@ import {
   Badge,
   Checkbox,
 } from '@patternfly/react-core';
+import {
+  Link
+} from 'react-router-dom';
 
-export default ({ itemId, name, userCount, teamCount, adminCount, isSelected, onSelect }) => (
+export default ({
+  itemId,
+  name,
+  userCount,
+  teamCount,
+  adminCount,
+  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">
       <Checkbox
@@ -16,23 +29,36 @@ export default ({ itemId, name, userCount, teamCount, adminCount, isSelected, on
     </div>
     <div className="pf-c-data-list__cell">
       <span id="check-action-item1">
-        <a href={`#/organizations/${itemId}`}>{ name }</a>
+        <Link
+          to={{
+            pathname: detailUrl,
+            state: { breadcrumb: [parentBreadcrumb, { name, url: detailUrl }] }
+          }}
+        >
+          {name}
+        </Link>
       </span>
     </div>
     <div className="pf-c-data-list__cell">
-      <a href="#/dashboard"> Users </a>
+      <Link to={`${detailUrl}?tab=users`}>
+        Users
+      </Link>
       <Badge isRead>
         {' '}
         {userCount}
         {' '}
       </Badge>
-      <a href="#/dashboard"> Teams </a>
+      <Link to={`${detailUrl}?tab=teams`}>
+        Teams
+      </Link>
       <Badge isRead>
         {' '}
         {teamCount}
         {' '}
       </Badge>
-      <a href="#/dashboard"> Admins </a>
+      <Link to={`${detailUrl}?tab=admins`}>
+        Admins
+      </Link>
       <Badge isRead>
         {' '}
         {adminCount}

src/pages/Organizations/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+
+import OrganizationAdd from './views/Organization.add';
+import OrganizationView from './views/Organization.view';
+import OrganizationsList from './views/Organizations.list';
+
+const Organizations = ({ match }) => (
+  <Switch>
+    <Route path={`${match.path}/add`} component={OrganizationAdd} />
+    <Route path={`${match.path}/:id`} component={OrganizationView} />
+    <Route path={`${match.path}`} component={OrganizationsList} />
+  </Switch>
+);
+
+export default Organizations;

src/pages/Organizations/tabs.scss

@@ -0,0 +1,18 @@
+.at-c-tabs {
+  padding: 0 5px !important;
+  margin: 0 -10px !important;
+
+  .at-c-tabs__tab {
+    margin: 0 5px;
+  }
+
+  .at-c-tabs__tab.at-m-selected {
+    text-decoration: underline;
+  }
+}
+
+.at-c-orgPane {
+  a {
+    display: block;
+  }
+}

src/pages/Organizations/utils.jsx

@@ -0,0 +1,17 @@
+const getTabName = (tab) => {
+  let tabName = '';
+  if (tab === 'details') {
+    tabName = 'Details';
+  } else if (tab === 'users') {
+    tabName = 'Users';
+  } else if (tab === 'teams') {
+    tabName = 'Teams';
+  } else if (tab === 'admins') {
+    tabName = 'Admins';
+  } else if (tab === 'notifications') {
+    tabName = 'Notifications';
+  }
+  return tabName;
+};
+
+export default getTabName;

src/pages/Organizations/views/Organization.add.jsx

@@ -0,0 +1,21 @@
+import React, { Fragment } from 'react';
+import {
+  PageSection,
+  PageSectionVariants,
+  Title,
+} from '@patternfly/react-core';
+
+const { light, medium } = PageSectionVariants;
+
+const OrganizationView = () => (
+  <Fragment>
+    <PageSection variant={light} className="pf-m-condensed">
+      <Title size="2xl">Organization Add</Title>
+    </PageSection>
+    <PageSection variant={medium}>
+      This is the add view
+    </PageSection>
+  </Fragment>
+);
+
+export default OrganizationView;

src/pages/Organizations/views/Organization.view.jsx

@@ -0,0 +1,120 @@
+import React, { Component, Fragment } from 'react';
+import {
+  Switch,
+  Route
+} from 'react-router-dom';
+
+import OrganizationBreadcrumb from '../components/OrganizationBreadcrumb';
+import OrganizationDetail from '../components/OrganizationDetail';
+import OrganizationEdit from '../components/OrganizationEdit';
+
+import api from '../../../api';
+import { API_ORGANIZATIONS } from '../../../endpoints';
+
+class OrganizationView 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,
+      error: false,
+      loading: false,
+      mounted: false
+    };
+  }
+
+  componentDidMount () {
+    this.setState({ mounted: true }, () => {
+      const { organization } = this.state;
+      if (organization === 'loading') {
+        this.fetchOrganization();
+      }
+    });
+  }
+
+  componentWillUnmount () {
+    this.setState({ mounted: false });
+  }
+
+  async fetchOrganization () {
+    const { mounted } = this.state;
+    if (mounted) {
+      this.setState({ error: false, loading: true });
+
+      const { match } = this.props;
+      const { parentBreadcrumbObj, organization } = this.state;
+      try {
+        const { data } = await api.get(`${API_ORGANIZATIONS}${match.params.id}/`);
+        if (organization === 'loading') {
+          this.setState({ organization: data });
+        }
+        const { name } = data;
+        if (parentBreadcrumbObj === 'loading') {
+          this.setState({ parentBreadcrumbObj: [{ name: 'Organizations', url: '/organizations' }, { name, url: match.url }] });
+        }
+      } catch (err) {
+        this.setState({ error: true });
+      } finally {
+        this.setState({ loading: false });
+      }
+    }
+  }
+
+  render () {
+    const { location, match } = this.props;
+    const { parentBreadcrumbObj, organization, error, loading } = this.state;
+    const params = new URLSearchParams(location.search);
+    const currentTab = params.get('tab') || 'details';
+
+    return (
+      <Fragment>
+        <OrganizationBreadcrumb
+          parentObj={parentBreadcrumbObj}
+          currentTab={currentTab}
+          location={location}
+          organization={organization}
+        />
+        <Switch>
+          <Route
+            path={`${match.path}/edit`}
+            component={() => (
+              <OrganizationEdit
+                location={location}
+                match={match}
+                parentBreadcrumbObj={parentBreadcrumbObj}
+                organization={organization}
+                params={params}
+                currentTab={currentTab}
+              />
+            )}
+          />
+          <Route
+            path={`${match.path}`}
+            component={() => (
+              <OrganizationDetail
+                location={location}
+                match={match}
+                parentBreadcrumbObj={parentBreadcrumbObj}
+                organization={organization}
+                params={params}
+                currentTab={currentTab}
+              />
+            )}
+          />
+        </Switch>
+        {error ? 'error!' : ''}
+        {loading ? 'loading...' : ''}
+      </Fragment>
+    );
+  }
+}
+
+export default OrganizationView;

src/pages/Organizations/views/Organizations.list.jsx

@@ -11,17 +11,17 @@ import {
   Title,
 } from '@patternfly/react-core';
 
-import DataListToolbar from '../components/DataListToolbar';
+import DataListToolbar from '../../../components/DataListToolbar';
 import OrganizationListItem from '../components/OrganizationListItem';
-import Pagination from '../components/Pagination';
+import Pagination from '../../../components/Pagination';
 
-import api from '../api';
+import api from '../../../api';
-import { API_ORGANIZATIONS } from '../endpoints';
+import { API_ORGANIZATIONS } from '../../../endpoints';
 
 import {
   encodeQueryString,
   parseQueryString,
-} from '../qs';
+} from '../../../qs';
 
 class Organizations extends Component {
   columns = [
@@ -58,7 +58,6 @@ class Organizations extends Component {
 
   componentDidMount () {
     const queryParams = this.getQueryParams();
-
     this.fetchOrganizations(queryParams);
   }
 
@@ -122,7 +121,6 @@ class Organizations extends Component {
 
   updateUrl (queryParams) {
     const { history, location } = this.props;
-
     const pathname = '/organizations';
     const search = `?${encodeQueryString(queryParams)}`;
 
@@ -185,6 +183,8 @@ class Organizations extends Component {
       results,
       selected,
     } = this.state;
+    const { match } = this.props;
+    const parentBreadcrumb = { name: 'Organizations', url: match.url };
 
     return (
       <Fragment>
@@ -193,6 +193,7 @@ class Organizations extends Component {
         </PageSection>
         <PageSection variant={medium}>
           <DataListToolbar
+            addUrl={`${match.url}/add`}
             isAllSelected={selected.length === results.length}
             sortedColumnKey={sortedColumnKey}
             sortOrder={sortOrder}
@@ -207,6 +208,8 @@ class Organizations extends Component {
                 key={o.id}
                 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}
                 adminCount={o.summary_fields.related_field_counts.admins}