From 883a175f631c8ae78480a2901d318d20bdfd911e Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Fri, 25 Mar 2022 17:31:03 +0100 Subject: [PATCH 1/9] feat(explore): Implement new design for dataset panel --- superset-frontend/package-lock.json | 1 + .../superset-ui-chart-controls/package.json | 1 + .../src/components/ColumnOption.tsx | 2 +- .../{ => ColumnTypeLabel}/ColumnTypeLabel.tsx | 50 +++++++++----- .../ColumnTypeLabel/type-icons/field_abc.svg | 21 ++++++ .../type-icons/field_boolean.svg | 21 ++++++ .../ColumnTypeLabel/type-icons/field_date.svg | 21 ++++++ .../type-icons/field_derived.svg | 21 ++++++ .../ColumnTypeLabel/type-icons/field_num.svg | 21 ++++++ .../src/components/MetricOption.tsx | 2 +- .../superset-ui-chart-controls/src/index.ts | 2 +- .../ColumnConfigControl/ColumnConfigItem.tsx | 2 +- .../src/assets/images/icons/drag.svg | 6 +- .../src/components/Icons/index.tsx | 1 + .../FiltersConfigModal/DraggableFilter.tsx | 7 +- .../DatasourcePanelDragOption/index.tsx | 28 ++++---- .../components/DatasourcePanel/index.tsx | 65 +++++++++++++------ .../components/ExploreViewContainer/index.jsx | 2 +- .../controls/OptionControls/index.tsx | 2 +- superset-frontend/webpack.config.js | 1 + 20 files changed, 216 insertions(+), 61 deletions(-) rename superset-frontend/packages/superset-ui-chart-controls/src/components/{ => ColumnTypeLabel}/ColumnTypeLabel.tsx (58%) create mode 100644 superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_abc.svg create mode 100644 superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_boolean.svg create mode 100644 superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_date.svg create mode 100644 superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_derived.svg create mode 100644 superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_num.svg diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index 063b4377fadd8..59582524ea16a 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -58471,6 +58471,7 @@ "prop-types": "^15.7.2" }, "peerDependencies": { + "@ant-design/icons": "^4.2.2", "@emotion/react": "^11.4.1", "@superset-ui/core": "*", "@testing-library/dom": "^7.29.4", diff --git a/superset-frontend/packages/superset-ui-chart-controls/package.json b/superset-frontend/packages/superset-ui-chart-controls/package.json index f875295ce52f1..bdb6be4daf846 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/package.json +++ b/superset-frontend/packages/superset-ui-chart-controls/package.json @@ -28,6 +28,7 @@ "prop-types": "^15.7.2" }, "peerDependencies": { + "@ant-design/icons": "^4.2.2", "@emotion/react": "^11.4.1", "@superset-ui/core": "*", "@testing-library/dom": "^7.29.4", diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx index b24ca44591262..b794a506167b3 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx @@ -19,7 +19,7 @@ import React, { useState, ReactNode, useLayoutEffect } from 'react'; import { styled } from '@superset-ui/core'; import { Tooltip } from './Tooltip'; -import { ColumnTypeLabel } from './ColumnTypeLabel'; +import { ColumnTypeLabel } from './ColumnTypeLabel/ColumnTypeLabel'; import InfoTooltipWithTrigger from './InfoTooltipWithTrigger'; import CertifiedIconWithTooltip from './CertifiedIconWithTooltip'; import { ColumnMeta } from '../types'; diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx similarity index 58% rename from superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel.tsx rename to superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx index d9a3c8c117049..a4056ebac7a96 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx @@ -17,10 +17,15 @@ * specific language governing permissions and limitations * under the License. */ -import { GenericDataType } from '@superset-ui/core'; -import React from 'react'; +import React, { ReactNode } from 'react'; +import { css, GenericDataType, styled } from '@superset-ui/core'; +import { ClockCircleOutlined } from '@ant-design/icons'; +import FunctionSvg from './type-icons/field_derived.svg'; +import BooleanSvg from './type-icons/field_boolean.svg'; +import StringSvg from './type-icons/field_abc.svg'; +import NumSvg from './type-icons/field_num.svg'; -type StringIcon = '?' | 'ƒ' | 'AGG' | 'ABC' | '#' | 'T/F' | 'time'; +type TypeIcon = ReactNode | '?'; export type ColumnLabelExtendedType = 'expression' | 'aggregate' | ''; @@ -28,31 +33,40 @@ export type ColumnTypeLabelProps = { type?: ColumnLabelExtendedType | GenericDataType; }; +const TypeIconWrapper = styled.div` + ${({ theme }) => css` + display: flex; + justify-content: center; + align-items: center; + width: ${theme.gridUnit * 6}px; + height: ${theme.gridUnit * 6}px; + margin-right: ${theme.gridUnit}px; + + && svg { + margin-right: 0; + margin-left: 0; + } + `}; +`; + export function ColumnTypeLabel({ type }: ColumnTypeLabelProps) { - let stringIcon: StringIcon = '?'; + let typeIcon: TypeIcon = '?'; if (type === '' || type === 'expression') { - stringIcon = 'ƒ'; + typeIcon = ; } else if (type === 'aggregate') { - stringIcon = 'AGG'; + typeIcon = 'AGG'; } else if (type === GenericDataType.STRING) { - stringIcon = 'ABC'; + typeIcon = ; } else if (type === GenericDataType.NUMERIC) { - stringIcon = '#'; + typeIcon = ; } else if (type === GenericDataType.BOOLEAN) { - stringIcon = 'T/F'; + typeIcon = ; } else if (type === GenericDataType.TEMPORAL) { - stringIcon = 'time'; + typeIcon = ; } - const typeIcon = - stringIcon === 'time' ? ( - - ) : ( -
{stringIcon}
- ); - - return {typeIcon}; + return {typeIcon}; } export default ColumnTypeLabel; diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_abc.svg b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_abc.svg new file mode 100644 index 0000000000000..ce519516c8803 --- /dev/null +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_abc.svg @@ -0,0 +1,21 @@ + + + + diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_boolean.svg b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_boolean.svg new file mode 100644 index 0000000000000..a804e7d9faa5a --- /dev/null +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_boolean.svg @@ -0,0 +1,21 @@ + + + + diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_date.svg b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_date.svg new file mode 100644 index 0000000000000..cf796fab70b9b --- /dev/null +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_date.svg @@ -0,0 +1,21 @@ + + + + diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_derived.svg b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_derived.svg new file mode 100644 index 0000000000000..00e2115bf4863 --- /dev/null +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_derived.svg @@ -0,0 +1,21 @@ + + + + diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_num.svg b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_num.svg new file mode 100644 index 0000000000000..69b6aa2e337ed --- /dev/null +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/field_num.svg @@ -0,0 +1,21 @@ + + + + diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx index 0d0754abc14e4..bc6a1503e2a35 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx @@ -19,7 +19,7 @@ import React, { useState, ReactNode, useLayoutEffect } from 'react'; import { styled, Metric, SafeMarkdown } from '@superset-ui/core'; import InfoTooltipWithTrigger from './InfoTooltipWithTrigger'; -import { ColumnTypeLabel } from './ColumnTypeLabel'; +import { ColumnTypeLabel } from './ColumnTypeLabel/ColumnTypeLabel'; import CertifiedIconWithTooltip from './CertifiedIconWithTooltip'; import Tooltip from './Tooltip'; import { getMetricTooltipNode } from './labelUtils'; diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/index.ts b/superset-frontend/packages/superset-ui-chart-controls/src/index.ts index 6f19d0e4686a2..8a151d10e2a4f 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/index.ts +++ b/superset-frontend/packages/superset-ui-chart-controls/src/index.ts @@ -27,7 +27,7 @@ export const sections = sectionsModule; export * from './components/InfoTooltipWithTrigger'; export * from './components/ColumnOption'; -export * from './components/ColumnTypeLabel'; +export * from './components/ColumnTypeLabel/ColumnTypeLabel'; export * from './components/MetricOption'; // React control components diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl/ColumnConfigItem.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl/ColumnConfigItem.tsx index ee9c1ea17b417..06429ef593a5b 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl/ColumnConfigItem.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl/ColumnConfigItem.tsx @@ -19,7 +19,7 @@ import React from 'react'; import { useTheme } from '@superset-ui/core'; import { Popover } from 'antd'; -import ColumnTypeLabel from '../../../components/ColumnTypeLabel'; +import ColumnTypeLabel from '../../../components/ColumnTypeLabel/ColumnTypeLabel'; import ColumnConfigPopover, { ColumnConfigPopoverProps, } from './ColumnConfigPopover'; diff --git a/superset-frontend/src/assets/images/icons/drag.svg b/superset-frontend/src/assets/images/icons/drag.svg index 7e2a5dc69c7b2..9d4aa0a5f941d 100644 --- a/superset-frontend/src/assets/images/icons/drag.svg +++ b/superset-frontend/src/assets/images/icons/drag.svg @@ -16,7 +16,7 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> - - - + + + diff --git a/superset-frontend/src/components/Icons/index.tsx b/superset-frontend/src/components/Icons/index.tsx index 08b13404a04d2..28dbff0b15d5d 100644 --- a/superset-frontend/src/components/Icons/index.tsx +++ b/superset-frontend/src/components/Icons/index.tsx @@ -65,6 +65,7 @@ const IconFileNames = [ 'dataset_virtual', 'download', 'drag', + 'drag_icon', 'edit_alt', 'edit', 'email', diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx index 7a4827c80bcf0..556e3ed32df7b 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx @@ -132,7 +132,12 @@ export const DraggableFilter: React.FC = ({ drag(drop(ref)); return ( - +
{children}
); diff --git a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx index 518f7ebabc8be..6c461004391df 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx @@ -18,29 +18,30 @@ */ import React from 'react'; import { useDrag } from 'react-dnd'; -import { Metric, styled } from '@superset-ui/core'; +import { css, Metric, styled } from '@superset-ui/core'; +import { ColumnMeta } from '@superset-ui/chart-controls'; import { DndItemType } from 'src/explore/components/DndItemType'; import { StyledColumnOption, StyledMetricOption, } from 'src/explore/components/optionRenderers'; -import { ColumnMeta } from '@superset-ui/chart-controls'; +import Icons from 'src/components/Icons'; + import { DatasourcePanelDndItem } from '../types'; const DatasourceItemContainer = styled.div` - display: flex; - align-items: center; - width: 100%; - height: ${({ theme }) => theme.gridUnit * 6}px; - cursor: pointer; - - > div { + ${({ theme }) => css` + display: flex; + align-items: center; + justify-content: space-between; width: 100%; - } + height: ${theme.gridUnit * 6}px; - :hover { - background-color: ${({ theme }) => theme.colors.grayscale.light2}; - } + > div { + min-width: 0; + margin-right: ${theme.gridUnit * 2}px; + } + `} `; interface DatasourcePanelDragOptionProps extends DatasourcePanelDndItem { @@ -79,6 +80,7 @@ export default function DatasourcePanelDragOption( ) : ( )} + ); } diff --git a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx b/superset-frontend/src/explore/components/DatasourcePanel/index.tsx index 04378cb9985be..fccb22a2e04e1 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel/index.tsx @@ -17,6 +17,7 @@ * under the License. */ import React, { useEffect, useMemo, useRef, useState } from 'react'; +import { css, styled, t } from '@superset-ui/core'; import { ControlConfig, DatasourceMeta, @@ -24,7 +25,6 @@ import { } from '@superset-ui/chart-controls'; import { debounce } from 'lodash'; import { matchSorter, rankings } from 'match-sorter'; -import { css, styled, t } from '@superset-ui/core'; import Collapse from 'src/components/Collapse'; import { Input } from 'src/components/Input'; import { FAST_DEBOUNCE } from 'src/constants'; @@ -63,7 +63,7 @@ const ButtonContainer = styled.div` const DatasourceContainer = styled.div` ${({ theme }) => css` - background-color: ${theme.colors.grayscale.light4}; + background-color: ${theme.colors.grayscale.light5}; position: relative; height: 100%; display: flex; @@ -97,26 +97,51 @@ const DatasourceContainer = styled.div` `; const LabelWrapper = styled.div` - overflow: hidden; - text-overflow: ellipsis; + ${({ theme }) => css` + overflow: hidden; + text-overflow: ellipsis; + font-size: ${theme.typography.sizes.s}px; + background-color: ${theme.colors.grayscale.light4}; + margin: ${theme.gridUnit * 2}px 0; + padding: 0 ${theme.gridUnit}px; + border-radius: 4px; + cursor: pointer; + + &:first-of-type { + margin-top: 0; + } + &:last-of-type { + margin-bottom: 0; + } - & > span { - white-space: nowrap; - } + &:hover { + background-color: ${theme.colors.grayscale.light3}; + } - .option-label { - display: inline; - } + & > span { + white-space: nowrap; + } - .metric-option { - & > svg { - min-width: ${({ theme }) => `${theme.gridUnit * 4}px`}; + .option-label { + display: inline; } - & > .option-label { - overflow: hidden; - text-overflow: ellipsis; + + .metric-option { + & > svg { + min-width: ${theme.gridUnit * 4}px; + } + & > .option-label { + overflow: hidden; + text-overflow: ellipsis; + } } - } + `} +`; + +const SectionHeader = styled.span` + ${({ theme }) => css` + font-size: ${theme.typography.sizes.s}px; + `} `; const LabelContainer = (props: { @@ -273,13 +298,13 @@ export default function DataSourcePanel({ />
{t('Metrics')}} + header={{t('Metrics')}} key="metrics" >
@@ -315,7 +340,7 @@ export default function DataSourcePanel({ )} {t('Columns')}} + header={{t('Columns')}} key="column" >
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx b/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx index eba2fc8ebdeac..527392275c51c 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx @@ -101,7 +101,7 @@ const Styles = styled.div` max-height: 100%; } .data-source-selection { - background-color: ${({ theme }) => theme.colors.grayscale.light4}; + background-color: ${({ theme }) => theme.colors.grayscale.light5}; padding: ${({ theme }) => 2 * theme.gridUnit}px 0; border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; } diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx index 0e68b5d4d0459..212d5a1d71485 100644 --- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx +++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx @@ -306,7 +306,7 @@ export const OptionControlLabel = ({ {isExtra && ( diff --git a/superset-frontend/webpack.config.js b/superset-frontend/webpack.config.js index 6b3c4e30a8b13..c2c818dbeadd0 100644 --- a/superset-frontend/webpack.config.js +++ b/superset-frontend/webpack.config.js @@ -414,6 +414,7 @@ const config = { svgoConfig: { plugins: { removeViewBox: false, + icon: true, }, }, }, From f1c2c6ea2801a37b96b3c9e8f7daa4d07314fa84 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Mon, 28 Mar 2022 15:26:34 +0200 Subject: [PATCH 2/9] Fixes --- .../components/CertifiedIconWithTooltip.tsx | 4 +-- .../src/components/ColumnOption.tsx | 27 +++++++++++------ .../ColumnTypeLabel/ColumnTypeLabel.tsx | 4 +-- .../src/components/InfoTooltipWithTrigger.tsx | 6 ++-- .../src/components/MetricOption.tsx | 29 ++++++++++++------- .../controls/OptionControls/index.tsx | 1 - 6 files changed, 44 insertions(+), 27 deletions(-) diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/CertifiedIconWithTooltip.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/CertifiedIconWithTooltip.tsx index 194a415082d69..07492a181841c 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/components/CertifiedIconWithTooltip.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/CertifiedIconWithTooltip.tsx @@ -53,9 +53,9 @@ function CertifiedIconWithTooltip({ {showType && type !== undefined && } - {column.is_certified && ( - - )} - + + css` + margin-right: ${theme.gridUnit}px; + ` + } + ref={labelRef} + > {getColumnLabelText(column)} @@ -76,6 +77,14 @@ export function ColumnOption({ placement="top" /> )} + + {column.is_certified && ( + + )} ); } diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx index a4056ebac7a96..7e5b700bc1afd 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx @@ -27,7 +27,7 @@ import NumSvg from './type-icons/field_num.svg'; type TypeIcon = ReactNode | '?'; -export type ColumnLabelExtendedType = 'expression' | 'aggregate' | ''; +export type ColumnLabelExtendedType = 'expression' | ''; export type ColumnTypeLabelProps = { type?: ColumnLabelExtendedType | GenericDataType; @@ -54,8 +54,6 @@ export function ColumnTypeLabel({ type }: ColumnTypeLabelProps) { if (type === '' || type === 'expression') { typeIcon = ; - } else if (type === 'aggregate') { - typeIcon = 'AGG'; } else if (type === GenericDataType.STRING) { typeIcon = ; } else if (type === GenericDataType.NUMERIC) { diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx index 747a6535fe453..86a4a3d1d1d28 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import React from 'react'; +import React, { CSSProperties } from 'react'; import { kebabCase } from 'lodash'; import { TooltipPlacement } from 'antd/lib/tooltip'; import { t } from '@superset-ui/core'; @@ -30,6 +30,7 @@ export interface InfoTooltipWithTriggerProps { placement?: TooltipPlacement; bsStyle?: string; className?: string; + iconsStyle?: CSSProperties; } export function InfoTooltipWithTrigger({ @@ -40,6 +41,7 @@ export function InfoTooltipWithTrigger({ icon = 'info-circle', className = 'text-muted', placement = 'right', + iconsStyle = {}, }: InfoTooltipWithTriggerProps) { const iconClass = `fa fa-${icon} ${className} ${ bsStyle ? `text-${bsStyle}` : '' @@ -50,7 +52,7 @@ export function InfoTooltipWithTrigger({ aria-label={t('Show info tooltip')} tabIndex={0} className={iconClass} - style={{ cursor: onClick ? 'pointer' : undefined }} + style={{ cursor: onClick ? 'pointer' : undefined, ...iconsStyle }} onClick={onClick} onKeyPress={ onClick && diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx index bc6a1503e2a35..55117578b4446 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx @@ -17,7 +17,7 @@ * under the License. */ import React, { useState, ReactNode, useLayoutEffect } from 'react'; -import { styled, Metric, SafeMarkdown } from '@superset-ui/core'; +import { css, styled, Metric, SafeMarkdown } from '@superset-ui/core'; import InfoTooltipWithTrigger from './InfoTooltipWithTrigger'; import { ColumnTypeLabel } from './ColumnTypeLabel/ColumnTypeLabel'; import CertifiedIconWithTooltip from './CertifiedIconWithTooltip'; @@ -70,32 +70,41 @@ export function MetricOption({ return ( {showType && } - {metric.is_certified && ( - - )} - + + css` + margin-right: ${theme.gridUnit}px; + ` + } + ref={labelRef} + > {link} {showFormula && ( )} + {metric.is_certified && ( + + )} {warningMarkdown && ( } label={`warn-${metric.metric_name}`} + iconsStyle={{ marginLeft: 0 }} /> )} diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx index 212d5a1d71485..b97d197cdc9a5 100644 --- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx +++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx @@ -56,7 +56,6 @@ export const Label = styled.div` padding-left: ${theme.gridUnit}px; svg { margin-right: ${theme.gridUnit}px; - margin-left: ${theme.gridUnit}px; } .type-label { margin-right: ${theme.gridUnit * 2}px; From 0b1354b333ec2b12fac1ffc4df80d7413be3f9ab Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Mon, 28 Mar 2022 16:36:19 +0200 Subject: [PATCH 3/9] Replace drag handle in dashboard builder --- .../dashboard/components/dnd/DragHandle.tsx | 38 ++++++++++--------- .../src/dashboard/stylesheets/dnd.less | 27 ------------- 2 files changed, 20 insertions(+), 45 deletions(-) diff --git a/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx b/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx index 08a224e4b80a3..60a72ddae94e6 100644 --- a/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx +++ b/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx @@ -17,33 +17,35 @@ * under the License. */ import React, { LegacyRef } from 'react'; -import cx from 'classnames'; +import { css, styled } from '@superset-ui/core'; +import Icons from 'src/components/Icons'; interface DragHandleProps { position: 'left' | 'top'; - innerRef: LegacyRef | undefined; - dotCount: number; + innerRef?: LegacyRef | undefined; } +const DragHandleContainer = styled.div<{ position: 'left' | 'top' }>` + ${({ theme, position }) => css` + margin-bottom: ${theme.gridUnit}px !important; + overflow: hidden; + cursor: move; + ${position === 'top' && + css` + transform: rotate(90deg); + `} + & path { + fill: ${theme.colors.grayscale.base}; + } + `} +`; export default function DragHandle({ position = 'left', innerRef = null, - dotCount = 8, }: DragHandleProps) { return ( -
- {Array(dotCount) - .fill(null) - .map((_, i) => ( -
- ))} -
+ + + ); } diff --git a/superset-frontend/src/dashboard/stylesheets/dnd.less b/superset-frontend/src/dashboard/stylesheets/dnd.less index 59293407a9a2c..2465c6fac0661 100644 --- a/superset-frontend/src/dashboard/stylesheets/dnd.less +++ b/superset-frontend/src/dashboard/stylesheets/dnd.less @@ -91,33 +91,6 @@ min-height: 16px; } -/* drag handles */ -.drag-handle { - overflow: hidden; - width: 16px; - cursor: move; -} - -.drag-handle--left { - width: 8px; -} - -.drag-handle-dot { - float: left; - height: 2px; - margin: 1px; - width: 2px; - - &:after { - content: ''; - background: @gray; - float: left; - height: 2px; - margin: -1px; - width: 2px; - } -} - /* empty drop targets */ .dashboard-component-tabs-content { & > .empty-droptarget { From 003991e664046174723787666e966238afdd4b64 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Mon, 28 Mar 2022 17:07:53 +0200 Subject: [PATCH 4/9] Add missing types --- .../src/components/ColumnOption.tsx | 4 ++-- .../src/components/MetricOption.tsx | 10 ++++++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx index 8134970852968..372c6128a1a3e 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx @@ -17,7 +17,7 @@ * under the License. */ import React, { useState, ReactNode, useLayoutEffect } from 'react'; -import { css, styled } from '@superset-ui/core'; +import { css, styled, SupersetTheme } from '@superset-ui/core'; import { Tooltip } from './Tooltip'; import { ColumnTypeLabel } from './ColumnTypeLabel/ColumnTypeLabel'; import InfoTooltipWithTrigger from './InfoTooltipWithTrigger'; @@ -57,7 +57,7 @@ export function ColumnOption({ + css={(theme: SupersetTheme) => css` margin-right: ${theme.gridUnit}px; ` diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx index 55117578b4446..1052d1ec7e591 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx @@ -17,7 +17,13 @@ * under the License. */ import React, { useState, ReactNode, useLayoutEffect } from 'react'; -import { css, styled, Metric, SafeMarkdown } from '@superset-ui/core'; +import { + css, + styled, + Metric, + SafeMarkdown, + SupersetTheme, +} from '@superset-ui/core'; import InfoTooltipWithTrigger from './InfoTooltipWithTrigger'; import { ColumnTypeLabel } from './ColumnTypeLabel/ColumnTypeLabel'; import CertifiedIconWithTooltip from './CertifiedIconWithTooltip'; @@ -73,7 +79,7 @@ export function MetricOption({ + css={(theme: SupersetTheme) => css` margin-right: ${theme.gridUnit}px; ` From 7b50a75bb59d4b3668e39fa96e232ed820a0e704 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Mon, 28 Mar 2022 18:12:48 +0200 Subject: [PATCH 5/9] Type fix --- .../ColumnTypeLabel/ColumnTypeLabel.tsx | 1 + .../ColumnTypeLabel/type-icons/svgType.d.ts | 22 +++++++++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/svgType.d.ts diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx index 7e5b700bc1afd..f41a33b744300 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx @@ -20,6 +20,7 @@ import React, { ReactNode } from 'react'; import { css, GenericDataType, styled } from '@superset-ui/core'; import { ClockCircleOutlined } from '@ant-design/icons'; +// TODO: move all icons to superset-ui/core import FunctionSvg from './type-icons/field_derived.svg'; import BooleanSvg from './type-icons/field_boolean.svg'; import StringSvg from './type-icons/field_abc.svg'; diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/svgType.d.ts b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/svgType.d.ts new file mode 100644 index 0000000000000..5885d9d8fc077 --- /dev/null +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/svgType.d.ts @@ -0,0 +1,22 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +declare module '*.svg' { + const content: any; + export default content; +} From 8dfb6d1baa3fb1bfc3ad417cf7eb8626a14ee9fd Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Tue, 29 Mar 2022 11:08:21 +0200 Subject: [PATCH 6/9] Fix tests --- .../ColumnTypeLabel/ColumnTypeLabel.tsx | 20 ++++---- .../test/components/ColumnTypeLabel.test.tsx | 47 +++++++------------ .../DatasourcePanelDragOption/index.tsx | 6 +++ .../components/DatasourcePanel/index.tsx | 1 - .../FilterDefinitionOption.test.jsx | 20 +++----- 5 files changed, 40 insertions(+), 54 deletions(-) diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx index f41a33b744300..772807e0f0599 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx @@ -18,16 +18,14 @@ * under the License. */ import React, { ReactNode } from 'react'; -import { css, GenericDataType, styled } from '@superset-ui/core'; -import { ClockCircleOutlined } from '@ant-design/icons'; +import { css, GenericDataType, styled, t } from '@superset-ui/core'; +import { ClockCircleOutlined, QuestionOutlined } from '@ant-design/icons'; // TODO: move all icons to superset-ui/core import FunctionSvg from './type-icons/field_derived.svg'; import BooleanSvg from './type-icons/field_boolean.svg'; import StringSvg from './type-icons/field_abc.svg'; import NumSvg from './type-icons/field_num.svg'; -type TypeIcon = ReactNode | '?'; - export type ColumnLabelExtendedType = 'expression' | ''; export type ColumnTypeLabelProps = { @@ -51,18 +49,20 @@ const TypeIconWrapper = styled.div` `; export function ColumnTypeLabel({ type }: ColumnTypeLabelProps) { - let typeIcon: TypeIcon = '?'; + let typeIcon: ReactNode = ( + + ); if (type === '' || type === 'expression') { - typeIcon = ; + typeIcon = ; } else if (type === GenericDataType.STRING) { - typeIcon = ; + typeIcon = ; } else if (type === GenericDataType.NUMERIC) { - typeIcon = ; + typeIcon = ; } else if (type === GenericDataType.BOOLEAN) { - typeIcon = ; + typeIcon = ; } else if (type === GenericDataType.TEMPORAL) { - typeIcon = ; + typeIcon = ; } return {typeIcon}; diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnTypeLabel.test.tsx b/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnTypeLabel.test.tsx index 04f76edca99a0..8369a790968f0 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnTypeLabel.test.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnTypeLabel.test.tsx @@ -17,7 +17,8 @@ * under the License. */ import React from 'react'; -import { shallow } from 'enzyme'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { GenericDataType } from '@superset-ui/core'; import { ColumnTypeLabel, ColumnTypeLabelProps } from '../../src'; @@ -29,9 +30,8 @@ describe('ColumnOption', () => { const props = { ...defaultProps }; - function getWrapper(overrides: Partial) { - const wrapper = shallow(); - return wrapper; + function renderColumnTypeLabel(overrides: Partial) { + render(); } it('is a valid element', () => { @@ -40,40 +40,27 @@ describe('ColumnOption', () => { ); }); it('string type shows ABC icon', () => { - const lbl = getWrapper({ type: GenericDataType.STRING }).find( - '.type-label', - ); - expect(lbl).toHaveLength(1); - expect(lbl.first().text()).toBe('ABC'); + renderColumnTypeLabel({ type: GenericDataType.STRING }); + expect(screen.getByLabelText('string type icon')).toBeVisible(); }); it('int type shows # icon', () => { - const lbl = getWrapper({ type: GenericDataType.NUMERIC }).find( - '.type-label', - ); - expect(lbl).toHaveLength(1); - expect(lbl.first().text()).toBe('#'); + renderColumnTypeLabel({ type: GenericDataType.NUMERIC }); + expect(screen.getByLabelText('numeric type icon')).toBeVisible(); }); - it('bool type shows T/F icon', () => { - const lbl = getWrapper({ type: GenericDataType.BOOLEAN }).find( - '.type-label', - ); - expect(lbl).toHaveLength(1); - expect(lbl.first().text()).toBe('T/F'); + it('bool type shows 1|0 icon', () => { + renderColumnTypeLabel({ type: GenericDataType.BOOLEAN }); + expect(screen.getByLabelText('boolean type icon')).toBeVisible(); }); it('expression type shows function icon', () => { - const lbl = getWrapper({ type: 'expression' }).find('.type-label'); - expect(lbl).toHaveLength(1); - expect(lbl.first().text()).toBe('ƒ'); + renderColumnTypeLabel({ type: 'expression' }); + expect(screen.getByLabelText('function type icon')).toBeVisible(); }); it('unknown type shows question mark', () => { - const lbl = getWrapper({ type: undefined }).find('.type-label'); - expect(lbl).toHaveLength(1); - expect(lbl.first().text()).toBe('?'); + renderColumnTypeLabel({ type: undefined }); + expect(screen.getByLabelText('unknown type icon')).toBeVisible(); }); it('datetime type displays', () => { - const lbl = getWrapper({ type: GenericDataType.TEMPORAL }).find( - '.fa-clock-o', - ); - expect(lbl).toHaveLength(1); + renderColumnTypeLabel({ type: GenericDataType.TEMPORAL }); + expect(screen.getByLabelText('temporal type icon')).toBeVisible(); }); }); diff --git a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx index 6c461004391df..613a58e15d6d3 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx @@ -36,6 +36,12 @@ const DatasourceItemContainer = styled.div` justify-content: space-between; width: 100%; height: ${theme.gridUnit * 6}px; + padding: 0 ${theme.gridUnit}px; + + // hack to make the drag preview image corners rounded + transform: translate(0, 0); + background-color: inherit; + border-radius: 4px; > div { min-width: 0; diff --git a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx b/superset-frontend/src/explore/components/DatasourcePanel/index.tsx index fccb22a2e04e1..720a5c121f678 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel/index.tsx @@ -103,7 +103,6 @@ const LabelWrapper = styled.div` font-size: ${theme.typography.sizes.s}px; background-color: ${theme.colors.grayscale.light4}; margin: ${theme.gridUnit * 2}px 0; - padding: 0 ${theme.gridUnit}px; border-radius: 4px; cursor: pointer; diff --git a/superset-frontend/src/explore/components/controls/MetricControl/FilterDefinitionOption.test.jsx b/superset-frontend/src/explore/components/controls/MetricControl/FilterDefinitionOption.test.jsx index 0e36348d0028c..b0778d4dd5355 100644 --- a/superset-frontend/src/explore/components/controls/MetricControl/FilterDefinitionOption.test.jsx +++ b/superset-frontend/src/explore/components/controls/MetricControl/FilterDefinitionOption.test.jsx @@ -18,14 +18,12 @@ */ /* eslint-disable no-unused-expressions */ import React from 'react'; -import { shallow } from 'enzyme'; -import { styledMount as mount } from 'spec/helpers/theming'; +import { render, screen } from 'spec/helpers/testing-library'; import FilterDefinitionOption from 'src/explore/components/controls/MetricControl/FilterDefinitionOption'; import { AGGREGATES } from 'src/explore/constants'; import AdhocMetric, { EXPRESSION_TYPES, } from 'src/explore/components/controls/MetricControl/AdhocMetric'; -import { StyledColumnOption } from 'src/explore/components/optionRenderers'; const sumValueAdhocMetric = new AdhocMetric({ expressionType: EXPRESSION_TYPES.SIMPLE, @@ -35,25 +33,21 @@ const sumValueAdhocMetric = new AdhocMetric({ describe('FilterDefinitionOption', () => { it('renders a StyledColumnOption given a column', () => { - const wrapper = shallow( - , - ); - expect(wrapper.find(StyledColumnOption)).toExist(); + render(); + expect(screen.getByText('a_column')).toBeVisible(); }); it('renders a StyledColumnOption given an adhoc metric', () => { - const wrapper = shallow( - , - ); - expect(wrapper.find(StyledColumnOption)).toExist(); + render(); + expect(screen.getByText('source')).toBeVisible(); }); it('renders the metric name given a saved metric', () => { - const wrapper = mount( + render( , ); - expect(wrapper.find('.option-label').text()).toBe('my_custom_metric'); + expect(screen.getByText('my_custom_metric')).toBeVisible(); }); }); From 5ea8e67ffc6151dfc6e8d7fc1bdecf3cf12d7976 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Tue, 29 Mar 2022 11:41:14 +0200 Subject: [PATCH 7/9] Fix non-dnd version --- .../src/components/ColumnOption.tsx | 2 ++ .../src/components/Icons/index.tsx | 1 - .../components/DatasourcePanel/index.tsx | 21 ++++++++++++------- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx index 372c6128a1a3e..dd7775ec4dd06 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx @@ -32,6 +32,8 @@ export type ColumnOptionProps = { }; const StyleOverrides = styled.span` + display: flex; + align-items: center; svg { margin-right: ${({ theme }) => theme.gridUnit}px; } diff --git a/superset-frontend/src/components/Icons/index.tsx b/superset-frontend/src/components/Icons/index.tsx index 28dbff0b15d5d..08b13404a04d2 100644 --- a/superset-frontend/src/components/Icons/index.tsx +++ b/superset-frontend/src/components/Icons/index.tsx @@ -65,7 +65,6 @@ const IconFileNames = [ 'dataset_virtual', 'download', 'drag', - 'drag_icon', 'edit_alt', 'edit', 'email', diff --git a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx b/superset-frontend/src/explore/components/DatasourcePanel/index.tsx index 720a5c121f678..be83f91d4cece 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel/index.tsx @@ -49,6 +49,10 @@ export interface Props { shouldForceUpdate?: number; } +const enableExploreDnd = isFeatureEnabled( + FeatureFlag.ENABLE_EXPLORE_DRAG_AND_DROP, +); + const Button = styled.button` background: none; border: none; @@ -104,7 +108,7 @@ const LabelWrapper = styled.div` background-color: ${theme.colors.grayscale.light4}; margin: ${theme.gridUnit * 2}px 0; border-radius: 4px; - cursor: pointer; + padding: 0 ${theme.gridUnit}px; &:first-of-type { margin-top: 0; @@ -113,9 +117,14 @@ const LabelWrapper = styled.div` margin-bottom: 0; } - &:hover { - background-color: ${theme.colors.grayscale.light3}; - } + ${enableExploreDnd && + css` + padding: 0; + cursor: pointer; + &:hover { + background-color: ${theme.colors.grayscale.light3}; + } + `} & > span { white-space: nowrap; @@ -158,10 +167,6 @@ const LabelContainer = (props: { ); }; -const enableExploreDnd = isFeatureEnabled( - FeatureFlag.ENABLE_EXPLORE_DRAG_AND_DROP, -); - export default function DataSourcePanel({ datasource, controls: { datasource: datasourceControl }, From cb79d6624b40f304d006143cb7ad9d596a2e1ae6 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Tue, 29 Mar 2022 14:44:33 +0200 Subject: [PATCH 8/9] Fix test --- .../src/explore/components/DatasourcePanel/index.tsx | 1 - .../controls/MetricControl/FilterDefinitionOption.test.jsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx b/superset-frontend/src/explore/components/DatasourcePanel/index.tsx index be83f91d4cece..ebed661be9e46 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel/index.tsx @@ -302,7 +302,6 @@ export default function DataSourcePanel({ />
{ it('renders a StyledColumnOption given an adhoc metric', () => { render(); - expect(screen.getByText('source')).toBeVisible(); + expect(screen.getByText('SUM(source)')).toBeVisible(); }); it('renders the metric name given a saved metric', () => { From cdac852e26d79af7c50aa9216aa97d528c2d9156 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Tue, 29 Mar 2022 15:31:23 +0200 Subject: [PATCH 9/9] Replace margin with height --- superset-frontend/src/dashboard/components/dnd/DragHandle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx b/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx index 60a72ddae94e6..5209c99fee728 100644 --- a/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx +++ b/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx @@ -27,7 +27,7 @@ interface DragHandleProps { const DragHandleContainer = styled.div<{ position: 'left' | 'top' }>` ${({ theme, position }) => css` - margin-bottom: ${theme.gridUnit}px !important; + height: ${theme.gridUnit * 5}px; overflow: hidden; cursor: move; ${position === 'top' &&