From 589340e03c4263078517772f9733fcab69f9b4d2 Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Fri, 14 Feb 2025 16:07:26 +0000
Subject: [PATCH] GrafanaUI: Deprecate Select in favor of Combobox (#100294)

* GrafanaUI: Deprecate Select

* add deprecated decorator to stories

* tweak message
---
 .../src/components/Select/Select.story.tsx    | 19 ++++++++++++++++++-
 .../src/components/Select/Select.tsx          |  4 ++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Select/Select.story.tsx b/packages/grafana-ui/src/components/Select/Select.story.tsx
index e5fc496af71..1a6aea76ea7 100644
--- a/packages/grafana-ui/src/components/Select/Select.story.tsx
+++ b/packages/grafana-ui/src/components/Select/Select.story.tsx
@@ -7,6 +7,7 @@ import { useState } from 'react';
 import { SelectableValue, toIconName } from '@grafana/data';
 
 import { getAvailableIcons } from '../../types';
+import { Alert } from '../Alert/Alert';
 import { Icon } from '../Icon/Icon';
 
 import { AsyncMultiSelect, AsyncSelect, MultiSelect, Select } from './Select';
@@ -92,6 +93,7 @@ const meta: Meta = {
       },
     },
   },
+  decorators: [DeprecatedDecorator],
 };
 
 const loadAsyncOptions = () => {
@@ -383,7 +385,7 @@ export const AutoMenuPlacement: StoryFn = (args) => {
 
   return (
     <>
-      <div style={{ width: '100%', height: '95vh', display: 'flex', alignItems: 'flex-end' }}>
+      <div style={{ width: '100%', height: 'calc(95vh - 118px)', display: 'flex', alignItems: 'flex-end' }}>
         <Select
           options={generateOptions()}
           value={value}
@@ -455,3 +457,18 @@ CustomValueCreation.args = {
 };
 
 export default meta;
+
+function DeprecatedDecorator(Story: React.ElementType) {
+  return (
+    <div>
+      <Alert title="Deprecated!" severity="warning">
+        The Select component is deprecated.
+        <br />
+        Use Combobox instead - it supports most use cases, is performant by default, and can handle hundreds of
+        thousands of options, and has a simpler API.
+      </Alert>
+
+      <Story />
+    </div>
+  );
+}
diff --git a/packages/grafana-ui/src/components/Select/Select.tsx b/packages/grafana-ui/src/components/Select/Select.tsx
index 5a24d2d97c0..f543fa5dab5 100644
--- a/packages/grafana-ui/src/components/Select/Select.tsx
+++ b/packages/grafana-ui/src/components/Select/Select.tsx
@@ -10,6 +10,7 @@ import {
   VirtualizedSelectAsyncProps,
 } from './types';
 
+/** @deprecated Use Combobox component instead */
 export function Select<T, Rest = {}>(props: SelectCommonProps<T> & Rest) {
   return <SelectBase {...props} />;
 }
@@ -24,14 +25,17 @@ export interface AsyncSelectProps<T> extends Omit<SelectCommonProps<T>, 'options
   value?: T | SelectableValue<T> | null;
 }
 
+/** @deprecated Use Combobox component instead */
 export function AsyncSelect<T, Rest = {}>(props: AsyncSelectProps<T> & Rest) {
   return <SelectBase {...props} />;
 }
 
+/** @deprecated Use Combobox component instead - it's virtualised by default! */
 export function VirtualizedSelect<T, Rest = {}>(props: VirtualizedSelectProps<T> & Rest) {
   return <SelectBase virtualized {...props} />;
 }
 
+/** @deprecated Use Combobox component instead - it's virtualised by default! */
 export function AsyncVirtualizedSelect<T, Rest = {}>(props: VirtualizedSelectAsyncProps<T> & Rest) {
   return <SelectBase virtualized {...props} />;
 }