Fixes

superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx

@@ -21,19 +21,18 @@ 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,
  RowLabel,
  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')}{' '}
- <Tooltip
+ <TooltipWithTruncation
  title={t(
  'Filter only displays values relevant to selections made in other filters.',
  )}
- placement="bottom"
- overlayClassName="filter-card-tooltip"
  >
  <Icons.Info
  iconSize="s"
@@ -96,27 +93,21 @@ export const DependenciesRow = React.memo(({ filter }: FilterCardRowProps) => {
  margin-left: ${theme.gridUnit}px;
  `}
  />
- </Tooltip>
+ </TooltipWithTruncation>
  </RowLabel>
- <Tooltip
- overlayClassName="filter-card-tooltip"
- title={tooltipText}
- placement="bottom"
- >
- <TooltipTrigger>
- <RowValue ref={dependenciesRef}>
- {dependencies.map((dependency, index) => (
- <DependencyValue
- dependency={dependency}
- label={index === 0 ? dependency.name : `, ${dependency.name}`}
- />
- ))}
- </RowValue>
- {hasHiddenElements && (
- <RowTruncationCount>+{elementsTruncated}</RowTruncationCount>
- )}
- </TooltipTrigger>
- </Tooltip>
+ <TooltipWithTruncation title={tooltipText}>
+ <RowValue ref={dependenciesRef}>
+ {dependencies.map((dependency, index) => (
+ <DependencyValue
+ dependency={dependency}
+ label={index === 0 ? dependency.name : `, ${dependency.name}`}
+ />
+ ))}
+ </RowValue>
+ {hasHiddenElements && (
+ <RowTruncationCount>+{elementsTruncated}</RowTruncationCount>
+ )}
+ </TooltipWithTruncation>
  </Row>
  );
 });

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) => (
- <Row
- css={(theme: SupersetTheme) =>
- css`
- margin-bottom: ${theme.gridUnit * 3}px;
- `
- }
- >
- <Icons.FilterSmall
+export const NameRow = ({ filter }: FilterCardRowProps) => {
+ const filterNameRef = useRef<HTMLElement>(null);
+ const [elementsTruncated] = useTruncation(filterNameRef);
+ return (
+ <Row
  css={(theme: SupersetTheme) =>
  css`
- margin-right: ${theme.gridUnit}px;
+ margin-bottom: ${theme.gridUnit * 3}px;
  `
  }
- />
- <span>{filter.name}</span>
- </Row>
-);
+ >
+ <Icons.FilterSmall
+ css={(theme: SupersetTheme) =>
+ css`
+ margin-right: ${theme.gridUnit}px;
+ `
+ }
+ />
+ <TooltipWithTruncation title={elementsTruncated ? filter.name : null}>
+ <FilterName ref={filterNameRef}>{filter.name}</FilterName>
+ </TooltipWithTruncation>
+ </Row>
+ );
+};

superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx

@@ -18,18 +18,17 @@
  */
 import React, { useMemo, useRef } from 'react';
 import { t } from '@superset-ui/core';
-import { Tooltip } from 'src/components/Tooltip';
 import { useFilterScope } from './useFilterScope';
 import {
  Row,
  RowLabel,
  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 (
  <Row>
  <RowLabel>{t('Scope')}</RowLabel>
- <Tooltip
- title={tooltipText}
- placement="bottom"
- overlayClassName="filter-card-tooltip"
- >
- <TooltipTrigger>
- <RowValue ref={scopeRef}>
- {scope.map((element, index) => (
- <span>{index === 0 ? element : `, {element}`}</span>
- ))}
- </RowValue>
- {hasHiddenElements > 0 && (
- <RowTruncationCount>+{elementsTruncated}</RowTruncationCount>
- )}
- </TooltipTrigger>
- </Tooltip>
+ <TooltipWithTruncation title={tooltipText}>
+ <RowValue ref={scopeRef}>
+ {scope.map((element, index) => (
+ <span>{index === 0 ? element : `, ${element}`}</span>
+ ))}
+ </RowValue>
+ {hasHiddenElements > 0 && (
+ <RowTruncationCount>+{elementsTruncated}</RowTruncationCount>
+ )}
+ </TooltipWithTruncation>
  </Row>
  );
 });

superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts

@@ -52,14 +52,19 @@ 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;
  display: inline;
  `};
 `;
 
+export const FilterName = styled.span`
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+`;
+
 export const DependencyItem = styled.span`
  text-decoration: underline;
  cursor: pointer;

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) => (
+ <Tooltip
+ title={title}
+ placement="bottom"
+ overlayClassName="filter-card-tooltip"
+ {...props}
+ >
+ <TooltipTrigger>{children}</TooltipTrigger>
+ </Tooltip>
+);

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));
  }
 

superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useTruncation.ts

@@ -22,8 +22,8 @@ export const useTruncation = (elementRef: RefObject<HTMLElement>) => {
  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<HTMLElement>) => {
  setElementsTruncated(0);
  }
  }, [
- currentElement?.offsetWidth,
- currentElement?.clientWidth,
- currentElement,
+ elementRef.current?.offsetWidth,
+ elementRef.current?.clientWidth,
+ elementRef,
  ]);
 
  return [elementsTruncated, hasHiddenElements];