From 5b9791fbe5eb475dd27b217230c907e686d42f69 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Wed, 23 Feb 2022 16:08:48 +0100 Subject: [PATCH] Fixes --- .../FilterCard/DependenciesRow.tsx | 41 ++++++++----------- .../nativeFilters/FilterCard/NameRow.tsx | 40 ++++++++++-------- .../nativeFilters/FilterCard/ScopeRow.tsx | 29 +++++-------- .../nativeFilters/FilterCard/Styles.ts | 7 +++- .../FilterCard/TooltipWithTruncation.tsx | 37 +++++++++++++++++ .../FilterCard/useFilterScope.ts | 2 +- .../nativeFilters/FilterCard/useTruncation.ts | 8 ++-- 7 files changed, 99 insertions(+), 65 deletions(-) create mode 100644 superset-frontend/src/dashboard/components/nativeFilters/FilterCard/TooltipWithTruncation.tsx diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx index 9d2be1fd5d9b..c585fc40e411 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx @@ -21,7 +21,6 @@ import { useDispatch } from 'react-redux'; import { css, t, useTheme } from '@superset-ui/core'; import { setDirectPathToChild } from 'src/dashboard/actions/dashboardState'; import Icons from 'src/components/Icons'; -import { Tooltip } from 'src/components/Tooltip'; import { DependencyItem, Row, @@ -29,11 +28,11 @@ import { RowTruncationCount, RowValue, TooltipList, - TooltipTrigger, } from './Styles'; import { useFilterDependencies } from './useFilterDependencies'; import { useTruncation } from './useTruncation'; import { DependencyValueProps, FilterCardRowProps } from './types'; +import { TooltipWithTruncation } from './TooltipWithTruncation'; const DependencyValue = ({ dependency, label }: DependencyValueProps) => { const dispatch = useDispatch(); @@ -82,12 +81,10 @@ export const DependenciesRow = React.memo(({ filter }: FilterCardRowProps) => { `} > {t('Dependent on')}{' '} - { margin-left: ${theme.gridUnit}px; `} /> - + - - - - {dependencies.map((dependency, index) => ( - - ))} - - {hasHiddenElements && ( - +{elementsTruncated} - )} - - + + + {dependencies.map((dependency, index) => ( + + ))} + + {hasHiddenElements && ( + +{elementsTruncated} + )} + ); }); diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx index ac029a2fb4dd..05cb8119487c 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx @@ -16,27 +16,35 @@ * specific language governing permissions and limitations * under the License. */ -import React from 'react'; +import React, { useRef } from 'react'; import { css, SupersetTheme } from '@superset-ui/core'; import Icons from 'src/components/Icons'; -import { Row } from './Styles'; +import { Row, FilterName } from './Styles'; import { FilterCardRowProps } from './types'; +import { useTruncation } from './useTruncation'; +import { TooltipWithTruncation } from './TooltipWithTruncation'; -export const NameRow = ({ filter }: FilterCardRowProps) => ( - - css` - margin-bottom: ${theme.gridUnit * 3}px; - ` - } - > - { + const filterNameRef = useRef(null); + const [elementsTruncated] = useTruncation(filterNameRef); + return ( + css` - margin-right: ${theme.gridUnit}px; + margin-bottom: ${theme.gridUnit * 3}px; ` } - /> - {filter.name} - -); + > + + css` + margin-right: ${theme.gridUnit}px; + ` + } + /> + + {filter.name} + + + ); +}; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx index 21d47bbb02d2..8f005874d234 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx @@ -18,7 +18,6 @@ */ import React, { useMemo, useRef } from 'react'; import { t } from '@superset-ui/core'; -import { Tooltip } from 'src/components/Tooltip'; import { useFilterScope } from './useFilterScope'; import { Row, @@ -26,10 +25,10 @@ import { RowTruncationCount, RowValue, TooltipList, - TooltipTrigger, } from './Styles'; import { useTruncation } from './useTruncation'; import { FilterCardRowProps } from './types'; +import { TooltipWithTruncation } from './TooltipWithTruncation'; export const ScopeRow = React.memo(({ filter }: FilterCardRowProps) => { const scope = useFilterScope(filter); @@ -54,22 +53,16 @@ export const ScopeRow = React.memo(({ filter }: FilterCardRowProps) => { return ( {t('Scope')} - - - - {scope.map((element, index) => ( - {index === 0 ? element : `, {element}`} - ))} - - {hasHiddenElements > 0 && ( - +{elementsTruncated} - )} - - + + + {scope.map((element, index) => ( + {index === 0 ? element : `, ${element}`} + ))} + + {hasHiddenElements > 0 && ( + +{elementsTruncated} + )} + ); }); diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts index 49245970f74c..9799a0d333bd 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts @@ -52,7 +52,6 @@ export const RowLabel = styled.span` export const RowValue = styled.div` ${({ theme }) => css` color: ${theme.colors.grayscale.dark1}; - font-size: ${theme.typography.sizes.s}px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -60,6 +59,12 @@ export const RowValue = styled.div` `}; `; +export const FilterName = styled.span` + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +`; + export const DependencyItem = styled.span` text-decoration: underline; cursor: pointer; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/TooltipWithTruncation.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/TooltipWithTruncation.tsx new file mode 100644 index 000000000000..cfb36013a749 --- /dev/null +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/TooltipWithTruncation.tsx @@ -0,0 +1,37 @@ +/** + * 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. + */ +import React from 'react'; +import { TooltipProps } from 'antd/lib/tooltip'; +import { Tooltip } from 'src/components/Tooltip'; +import { TooltipTrigger } from './Styles'; + +export const TooltipWithTruncation = ({ + title, + children, + ...props +}: TooltipProps) => ( + + {children} + +); diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useFilterScope.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useFilterScope.ts index 6d89eae37f78..f713076168ce 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useFilterScope.ts +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useFilterScope.ts @@ -134,7 +134,7 @@ export const useFilterScope = (filter: Filter) => { }, []); // Join tab names and chart names return topLevelTabsInFullScope - .map(tabId => extractChartLabel(layout[tabId])) + .map(tabId => extractTabLabel(layout[tabId])) .concat(chartsInExcludedTabs.map(extractChartLabel)); } diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useTruncation.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useTruncation.ts index 33cdbf807820..4f2e1723691b 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useTruncation.ts +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useTruncation.ts @@ -22,8 +22,8 @@ export const useTruncation = (elementRef: RefObject) => { const [elementsTruncated, setElementsTruncated] = useState(0); const [hasHiddenElements, setHasHiddenElements] = useState(false); - const currentElement = elementRef.current; useLayoutEffect(() => { + const currentElement = elementRef.current; if (!currentElement) { return; } @@ -49,9 +49,9 @@ export const useTruncation = (elementRef: RefObject) => { setElementsTruncated(0); } }, [ - currentElement?.offsetWidth, - currentElement?.clientWidth, - currentElement, + elementRef.current?.offsetWidth, + elementRef.current?.clientWidth, + elementRef, ]); return [elementsTruncated, hasHiddenElements];