From 632e641c976aa2c6d9ec29a503d3729d0f85e880 Mon Sep 17 00:00:00 2001
From: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Date: Tue, 14 Sep 2021 18:01:21 +0300
Subject: [PATCH] fix(explore): make clicked dnd filters unique (#16700)

---
 .../src/explore/components/DatasourcePanel/types.ts    |  4 ++++
 .../DndColumnSelectControl/DndFilterSelect.tsx         | 10 +++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/explore/components/DatasourcePanel/types.ts b/superset-frontend/src/explore/components/DatasourcePanel/types.ts
index 22904776fa6f3..315eba93473bf 100644
--- a/superset-frontend/src/explore/components/DatasourcePanel/types.ts
+++ b/superset-frontend/src/explore/components/DatasourcePanel/types.ts
@@ -31,3 +31,7 @@ export function isDatasourcePanelDndItem(
 ): item is DatasourcePanelDndItem {
   return item?.value && item?.type;
 }
+
+export function isSavedMetric(item: any): item is Metric {
+  return item?.metric_name;
+}
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx
index f9a142b665d6b..bb59b17b0c5a0 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx
@@ -45,10 +45,12 @@ import AdhocMetric from 'src/explore/components/controls/MetricControl/AdhocMetr
 import {
   DatasourcePanelDndItem,
   DndItemValue,
+  isSavedMetric,
 } from 'src/explore/components/DatasourcePanel/types';
 import { DndItemType } from 'src/explore/components/DndItemType';
 import { ControlComponentProps } from 'src/explore/components/Control';
 
+const EMPTY_OBJECT = {};
 const DND_ACCEPTED_TYPES = [
   DndItemType.Column,
   DndItemType.Metric,
@@ -78,7 +80,9 @@ export const DndFilterSelect = (props: DndFilterSelectProps) => {
   );
   const [partitionColumn, setPartitionColumn] = useState(undefined);
   const [newFilterPopoverVisible, setNewFilterPopoverVisible] = useState(false);
-  const [droppedItem, setDroppedItem] = useState<DndItemValue | null>(null);
+  const [droppedItem, setDroppedItem] = useState<
+    DndItemValue | typeof EMPTY_OBJECT
+  >({});
 
   const optionsForSelect = (
     columns: ColumnMeta[],
@@ -342,12 +346,12 @@ export const DndFilterSelect = (props: DndFilterSelectProps) => {
   );
 
   const handleClickGhostButton = useCallback(() => {
-    setDroppedItem(null);
+    setDroppedItem({});
     togglePopover(true);
   }, [togglePopover]);
 
   const adhocFilter = useMemo(() => {
-    if (droppedItem?.metric_name) {
+    if (isSavedMetric(droppedItem)) {
       return new AdhocFilter({
         expressionType: EXPRESSION_TYPES.SQL,
         clause: CLAUSES.HAVING,