From 36f850601faf3a2466ae042a0e99164ff82e35ab Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Tue, 21 Jan 2025 14:22:09 +0100
Subject: [PATCH] MultiCombobox: Extract message rows (#98614)

* Extract messagerows

* Fix imports

* Fix again

* Remove export

* Fix text color
---
 .../src/components/Combobox/Combobox.tsx      | 30 +++--------------
 .../src/components/Combobox/MessageRows.tsx   | 32 +++++++++++++++++++
 .../src/components/Combobox/MultiCombobox.tsx |  2 ++
 .../components/Combobox/getComboboxStyles.ts  |  4 ---
 4 files changed, 39 insertions(+), 29 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/Combobox/MessageRows.tsx

diff --git a/packages/grafana-ui/src/components/Combobox/Combobox.tsx b/packages/grafana-ui/src/components/Combobox/Combobox.tsx
index 6a18da04294..df3ffd50a80 100644
--- a/packages/grafana-ui/src/components/Combobox/Combobox.tsx
+++ b/packages/grafana-ui/src/components/Combobox/Combobox.tsx
@@ -2,19 +2,18 @@ import { cx } from '@emotion/css';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useCombobox } from 'downshift';
 import { debounce } from 'lodash';
-import { ReactNode, useCallback, useId, useMemo, useState } from 'react';
+import { useCallback, useId, useMemo, useState } from 'react';
 
 import { useStyles2 } from '../../themes';
 import { logOptions } from '../../utils';
-import { t, Trans } from '../../utils/i18n';
+import { t } from '../../utils/i18n';
 import { Icon } from '../Icon/Icon';
 import { AutoSizeInput } from '../Input/AutoSizeInput';
 import { Input, Props as InputProps } from '../Input/Input';
-import { Box } from '../Layout/Box/Box';
-import { Stack } from '../Layout/Stack/Stack';
 import { Portal } from '../Portal/Portal';
 import { ScrollContainer } from '../ScrollContainer/ScrollContainer';
 
+import { AsyncError, NotFoundError } from './MessageRows';
 import { itemFilter, itemToString } from './filter';
 import { getComboboxStyles, MENU_OPTION_HEIGHT, MENU_OPTION_HEIGHT_DESCRIPTION } from './getComboboxStyles';
 import { useComboboxFloat } from './useComboboxFloat';
@@ -443,17 +442,8 @@ export const Combobox = <T extends string | number>(props: ComboboxProps<T>) =>
                 </ul>
               )}
               <div aria-live="polite">
-                {asyncError && (
-                  <MessageRow>
-                    <Icon name="exclamation-triangle" size="md" className={styles.warningIcon} />
-                    <Trans i18nKey="combobox.async.error">An error occurred while loading options.</Trans>
-                  </MessageRow>
-                )}
-                {items.length === 0 && !asyncError && (
-                  <MessageRow>
-                    <Trans i18nKey="combobox.options.no-found">No options found.</Trans>
-                  </MessageRow>
-                )}
+                {asyncError && <AsyncError />}
+                {items.length === 0 && !asyncError && <NotFoundError />}
               </div>
             </ScrollContainer>
           )}
@@ -462,13 +452,3 @@ export const Combobox = <T extends string | number>(props: ComboboxProps<T>) =>
     </div>
   );
 };
-
-const MessageRow = ({ children }: { children: ReactNode }) => {
-  return (
-    <Box padding={2} color="secondary">
-      <Stack justifyContent="center" alignItems="center">
-        {children}
-      </Stack>
-    </Box>
-  );
-};
diff --git a/packages/grafana-ui/src/components/Combobox/MessageRows.tsx b/packages/grafana-ui/src/components/Combobox/MessageRows.tsx
new file mode 100644
index 00000000000..6d01a560f22
--- /dev/null
+++ b/packages/grafana-ui/src/components/Combobox/MessageRows.tsx
@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+
+import { Trans } from '../../utils/i18n';
+import { Icon } from '../Icon/Icon';
+import { Box } from '../Layout/Box/Box';
+import { Stack } from '../Layout/Stack/Stack';
+import { Text } from '../Text/Text';
+
+export const AsyncError = () => (
+  <MessageRow>
+    <Text color="warning">
+      <Icon name="exclamation-triangle" size="md" />
+    </Text>
+    <Trans i18nKey="combobox.async.error">An error occurred while loading options.</Trans>
+  </MessageRow>
+);
+
+export const NotFoundError = () => (
+  <MessageRow>
+    <Trans i18nKey="combobox.options.no-found">No options found.</Trans>
+  </MessageRow>
+);
+
+const MessageRow = ({ children }: { children: ReactNode }) => {
+  return (
+    <Box padding={2}>
+      <Stack justifyContent="center" alignItems="center" direction="column">
+        {children}
+      </Stack>
+    </Box>
+  );
+};
diff --git a/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx b/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx
index bb8b9934472..a56cf853f1d 100644
--- a/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx
+++ b/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx
@@ -15,6 +15,7 @@ import { Text } from '../Text/Text';
 import { Tooltip } from '../Tooltip';
 
 import { ComboboxOption, ComboboxBaseProps, AutoSizeConditionals, VIRTUAL_OVERSCAN_ITEMS } from './Combobox';
+import { NotFoundError } from './MessageRows';
 import { OptionListItem } from './OptionListItem';
 import { ValuePill } from './ValuePill';
 import { itemFilter, itemToString } from './filter';
@@ -303,6 +304,7 @@ export const MultiCombobox = <T extends string | number>(props: MultiComboboxPro
                   );
                 })}
               </ul>
+              <div aria-live="polite">{items.length === 0 && <NotFoundError />}</div>
             </ScrollContainer>
           )}
         </div>
diff --git a/packages/grafana-ui/src/components/Combobox/getComboboxStyles.ts b/packages/grafana-ui/src/components/Combobox/getComboboxStyles.ts
index 4a38de75727..5da03591348 100644
--- a/packages/grafana-ui/src/components/Combobox/getComboboxStyles.ts
+++ b/packages/grafana-ui/src/components/Combobox/getComboboxStyles.ts
@@ -106,10 +106,6 @@ export const getComboboxStyles = (theme: GrafanaTheme2) => {
         color: theme.colors.text.primary,
       },
     }),
-    warningIcon: css({
-      label: 'combobox-warning-icon',
-      color: theme.colors.text.secondary,
-    }),
     input: css({
       label: 'combobox-input',
       '> div > div:last-child': {