diff --git a/graylog2-web-interface/src/components/bootstrap/NavDropdown.jsx b/graylog2-web-interface/src/components/bootstrap/ModifiedNavDropdown.jsx similarity index 56% rename from graylog2-web-interface/src/components/bootstrap/NavDropdown.jsx rename to graylog2-web-interface/src/components/bootstrap/ModifiedNavDropdown.jsx index 4b9c55383897..0784e0b34748 100644 --- a/graylog2-web-interface/src/components/bootstrap/NavDropdown.jsx +++ b/graylog2-web-interface/src/components/bootstrap/ModifiedNavDropdown.jsx @@ -14,18 +14,13 @@ * along with this program. If not, see * . */ - -import * as React from 'react'; // eslint-disable-next-line no-restricted-imports -import { NavDropdown as BootstrapNavDropdown } from 'react-bootstrap'; +import { NavDropdown } from 'react-bootstrap'; import styled from 'styled-components'; -import PropTypes from 'prop-types'; - -import NavItemStateIndicator from 'components/common/NavItemStateIndicator'; import menuItemStyles from './styles/menuItem'; -class ModifiedBootstrapNavDropdown extends BootstrapNavDropdown { +class ModifiedBootstrapNavDropdown extends NavDropdown { // eslint-disable-next-line class-methods-use-this isActive({ props }, activeKey, activeHref) { // NOTE: had to override library as it doesn't respect setting `active={false}` @@ -45,35 +40,9 @@ class ModifiedBootstrapNavDropdown extends BootstrapNavDropdown { } } -const StyledNavDropdown = styled(BootstrapNavDropdown)` - ${menuItemStyles} -`; - -const NavDropdown = ({ title, inactiveTitle, badge: Badge, ...props }) => { - const isActive = inactiveTitle ? inactiveTitle !== title : undefined; - - return ( - {Badge ? : title}} - active={isActive} /> - ); -}; - -NavDropdown.propTypes = { - title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired, - inactiveTitle: PropTypes.string, - badge: PropTypes.func, -}; - -NavDropdown.defaultProps = { - inactiveTitle: undefined, - badge: undefined, -}; - const ModifiedNavDropdown = styled(ModifiedBootstrapNavDropdown)` ${menuItemStyles} `; -/** @component */ -export default NavDropdown; +// eslint-disable-next-line import/prefer-default-export export { ModifiedNavDropdown }; diff --git a/graylog2-web-interface/src/components/bootstrap/NavDropdown.tsx b/graylog2-web-interface/src/components/bootstrap/NavDropdown.tsx new file mode 100644 index 000000000000..2c2891a67bdc --- /dev/null +++ b/graylog2-web-interface/src/components/bootstrap/NavDropdown.tsx @@ -0,0 +1,53 @@ +/* + * Copyright (C) 2020 Graylog, Inc. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the Server Side Public License, version 1, + * as published by MongoDB, Inc. + * + * 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 + * Server Side Public License for more details. + * + * You should have received a copy of the Server Side Public License + * along with this program. If not, see + * . + */ +import * as React from 'react'; +import styled from 'styled-components'; +// eslint-disable-next-line no-restricted-imports +import { NavDropdown } from 'react-bootstrap'; + +import NavItemStateIndicator from 'components/common/NavItemStateIndicator'; + +import menuItemStyles from './styles/menuItem'; + +const StyledNavDropdown = styled(NavDropdown)` + ${menuItemStyles} +`; + +type Props = { + title: string, + inactiveTitle?: string, + badge?: React.ComponentType<{ text: string }>, + [key: string]: any, +}; + +function GLNavDropdown({ title, inactiveTitle, badge: Badge, ...rest }: Props) { + const isActive = inactiveTitle ? inactiveTitle !== title : undefined; + + return ( + {Badge ? : title}} + active={isActive} /> + ); +} + +GLNavDropdown.defaultProps = { + inactiveTitle: undefined, + badge: undefined, +}; + +export default GLNavDropdown; diff --git a/graylog2-web-interface/src/components/navigation/Navigation.test.tsx b/graylog2-web-interface/src/components/navigation/Navigation.test.tsx index 61aa55ad8cbd..a48ec52a571e 100644 --- a/graylog2-web-interface/src/components/navigation/Navigation.test.tsx +++ b/graylog2-web-interface/src/components/navigation/Navigation.test.tsx @@ -193,7 +193,7 @@ describe('Navigation', () => { const wrapper = mount(); - expect(wrapper.find('NavDropdown[title="Neat Stuff"]')).not.toExist(); + expect(wrapper.findWhere((node: any) => (node.type() && node.text() === 'Neat Stuff'))).not.toExist(); }); it('renders dropdown contributed by plugin if permissions are sufficient', () => { @@ -203,20 +203,20 @@ describe('Navigation', () => { const wrapper = mount(); - expect(wrapper.find('NavDropdown[title="Neat Stuff"]')).toExist(); + expect(wrapper.findWhere((node: any) => (node.type() && node.text() === 'Neat Stuff'))).toExist(); }); it('does not render dropdown contributed by plugin if required feature flag is not enabled', () => { const wrapper = mount(); - expect(wrapper.find('NavDropdown[title="Feature flag dropdown test"]')).not.toExist(); + expect(wrapper.findWhere((node: any) => (node.type() && node.text() === 'Feature flag dropdown test'))).not.toExist(); }); it('renders dropdown contributed by plugin if required feature flag is enabled', () => { asMock(AppConfig.isFeatureEnabled).mockReturnValue(true); const wrapper = mount(); - expect(wrapper.find('NavDropdown[title="Feature flag dropdown test"]')).toExist(); + expect(wrapper.findWhere((node: any) => (node.type() && node.text() === 'Feature flag dropdown test'))).toExist(); }); it('sets dropdown title based on match', () => { @@ -239,7 +239,7 @@ describe('Navigation', () => { )); - expect(wrapper.find('NavDropdown[title="Neat Stuff / Something Else"]')).toExist(); + expect(wrapper.findWhere((node: any) => (node.type() && node.text() === 'Neat Stuff / Something Else'))).toExist(); }); }); diff --git a/graylog2-web-interface/src/pages/LoginPage.tsx b/graylog2-web-interface/src/pages/LoginPage.tsx index f82512ad0c11..d53b311357fe 100644 --- a/graylog2-web-interface/src/pages/LoginPage.tsx +++ b/graylog2-web-interface/src/pages/LoginPage.tsx @@ -87,15 +87,11 @@ const useValidateSession = () => { const [didValidateSession, setDidValidateSession] = useState(false); useEffect(() => { - const sessionPromise = SessionActions.validate().then((response) => { + SessionActions.validate().then((response) => { setDidValidateSession(true); return response; }); - - return () => { - sessionPromise.cancel(); - }; }, []); return didValidateSession; diff --git a/graylog2-web-interface/src/views/components/AdaptableQueryTabs.tsx b/graylog2-web-interface/src/views/components/AdaptableQueryTabs.tsx index f4dec13c665e..61803edad112 100644 --- a/graylog2-web-interface/src/views/components/AdaptableQueryTabs.tsx +++ b/graylog2-web-interface/src/views/components/AdaptableQueryTabs.tsx @@ -23,7 +23,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import { OrderedSet } from 'immutable'; import UserNotification from 'util/UserNotification'; -import { ModifiedNavDropdown as NavDropdown } from 'components/bootstrap/NavDropdown'; +import { ModifiedNavDropdown as NavDropdown } from 'components/bootstrap/ModifiedNavDropdown'; import type { QueryId } from 'views/logic/queries/Query'; import type QueryTitleEditModal from 'views/components/queries/QueryTitleEditModal'; import { Nav, NavItem, MenuItem } from 'components/bootstrap';