Explore-Query Library: Close drawer when clicking on Run query (#90404)

Close drawer when clicking on Run query

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}

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>
   );
 }