From c1afc4deac2760497b2ecbe1c40d7580e35e7164 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Wed, 24 Nov 2021 08:15:29 -0500
Subject: [PATCH] Explore: query history: fix error when removing last item
 (#42179) (#42222)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* explore: rich-history: fix data inconsistency

* also handle starred-queries tab

(cherry picked from commit 06e474dfd58c67eddd5ea5910a36a8bfb7de6de7)

Co-authored-by: Gábor Farkas <gabor.farkas@gmail.com>
---
 .../RichHistory/RichHistoryQueriesTab.tsx       | 17 ++++++++++-------
 .../RichHistory/RichHistoryStarredTab.tsx       | 16 +++++++++-------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
index 660fd1a9c55..68708b05445 100644
--- a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
@@ -137,16 +137,13 @@ export function RichHistoryQueriesTab(props: Props) {
   } = props;
 
   const [timeFilter, setTimeFilter] = useState<[number, number]>([0, retentionPeriod]);
-  const [filteredQueries, setFilteredQueries] = useState<RichHistoryQuery[]>([]);
+  const [data, setData] = useState<[RichHistoryQuery[], ReturnType<typeof createDatasourcesList>]>([[], []]);
   const [searchInput, setSearchInput] = useState('');
   const [debouncedSearchInput, setDebouncedSearchInput] = useState('');
 
   const theme = useTheme();
   const styles = getStyles(theme, height);
 
-  const datasourcesRetrievedFromQueryHistory = uniqBy(queries, 'datasourceName').map((d) => d.datasourceName);
-  const listOfDatasources = createDatasourcesList(datasourcesRetrievedFromQueryHistory);
-
   useDebounce(
     () => {
       setDebouncedSearchInput(searchInput);
@@ -156,17 +153,23 @@ export function RichHistoryQueriesTab(props: Props) {
   );
 
   useEffect(() => {
-    setFilteredQueries(
+    const datasourcesRetrievedFromQueryHistory = uniqBy(queries, 'datasourceName').map((d) => d.datasourceName);
+    const listOfDatasources = createDatasourcesList(datasourcesRetrievedFromQueryHistory);
+
+    setData([
       filterAndSortQueries(
         queries,
         sortOrder,
         datasourceFilters.map((d) => d.value),
         debouncedSearchInput,
         timeFilter
-      )
-    );
+      ),
+      listOfDatasources,
+    ]);
   }, [timeFilter, queries, sortOrder, datasourceFilters, debouncedSearchInput]);
 
+  const [filteredQueries, listOfDatasources] = data;
+
   /* mappedQueriesToHeadings is an object where query headings (stringified dates/data sources)
    * are keys and arrays with queries that belong to that headings are values.
    */
diff --git a/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx b/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
index 9026d55acf6..f0d68963cfd 100644
--- a/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
@@ -80,16 +80,13 @@ export function RichHistoryStarredTab(props: Props) {
     exploreId,
   } = props;
 
-  const [filteredQueries, setFilteredQueries] = useState<RichHistoryQuery[]>([]);
+  const [data, setData] = useState<[RichHistoryQuery[], ReturnType<typeof createDatasourcesList>]>([[], []]);
   const [searchInput, setSearchInput] = useState('');
   const [debouncedSearchInput, setDebouncedSearchInput] = useState('');
 
   const theme = useTheme();
   const styles = getStyles(theme);
 
-  const datasourcesRetrievedFromQueryHistory = uniqBy(queries, 'datasourceName').map((d) => d.datasourceName);
-  const listOfDatasources = createDatasourcesList(datasourcesRetrievedFromQueryHistory);
-
   useDebounce(
     () => {
       setDebouncedSearchInput(searchInput);
@@ -99,17 +96,22 @@ export function RichHistoryStarredTab(props: Props) {
   );
 
   useEffect(() => {
+    const datasourcesRetrievedFromQueryHistory = uniqBy(queries, 'datasourceName').map((d) => d.datasourceName);
+    const listOfDatasources = createDatasourcesList(datasourcesRetrievedFromQueryHistory);
     const starredQueries = queries.filter((q) => q.starred === true);
-    setFilteredQueries(
+    setData([
       filterAndSortQueries(
         starredQueries,
         sortOrder,
         datasourceFilters.map((d) => d.value),
         debouncedSearchInput
-      )
-    );
+      ),
+      listOfDatasources,
+    ]);
   }, [queries, sortOrder, datasourceFilters, debouncedSearchInput]);
 
+  const [filteredQueries, listOfDatasources] = data;
+
   return (
     <div className={styles.container}>
       <div className={styles.containerContent}>