[Backport 2.x] Fix running recent query button

changelogs/fragments/8252.yml

@@ -0,0 +1,2 @@
+fix:
+- Run recent query button work properly ([#8252](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8252))

src/plugins/data/public/query/query_string/language_service/lib/recent_query.tsx

@@ -51,7 +51,10 @@
           icon: 'play',
           type: 'icon',
           onClick: (item: RecentQueryTableItem) => {
-            onClickRecentQuery(recentQueries[item.id].query, recentQueries[item.id].timeRange);
+            onClickRecentQuery(
+              recentQueries.find((recentQuery) => recentQuery.id === item.id)?.query!,
+              recentQueries.find((recentQuery) => recentQuery.id === item.id)?.timeRange
+            );
           },
           'data-test-subj': 'action-run',
         },
@@ -76,8 +79,8 @@
   const recentQueryItems: RecentQueryTableItem[] = recentQueries
     .filter((item, idx) => idx < MAX_RECENT_QUERY_SIZE)
     .filter((item) => item.query.language === currentLanguage)
-    .map((query, idx) => ({
-      id: idx,
+    .map((query) => ({
+      id: query.id,
       query: query.query.query,
       timeRange: query.timeRange,
       time: moment(query.time).format('MMM D, YYYY HH:mm:ss'),

src/plugins/data/public/query/query_string/language_service/types.ts

@@ -13,6 +13,7 @@ import {
 import { EditorInstance } from '../../../ui/query_editor/editors';
 
 export interface RecentQueryItem {
+  id: number;
   query: Query;
   time: number;
   timeRange?: TimeRange;

src/plugins/data/public/query/query_string/query_history.ts

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import uuid from 'uuid';
 import { BehaviorSubject } from 'rxjs';
 import { DataStorage } from '../../../common';
 import { Query, TimeRange } from '../..';
@@ -61,6 +62,7 @@ export class QueryHistory {
       time: timestamp,
       query,
       dateRange,
+      id: uuid.v4(),
     };
     this.storage.set(newKey, newItem);