ref(ts): Convert <QueryCount> to typescript

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

@@ -2,14 +2,31 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
+import {defined} from 'app/utils';
+
+type Props = {
+  count?: number;
+  max?: number;
+  hideIfEmpty?: boolean;
+  inline?: boolean;
+  className?: string;
+};
+
 /**
  * Displays a number count. If `max` is specified, then give representation
  * of count, i.e. "1000+"
  *
  * Render nothing by default if `count` is falsy.
  */
-function QueryCount({className, count, max, hideIfEmpty, inline}) {
-  const countOrMax = typeof max !== 'undefined' && count >= max ? `${max}+` : count;
+
+const QueryCount: React.FC<Props> = ({
+  className,
+  count,
+  max,
+  hideIfEmpty = true,
+  inline = true,
+}) => {
+  const countOrMax = defined(count) && defined(max) && count >= max ? `${max}+` : count;
   const cx = classNames('query-count', className, {
     inline,
   });
@@ -25,17 +42,13 @@ function QueryCount({className, count, max, hideIfEmpty, inline}) {
       <span>)</span>
     </div>
   );
-}
+};
 QueryCount.propTypes = {
   className: PropTypes.string,
   count: PropTypes.number,
   max: PropTypes.number,
   hideIfEmpty: PropTypes.bool,
   inline: PropTypes.bool,
 };
-QueryCount.defaultProps = {
-  hideIfEmpty: true,
-  inline: true,
-};
 
 export default QueryCount;

tests/js/spec/views/organizationGroupDetails/__snapshots__/groupSimilar.spec.jsx.snap

@@ -317,8 +317,6 @@ exports[`Issues Similar View renders with mocked data 1`] = `
               </span>
               <QueryCount
                 count={4}
-                hideIfEmpty={true}
-                inline={true}
               >
                 <div
                   className="query-count inline"