feat: Cross-referenced Dashboards in Chart list (Column + Filter) (#2…

…1760)

Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>

superset-frontend/cypress-base/cypress/integration/chart_list/filter.test.ts

@@ -62,6 +62,13 @@ describe('Charts filters', () => {
  setFilter('Dataset', 'unicode_test');
  cy.getBySel('styled-card').should('have.length', 1);
  });
+
+ it('should filter by dashboards correctly', () => {
+ setFilter('Dashboards', 'Unicode Test');
+ cy.getBySel('styled-card').should('have.length', 1);
+ setFilter('Dashboards', 'Tabbed Dashboard');
+ cy.getBySel('styled-card').should('have.length', 8);
+ });
  });
 
  describe('list-view', () => {
@@ -96,5 +103,12 @@ describe('Charts filters', () => {
  setFilter('Dataset', 'unicode_test');
  cy.getBySel('table-row').should('have.length', 1);
  });
+
+ it('should filter by dashboards correctly', () => {
+ setFilter('Dashboards', 'Unicode Test');
+ cy.getBySel('table-row').should('have.length', 1);
+ setFilter('Dashboards', 'Tabbed Dashboard');
+ cy.getBySel('table-row').should('have.length', 8);
+ });
  });
 });

superset-frontend/cypress-base/cypress/integration/chart_list/list.test.ts

