feat(dashboard): Chart title click redirects to Explore (#20111)

superset-frontend/src/components/EditableTitle/index.tsx

@@ -18,7 +18,7 @@
  */
 import React, { useEffect, useState, useRef } from 'react';
 import cx from 'classnames';
-import { styled, t } from '@superset-ui/core';
+import { css, styled, t } from '@superset-ui/core';
 import { Tooltip } from 'src/components/Tooltip';
 import CertifiedBadge from '../CertifiedBadge';
 
@@ -37,6 +37,7 @@ export interface EditableTitleProps {
   placeholder?: string;
   certifiedBy?: string;
   certificationDetails?: string;
+  onClickTitle?: () => void;
 }
 
 const StyledCertifiedBadge = styled(CertifiedBadge)`
@@ -57,6 +58,7 @@ export default function EditableTitle({
   placeholder = '',
   certifiedBy,
   certificationDetails,
+  onClickTitle,
   // rest is related to title tooltip
   ...rest
 }: EditableTitleProps) {
@@ -216,7 +218,23 @@ export default function EditableTitle({
   }
   if (!canEdit) {
     // don't actually want an input in this case
-    titleComponent = <span data-test="editable-title-input">{value}</span>;
+    titleComponent = onClickTitle ? (
+      <span
+        role="button"
+        onClick={onClickTitle}
+        tabIndex={0}
+        data-test="editable-title-input"
+        css={css`
+          :hover {
+            text-decoration: underline;
+          }
+        `}
+      >
+        {value}
+      </span>
+    ) : (
+      <span data-test="editable-title-input">{value}</span>
+    );
   }
   return (
     <span

superset-frontend/src/dashboard/components/SliceHeader/SliceHeader.test.tsx

@@ -100,7 +100,7 @@ jest.mock('src/dashboard/components/FiltersBadge', () => ({
   ),
 }));
 
-const createProps = () => ({
+const createProps = (overrides: any = {}) => ({
   filters: {}, // is in typing but not being used
   editMode: false,
   annotationQuery: { param01: 'annotationQuery' } as any,
@@ -159,6 +159,7 @@ const createProps = () => ({
   formData: { slice_id: 1, datasource: '58__table' },
   width: 100,
   height: 100,
+  ...overrides,
 });
 
 test('Should render', () => {
@@ -264,6 +265,48 @@ test('Should render title', () => {
   expect(screen.getByText('Vaccine Candidates per Phase')).toBeInTheDocument();
 });
 
+test('Should render click to edit prompt and run onExploreChart on click', async () => {
+  const props = createProps();
+  render(<SliceHeader {...props} />, { useRedux: true });
+  userEvent.hover(screen.getByText('Vaccine Candidates per Phase'));
+  expect(
+    await screen.findByText(
+      'Click to edit Vaccine Candidates per Phase in a new tab',
+    ),
+  ).toBeInTheDocument();
+
+  userEvent.click(screen.getByText('Vaccine Candidates per Phase'));
+  expect(props.onExploreChart).toHaveBeenCalled();
+});
+
+test('Should not render click to edit prompt and run onExploreChart on click if supersetCanExplore=false', () => {
+  const props = createProps({ supersetCanExplore: false });
+  render(<SliceHeader {...props} />, { useRedux: true });
+  userEvent.hover(screen.getByText('Vaccine Candidates per Phase'));
+  expect(
+    screen.queryByText(
+      'Click to edit Vaccine Candidates per Phase in a new tab',
+    ),
+  ).not.toBeInTheDocument();
+
+  userEvent.click(screen.getByText('Vaccine Candidates per Phase'));
+  expect(props.onExploreChart).not.toHaveBeenCalled();
+});
+
+test('Should not render click to edit prompt and run onExploreChart on click if in edit mode', () => {
+  const props = createProps({ editMode: true });
+  render(<SliceHeader {...props} />, { useRedux: true });
+  userEvent.hover(screen.getByText('Vaccine Candidates per Phase'));
+  expect(
+    screen.queryByText(
+      'Click to edit Vaccine Candidates per Phase in a new tab',
+    ),
+  ).not.toBeInTheDocument();
+
+  userEvent.click(screen.getByText('Vaccine Candidates per Phase'));
+  expect(props.onExploreChart).not.toHaveBeenCalled();
+});
+
 test('Should render "annotationsLoading"', () => {
   const props = createProps();
   render(<SliceHeader {...props} />, { useRedux: true });

superset-frontend/src/dashboard/components/SliceHeader/index.tsx

@@ -104,9 +104,18 @@ const SliceHeader: FC<SliceHeaderProps> = ({
     [crossFilterValue],
   );
 
+  const handleClickTitle =
+    !editMode && supersetCanExplore ? onExploreChart : undefined;
+
   useEffect(() => {
     const headerElement = headerRef.current;
-    if (
+    if (handleClickTitle) {
+      setHeaderTooltip(
+        sliceName
+          ? t('Click to edit %s in a new tab', sliceName)
+          : t('Click to edit chart in a new tab'),
+      );
+    } else if (
       headerElement &&
       (headerElement.scrollWidth > headerElement.offsetWidth ||
         headerElement.scrollHeight > headerElement.offsetHeight)
@@ -115,7 +124,7 @@ const SliceHeader: FC<SliceHeaderProps> = ({
     } else {
       setHeaderTooltip(null);
     }
-  }, [sliceName, width, height]);
+  }, [sliceName, width, height, handleClickTitle]);
 
   return (
     <div className="chart-header" data-test="slice-header" ref={innerRef}>
@@ -132,6 +141,7 @@ const SliceHeader: FC<SliceHeaderProps> = ({
             emptyText=""
             onSaveTitle={updateSliceName}
             showTooltip={false}
+            onClickTitle={handleClickTitle}
           />
         </Tooltip>
         {!!Object.values(annotationQuery).length && (