From 12c8267b12787f1dc265d76d6a1b6193cf0448ab Mon Sep 17 00:00:00 2001
From: John Mitchell <jlmitch5@ncsu.edu>
Date: Thu, 29 Nov 2018 14:12:33 -0500
Subject: [PATCH] update organizations structure and add unstyled sub routes
 and breadcrumbs

---
 .../Organizations/Organization.add.test.jsx   |  24 +++
 .../Organizations/Organization.view.test.jsx  |  32 ++++
 .../Organizations.list.test.jsx}              |   6 +-
 .../DataListToolbar/DataListToolbar.jsx       |  93 +++++++-----
 .../components/OrganizationBreadcrumb.jsx     |  78 ++++++++++
 .../components/OrganizationDetail.jsx         | 140 ++++++++++++++++++
 .../components/OrganizationEdit.jsx           |  29 ++++
 .../components/OrganizationListItem.jsx       |  36 ++++-
 src/pages/Organizations/index.jsx             |  16 ++
 src/pages/Organizations/tabs.scss             |  18 +++
 src/pages/Organizations/utils.jsx             |  17 +++
 .../Organizations/views/Organization.add.jsx  |  21 +++
 .../Organizations/views/Organization.view.jsx | 120 +++++++++++++++
 .../views/Organizations.list.jsx}             |  17 ++-
 14 files changed, 594 insertions(+), 53 deletions(-)
 create mode 100644 __tests__/pages/Organizations/Organization.add.test.jsx
 create mode 100644 __tests__/pages/Organizations/Organization.view.test.jsx
 rename __tests__/pages/{Organizations.jsx => Organizations/Organizations.list.test.jsx} (93%)
 create mode 100644 src/pages/Organizations/components/OrganizationBreadcrumb.jsx
 create mode 100644 src/pages/Organizations/components/OrganizationDetail.jsx
 create mode 100644 src/pages/Organizations/components/OrganizationEdit.jsx
 rename src/{ => pages/Organizations}/components/OrganizationListItem.jsx (59%)
 create mode 100644 src/pages/Organizations/index.jsx
 create mode 100644 src/pages/Organizations/tabs.scss
 create mode 100644 src/pages/Organizations/utils.jsx
 create mode 100644 src/pages/Organizations/views/Organization.add.jsx
 create mode 100644 src/pages/Organizations/views/Organization.view.jsx
 rename src/pages/{Organizations.jsx => Organizations/views/Organizations.list.jsx} (91%)

diff --git a/__tests__/pages/Organizations/Organization.add.test.jsx b/__tests__/pages/Organizations/Organization.add.test.jsx
new file mode 100644
index 0000000000..e45b381a7b
--- /dev/null
+++ b/__tests__/pages/Organizations/Organization.add.test.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { API_ORGANIZATIONS } from '../../../src/endpoints';
+import OrganizationAdd from '../../../src/pages/Organizations/Organization.add';
+
+describe('<OrganizationAdd />', () => {
+  let pageWrapper;
+
+  beforeEach(() => {
+    pageWrapper = mount(<OrganizationAdd />);
+  });
+
+  afterEach(() => {
+    pageWrapper.unmount();
+  });
+
+  test('initially renders without crashing', () => {
+    expect(pageWrapper.length).toBe(1);
+  });
+
+  test('API Organization endpoint is valid', () => {
+    expect(API_ORGANIZATIONS).toBeDefined();
+  });
+});
diff --git a/__tests__/pages/Organizations/Organization.view.test.jsx b/__tests__/pages/Organizations/Organization.view.test.jsx
new file mode 100644
index 0000000000..a6fccea001
--- /dev/null
+++ b/__tests__/pages/Organizations/Organization.view.test.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { mount } from 'enzyme';
+import { API_ORGANIZATIONS } from '../../../src/endpoints';
+import OrganizationView from '../../../src/pages/Organizations/Organization.view';
+
+describe('<OrganizationView />', () => {
+  let pageWrapper;
+
+  beforeEach(() => {
+    pageWrapper = mount(
+      <MemoryRouter initialEntries={['/organizations/1']}>
+        <OrganizationView
+          match={{ path: '/organizations/:id', route: 'organizations/1', link: 'organizations', params: { id: '1' } }}
+          location={{ search: '', pathname: '' }}
+        />
+      </MemoryRouter>
+    );
+  });
+
+  afterEach(() => {
+    pageWrapper.unmount();
+  });
+
+  test('initially renders without crashing', () => {
+    expect(pageWrapper.length).toBe(1);
+  });
+
+  test('API Organization endpoint is valid', () => {
+    expect(API_ORGANIZATIONS).toBeDefined();
+  });
+});
diff --git a/__tests__/pages/Organizations.jsx b/__tests__/pages/Organizations/Organizations.list.test.jsx
similarity index 93%
rename from __tests__/pages/Organizations.jsx
rename to __tests__/pages/Organizations/Organizations.list.test.jsx
index fdbc219cc8..4162bae9f4 100644
--- a/__tests__/pages/Organizations.jsx
+++ b/__tests__/pages/Organizations/Organizations.list.test.jsx
@@ -3,9 +3,9 @@ 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';
+import api from '../../../src/api';
+import { API_ORGANIZATIONS } from '../../../src/endpoints';
+import Organizations from '../../../src/pages/Organizations';
 
 describe('<Organizations />', () => {
   let pageWrapper;
diff --git a/src/components/DataListToolbar/DataListToolbar.jsx b/src/components/DataListToolbar/DataListToolbar.jsx
index a3fbb80d92..7707dd5575 100644
--- a/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/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,15 @@ class DataListToolbar extends React.Component {
     this.setState({ isSearchDropdownOpen: false, searchKey: key });
   };
 
-  onActionToggle = isActionDropdownOpen => {
-    this.setState({ isActionDropdownOpen });
-  };
+  // onActionToggle = isActionDropdownOpen => {
+  //   this.setState({ isActionDropdownOpen });
+  // };
 
-  onActionSelect = ({ target }) => {
-    this.setState({ isActionDropdownOpen: false });
-  };
+  // onActionSelect = () => {
+  //   this.setState({ isActionDropdownOpen: false });
+  // };
 
-  render() {
+  render () {
     const { up } = DropdownPosition;
     const {
       columns,
@@ -90,9 +91,10 @@ class DataListToolbar extends React.Component {
       onSort,
       sortedColumnKey,
       sortOrder,
+      addUrl
     } = this.props;
     const {
-      isActionDropdownOpen,
+      // isActionDropdownOpen,
       isSearchDropdownOpen,
       isSortDropdownOpen,
       searchKey,
@@ -107,19 +109,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 +144,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 +160,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)}>
-                      <i className="fas fa-search" aria-hidden="true"></i>
+                      onClick={() => onSearch(searchValue)}
+                    >
+                      <i className="fas fa-search" aria-hidden="true" />
                     </Button>
                   </div>
                 </ToolbarItem>
@@ -165,31 +181,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">
-                        { name }
-                      </DropdownItem>
-                    ))}
+                        <DropdownItem key={key} component="button">
+                          { name }
+                        </DropdownItem>
+                      ))}
                   </Dropdown>
                 </ToolbarItem>
                 <ToolbarItem>
                   <Button
