Scaffold Explore toolbar with testids (#117159)

* Scaffold Explore toolbar with testids

* add refresh button

* fix refresh button

* fix casing

* address feedback

* fix tests

* remove unneeded attributes

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -92,6 +92,15 @@ export const versionedComponents = {
     '12.4.0': (identifier: string) => `data-testid Layout container ${identifier}`,
   },
   TimePicker: {
+    moveBackwardButton: {
+      '12.4.0': 'data-testid explore-toolbar-timepicker-move-backward-button',
+    },
+    moveForwardButton: {
+      '12.4.0': 'data-testid explore-toolbar-timepicker-move-forward-button',
+    },
+    zoomOut: {
+      '12.4.0': 'data-testid explore-toolbar-timepicker-zoom-out-button',
+    },
     openButton: {
       [MIN_GRAFANA_VERSION]: 'data-testid TimePicker Open Button',
     },

packages/grafana-e2e-selectors/src/selectors/pages.ts

@@ -981,6 +981,33 @@ export const versionedPages = {
       },
     },
     toolbar: {
+      bar: {
+        '12.4.0': 'data-testid explore-toolbar',
+      },
+      contentOutline: {
+        '12.4.0': 'data-testid explore-toolbar-content-outline-button',
+      },
+      goQueryless: {
+        '12.4.0': 'data-testid explore-toolbar-go-queryless-button',
+      },
+      split: {
+        '12.4.0': 'data-testid explore-toolbar-split-button',
+      },
+      addTo: {
+        '12.4.0': 'data-testid explore-toolbar-add-dropdown-button',
+      },
+      share: {
+        '12.4.0': 'data-testid explore-toolbar-share-button',
+      },
+      copyLink: {
+        '12.4.0': 'data-testid explore-toolbar-copy-link-button',
+      },
+      live: {
+        '12.4.0': 'data-testid explore-toolbar-live-button',
+      },
+      refreshPicker: {
+        '12.4.0': 'data-testid explore-toolbar-refresh-picker',
+      },
       add: {
         '12.4.0': (key: string) => `data-testid explore-toolbar-add-button ${key}`,
       },

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx

@@ -163,6 +163,7 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
         icon="angle-double-left"
         type="button"
         iconSize="xl"
+        data-testid={selectors.components.TimePicker.moveBackwardButton}
         tooltip={
           moveBackwardTooltip ?? t('time-picker.range-picker.backwards-time-aria-label', 'Move time range backwards')
         }
@@ -223,6 +224,7 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
         type="button"
         variant={variant}
         iconSize="xl"
+        data-testid={selectors.components.TimePicker.moveForwardButton}
         tooltip={
           moveForwardTooltip ?? t('time-picker.range-picker.forwards-time-aria-label', 'Move time range forwards')
         }
@@ -235,6 +237,7 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
           onClick={onZoom}
           icon="search-minus"
           type="button"
+          data-testid={selectors.components.TimePicker.zoomOut}
           variant={variant}
         />
       </Tooltip>

packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx

@@ -32,6 +32,7 @@ export interface Props {
    * By default left items are hidden on small screens.
    */
   forceShowLeftItems?: boolean;
+  'data-testid'?: string;
 }
 
 /**
@@ -56,6 +57,7 @@ export const PageToolbar = memo(
     'aria-label': ariaLabel,
     buttonOverflowAlignment = 'right',
     forceShowLeftItems = false,
+    'data-testid': testId,
   }: Props) => {
     const styles = useStyles2(getStyles);
 
@@ -97,7 +99,7 @@ export const PageToolbar = memo(
     const searchLinksLabel = t('grafana-ui.page-toolbar.search-links', 'Search links');
 
     return (
-      <nav className={mainStyle} aria-label={ariaLabel}>
+      <nav className={mainStyle} aria-label={ariaLabel} data-testid={testId}>
         <div className={styles.leftWrapper}>
           {pageIcon && !onGoBack && (
             <div className={styles.pageIcon}>

public/app/features/explore/ExploreToolbar.tsx

@@ -4,6 +4,7 @@ import { useMemo } from 'react';
 import { shallowEqual } from 'react-redux';
 
 import { DataSourceInstanceSettings, RawTimeRange, GrafanaTheme2 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
 import { reportInteraction } from '@grafana/runtime';
 import {
@@ -204,11 +205,13 @@ export function ExploreToolbar({ exploreId, onChangeTime, onContentOutlineToogle
       {refreshInterval && <SetInterval func={onRunQuery} interval={refreshInterval} loading={loading} />}
       <PageToolbar
         aria-label={t('explore.toolbar.aria-label', 'Explore toolbar')}
+        data-testid={selectors.pages.Explore.toolbar.bar}
         leftItems={[
           <ToolbarButton
             key="content-outline"
             variant="canvas"
             tooltip={t('explore.explore-toolbar.tooltip-content-outline', 'Content outline')}
+            data-testid={selectors.pages.Explore.toolbar.contentOutline}
             icon="list-ui-alt"
             iconOnly={splitted}
             onClick={onContentOutlineToogle}
@@ -240,6 +243,7 @@ export function ExploreToolbar({ exploreId, onChangeTime, onContentOutlineToogle
             <ToolbarButton
               variant="canvas"
               key="split"
+              data-testid={selectors.pages.Explore.toolbar.split}
               tooltip={t('explore.toolbar.split-tooltip', 'Split the pane')}
               onClick={onOpenSplitView}
               icon="columns"
@@ -306,6 +310,7 @@ export function ExploreToolbar({ exploreId, onChangeTime, onContentOutlineToogle
             noIntervalPicker={isLive}
             primary={true}
             width={(showSmallTimePicker ? 35 : 108) + 'px'}
+            data-testid={selectors.pages.Explore.toolbar.refreshPicker}
           />,
           (!splitted || !isLeftPane) && <ShortLinkButtonMenu key="share" hideText={showSmallTimePicker} />,
           datasourceInstance?.meta.streaming && (

public/app/features/explore/LiveTailButton.tsx

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
+import { selectors } from '@grafana/e2e-selectors';
 import { t } from '@grafana/i18n';
 import { ButtonGroup, ToolbarButton } from '@grafana/ui';
 
@@ -29,6 +30,7 @@ export function LiveTailButton(props: LiveTailButtonProps) {
         variant={buttonVariant}
         icon={!isLive || isPaused ? 'play' : 'pause'}
         onClick={onClickMain}
+        data-testid={selectors.pages.Explore.toolbar.live}
         tooltip={
           !isLive || isPaused
             ? t('explore.live-tail-button.start-live-stream-your-logs', 'Start live stream your logs')

public/app/features/explore/ShortLinkButtonMenu.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import { IconName } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
 import { reportInteraction, config } from '@grafana/runtime';
 import { Dropdown, Menu, MenuGroup, ButtonGroup, Button } from '@grafana/ui';
@@ -139,6 +140,7 @@ export function ShortLinkButtonMenu({ hideText }: { hideText: boolean }) {
           const url = lastSelected.getUrl();
           onCopyLink(lastSelected.shorten, lastSelected.absTime, url);
         }}
+        data-testid={selectors.pages.Explore.toolbar.share}
         aria-label={t('explore.toolbar.copy-shortened-link', 'Copy shortened URL')}
       >
         {!hideText && <Trans i18nKey="explore.toolbar.copy-shortened-link-label">Share</Trans>}
@@ -147,6 +149,7 @@ export function ShortLinkButtonMenu({ hideText }: { hideText: boolean }) {
         <Button
           variant={'secondary'}
           icon={isOpen ? 'angle-up' : 'angle-down'}
+          data-testid={selectors.pages.Explore.toolbar.copyLink}
           aria-label={t('explore.toolbar.copy-shortened-link-menu', 'Open copy link options')}
         />
       </Dropdown>

public/app/features/explore/extensions/toolbar/BasicExtensions.tsx

@@ -1,5 +1,6 @@
 import { lazy, Suspense } from 'react';
 
+import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
 import { Dropdown, ToolbarButton } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
@@ -40,6 +41,7 @@ export function BasicExtensions(props: ExtensionDropdownProps) {
       <Dropdown onVisibleChange={setIsModalOpen} placement="bottom-start" overlay={menu}>
         <ToolbarButton
           aria-label={t('explore.basic-extensions.aria-label-add', 'Add')}
+          data-testid={selectors.pages.Explore.toolbar.addTo}
           disabled={!Boolean(noQueriesInPane)}
           variant="canvas"
           isOpen={isModalOpen}

public/app/features/explore/extensions/toolbar/QuerylessAppsExtensions.tsx

@@ -1,5 +1,6 @@
 import { first } from 'lodash';
 
+import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
 import { Dropdown, ToolbarButton } from '@grafana/ui';
 
@@ -19,7 +20,12 @@ export function QuerylessAppsExtensions(props: ExtensionDropdownProps) {
   if (links.length === 1) {
     const link = first(links)!;
     return (
-      <ToolbarButton variant="canvas" icon={link.icon} onClick={() => setSelectedExtension(link)}>
+      <ToolbarButton
+        variant="canvas"
+        icon={link.icon}
+        onClick={() => setSelectedExtension(link)}
+        data-testid={selectors.pages.Explore.toolbar.goQueryless}
+      >
         <Trans i18nKey="explore.toolbar.add-to-queryless-extensions">Go queryless</Trans>
       </ToolbarButton>
     );