From 673c22a81db6b59935f83bb27b8afbb0b6805fe3 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 20 Oct 2025 15:21:23 +0100
Subject: [PATCH] convert AbstractList

---
 eslint-suppressions.json                      |  5 --
 .../src/components/List/AbstractList.tsx      | 49 +++++++++----------
 2 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 1e60fb62c59..d40481eb2da 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -770,11 +770,6 @@
       "count": 2
     }
   },
-  "packages/grafana-ui/src/components/List/AbstractList.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
   "packages/grafana-ui/src/components/List/InlineList.tsx": {
     "react-prefer-function-component/react-prefer-function-component": {
       "count": 1
diff --git a/packages/grafana-ui/src/components/List/AbstractList.tsx b/packages/grafana-ui/src/components/List/AbstractList.tsx
index bc4f6260a9e..27f5a5459c0 100644
--- a/packages/grafana-ui/src/components/List/AbstractList.tsx
+++ b/packages/grafana-ui/src/components/List/AbstractList.tsx
@@ -1,7 +1,9 @@
 import { cx, css } from '@emotion/css';
-import { PureComponent } from 'react';
+import { memo } from 'react';
 
-import { stylesFactory } from '../../themes/stylesFactory';
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { useStyles2 } from '../..';
 
 export interface ListProps<T> {
   items: T[];
@@ -14,7 +16,23 @@ interface AbstractListProps<T> extends ListProps<T> {
   inline?: boolean;
 }
 
-const getStyles = stylesFactory((inlineList = false) => ({
+function AbstractListComponent<T>({ items, renderItem, getItemKey, className, inline }: AbstractListProps<T>) {
+  const styles = useStyles2(getStyles, inline);
+
+  return (
+    <ul className={cx(styles.list, className)}>
+      {items.map((item, i) => {
+        return (
+          <li className={styles.item} key={getItemKey ? getItemKey(item) : i}>
+            {renderItem(item, i)}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme2, inlineList = false) => ({
   list: css({
     listStyleType: 'none',
     margin: 0,
@@ -24,27 +42,6 @@ const getStyles = stylesFactory((inlineList = false) => ({
   item: css({
     display: (inlineList && 'inline-block') || 'block',
   }),
-}));
+});
 
-export class AbstractList<T> extends PureComponent<AbstractListProps<T>> {
-  constructor(props: AbstractListProps<T>) {
-    super(props);
-  }
-
-  render() {
-    const { items, renderItem, getItemKey, className, inline } = this.props;
-    const styles = getStyles(inline);
-
-    return (
-      <ul className={cx(styles.list, className)}>
-        {items.map((item, i) => {
-          return (
-            <li className={styles.item} key={getItemKey ? getItemKey(item) : i}>
-              {renderItem(item, i)}
-            </li>
-          );
-        })}
-      </ul>
-    );
-  }
-}
+export const AbstractList = memo(AbstractListComponent);