Query History: Hide query history when anonymous user uses Explore (#49896)

* Hide query history when anonymous user uses Explore

* Show query history to anonymous users when local storage is used

* Fix integration test

public/app/core/history/richHistoryStorageProvider.ts

@@ -1,4 +1,5 @@
 import { config } from '@grafana/runtime';
+import { contextSrv } from 'app/core/core';
 
 import { SortOrder } from '../utils/richHistoryTypes';
 
@@ -19,6 +20,7 @@ interface RichHistorySupportedFeatures {
   clearHistory: boolean;
   onlyActiveDataSource: boolean;
   changeRetention: boolean;
+  queryHistoryAvailable: boolean;
 }
 
 export const supportedFeatures = (): RichHistorySupportedFeatures => {
@@ -29,6 +31,7 @@ export const supportedFeatures = (): RichHistorySupportedFeatures => {
         clearHistory: false,
         onlyActiveDataSource: false,
         changeRetention: false,
+        queryHistoryAvailable: contextSrv.isSignedIn,
       }
     : {
         availableFilters: [SortOrder.Descending, SortOrder.Ascending, SortOrder.DatasourceAZ, SortOrder.DatasourceZA],
@@ -36,5 +39,6 @@ export const supportedFeatures = (): RichHistorySupportedFeatures => {
         clearHistory: true,
         onlyActiveDataSource: true,
         changeRetention: true,
+        queryHistoryAvailable: true,
       };
 };

public/app/features/explore/Explore.tsx

@@ -11,6 +11,7 @@ import { selectors } from '@grafana/e2e-selectors';
 import { Collapse, CustomScrollbar, ErrorBoundaryAlert, Themeable2, withTheme2, PanelContainer } from '@grafana/ui';
 import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR, FilterItem } from '@grafana/ui/src/components/Table/types';
 import appEvents from 'app/core/app_events';
+import { supportedFeatures } from 'app/core/history/richHistoryStorageProvider';
 import { getNodeGraphDataFrames } from 'app/plugins/panel/nodeGraph/utils';
 import { StoreState } from 'app/types';
 import { AbsoluteTimeEvent } from 'app/types/events';
@@ -347,6 +348,7 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
     const styles = getStyles(theme);
     const showPanels = queryResponse && queryResponse.state !== LoadingState.NotStarted;
     const showRichHistory = openDrawer === ExploreDrawer.RichHistory;
+    const richHistoryRowButtonHidden = !supportedFeatures().queryHistoryAvailable;
     const showQueryInspector = openDrawer === ExploreDrawer.QueryInspector;
     const showNoData =
       queryResponse.state === LoadingState.Done &&
@@ -375,6 +377,7 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
                 // We cannot show multiple traces at the same time right now so we do not show add query button.
                 //TODO:unification
                 addQueryRowButtonHidden={false}
+                richHistoryRowButtonHidden={richHistoryRowButtonHidden}
                 richHistoryButtonActive={showRichHistory}
                 queryInspectorButtonActive={showQueryInspector}
                 onClickAddQueryRowButton={this.onClickAddQueryRowButton}

public/app/features/explore/SecondaryActions.test.tsx

@@ -20,10 +20,11 @@ describe('SecondaryActions', () => {
     expect(screen.getByRole('button', { name: /Query inspector button/i })).toBeInTheDocument();
   });
 
-  it('should not render add row button if addQueryRowButtonHidden=true', () => {
+  it('should not render hidden elements', () => {
     render(
       <SecondaryActions
         addQueryRowButtonHidden={true}
+        richHistoryRowButtonHidden={true}
         onClickAddQueryRowButton={noop}
         onClickRichHistoryButton={noop}
         onClickQueryInspectorButton={noop}
@@ -31,7 +32,7 @@ describe('SecondaryActions', () => {
     );
 
     expect(screen.queryByRole('button', { name: /Add row button/i })).not.toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Rich history button/i })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /Rich history button/i })).not.toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Query inspector button/i })).toBeInTheDocument();
   });
 

public/app/features/explore/SecondaryActions.tsx

@@ -7,6 +7,7 @@ import { Button, HorizontalGroup, useTheme2 } from '@grafana/ui';
 type Props = {
   addQueryRowButtonDisabled?: boolean;
   addQueryRowButtonHidden?: boolean;
+  richHistoryRowButtonHidden?: boolean;
   richHistoryButtonActive?: boolean;
   queryInspectorButtonActive?: boolean;
 
@@ -39,15 +40,17 @@ export function SecondaryActions(props: Props) {
             Add query
           </Button>
         )}
-        <Button
+        {!props.richHistoryRowButtonHidden && (
-          variant="secondary"
+          <Button
-          aria-label="Rich history button"
+            variant="secondary"
-          className={cx({ ['explore-active-button']: props.richHistoryButtonActive })}
+            aria-label="Rich history button"
-          onClick={props.onClickRichHistoryButton}
+            className={cx({ ['explore-active-button']: props.richHistoryButtonActive })}
-          icon="history"
+            onClick={props.onClickRichHistoryButton}
-        >
+            icon="history"
-          Query history
+          >
-        </Button>
+            Query history
+          </Button>
+        )}
         <Button
           variant="secondary"
           aria-label="Query inspector button"

public/app/features/explore/spec/queryHistory.test.tsx

@@ -54,6 +54,7 @@ jest.mock('@grafana/runtime', () => ({
 jest.mock('app/core/core', () => ({
   contextSrv: {
     hasAccess: () => true,
+    isSignedIn: true,
   },
 }));