From 124f36e6705a6e5d24fa1d54f3ba0b5f8a0be712 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Thu, 7 Mar 2024 16:59:47 +0100
Subject: [PATCH] Add back removing panels via menu

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 web/ui/mantine-ui/src/pages/query/ExpressionInput.tsx | 4 ++++
 web/ui/mantine-ui/src/pages/query/QueryPanel.tsx      | 3 +++
 2 files changed, 7 insertions(+)

diff --git a/web/ui/mantine-ui/src/pages/query/ExpressionInput.tsx b/web/ui/mantine-ui/src/pages/query/ExpressionInput.tsx
index 7bab1bfe6a..4e60ee11f9 100644
--- a/web/ui/mantine-ui/src/pages/query/ExpressionInput.tsx
+++ b/web/ui/mantine-ui/src/pages/query/ExpressionInput.tsx
@@ -58,6 +58,7 @@ import {
   IconTerminal,
   IconTrash,
 } from "@tabler/icons-react";
+import { removePanel } from "../../state/queryPageSlice";
 
 const promqlExtension = new PromQLExtension();
 
@@ -106,11 +107,13 @@ export class HistoryCompleteStrategy implements CompleteStrategy {
 interface ExpressionInputProps {
   initialExpr: string;
   executeQuery: (expr: string) => void;
+  removePanel: () => void;
 }
 
 const ExpressionInput: FC<ExpressionInputProps> = ({
   initialExpr,
   executeQuery,
+  removePanel,
 }) => {
   const theme = useComputedColorScheme();
   const [expr, setExpr] = useState(initialExpr);
@@ -183,6 +186,7 @@ const ExpressionInput: FC<ExpressionInputProps> = ({
                 leftSection={
                   <IconTrash style={{ width: rem(14), height: rem(14) }} />
                 }
+                onClick={removePanel}
               >
                 Remove query
               </Menu.Item>
diff --git a/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx b/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx
index a3ceecbe98..a3253efd71 100644
--- a/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx
+++ b/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx
@@ -52,6 +52,9 @@ const QueryPanel: FC<PanelProps> = ({ idx }) => {
           setRetriggerIdx((idx) => idx + 1);
           dispatch(setExpr({ idx, expr }));
         }}
+        removePanel={() => {
+          dispatch(removePanel(idx));
+        }}
       />
       <Tabs defaultValue="table" keepMounted={false}>
         <Tabs.List>