Fix running recent query button (#8252)

* Fix click on recent query switching language

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* change to use uuid as identifier

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* Changeset file for PR #8252 created/updated

---------

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
(cherry picked from commit 2f36eaf)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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 @@ export function RecentQueriesTable({
           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 @@ export function RecentQueriesTable({
   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);