From ecef9944f2e030c27957d876ca9b84af1c766664 Mon Sep 17 00:00:00 2001
From: Matej Minar <matej.minar@sentry.io>
Date: Thu, 9 Jan 2020 14:34:12 +0100
Subject: [PATCH] ref(ts): Convert <QueryCount> to typescript

---
 .../{queryCount.jsx => queryCount.tsx}        | 27 ++++++++++++++-----
 .../__snapshots__/groupSimilar.spec.jsx.snap  |  2 --
 2 files changed, 20 insertions(+), 9 deletions(-)
 rename src/sentry/static/sentry/app/components/{queryCount.jsx => queryCount.tsx} (67%)

diff --git a/src/sentry/static/sentry/app/components/queryCount.jsx b/src/sentry/static/sentry/app/components/queryCount.tsx
similarity index 67%
rename from src/sentry/static/sentry/app/components/queryCount.jsx
rename to src/sentry/static/sentry/app/components/queryCount.tsx
index f5b98fa0f183a4..58ee07c5eb8382 100644
--- a/src/sentry/static/sentry/app/components/queryCount.jsx
+++ b/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,7 +42,7 @@ function QueryCount({className, count, max, hideIfEmpty, inline}) {
       <span>)</span>
     </div>
   );
-}
+};
 QueryCount.propTypes = {
   className: PropTypes.string,
   count: PropTypes.number,
@@ -33,9 +50,5 @@ QueryCount.propTypes = {
   hideIfEmpty: PropTypes.bool,
   inline: PropTypes.bool,
 };
-QueryCount.defaultProps = {
-  hideIfEmpty: true,
-  inline: true,
-};
 
 export default QueryCount;
diff --git a/tests/js/spec/views/organizationGroupDetails/__snapshots__/groupSimilar.spec.jsx.snap b/tests/js/spec/views/organizationGroupDetails/__snapshots__/groupSimilar.spec.jsx.snap
index 3b516d58eb89e6..8855dc8a117212 100644
--- a/tests/js/spec/views/organizationGroupDetails/__snapshots__/groupSimilar.spec.jsx.snap
+++ b/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"