Merge pull request #79 from marshmalien/org-breadcrumb-tabs

Org Breadcrumb and Tabs

__tests__/pages/Organizations/utils.test.jsx

@@ -3,9 +3,8 @@ 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('access')).toBe('Access');
     expect(getTabName('teams')).toBe('Teams');
-    expect(getTabName('admins')).toBe('Admins');
     expect(getTabName('notifications')).toBe('Notifications');
     expect(getTabName('unknown')).toBe('');
     expect(getTabName()).toBe('');

src/app.scss

@@ -56,7 +56,7 @@
 // page header overrides
 //
 
-.pf-l-page__main-section.pf-m-condensed {
+.pf-c-page__main-section.pf-m-condensed {
   padding-top: 16px;
   padding-bottom: 16px;
 }

src/components/Tabs/Tab.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import './tabs.scss';
+
+
+const Tab = ({ location, match, tab, currentTab, children, breadcrumb }) => {
+  const tabClasses = () => {
+    let classes = 'pf-c-tabs__item';
+    if (tab === currentTab) {
+      classes += ' pf-m-current';
+    }
+
+    return classes;
+  };
+
+  const tabParams = () => {
+    const params = new URLSearchParams(location.search);
+    if (params.get('tab') !== undefined) {
+      params.set('tab', tab);
+    } else {
+      params.append('tab', tab);
+    }
+
+    return `?${params.toString()}`;
+  };
+
+  return (
+    <li className={tabClasses()}>
+      <Link
+        className={'pf-c-tabs__button'}
+        to={{ pathname: `${match.url}`, search: tabParams(), state: { breadcrumb } }}
+        replace={tab === currentTab}>
+        {children}
+      </Link>
+    </li>
+  )
+}
+
+export default Tab;

src/components/Tabs/Tabs.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './tabs.scss';
+
+
+const Tabs = ({ children, labelText }) => (
+  <div className="pf-c-tabs" aria-label={labelText}>
+    <ul className="pf-c-tabs__list">
+      {children}
+    </ul>
+  </div>
+);
+
+export default Tabs;

src/components/Tabs/tabs.scss

@@ -0,0 +1,50 @@
+.at-c-orgPane {
+  a {
+    display: block;
+  }
+}
+
+.pf-c-card__header {
+  --pf-c-card__header--PaddingBottom: 0;
+  --pf-c-card__header--PaddingX: 0;
+  --pf-c-card__header--PaddingTop: 0;
+}
+
+.pf-c-tabs {
+  --pf-global--link--Color: #484848;
+  --pf-global--link--Color--hover: #484848;
+  --pf-global--link--TextDecoration--hover: none;
+
+  &:before {
+    border-bottom: 1px solid var(--pf-c-tabs__item--BorderColor);
+    border-top: 1px solid var(--pf-c-tabs__item--BorderColor);
+    bottom: 0;
+    content: " ";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .pf-c-tabs__button {
+    --pf-c-tabs__button--PaddingLeft: 20px;
+    --pf-c-tabs__button--PaddingRight: 20px;
+  }
+
+  .pf-c-tabs__item.pf-m-current
+  .pf-c-tabs__button::after {
+    border-bottom: 3px solid var(--pf-c-tabs__item--m-current--Color);
+    border-top: none;
+  }
+
+  .pf-c-tabs__item:not(.pf-m-current):hover
+  .pf-c-tabs__button::after {
+    border-bottom: 3px solid var(--pf-global--Color--dark-200);
+    border-top: none;
+  }
+}
+
+.pf-c-breadcrumb__item.heading {
+  flex: 100%;
+  font-size: 20px;
+}

src/pages/Organizations/components/OrganizationBreadcrumb.jsx

@@ -3,7 +3,9 @@ import { Trans } from '@lingui/macro';
 import {
   PageSection,
   PageSectionVariants,
-  Title,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbHeading
 } from '@patternfly/react-core';
 import {
   Link
@@ -21,20 +23,22 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location
           .map(({ url, name }, index) => {
             let elem;
             if (noLastLink && parentObj.length - 1 === index) {
-              elem = (<Fragment key={name}>{name}</Fragment>);
+              elem = (<BreadcrumbHeading className="heading" key={name}>{name}</BreadcrumbHeading>);
             } else {
               elem = (
-                <Link
+                <BreadcrumbItem key={name}>
-                  key={name}
+                  <Link
-                  to={{ pathname: url, state: { breadcrumb: parentObj, organization } }}
+                    key={name}
-                >
+                    to={{ pathname: url, state: { breadcrumb: parentObj, organization } }}
-                  {name}
+                  >
-                </Link>
+                    {name}
+                  </Link>
+                </BreadcrumbItem>
               );
             }
             return elem;
           })
-          .reduce((prev, curr) => [prev, ' > ', curr])}
+          .reduce((prev, curr) => [prev, curr])}
       </Fragment>
     );
 
