diff --git a/CHANGELOG.md b/CHANGELOG.md index dd934d9665..c15d96f177 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ## [9.0.1] - unreleased ### Added +- Display timezone for session timeout in user menu [#1764](https://github.com/greenbone/gsa/pull/1764) ### Changed - Fix react-scripts dependency because it broke tooltips [#1760](https://github.com/greenbone/gsa/pull/1760) diff --git a/gsa/src/web/components/date/datetime.js b/gsa/src/web/components/date/datetime.js index 52b59d7de8..0e6b995b78 100644 --- a/gsa/src/web/components/date/datetime.js +++ b/gsa/src/web/components/date/datetime.js @@ -16,19 +16,21 @@ * along with this program; if not, write to the Free Software * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA. */ -import {connect} from 'react-redux'; - import {dateTimeWithTimeZone, ensureDate} from 'gmp/locale/date'; -import {isDefined} from 'gmp/utils/identity'; - -import {getTimezone} from 'web/store/usersettings/selectors'; +import {isDefined, hasValue} from 'gmp/utils/identity'; import PropTypes from 'web/utils/proptypes'; +import useUserTimezone from 'web/utils/useUserTimezone'; const DateTime = ({formatter = dateTimeWithTimeZone, timezone, date}) => { date = ensureDate(date); + const userTimezone = useUserTimezone(); + + if (!hasValue(timezone)) { + timezone = userTimezone; + } return !isDefined(date) || !date.isValid() ? null : formatter(date, timezone); }; @@ -38,10 +40,4 @@ DateTime.propTypes = { timezone: PropTypes.string, }; -const mapStateToProps = (rootState, ownProps) => ({ - timezone: isDefined(ownProps.timezone) - ? ownProps.timezone - : getTimezone(rootState), -}); - -export default connect(mapStateToProps)(DateTime); +export default DateTime; diff --git a/gsa/src/web/components/menu/usermenu.js b/gsa/src/web/components/menu/usermenu.js index 1f6f68ef08..1155a53296 100644 --- a/gsa/src/web/components/menu/usermenu.js +++ b/gsa/src/web/components/menu/usermenu.js @@ -18,14 +18,12 @@ */ import React from 'react'; -import {connect} from 'react-redux'; - -import {withRouter} from 'react-router-dom'; +import {useHistory} from 'react-router-dom'; import styled, {keyframes} from 'styled-components'; import _ from 'gmp/locale'; -import {longDate} from 'gmp/locale/date'; +import {dateTimeWithTimeZone} from 'gmp/locale/date'; import LogoutIcon from 'web/components/icon/logouticon'; import MySettingsIcon from 'web/components/icon/mysettingsicon'; @@ -35,12 +33,11 @@ import UserIcon from 'web/components/icon/usericon'; import Divider from 'web/components/layout/divider'; import Link from 'web/components/link/link'; -import compose from 'web/utils/compose'; -import PropTypes from 'web/utils/proptypes'; import Theme from 'web/utils/theme'; -import withGmp from 'web/utils/withGmp'; - -import {getUsername, getSessionTimeout} from 'web/store/usersettings/selectors'; +import useGmp from 'web/utils/useGmp'; +import useUserName from 'web/utils/useUserName'; +import useUserSessionTimeout from 'web/utils/useUserSessionTimeout'; +import useUserTimezone from 'web/utils/useUserTimezone'; const UserMenu = styled.span` display: inline-flex; @@ -131,84 +128,62 @@ const StyledLink = styled(Link)` } `; -class UserMenuContainer extends React.Component { - constructor(...args) { - super(...args); - this.handleLogout = this.handleLogout.bind(this); - } - - handleLogout(event) { - const {gmp, history} = this.props; +const UserMenuContainer = () => { + const sessionTimeout = useUserSessionTimeout(); + const userTimezone = useUserTimezone(); + const userName = useUserName(); + const gmp = useGmp(); + const history = useHistory(); + const handleLogout = event => { event.preventDefault(); gmp.doLogout().then(() => { history.push('/login?type=logout'); }); - } - render() { - const {sessionTimeout, userName} = this.props; - - return ( - - -
- - + }; + + return ( + + +
+ + + + + {userName} + + + + + + + {_('Session timeout: {{date}}', { + date: dateTimeWithTimeZone(sessionTimeout, userTimezone), + })} + + + + + - - {userName} + + {_('My Settings')} - - - - - - {_('Session timeout: {{date}}', { - date: longDate(sessionTimeout), - })} - - - - - - - - {_('My Settings')} - - - - this.handleLogout(event)} - > - - - {_('Log Out')} - - - -
- - ); - } -} - -UserMenuContainer.propTypes = { - gmp: PropTypes.gmp.isRequired, - history: PropTypes.object.isRequired, - icon: PropTypes.element, - sessionTimeout: PropTypes.date, - userName: PropTypes.string, + + + + + + {_('Log Out')} + + + +
+ + ); }; -export default compose( - withGmp, - withRouter, - connect(rootState => ({ - sessionTimeout: getSessionTimeout(rootState), - userName: getUsername(rootState), - })), -)(UserMenuContainer); +export default UserMenuContainer; // vim: set ts=2 sw=2 tw=80: diff --git a/gsa/src/web/utils/__tests__/useGmp.js b/gsa/src/web/utils/__tests__/useGmp.js new file mode 100644 index 0000000000..f921a35838 --- /dev/null +++ b/gsa/src/web/utils/__tests__/useGmp.js @@ -0,0 +1,42 @@ +/* Copyright (C) 2019 Greenbone Networks GmbH + * + * SPDX-License-Identifier: GPL-2.0-or-later + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU General Public License + * as published by the Free Software Foundation; either version 2 + * 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 General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program; if not, write to the Free Software + * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA. + */ +import React from 'react'; + +import {rendererWith} from '../testing'; + +import useGmp from '../useGmp'; + +const TestUseGmp = () => { + const gmp = useGmp(); + return {gmp.foo()}; +}; + +describe('useGmp tests', () => { + test('should return the current gmp object', () => { + const foo = jest.fn().mockReturnValue('foo'); + const gmp = {foo}; + + const {render} = rendererWith({gmp}); + + const {element} = render(); + + expect(foo).toHaveBeenCalled(); + expect(element).toHaveTextContent(/^foo$/); + }); +}); diff --git a/gsa/src/web/utils/__tests__/useUserName.js b/gsa/src/web/utils/__tests__/useUserName.js new file mode 100644 index 0000000000..7ad5772014 --- /dev/null +++ b/gsa/src/web/utils/__tests__/useUserName.js @@ -0,0 +1,39 @@ +/* Copyright (C) 2019 Greenbone Networks GmbH + * + * SPDX-License-Identifier: GPL-2.0-or-later + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU General Public License + * as published by the Free Software Foundation; either version 2 + * 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 General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program; if not, write to the Free Software + * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA. + */ +import React from 'react'; + +import {setUsername} from 'web/store/usersettings/actions'; + +import {rendererWith} from '../testing'; + +import useUserName from '../useUserName'; + +const TestUserName = () => {useUserName()}; + +describe('useUserName tests', () => { + test('should return the users name', () => { + const {render, store} = rendererWith({store: true}); + + store.dispatch(setUsername('foo')); + + const {element} = render(); + + expect(element).toHaveTextContent(/^foo$/); + }); +}); diff --git a/gsa/src/web/utils/__tests__/useUserSessionTimeout.js b/gsa/src/web/utils/__tests__/useUserSessionTimeout.js new file mode 100644 index 0000000000..2a044af9ab --- /dev/null +++ b/gsa/src/web/utils/__tests__/useUserSessionTimeout.js @@ -0,0 +1,46 @@ +/* Copyright (C) 2019 Greenbone Networks GmbH + * + * SPDX-License-Identifier: GPL-2.0-or-later + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU General Public License + * as published by the Free Software Foundation; either version 2 + * 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 General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program; if not, write to the Free Software + * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA. + */ +import React from 'react'; + +import {dateFormat} from 'gmp/locale/date'; +import date from 'gmp/models/date'; + +import {setSessionTimeout} from 'web/store/usersettings/actions'; + +import {rendererWith} from '../testing'; + +import useUserSessionTimeout from '../useUserSessionTimeout'; + +const TestUserSessionTimeout = () => ( + {dateFormat(useUserSessionTimeout(), 'DD-MM-YY')} +); + +describe('useUserSessionTimeout tests', () => { + test('should return the users session timeout', () => { + const {render, store} = rendererWith({store: true}); + + const timeout = date('2019-10-10'); + + store.dispatch(setSessionTimeout(timeout)); + + const {element} = render(); + + expect(element).toHaveTextContent(/^10-10-19$/); + }); +}); diff --git a/gsa/src/web/utils/__tests__/useUserTimezone.js b/gsa/src/web/utils/__tests__/useUserTimezone.js new file mode 100644 index 0000000000..e15763407d --- /dev/null +++ b/gsa/src/web/utils/__tests__/useUserTimezone.js @@ -0,0 +1,39 @@ +/* Copyright (C) 2019 Greenbone Networks GmbH + * + * SPDX-License-Identifier: GPL-2.0-or-later + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU General Public License + * as published by the Free Software Foundation; either version 2 + * 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 General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program; if not, write to the Free Software + * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA. + */ +import React from 'react'; + +import {setTimezone} from 'web/store/usersettings/actions'; + +import {rendererWith} from '../testing'; + +import useUserTimezone from '../useUserTimezone'; + +const TestUserTimezone = () => {useUserTimezone()}; + +describe('useUserTimezone tests', () => { + test('should return the users timezone', () => { + const {render, store} = rendererWith({store: true}); + + store.dispatch(setTimezone('CET')); + + const {element} = render(); + + expect(element).toHaveTextContent(/^CET$/); + }); +}); diff --git a/gsa/src/web/utils/useGmp.js b/gsa/src/web/utils/useGmp.js new file mode 100644 index 0000000000..5628737107 --- /dev/null +++ b/gsa/src/web/utils/useGmp.js @@ -0,0 +1,25 @@ +/* Copyright (C) 2019 Greenbone Networks GmbH + * + * SPDX-License-Identifier: GPL-2.0-or-later + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU General Public License + * as published by the Free Software Foundation; either version 2 + * 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 General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program; if not, write to the Free Software + * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA. + */ +import {useContext} from 'react'; + +import GmpContext from 'web/components/provider/gmpprovider'; + +const useGmp = () => useContext(GmpContext); + +export default useGmp; diff --git a/gsa/src/web/utils/useUserName.js b/gsa/src/web/utils/useUserName.js new file mode 100644 index 0000000000..c324628d60 --- /dev/null +++ b/gsa/src/web/utils/useUserName.js @@ -0,0 +1,25 @@ +/* Copyright (C) 2019 Greenbone Networks GmbH + * + * SPDX-License-Identifier: GPL-2.0-or-later + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU General Public License + * as published by the Free Software Foundation; either version 2 + * 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 General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program; if not, write to the Free Software + * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA. + */ +import {useSelector} from 'react-redux'; + +import {getUsername} from 'web/store/usersettings/selectors'; + +const useUserName = () => useSelector(getUsername); + +export default useUserName; diff --git a/gsa/src/web/utils/useUserSessionTimeout.js b/gsa/src/web/utils/useUserSessionTimeout.js new file mode 100644 index 0000000000..8915ea3c6b --- /dev/null +++ b/gsa/src/web/utils/useUserSessionTimeout.js @@ -0,0 +1,25 @@ +/* Copyright (C) 2019 Greenbone Networks GmbH + * + * SPDX-License-Identifier: GPL-2.0-or-later + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU General Public License + * as published by the Free Software Foundation; either version 2 + * 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 General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program; if not, write to the Free Software + * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA. + */ +import {useSelector} from 'react-redux'; + +import {getSessionTimeout} from 'web/store/usersettings/selectors'; + +const useUserSessionTimeout = () => useSelector(getSessionTimeout); + +export default useUserSessionTimeout; diff --git a/gsa/src/web/utils/useUserTimezone.js b/gsa/src/web/utils/useUserTimezone.js new file mode 100644 index 0000000000..e3cc4b25c2 --- /dev/null +++ b/gsa/src/web/utils/useUserTimezone.js @@ -0,0 +1,25 @@ +/* Copyright (C) 2019 Greenbone Networks GmbH + * + * SPDX-License-Identifier: GPL-2.0-or-later + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU General Public License + * as published by the Free Software Foundation; either version 2 + * 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 General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program; if not, write to the Free Software + * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA. + */ +import {useSelector} from 'react-redux'; + +import {getTimezone} from 'web/store/usersettings/selectors'; + +const useUserTimezone = () => useSelector(getTimezone); + +export default useUserTimezone;