-                    onClick={() => onSort(sortedColumnKey, sortOrder === "ascending" ? "descending" : "ascending")}
+                    onClick={() => onSort(sortedColumnKey, sortOrder === 'ascending' ? 'descending' : 'ascending')}
                     variant="plain"
-                    aria-label="Sort">
-                    {
-                      isSortNumeric ? (
-                        sortOrder === "ascending" ? <SortNumericUpIcon /> : <SortNumericDownIcon />
-                      ) : (
-                        sortOrder === "ascending" ? <SortAlphaUpIcon /> : <SortAlphaDownIcon />
-                      )
-                    }
+                    aria-label="Sort"
+                  >
+                    {displayedSortIcon()}
                   </Button>
                 </ToolbarItem>
               </ToolbarGroup>
@@ -210,12 +223,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">
-              Add
-            </Button>
+            {addUrl && (
+              <Link to={addUrl}>
+                <Button variant="primary" aria-label="Add">
+                  Add
+                </Button>
+              </Link>
+            )}
           </LevelItem>
         </Level>
       </div>
@@ -223,4 +240,4 @@ class DataListToolbar extends React.Component {
   }
 }
 
-export default DataListToolbar;
\ No newline at end of file
+export default DataListToolbar;
diff --git a/src/pages/Organizations/components/OrganizationBreadcrumb.jsx b/src/pages/Organizations/components/OrganizationBreadcrumb.jsx
new file mode 100644
index 0000000000..bbac1b3d5c
--- /dev/null
+++ b/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;
diff --git a/src/pages/Organizations/components/OrganizationDetail.jsx b/src/pages/Organizations/components/OrganizationDetail.jsx
new file mode 100644
index 0000000000..4c1ea3bb31
--- /dev/null
+++ b/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 } }}>
+        {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;
diff --git a/src/pages/Organizations/components/OrganizationEdit.jsx b/src/pages/Organizations/components/OrganizationEdit.jsx
new file mode 100644
index 0000000000..04d49ff6d5
--- /dev/null
+++ b/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;
diff --git a/src/components/OrganizationListItem.jsx b/src/pages/Organizations/components/OrganizationListItem.jsx
similarity index 59%
rename from src/components/OrganizationListItem.jsx
rename to src/pages/Organizations/components/OrganizationListItem.jsx
index f64beb3984..d199b47e96 100644
--- a/src/components/OrganizationListItem.jsx
+++ b/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}
diff --git a/src/pages/Organizations/index.jsx b/src/pages/Organizations/index.jsx
new file mode 100644
index 0000000000..09299873df
--- /dev/null
+++ b/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;
diff --git a/src/pages/Organizations/tabs.scss b/src/pages/Organizations/tabs.scss
new file mode 100644
index 0000000000..2afa2f5ee7
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/Organizations/utils.jsx b/src/pages/Organizations/utils.jsx
new file mode 100644
index 0000000000..4db8f0627d
--- /dev/null
+++ b/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;
diff --git a/src/pages/Organizations/views/Organization.add.jsx b/src/pages/Organizations/views/Organization.add.jsx
new file mode 100644
index 0000000000..831cc0c243
--- /dev/null
+++ b/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;
diff --git a/src/pages/Organizations/views/Organization.view.jsx b/src/pages/Organizations/views/Organization.view.jsx
new file mode 100644
index 0000000000..f714eda0a5
--- /dev/null
+++ b/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;
diff --git a/src/pages/Organizations.jsx b/src/pages/Organizations/views/Organizations.list.jsx
similarity index 91%
rename from src/pages/Organizations.jsx
rename to src/pages/Organizations/views/Organizations.list.jsx
index 050031afeb..741eeb30f0 100644
--- a/src/pages/Organizations.jsx
+++ b/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_ORGANIZATIONS } from '../endpoints';
+import api from '../../../api';
+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}