@@ -42,25 +46,31 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location
       breadcrumb = (
         <Fragment>
           {generateCrumb()}
-          {' > '}
+          <BreadcrumbHeading className="heading">
-          {getTabName(currentTab)}
+            {getTabName(currentTab)}
+          </BreadcrumbHeading>
         </Fragment>
       );
     } else if (location.pathname.indexOf('edit') > -1) {
       breadcrumb = (
         <Fragment>
           {generateCrumb()}
-          <Trans>{' > edit'}</Trans>
+          <BreadcrumbHeading className="heading">
+            <Trans>Edit</Trans>
+          </BreadcrumbHeading>
         </Fragment>
       );
     } else if (location.pathname.indexOf('add') > -1) {
       breadcrumb = (
         <Fragment>
           {generateCrumb()}
-          <Trans>{' > add'}</Trans>
+          <BreadcrumbHeading className="heading">
+            <Trans>Add</Trans>
+          </BreadcrumbHeading>
         </Fragment>
       );
     } else {
+
       breadcrumb = (
         <Fragment>
           {generateCrumb(true)}
@@ -71,7 +81,7 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location
 
   return (
     <PageSection variant={light} className="pf-m-condensed">
-      <Title size="2xl">{breadcrumb}</Title>
+      <Breadcrumb>{breadcrumb}</Breadcrumb>
     </PageSection>
   );
 };

src/pages/Organizations/components/OrganizationDetail.jsx

@@ -6,10 +6,7 @@ import {
   CardHeader,
   CardBody,
   PageSection,
-  PageSectionVariants,
+  PageSectionVariants
-  ToolbarGroup,
-  ToolbarItem,
-  ToolbarSection,
 } from '@patternfly/react-core';
 import {
   Switch,
@@ -17,39 +14,10 @@ import {
   Route
 } from 'react-router-dom';
 
+import Tab from '../../../components/Tabs/Tab';
+import Tabs from '../../../components/Tabs/Tabs';
 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,
@@ -61,6 +29,7 @@ const OrganizationDetail = ({
 }) => {
   // TODO: set objectName by param or through grabbing org detail get from api
   const { medium } = PageSectionVariants;
+  const tabList=['details', 'access', 'teams', 'notifications'];
 
   const deleteResourceView = () => (
     <Fragment>
@@ -93,34 +62,29 @@ const OrganizationDetail = ({
     </Fragment>
   );
 
-  const detailTabs = (tabs) => (
-    <I18n>
-      {({ i18n }) => (
-        <ToolbarSection aria-label={i18n._(t`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>
-      )}
-    </I18n>
-  );
 
   return (
     <PageSection variant={medium}>
       <Card className="at-c-orgPane">
         <CardHeader>
-          {detailTabs(['details', 'users', 'teams', 'admins', 'notifications'])}
+          <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>
           {(currentTab && currentTab !== 'details') ? (

src/pages/Organizations/components/OrganizationListItem.jsx

@@ -14,7 +14,6 @@ export default ({
   name,
   userCount,
   teamCount,
-  adminCount,
   isSelected,
   onSelect,
   detailUrl,
@@ -46,7 +45,7 @@ export default ({
       </span>
     </div>
     <div className="pf-c-data-list__cell">
-      <Link to={`${detailUrl}?tab=users`}>
+      <Link to={`${detailUrl}?tab=access`}>
         <Trans>Users</Trans>
       </Link>
       <Badge isRead>
@@ -62,14 +61,6 @@ export default ({
         {teamCount}
         {' '}
       </Badge>
-      <Link to={`${detailUrl}?tab=admins`}>
-        <Trans>Admins</Trans>
-      </Link>
-      <Badge isRead>
-        {' '}
-        {adminCount}
-        {' '}
-      </Badge>
     </div>
     <div className="pf-c-data-list__cell" />
   </li>

src/pages/Organizations/tabs.scss

@@ -1,18 +0,0 @@
-.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

@@ -2,12 +2,10 @@ const getTabName = (tab) => {
   let tabName = '';
   if (tab === 'details') {
     tabName = 'Details';
-  } else if (tab === 'users') {
+  } else if (tab === 'access') {
-    tabName = 'Users';
+    tabName = 'Access';
   } else if (tab === 'teams') {
     tabName = 'Teams';
-  } else if (tab === 'admins') {
-    tabName = 'Admins';
   } else if (tab === 'notifications') {
     tabName = 'Notifications';
   }

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

@@ -225,7 +225,6 @@ class Organizations extends Component {
                     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}
                     isSelected={selected.includes(o.id)}
                     onSelect={() => this.onSelect(o.id)}
                   />