diff --git a/__tests__/pages/Organizations/screens/Organization/Organization.test.jsx b/__tests__/pages/Organizations/screens/Organization/Organization.test.jsx
index ac147e2631..b57c95d6f4 100644
--- a/__tests__/pages/Organizations/screens/Organization/Organization.test.jsx
+++ b/__tests__/pages/Organizations/screens/Organization/Organization.test.jsx
@@ -1,20 +1,64 @@
import React from 'react';
import { mount } from 'enzyme';
+<<<<<<< HEAD
+import { MemoryRouter } from 'react-router-dom'; import { MemoryRouter } from 'react-router-dom';
+import { I18nProvider } from '@lingui/react'; import { I18nProvider } from '@lingui/react';
+import Organization from '../../../../../src/pages/Organizations/screens/Organization/Organization'; import Organization, { _Organization } from '../../../../../src/pages/Organizations/screens/Organization/Organization';
+
+=======
import { MemoryRouter } from 'react-router-dom';
import { I18nProvider } from '@lingui/react';
-import Organization from '../../../../../src/pages/Organizations/screens/Organization/Organization';
+import Organization, { _Organization } from '../../../../../src/pages/Organizations/screens/Organization/Organization';
+>>>>>>> addresses PR issues
describe('', () => {
test('initially renders succesfully', () => {
+ const spy = jest.spyOn(_Organization.prototype, 'checkLocation');
mount(
-
);
+ expect(spy).toHaveBeenCalled();
+ });
+
+ test('handleTabSelect renders the correct tab', async () => {
+ const currentTab = 'organizations/19/access';
+ const spy = jest.spyOn(_Organization.prototype, 'handleTabSelect');
+ const wrapper = mount(
+
+
+
+
+
+ ).find('Organization');
+ wrapper.find('button').at(2).simulate('click');
+ setImmediate(async () => {
+ wrapper.setState({ activeTabKey: 1 });
+ });
+ wrapper.update();
+ expect(spy).toBeCalled();
+ expect(wrapper.state('activeTabKey')).toBe(1);
+ });
+
+ test('checkLocation renders proper state when new tab is selected', async () => {
+ const currentTab = 'organizations/19/access';
+ const wrapper = mount(
+
+
+
+
+
+ ).find('Organization');
+ setImmediate(async () => {
+ wrapper.setState({ activeTabKey: 1 });
+ });
+ wrapper.find('button').at(3).simulate('click');
+ expect(wrapper.state('activeTabKey')).toBe(2);
});
});
diff --git a/src/app.scss b/src/app.scss
index 20df8aa24b..2f83a57641 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -283,6 +283,25 @@
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;
+ position: relative;
+ top: -60px;
+}
.awx-c-form-action-group {
float: right;
display: block;
diff --git a/src/pages/Organizations/screens/Organization/Organization.jsx b/src/pages/Organizations/screens/Organization/Organization.jsx
index 2ba53ece98..b4887548ab 100644
--- a/src/pages/Organizations/screens/Organization/Organization.jsx
+++ b/src/pages/Organizations/screens/Organization/Organization.jsx
@@ -5,20 +5,21 @@ import {
Switch,
Route,
withRouter,
- Redirect
+ Redirect,
+ Link
} from 'react-router-dom';
import {
Card,
CardHeader,
- PageSection
+ PageSection,
+ Tab,
+ Tabs
} from '@patternfly/react-core';
-
+import {
+ TimesIcon
+} from '@patternfly/react-icons';
import { withNetwork } from '../../../../contexts/Network';
-
-import Tabs from '../../../../components/Tabs/Tabs';
-import Tab from '../../../../components/Tabs/Tab';
import NotifyAndRedirect from '../../../../components/NotifyAndRedirect';
-
import OrganizationAccess from './OrganizationAccess';
import OrganizationDetail from './OrganizationDetail';
import OrganizationEdit from './OrganizationEdit';
@@ -33,9 +34,17 @@ class Organization extends Component {
organization: null,
error: false,
loading: true,
+ tabElements: [
+ { name: i18nMark('Details'), link: `${props.match.url}/details`, id: 0 },
+ { name: i18nMark('Access'), link: `${props.match.url}/access`, id: 1 },
+ { name: i18nMark('Teams'), link: `${props.match.url}/teams`, id: 2 },
+ { name: i18nMark('Notifications'), link: `${props.match.url}/notifications`, id: 3 },
+ ],
};
this.fetchOrganization = this.fetchOrganization.bind(this);
+ this.handleTabSelect = this.handleTabSelect.bind(this);
+ this.checkLocation = this.checkLocation.bind(this);
}
componentDidMount () {
@@ -62,48 +71,80 @@ class Organization extends Component {
setBreadcrumb(data);
this.setState({ organization: data, loading: false });
} catch (error) {
+<<<<<<< HEAD
handleHttpError(error) || this.setState({ error: true, loading: false });
+=======
+ this.setState({ error: true });
+ } finally {
+ this.setState({ loading: false });
+ this.checkLocation();
+>>>>>>> addresses PR issues
}
}
+ checkLocation () {
+ const { location } = this.props;
+ const { tabElements } = this.state;
+ const activeTab = tabElements.filter(tabElement => tabElement.link === location.pathname);
+ this.setState({ activeTabKey: activeTab[0].id });
+ }
+
+ handleTabSelect (event, eventKey) {
+ const { history } = this.props;
+ const { tabElements } = this.state;
+
+ const tab = tabElements.find(tabElement => tabElement.id === eventKey);
+ history.push(tab.link);
+ const activeTab = tabElements.filter(selectedTab => selectedTab.link === tab.link)
+ .map(selectedTab => selectedTab.id);
+ this.setState({ activeTabKey: activeTab[0] });
+ }
+
render () {
const {
location,
match,
history
} = this.props;
-
const {
+ activeTabKey,
organization,
error,
- loading
+ loading,
+ tabElements
} = this.state;
- const tabElements = [
- { name: i18nMark('Details'), link: `${match.url}/details` },
- { name: i18nMark('Access'), link: `${match.url}/access` },
- { name: i18nMark('Teams'), link: `${match.url}/teams` },
- { name: i18nMark('Notifications'), link: `${match.url}/notifications` },
- ];
-
let cardHeader = (
{({ i18n }) => (
-
- {tabElements.map(tabElement => (
-
- {tabElement.name}
-
- ))}
-
+ <>
+ {
+ this.handleTabSelect(event, eventKey);
+ }}
+ >
+ {tabElements.map(tabElement => (
+
+ ))}
+
+
+
+
+ >
)}
@@ -185,5 +226,10 @@ class Organization extends Component {
);
}
}
+<<<<<<< HEAD
export default withNetwork(withRouter(Organization));
+=======
+export { Organization as _Organization };
+export default withRouter(Organization);
+>>>>>>> addresses PR issues