@@ -59,10 +59,11 @@ describe('Charts list', () => {
  cy.getBySel('sort-header').eq(1).contains('Chart');
  cy.getBySel('sort-header').eq(2).contains('Visualization type');
  cy.getBySel('sort-header').eq(3).contains('Dataset');
- cy.getBySel('sort-header').eq(4).contains('Modified by');
- cy.getBySel('sort-header').eq(5).contains('Last modified');
- cy.getBySel('sort-header').eq(6).contains('Created by');
- cy.getBySel('sort-header').eq(7).contains('Actions');
+ cy.getBySel('sort-header').eq(4).contains('Dashboards added to');
+ cy.getBySel('sort-header').eq(5).contains('Modified by');
+ cy.getBySel('sort-header').eq(6).contains('Last modified');
+ cy.getBySel('sort-header').eq(7).contains('Created by');
+ cy.getBySel('sort-header').eq(8).contains('Actions');
  });
 
  it('should sort correctly in list mode', () => {

superset-frontend/src/components/ListView/CrossLinks.test.tsx

@@ -0,0 +1,97 @@
+/**
+ * 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 { render, screen } from 'spec/helpers/testing-library';
+import CrossLinks, { CrossLinksProps } from './CrossLinks';
+
+const mockedProps = {
+ crossLinks: [
+ {
+ id: 1,
+ title: 'Test dashboard',
+ },
+ {
+ id: 2,
+ title: 'Test dashboard 2',
+ },
+ {
+ id: 3,
+ title: 'Test dashboard 3',
+ },
+ {
+ id: 4,
+ title: 'Test dashboard 4',
+ },
+ ],
+};
+
+function setup(overrideProps: CrossLinksProps | {} = {}) {
+ return render(<CrossLinks {...mockedProps} {...overrideProps} />, {
+ useRouter: true,
+ });
+}
+
+test('should render', () => {
+ const { container } = setup();
+ expect(container).toBeInTheDocument();
+});
+
+test('should not render links', () => {
+ setup({
+ crossLinks: [],
+ });
+ expect(screen.queryByRole('link')).not.toBeInTheDocument();
+});
+
+test('should render the link with just one item', () => {
+ setup({
+ crossLinks: [
+ {
+ id: 1,
+ title: 'Test dashboard',
+ },
+ ],
+ });
+ expect(screen.getByText('Test dashboard')).toBeInTheDocument();
+ expect(screen.getByRole('link')).toHaveAttribute(
+ 'href',
+ `/superset/dashboard/1`,
+ );
+});
+
+test('should render a custom prefix link', () => {
+ setup({
+ crossLinks: [
+ {
+ id: 1,
+ title: 'Test dashboard',
+ },
+ ],
+ linkPrefix: '/custom/dashboard/',
+ });
+ expect(screen.getByRole('link')).toHaveAttribute(
+ 'href',
+ `/custom/dashboard/1`,
+ );
+});
+
+test('should render multiple links', () => {
+ setup();
+ expect(screen.getAllByRole('link')).toHaveLength(4);
+});

superset-frontend/src/components/ListView/CrossLinks.tsx

@@ -0,0 +1,122 @@
+/**
+ * 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 { styled } from '@superset-ui/core';
+import { Link } from 'react-router-dom';
+import { useTruncation } from 'src/hooks/useTruncation';
+import CrossLinksTooltip from './CrossLinksTooltip';
+
+export type CrossLinkProps = {
+ title: string;
+ id: number;
+};
+
+export type CrossLinksProps = {
+ crossLinks: Array<CrossLinkProps>;
+ maxLinks?: number;
+ linkPrefix?: string;
+};
+
+const StyledCrossLinks = styled.div`
+ ${({ theme }) => `
+ & > span {
+ width: 100%;
+ display: flex;
+
+ .ant-tooltip-open {
+ display: inline;
+ }
+
+ .truncated {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ display: inline-block;
+ width: 100%;
+ vertical-align: bottom;
+ }
+
+ .count {
+ cursor: pointer;
+ color: ${theme.colors.grayscale.base};
+ font-weight: ${theme.typography.weights.bold};
+ }
+ }
+ `}
+`;
+
+export default function CrossLinks({
+ crossLinks,
+ maxLinks = 20,
+ linkPrefix = '/superset/dashboard/',
+}: CrossLinksProps) {
+ const crossLinksRef = useRef<HTMLDivElement>(null);
+ const plusRef = useRef<HTMLDivElement>(null);
+ const [elementsTruncated, hasHiddenElements] = useTruncation(
+ crossLinksRef,
+ plusRef,
+ );
+ const hasMoreItems = useMemo(
+ () =>
+ crossLinks.length > maxLinks ? crossLinks.length - maxLinks : undefined,
+ [crossLinks, maxLinks],
+ );
+ const links = useMemo(
+ () => (
+ <span className="truncated" ref={crossLinksRef} data-test="crosslinks">
+ {crossLinks.map((link, index) => (
+ <Link
+ key={link.id}
+ to={linkPrefix + link.id}
+ target="_blank"
+ rel="noreferer noopener"
+ >
+ {index === 0 ? link.title : `, ${link.title}`}
+ </Link>
+ ))}
+ </span>
+ ),
+ [crossLinks],
+ );
+ const tooltipLinks = useMemo(
+ () =>
+ crossLinks.slice(0, maxLinks).map(l => ({
+ title: l.title,
+ to: linkPrefix + l.id,
+ })),
+ [crossLinks, maxLinks],
+ );
+
+ return (
+ <StyledCrossLinks>
+ <CrossLinksTooltip
+ moreItems={hasMoreItems}
+ crossLinks={tooltipLinks}
+ show={!!elementsTruncated}
+ >
+ {links}
+ {hasHiddenElements && (
+ <span ref={plusRef} className="count">
+ +{elementsTruncated}
+ </span>
+ )}
+ </CrossLinksTooltip>
+ </StyledCrossLinks>
+ );
+}

superset-frontend/src/components/ListView/CrossLinksTooltip.test.tsx

@@ -0,0 +1,89 @@
+/**
+ * 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 userEvent from '@testing-library/user-event';
+import React from 'react';
+import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import CrossLinksTooltip, { CrossLinksTooltipProps } from './CrossLinksTooltip';
+
+const mockedProps = {
+ crossLinks: [
+ {
+ to: 'somewhere/1',
+ title: 'Test dashboard',
+ },
+ {
+ to: 'somewhere/2',
+ title: 'Test dashboard 2',
+ },
+ {
+ to: 'somewhere/3',
+ title: 'Test dashboard 3',
+ },
+ {
+ to: 'somewhere/4',
+ title: 'Test dashboard 4',
+ },
+ ],
+ moreItems: 0,
+ show: true,
+};
+
+function setup(overrideProps: CrossLinksTooltipProps | {} = {}) {
+ return render(
+ <CrossLinksTooltip {...mockedProps} {...overrideProps}>
+ Hover me
+ </CrossLinksTooltip>,
+ {
+ useRouter: true,
+ },
+ );
+}
+
+test('should render', () => {
+ const { container } = setup();
+ expect(container).toBeInTheDocument();
+});
+
+test('should render multiple links', async () => {
+ setup();
+ userEvent.hover(screen.getByText('Hover me'));
+
+ await waitFor(() => {
+ expect(screen.getByText('Test dashboard')).toBeInTheDocument();
+ expect(screen.getByText('Test dashboard 2')).toBeInTheDocument();
+ expect(screen.getByText('Test dashboard 3')).toBeInTheDocument();
+ expect(screen.getByText('Test dashboard 4')).toBeInTheDocument();
+ expect(screen.getAllByRole('link')).toHaveLength(4);
+ });
+});
+
+test('should not render the "+ {x} more"', () => {
+ setup();
+ userEvent.hover(screen.getByText('Hover me'));
+ expect(screen.queryByTestId('plus-more')).not.toBeInTheDocument();
+});
+
+test('should render the "+ {x} more"', async () => {
+ setup({
+ moreItems: 3,
+ });
+ userEvent.hover(screen.getByText('Hover me'));
+ expect(await screen.findByTestId('plus-more')).toBeInTheDocument();
+ expect(await screen.findByText('+ 3 more')).toBeInTheDocument();
+});