From 8811c14aeb289846d34301a412f25b24844c3374 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 31 May 2024 11:04:19 +0100
Subject: [PATCH] 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 |  1 +
 .../src/components/Select/SelectBase.tsx      |  2 ++
 .../components/Select/SelectOptionGroup.tsx   | 35 +++++++++++++++++++
 .../src/components/Select/getSelectStyles.ts  | 10 +++++-
 4 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx

diff --git a/packages/grafana-data/src/types/datasource.ts b/packages/grafana-data/src/types/datasource.ts
index 5d630b47fda..a1355c10f8c 100644
--- a/packages/grafana-data/src/types/datasource.ts
+++ b/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;
 }
 
diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx
index b1a878cec93..1f5c155045c 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/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,
diff --git a/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
new file mode 100644
index 00000000000..940d0088fb8
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts
index 3dddfaeeb8c..0d89a3fa519 100644
--- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts
+++ b/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}`,
+      },
     }),
   };
 });