Explore: Query history should gracefully handle undefined exploreId on run button (#85821)

* Gracefully handle undefined exploreId on run button

* Add test

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({

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>