Adding rowcount label to explore view header (#4059)

superset/assets/javascripts/explore/components/RowCountLabel.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Label } from 'react-bootstrap';
+
+import { t } from '../../locales';
+import { defaultNumberFormatter } from '../../modules/utils';
+import TooltipWrapper from '../../components/TooltipWrapper';
+
+
+const propTypes = {
+  rowcount: PropTypes.number,
+  limit: PropTypes.number,
+};
+
+const defaultProps = {
+};
+
+export default function RowCountLabel({ rowcount, limit }) {
+  const limitReached = rowcount === limit;
+  const bsStyle = (limitReached || rowcount === 0) ? 'warning' : 'default';
+  const formattedRowCount = defaultNumberFormatter(rowcount);
+  const tooltip = (
+    <span>
+      {limitReached &&
+        <div>{t('Limit reached')}</div>}
+      {rowcount}
+    </span>
+  );
+  return (
+    <TooltipWrapper label="tt-rowcount" tooltip={tooltip}>
+      <Label
+        bsStyle={bsStyle}
+        style={{ fontSize: '10px', marginRight: '5px', cursor: 'pointer' }}
+      >
+        {formattedRowCount} rows
+      </Label>
+    </TooltipWrapper>
+  );
+}
+
+RowCountLabel.propTypes = propTypes;
+RowCountLabel.defaultProps = defaultProps;