From ca6153c95502edcfa89159c756abb6a8bf766ebf Mon Sep 17 00:00:00 2001 From: Alex Corey Date: Wed, 17 Apr 2019 13:47:23 -0400 Subject: [PATCH] RoutedTabs is now a functional component --- __tests__/components/RoutedTabs.test.jsx | 46 +++++------- src/app.scss | 13 ---- src/components/Tabs/RoutedTabs.jsx | 75 ++++++++----------- .../screens/Organization/Organization.jsx | 63 ++++++++-------- 4 files changed, 83 insertions(+), 114 deletions(-) diff --git a/__tests__/components/RoutedTabs.test.jsx b/__tests__/components/RoutedTabs.test.jsx index 05bc5aeee7..87053a30a9 100644 --- a/__tests__/components/RoutedTabs.test.jsx +++ b/__tests__/components/RoutedTabs.test.jsx @@ -5,27 +5,24 @@ import { Router } from 'react-router-dom'; import { createMemoryHistory } from 'history'; import { I18nProvider } from '@lingui/react'; import RoutedTabs from '../../src/components/Tabs/RoutedTabs'; -import { DonateIcon } from '@patternfly/react-icons'; let wrapper; -afterEach(() => { - jest.clearAllMocks(); +let history; + +beforeEach(() => { + history = createMemoryHistory({ + initialEntries: ['/organizations/19/details'], + }); }); + const tabs = [ { name: 'Details', link: 'organizations/19/details', id: 0 }, { name: 'Access', link: 'organizations/19/access', id: 1 }, - { name: 'Teams', link: 'organizations/19/teams', id: 2 } + { name: 'Teams', link: 'organizations/19/teams', id: 2 }, + { name: 'Notification', link: 'organizations/19/notification', id: 3 } ]; -const history = createMemoryHistory({ - history: { - location: { - pathname: '/organizations/19/details' - } - } -}); - describe('', () => { test('RoutedTabs renders successfully', () => { wrapper = mount( @@ -39,41 +36,34 @@ describe('', () => { ).find('RoutedTabs'); }); - test('the correct tab is rendered', async () => { - const currentTab = 'organizations/1/details'; + test('Given a URL the correct tab is displayed', async (done) => { wrapper = mount( ).find('RoutedTabs'); - wrapper.find('button').at(2).simulate('click'); - wrapper.update(); + wrapper.find('Tabs').prop('onSelect')({}, 1); expect(history.location.pathname).toEqual('/organizations/19/access'); + done(); }); - test('Given a URL the correct tab is displayed', async (done) => { - const currentTab = createMemoryHistory({ - initialEntries: ['/organizations/19/teams'], - }); + test('the correct tab is rendered', async () => { wrapper = mount( - + ).find('RoutedTabs'); - setImmediate(() => { - wrapper.find('Tabs').prop('onSelect')({}, 2); - const selectedTab = wrapper.find('li').get(2).props.className; - expect(selectedTab).toBe('pf-c-tabs__item pf-m-current'); - done(); - }); + const selectedTab = wrapper.find('section').get(2).props.hidden; + wrapper.find('button').at(2).simulate('click'); + expect(selectedTab).toBe(false); }); }); + diff --git a/src/app.scss b/src/app.scss index 2f83a57641..dfe664495c 100644 --- a/src/app.scss +++ b/src/app.scss @@ -283,19 +283,6 @@ margin-bottom: 10px; } -.orgListAlert-actionBtn{ - margin:0 10px; -} - -.orgListDetete-progressBar{ - padding-right: 32px; -} - -.orgListDelete-progressBar-noShow{ - display: none; - padding-right: 32px; -} - .OrgsTab-closeButton { color: black; float:right; diff --git a/src/components/Tabs/RoutedTabs.jsx b/src/components/Tabs/RoutedTabs.jsx index 820eace467..3293e64087 100644 --- a/src/components/Tabs/RoutedTabs.jsx +++ b/src/components/Tabs/RoutedTabs.jsx @@ -1,55 +1,44 @@ import React from 'react'; -import { - withRouter -} from 'react-router-dom'; - import { Tab, Tabs } from '@patternfly/react-core'; -class RoutedTabs extends React.Component { - constructor (props) { - super(props); +export default function RoutedTabs (props) { + const { history, tabsArray } = props; + const getActiveTabId = () => { + if (history && history.location.pathname) { + const matchTab = tabsArray.find(selectedTab => selectedTab.link + === history.location.pathname); + return matchTab.id; + } + return 0; + }; - this.handleTabSelect = this.handleTabSelect.bind(this); + function handleTabSelect (event, eventKey) { + if (history && history.location.pathname) { + const tab = tabsArray.find(tabElement => tabElement.id === eventKey); + history.push(tab.link); + } } - getActiveTabId () { - const { history, tabsArray } = this.props; - const matchTab = tabsArray.find(selectedTab => selectedTab.link === history.location.pathname); - return matchTab ? matchTab.id : 0; - } - - handleTabSelect (event, eventKey) { - const { history, tabsArray } = this.props; - - const tab = tabsArray.find(tabElement => tabElement.id === eventKey); - history.push(tab.link); - } - - render () { - const { tabsArray } = this.props; - return ( - - {tabsArray.map(tabElement => ( - - ))} - - ); - } + return ( + + {tabsArray.map(tabElement => ( + + ))} + + ); } -export { RoutedTabs as _RoutedTabs }; -export default withRouter(RoutedTabs); diff --git a/src/pages/Organizations/screens/Organization/Organization.jsx b/src/pages/Organizations/screens/Organization/Organization.jsx index 1df548b796..9a6b895451 100644 --- a/src/pages/Organizations/screens/Organization/Organization.jsx +++ b/src/pages/Organizations/screens/Organization/Organization.jsx @@ -63,9 +63,6 @@ class Organization extends Component { this.setState({ organization: data, loading: false }); } catch (error) { handleHttpError(error) || this.setState({ error: true, loading: false }); - this.setState({ error: true }); - } finally { - this.setState({ loading: false }); } } @@ -78,35 +75,41 @@ class Organization extends Component { const { organization, error, - loading, + loading } = this.state; - let cardHeader = ( - - - {({ i18n }) => ( - - - - - - - )} - - - ); + loading ? '' + : ( + + + {({ i18n }) => ( + + + + + + + )} + + + )); + if (!match) { + cardHeader = null; + } if (location.pathname.endsWith('edit')) { cardHeader = null;