From 30e4e9399b9de2d9d65955839d03e507e068fd46 Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Tue, 17 May 2022 23:39:54 -0700
Subject: [PATCH] Geomap: show delete button (#49125)

---
 .../components/Layers/LayerDragDropList.tsx   | 22 +++++++++----------
 .../canvas/editor/LayerElementListEditor.tsx  |  6 ++---
 .../panel/geomap/editor/LayersEditor.tsx      |  7 +-----
 3 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/public/app/core/components/Layers/LayerDragDropList.tsx b/public/app/core/components/Layers/LayerDragDropList.tsx
index db89c48d440..1b6c18c37bd 100644
--- a/public/app/core/components/Layers/LayerDragDropList.tsx
+++ b/public/app/core/components/Layers/LayerDragDropList.tsx
@@ -16,7 +16,7 @@ type LayerDragDropListProps<T extends LayerElement> = {
   onSelect: (element: T) => any;
   onDelete: (element: T) => any;
   onDuplicate?: (element: T) => any;
-  isFrame: (element: T) => boolean;
+  showActions: (element: T) => boolean;
   selection?: string[]; // list of unique ids (names)
   excludeBaseLayer?: boolean;
   onNameChange: (element: T, newName: string) => any;
@@ -30,7 +30,7 @@ export const LayerDragDropList = <T extends LayerElement>({
   onSelect,
   onDelete,
   onDuplicate,
-  isFrame,
+  showActions,
   selection,
   excludeBaseLayer,
   onNameChange,
@@ -74,7 +74,7 @@ export const LayerDragDropList = <T extends LayerElement>({
                         />
                         <div className={style.textWrapper}>&nbsp; {getLayerInfo(element)}</div>
 
-                        {isFrame(element) && (
+                        {showActions(element) && (
                           <>
                             {onDuplicate ? (
                               <IconButton
@@ -93,16 +93,16 @@ export const LayerDragDropList = <T extends LayerElement>({
                               onClick={() => onDelete(element)}
                               surface="header"
                             />
-                            {layers.length > shouldRenderDragIconLengthThreshold && (
-                              <Icon
-                                title="Drag and drop to reorder"
-                                name="draggabledots"
-                                size="lg"
-                                className={style.dragIcon}
-                              />
-                            )}
                           </>
                         )}
+                        {layers.length > shouldRenderDragIconLengthThreshold && (
+                          <Icon
+                            title="Drag and drop to reorder"
+                            name="draggabledots"
+                            size="lg"
+                            className={style.dragIcon}
+                          />
+                        )}
                       </div>
                     )}
                   </Draggable>
diff --git a/public/app/plugins/panel/canvas/editor/LayerElementListEditor.tsx b/public/app/plugins/panel/canvas/editor/LayerElementListEditor.tsx
index 36ed1cc2943..cf89efda442 100644
--- a/public/app/plugins/panel/canvas/editor/LayerElementListEditor.tsx
+++ b/public/app/plugins/panel/canvas/editor/LayerElementListEditor.tsx
@@ -215,8 +215,8 @@ export class LayerElementListEditor extends PureComponent<Props> {
       element.onChange({ ...element.options, name });
     };
 
-    const isFrame = (element: ElementState) => {
-      return element instanceof FrameState;
+    const showActions = (element: ElementState) => {
+      return !(element instanceof FrameState);
     };
 
     const verifyLayerNameUniqueness = (nameToVerify: string) => {
@@ -252,7 +252,7 @@ export class LayerElementListEditor extends PureComponent<Props> {
           getLayerInfo={getLayerInfo}
           onNameChange={onNameChange}
           verifyLayerNameUniqueness={verifyLayerNameUniqueness}
-          isFrame={isFrame}
+          showActions={showActions}
           layers={layer.elements}
           selection={selection}
         />
diff --git a/public/app/plugins/panel/geomap/editor/LayersEditor.tsx b/public/app/plugins/panel/geomap/editor/LayersEditor.tsx
index 2964160bae4..7dc9d4f18b4 100644
--- a/public/app/plugins/panel/geomap/editor/LayersEditor.tsx
+++ b/public/app/plugins/panel/geomap/editor/LayersEditor.tsx
@@ -5,7 +5,6 @@ import { StandardEditorProps } from '@grafana/data';
 import { Container } from '@grafana/ui';
 import { AddLayerButton } from 'app/core/components/Layers/AddLayerButton';
 import { LayerDragDropList } from 'app/core/components/Layers/LayerDragDropList';
-import { FrameState } from 'app/features/canvas/runtime/frame';
 
 import { GeomapInstanceState } from '../GeomapPanel';
 import { geomapLayerRegistry } from '../layers/registry';
@@ -55,10 +54,6 @@ export const LayersEditor = (props: LayersEditorProps) => {
     element.onChange({ ...element.options, name });
   };
 
-  const isFrame = (element: MapLayerState<any>) => {
-    return element instanceof FrameState;
-  };
-
   const selection = selected ? [layers[selected]?.getName()] : [];
 
   return (
@@ -74,12 +69,12 @@ export const LayersEditor = (props: LayersEditorProps) => {
 
       <LayerDragDropList
         layers={layers}
+        showActions={() => layers.length > 2} // 2 because base layer is not counted!
         getLayerInfo={getLayerInfo}
         onDragEnd={onDragEnd}
         onSelect={onSelect}
         onDelete={onDelete}
         selection={selection}
-        isFrame={isFrame}
         excludeBaseLayer
         onNameChange={onNameChange}
         verifyLayerNameUniqueness={actions.canRename}