From 7406421d1b33b293fc9c36a08713a1ecca99d22a Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Mon, 17 Dec 2018 18:48:55 -0500 Subject: [PATCH 1/6] Add PF Breadcrumb components --- .../components/OrganizationBreadcrumb.jsx | 38 ++++++++++++------- src/pages/Organizations/tabs.scss | 5 +++ 2 files changed, 29 insertions(+), 14 deletions(-) diff --git a/src/pages/Organizations/components/OrganizationBreadcrumb.jsx b/src/pages/Organizations/components/OrganizationBreadcrumb.jsx index 3ee4b4ca23..96f668d83c 100644 --- a/src/pages/Organizations/components/OrganizationBreadcrumb.jsx +++ b/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 = ({name}); + elem = ({name}); } else { elem = ( - - {name} - + + + {name} + + ); } return elem; }) - .reduce((prev, curr) => [prev, ' > ', curr])} + .reduce((prev, curr) => [prev, curr])} ); @@ -42,25 +46,31 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location breadcrumb = ( {generateCrumb()} - {' > '} - {getTabName(currentTab)} + + {getTabName(currentTab)} + ); } else if (location.pathname.indexOf('edit') > -1) { breadcrumb = ( {generateCrumb()} - {' > edit'} + + Edit + ); } else if (location.pathname.indexOf('add') > -1) { breadcrumb = ( {generateCrumb()} - {' > add'} + + Add + ); } else { + breadcrumb = ( {generateCrumb(true)} @@ -71,7 +81,7 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location return ( - {breadcrumb} + {breadcrumb} ); }; diff --git a/src/pages/Organizations/tabs.scss b/src/pages/Organizations/tabs.scss index 2afa2f5ee7..324bdb1c89 100644 --- a/src/pages/Organizations/tabs.scss +++ b/src/pages/Organizations/tabs.scss @@ -15,4 +15,9 @@ a { display: block; } +} + +.pf-c-breadcrumb__item.heading { + flex: 100%; + font-size: 20px; } \ No newline at end of file From e782be10b694a9ae1a5e7ae8eaa2f6d26e555421 Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Tue, 18 Dec 2018 12:48:29 -0500 Subject: [PATCH 2/6] Add Tab styles --- .../components/OrganizationDetail.jsx | 30 +++++------ src/pages/Organizations/tabs.scss | 54 ++++++++++++++----- 2 files changed, 56 insertions(+), 28 deletions(-) diff --git a/src/pages/Organizations/components/OrganizationDetail.jsx b/src/pages/Organizations/components/OrganizationDetail.jsx index 88ffca54ec..458ae73736 100644 --- a/src/pages/Organizations/components/OrganizationDetail.jsx +++ b/src/pages/Organizations/components/OrganizationDetail.jsx @@ -6,10 +6,7 @@ import { CardHeader, CardBody, PageSection, - PageSectionVariants, - ToolbarGroup, - ToolbarItem, - ToolbarSection, + PageSectionVariants } from '@patternfly/react-core'; import { Switch, @@ -23,9 +20,9 @@ import '../tabs.scss'; const DetailTab = ({ location, match, tab, currentTab, children, breadcrumb }) => { const tabClasses = () => { - let classes = 'at-c-tabs__tab'; + let classes = 'pf-c-tabs__item'; if (tab === currentTab) { - classes += ' at-m-selected'; + classes += ' pf-m-current'; } return classes; @@ -43,11 +40,14 @@ const DetailTab = ({ location, match, tab, currentTab, children, breadcrumb }) = }; return ( - - - {children} - - +
  • + + {children} + +
    • ); }; @@ -96,8 +96,8 @@ const OrganizationDetail = ({ const detailTabs = (tabs) => ( {({ i18n }) => ( - - +
    +
      {tabs.map(tab => ( ))} - - +
    +
    )}     ); diff --git a/src/pages/Organizations/tabs.scss b/src/pages/Organizations/tabs.scss index 324bdb1c89..b6877022ff 100644 --- a/src/pages/Organizations/tabs.scss +++ b/src/pages/Organizations/tabs.scss @@ -1,22 +1,50 @@ -.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; } } +.pf-c-card__header { + --pf-c-card__header--PaddingBottom: 0; + --pf-c-card__header--PaddingLeft: 0; + --pf-c-card__header--PaddingRight: 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; From 913077c4897db79fcc461beba07edeb1e0e770f8 Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Tue, 18 Dec 2018 13:21:30 -0500 Subject: [PATCH 3/6] Update tab content and related badge links --- .../Organizations/components/OrganizationDetail.jsx | 10 +++++----- .../Organizations/components/OrganizationListItem.jsx | 11 +---------- src/pages/Organizations/utils.jsx | 6 ++---- src/pages/Organizations/views/Organizations.list.jsx | 1 - 4 files changed, 8 insertions(+), 20 deletions(-) diff --git a/src/pages/Organizations/components/OrganizationDetail.jsx b/src/pages/Organizations/components/OrganizationDetail.jsx index 458ae73736..159030c8de 100644 --- a/src/pages/Organizations/components/OrganizationDetail.jsx +++ b/src/pages/Organizations/components/OrganizationDetail.jsx @@ -18,7 +18,7 @@ import getTabName from '../utils'; import '../tabs.scss'; -const DetailTab = ({ location, match, tab, currentTab, children, breadcrumb }) => { +const Tab = ({ location, match, tab, currentTab, children, breadcrumb }) => { const tabClasses = () => { let classes = 'pf-c-tabs__item'; if (tab === currentTab) { @@ -93,13 +93,13 @@ const OrganizationDetail = ({     ); - const detailTabs = (tabs) => ( + const tabList = (tabs) => ( {({ i18n }) => (
      {tabs.map(tab => ( - {getTabName(tab)} - + ))}
    @@ -120,7 +120,7 @@ const OrganizationDetail = ({ - {detailTabs(['details', 'users', 'teams', 'admins', 'notifications'])} + {tabList(['details', 'access', 'teams', 'notifications'])} {(currentTab && currentTab !== 'details') ? ( diff --git a/src/pages/Organizations/components/OrganizationListItem.jsx b/src/pages/Organizations/components/OrganizationListItem.jsx index d28f158126..161b8274a2 100644 --- a/src/pages/Organizations/components/OrganizationListItem.jsx +++ b/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 ({
    - + Users @@ -62,14 +61,6 @@ export default ({ {teamCount} {' '} - - Admins - - - {' '} - {adminCount} - {' '} -
    diff --git a/src/pages/Organizations/utils.jsx b/src/pages/Organizations/utils.jsx index 4db8f0627d..154faeb383 100644 --- a/src/pages/Organizations/utils.jsx +++ b/src/pages/Organizations/utils.jsx @@ -2,12 +2,10 @@ const getTabName = (tab) => { let tabName = ''; if (tab === 'details') { tabName = 'Details'; - } else if (tab === 'users') { - tabName = 'Users'; + } else if (tab === 'access') { + tabName = 'Access'; } else if (tab === 'teams') { tabName = 'Teams'; - } else if (tab === 'admins') { - tabName = 'Admins'; } else if (tab === 'notifications') { tabName = 'Notifications'; } diff --git a/src/pages/Organizations/views/Organizations.list.jsx b/src/pages/Organizations/views/Organizations.list.jsx index 6c3715d999..5784f7f3b8 100644 --- a/src/pages/Organizations/views/Organizations.list.jsx +++ b/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)} /> From 83e300636dcf205fd4f8f33f5d27c53c5861f10e Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Tue, 18 Dec 2018 15:39:50 -0500 Subject: [PATCH 4/6] Move Tab components out into component directory --- src/components/Tabs/Tab.jsx | 40 ++++++++++ src/components/Tabs/Tabs.jsx | 13 +++ .../Tabs}/tabs.scss | 0 .../components/OrganizationDetail.jsx | 80 +++++-------------- 4 files changed, 75 insertions(+), 58 deletions(-) create mode 100644 src/components/Tabs/Tab.jsx create mode 100644 src/components/Tabs/Tabs.jsx rename src/{pages/Organizations => components/Tabs}/tabs.scss (100%) diff --git a/src/components/Tabs/Tab.jsx b/src/components/Tabs/Tab.jsx new file mode 100644 index 0000000000..fdf9b60875 --- /dev/null +++ b/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 ( +
  • + + {children} + +
    • + ) +} + +export default Tab; diff --git a/src/components/Tabs/Tabs.jsx b/src/components/Tabs/Tabs.jsx new file mode 100644 index 0000000000..2dae079219 --- /dev/null +++ b/src/components/Tabs/Tabs.jsx @@ -0,0 +1,13 @@ +import React from 'react'; +import './tabs.scss'; + + +const Tabs = ({ children, labelText }) => ( +
    +
      + {children} +
    +
    +); + +export default Tabs; diff --git a/src/pages/Organizations/tabs.scss b/src/components/Tabs/tabs.scss similarity index 100% rename from src/pages/Organizations/tabs.scss rename to src/components/Tabs/tabs.scss diff --git a/src/pages/Organizations/components/OrganizationDetail.jsx b/src/pages/Organizations/components/OrganizationDetail.jsx index 159030c8de..624d625650 100644 --- a/src/pages/Organizations/components/OrganizationDetail.jsx +++ b/src/pages/Organizations/components/OrganizationDetail.jsx @@ -1,6 +1,6 @@ import React, { Fragment } from 'react'; -import { I18n } from '@lingui/react'; import { Trans, t } from '@lingui/macro'; +import { I18n} from '@lingui/react'; import { Card, CardHeader, @@ -14,42 +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 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 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 ( -
  • - - {children} - -
    • - ); -}; 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 = () => ( @@ -93,34 +62,29 @@ const OrganizationDetail = ({ ); - const tabList = (tabs) => ( - - {({ i18n }) => ( -
    -
      - {tabs.map(tab => ( - - {getTabName(tab)} - - ))} -
    -
    - )} -     - ); return ( - {tabList(['details', 'access', 'teams', 'notifications'])} + + {({ i18n }) => ( + + {tabList.map(tab => ( + + {getTabName(tab)} + + ))} + + )} + {(currentTab && currentTab !== 'details') ? ( From f76e9bddf9cc59bdd1b5cce2b163629fb3a2a531 Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Tue, 18 Dec 2018 15:43:45 -0500 Subject: [PATCH 5/6] Update org utils test --- __tests__/pages/Organizations/utils.test.jsx | 3 +-- src/pages/Organizations/components/OrganizationDetail.jsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/__tests__/pages/Organizations/utils.test.jsx b/__tests__/pages/Organizations/utils.test.jsx index 4b92cae0c1..e2274bfeeb 100644 --- a/__tests__/pages/Organizations/utils.test.jsx +++ b/__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(''); diff --git a/src/pages/Organizations/components/OrganizationDetail.jsx b/src/pages/Organizations/components/OrganizationDetail.jsx index 624d625650..52978d9b4c 100644 --- a/src/pages/Organizations/components/OrganizationDetail.jsx +++ b/src/pages/Organizations/components/OrganizationDetail.jsx @@ -1,6 +1,6 @@ import React, { Fragment } from 'react'; +import { I18n } from '@lingui/react'; import { Trans, t } from '@lingui/macro'; -import { I18n} from '@lingui/react'; import { Card, CardHeader, From 2d3152ef41f011aa602c3670c3d3053d838b5f51 Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Mon, 7 Jan 2019 11:15:11 -0500 Subject: [PATCH 6/6] Add translation and small css tweaks --- src/app.scss | 2 +- src/components/Tabs/tabs.scss | 3 +-- src/pages/Organizations/components/OrganizationDetail.jsx | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/app.scss b/src/app.scss index 2d3943a597..7f60ca575a 100644 --- a/src/app.scss +++ b/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; } diff --git a/src/components/Tabs/tabs.scss b/src/components/Tabs/tabs.scss index b6877022ff..421e933063 100644 --- a/src/components/Tabs/tabs.scss +++ b/src/components/Tabs/tabs.scss @@ -6,8 +6,7 @@ .pf-c-card__header { --pf-c-card__header--PaddingBottom: 0; - --pf-c-card__header--PaddingLeft: 0; - --pf-c-card__header--PaddingRight: 0; + --pf-c-card__header--PaddingX: 0; --pf-c-card__header--PaddingTop: 0; } diff --git a/src/pages/Organizations/components/OrganizationDetail.jsx b/src/pages/Organizations/components/OrganizationDetail.jsx index 52978d9b4c..b76bc40e2e 100644 --- a/src/pages/Organizations/components/OrganizationDetail.jsx +++ b/src/pages/Organizations/components/OrganizationDetail.jsx @@ -79,7 +79,7 @@ const OrganizationDetail = ({ currentTab={currentTab} breadcrumb={parentBreadcrumbObj} > - {getTabName(tab)} + {getTabName(tab)} ))}