AdHoc filters: add support for groups in adhoc filters + fix group styling (#88430)

add support for groups in adhoc filters + fix group styling

packages/grafana-data/src/types/datasource.ts

@@ -601,6 +601,7 @@ export interface QueryHint {
 export interface MetricFindValue {
   text: string;
   value?: string | number;
+  group?: string;
   expandable?: boolean;
 }
 

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -23,6 +23,7 @@ import { InputControl } from './InputControl';
 import { MultiValueContainer, MultiValueRemove } from './MultiValue';
 import { SelectContainer } from './SelectContainer';
 import { SelectMenu, SelectMenuOptions, VirtualizedSelectMenu } from './SelectMenu';
+import { SelectOptionGroup } from './SelectOptionGroup';
 import { SelectOptionGroupHeader } from './SelectOptionGroupHeader';
 import { Props, SingleValue } from './SingleValue';
 import { ValueContainer } from './ValueContainer';
@@ -330,6 +331,7 @@ export function SelectBase<T, Rest = {}>({
         ref={reactSelectRef}
         components={{
           MenuList: SelectMenuComponent,
+          Group: SelectOptionGroup,
           GroupHeading: SelectOptionGroupHeader,
           ValueContainer,
           IndicatorsContainer: CustomIndicatorsContainer,

packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { GroupProps } from 'react-select';
+
+import { useStyles2 } from '../../themes/ThemeContext';
+
+import { getSelectStyles } from './getSelectStyles';
+
+export const SelectOptionGroup = ({
+  children,
+  cx,
+  getClassNames,
+  getStyles,
+  Heading,
+  headingProps,
+  label,
+  selectProps,
+  theme,
+}: GroupProps) => {
+  const styles = useStyles2(getSelectStyles);
+  return (
+    <div className={styles.group}>
+      <Heading
+        cx={cx}
+        getClassNames={getClassNames}
+        getStyles={getStyles}
+        selectProps={selectProps}
+        theme={theme}
+        {...headingProps}
+      >
+        {label}
+      </Heading>
+      {children}
+    </div>
+  );
+};

packages/grafana-ui/src/components/Select/getSelectStyles.ts

@@ -141,7 +141,15 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
     groupHeader: css({
       padding: theme.spacing(1, 1, 1, 0.75),
       borderLeft: '2px solid transparent',
-      borderTop: `1px solid ${theme.colors.border.weak}`,
+    }),
+    group: css({
+      '&:not(:first-child)': {
+        borderTop: `1px solid ${theme.colors.border.weak}`,
+      },
+      // ensure there's a bottom border if there are options following the group
+      ':has(+ [role="option"])': {
+        borderBottom: `1px solid ${theme.colors.border.weak}`,
+      },
     }),
   };
 });