chore(explore): Hide non-droppable metric and column list (#27717)

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx

@@ -16,7 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { ReactNode, useContext, useMemo } from 'react';
+import React, {
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+} from 'react';
 import { useDrop } from 'react-dnd';
 import { t, useTheme } from '@superset-ui/core';
 import ControlHeader from 'src/explore/components/ControlHeader';
@@ -31,7 +37,7 @@ import {
 } from 'src/explore/components/DatasourcePanel/types';
 import Icons from 'src/components/Icons';
 import { DndItemType } from '../../DndItemType';
-import { DraggingContext } from '../../ExploreContainer';
+import { DraggingContext, DropzoneContext } from '../../ExploreContainer';
 
 export type DndSelectLabelProps = {
   name: string;
@@ -55,6 +61,14 @@ export default function DndSelectLabel({
   ...props
 }: DndSelectLabelProps) {
   const theme = useTheme();
+  const canDropProp = props.canDrop;
+  const canDropValueProp = props.canDropValue;
+
+  const dropValidator = useCallback(
+    (item: DatasourcePanelDndItem) =>
+      canDropProp(item) && (canDropValueProp?.(item.value) ?? true),
+    [canDropProp, canDropValueProp],
+  );
 
   const [{ isOver, canDrop }, datasourcePanelDrop] = useDrop({
     accept: isLoading ? [] : accept,
@@ -64,8 +78,7 @@ export default function DndSelectLabel({
       props.onDropValue?.(item.value);
     },
 
-    canDrop: (item: DatasourcePanelDndItem) =>
-      props.canDrop(item) && (props.canDropValue?.(item.value) ?? true),
+    canDrop: dropValidator,
 
     collect: monitor => ({
       isOver: monitor.isOver(),
@@ -73,6 +86,16 @@ export default function DndSelectLabel({
       type: monitor.getItemType(),
     }),
   });
+
+  const dispatch = useContext(DropzoneContext)[1];
+
+  useEffect(() => {
+    dispatch({ key: props.name, canDrop: dropValidator });
+    return () => {
+      dispatch({ key: props.name });
+    };
+  }, [dispatch, props.name, dropValidator]);
+
   const isDragging = useContext(DraggingContext);
 
   const values = useMemo(() => valuesRenderer(), [valuesRenderer]);