Frontend: Migrate LoadingIndicator.tsx from aria-label e2e selectors to data-testid (#79664)

* refactor: update component to use data-testid

* refactor: update loading indicator e2e selector

* oops - forgot to update betterer results

* update loading indicator in variable picker

---------

Co-authored-by: joshhunt <josh@trtr.co>
Co-authored-by: Josh Hunt <joshhunt@users.noreply.github.com>

.betterer.results

@@ -653,9 +653,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
     ],
-    "packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx:5381": [
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
-    ],
     "packages/grafana-ui/src/components/PanelChrome/PanelContext.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
@@ -4612,9 +4609,8 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "12"]
     ],
     "public/app/features/variables/pickers/shared/VariableLink.tsx:5381": [
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
+      [0, 0, 0, "Styles should be written using objects.", "0"],
+      [0, 0, 0, "Styles should be written using objects.", "1"]
     ],
     "public/app/features/variables/pickers/shared/VariableOptions.tsx:5381": [
       [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]

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

@@ -382,7 +382,7 @@ export const Components = {
     link: 'data-testid Dashboard link',
   },
   LoadingIndicator: {
-    icon: 'Loading indicator',
+    icon: 'data-testid Loading indicator',
   },
   CallToActionCard: {
     /**

packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx

@@ -32,7 +32,7 @@ export const LoadingIndicator = ({ onCancel, loading }: LoadingIndicatorProps) =
         name="sync"
         size="sm"
         onClick={onCancel}
-        aria-label={selectors.components.LoadingIndicator.icon}
+        data-testid={selectors.components.LoadingIndicator.icon}
       />
     </Tooltip>
   );

public/app/features/variables/pickers/OptionsPicker/OptionPicker.test.tsx

@@ -111,7 +111,7 @@ describe('OptionPicker', () => {
         variable: { ...defaultVariable, state: LoadingState.Loading },
       });
       expect(getSubMenu('A + C')).toBeInTheDocument();
-      expect(screen.getByLabelText(selectors.components.LoadingIndicator.icon)).toBeInTheDocument();
+      expect(screen.getByTestId(selectors.components.LoadingIndicator.icon)).toBeInTheDocument();
     });
 
     it('link text should not be clickable', async () => {

public/app/features/variables/pickers/shared/VariableLink.tsx

@@ -3,7 +3,8 @@ import React, { MouseEvent, useCallback } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Icon, Tooltip, useStyles2 } from '@grafana/ui';
+import { Icon, useStyles2 } from '@grafana/ui';
+import { LoadingIndicator } from '@grafana/ui/src/components/PanelChrome/LoadingIndicator';
 import { t } from 'app/core/internationalization';
 
 import { ALL_VARIABLE_TEXT } from '../../constants';
@@ -40,7 +41,7 @@ export const VariableLink = ({ loading, disabled, onClick: propsOnClick, text, o
         id={id}
       >
         <VariableLinkText text={text} />
-        <LoadingIndicator onCancel={onCancel} />
+        <LoadingIndicator loading onCancel={onCancel} />
       </div>
     );
   }
@@ -75,28 +76,6 @@ const VariableLinkText = ({ text }: VariableLinkTextProps) => {
   );
 };
 
-const LoadingIndicator = ({ onCancel }: Pick<Props, 'onCancel'>) => {
-  const onClick = useCallback(
-    (event: MouseEvent) => {
-      event.preventDefault();
-      onCancel();
-    },
-    [onCancel]
-  );
-
-  return (
-    <Tooltip content="Cancel query">
-      <Icon
-        className="spin-clockwise"
-        name="sync"
-        size="sm"
-        onClick={onClick}
-        aria-label={selectors.components.LoadingIndicator.icon}
-      />
-    </Tooltip>
-  );
-};
-
 const getStyles = (theme: GrafanaTheme2) => ({
   container: css`
     max-width: 500px;