nit: Migrates NavDropdown to tsx

graylog2-web-interface/src/components/bootstrap/NavDropdown.jsx → graylog2-web-interface/src/components/bootstrap/ModifiedNavDropdown.jsx

@@ -14,18 +14,13 @@
  * along with this program. If not, see
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
-
-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 (
-    <StyledNavDropdown {...props}
-                       title={<NavItemStateIndicator>{Badge ? <Badge text={title} /> : title}</NavItemStateIndicator>}
-                       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 };

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
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+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 (
+    <StyledNavDropdown {...rest}
+                       id={rest.id}
+                       title={<NavItemStateIndicator>{Badge ? <Badge text={title} /> : title}</NavItemStateIndicator>}
+                       active={isActive} />
+  );
+}
+
+GLNavDropdown.defaultProps = {
+  inactiveTitle: undefined,
+  badge: undefined,
+};
+
+export default GLNavDropdown;

graylog2-web-interface/src/components/navigation/Navigation.test.tsx

@@ -193,7 +193,7 @@ describe('Navigation', () => {
 
       const wrapper = mount(<Navigation />);
 
-      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(<Navigation />);
 
-      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(<Navigation />);
 
-      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(<Navigation />);
 
-      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', () => {
         </DefaultProviders>
       ));
 
-      expect(wrapper.find('NavDropdown[title="Neat Stuff / Something Else"]')).toExist();
+      expect(wrapper.findWhere((node: any) => (node.type() && node.text() === 'Neat Stuff / Something Else'))).toExist();
     });
   });
 

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;

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';