From d62aa96354781052fa4b7ab9921b40b91f43bb5e Mon Sep 17 00:00:00 2001 From: Ville Brofeldt Date: Wed, 27 Apr 2022 11:35:36 +0300 Subject: [PATCH] chore: fix explore pills --- .../src/components/AlteredSliceTag/index.jsx | 16 ++++++++++++---- .../src/components/CachedLabel/index.tsx | 2 +- .../src/components/Label/Label.stories.tsx | 3 ++- .../src/components/Label/index.tsx | 17 ++++++++++++++--- .../components/DataTableControl/index.tsx | 8 +------- .../RowCountLabel/RowCountLabel.stories.tsx | 13 ++++++------- .../explore/components/RowCountLabel/index.tsx | 13 +++++++------ 7 files changed, 43 insertions(+), 29 deletions(-) diff --git a/superset-frontend/src/components/AlteredSliceTag/index.jsx b/superset-frontend/src/components/AlteredSliceTag/index.jsx index e4a0d1bdebea7..372cf8e60ce7f 100644 --- 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 ( - - {t('Altered')} - + {t('Altered')} ); } diff --git a/superset-frontend/src/components/CachedLabel/index.tsx b/superset-frontend/src/components/CachedLabel/index.tsx index a401ab1e0e57c..a6c74cb8eb62d 100644 --- a/superset-frontend/src/components/CachedLabel/index.tsx +++ b/superset-frontend/src/components/CachedLabel/index.tsx @@ -48,7 +48,7 @@ const CacheLabel: React.FC = ({ onMouseOver={() => setHovered(true)} onMouseOut={() => setHovered(false)} > - {t('cached')} + {t('Cached')} ); diff --git a/superset-frontend/src/components/Label/Label.stories.tsx b/superset-frontend/src/components/Label/Label.stories.tsx index 07fc7c09fa744..90be09651fa96 100644 --- 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 index e66437da7d8a5..508d83f961c2f 100644 --- 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; 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 index 7a25c374bd8ac..791f5f8ff3898 100644 --- 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[]; loading: boolean; -}) => ( - -); +}) => ; 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 index 716830f9ca32b..558f14f308c28 100644 --- 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 index c612856817c21..607ea0004f172 100644 --- 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) && ( {limitReached &&
{t('Limit reached')}
} {loading ? 'Loading' : rowcount} @@ -44,7 +43,9 @@ export default function RowCountLabel(props: RowCountLabelProps) { return ( );