From 98c575d28f6e615bc19c5d7ffacf542a5a81b655 Mon Sep 17 00:00:00 2001
From: Kristina <kristina.durivage@grafana.com>
Date: Wed, 10 Apr 2024 08:21:29 -0500
Subject: [PATCH] Explore: Query history should gracefully handle undefined
 exploreId on run button (#85821)

* Gracefully handle undefined exploreId on run button

* Add test
---
 .../RichHistory/RichHistoryCard.test.tsx      | 24 +++++++++++++------
 .../explore/RichHistory/RichHistoryCard.tsx   |  6 ++---
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/public/app/features/explore/RichHistory/RichHistoryCard.test.tsx b/public/app/features/explore/RichHistory/RichHistoryCard.test.tsx
index a8cb484823e..23ead9d44b0 100644
--- a/public/app/features/explore/RichHistory/RichHistoryCard.test.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryCard.test.tsx
@@ -107,7 +107,7 @@ interface MockQuery extends DataQuery {
   queryText?: string;
 }
 
-const setup = (propOverrides?: Partial<Props<MockQuery>>) => {
+const setup = (propOverrides?: Partial<Props<MockQuery>>, noPanes = false) => {
   const props: Props<MockQuery> = {
     queryHistoryItem: {
       id: '1',
@@ -130,9 +130,11 @@ const setup = (propOverrides?: Partial<Props<MockQuery>>) => {
     datasourceInstances: [dsStore.loki],
   };
 
-  const store = configureStore({
-    explore: {
-      panes: {
+  Object.assign(props, propOverrides);
+
+  const panes = noPanes
+    ? {}
+    : {
         left: {
           queries: [{ query: 'query1', refId: 'A' }],
           datasourceInstance: dsStore.loki,
@@ -141,12 +143,14 @@ const setup = (propOverrides?: Partial<Props<MockQuery>>) => {
             raw: { from: 'now-1h', to: 'now' },
           },
         },
-      },
+      };
+
+  const store = configureStore({
+    explore: {
+      panes,
     } as unknown as ExploreState,
   });
 
-  Object.assign(props, propOverrides);
-
   render(
     <TestProvider store={store}>
       <RichHistoryCard {...props} />
@@ -209,6 +213,12 @@ describe('RichHistoryCard', () => {
     expect(datasourceName).toHaveTextContent('Data source does not exist anymore');
   });
 
+  it('should disable run query button if there are no explore IDs', async () => {
+    setup({}, true);
+    const runQueryButton = await screen.findByRole('button', { name: /run query/i });
+    expect(runQueryButton).toBeDisabled();
+  });
+
   describe('copy queries to clipboard', () => {
     it('should copy query model to clipboard when copying a query from a non existent datasource', async () => {
       setup({
diff --git a/public/app/features/explore/RichHistory/RichHistoryCard.tsx b/public/app/features/explore/RichHistory/RichHistoryCard.tsx
index 9d1dd68aad1..28d3f86a0b4 100644
--- a/public/app/features/explore/RichHistory/RichHistoryCard.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryCard.tsx
@@ -346,7 +346,7 @@ export function RichHistoryCard(props: Props) {
 
   // exploreId on where the query will be ran, and the datasource ID for the item's DS
   const runQueryText = (exploreId: string, dsUid: string) => {
-    return dsUid !== undefined && isDifferentDatasource(dsUid, exploreId)
+    return dsUid !== undefined && exploreId !== undefined && isDifferentDatasource(dsUid, exploreId)
       ? {
           fallbackText: 'Switch data source and run query',
           translation: t('explore.rich-history-card.switch-datasource-button', 'Switch data source and run query'),
@@ -360,14 +360,14 @@ export function RichHistoryCard(props: Props) {
   const runButton = () => {
     const disabled = cardRootDatasource?.uid === undefined;
     if (!isPaneSplit) {
-      const exploreId = exploreActiveDS.exploreToDS[0].exploreId;
+      const exploreId = exploreActiveDS.exploreToDS[0]?.exploreId; // may be undefined if explore is refreshed while the pane is up
       const buttonText = runQueryText(exploreId, props.queryHistoryItem.datasourceUid);
       return (
         <Button
           variant="secondary"
           aria-label={buttonText.translation}
           onClick={() => onRunQuery(exploreId)}
-          disabled={disabled}
+          disabled={disabled || exploreId === undefined}
         >
           {buttonText.translation}
         </Button>