import { connect } from 'react-redux';
import GlobalNavBranding from './GlobalNavBranding';
import GlobalNavMenu from './GlobalNavMenu';
-import GlobalNavUser from './GlobalNavUser';
+import GlobalNavUserContainer from './GlobalNavUserContainer';
import Search from '../../search/Search';
import ShortcutsHelpView from './ShortcutsHelpView';
import { getCurrentUser, getAppState } from '../../../../store/rootReducer';
</svg>
</a>
</li>
- <GlobalNavUser {...this.props} />
+ <GlobalNavUserContainer {...this.props} />
</ul>
</div>
</nav>
*/
// @flow
import React from 'react';
-import { Link, withRouter } from 'react-router';
+import classNames from 'classnames';
+import { sortBy } from 'lodash';
+import { Link } from 'react-router';
import Avatar from '../../../../components/ui/Avatar';
+import OrganizationLink from '../../../../components/ui/OrganizationLink';
import { translate } from '../../../../helpers/l10n';
-class GlobalNavUser extends React.PureComponent {
- props: {
- currentUser: {
- email?: string,
- name: string
- },
- location: Object,
- router: { push: string => void }
+type CurrentUser = {
+ email?: string,
+ isLoggedIn: boolean,
+ name: string
+};
+
+type Props = {
+ currentUser: CurrentUser,
+ fetchMyOrganizations: () => Promise<*>,
+ location: Object,
+ organizations: Array<{ key: string, name: string }>,
+ router: { push: string => void }
+};
+
+type State = {
+ open: boolean
+};
+
+export default class GlobalNavUser extends React.PureComponent {
+ node: HTMLElement;
+ props: Props;
+ state: State = { open: false };
+
+ componentWillUnmount() {
+ window.removeEventListener('click', this.handleClickOutside);
+ }
+
+ handleClickOutside = (event: { target: HTMLElement }) => {
+ if (!this.node || !this.node.contains(event.target)) {
+ this.closeDropdown();
+ }
};
- handleLogin = e => {
+ handleLogin = (e: Event) => {
e.preventDefault();
const shouldReturnToCurrentPage = window.location.pathname !== `${window.baseUrl}/about`;
if (shouldReturnToCurrentPage) {
}
};
- handleLogout = e => {
+ handleLogout = (e: Event) => {
e.preventDefault();
+ this.closeDropdown();
this.props.router.push('/sessions/logout');
};
+ toggleDropdown = (evt: Event) => {
+ evt.preventDefault();
+ if (this.state.open) {
+ this.closeDropdown();
+ } else {
+ this.openDropdown();
+ }
+ };
+
+ openDropdown = () => {
+ this.props.fetchMyOrganizations().then(() => {
+ window.addEventListener('click', this.handleClickOutside, true);
+ this.setState({ open: true });
+ });
+ };
+
+ closeDropdown = () => {
+ window.removeEventListener('click', this.handleClickOutside);
+ this.setState({ open: false });
+ };
+
renderAuthenticated() {
- const { currentUser } = this.props;
+ const { currentUser, organizations } = this.props;
+ const hasOrganizations = organizations.length > 0;
return (
- <li className="dropdown js-user-authenticated">
- <a className="dropdown-toggle navbar-avatar" data-toggle="dropdown" href="#">
+ <li
+ className={classNames('dropdown js-user-authenticated', { open: this.state.open })}
+ ref={node => (this.node = node)}>
+ <a className="dropdown-toggle navbar-avatar" href="#" onClick={this.toggleDropdown}>
<Avatar email={currentUser.email} name={currentUser.name} size={24} />
</a>
- <ul className="dropdown-menu dropdown-menu-right">
- <li className="dropdown-item">
- <div className="text-ellipsis text-muted" title={currentUser.name}>
- <strong>{currentUser.name}</strong>
- </div>
- {currentUser.email != null &&
- <div className="little-spacer-top text-ellipsis text-muted" title={currentUser.email}>
- {currentUser.email}
- </div>}
- </li>
- <li className="divider" />
- <li>
- <Link to="/account">{translate('my_account.page')}</Link>
- </li>
- <li>
- <a onClick={this.handleLogout} href="#">{translate('layout.logout')}</a>
- </li>
- </ul>
+ {this.state.open &&
+ <ul className="dropdown-menu dropdown-menu-right">
+ <li className="dropdown-item">
+ <div className="text-ellipsis text-muted" title={currentUser.name}>
+ <strong>{currentUser.name}</strong>
+ </div>
+ {currentUser.email != null &&
+ <div
+ className="little-spacer-top text-ellipsis text-muted"
+ title={currentUser.email}>
+ {currentUser.email}
+ </div>}
+ </li>
+ <li className="divider" />
+ <li>
+ <Link to="/account" onClick={this.closeDropdown}>{translate('my_account.page')}</Link>
+ </li>
+ {hasOrganizations && <li role="separator" className="divider" />}
+ {hasOrganizations &&
+ <li className="dropdown-header spacer-left">{translate('my_organizations')}</li>}
+ {hasOrganizations &&
+ sortBy(organizations, org => org.name.toLowerCase()).map(organization => (
+ <li key={organization.key}>
+ <OrganizationLink organization={organization} onClick={this.closeDropdown}>
+ <span className="spacer-left">{organization.name}</span>
+ </OrganizationLink>
+ </li>
+ ))}
+ {hasOrganizations && <li role="separator" className="divider" />}
+ <li>
+ <a onClick={this.handleLogout} href="#">{translate('layout.logout')}</a>
+ </li>
+ </ul>}
</li>
);
}
return this.props.currentUser.isLoggedIn ? this.renderAuthenticated() : this.renderAnonymous();
}
}
-
-export default withRouter(GlobalNavUser);
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+// @flow
+import { withRouter } from 'react-router';
+import { connect } from 'react-redux';
+import GlobalNavUser from './GlobalNavUser';
+import { fetchMyOrganizations } from '../../../../apps/account/organizations/actions';
+import { getMyOrganizations } from '../../../../store/rootReducer';
+
+const mapStateToProps = state => ({
+ organizations: getMyOrganizations(state)
+});
+
+const mapDispatchToProps = {
+ fetchMyOrganizations
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(withRouter(GlobalNavUser));
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+import React from 'react';
+import { shallow } from 'enzyme';
+import GlobalNavUser from '../GlobalNavUser';
+
+const currentUser = { isLoggedIn: true, name: 'foo', email: 'foo@bar.baz' };
+const organizations = [
+ { key: 'myorg', name: 'MyOrg' },
+ { key: 'foo', name: 'Foo' },
+ { key: 'bar', name: 'bar' }
+];
+
+it('should render the right interface for anonymous user', () => {
+ const currentUser = { isLoggedIn: false };
+ const wrapper = shallow(
+ <GlobalNavUser currentUser={currentUser} fetchMyOrganizations={() => {}} organizations={[]} />
+ );
+ expect(wrapper).toMatchSnapshot();
+});
+
+it('should render the right interface for logged in user', () => {
+ const wrapper = shallow(
+ <GlobalNavUser currentUser={currentUser} fetchMyOrganizations={() => {}} organizations={[]} />
+ );
+ wrapper.setState({ open: true });
+ expect(wrapper).toMatchSnapshot();
+});
+
+it('should render the users organizations', () => {
+ const wrapper = shallow(
+ <GlobalNavUser
+ currentUser={currentUser}
+ fetchMyOrganizations={() => {}}
+ organizations={organizations}
+ />
+ );
+ wrapper.setState({ open: true });
+ expect(wrapper).toMatchSnapshot();
+});
+
+it('should update the component correctly when the user changes to anonymous', () => {
+ const fetchMyOrganizations = jest.fn();
+ const wrapper = shallow(
+ <GlobalNavUser
+ currentUser={currentUser}
+ fetchMyOrganizations={fetchMyOrganizations}
+ organizations={[]}
+ />
+ );
+ wrapper.setState({ open: true });
+ expect(wrapper).toMatchSnapshot();
+ wrapper.setProps({ currentUser: { isLoggedIn: false } });
+ expect(fetchMyOrganizations.mock.calls.length).toBe(0);
+ expect(wrapper).toMatchSnapshot();
+});
+
+it('should lazyload the organizations when opening the dropdown', () => {
+ const fetchMyOrganizations = jest.fn(() => Promise.resolve());
+ const wrapper = shallow(
+ <GlobalNavUser
+ currentUser={currentUser}
+ fetchMyOrganizations={fetchMyOrganizations}
+ organizations={organizations}
+ />
+ );
+ expect(fetchMyOrganizations.mock.calls.length).toBe(0);
+ wrapper.instance().openDropdown();
+ expect(fetchMyOrganizations.mock.calls.length).toBe(1);
+ wrapper.instance().openDropdown();
+ expect(fetchMyOrganizations.mock.calls.length).toBe(2);
+});
+
+it('should update the organizations when the user changes', () => {
+ const fetchMyOrganizations = jest.fn(() => Promise.resolve());
+ const wrapper = shallow(
+ <GlobalNavUser
+ currentUser={currentUser}
+ fetchMyOrganizations={fetchMyOrganizations}
+ organizations={organizations}
+ />
+ );
+ wrapper.instance().openDropdown();
+ expect(fetchMyOrganizations.mock.calls.length).toBe(1);
+ wrapper.setProps({
+ currentUser: { isLoggedIn: true, name: 'test', email: 'test@sonarsource.com' }
+ });
+ wrapper.instance().openDropdown();
+ expect(fetchMyOrganizations.mock.calls.length).toBe(2);
+});
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render the right interface for anonymous user 1`] = `
+<li>
+ <a
+ href="#"
+ onClick={[Function]}
+ >
+ layout.login
+ </a>
+</li>
+`;
+
+exports[`should render the right interface for logged in user 1`] = `
+<li
+ className="dropdown js-user-authenticated open"
+>
+ <a
+ className="dropdown-toggle navbar-avatar"
+ href="#"
+ onClick={[Function]}
+ >
+ <Connect(Avatar)
+ email="foo@bar.baz"
+ name="foo"
+ size={24}
+ />
+ </a>
+ <ul
+ className="dropdown-menu dropdown-menu-right"
+ >
+ <li
+ className="dropdown-item"
+ >
+ <div
+ className="text-ellipsis text-muted"
+ title="foo"
+ >
+ <strong>
+ foo
+ </strong>
+ </div>
+ <div
+ className="little-spacer-top text-ellipsis text-muted"
+ title="foo@bar.baz"
+ >
+ foo@bar.baz
+ </div>
+ </li>
+ <li
+ className="divider"
+ />
+ <li>
+ <Link
+ onClick={[Function]}
+ onlyActiveOnIndex={false}
+ style={Object {}}
+ to="/account"
+ >
+ my_account.page
+ </Link>
+ </li>
+ <li>
+ <a
+ href="#"
+ onClick={[Function]}
+ >
+ layout.logout
+ </a>
+ </li>
+ </ul>
+</li>
+`;
+
+exports[`should render the users organizations 1`] = `
+<li
+ className="dropdown js-user-authenticated open"
+>
+ <a
+ className="dropdown-toggle navbar-avatar"
+ href="#"
+ onClick={[Function]}
+ >
+ <Connect(Avatar)
+ email="foo@bar.baz"
+ name="foo"
+ size={24}
+ />
+ </a>
+ <ul
+ className="dropdown-menu dropdown-menu-right"
+ >
+ <li
+ className="dropdown-item"
+ >
+ <div
+ className="text-ellipsis text-muted"
+ title="foo"
+ >
+ <strong>
+ foo
+ </strong>
+ </div>
+ <div
+ className="little-spacer-top text-ellipsis text-muted"
+ title="foo@bar.baz"
+ >
+ foo@bar.baz
+ </div>
+ </li>
+ <li
+ className="divider"
+ />
+ <li>
+ <Link
+ onClick={[Function]}
+ onlyActiveOnIndex={false}
+ style={Object {}}
+ to="/account"
+ >
+ my_account.page
+ </Link>
+ </li>
+ <li
+ className="divider"
+ role="separator"
+ />
+ <li
+ className="dropdown-header spacer-left"
+ >
+ my_organizations
+ </li>
+ <li>
+ <OrganizationLink
+ onClick={[Function]}
+ organization={
+ Object {
+ "key": "bar",
+ "name": "bar",
+ }
+ }
+ >
+ <span
+ className="spacer-left"
+ >
+ bar
+ </span>
+ </OrganizationLink>
+ </li>
+ <li>
+ <OrganizationLink
+ onClick={[Function]}
+ organization={
+ Object {
+ "key": "foo",
+ "name": "Foo",
+ }
+ }
+ >
+ <span
+ className="spacer-left"
+ >
+ Foo
+ </span>
+ </OrganizationLink>
+ </li>
+ <li>
+ <OrganizationLink
+ onClick={[Function]}
+ organization={
+ Object {
+ "key": "myorg",
+ "name": "MyOrg",
+ }
+ }
+ >
+ <span
+ className="spacer-left"
+ >
+ MyOrg
+ </span>
+ </OrganizationLink>
+ </li>
+ <li
+ className="divider"
+ role="separator"
+ />
+ <li>
+ <a
+ href="#"
+ onClick={[Function]}
+ >
+ layout.logout
+ </a>
+ </li>
+ </ul>
+</li>
+`;
+
+exports[`should update the component correctly when the user changes to anonymous 1`] = `
+<li
+ className="dropdown js-user-authenticated open"
+>
+ <a
+ className="dropdown-toggle navbar-avatar"
+ href="#"
+ onClick={[Function]}
+ >
+ <Connect(Avatar)
+ email="foo@bar.baz"
+ name="foo"
+ size={24}
+ />
+ </a>
+ <ul
+ className="dropdown-menu dropdown-menu-right"
+ >
+ <li
+ className="dropdown-item"
+ >
+ <div
+ className="text-ellipsis text-muted"
+ title="foo"
+ >
+ <strong>
+ foo
+ </strong>
+ </div>
+ <div
+ className="little-spacer-top text-ellipsis text-muted"
+ title="foo@bar.baz"
+ >
+ foo@bar.baz
+ </div>
+ </li>
+ <li
+ className="divider"
+ />
+ <li>
+ <Link
+ onClick={[Function]}
+ onlyActiveOnIndex={false}
+ style={Object {}}
+ to="/account"
+ >
+ my_account.page
+ </Link>
+ </li>
+ <li>
+ <a
+ href="#"
+ onClick={[Function]}
+ >
+ layout.logout
+ </a>
+ </li>
+ </ul>
+</li>
+`;
+
+exports[`should update the component correctly when the user changes to anonymous 2`] = `
+<li>
+ <a
+ href="#"
+ onClick={[Function]}
+ >
+ layout.login
+ </a>
+</li>
+`;
params: { organizationKey: string }
};
+type Props = {
+ children?: React.Element<*>,
+ location: Object,
+ organization: null | Organization,
+ params: { organizationKey: string },
+ fetchOrganization: string => Promise<*>
+};
+
class OrganizationPage extends React.PureComponent {
mounted: boolean;
-
- props: {
- children?: React.Element<*>,
- location: Object,
- organization: null | Organization,
- params: { organizationKey: string },
- fetchOrganization: string => Promise<*>
- };
-
- state = {
- loading: true
- };
+ props: Props;
+ state = { loading: true };
componentDidMount() {
this.mounted = true;
- this.props.fetchOrganization(this.props.params.organizationKey).then(() => {
- if (this.mounted) {
- this.setState({ loading: false });
- }
- });
+ this.updateOrganization(this.props.params.organizationKey);
+ }
+
+ componentWillReceiveProps(nextProps: Props) {
+ if (nextProps.params.organizationKey !== this.props.params.organizationKey) {
+ this.updateOrganization(nextProps.params.organizationKey);
+ }
}
componentWillUnmount() {
this.mounted = false;
}
+ updateOrganization = (organizationKey: string) => {
+ if (this.mounted) {
+ this.setState({ loading: true });
+ }
+ this.props.fetchOrganization(organizationKey).then(() => {
+ if (this.mounted) {
+ this.setState({ loading: false });
+ }
+ });
+ };
+
render() {
const { organization } = this.props;
it('smoke test', () => {
const wrapper = shallow(
- <UnconnectedOrganizationPage>
+ <UnconnectedOrganizationPage params={{ organizationKey: 'foo' }}>
<div>hello</div>
</UnconnectedOrganizationPage>
);
it('not found', () => {
const wrapper = shallow(
- <UnconnectedOrganizationPage>
+ <UnconnectedOrganizationPage params={{ organizationKey: 'foo' }}>
<div>hello</div>
</UnconnectedOrganizationPage>
);
wrapper.setState({ loading: false });
expect(wrapper).toMatchSnapshot();
});
+
+it('should correctly update when the organization changes', () => {
+ const fetchOrganization = jest.fn(() => Promise.resolve());
+ const wrapper = shallow(
+ <UnconnectedOrganizationPage
+ params={{ organizationKey: 'foo' }}
+ fetchOrganization={fetchOrganization}>
+ <div>hello</div>
+ </UnconnectedOrganizationPage>
+ );
+ wrapper.setProps({ params: { organizationKey: 'bar' } });
+ expect(fetchOrganization.mock.calls).toMatchSnapshot();
+});
exports[`not found 1`] = `<NotFound />`;
+exports[`should correctly update when the organization changes 1`] = `
+Array [
+ Array [
+ "bar",
+ ],
+]
+`;
+
exports[`smoke test 1`] = `null`;
exports[`smoke test 2`] = `
{ id: '2', key: 'b', name: 'B', qualifier: 'TRK' }
];
- const result = shallow(<Projects projects={projects} selection={[]} refresh={jest.fn()} />);
+ const result = shallow(
+ <Projects
+ organization={{ key: 'foo' }}
+ projects={projects}
+ selection={[]}
+ refresh={jest.fn()}
+ />
+ );
expect(result.find('tr').length).toBe(2);
expect(result.find(Checkbox).filterWhere(n => n.prop('checked')).length).toBe(0);
});
const selection = ['a'];
const result = shallow(
- <Projects projects={projects} selection={selection} refresh={jest.fn()} />
+ <Projects
+ organization={{ key: 'foo' }}
+ projects={projects}
+ selection={selection}
+ refresh={jest.fn()}
+ />
);
expect(result.find('tr').length).toBe(2);
expect(result.find(Checkbox).filterWhere(n => n.prop('checked')).length).toBe(1);
manage=Manage
move_left=Move left
move_right=Move right
+my_organizations=My Organizations
new_issues=New issues
new_violations=New violations
new_window=New window
projects / sonarqube.git / commitdiff