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

…1760)

Co-authored-by: Kamil Gabryjelski <[email protected]>

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