From 118597d80f4f3e2652a81db55ec0a209e901f8d5 Mon Sep 17 00:00:00 2001
From: Haris Rozajac <58232930+harisrozajac@users.noreply.github.com>
Date: Mon, 15 Jul 2024 15:43:22 -0600
Subject: [PATCH] Explore-Query Library: Close drawer when clicking on Run
 query (#90404)

Close drawer when clicking on Run query
---
 public/app/features/explore/ExploreRunQueryButton.tsx     | 8 +++++++-
 .../QueryLibrary/QueryTemplatesTable/ActionsCell.tsx      | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/public/app/features/explore/ExploreRunQueryButton.tsx b/public/app/features/explore/ExploreRunQueryButton.tsx
index 26d1f03b894..0f4a9ce33f8 100644
--- a/public/app/features/explore/ExploreRunQueryButton.tsx
+++ b/public/app/features/explore/ExploreRunQueryButton.tsx
@@ -22,6 +22,7 @@ interface ExploreRunQueryButtonProps {
   queries: DataQuery[];
   rootDatasourceUid?: string;
   disabled?: boolean;
+  onClick?: () => void;
 }
 
 export type Props = ConnectedProps<typeof connector> & ExploreRunQueryButtonProps;
@@ -35,6 +36,7 @@ export function ExploreRunQueryButton({
   rootDatasourceUid,
   queries,
   disabled = false,
+  onClick,
   changeDatasource,
   setQueries,
 }: Props) {
@@ -82,7 +84,10 @@ export function ExploreRunQueryButton({
         <Button
           variant="secondary"
           aria-label={buttonText.translation}
-          onClick={() => runQuery(exploreId)}
+          onClick={() => {
+            runQuery(exploreId);
+            onClick?.();
+          }}
           disabled={isInvalid || exploreId === undefined}
         >
           {buttonText.translation}
@@ -101,6 +106,7 @@ export function ExploreRunQueryButton({
                 ariaLabel={buttonText.fallbackText}
                 onClick={() => {
                   runQuery(pane[0]);
+                  onClick?.();
                 }}
                 label={`${paneLabel}: ${buttonText.translation}`}
                 disabled={isInvalid || pane[0] === undefined}
diff --git a/public/app/features/explore/QueryLibrary/QueryTemplatesTable/ActionsCell.tsx b/public/app/features/explore/QueryLibrary/QueryTemplatesTable/ActionsCell.tsx
index 69ac1e65bdf..8e78f64c295 100644
--- a/public/app/features/explore/QueryLibrary/QueryTemplatesTable/ActionsCell.tsx
+++ b/public/app/features/explore/QueryLibrary/QueryTemplatesTable/ActionsCell.tsx
@@ -9,6 +9,7 @@ import { dispatch } from 'app/store/store';
 import { ShowConfirmModalEvent } from 'app/types/events';
 
 import ExploreRunQueryButton from '../../ExploreRunQueryButton';
+import { useQueriesDrawerContext } from '../../QueriesDrawer/QueriesDrawerContext';
 
 import { useQueryLibraryListStyles } from './styles';
 
@@ -20,6 +21,7 @@ interface ActionsCellProps {
 
 function ActionsCell({ query, rootDatasourceUid, queryUid }: ActionsCellProps) {
   const [deleteQueryTemplate] = useDeleteQueryTemplateMutation();
+  const { setDrawerOpened } = useQueriesDrawerContext();
   const styles = useQueryLibraryListStyles();
 
   const onDeleteQuery = (queryUid: string) => {
@@ -57,7 +59,11 @@ function ActionsCell({ query, rootDatasourceUid, queryUid }: ActionsCellProps) {
           }
         }}
       />
-      <ExploreRunQueryButton queries={query ? [query] : []} rootDatasourceUid={rootDatasourceUid} />
+      <ExploreRunQueryButton
+        queries={query ? [query] : []}
+        rootDatasourceUid={rootDatasourceUid}
+        onClick={() => setDrawerOpened(false)}
+      />
     </div>
   );
 }