fix: Use labels in Drill to Detail (#34620)

superset-frontend/src/hooks/apiResources/datasets.ts

@@ -17,10 +17,34 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Column, Metric, ensureIsArray } from '@superset-ui/core';
+import {
+  Column,
+  logging,
+  Metric,
+  ensureIsArray,
+  getExtensionsRegistry,
+  QueryFormData,
+} from '@superset-ui/core';
+import { useEffect, useState } from 'react';
 import { Dataset } from 'src/components/Chart/types';
+import {
+  cachedSupersetGet,
+  supersetGetCache,
+} from 'src/utils/cachedSupersetGet';
+import { Resource, ResourceStatus } from './apiResources';
 
-export const useVerboseMap = (dataset?: Dataset) => {
+/**
+ * Utility function to extract numeric dataset ID from datasource string
+ */
+export const getDatasetId = (datasetId: string | number): number =>
+  typeof datasetId === 'string'
+    ? Number(datasetId.split('__')[0])
+    : Number(datasetId);
+
+/**
+ * Helper function to create verbose_map from a dataset
+ */
+export const createVerboseMap = (dataset?: Dataset): Record<string, string> => {
   const verbose_map: Record<string, string> = {};
   ensureIsArray(dataset?.columns).forEach((column: Column) => {
     verbose_map[column.column_name] = column.verbose_name || column.column_name;
@@ -30,3 +54,68 @@ export const useVerboseMap = (dataset?: Dataset) => {
   });
   return verbose_map;
 };
+
+/**
+ * Hook to fetch dataset drill info with extension support and verbose_map
+ * Handles both extension and standard API cases internally
+ */
+export const useDatasetDrillInfo = (
+  datasetId: string | number,
+  dashboardId: number,
+  formData?: QueryFormData,
+): Resource<Dataset> => {
+  const [resource, setResource] = useState<Resource<Dataset>>({
+    status: ResourceStatus.Loading,
+    result: null,
+    error: null,
+  });
+
+  useEffect(() => {
+    const fetchDataset = async () => {
+      try {
+        const numericDatasetId = getDatasetId(datasetId);
+        const loadDrillByOptionsExtension = getExtensionsRegistry().get(
+          'load.drillby.options',
+        );
+        let result;
+
+        if (loadDrillByOptionsExtension && formData) {
+          const response = await loadDrillByOptionsExtension(
+            numericDatasetId,
+            formData,
+          );
+          result = response?.json?.result;
+        } else {
+          const endpoint = `/api/v1/dataset/${numericDatasetId}/drill_info/?q=(dashboard_id:${dashboardId})`;
+          try {
+            const { json } = await cachedSupersetGet({ endpoint });
+            const { result: datasetResult } = json;
+            result = datasetResult;
+          } catch (error) {
+            logging.error('Failed to load dataset: ', error);
+            supersetGetCache.delete(endpoint);
+            throw error;
+          }
+        }
+
+        const verbose_map = createVerboseMap(result);
+
+        setResource({
+          status: ResourceStatus.Complete,
+          result: { ...result, verbose_map },
+          error: null,
+        });
+      } catch (error) {
+        setResource({
+          status: ResourceStatus.Error,
+          result: null,
+          error: error instanceof Error ? error : new Error(String(error)),
+        });
+      }
+    };
+
+    fetchDataset();
+  }, [datasetId, dashboardId, formData]);
+
+  return resource;
+};