ref(ts): Refactor MenuItem component (#14312)

* ref(ts): Refactor MenuItem component

* update snapshot

package.json

@@ -21,6 +21,7 @@
     "@sentry/browser": "5.6.0-beta.4",
     "@sentry/integrations": "5.6.0-beta.4",
     "@types/echarts": "^4.1.10",
+    "@types/classnames": "^2.2.0",
     "@types/jquery": "^2.0.53",
     "@types/lodash": "^4.14.134",
     "@types/moment-timezone": "^0.5.12",

src/sentry/static/sentry/app/components/menuItem.jsx → src/sentry/static/sentry/app/components/menuItem.tsx

@@ -3,7 +3,22 @@ import React from 'react';
 import {Link} from 'react-router';
 import classNames from 'classnames';
 
-class MenuItem extends React.Component {
+type Props = {
+  header?: boolean;
+  divider?: boolean;
+  title?: string;
+  onSelect?: (eventKey: any) => void;
+  eventKey?: any;
+  isActive?: boolean;
+  noAnchor?: boolean;
+  href?: string;
+  to?: string;
+  query?: object;
+  className?: string;
+  onClick?: (evt: React.MouseEvent) => void;
+};
+
+class MenuItem extends React.Component<Props> {
   static propTypes = {
     header: PropTypes.bool,
     divider: PropTypes.bool,
@@ -17,26 +32,25 @@ class MenuItem extends React.Component {
     // router link
     to: PropTypes.string,
     query: PropTypes.object,
-    linkClassName: PropTypes.string,
+    className: PropTypes.string,
     onClick: PropTypes.func,
   };
 
-  handleClick = e => {
+  handleClick = (e: React.MouseEvent): void => {
     if (this.props.onSelect) {
       e.preventDefault();
       this.props.onSelect(this.props.eventKey);
     }
   };
 
-  renderAnchor = () => {
+  renderAnchor = (): React.ReactNode => {
     if (this.props.to) {
       return (
         <Link
           to={{pathname: this.props.to, query: this.props.query}}
           title={this.props.title}
           onClick={this.handleClick}
-          className={this.props.linkClassName}
-          tabIndex="-1"
+          tabIndex={-1}
         >
           {this.props.children}
         </Link>
@@ -47,8 +61,7 @@ class MenuItem extends React.Component {
         title={this.props.title}
         onClick={this.handleClick}
         href={this.props.href}
-        className={this.props.linkClassName}
-        tabIndex="-1"
+        tabIndex={-1}
       >
         {this.props.children}
       </a>
@@ -62,7 +75,7 @@ class MenuItem extends React.Component {
       active: this.props.isActive,
     };
 
-    let children = null;
+    let children: React.ReactNode | null = null;
     if (this.props.noAnchor) {
       children = this.props.children;
     } else if (this.props.header) {
@@ -74,8 +87,6 @@ class MenuItem extends React.Component {
     return (
       <li
         role="presentation"
-        title={null}
-        href={null}
         className={classNames(this.props.className, classes)}
         onClick={this.props.onClick}
       >

tests/js/spec/components/actions/__snapshots__/resolve.spec.jsx.snap

@@ -223,9 +223,7 @@ exports[`ResolveActions with confirmation step renders 1`] = `
                 >
                   <li
                     className="dropdown-header"
-                    href={null}
                     role="presentation"
-                    title={null}
                   >
                     Resolved In
                   </li>
@@ -235,9 +233,7 @@ exports[`ResolveActions with confirmation step renders 1`] = `
                 >
                   <li
                     className=""
-                    href={null}
                     role="presentation"
-                    title={null}
                   >
                     <Tooltip
                       containerDisplayMode="block"
@@ -676,9 +672,7 @@ exports[`ResolveActions without confirmation renders 1`] = `
                 >
                   <li
                     className="dropdown-header"
-                    href={null}
                     role="presentation"
-                    title={null}
                   >
                     Resolved In
                   </li>
@@ -688,9 +682,7 @@ exports[`ResolveActions without confirmation renders 1`] = `
                 >
                   <li
                     className=""
-                    href={null}
                     role="presentation"
-                    title={null}
                   >
                     <Tooltip
                       containerDisplayMode="block"

yarn.lock

@@ -1721,6 +1721,11 @@
   dependencies:
     "@types/zrender" "*"
 
+"@types/classnames@2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.0.tgz#f2312039e780bdf89d7d4102a26ec11de5ec58aa"
+  integrity sha1-8jEgOeeAvfidfUECom7BHeXsWKo=
+
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"