MultiCombobox: Extract message rows (#98614)

* Extract messagerows

* Fix imports

* Fix again

* Remove export

* Fix text color

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>
-  );
-};

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>
+  );
+};

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>

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': {