feat(native-filters): Implement filter cards

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx

@@ -44,10 +44,6 @@ const Wrapper = styled.div`
  padding: ${({ theme }) => theme.gridUnit * 4}px;
  // 108px padding to make room for buttons with position: absolute
  padding-bottom: ${({ theme }) => theme.gridUnit * 27}px;
-
- &:hover {
- cursor: pointer;
- }
 `;
 
 type FilterControlsProps = {

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

@@ -0,0 +1,113 @@
+/**
+ * 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, { useCallback, useMemo, useRef } from 'react';
+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 {
+ DependencyItem,
+ Row,
+ RowLabel,
+ RowTruncationCount,
+ RowValue,
+ TooltipList,
+} 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();
+ const handleClick = useCallback(() => {
+ dispatch(setDirectPathToChild([dependency.id]));
+ }, [dependency.id, dispatch]);
+ return (
+ <DependencyItem role="button" onClick={handleClick} tabIndex={0}>
+ {label}
+ </DependencyItem>
+ );
+};
+
+export const DependenciesRow = React.memo(({ filter }: FilterCardRowProps) => {
+ const dependencies = useFilterDependencies(filter);
+ const dependenciesRef = useRef<HTMLDivElement>(null);
+ const [elementsTruncated, hasHiddenElements] = useTruncation(dependenciesRef);
+ const theme = useTheme();
+
+ const tooltipText = useMemo(
+ () =>
+ elementsTruncated > 0 && dependencies ? (
+ <TooltipList>
+ {dependencies.map(dependency => (
+ <li>
+ <DependencyValue
+ dependency={dependency}
+ label={dependency.name}
+ />
+ </li>
+ ))}
+ </TooltipList>
+ ) : null,
+ [elementsTruncated, dependencies],
+ );
+
+ if (!Array.isArray(dependencies) || dependencies.length === 0) {
+ return null;
+ }
+ return (
+ <Row>
+ <RowLabel
+ css={css`
+ display: inline-flex;
+ align-items: center;
+ `}
+ >
+ {t('Dependent on')}{' '}
+ <TooltipWithTruncation
+ title={t(
+ 'Filter only displays values relevant to selections made in other filters.',
+ )}
+ >
+ <Icons.Info
+ iconSize="s"
+ iconColor={theme.colors.grayscale.light1}
+ css={css`
+ margin-left: ${theme.gridUnit}px;
+ `}
+ />
+ </TooltipWithTruncation>
+ </RowLabel>
+ <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/FilterCardContent.tsx

@@ -0,0 +1,34 @@
+/**
+ * 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 { Filter } from '@superset-ui/core';
+import { ScopeRow } from './ScopeRow';
+import { DependenciesRow } from './DependenciesRow';
+import { NameRow } from './NameRow';
+import { TypeRow } from './TypeRow';
+
+export const FilterCardContent = ({ filter }: { filter: Filter }) => (
+ <div>
+ <NameRow filter={filter} />
+ <TypeRow filter={filter} />
+ <ScopeRow filter={filter} />
+ <DependenciesRow filter={filter} />
+ </div>
+);

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

@@ -0,0 +1,50 @@
+/**
+ * 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, { useRef } from 'react';
+import { css, SupersetTheme } from '@superset-ui/core';
+import Icons from 'src/components/Icons';
+import { Row, FilterName } from './Styles';
+import { FilterCardRowProps } from './types';
+import { useTruncation } from './useTruncation';
+import { TooltipWithTruncation } from './TooltipWithTruncation';
+
+export const NameRow = ({ filter }: FilterCardRowProps) => {
+ const filterNameRef = useRef<HTMLElement>(null);
+ const [elementsTruncated] = useTruncation(filterNameRef);
+ return (
+ <Row
+ css={(theme: SupersetTheme) =>
+ css`
+ margin-bottom: ${theme.gridUnit * 3}px;
+ `
+ }
+ >
+ <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

@@ -0,0 +1,68 @@
+/**
+ * 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, { useMemo, useRef } from 'react';
+import { t } from '@superset-ui/core';
+import { useFilterScope } from './useFilterScope';
+import {
+ Row,
+ RowLabel,
+ RowTruncationCount,
+ RowValue,
+ TooltipList,
+} 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);
+ const scopeRef = useRef<HTMLDivElement>(null);
+
+ const [elementsTruncated, hasHiddenElements] = useTruncation(scopeRef);
+ const tooltipText = useMemo(
+ () =>
+ elementsTruncated > 0 && scope ? (
+ <TooltipList>
+ {scope.map(val => (
+ <li>{val}</li>
+ ))}
+ </TooltipList>
+ ) : null,
+ [elementsTruncated, scope],
+ );
+
+ if (!Array.isArray(scope) || scope.length === 0) {
+ return null;
+ }
+ return (
+ <Row>
+ <RowLabel>{t('Scope')}</RowLabel>
+ <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

@@ -0,0 +1,90 @@
+/**
+ * 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 { css, styled } from '@superset-ui/core';
+
+export const Row = styled.div`
+ ${({ theme }) => css`
+ display: flex;
+ align-items: center;
+ margin: ${theme.gridUnit}px 0;
+ font-size: ${theme.typography.sizes.s}px;
+
+ &:first-of-type {
+ margin-top: 0;
+ }
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+
+ & .ant-tooltip-open {
+ display: inline-flex;
+ }
+ `};
+`;
+
+export const RowLabel = styled.span`
+ ${({ theme }) => css`
+ color: ${theme.colors.grayscale.base};
+ padding-right: ${theme.gridUnit * 4}px;
+ margin-right: auto;
+ text-transform: uppercase;
+ white-space: nowrap;
+ `};
+`;
+
+export const RowValue = styled.div`
+ ${({ theme }) => css`
+ color: ${theme.colors.grayscale.dark1};
+ 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;
+`;
+
+export const RowTruncationCount = styled.span`
+ ${({ theme }) => css`
+ color: ${theme.colors.primary.base};
+ `}
+`;
+
+export const TooltipList = styled.ul`
+ ${({ theme }) => css`
+ padding-left: ${theme.gridUnit * 3}px;
+ margin-bottom: 0;
+ `};
+`;
+
+export const TooltipTrigger = styled.div`
+ min-width: 0;
+ display: inline-flex;
+ white-space: nowrap;
+`;