feat: enhance drill-through modal Edit chart button visibility and navigation

- Only show Edit chart button when drill-through chart is configured
- Fix navigation to properly route to explore page instead of dashboard
- Use Button href for same-tab navigation (no target="_blank")
- Add Dataset.id type definition for URL generation
- Update tests to verify link behavior and required dataset properties

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: mistercrunch

superset-frontend/src/components/Chart/DrillDetail/DrillDetailModal.test.tsx

@@ -51,7 +51,10 @@ const drillToDetailModalState = {
   },
 };
 
-const renderModal = async (overrideState: Record<string, any> = {}) => {
+const renderModal = async (
+  overrideState: Record<string, any> = {},
+  dataset?: any,
+) => {
   const DrillDetailModalWrapper = () => {
     const [showModal, setShowModal] = useState(false);
     return (
@@ -65,6 +68,7 @@ const renderModal = async (overrideState: Record<string, any> = {}) => {
           initialFilters={[]}
           showModal={showModal}
           onHideModal={() => setShowModal(false)}
+          dataset={dataset}
         />
       </>
     );
@@ -88,11 +92,21 @@ test('should render the title', async () => {
   expect(screen.getByText(`Drill to detail: ${chartName}`)).toBeInTheDocument();
 });
 
-test('should render the button', async () => {
+test('should not render Edit chart button when no drill-through chart is configured', async () => {
   await renderModal();
   expect(
-    screen.getByRole('button', { name: 'Edit chart' }),
-  ).toBeInTheDocument();
+    screen.queryByRole('button', { name: 'Edit chart' }),
+  ).not.toBeInTheDocument();
+  expect(screen.getAllByRole('button', { name: 'Close' })).toHaveLength(2);
+});
+
+test('should render Edit chart link when drill-through chart is configured', async () => {
+  const datasetWithDrillThrough = {
+    drill_through_chart_id: 123,
+    id: 456, // Required for URL generation
+  };
+  await renderModal({}, datasetWithDrillThrough);
+  expect(screen.getByRole('link', { name: 'Edit chart' })).toBeInTheDocument();
   expect(screen.getAllByRole('button', { name: 'Close' })).toHaveLength(2);
 });
 
@@ -103,20 +117,35 @@ test('should close the modal', async () => {
   expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 });
 
-test('should forward to Explore', async () => {
-  await renderModal();
-  userEvent.click(screen.getByRole('button', { name: 'Edit chart' }));
-  expect(mockHistoryPush).toHaveBeenCalledWith(
-    `/explore/?dashboard_page_id=&slice_id=${sliceId}`,
+test('should have correct href for drill-through chart', async () => {
+  const drillThroughChartId = 123;
+  const datasetId = 456;
+  const datasetWithDrillThrough = {
+    drill_through_chart_id: drillThroughChartId,
+    id: datasetId,
+  };
+  await renderModal({}, datasetWithDrillThrough);
+  const editLink = screen.getByRole('link', { name: 'Edit chart' });
+  expect(editLink).toHaveAttribute(
+    'href',
+    `/explore/?dashboard_page_id=&slice_id=${drillThroughChartId}`,
   );
+  expect(editLink).not.toHaveAttribute('target'); // We removed target="_blank"
 });
 
 test('should render "Edit chart" as disabled without can_explore permission', async () => {
-  await renderModal({
-    user: {
-      ...drillToDetailModalState.user,
-      roles: { Admin: [['invalid_permission', 'Superset']] },
+  const datasetWithDrillThrough = {
+    drill_through_chart_id: 123,
+    id: 456, // Required for URL generation
+  };
+  await renderModal(
+    {
+      user: {
+        ...drillToDetailModalState.user,
+        roles: { Admin: [['invalid_permission', 'Superset']] },
+      },
     },
-  });
+    datasetWithDrillThrough,
+  );
   expect(screen.getByRole('button', { name: 'Edit chart' })).toBeDisabled();
 });

superset-frontend/src/components/Chart/DrillDetail/DrillDetailModal.tsx

@@ -17,8 +17,7 @@
  * under the License.
  */
 
-import { useCallback, useContext, useMemo } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useContext, useMemo } from 'react';
 import {
   BinaryQueryObjectFilterClause,
   css,
@@ -40,23 +39,25 @@ import DrillDetailPane from './DrillDetailPane';
 interface ModalFooterProps {
   canExplore: boolean;
   closeModal?: () => void;
-  exploreChart: () => void;
+  showEditButton: boolean;
+  exploreUrl: string;
 }
 
 const ModalFooter = ({
   canExplore,
   closeModal,
-  exploreChart,
+  showEditButton,
+  exploreUrl,
 }: ModalFooterProps) => {
   const theme = useTheme();
 
   return (
     <>
-      {!isEmbedded() && (
+      {!isEmbedded() && showEditButton && (
         <Button
           buttonStyle="secondary"
           buttonSize="small"
-          onClick={exploreChart}
+          href={canExplore ? exploreUrl : undefined}
           disabled={!canExplore}
           tooltip={
             !canExplore
@@ -100,7 +101,6 @@ export default function DrillDetailModal({
   dataset,
 }: DrillDetailModalProps) {
   const theme = useTheme();
-  const history = useHistory();
   const dashboardPageId = useContext(DashboardPageIdContext);
   const { slice_name: chartName } = useSelector(
     (state: { sliceEntities: { slices: Record<number, Slice> } }) =>
@@ -110,23 +110,35 @@ export default function DrillDetailModal({
     findPermission('can_explore', 'Superset', state.user?.roles),
   );
 
+  // Determine if we should show the Edit Chart button
+  const showEditButton = Boolean(dataset?.drill_through_chart_id);
+
   const exploreUrl = useMemo(() => {
-    // Use drill-through chart ID if configured, otherwise use original chart
-    const targetChartId = dataset?.drill_through_chart_id || chartId;
+    // Only compute URL when modal is open and drill-through chart exists
+    if (!showModal || !dataset?.drill_through_chart_id || !dataset?.id) {
+      return '';
+    }
+
+    // Construct datasource string in the format expected by getExploreUrl
+    const datasource = `${dataset.id}__table`;
+
     return getExploreUrl({
       formData: {
-        slice_id: targetChartId,
+        slice_id: dataset.drill_through_chart_id,
+        datasource,
       },
       endpointType: 'base',
+      curUrl: null, // Explicitly prevent inheriting current dashboard URL
       requestParams: dashboardPageId
         ? { dashboard_page_id: dashboardPageId }
         : {},
     });
-  }, [chartId, dashboardPageId, dataset?.drill_through_chart_id]);
-
-  const exploreChart = useCallback(() => {
-    history.push(exploreUrl);
-  }, [exploreUrl, history]);
+  }, [
+    showModal,
+    dashboardPageId,
+    dataset?.drill_through_chart_id,
+    dataset?.id,
+  ]);
 
   return (
     <Modal
@@ -141,7 +153,11 @@ export default function DrillDetailModal({
       name={t('Drill to detail: %s', chartName)}
       title={t('Drill to detail: %s', chartName)}
       footer={
-        <ModalFooter exploreChart={exploreChart} canExplore={canExplore} />
+        <ModalFooter
+          canExplore={canExplore}
+          showEditButton={showEditButton}
+          exploreUrl={exploreUrl || ''}
+        />
       }
       responsive
       resizable

superset-frontend/src/components/Chart/types.ts

@@ -24,6 +24,7 @@ export enum DrillByType {
 }
 
 export type Dataset = {
+  id?: number;
   changed_by?: {
     first_name: string;
     last_name: string;