Explore: query history: fix error when removing last item (#42179)

* explore: rich-history: fix data inconsistency

* also handle starred-queries tab

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.
    */

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}>