chore: fix explore pills

apache · Apr 27, 2022 · d62aa96 · d62aa96
1 parent ad878b0
commit d62aa96
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 29 deletions.
diff --git a/superset-frontend/src/components/AlteredSliceTag/index.jsx b/superset-frontend/src/components/AlteredSliceTag/index.jsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { isEqual, isEmpty } from 'lodash';
-import { t } from '@superset-ui/core';
+import { styled, t } from '@superset-ui/core';
 import { sanitizeFormData } from 'src/explore/exploreUtils/formData';
 import getControlsForVizType from 'src/utils/getControlsForVizType';
 import { safeStringify } from 'src/utils/safeStringify';
@@ -32,6 +32,16 @@ const propTypes = {
   currentFormData: PropTypes.object.isRequired,
 };
 
+const StyledLabel = styled.span`
+  ${({ theme }) => `
+    font-size: ${theme.typography.sizes.s}px;
+    background-color: ${theme.colors.alert.base};
+
+    &: hover {
+      background-color: ${theme.colors.alert.dark1};
+    };`}
+`;
+
 function alterForComparison(value) {
   // Considering `[]`, `{}`, `null` and `undefined` as identical
   // for this purpose
@@ -183,9 +193,7 @@ export default class AlteredSliceTag extends React.Component {
   renderTriggerNode() {
     return (
       <Tooltip id="difference-tooltip" title={t('Click to see difference')}>
-        <span className="label label-warning" style={{ fontSize: '12px' }}>
-          {t('Altered')}
-        </span>
+        <StyledLabel className="label">{t('Altered')}</StyledLabel>
       </Tooltip>
     );
   }

diff --git a/superset-frontend/src/components/CachedLabel/index.tsx b/superset-frontend/src/components/CachedLabel/index.tsx
@@ -48,7 +48,7 @@ const CacheLabel: React.FC<CacheLabelProps> = ({
         onMouseOver={() => setHovered(true)}
         onMouseOut={() => setHovered(false)}
       >
-        {t('cached')} <i className="fa fa-refresh" />
+        {t('Cached')} <i className="fa fa-refresh" />
       </Label>
     </Tooltip>
   );

diff --git a/superset-frontend/src/components/Label/Label.stories.tsx b/superset-frontend/src/components/Label/Label.stories.tsx
@@ -26,7 +26,8 @@ export default {
   excludeStories: 'options',
 };
 
-export const options = [
+export const options: Type[] = [
+  'alert',
   'default',
   'info',
   'success',

diff --git a/superset-frontend/src/components/Label/index.tsx b/superset-frontend/src/components/Label/index.tsx
@@ -23,6 +23,7 @@ import { useTheme } from '@superset-ui/core';
 export type OnClickHandler = React.MouseEventHandler<HTMLElement>;
 
 export type Type =
+  | 'alert'
   | 'success'
   | 'warning'
   | 'danger'
@@ -45,8 +46,16 @@ export default function Label(props: LabelProps) {
   const theme = useTheme();
   const { colors, transitionTiming } = theme;
   const { type, onClick, children, ...rest } = props;
-  const { primary, secondary, grayscale, success, warning, error, info } =
-    colors;
+  const {
+    alert,
+    primary,
+    secondary,
+    grayscale,
+    success,
+    warning,
+    error,
+    info,
+  } = colors;
 
   let backgroundColor = grayscale.light3;
   let backgroundColorHover = onClick ? primary.light2 : grayscale.light3;
@@ -58,7 +67,9 @@ export default function Label(props: LabelProps) {
     color = grayscale.light4;
 
     let baseColor;
-    if (type === 'success') {
+    if (type === 'alert') {
+      baseColor = alert;
+    } else if (type === 'success') {
       baseColor = success;
     } else if (type === 'warning') {
       baseColor = warning;

diff --git a/superset-frontend/src/explore/components/DataTableControl/index.tsx b/superset-frontend/src/explore/components/DataTableControl/index.tsx
@@ -127,13 +127,7 @@ export const RowCount = ({
 }: {
   data?: Record<string, any>[];
   loading: boolean;
-}) => (
-  <RowCountLabel
-    rowcount={data?.length ?? 0}
-    loading={loading}
-    suffix={t('rows retrieved')}
-  />
-);
+}) => <RowCountLabel rowcount={data?.length ?? 0} loading={loading} />;
 
 enum FormatPickerValue {
   Formatted,

diff --git a/superset-frontend/src/explore/components/RowCountLabel/RowCountLabel.stories.tsx b/superset-frontend/src/explore/components/RowCountLabel/RowCountLabel.stories.tsx
@@ -17,17 +17,21 @@
  * under the License.
  */
 import React from 'react';
-import RowCountLabel from '.';
+import RowCountLabel, { RowCountLabelProps } from '.';
 
 export default {
   title: 'RowCountLabel',
   component: RowCountLabel,
 };
 
-const options = {
+const options: { [key in string]: RowCountLabelProps } = {
   loading: {
     loading: true,
   },
+  single: {
+    rowcount: 1,
+    limit: 100,
+  },
   full: {
     rowcount: 100,
     limit: 100,
@@ -36,10 +40,6 @@ const options = {
     rowcount: 50,
     limit: 100,
   },
-  suffix: {
-    rowcount: 1,
-    suffix: 'suffix',
-  },
 };
 
 export const RowCountLabelGallery = () => (
@@ -51,7 +51,6 @@ export const RowCountLabelGallery = () => (
           loading={options[name].loading}
           rowcount={options[name].rowcount}
           limit={options[name].limit}
-          suffix={options[name].suffix}
         />
       </>
     ))}

diff --git a/superset-frontend/src/explore/components/RowCountLabel/index.tsx b/superset-frontend/src/explore/components/RowCountLabel/index.tsx
@@ -17,25 +17,24 @@
  * under the License.
  */
 import React from 'react';
-import { getNumberFormatter, t } from '@superset-ui/core';
+import { getNumberFormatter, t, tn } from '@superset-ui/core';
 
 import Label from 'src/components/Label';
 import { Tooltip } from 'src/components/Tooltip';
 
 type RowCountLabelProps = {
-  rowcount: number;
+  rowcount?: number;
   limit?: number;
-  suffix?: string;
   loading?: boolean;
 };
 
 export default function RowCountLabel(props: RowCountLabelProps) {
-  const { rowcount = 0, limit, suffix = t('rows'), loading } = props;
+  const { rowcount = 0, limit, loading } = props;
   const limitReached = rowcount === limit;
   const type =
     limitReached || (rowcount === 0 && !loading) ? 'danger' : 'default';
   const formattedRowCount = getNumberFormatter()(rowcount);
-  const tooltip = (
+  const tooltip = (limitReached || loading) && (
     <span>
       {limitReached && <div>{t('Limit reached')}</div>}
       {loading ? 'Loading' : rowcount}
@@ -44,7 +43,9 @@ export default function RowCountLabel(props: RowCountLabelProps) {
   return (
     <Tooltip id="tt-rowcount-tooltip" title={tooltip}>
       <Label type={type} data-test="row-count-label">
-        {loading ? 'Loading...' : `${formattedRowCount} ${suffix}`}
+        {loading
+          ? 'Loading...'
+          : tn('%s row', '%s rows', rowcount, formattedRowCount)}
       </Label>
     </Tooltip>
   );