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

.betterer.results

@@ -625,9 +625,6 @@ exports[`better eslint`] = {
     "packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx:5381": [
       [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
     ],
-    "packages/grafana-ui/src/components/Drawer/Drawer.tsx:5381": [
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
-    ],
     "packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
@@ -954,9 +951,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "5"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "6"]
     ],
-    "public/app/core/components/AppChrome/News/NewsContainer.tsx:5381": [
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
-    ],
     "public/app/core/components/AppChrome/SectionNav/SectionNavItem.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"],

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

@@ -133,7 +133,7 @@ export const Components = {
       title: (title: string) => `Drawer title ${title}`,
       expand: 'Drawer expand',
       contract: 'Drawer contract',
-      close: 'Drawer close',
+      close: 'data-testid Drawer close',
       rcContentWrapper: () => '.rc-drawer-content-wrapper',
     },
   },

packages/grafana-ui/src/components/Drawer/Drawer.tsx

@@ -9,8 +9,9 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { useStyles2 } from '../../themes';
-import { Button } from '../Button';
+import { t } from '../../utils/i18n';
 import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
+import { IconButton } from '../IconButton/IconButton';
 import { Text } from '../Text/Text';
 
 export interface Props {
@@ -116,12 +117,12 @@ export function Drawer({
           {typeof title === 'string' && (
             <div className={cx(styles.header, Boolean(tabs) && styles.headerWithTabs)}>
               <div className={styles.actions}>
-                <Button
-                  icon="times"
+                <IconButton
+                  name="times"
                   variant="secondary"
-                  fill="text"
                   onClick={onClose}
-                  aria-label={selectors.components.Drawer.General.close}
+                  data-testid={selectors.components.Drawer.General.close}
+                  tooltip={t(`drawer.close`, 'Close Drawer')}
                 />
               </div>
               <div className={styles.titleWrapper}>

public/app/core/components/AppChrome/News/NewsContainer.tsx

@@ -4,7 +4,7 @@ import { useToggle } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Button, Drawer, ToolbarButton, useStyles2, Text } from '@grafana/ui';
+import { IconButton, Drawer, ToolbarButton, useStyles2, Text } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 import { DEFAULT_FEED_URL } from 'app/plugins/panel/news/constants';
 
@@ -36,12 +36,12 @@ export function NewsContainer({ className }: NewsContainerProps) {
                 <img src="public/img/grot-news.svg" alt="Grot reading news" />
               </a>
               <div className={styles.actions}>
-                <Button
-                  icon="times"
+                <IconButton
+                  name="times"
                   variant="secondary"
-                  fill="text"
                   onClick={onToggleShowNewsDrawer}
-                  aria-label={selectors.components.Drawer.General.close}
+                  data-testid={selectors.components.Drawer.General.close}
+                  tooltip={t(`news.drawer.close`, 'Close Drawer')}
                 />
               </div>
             </div>

public/locales/de-DE/grafana.json

@@ -412,6 +412,9 @@
       "label": "Neue Datenquelle hinzufügen"
     }
   },
+  "drawer": {
+    "close": ""
+  },
   "explore": {
     "add-to-dashboard": "Zum Dashboard hinzufügen",
     "rich-history": {
@@ -970,6 +973,9 @@
     }
   },
   "news": {
+    "drawer": {
+      "close": ""
+    },
     "title": "Das Neueste aus dem Blog"
   },
   "notifications": {

public/locales/en-US/grafana.json

@@ -412,6 +412,9 @@
       "label": "Add new data source"
     }
   },
+  "drawer": {
+    "close": "Close Drawer"
+  },
   "explore": {
     "add-to-dashboard": "Add to dashboard",
     "rich-history": {
@@ -970,6 +973,9 @@
     }
   },
   "news": {
+    "drawer": {
+      "close": "Close Drawer"
+    },
     "title": "Latest from the blog"
   },
   "notifications": {

public/locales/es-ES/grafana.json

@@ -417,6 +417,9 @@
       "label": "Añadir nueva fuente de datos"
     }
   },
+  "drawer": {
+    "close": ""
+  },
   "explore": {
     "add-to-dashboard": "Añadir al tablero",
     "rich-history": {
@@ -976,6 +979,9 @@
     }
   },
   "news": {
+    "drawer": {
+      "close": ""
+    },
     "title": "Últimas entradas del blog"
   },
   "notifications": {

public/locales/fr-FR/grafana.json

@@ -417,6 +417,9 @@
       "label": "Ajouter une nouvelle source de données"
     }
   },
+  "drawer": {
+    "close": ""
+  },
   "explore": {
     "add-to-dashboard": "Ajouter au tableau de bord",
     "rich-history": {
@@ -976,6 +979,9 @@
     }
   },
   "news": {
+    "drawer": {
+      "close": ""
+    },
     "title": "Dernières nouvelles sur le blog"
   },
   "notifications": {

public/locales/pseudo-LOCALE/grafana.json

@@ -412,6 +412,9 @@
       "label": "Åđđ ʼnęŵ đäŧä şőūřčę"
     }
   },
+  "drawer": {
+    "close": "Cľőşę Đřäŵęř"
+  },
   "explore": {
     "add-to-dashboard": "Åđđ ŧő đäşĥþőäřđ",
     "rich-history": {
@@ -970,6 +973,9 @@
     }
   },
   "news": {
+    "drawer": {
+      "close": "Cľőşę Đřäŵęř"
+    },
     "title": "Ŀäŧęşŧ ƒřőm ŧĥę þľőģ"
   },
   "notifications": {

public/locales/zh-Hans/grafana.json

@@ -407,6 +407,9 @@
       "label": "添加新数据源"
     }
   },
+  "drawer": {
+    "close": ""
+  },
   "explore": {
     "add-to-dashboard": "添加到仪表板",
     "rich-history": {
@@ -964,6 +967,9 @@
     }
   },
   "news": {
+    "drawer": {
+      "close": ""
+    },
     "title": "最新博客"
   },
   "notifications": {