feat(select-combobox): migrate to signozhq/ui/select and signozhq/ui/combobox

* fix: back button issue

* chore: add unit test

* fix : test cases

---------

Co-authored-by: Gaurav Tewari <tewarig@users.noreply.github.com>

.github/CODEOWNERS

@@ -118,6 +118,9 @@ go.mod @therealpandey
 
 /tests/integration/ @therealpandey
 
+# e2e tests
+/tests/e2e/ @AshwinBhatkal
+
 # Flagger Owners
 
 /pkg/flagger/ @therealpandey
@@ -162,3 +165,7 @@ go.mod @therealpandey
 /frontend/src/lib/dashboard/ @SigNoz/pulse-frontend
 /frontend/src/lib/dashboardVariables/ @SigNoz/pulse-frontend
 /frontend/src/components/NewSelect/ @SigNoz/pulse-frontend
+
+## Dashboard V2
+/frontend/src/pages/DashboardPageV2/ @SigNoz/pulse-frontend
+/frontend/src/pages/DashboardsListPageV2/ @SigNoz/pulse-frontend

docs/api/openapi.yml

@@ -2689,7 +2689,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesClusterRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -2759,7 +2758,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesDaemonSetRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -2829,7 +2827,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesDeploymentRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -2908,7 +2905,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesHostRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -2984,7 +2980,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesJobRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3032,7 +3027,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesNamespaceRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3110,7 +3104,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesNodeRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3209,7 +3202,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesPodRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3554,7 +3546,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesStatefulSetRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3615,7 +3606,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesVolumeRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'

frontend/package.json

@@ -49,7 +49,7 @@
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.4.0",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.19",
+    "@signozhq/ui": "0.0.21",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",

frontend/plugins/rules/no-antd-components.mjs

@@ -14,8 +14,13 @@
  */
 
 const BANNED_COMPONENTS = {
-	Typography: 'Use @signozhq/ui Typography instead of antd Typography.',
+	Typography:
+		'Use @signozhq/ui/typography Typography instead of antd Typography.',
+	Switch: 'Use @signozhq/ui/switch Switch instead of antd Switch.',
 	Badge: 'Use @signozhq/ui/badge instead of antd Badge.',
+	Progress: 'Use @signozhq/ui/progress instead of antd Progress.',
+	Select:
+		'Use SelectSimple / ComboboxSimple from @signozhq/ui/select or @signozhq/ui/combobox instead of antd Select.',
 };
 
 export default {

frontend/pnpm-lock.yaml

@@ -77,8 +77,8 @@ importers:
         specifier: 0.0.2
         version: 0.0.2(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@signozhq/ui':
-        specifier: 0.0.19
-        version: 0.0.19(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
+        specifier: 0.0.21
+        version: 0.0.21(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
       '@tanstack/react-table':
         specifier: 8.21.3
         version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -3269,8 +3269,8 @@ packages:
     peerDependencies:
       react: ^18.2.0
 
-  '@signozhq/ui@0.0.19':
-    resolution: {integrity: sha512-2q6aRxN/PR4PlR2xJZAREEuvLPiDFggfFKzCW2Z5vHVVbrgnvZHWD1jPUuwszfEg0ceH3UvkwqceO7wN4uRJAA==}
+  '@signozhq/ui@0.0.21':
+    resolution: {integrity: sha512-uLM3Vqwxlk2USXbwtb3qRLpjZR9b9QSHFQq/jtcfYNMDmIE/sNjSj0nRkEhX4RqqRgsLRt2PVA33aeWxDOLO3g==}
     peerDependencies:
       '@signozhq/icons': 0.3.0
       react: ^18.2.0
@@ -3851,27 +3851,6 @@ packages:
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
 
-  '@webassemblyjs/ast@1.14.1':
-    resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
-
-  '@webassemblyjs/floating-point-hex-parser@1.13.2':
-    resolution: {integrity: sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==}
-
-  '@webassemblyjs/helper-api-error@1.13.2':
-    resolution: {integrity: sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==}
-
-  '@webassemblyjs/helper-buffer@1.14.1':
-    resolution: {integrity: sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==}
-
-  '@webassemblyjs/helper-numbers@1.13.2':
-    resolution: {integrity: sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==}
-
-  '@webassemblyjs/helper-wasm-bytecode@1.13.2':
-    resolution: {integrity: sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==}
-
-  '@webassemblyjs/helper-wasm-section@1.14.1':
-    resolution: {integrity: sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==}
-
   '@xmldom/xmldom@0.8.13':
     resolution: {integrity: sha512-KRYzxepc14G/CEpEGc3Yn+JKaAeT63smlDr+vjB8jRfgTBBI9wRj/nkQEO+ucV8p8I9bfKLWp37uHgFrbntPvw==}
     engines: {node: '>=10.0.0'}
@@ -12034,7 +12013,7 @@ snapshots:
       - react-dom
       - tailwindcss
 
-  '@signozhq/ui@0.0.19(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
+  '@signozhq/ui@0.0.21(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@chenglou/pretext': 0.0.5
       '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)

frontend/public/locales/en-GB/alerts.json

@@ -4,7 +4,7 @@
 	"no_alerts_found": "No alerts found during the evaluation. This happens when rule condition is unsatisfied. You may adjust the rule threshold and retry.",
 	"button_testrule": "Test Notification",
 	"label_channel_select": "Notification Channels",
-	"placeholder_channel_select": "select one or more channels",
+	"placeholder_channel_select": "Select one or more channels",
 	"channel_select_tooltip": "Leave empty to send this alert on all the configured channels",
 	"preview_chart_unexpected_error": "An unexpeced error occurred updating the chart, please check your query.",
 	"preview_chart_threshold_label": "Threshold",

frontend/public/locales/en/alerts.json

@@ -4,7 +4,7 @@
 	"no_alerts_found": "No alerts found during the evaluation. This happens when rule condition is unsatisfied. You may adjust the rule threshold and retry.",
 	"button_testrule": "Test Notification",
 	"label_channel_select": "Notification Channels",
-	"placeholder_channel_select": "select one or more channels",
+	"placeholder_channel_select": "Select one or more channels",
 	"channel_select_tooltip": "Leave empty to send this alert on all the configured channels",
 	"preview_chart_unexpected_error": "An unexpeced error occurred updating the chart, please check your query.",
 	"preview_chart_threshold_label": "Threshold",

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -3488,9 +3488,9 @@ export interface InframonitoringtypesClustersDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesClusterRecordDTO[] | null;
+	records: InframonitoringtypesClusterRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3566,9 +3566,9 @@ export interface InframonitoringtypesDaemonSetsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesDaemonSetRecordDTO[] | null;
+	records: InframonitoringtypesDaemonSetRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3644,9 +3644,9 @@ export interface InframonitoringtypesDeploymentsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesDeploymentRecordDTO[] | null;
+	records: InframonitoringtypesDeploymentRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3730,9 +3730,9 @@ export interface InframonitoringtypesHostsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesHostRecordDTO[] | null;
+	records: InframonitoringtypesHostRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3816,9 +3816,9 @@ export interface InframonitoringtypesJobsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesJobRecordDTO[] | null;
+	records: InframonitoringtypesJobRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3866,9 +3866,9 @@ export interface InframonitoringtypesNamespacesDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesNamespaceRecordDTO[] | null;
+	records: InframonitoringtypesNamespaceRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3933,9 +3933,9 @@ export interface InframonitoringtypesNodesDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesNodeRecordDTO[] | null;
+	records: InframonitoringtypesNodeRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -4017,9 +4017,9 @@ export interface InframonitoringtypesPodsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesPodRecordDTO[] | null;
+	records: InframonitoringtypesPodRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -4437,9 +4437,9 @@ export interface InframonitoringtypesStatefulSetsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesStatefulSetRecordDTO[] | null;
+	records: InframonitoringtypesStatefulSetRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -4506,9 +4506,9 @@ export interface InframonitoringtypesVolumesDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesVolumeRecordDTO[] | null;
+	records: InframonitoringtypesVolumeRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-import { Row, Select, Spin } from 'antd';
+import { Row } from 'antd';
+import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import {
 	getValuesFromQueryParams,
 	setQueryParamsFromOptions,
 } from 'components/CeleryTask/CeleryUtils';
 import { useCeleryFilterOptions } from 'components/CeleryTask/useCeleryFilterOptions';
-import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
 
@@ -48,7 +48,7 @@ export function FilterSelect({
 			: getValuesFromQueryParams(queryParam, urlQuery) || [];
 
 	// Memoize options to include the typed value if not present
-	const mergedOptions = useMemo(() => {
+	const mergedOptions = useMemo<ComboboxSimpleItem[]>(() => {
 		if (
 			!!searchValue.trim().length &&
 			!options.some((opt) => opt.value === searchValue)
@@ -84,35 +84,16 @@ export function FilterSelect({
 		],
 	);
 
-	// Update searchValue on user input
-	const handleSearchInput = (input: string): void => {
-		setSearchValue(input);
-		handleSearch(input);
-	};
-
 	return (
-		<Select
+		<ComboboxSimple
 			key={filterType.toString()}
 			placeholder={placeholder}
-			showSearch
-			{...(isMultiple ? { mode: 'multiple' } : {})}
-			options={mergedOptions}
+			multiple={isMultiple}
+			items={mergedOptions}
 			loading={isFetching}
 			className="config-select-option"
-			onSearch={handleSearchInput}
-			maxTagCount={4}
-			allowClear
-			maxTagPlaceholder={SelectMaxTagPlaceholder}
 			value={selectValue}
-			notFoundContent={
-				isFetching ? (
-					<span>
-						<Spin size="small" /> Loading...
-					</span>
-				) : (
-					<span>No {placeholder} found</span>
-				)
-			}
+			emptyPlaceholder={`No ${placeholder} found`}
 			onChange={handleSelectChange}
 		/>
 	);

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.styles.scss

@@ -51,13 +51,6 @@
 				background: var(--l1-background);
 			}
 
-			.progress-container {
-				.ant-progress-bg {
-					height: 8px !important;
-					border-radius: 4px;
-				}
-			}
-
 			.ant-table-tbody > tr:hover > td {
 				background: color-mix(in srgb, var(--l1-foreground) 4%, transparent);
 			}

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -9,13 +9,13 @@ import {
 	Flex,
 	Input,
 	InputRef,
-	Progress,
 	Space,
 	Spin,
 	TableColumnsType,
 	TableColumnType,
 	Tooltip,
 } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import { Typography } from '@signozhq/ui/typography';
 import type { FilterDropdownProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
@@ -59,7 +59,7 @@ function ProgressRender(item: string | number): JSX.Element {
 			<Progress
 				percent={percent}
 				strokeLinecap="butt"
-				size="small"
+				showInfo
 				strokeColor={((): string => {
 					const cpuPercent = percent;
 					if (cpuPercent >= 90) {

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -1,7 +1,6 @@
 import { useHistory, useLocation } from 'react-router-dom';
-import { Select, Spin } from 'antd';
+import { ComboboxSimple } from '@signozhq/ui/combobox';
 import { Typography } from '@signozhq/ui/typography';
-import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
 
@@ -27,30 +26,18 @@ function CeleryTaskConfigOptions(): JSX.Element {
 				<Typography.Text style={{ whiteSpace: 'nowrap' }}>
 					Task Name
 				</Typography.Text>
-				<Select
+				<ComboboxSimple
 					placeholder="Task Name"
-					showSearch
-					mode="multiple"
-					options={options}
+					multiple
+					items={options}
 					loading={isFetching}
 					className="config-select-option"
-					onSearch={handleSearch}
-					maxTagCount={4}
-					maxTagPlaceholder={SelectMaxTagPlaceholder}
 					value={getValuesFromQueryParams(QueryParams.taskName, urlQuery) || []}
-					notFoundContent={
-						isFetching ? (
-							<span>
-								<Spin size="small" /> Loading...
-							</span>
-						) : (
-							<span>No Task Name found</span>
-						)
-					}
+					emptyPlaceholder="No Task Name found"
 					onChange={(value): void => {
 						handleSearch('');
 						setQueryParamsFromOptions(
-							value,
+							value as string[],
 							urlQuery,
 							history,
 							location,

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts

@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import type { DefaultOptionType } from 'antd/es/select';
+import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import { getAttributesValues } from 'api/queryBuilder/getAttributesValues';
 import { DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -21,7 +21,7 @@ export interface Filters {
 }
 
 export interface GetAllFiltersResponse {
-	options: DefaultOptionType[];
+	options: ComboboxSimpleItem[];
 	isFetching: boolean;
 }
 

frontend/src/components/CeleryTask/useCeleryFilterOptions.ts

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import type { DefaultOptionType } from 'antd/es/select';
+import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
@@ -17,7 +17,7 @@ export const useCeleryFilterOptions = (
 	searchText: string;
 	handleSearch: (value: string) => void;
 	isFetching: boolean;
-	options: DefaultOptionType[];
+	options: ComboboxSimpleItem[];
 } => {
 	const [searchText, setSearchText] = useState<string>('');
 	const { isFetching, options } = useGetAllFilters({

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -5,17 +5,25 @@ import {
 	useCallback,
 	useEffect,
 	useMemo,
-	useRef,
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Select, Tag, Tooltip } from 'antd';
+import {
+	Combobox,
+	ComboboxCommand,
+	ComboboxContent,
+	ComboboxEmpty,
+	ComboboxItem,
+	ComboboxList,
+	ComboboxMultiTrigger,
+	ComboboxPill,
+} from '@signozhq/ui/combobox';
+import { Tag, Tooltip } from 'antd';
 import {
 	OPERATORS,
 	QUERY_BUILDER_OPERATORS_BY_TYPES,
 	QUERY_BUILDER_SEARCH_VALUES,
 } from 'constants/queryBuilder';
-import { CustomTagProps } from 'container/QueryBuilder/filters/QueryBuilderSearch';
 import { selectStyle } from 'container/QueryBuilder/filters/QueryBuilderSearch/config';
 import { PLACEHOLDER } from 'container/QueryBuilder/filters/QueryBuilderSearch/constant';
 import { TypographyText } from 'container/QueryBuilder/filters/QueryBuilderSearch/style';
@@ -38,7 +46,6 @@ import { operatorTypeMapper } from 'hooks/queryBuilder/useOperatorType';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { isArray, isEmpty, isEqual, isObject } from 'lodash-es';
 import { ChevronDown, ChevronUp } from '@signozhq/icons';
-import type { BaseSelectRef } from 'rc-select';
 import {
 	BaseAutocompleteData,
 	DataTypes,
@@ -47,7 +54,6 @@ import {
 	IBuilderQuery,
 	TagFilter,
 } from 'types/api/queryBuilder/queryBuilderData';
-import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
 import './ClientSideQBSearch.styles.scss';
@@ -93,8 +99,6 @@ function ClientSideQBSearch(
 
 	const isDarkMode = useIsDarkMode();
 
-	const selectRef = useRef<BaseSelectRef>(null);
-
 	const [isOpen, setIsOpen] = useState<boolean>(false);
 
 	// create the tags from the initial query here, this should only be computed on the first load as post that tags and query will be always in sync.
@@ -214,7 +218,7 @@ function ClientSideQBSearch(
 	}, []);
 
 	const onInputKeyDownHandler = useCallback(
-		(event: KeyboardEvent<Element>): void => {
+		(event: KeyboardEvent<HTMLInputElement>): void => {
 			if (event.key === 'Backspace' && !searchValue) {
 				event.stopPropagation();
 				setTags((prev) => prev.slice(0, -1));
@@ -516,29 +520,23 @@ function ClientSideQBSearch(
 		[tags],
 	);
 
-	const onTagRender = ({
-		value,
-		closable,
-		onClose,
-	}: CustomTagProps): React.ReactElement => {
+	const renderPill = (value: string, index: number): React.ReactElement => {
 		const { tagOperator } = getTagToken(value);
 		const isInNin = isInNInOperator(tagOperator);
 		const chipValue = isInNin
 			? value?.trim()?.replace(/,\s*$/, '')
 			: value?.trim();
 
-		const indexInQueryTags = queryTags.findIndex((qTag) => isEqual(qTag, value));
-		const tagDetails = tags[indexInQueryTags];
+		const tagDetails = tags[index];
 
 		const onCloseHandler = (): void => {
-			onClose();
 			setSearchValue('');
 			setTags((prev) => prev.filter((t) => !isEqual(t, tagDetails)));
 		};
 
-		const tagEditHandler = (value: string): void => {
+		const tagEditHandler = (next: string): void => {
 			setCurrentFilterItem(tagDetails);
-			setSearchValue(value);
+			setSearchValue(next);
 			setCurrentState(DropdownState.ATTRIBUTE_VALUE);
 			setTags((prev) => prev.filter((t) => !isEqual(t, tagDetails)));
 		};
@@ -546,12 +544,13 @@ function ClientSideQBSearch(
 		const isDisabled = !!searchValue;
 
 		return (
-			<span className="qb-search-bar-tokenised-tags">
-				<Tag
-					closable={!searchValue && closable}
-					onClose={onCloseHandler}
-					className={tagDetails?.key?.type || ''}
-				>
+			<ComboboxPill
+				key={`${value}-${index}`}
+				value={value}
+				onRemove={onCloseHandler}
+				className="qb-search-bar-tokenised-tags"
+			>
+				<Tag closable={false} className={tagDetails?.key?.type || ''}>
 					<Tooltip title={chipValue}>
 						<TypographyText
 							$isInNin={isInNin}
@@ -567,7 +566,7 @@ function ClientSideQBSearch(
 						</TypographyText>
 					</Tooltip>
 				</Tag>
-			</span>
+			</ComboboxPill>
 		);
 	};
 
@@ -588,59 +587,73 @@ function ClientSideQBSearch(
 		);
 	}, [isDarkMode, isOpen, suffixIcon]);
 
+	const handleItemSelect = (rawValue: string): void => {
+		handleDropdownSelect(rawValue);
+		setIsOpen(true);
+	};
+
+	const handleInputKeyDownWrapper = (
+		e: KeyboardEvent<HTMLInputElement>,
+	): void => {
+		onInputKeyDownHandler(e);
+	};
+
 	return (
-		<div className="query-builder-search-v2 ">
-			<Select
-				ref={selectRef}
-				getPopupContainer={popupContainer}
-				virtual={false}
-				showSearch
-				tagRender={onTagRender}
-				transitionName=""
-				choiceTransitionName=""
-				filterOption={false}
-				open={isOpen}
-				suffixIcon={suffixIconContent}
-				onDropdownVisibleChange={setIsOpen}
-				autoClearSearchValue={false}
-				mode="multiple"
-				placeholder={placeholder}
-				value={queryTags}
-				searchValue={searchValue}
-				className={className}
-				rootClassName="query-builder-search client-side-qb-search"
-				disabled={!attributeKeys.length}
-				style={selectStyle}
-				onSearch={handleSearch}
-				onSelect={handleDropdownSelect}
-				onInputKeyDown={onInputKeyDownHandler}
-				notFoundContent={null}
-				showAction={['focus']}
-				onBlur={handleOnBlur}
-			>
-				{dropdownOptions.map((option) => {
-					let val = option.value;
-					try {
-						if (isObject(option.value)) {
-							val = JSON.stringify(option.value);
-						} else {
-							val = option.value;
-						}
-					} catch {
-						val = option.value;
-					}
-					return (
-						<Select.Option key={isObject(val) ? `select-option` : val} value={val}>
-							<Suggestions
-								label={option.label}
-								value={option.value}
-								option={currentState}
-								searchValue={searchValue}
-							/>
-						</Select.Option>
-					);
-				})}
-			</Select>
+		<div className="query-builder-search-v2" style={selectStyle}>
+			<Combobox open={isOpen} onOpenChange={setIsOpen}>
+				<ComboboxMultiTrigger
+					id="client-side-qb-search-trigger"
+					testId="client-side-qb-search"
+					className={className ?? 'query-builder-search client-side-qb-search'}
+					placeholder={placeholder ?? PLACEHOLDER}
+					inputValue={searchValue}
+					onInputChange={handleSearch}
+					onKeyDown={handleInputKeyDownWrapper}
+					onFocus={(): void => setIsOpen(true)}
+					disabled={!attributeKeys.length}
+				>
+					{queryTags.map((tagValue, idx) => renderPill(tagValue, idx))}
+				</ComboboxMultiTrigger>
+				<ComboboxContent
+					onCloseAutoFocus={(): void => {
+						handleOnBlur();
+					}}
+				>
+					<ComboboxCommand shouldFilter={false}>
+						<ComboboxList>
+							{dropdownOptions.map((option) => {
+								let val = option.value as unknown as string;
+								try {
+									if (isObject(option.value)) {
+										val = JSON.stringify(option.value);
+									}
+								} catch {
+									val = String(option.value);
+								}
+								const itemKey = isObject(val) ? `select-option` : String(val);
+								return (
+									<ComboboxItem
+										key={itemKey}
+										value={String(val)}
+										onSelect={(): void => handleItemSelect(String(val))}
+									>
+										<Suggestions
+											label={option.label}
+											value={option.value}
+											option={currentState}
+											searchValue={searchValue}
+										/>
+									</ComboboxItem>
+								);
+							})}
+							<ComboboxEmpty>No results found.</ComboboxEmpty>
+						</ComboboxList>
+					</ComboboxCommand>
+				</ComboboxContent>
+			</Combobox>
+			<div className="qb-search-suffix" aria-hidden>
+				{suffixIconContent}
+			</div>
 		</div>
 	);
 }

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -137,7 +137,6 @@ function CreateServiceAccountModal(): JSX.Element {
 				<AuthZTooltip checks={[SACreatePermission]}>
 					<Button
 						type="submit"
-						// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 						form="create-sa-form"
 						variant="solid"
 						color="primary"

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,15 +1,7 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import {
-	Button,
-	Col,
-	Dropdown,
-	MenuProps,
-	Popover,
-	Row,
-	Select,
-	Space,
-} from 'antd';
+import { Button, Col, Dropdown, MenuProps, Popover, Row, Space } from 'antd';
+import { ComboboxSimple } from '@signozhq/ui/combobox';
 import { Typography } from '@signozhq/ui/typography';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
@@ -31,11 +23,7 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { ExploreHeaderToolTip, SaveButtonText } from './constants';
 import MenuItemGenerator from './MenuItemGenerator';
 import SaveViewWithName from './SaveViewWithName';
-import {
-	DropDownOverlay,
-	ExplorerCardHeadContainer,
-	OffSetCol,
-} from './styles';
+import { ExplorerCardHeadContainer, OffSetCol } from './styles';
 import { ExplorerCardProps } from './types';
 import { deleteViewHandler } from './utils';
 import { Ellipsis, Save, Share2, Trash2 } from '@signozhq/icons';
@@ -164,6 +152,26 @@ function ExplorerCard({
 
 	const showSaveView = false;
 
+	const viewItems = useMemo(
+		() =>
+			(viewsData?.data.data ?? []).map((view) => ({
+				value: view.name,
+				label: (
+					<MenuItemGenerator
+						viewName={view.name}
+						viewKey={viewKey}
+						createdBy={view.createdBy}
+						uuid={view.id}
+						refetchAllView={refetchAllView}
+						viewData={viewsData?.data.data ?? []}
+						sourcePage={sourcepage}
+					/>
+				),
+				displayValue: view.name,
+			})),
+		[refetchAllView, sourcepage, viewKey, viewsData?.data.data],
+	);
+
 	return (
 		<>
 			{showSaveView && (
@@ -183,30 +191,12 @@ function ExplorerCard({
 							<Space size="large">
 								{viewsData?.data.data && viewsData?.data.data.length && (
 									<Space>
-										<Select
-											getPopupContainer={popupContainer}
+										<ComboboxSimple
 											loading={isLoading || isRefetching}
-											showSearch
 											placeholder="Select a view"
-											dropdownStyle={DropDownOverlay}
-											dropdownMatchSelectWidth={false}
-											optionLabelProp="value"
+											items={viewItems}
 											value={viewName || undefined}
-										>
-											{viewsData?.data.data.map((view) => (
-												<Select.Option key={view.id} value={view.name}>
-													<MenuItemGenerator
-														viewName={view.name}
-														viewKey={viewKey}
-														createdBy={view.createdBy}
-														uuid={view.id}
-														refetchAllView={refetchAllView}
-														viewData={viewsData.data.data}
-														sourcePage={sourcepage}
-													/>
-												</Select.Option>
-											))}
-										</Select>
+										/>
 									</Space>
 								)}
 								{isQueryUpdated && (

frontend/src/components/GuardAuthZ/GuardAuthZ.authz.test.tsx

@@ -11,9 +11,6 @@ import { GuardAuthZ } from './GuardAuthZ';
 describe('GuardAuthZ', () => {
 	const TestChild = (): ReactElement => <div>Protected Content</div>;
 	const LoadingFallback = (): ReactElement => <div>Loading...</div>;
-	const ErrorFallback = (error: Error): ReactElement => (
-		<div>Error occurred: {error.message}</div>
-	);
 	const NoPermissionFallback = (_response: {
 		requiredPermissionName: BrandedPermission;
 	}): ReactElement => <div>Access denied</div>;
@@ -90,40 +87,28 @@ describe('GuardAuthZ', () => {
 		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
 	});
 
-	it('should render fallbackOnError when API error occurs', async () => {
-		const errorMessage = 'Internal Server Error';
-
+	it('should render children when API error occurs and no fallbackOnError provided (fail open)', async () => {
 		server.use(
 			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: errorMessage }));
+				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
 			}),
 		);
 
 		render(
-			<GuardAuthZ relation="read" object="role:*" fallbackOnError={ErrorFallback}>
+			<GuardAuthZ relation="read" object="role:*">
 				<TestChild />
 			</GuardAuthZ>,
 		);
 
 		await waitFor(() => {
-			expect(screen.getByText(/Error occurred:/)).toBeInTheDocument();
+			expect(screen.getByText('Protected Content')).toBeInTheDocument();
 		});
-
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
 	});
 
-	it('should pass error object to fallbackOnError function', async () => {
-		const errorMessage = 'Network request failed';
-		let receivedError: Error | null = null;
-
-		const errorFallbackWithCapture = (error: Error): ReactElement => {
-			receivedError = error;
-			return <div>Captured error: {error.message}</div>;
-		};
-
+	it('should render fallbackOnError when API error occurs and fallbackOnError is provided', async () => {
 		server.use(
 			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: errorMessage }));
+				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
 			}),
 		);
 
@@ -131,35 +116,14 @@ describe('GuardAuthZ', () => {
 			<GuardAuthZ
 				relation="read"
 				object="role:*"
-				fallbackOnError={errorFallbackWithCapture}
+				fallbackOnError={<div>Custom error fallback</div>}
 			>
 				<TestChild />
 			</GuardAuthZ>,
 		);
 
 		await waitFor(() => {
-			expect(receivedError).not.toBeNull();
-		});
-
-		expect(receivedError).toBeInstanceOf(Error);
-		expect(screen.getByText(/Captured error:/)).toBeInTheDocument();
-	});
-
-	it('should render null when error occurs and no fallbackOnError provided', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
-			}),
-		);
-
-		const { container } = render(
-			<GuardAuthZ relation="read" object="role:*">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(container.firstChild).toBeNull();
+			expect(screen.getByText('Custom error fallback')).toBeInTheDocument();
 		});
 
 		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();

frontend/src/components/GuardAuthZ/GuardAuthZ.tsx

@@ -12,7 +12,7 @@ export type GuardAuthZProps<R extends AuthZRelation> = {
 	relation: R;
 	object: AuthZObject<R>;
 	fallbackOnLoading?: JSX.Element;
-	fallbackOnError?: (error: Error) => JSX.Element;
+	fallbackOnError?: JSX.Element;
 	fallbackOnNoPermissions?: (response: {
 		requiredPermissionName: BrandedPermission;
 	}) => JSX.Element;
@@ -35,7 +35,7 @@ export function GuardAuthZ<R extends AuthZRelation>({
 	}
 
 	if (error) {
-		return fallbackOnError?.(error) ?? null;
+		return fallbackOnError ?? children;
 	}
 
 	if (!permissions?.[permission]?.isGranted) {

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -4,7 +4,8 @@ import { useSelector } from 'react-redux';
 import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Switch } from 'antd';
+import { Button } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
@@ -125,9 +126,8 @@ function ShareURLModal(): JSX.Element {
 								<Info size={14} color={Color.BG_AMBER_600} />
 							)}
 							<Switch
-								checked={enableAbsoluteTime}
+								value={enableAbsoluteTime}
 								disabled={!isValidateRelativeTime}
-								size="small"
 								onChange={(): void => {
 									setEnableAbsoluteTime((prev) => !prev);
 								}}

frontend/src/components/InputWithLabel/InputWithLabel.styles.scss

@@ -20,9 +20,9 @@
 		padding: 0px 8px;
 
 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l2-border);
-		background: var(--l2-background);
-		color: var(--l2-foreground);
+		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
+		background: var(--input-with-label-background-color, var(--l2-background));
+		color: var(--input-with-label-color, var(--l2-foreground));
 
 		display: flex;
 		justify-content: flex-start;
@@ -35,21 +35,28 @@
 		min-width: 150px;
 		font-family: 'Space Mono', monospace !important;
 
-		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l2-background);
+		border-radius: 2px;
+		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
+		background: var(--input-with-label-background-color, var(--l2-background));
+		color: var(--input-with-label-color, var(--l2-foreground));
 
-		border-right: none;
-		border-left: none;
-		border-top-right-radius: 0px;
-		border-bottom-right-radius: 0px;
-		border-top-left-radius: 0px;
-		border-bottom-left-radius: 0px;
 		font-size: 12px !important;
-		line-height: 27px;
+		line-height: 25px;
+
+		&.input__has-label-after {
+			border-left: none;
+			border-top-left-radius: 0px;
+			border-bottom-left-radius: 0px;
+		}
+
+		&.input__has-close-button {
+			border-right: none;
+			border-top-right-radius: 0px;
+			border-bottom-right-radius: 0px;
+		}
 
 		&::placeholder {
-			color: var(--l2-foreground) !important;
+			color: var(--input-with-label-color, var(--l3-foreground)) !important;
 			font-size: 12px !important;
 		}
 		&[type='number']::-webkit-inner-spin-button,
@@ -63,25 +70,24 @@
 
 	.close-btn {
 		border-radius: 0px 2px 2px 0px;
-		border: 1px solid var(--l2-border);
-		background: var(--l2-background);
-		height: 38px;
+		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
+		background: var(--input-with-label-background-color, var(--l2-background));
+		height: 100%;
 		width: 38px;
 	}
 
 	&.labelAfter {
 		.input {
-			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--l1-border);
-			background: var(--l2-background);
+			border-radius: 2px;
+			border: 1px solid var(--input-with-label-border-color, var(--l2-border));
+			background: var(--input-with-label-background-color, var(--l2-background));
 			border-top-right-radius: 0px;
 			border-bottom-right-radius: 0px;
 		}
 
 		.label {
 			border-left: none;
-			border-top-left-radius: 0px;
-			border-bottom-left-radius: 0px;
+			border-radius: 0px 2px 2px 0px;
 		}
 	}
 }

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -44,7 +44,10 @@ function InputWithLabel({
 		>
 			{!labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
 			<Input
-				className="input"
+				className={cx('input', {
+					'input__has-label-after': !labelAfter,
+					'input__has-close-button': !!onClose,
+				})}
 				placeholder={placeholder}
 				type={type}
 				value={inputValue}

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Style } from '@signozhq/design-tokens';
-import { ChevronDown, Plus, Trash2, X } from '@signozhq/icons';
+import { Plus, Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
 import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
+import { SelectSimple } from '@signozhq/ui/select';
 import { toast } from '@signozhq/ui/sonner';
-import { Select } from 'antd';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';
 import { cloneDeep, debounce } from 'lodash-es';
@@ -15,7 +15,6 @@ import APIError from 'types/api/error';
 import { ROLES } from 'types/roles';
 import { EMAIL_REGEX } from 'utils/app';
 import { getBaseUrl } from 'utils/basePath';
-import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
 import './InviteMembersModal.styles.scss';
@@ -254,18 +253,17 @@ function InviteMembersModal({
 										)}
 									</div>
 									<div className="team-member-cell role-cell">
-										<Select
+										<SelectSimple
 											value={row.role || undefined}
 											onChange={(role): void => updateRole(row.id, role as ROLES)}
 											className="team-member-role-select"
 											placeholder="Select roles"
-											suffixIcon={<ChevronDown size={14} />}
-											getPopupContainer={popupContainer}
-										>
-											<Select.Option value="VIEWER">Viewer</Select.Option>
-											<Select.Option value="EDITOR">Editor</Select.Option>
-											<Select.Option value="ADMIN">Admin</Select.Option>
-										</Select>
+											items={[
+												{ value: 'VIEWER', label: 'Viewer' },
+												{ value: 'EDITOR', label: 'Editor' },
+												{ value: 'ADMIN', label: 'Admin' },
+											]}
+										/>
 									</div>
 									<div className="team-member-cell action-cell">
 										{rows.length > 1 && (

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button, Input, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import type { DefaultOptionType } from 'antd/es/select';
+import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';
 import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
@@ -113,15 +113,11 @@ function OptionsMenu({
 
 	function handleColumnSelection(
 		currentIndex: number,
-		optionsData: DefaultOptionType[],
+		optionsData: ComboboxSimpleItem[],
 	): void {
-		const currentItem = optionsData[currentIndex];
 		const itemLength = optionsData.length;
-		if (addColumn && addColumn?.onSelect) {
-			addColumn?.onSelect(selectedValue, {
-				label: currentItem.label,
-				disabled: false,
-			});
+		if (addColumn && addColumn?.onSelect && selectedValue) {
+			addColumn?.onSelect(selectedValue);
 
 			// if the last element is selected then select the previous one
 			if (currentIndex === itemLength - 1) {
@@ -175,7 +171,7 @@ function OptionsMenu({
 			}
 			case 'Enter':
 				e.preventDefault();
-				handleColumnSelection(currentIndex, optionsData);
+				handleColumnSelection(currentIndex, optionsData as ComboboxSimpleItem[]);
 				break;
 			default:
 				break;
@@ -317,7 +313,10 @@ function OptionsMenu({
 									}}
 									onClick={(eve): void => {
 										eve.stopPropagation();
-										handleColumnSelection(index, addColumn?.options || []);
+										handleColumnSelection(
+											index,
+											(addColumn?.options || []) as ComboboxSimpleItem[],
+										);
 									}}
 								>
 									<div className="name">

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -10,7 +10,8 @@ import {
 	Loader,
 	X,
 } from '@signozhq/icons';
-import { Modal, Select, Spin, Tooltip, Tree, TreeDataNode } from 'antd';
+import { Modal, Spin, Tooltip, Tree, TreeDataNode } from 'antd';
+import { SelectSimple } from '@signozhq/ui/select';
 import { OnboardingStatusResponse } from 'api/messagingQueues/onboarding/getOnboardingStatus';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
@@ -181,8 +182,8 @@ function AttributeCheckList({
 	const [filter, setFilter] = useState<AttributesFilters>(AttributesFilters.ALL);
 	const [treeData, setTreeData] = useState<TreeDataNode[]>([]);
 
-	const handleFilterChange = (value: AttributesFilters): void => {
-		setFilter(value);
+	const handleFilterChange = (value: string | string[]): void => {
+		setFilter(value as AttributesFilters);
 	};
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 	const history = useHistory();
@@ -237,11 +238,11 @@ function AttributeCheckList({
 				</div>
 			) : (
 				<div className="modal-content">
-					<Select
+					<SelectSimple
 						defaultValue={AttributesFilters.ALL}
 						className="attribute-select"
 						onChange={handleFilterChange}
-						options={[
+						items={[
 							{
 								value: AttributesFilters.ALL,
 								label: AttributeLabels({ title: 'Attributes: All' }),

frontend/src/components/MessagingQueues/MQCommon/MQCommon.tsx

@@ -1,6 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Tooltip } from 'antd';
-import type { DefaultOptionType } from 'antd/es/select';
+import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import { Info } from '@signozhq/icons';
 
 import './MQCommon.styles.scss';
@@ -35,7 +35,7 @@ export function ComingSoon(): JSX.Element {
 }
 
 export function SelectMaxTagPlaceholder(
-	omittedValues: Partial<DefaultOptionType>[],
+	omittedValues: Partial<ComboboxSimpleItem>[],
 ): JSX.Element {
 	return (
 		<Tooltip title={omittedValues.map(({ value }) => value).join(', ')}>

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -18,7 +18,9 @@ import {
 	RefreshCw,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Checkbox, Select } from 'antd';
+// oxlint-disable-next-line signoz/no-antd-components This component for now is too complex to be migrated in one PR
+import { Select } from 'antd';
+import { Button, Checkbox } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -16,6 +16,7 @@ import {
 	X,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
+// oxlint-disable-next-line signoz/no-antd-components This component for now is too complex to be migrated in one PR
 import { Select } from 'antd';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip';

frontend/src/components/NoAuthBanner/NoAuthBanner.tsx

@@ -13,7 +13,7 @@ export function NoAuthBanner(): JSX.Element {
 			Impersonation mode: authentication is disabled. Anyone with access to this
 			instance has admin privileges.{' '}
 			<a
-				href="https://signoz.io/docs/manage/administrator-guide/configuration/no-auth-mode/"
+				href="https://signoz.io/docs/manage/administrator-guide/configuration/impersonation-mode/"
 				target="_blank"
 				rel="noreferrer"
 			>

frontend/src/components/OrderBy/ListViewOrderBy.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { Select, Spin } from 'antd';
+import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
 import { DataSource } from 'types/common/queryBuilder';
@@ -13,48 +13,25 @@ interface ListViewOrderByProps {
 	dataSource: DataSource;
 }
 
-// Loader component for the dropdown when loading or no results
-function Loader({ isLoading }: { isLoading: boolean }): JSX.Element {
-	return (
-		<div className="order-by-loading-container">
-			{isLoading ? <Spin size="default" /> : 'No results found'}
-		</div>
-	);
-}
-
 function ListViewOrderBy({
 	value,
 	onChange,
 	dataSource,
 }: ListViewOrderByProps): JSX.Element {
-	const [searchInput, setSearchInput] = useState('');
-	const [debouncedInput, setDebouncedInput] = useState('');
-	const [selectOptions, setSelectOptions] = useState<
-		{ label: string; value: string }[]
-	>([]);
-	const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const [selectOptions, setSelectOptions] = useState<ComboboxSimpleItem[]>([]);
 
-	// Fetch key suggestions based on debounced input
+	// Fetch key suggestions once; ComboboxSimple handles local filtering.
 	const { data, isLoading } = useQuery({
-		queryKey: ['orderByKeySuggestions', dataSource, debouncedInput],
+		queryKey: ['orderByKeySuggestions', dataSource],
 		queryFn: async () => {
 			const response = await getKeySuggestions({
 				signal: dataSource,
-				searchText: debouncedInput,
+				searchText: '',
 			});
 			return response.data;
 		},
 	});
 
-	useEffect(
-		() => (): void => {
-			if (debounceTimer.current) {
-				clearTimeout(debounceTimer.current);
-			}
-		},
-		[],
-	);
-
 	// Update options when API data changes
 	useEffect(() => {
 		const rawKeys: QueryKeyDataSuggestionsProps[] = data?.data?.keys
@@ -62,52 +39,33 @@ function ListViewOrderBy({
 			: [];
 
 		const keyNames = rawKeys.map((key) => key.name);
-		const uniqueKeys = [
-			...new Set(searchInput ? keyNames : ['timestamp', ...keyNames]),
-		];
+		const uniqueKeys = [...new Set(['timestamp', ...keyNames])];
 
-		const updatedOptions = uniqueKeys.flatMap((key) => [
+		const updatedOptions: ComboboxSimpleItem[] = uniqueKeys.flatMap((key) => [
 			{ label: `${key} (desc)`, value: `${key}:desc` },
 			{ label: `${key} (asc)`, value: `${key}:asc` },
 		]);
 
 		setSelectOptions(updatedOptions);
-	}, [data, searchInput]);
+	}, [data]);
 
-	// Handle search input with debounce
-	const handleSearch = (input: string): void => {
-		setSearchInput(input);
-
-		// Filter current options for instant client-side match
-		const filteredOptions = selectOptions.filter((option) =>
-			option.value.toLowerCase().includes(input.trim().toLowerCase()),
-		);
-
-		// If no match found or input is empty, trigger debounced fetch
-		if (filteredOptions.length === 0 || input === '') {
-			if (debounceTimer.current) {
-				clearTimeout(debounceTimer.current);
-			}
-
-			debounceTimer.current = setTimeout(() => {
-				setDebouncedInput(input);
-			}, 100);
-		}
-	};
+	const handleChange = useMemo(
+		() =>
+			(val: string | string[]): void => {
+				onChange(val as string);
+			},
+		[onChange],
+	);
 
 	return (
-		<Select
-			showSearch
+		<ComboboxSimple
 			value={value}
-			onChange={onChange}
-			onSearch={handleSearch}
-			notFoundContent={<Loader isLoading={isLoading} />}
+			onChange={handleChange}
+			loading={isLoading}
 			placeholder="Select a field"
 			style={{ width: 200 }}
-			options={selectOptions}
-			filterOption={(input, option): boolean =>
-				(option?.value ?? '').toLowerCase().includes(input.trim().toLowerCase())
-			}
+			items={selectOptions}
+			emptyPlaceholder="No results found"
 		/>
 	);
 }

frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss

@@ -22,6 +22,37 @@
 	border-right: none;
 	border-left: none;
 
+	--select-trigger-height: 2.25rem;
+	--select-trigger-background-color: var(
+		--query-builder-v2-background-color,
+		var(--l2-background)
+	);
+	--select-trigger-border-color: var(
+		--query-builder-v2-border-color,
+		var(--l2-border)
+	);
+
+	--combobox-trigger-height: 2.25rem;
+	--combobox-trigger-padding: 7px var(--spacing-6);
+	--combobox-trigger-background-color: var(
+		--query-builder-v2-background-color,
+		var(--l2-background)
+	);
+	--combobox-trigger-border-color: var(
+		--query-builder-v2-border-color,
+		var(--l2-border)
+	);
+
+	[data-slot='combobox-trigger'],
+	[data-slot='select-trigger'] {
+		color: var(--query-builder-v2-color, var(--l2-foreground));
+	}
+
+	[data-slot='combobox-placeholder'],
+	[data-slot='select-placeholder'] {
+		color: var(--query-builder-v2-placeholder-color, var(--l3-foreground));
+	}
+
 	.qb-content-container {
 		display: flex;
 		flex-direction: column;
@@ -80,8 +111,8 @@
 				width: 1px;
 				background: repeating-linear-gradient(
 					to bottom,
-					var(--l1-border),
-					var(--l1-border) 4px,
+					var(--query-builder-v2-border-color, var(--l2-border)),
+					var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 					transparent 4px,
 					transparent 8px
 				);
@@ -101,7 +132,8 @@
 					top: 12px;
 					width: 6px;
 					height: 6px;
-					border-left: 6px dotted var(--l1-border);
+					border-left: 6px dotted
+						var(--query-builder-v2-border-color, var(--l2-border));
 				}
 
 				/* Horizontal line pointing from vertical to the item */
@@ -114,8 +146,8 @@
 					height: 1px;
 					background: repeating-linear-gradient(
 						to right,
-						var(--l1-border),
-						var(--l1-border) 4px,
+						var(--query-builder-v2-border-color, var(--l2-border)),
+						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -241,7 +273,8 @@
 						top: 12px;
 						width: 6px;
 						height: 6px;
-						border-left: 6px dotted var(--l1-border);
+						border-left: 6px dotted
+							var(--query-builder-v2-border-color, var(--l2-border));
 					}
 
 					/* Horizontal line pointing from vertical to the item */
@@ -254,8 +287,8 @@
 						height: 1px;
 						background: repeating-linear-gradient(
 							to right,
-							var(--l1-border),
-							var(--l1-border) 4px,
+							var(--query-builder-v2-border-color, var(--l2-border)),
+							var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 							transparent 4px,
 							transparent 8px
 						);
@@ -273,6 +306,16 @@
 					line-height: 16px; /* 128.571% */
 
 					resize: none;
+
+					background-color: var(
+						--query-builder-v2-background-color,
+						var(--l2-background)
+					);
+					border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+
+					&:placeholder {
+						color: var(--query-builder-v2-placeholder-color, var(--l3-foreground));
+					}
 				}
 
 				.formula-legend {
@@ -282,15 +325,30 @@
 					.ant-input-group-addon {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
-						background: var(--l2-background);
-						color: var(--l2-foreground);
+						background: var(
+							--query-builder-v2-background-color,
+							var(--l2-background)
+						);
+						color: var(--query-builder-v2-color, var(--l2-foreground));
 						font-size: 12px;
 						font-weight: 300;
+
+						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 					}
 
 					.ant-input {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
+
+						background-color: var(
+							--query-builder-v2-background-color,
+							var(--l2-background)
+						);
+						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+
+						&:placeholder {
+							color: var(--query-builder-v2-placeholder-color, var(--l3-foreground));
+						}
 					}
 				}
 			}
@@ -323,8 +381,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--l1-border),
-						var(--l1-border) 4px,
+						var(--query-builder-v2-border-color, var(--l2-border)),
+						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -395,8 +453,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--l1-border),
-						var(--l1-border) 4px,
+						var(--query-builder-v2-border-color, var(--l2-border)),
+						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -412,7 +470,7 @@
 				min-width: 120px;
 
 				border-radius: 2px;
-				border: 1px solid var(--l1-border);
+				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 				background: var(--l1-background);
 				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
@@ -457,7 +515,7 @@
 
 		.ant-select-selector {
 			border-radius: 2px;
-			border: 1px solid var(--l1-border) !important;
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
 			background: var(--l1-background) !important;
 			height: 34px !important;
 			box-sizing: border-box !important;

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss

@@ -57,6 +57,7 @@
 
 		.group-by-filter-container {
 			min-width: 340px !important;
+			--combobox-trigger-height: auto;
 		}
 
 		.metrics-aggregation-section-content-item {
@@ -146,17 +147,3 @@
 		}
 	}
 }
-
-.metrics-operators-select {
-	border-radius: 2px;
-	border: 1.005px solid var(--l1-border);
-	background: var(--l1-background);
-
-	color: var(--l1-foreground);
-	font-family: 'Geist Mono';
-	font-size: 13px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px; /* 142.857% */
-	letter-spacing: -0.07px;
-}

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx

@@ -118,7 +118,6 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										value={queryAggregation.timeAggregation || ''}
 										onChange={handleChangeOperator}
 										operators={operators}
-										className="metrics-operators-select"
 									/>
 								</div>
 							</div>

frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.styles.scss

@@ -6,11 +6,13 @@
 	gap: 8px;
 	width: 100%;
 
+	--select-trigger-width: auto;
+
 	.ant-select-selection-search-input {
 		font-size: 12px !important;
-		line-height: 27px;
+		line-height: 25px;
 		&::placeholder {
-			color: var(--l2-foreground) !important;
+			color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
 			font-size: 12px !important;
 		}
 	}
@@ -22,9 +24,9 @@
 	.ant-select-selector {
 		width: 100%;
 		border-radius: 2px;
-		border: 1px solid var(--l1-border) !important;
-		background: var(--l1-background);
-		color: var(--l1-foreground);
+		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
+		background: var(--query-builder-v2-background-color, var(--l2-background));
+		color: var(--query-builder-v2-color, var(--l2-foreground));
 		font-family: 'Geist Mono';
 		font-size: 13px;
 		font-style: normal;
@@ -33,20 +35,23 @@
 		min-height: 36px;
 
 		.ant-select-selection-placeholder {
-			color: var(--l2-foreground) !important;
+			color: var(
+				--query-builder-v2-placeholder-color,
+				var(--l3-foreground)
+			) !important;
 			font-size: 12px !important;
 		}
 	}
 
 	.ant-select-dropdown {
 		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--l1-background);
+		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+		background: var(--query-builder-v2-background-color, var(--l2-background));
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 		backdrop-filter: blur(20px);
 
 		.ant-select-item {
-			color: var(--l1-foreground);
+			color: var(--query-builder-v2-color, var(--l2-foreground));
 			font-family: 'Geist Mono';
 			font-size: 13px;
 			font-style: normal;
@@ -55,12 +60,18 @@
 
 			&:hover,
 			&.ant-select-item-option-active {
-				background: var(--l3-background) !important;
+				background: var(
+					--query-builder-v2-selected-background-color,
+					var(--l3-background)
+				) !important;
 			}
 
 			&.ant-select-item-option-selected {
-				background: var(--l3-background) !important;
-				border: 1px solid var(--l1-border);
+				background: var(
+					--query-builder-v2-selected-background-color,
+					var(--l3-background)
+				) !important;
+				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 				font-weight: 600;
 			}
 		}

frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useMemo } from 'react';
-import { Select } from 'antd';
+import { SelectSimple, type SelectSimpleItem } from '@signozhq/ui/select';
 import {
 	initialQueriesMap,
 	initialQueryMeterWithType,
@@ -10,7 +10,6 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
-import { SelectOption } from 'types/common/select';
 
 import {
 	getPreviousQueryFromKey,
@@ -21,7 +20,7 @@ import {
 
 import './MetricsSelect.styles.scss';
 
-export const SOURCE_OPTIONS: SelectOption<string, string>[] = [
+export const SOURCE_OPTIONS: SelectSimpleItem[] = [
 	{ value: 'metrics', label: 'Metrics' },
 	{ value: 'meter', label: 'Meter' },
 ];
@@ -140,14 +139,14 @@ export const MetricsSelect = memo(function MetricsSelect({
 	return (
 		<div className="metrics-source-select-container">
 			{signalSourceChangeEnabled && (
-				<Select
+				<SelectSimple
 					className="source-selector"
 					placeholder="Source"
-					options={SOURCE_OPTIONS}
+					items={SOURCE_OPTIONS}
 					value={source}
 					defaultValue="metrics"
-					data-testid={`metrics-source-selector-${index}`}
-					onChange={handleSignalSourceChange}
+					testId={`metrics-source-selector-${index}`}
+					onChange={(value): void => handleSignalSourceChange(value as string)}
 				/>
 			)}
 

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -22,34 +22,35 @@
 			font-style: normal;
 			font-weight: var(--font-weight-normal);
 
-			color: var(--l2-foreground);
+			color: var(--query-builder-v2-color, var(--l2-foreground));
 		}
 
 		.tab {
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 			border-left: none;
 			min-width: 120px;
 			height: 36px;
 			line-height: 36px;
 
 			&:first-child {
-				border-left: 1px solid var(--l1-border);
+				border-left: 1px solid
+					var(--query-builder-v2-border-color, var(--l2-border));
 			}
 		}
 
 		.tab::before {
-			background: var(--l1-border);
+			background: var(--query-builder-v2-border-color, var(--l2-border));
 		}
 
 		.selected-view {
 			color: var(--text-robin-500);
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 
 			display: none;
 		}
 
 		.selected-view::before {
-			background: var(--l1-border);
+			background: var(--query-builder-v2-border-color, var(--l2-border));
 		}
 	}
 
@@ -58,7 +59,7 @@
 		height: 30px;
 
 		border-radius: 2px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 		background: var(--l3-background);
 		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	}
@@ -71,10 +72,13 @@
 	align-items: center;
 
 	.having-filter-select-container {
+		position: relative;
 		width: 100%;
 		display: flex;
 		flex-direction: row;
-		align-items: center;
+		align-items: flex-start;
+		background: var(--query-builder-v2-background-color, var(--l2-background));
+		padding-right: 38px;
 
 		.having-filter-select-editor {
 			border-radius: 2px;
@@ -99,15 +103,17 @@
 				}
 
 				.cm-content {
-					border-radius: 2px;
-					border: 1px solid var(--l1-border);
-					border-top-right-radius: 0px;
-					border-bottom-right-radius: 0px;
+					border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+					border-left-width: 0px;
+					border-right-width: 0px;
 					padding: 0px !important;
-					background-color: var(--l2-background) !important;
+					background-color: var(
+						--query-builder-v2-background-color,
+						var(--l2-background)
+					) !important;
 
 					&:focus-within {
-						border-color: var(--l1-border);
+						border-color: var(--query-builder-v2-border-color, var(--l2-border));
 					}
 				}
 
@@ -211,17 +217,32 @@
 				}
 
 				.cm-line {
-					line-height: 36px !important;
+					min-height: 34px;
+					line-height: 32px !important;
 					font-family: 'Space Mono', monospace !important;
-					background-color: var(--l2-background) !important;
+					background-color: var(
+						--query-builder-v2-background-color,
+						var(--l2-background)
+					) !important;
+
+					&,
+					.ͼ1a {
+						color: var(--query-builder-v2-color, var(--l2-foreground));
+					}
 
 					::-moz-selection {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 						opacity: 0.5 !important;
 					}
 
 					::selection {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 						opacity: 0.5 !important;
 					}
 
@@ -230,8 +251,11 @@
 					}
 
 					.chip-decorator {
-						background: var(--l3-background) !important;
-						color: var(--l1-foreground) !important;
+						background: var(
+							--query-builder-v2-chip-decorator-background-color,
+							var(--l3-background)
+						) !important;
+						color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
 						border-radius: 4px;
 						padding: 2px 4px;
 						margin-right: 4px;
@@ -239,24 +263,36 @@
 				}
 
 				.cm-selectionBackground {
-					background: var(--l3-background) !important;
+					background: var(
+						--query-builder-v2-selection-background-color,
+						var(--l3-background)
+					) !important;
 					opacity: 0.5 !important;
 				}
 
 				.cm-activeLine > span {
 					font-size: 12px !important;
 				}
+
+				.cm-placeholder {
+					color: var(
+						--query-builder-v2-placeholder-color,
+						var(--l3-foreground)
+					) !important;
+				}
 			}
 		}
 
 		.close-btn {
+			position: absolute;
+			top: 0;
+			right: 0;
 			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--l2-border);
-			background: var(--l2-background);
-			height: 38px;
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			background: var(--query-builder-v2-background-color, var(--l2-background));
+			height: 100%;
 			width: 38px;
 
-			border-left: transparent;
 			border-top-left-radius: 0px;
 			border-bottom-left-radius: 0px;
 		}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss

@@ -23,7 +23,7 @@
 				flex: 1;
 				min-width: 0;
 				font-size: 12px;
-				color: var(--l2-foreground) !important;
+				color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
 
 				&.error {
 					.cm-editor {
@@ -51,14 +51,15 @@
 
 					.cm-content {
 						border-radius: 2px;
-						border: 1px solid var(--l1-border);
-						border-top-right-radius: 0px;
-						border-bottom-right-radius: 0px;
+						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 						padding: 0px !important;
-						background-color: var(--l1-background) !important;
+						background-color: var(
+							--query-builder-v2-background-color,
+							var(--l2-background)
+						) !important;
 
 						&:focus-within {
-							border-color: var(--l1-border);
+							border-color: var(--query-builder-v2-border-color, var(--l2-border));
 						}
 					}
 
@@ -74,7 +75,7 @@
 						right: 0px !important;
 
 						border-radius: 4px;
-						border: 1px solid var(--l1-border);
+						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 						background: linear-gradient(
 							139deg,
 							color-mix(in srgb, var(--card) 80%, transparent) 0%,
@@ -118,7 +119,7 @@
 								box-sizing: border-box;
 								overflow: hidden;
 
-								color: var(--l2-foreground) !important;
+								color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
 								font-family: 'Space Mono', monospace !important;
 
 								.cm-completionIcon {
@@ -127,7 +128,10 @@
 
 								&:hover,
 								&[aria-selected='true'] {
-									background: var(--l3-background) !important;
+									background: var(
+										--query-builder-v2-selection-background-color,
+										var(--l3-background)
+									) !important;
 									color: var(--l1-foreground) !important;
 									font-weight: 600 !important;
 								}
@@ -142,15 +146,24 @@
 					.cm-line {
 						line-height: 36px !important;
 						font-family: 'Space Mono', monospace !important;
-						background-color: var(--l2-background) !important;
+						background-color: var(
+							--query-builder-v2-background-color,
+							var(--l2-background)
+						) !important;
 
 						::-moz-selection {
-							background: var(--l3-background) !important;
+							background: var(
+								--query-builder-v2-selection-background-color,
+								var(--l3-background)
+							) !important;
 							opacity: 0.5 !important;
 						}
 
 						::selection {
-							background: var(--l3-background) !important;
+							background: var(
+								--query-builder-v2-selection-background-color,
+								var(--l3-background)
+							) !important;
 							opacity: 0.5 !important;
 						}
 
@@ -159,8 +172,11 @@
 						}
 
 						.chip-decorator {
-							background: var(--l3-background) !important;
-							color: var(--l1-foreground) !important;
+							background: var(
+								--query-builder-v2-chip-decorator-background-color,
+								var(--l3-background)
+							) !important;
+							color: var(--query-builder-v2-color, var(--l1-foreground)) !important;
 							border-radius: 4px;
 							padding: 2px 4px;
 							margin-right: 4px;
@@ -168,7 +184,10 @@
 					}
 
 					.cm-selectionBackground {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 						opacity: 0.5 !important;
 					}
 				}
@@ -201,12 +220,11 @@
 
 			.close-btn {
 				border-radius: 0px 2px 2px 0px;
-				border: 1px solid var(--l1-border);
-				background: var(--l1-background);
-				height: 38px;
+				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+				background: var(--query-builder-v2-background-color, var(--l2-background));
+				height: 100%;
 				width: 38px;
 
-				border-left: transparent;
 				border-top-left-radius: 0px;
 				border-bottom-left-radius: 0px;
 			}
@@ -217,13 +235,13 @@
 			height: 36px;
 			line-height: 36px;
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
 			font-family: 'Space Mono', monospace !important;
 
 			&::placeholder {
-				color: var(--l1-foreground);
+				color: var(--query-builder-v2-color, var(--l2-foreground));
 				opacity: 0.5;
 			}
 		}
@@ -240,7 +258,7 @@
 					input {
 						max-width: 120px;
 						&::placeholder {
-							color: var(--l2-foreground);
+							color: var(--query-builder-v2-color, var(--l2-foreground));
 						}
 					}
 				}
@@ -251,8 +269,8 @@
 
 .query-aggregation-error-popover {
 	.ant-popover-inner {
-		background-color: var(--l1-border);
-		border: 1px solid var(--l1-border);
+		background-color: var(--query-builder-v2-border-color, var(--l2-border));
+		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 		border-radius: 4px;
 		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
 	}

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.styles.scss

@@ -1,7 +1,7 @@
 .add-trace-operator-button,
 .add-new-query-button,
 .add-formula-button {
-	border: 1px solid var(--l1-border);
-	background: var(--l2-background);
+	border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+	background: var(--query-builder-v2-background-color, var(--l2-background));
 	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 }

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss

@@ -34,11 +34,14 @@
 		.query-status-container {
 			width: 32px;
 
-			background-color: var(--l1-background) !important;
+			background-color: var(
+				--query-builder-v2-background-color,
+				var(--l2-background)
+			) !important;
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 			border-radius: 2px;
 			border-top-left-radius: 0px !important;
 			border-bottom-left-radius: 0px !important;
@@ -77,16 +80,16 @@
 
 		.cm-content {
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 			padding: 0px !important;
 
 			&:focus-within {
-				border-color: var(--l1-border);
+				border-color: var(--query-builder-v2-border-color, var(--l2-border));
 			}
 		}
 
 		&.cm-focused {
-			outline: 1px solid var(--l1-border);
+			outline: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 		}
 
 		.cm-tooltip-autocomplete {
@@ -148,11 +151,17 @@
 
 					font-family: 'Space Mono', monospace !important;
 
-					background-color: var(--l1-background) !important;
-					color: var(--l2-foreground) !important;
+					background-color: var(
+						--query-builder-v2-background-color,
+						var(--l2-background)
+					) !important;
+					color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
 
 					&:hover {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 					}
 
 					.cm-completionIcon {
@@ -160,7 +169,10 @@
 					}
 
 					&[aria-selected='true'] {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 						font-weight: 600 !important;
 					}
 				}
@@ -172,25 +184,49 @@
 		}
 
 		.cm-line {
-			line-height: 34px !important;
+			line-height: 36px !important;
 			font-family: 'Space Mono', monospace !important;
-			background-color: var(--l2-background) !important;
+			background-color: var(
+				--query-builder-v2-background-color,
+				var(--l2-background)
+			) !important;
+
+			&,
+			.ͼ1a {
+				color: var(--query-builder-v2-color, var(--l2-foreground));
+			}
 
 			::-moz-selection {
-				background: var(--l3-background) !important;
+				background: var(
+					--query-builder-v2-selection-background-color,
+					var(--l3-background)
+				) !important;
 				opacity: 0.5 !important;
 			}
 
 			::selection {
-				background: var(--l3-background) !important;
+				background: var(
+					--query-builder-v2-selection-background-color,
+					var(--l3-background)
+				) !important;
 				opacity: 0.5 !important;
 			}
 		}
 
 		.cm-selectionBackground {
-			background: var(--l3-background) !important;
+			background: var(
+				--query-builder-v2-selection-background-color,
+				var(--l3-background)
+			) !important;
 			opacity: 0.5 !important;
 		}
+
+		.cm-placeholder {
+			color: var(
+				--query-builder-v2-placeholder-color,
+				var(--l3-foreground)
+			) !important;
+		}
 	}
 
 	.cursor-position {

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -14,7 +14,8 @@ import {
 	ComboboxList,
 	ComboboxTrigger,
 } from '@signozhq/ui/combobox';
-import { Skeleton, Switch, Tooltip } from 'antd';
+import { Skeleton, Tooltip } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
@@ -281,9 +282,8 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 				<div className="api-quick-filters-header">
 					<Typography.Text>Show IP addresses</Typography.Text>
 					<Switch
-						size="small"
 						style={{ marginLeft: 'auto' }}
-						checked={showIP ?? true}
+						value={showIP ?? true}
 						onChange={(checked): void => {
 							logEvent('API Monitoring: Show IP addresses clicked', {
 								showIP: checked,

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -4,7 +4,8 @@ import type {
 	TableColumnsType as ColumnsType,
 	TableColumnType as ColumnType,
 } from 'antd';
-import { Button, Dropdown, Flex, MenuProps, Switch } from 'antd';
+import { Button, Dropdown, Flex, MenuProps } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -60,9 +61,7 @@ function DynamicColumnTable({
 
 	const onToggleHandler =
 		(index: number, column: ColumnGroupType<any> | ColumnType<any>) =>
-		(checked: boolean, event: React.MouseEvent<HTMLButtonElement>): void => {
-			event.stopPropagation();
-
+		(checked: boolean): void => {
 			if (shouldSendAlertsLogEvent) {
 				logEvent('Alert: Column toggled', {
 					column: column?.title,
@@ -88,10 +87,14 @@ function DynamicColumnTable({
 	const items: MenuProps['items'] =
 		dynamicColumns?.map((column, index) => ({
 			label: (
-				<div className="dynamicColumnsTable-items">
+				<div
+					className="dynamicColumnsTable-items"
+					onClick={(e): void => e.stopPropagation()}
+					role="presentation"
+				>
 					<div>{column.title?.toString()}</div>
 					<Switch
-						checked={columnsData?.findIndex((c) => c.key === column.key) !== -1}
+						value={columnsData?.findIndex((c) => c.key === column.key) !== -1}
 						onChange={onToggleHandler(index, column)}
 					/>
 				</div>

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -1,11 +1,10 @@
 import { CircleAlert, RefreshCw } from '@signozhq/icons';
-import { Checkbox, Select } from 'antd';
+import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import { useListRoles } from 'api/generated/services/role';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import APIError from 'types/api/error';
-import { popupContainer } from 'utils/selectPopupContainer';
 
 import './RolesSelect.styles.scss';
 
@@ -74,7 +73,6 @@ interface BaseProps {
 	id?: string;
 	placeholder?: string;
 	className?: string;
-	getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
 	roles?: AuthtypesRoleDTO[];
 	loading?: boolean;
 	isError?: boolean;
@@ -112,14 +110,13 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 	});
 
 	const roles = externalRoles ?? data?.data ?? [];
-	const options = getRoleOptions(roles);
+	const items: ComboboxSimpleItem[] = getRoleOptions(roles);
 
 	const {
 		mode,
 		id,
 		placeholder = 'Select role',
 		className,
-		getPopupContainer = popupContainer,
 		loading = internalLoading,
 		isError = internalError,
 		error = convertToApiError(internalErrorObj),
@@ -127,55 +124,47 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 		disabled,
 	} = props;
 
-	const notFoundContent = isError ? (
-		<ErrorContent error={error} onRefetch={onRefetch} />
-	) : undefined;
+	const emptyPlaceholder = isError
+		? error?.message || 'Failed to load roles'
+		: 'No roles available';
 
 	if (mode === 'multiple') {
 		const { value = [], onChange } = props as MultipleProps;
 		return (
-			<Select
-				id={id}
-				mode="multiple"
-				value={value}
-				onChange={onChange}
-				placeholder={placeholder}
-				className={cx('roles-select', className)}
-				loading={loading}
-				notFoundContent={notFoundContent}
-				options={options}
-				optionFilterProp="label"
-				optionRender={(option): JSX.Element => (
-					<Checkbox
-						checked={value.includes(option.value as string)}
-						style={{ pointerEvents: 'none' }}
-					>
-						{option.label}
-					</Checkbox>
-				)}
-				getPopupContainer={getPopupContainer}
-				disabled={disabled}
-			/>
+			<>
+				<ComboboxSimple
+					id={id}
+					multiple
+					value={value}
+					onChange={(v): void => onChange?.(v as string[])}
+					placeholder={placeholder}
+					className={cx('roles-select', className)}
+					loading={loading}
+					emptyPlaceholder={emptyPlaceholder}
+					items={items}
+					style={disabled ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
+				/>
+				{isError && <ErrorContent error={error} onRefetch={onRefetch} />}
+			</>
 		);
 	}
 
-	const { value, onChange, allowClear = true } = props as SingleProps;
+	const { value, onChange } = props as SingleProps;
 	return (
-		<Select
-			id={id}
-			showSearch
-			value={value || undefined}
-			onChange={onChange}
-			placeholder={placeholder}
-			allowClear={allowClear}
-			className={cx('roles-single-select', className)}
-			loading={loading}
-			notFoundContent={notFoundContent}
-			options={options}
-			optionFilterProp="label"
-			getPopupContainer={getPopupContainer}
-			disabled={disabled}
-		/>
+		<>
+			<ComboboxSimple
+				id={id}
+				value={value || undefined}
+				onChange={(v): void => onChange?.((v as string) || undefined)}
+				placeholder={placeholder}
+				className={cx('roles-single-select', className)}
+				loading={loading}
+				emptyPlaceholder={emptyPlaceholder}
+				items={items}
+				style={disabled ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
+			/>
+			{isError && <ErrorContent error={error} onRefetch={onRefetch} />}
+		</>
 	);
 }
 

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx

@@ -127,7 +127,6 @@ function KeyFormPhase({
 					>
 						<Button
 							type="submit"
-							// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 							form={FORM_ID}
 							variant="solid"
 							color="primary"

frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx

@@ -190,7 +190,6 @@ function EditKeyForm({
 					>
 						<Button
 							type="submit"
-							// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 							form={FORM_ID}
 							variant="solid"
 							color="primary"

frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -1,7 +1,11 @@
 import { useMemo } from 'react';
 import { SolidAlertTriangle } from '@signozhq/icons';
-import { Select, Tooltip } from 'antd';
-import type { DefaultOptionType } from 'antd/es/select';
+import {
+	ComboboxSimple,
+	ComboboxSimpleGroup,
+	ComboboxSimpleItem,
+} from '@signozhq/ui/combobox';
+import { Tooltip } from 'antd';
 import classNames from 'classnames';
 
 import { UniversalYAxisUnitMappings } from './constants';
@@ -42,69 +46,53 @@ function YAxisUnitSelector({
 		return '';
 	}, [initialValue, value, loading]);
 
-	const handleSearch = (
-		searchTerm: string,
-		currentOption: DefaultOptionType | undefined,
-	): boolean => {
-		if (!currentOption?.value) {
-			return false;
-		}
+	const categoriesToRender = useMemo(
+		() => categoriesOverride || getYAxisCategories(source),
+		[categoriesOverride, source],
+	);
 
-		const search = searchTerm.toLowerCase();
-		const unitId = currentOption.value.toString().toLowerCase();
-		const unitLabel = currentOption.children?.toString().toLowerCase() || '';
+	const groups: ComboboxSimpleGroup[] = useMemo(
+		() =>
+			categoriesToRender.map((category) => ({
+				heading: category.name,
+				items: category.units.map((unit): ComboboxSimpleItem => {
+					const aliases = Array.from(
+						UniversalYAxisUnitMappings[unit.id as UniversalYAxisUnit] ?? [],
+					);
+					return {
+						value: unit.id,
+						label: unit.name,
+						keywords: aliases,
+					};
+				}),
+			})),
+		[categoriesToRender],
+	);
 
-		// Check label and id
-		if (unitId.includes(search) || unitLabel.includes(search)) {
-			return true;
-		}
-
-		// Check aliases (from the mapping) using array iteration
-		const aliases = Array.from(
-			UniversalYAxisUnitMappings[currentOption.value as UniversalYAxisUnit] ?? [],
-		);
-
-		return aliases.some((alias) => alias.toLowerCase().includes(search));
+	const handleChange = (val: string | string[]): void => {
+		onChange(val as UniversalYAxisUnit);
 	};
 
-	const categoriesToRender = useMemo(() => {
-		return categoriesOverride || getYAxisCategories(source);
-	}, [categoriesOverride, source]);
-
 	return (
 		<div
 			className={classNames('y-axis-unit-selector-component', containerClassName)}
 		>
-			<Select
-				showSearch
-				value={universalUnit}
-				onChange={onChange}
+			<ComboboxSimple
+				value={universalUnit ?? undefined}
+				onChange={handleChange}
 				placeholder={placeholder}
-				filterOption={(input, option): boolean => handleSearch(input, option)}
 				loading={loading}
-				suffixIcon={
-					incompatibleUnitMessage ? (
-						<Tooltip title={incompatibleUnitMessage}>
-							<SolidAlertTriangle role="img" aria-label="warning" size="md" />
-						</Tooltip>
-					) : undefined
-				}
 				className={classNames({
-					'warning-state': incompatibleUnitMessage,
+					'warning-state': !!incompatibleUnitMessage,
 				})}
-				data-testid={dataTestId}
-				allowClear
-			>
-				{categoriesToRender.map((category) => (
-					<Select.OptGroup key={category.name} label={category.name}>
-						{category.units.map((unit) => (
-							<Select.Option key={unit.id} value={unit.id}>
-								{unit.name}
-							</Select.Option>
-						))}
-					</Select.OptGroup>
-				))}
-			</Select>
+				testId={dataTestId}
+				groups={groups}
+			/>
+			{incompatibleUnitMessage && (
+				<Tooltip title={incompatibleUnitMessage}>
+					<SolidAlertTriangle role="img" aria-label="warning" size="md" />
+				</Tooltip>
+			)}
 		</div>
 	);
 }

frontend/src/components/YAxisUnitSelector/styles.scss

@@ -1,5 +1,8 @@
 .y-axis-unit-selector-component {
-	.ant-select {
+	--combobox-trigger-background-color: var(--l2-background);
+	--combobox-trigger-border-color: var(--l2-border);
+
+	[data-slot='combobox-trigger'] {
 		width: 220px;
 	}
 }

frontend/src/components/createGuardedRoute/createGuardedRoute.authz.test.tsx

@@ -204,7 +204,7 @@ describe('createGuardedRoute', () => {
 		).not.toBeInTheDocument();
 	});
 
-	it('should render error fallback when API error occurs', async () => {
+	it('should render the component when API error occurs (fail open)', async () => {
 		server.use(
 			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
 				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
@@ -230,12 +230,8 @@ describe('createGuardedRoute', () => {
 		render(<GuardedComponent {...props} />);
 
 		await waitFor(() => {
-			expect(screen.getByText(/Something went wrong/i)).toBeInTheDocument();
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
 		});
-
-		expect(
-			screen.queryByText('Test Component: test-value'),
-		).not.toBeInTheDocument();
 	});
 
 	it('should render no permissions fallback when permission is denied', async () => {

frontend/src/components/createGuardedRoute/createGuardedRoute.tsx

@@ -9,14 +9,11 @@ import { parsePermission } from 'hooks/useAuthZ/utils';
 
 import noDataUrl from '@/assets/Icons/no-data.svg';
 
-import ErrorBoundaryFallback from '../../pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import AppLoading from '../AppLoading/AppLoading';
 import { GuardAuthZ } from '../GuardAuthZ/GuardAuthZ';
 
 import './createGuardedRoute.styles.scss';
 
-const onErrorFallback = (): JSX.Element => <ErrorBoundaryFallback />;
-
 function OnNoPermissionsFallback(response: {
 	requiredPermissionName: BrandedPermission;
 }): ReactElement {
@@ -63,7 +60,6 @@ export function createGuardedRoute<P extends object, R extends AuthZRelation>(
 				relation={relation}
 				object={resolvedObject}
 				fallbackOnLoading={<AppLoading />}
-				fallbackOnError={onErrorFallback}
 				fallbackOnNoPermissions={(response): ReactElement => (
 					<OnNoPermissionsFallback {...response} />
 				)}

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.styles.scss

@@ -45,6 +45,10 @@
 	.contributors-row {
 		height: 80px;
 	}
+	.top-contributors-progress {
+		--progress-background: transparent;
+	}
+
 	&__content {
 		.ant-table {
 			&-cell {

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx

@@ -1,6 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Table, TableColumnsType as ColumnsType } from 'antd';
+import { Table, TableColumnsType as ColumnsType } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import logEvent from 'api/common/logEvent';
 import { ConditionalAlertPopover } from 'container/AlertHistory/AlertPopover/AlertPopover';
 import AlertLabels from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
@@ -51,8 +52,8 @@ function TopContributorsRows({
 					<Progress
 						percent={(count / totalCurrentTriggers) * 100}
 						showInfo={false}
-						trailColor="rgba(255, 255, 255, 0)"
 						strokeColor={Color.BG_ROBIN_500}
+						className="top-contributors-progress"
 					/>
 				</ConditionalAlertPopover>
 			),

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/AllEndPoints.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Select } from 'antd';
+import { ComboboxSimple } from '@signozhq/ui/combobox';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import {
@@ -115,11 +115,11 @@ function AllEndPoints({
 
 	// --- GROUP BY STATE SYNC (existing) ---
 	const handleGroupByChange = useCallback(
-		(value: IBuilderQuery['groupBy']) => {
+		(value: string[]) => {
 			const newGroupBy = [];
 
 			for (let index = 0; index < value.length; index++) {
-				const element = value[index] as unknown as string;
+				const element = value[index];
 
 				// Check if the key exists in our cached options first
 				if (allAvailableGroupByOptions[element]) {
@@ -242,17 +242,14 @@ function AllEndPoints({
 			</div>
 			<div className="group-by-container">
 				<div className="group-by-label"> Group by </div>
-				<Select
+				<ComboboxSimple
 					className="group-by-select"
 					loading={isLoadingGroupByFilters}
-					mode="multiple"
-					value={groupBy}
-					allowClear
-					maxTagCount="responsive"
+					multiple
+					value={groupBy.map((g) => g.key)}
 					placeholder="Search for attribute"
-					options={groupByOptions}
-					onChange={handleGroupByChange}
-					onSearch={(value: string): void => setGroupBySearchValue(value)}
+					items={groupByOptions}
+					onChange={(value): void => handleGroupByChange(value as string[])}
 				/>{' '}
 			</div>
 			<div className="endpoints-table-container">

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.styles.scss

@@ -141,12 +141,9 @@
 
 			.progress-container {
 				width: 158px;
-				.ant-progress {
-					margin: 0;
 
-					.ant-progress-text {
-						font-weight: 600;
-					}
+				span {
+					font-weight: 600;
 				}
 			}
 
@@ -214,14 +211,14 @@
 
 		.group-by-label {
 			display: flex;
-			padding: 6px 15px;
+			padding: 4px 15px;
 			justify-content: center;
 			align-items: center;
 			gap: 4px;
 			flex-shrink: 0;
 
 			border-radius: 2px 0px 0px 2px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--l2-border);
 			border-right: none;
 			background: var(--l3-background);
 
@@ -230,18 +227,15 @@
 			font-size: 14px;
 			font-style: normal;
 			font-weight: 400;
-			line-height: 18px;
+			line-height: 22px;
 			letter-spacing: -0.07px;
 		}
 
 		.group-by-select {
 			width: 100%;
-			.ant-select-selector {
-				font-size: 14px;
-				border-radius: 2px 0px 0px 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
-			}
+			box-sizing: border-box;
+
+			--combobox-trigger-border-radius: 0px;
 		}
 	}
 	// Add border-bottom to table cells when pagination is not present
@@ -464,14 +458,13 @@
 		}
 
 		.endpoint-details-filters-container-dropdown {
-			width: 120px;
+			width: 150px;
 			border-right: 1px solid var(--l1-border);
 			height: 36px;
 			display: flex;
 			align-items: center;
-			.ant-select-single {
-				height: 32px;
-			}
+
+			--combobox-trigger-border-color: transparent;
 		}
 
 		.endpoint-details-filters-container-search {

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/EndPointDetails.tsx

@@ -263,7 +263,6 @@ function EndPointDetails({
 						setSelectedEndPointName={setSelectedEndPointName}
 						endPointDropDownDataQuery={endPointDropDownDataQuery}
 						parentContainerDiv=".endpoint-details-filters-container"
-						dropdownStyle={{ width: 'calc(100% - 36px)' }}
 					/>
 				</div>
 				<div className="endpoint-details-filters-container-search">

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx

@@ -1,7 +1,8 @@
 import { useMemo, useState } from 'react';
 import { QueryFunctionContext, useQueries, useQuery } from 'react-query';
-import { Spin, Switch, Table, Tooltip } from 'antd';
+import { Spin, Table, Tooltip } from 'antd';
 import { Info, Loader } from '@signozhq/icons';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import { getQueryRangeV5 } from 'api/v5/queryRange/getQueryRange';
 import { MetricRangePayloadV5, ScalarData } from 'api/v5/v5';
@@ -170,11 +171,7 @@ function TopErrors({
 					/>
 				</div>
 				<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-					<Switch
-						checked={showStatusCodeErrors}
-						onChange={setShowStatusCodeErrors}
-						size="small"
-					/>
+					<Switch value={showStatusCodeErrors} onChange={setShowStatusCodeErrors} />
 					<span style={{ color: 'white', fontSize: '14px' }}>
 						Status Message Exists
 					</span>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DomainMetrics.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
 import { useQueries } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Skeleton, Tooltip } from 'antd';
+import { Skeleton, Tooltip } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import { Typography } from '@signozhq/ui/typography';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -136,12 +137,11 @@ function DomainMetrics({
 							<Tooltip title={formattedDomainMetricsData.errorRate}>
 								{formattedDomainMetricsData.errorRate !== '-' ? (
 									<Progress
-										status="active"
 										percent={Number(
 											Number(formattedDomainMetricsData.errorRate).toFixed(2),
 										)}
 										strokeLinecap="butt"
-										size="small"
+										showInfo
 										strokeColor={((): string => {
 											const errorRatePercent = Number(
 												Number(formattedDomainMetricsData.errorRate).toFixed(2),

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointMetrics.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Skeleton, Tooltip } from 'antd';
+import { Skeleton, Tooltip } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	getDisplayValue,
@@ -80,10 +81,9 @@ function EndPointMetrics({
 							<Tooltip title={metricsData?.errorRate}>
 								{metricsData?.errorRate !== '-' ? (
 									<Progress
-										status="active"
 										percent={Number(Number(metricsData?.errorRate ?? 0).toFixed(2))}
 										strokeLinecap="butt"
-										size="small"
+										showInfo
 										strokeColor={((): string => {
 											const errorRatePercent = Number(
 												Number(metricsData?.errorRate ?? 0).toFixed(2),

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointsDropDown.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
-import { Select } from 'antd';
+import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import { getFormattedEndPointDropDownData } from 'container/ApiMonitoring/utils';
 import { SuccessResponse } from 'types/api';
 
@@ -22,40 +22,33 @@ function EndPointsDropDown({
 	selectedEndPointName,
 	setSelectedEndPointName,
 	endPointDropDownDataQuery,
-	parentContainerDiv,
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	parentContainerDiv: _parentContainerDiv,
 	dropdownStyle,
 }: EndPointsDropDownProps): JSX.Element {
 	const { data, isLoading, isFetching } = endPointDropDownDataQuery;
 
-	const handleChange = (value: string): void => {
-		setSelectedEndPointName(value);
+	const handleChange = (value: string | string[]): void => {
+		setSelectedEndPointName(value as string);
 	};
 
 	const formattedData = useMemo(
 		() =>
-			getFormattedEndPointDropDownData(data?.payload.data.result[0].table.rows),
+			getFormattedEndPointDropDownData(
+				data?.payload.data.result[0].table.rows,
+			) as ComboboxSimpleItem[],
 		[data?.payload.data.result],
 	);
 
 	return (
-		<Select
+		<ComboboxSimple
 			value={selectedEndPointName || undefined}
 			placeholder="Select endpoint"
 			loading={isLoading || isFetching}
-			style={{ width: '100%' }}
+			style={{ width: '100%', ...dropdownStyle }}
 			onChange={handleChange}
-			options={formattedData}
-			getPopupContainer={
-				parentContainerDiv
-					? (): HTMLElement =>
-							document.querySelector(parentContainerDiv) as HTMLElement
-					: (triggerNode): HTMLElement => triggerNode.parentNode as HTMLElement
-			}
-			dropdownStyle={dropdownStyle}
-			allowClear
-			onClear={(): void => {
-				setSelectedEndPointName('');
-			}}
+			items={formattedData}
+			virtualized
 		/>
 	);
 }

frontend/src/container/ApiMonitoring/utils.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, TableColumnType as ColumnType, Tag, Tooltip } from 'antd';
+import { TableColumnType as ColumnType, Tag, Tooltip } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBuilderV2/utils';
 import {
 	FiltersType,
@@ -257,10 +258,9 @@ export const columnsConfig: ColumnType<APIDomainsRowData>[] = [
 				errorRate === 'n/a' || errorRate === '-' ? 0 : errorRate;
 			return (
 				<Progress
-					status="active"
 					percent={Number((errorRateValue as number).toFixed(2))}
 					strokeLinecap="butt"
-					size="small"
+					showInfo
 					strokeColor={((): string => {
 						const errorRatePercent = Number((errorRateValue as number).toFixed(2));
 						if (errorRatePercent >= 90) {
@@ -1022,14 +1022,13 @@ export const getEndPointsColumnsConfig = (
 		className: `column`,
 		render: (errorRate: number | string): React.ReactNode => (
 			<Progress
-				status="active"
 				percent={Number(
 					(
 						(errorRate === 'n/a' || errorRate === '-' ? 0 : errorRate) as number
 					).toFixed(1),
 				)}
 				strokeLinecap="butt"
-				size="small"
+				showInfo
 				strokeColor={((): string => {
 					const errorRatePercent = Number((errorRate as number).toFixed(1));
 					if (errorRatePercent >= 90) {
@@ -2514,10 +2513,9 @@ export const dependentServicesColumns: ColumnType<DependentServicesData>[] = [
 		render: (errorPercentage: number | string): React.ReactNode =>
 			errorPercentage !== '-' ? (
 				<Progress
-					status="active"
 					percent={Number((errorPercentage as number).toFixed(2))}
 					strokeLinecap="butt"
-					size="small"
+					showInfo
 					strokeColor={((): string => {
 						const errorPercentagePercent = Number(
 							(errorPercentage as number).toFixed(2),
@@ -3022,14 +3020,13 @@ export const getAllEndpointsWidgetData = (
 		),
 		F1: (errorRate: any): ReactNode => (
 			<Progress
-				status="active"
 				percent={Number(
 					(
 						(errorRate === 'n/a' || errorRate === '-' ? 0 : errorRate) as number
 					).toFixed(2),
 				)}
 				strokeLinecap="butt"
-				size="small"
+				showInfo
 				strokeColor={((): string => {
 					const errorRatePercent = Number(
 						(

frontend/src/container/Controls/index.tsx

@@ -1,8 +1,8 @@
 import { memo, useMemo } from 'react';
 import { ChevronLeft, ChevronRight } from '@signozhq/icons';
-import { Button, Flex, Select } from 'antd';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Button, Flex } from 'antd';
 import { DEFAULT_PER_PAGE_OPTIONS, Pagination } from 'hooks/queryPagination';
-import { popupContainer } from 'utils/selectPopupContainer';
 
 import { defaultSelectStyle } from './config';
 import { Container } from './styles';
@@ -59,20 +59,18 @@ function Controls({
 			</Button>
 
 			{showSizeChanger && (
-				<Select<Pagination['limit']>
+				<SelectSimple
 					style={defaultSelectStyle}
-					loading={isLoading}
-					value={countPerPage}
-					onChange={handleCountItemsPerPageChange}
-					getPopupContainer={popupContainer}
-				>
-					{perPageOptions.map((count) => (
-						<Select.Option
-							key={count}
-							value={count}
-						>{`${count} / page`}</Select.Option>
-					))}
-				</Select>
+					disabled={isLoading}
+					value={String(countPerPage)}
+					onChange={(value): void =>
+						handleCountItemsPerPageChange(Number(value) as Pagination['limit'])
+					}
+					items={perPageOptions.map((count) => ({
+						value: String(count),
+						label: `${count} / page`,
+					}))}
+				/>
 			)}
 		</Container>
 	);

frontend/src/container/CreateAlertRule/CreateAlertRule.styles.scss

@@ -61,10 +61,6 @@
 				margin-left: 16px;
 			}
 
-			&:not(:first-of-type) {
-				margin-left: 24px !important;
-			}
-
 			[aria-selected='false'] {
 				.periscope-tab {
 					color: var(--l2-foreground);

frontend/src/container/CreateAlertV2/AlertCondition/AlertThreshold.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
-import { Button, Select, Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
+import { SelectSimple } from '@signozhq/ui/select';
 import { Typography } from '@signozhq/ui/typography';
 import classNames from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -231,15 +232,18 @@ function AlertThreshold({
 					<Typography.Text className="sentence-text">
 						Send a notification when
 					</Typography.Text>
-					<Select
+					<SelectSimple
 						value={thresholdState.selectedQuery}
-						onChange={handleSelectedQueryChange}
+						onChange={(value): void => handleSelectedQueryChange(value as string)}
 						style={{ width: 80 }}
-						options={queryNames}
+						items={queryNames.map((q) => ({
+							value: String(q.value),
+							label: q.label as React.ReactNode,
+						}))}
 						data-testid="alert-threshold-query-select"
 					/>
 					<Typography.Text className="sentence-text">is</Typography.Text>
-					<Select
+					<SelectSimple
 						value={
 							(normalizeOperator(thresholdState.operator) ??
 								thresholdState.operator) as AlertThresholdOperator
@@ -247,17 +251,17 @@ function AlertThreshold({
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_OPERATOR',
-								payload: value,
+								payload: value as AlertThresholdOperator,
 							});
 						}}
 						style={{ width: 180 }}
-						options={THRESHOLD_OPERATOR_OPTIONS}
+						items={THRESHOLD_OPERATOR_OPTIONS}
 						data-testid="alert-threshold-operator-select"
 					/>
 					<Typography.Text className="sentence-text">
 						the threshold(s)
 					</Typography.Text>
-					<Select
+					<SelectSimple
 						value={
 							(normalizeMatchType(thresholdState.matchType) ??
 								thresholdState.matchType) as AlertThresholdMatchType
@@ -265,11 +269,11 @@ function AlertThreshold({
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_MATCH_TYPE',
-								payload: value,
+								payload: value as AlertThresholdMatchType,
 							});
 						}}
 						style={{ width: 180 }}
-						options={matchTypeOptionsWithTooltips}
+						items={matchTypeOptionsWithTooltips}
 						data-testid="alert-threshold-match-type-select"
 					/>
 					<Typography.Text className="sentence-text">

frontend/src/container/CreateAlertV2/AlertCondition/AnomalyThreshold.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
-import { Select } from 'antd';
+import { ComboboxSimple } from '@signozhq/ui/combobox';
+import { SelectSimple } from '@signozhq/ui/select';
 import { Typography } from '@signozhq/ui/typography';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useAppContext } from 'providers/App/App';
 
 import { useCreateAlertState } from '../context';
 import {
@@ -18,19 +18,13 @@ import {
 } from '../context/types';
 import { normalizeMatchType, normalizeOperator } from '../utils';
 import { AnomalyAndThresholdProps } from './types';
-import {
-	getQueryNames,
-	NotificationChannelsNotFoundContent,
-	RoutingPolicyBanner,
-} from './utils';
+import { getQueryNames, RoutingPolicyBanner } from './utils';
 
 function AnomalyThreshold({
 	channels,
 	isLoadingChannels,
 	isErrorChannels,
-	refreshChannels,
 }: AnomalyAndThresholdProps): JSX.Element {
-	const { user } = useAppContext();
 	const {
 		thresholdState,
 		setThresholdState,
@@ -42,13 +36,14 @@ function AnomalyThreshold({
 
 	const queryNames = getQueryNames(currentQuery);
 
-	const deviationOptions = useMemo(() => {
-		const options = [];
-		for (let i = 1; i <= 7; i++) {
-			options.push({ label: i.toString(), value: i });
-		}
-		return options;
-	}, []);
+	const deviationOptions = useMemo(
+		() =>
+			Array.from({ length: 7 }, (_, i) => ({
+				label: (i + 1).toString(),
+				value: (i + 1).toString(),
+			})),
+		[],
+	);
 
 	const updateThreshold = (
 		id: string,
@@ -71,16 +66,16 @@ function AnomalyThreshold({
 					<Typography.Text data-testid="notification-text" className="sentence-text">
 						Send notification when the observed value for
 					</Typography.Text>
-					<Select
+					<SelectSimple
 						value={thresholdState.selectedQuery}
-						data-testid="query-select"
+						testId="query-select"
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_SELECTED_QUERY',
-								payload: value,
+								payload: value as string,
 							});
 						}}
-						options={queryNames}
+						items={queryNames}
 					/>
 					<Typography.Text
 						data-testid="evaluation-window-text"
@@ -88,16 +83,16 @@ function AnomalyThreshold({
 					>
 						during the last
 					</Typography.Text>
-					<Select
+					<SelectSimple
 						value={thresholdState.evaluationWindow}
-						data-testid="evaluation-window-select"
+						testId="evaluation-window-select"
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_EVALUATION_WINDOW',
-								payload: value,
+								payload: value as string,
 							});
 						}}
-						options={ANOMALY_TIME_DURATION_OPTIONS}
+						items={ANOMALY_TIME_DURATION_OPTIONS}
 					/>
 				</div>
 				<div className="alert-condition-sentence">
@@ -105,34 +100,34 @@ function AnomalyThreshold({
 					<Typography.Text data-testid="threshold-text" className="sentence-text">
 						is
 					</Typography.Text>
-					<Select
-						value={thresholdState.thresholds[0].thresholdValue}
-						data-testid="threshold-value-select"
+					<SelectSimple
+						value={thresholdState.thresholds[0].thresholdValue?.toString()}
+						testId="threshold-value-select"
 						onChange={(value): void => {
 							updateThreshold(
 								thresholdState.thresholds[0].id,
 								'thresholdValue',
-								value.toString(),
+								(value as string).toString(),
 							);
 						}}
-						options={deviationOptions}
+						items={deviationOptions}
 					/>
 					<Typography.Text data-testid="deviations-text" className="sentence-text">
 						deviations
 					</Typography.Text>
-					<Select
+					<SelectSimple
 						value={
 							(normalizeOperator(thresholdState.operator) ??
 								thresholdState.operator) as AlertThresholdOperator
 						}
-						data-testid="operator-select"
+						testId="operator-select"
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_OPERATOR',
-								payload: value,
+								payload: value as AlertThresholdOperator,
 							});
 						}}
-						options={ANOMALY_THRESHOLD_OPERATOR_OPTIONS}
+						items={ANOMALY_THRESHOLD_OPERATOR_OPTIONS}
 					/>
 					<Typography.Text
 						data-testid="predicted-data-text"
@@ -140,19 +135,19 @@ function AnomalyThreshold({
 					>
 						the predicted data
 					</Typography.Text>
-					<Select
+					<SelectSimple
 						value={
 							(normalizeMatchType(thresholdState.matchType) ??
 								thresholdState.matchType) as AlertThresholdMatchType
 						}
-						data-testid="match-type-select"
+						testId="match-type-select"
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_MATCH_TYPE',
-								payload: value,
+								payload: value as AlertThresholdMatchType,
 							});
 						}}
-						options={ANOMALY_THRESHOLD_MATCH_TYPE_OPTIONS}
+						items={ANOMALY_THRESHOLD_MATCH_TYPE_OPTIONS}
 					/>
 				</div>
 				{/* Sentence 3 */}
@@ -160,16 +155,16 @@ function AnomalyThreshold({
 					<Typography.Text data-testid="using-the-text" className="sentence-text">
 						using the
 					</Typography.Text>
-					<Select
+					<SelectSimple
 						value={thresholdState.algorithm}
-						data-testid="algorithm-select"
+						testId="algorithm-select"
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_ALGORITHM',
-								payload: value,
+								payload: value as string,
 							});
 						}}
-						options={ANOMALY_ALGORITHM_OPTIONS}
+						items={ANOMALY_ALGORITHM_OPTIONS}
 					/>
 					<Typography.Text
 						data-testid="algorithm-with-text"
@@ -177,16 +172,16 @@ function AnomalyThreshold({
 					>
 						algorithm with
 					</Typography.Text>
-					<Select
+					<SelectSimple
 						value={thresholdState.seasonality}
-						data-testid="seasonality-select"
+						testId="seasonality-select"
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_SEASONALITY',
-								payload: value,
+								payload: value as string,
 							});
 						}}
-						options={ANOMALY_SEASONALITY_OPTIONS}
+						items={ANOMALY_SEASONALITY_OPTIONS}
 					/>
 					{notificationSettings.routingPolicies ? (
 						<>
@@ -196,35 +191,25 @@ function AnomalyThreshold({
 							>
 								seasonality to
 							</Typography.Text>
-							<Select
+							<ComboboxSimple
 								value={thresholdState.thresholds[0].channels}
 								onChange={(value): void =>
-									updateThreshold(thresholdState.thresholds[0].id, 'channels', value)
+									updateThreshold(
+										thresholdState.thresholds[0].id,
+										'channels',
+										value as string[],
+									)
 								}
 								style={{ width: 350 }}
-								options={channels.map((channel) => ({
+								items={channels.map((channel) => ({
 									value: channel.id,
 									label: channel.name,
 								}))}
-								mode="multiple"
+								multiple
 								placeholder="Select notification channels"
-								showSearch
-								maxTagCount={2}
-								maxTagPlaceholder={(omittedValues): string =>
-									`+${omittedValues.length} more`
-								}
-								maxTagTextLength={10}
-								filterOption={(input, option): boolean =>
-									option?.label?.toLowerCase().includes(input.toLowerCase()) || false
-								}
-								status={isErrorChannels ? 'error' : undefined}
-								disabled={isLoadingChannels}
-								notFoundContent={
-									<NotificationChannelsNotFoundContent
-										user={user}
-										refreshChannels={refreshChannels}
-									/>
-								}
+								loading={isLoadingChannels}
+								className={isErrorChannels ? 'error' : undefined}
+								emptyPlaceholder="No channels found"
 							/>
 						</>
 					) : (

frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx

@@ -1,14 +1,14 @@
 import { useMemo, useState } from 'react';
-import { Button, Input, Select, Tooltip } from 'antd';
+import { Button, Input, Tooltip } from 'antd';
+import { ComboboxSimple } from '@signozhq/ui/combobox';
+import { SelectSimple } from '@signozhq/ui/select';
 import { Typography } from '@signozhq/ui/typography';
 import { CircleX, Trash } from '@signozhq/icons';
-import { useAppContext } from 'providers/App/App';
 
 import { useCreateAlertState } from '../context';
 import { AlertThresholdOperator } from '../context/types';
 import { normalizeOperator } from '../utils';
 import { ThresholdItemProps } from './types';
-import { NotificationChannelsNotFoundContent } from './utils';
 
 function ThresholdItem({
 	threshold,
@@ -18,36 +18,38 @@ function ThresholdItem({
 	channels,
 	units,
 	isErrorChannels,
-	refreshChannels,
 	isLoadingChannels,
 }: ThresholdItemProps): JSX.Element {
-	const { user } = useAppContext();
 	const { thresholdState, notificationSettings } = useCreateAlertState();
 	const [showRecoveryThreshold, setShowRecoveryThreshold] = useState(false);
 
 	const yAxisUnitSelect = useMemo(() => {
 		let component = (
-			<Select
+			<SelectSimple
 				placeholder="Unit"
-				value={threshold.unit ? threshold.unit : null}
-				onChange={(value): void => updateThreshold(threshold.id, 'unit', value)}
+				value={threshold.unit ? threshold.unit : undefined}
+				onChange={(value): void =>
+					updateThreshold(threshold.id, 'unit', value as string)
+				}
 				style={{ width: 150 }}
-				options={units}
+				items={units}
 				disabled={units.length === 0}
-				data-testid="threshold-unit-select"
+				testId="threshold-unit-select"
 			/>
 		);
 		if (units.length === 0) {
 			component = (
 				<Tooltip trigger="hover" title="No compatible units available">
-					<Select
+					<SelectSimple
 						placeholder="Unit"
-						value={threshold.unit ? threshold.unit : null}
-						onChange={(value): void => updateThreshold(threshold.id, 'unit', value)}
+						value={threshold.unit ? threshold.unit : undefined}
+						onChange={(value): void =>
+							updateThreshold(threshold.id, 'unit', value as string)
+						}
 						style={{ width: 150 }}
-						options={units}
+						items={units}
 						disabled={units.length === 0}
-						data-testid="threshold-unit-select"
+						testId="threshold-unit-select"
 					/>
 				</Tooltip>
 			);
@@ -117,37 +119,22 @@ function ThresholdItem({
 					{!notificationSettings.routingPolicies && (
 						<>
 							<Typography.Text className="sentence-text">send to</Typography.Text>
-							<Select
+							<ComboboxSimple
 								value={threshold.channels}
 								onChange={(value): void =>
-									updateThreshold(threshold.id, 'channels', value)
+									updateThreshold(threshold.id, 'channels', value as string[])
 								}
-								data-testid="threshold-notification-channel-select"
+								testId="threshold-notification-channel-select"
 								style={{ width: 350 }}
-								options={channels.map((channel) => ({
+								items={channels.map((channel) => ({
 									value: channel.name,
 									label: channel.name,
-									'data-testid': `threshold-notification-channel-option-${threshold.label}`,
 								}))}
-								mode="multiple"
+								multiple
 								placeholder="Select notification channels"
-								showSearch
-								maxTagCount={2}
-								maxTagPlaceholder={(omittedValues): string =>
-									`+${omittedValues.length} more`
-								}
-								maxTagTextLength={10}
-								filterOption={(input, option): boolean =>
-									option?.label?.toLowerCase().includes(input.toLowerCase()) || false
-								}
-								status={isErrorChannels ? 'error' : undefined}
-								disabled={isLoadingChannels}
-								notFoundContent={
-									<NotificationChannelsNotFoundContent
-										user={user}
-										refreshChannels={refreshChannels}
-									/>
-								}
+								loading={isLoadingChannels}
+								className={isErrorChannels ? 'error' : undefined}
+								emptyPlaceholder="No channels found"
 							/>
 						</>
 					)}

frontend/src/container/CreateAlertV2/AlertCondition/__tests__/ThresholdItem.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import type { DefaultOptionType } from 'antd/es/select';
+import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
 import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
 import * as appHooks from 'providers/App/App';
@@ -66,7 +66,7 @@ const mockChannels: Channels[] = [
 	{ id: TEST_CONSTANTS.CHANNEL_3, name: 'PagerDuty Channel' } as any,
 ];
 
-const mockUnits: DefaultOptionType[] = [
+const mockUnits: ComboboxSimpleItem[] = [
 	{ label: 'Bytes', value: 'bytes' },
 	{ label: 'KB', value: 'kb' },
 	{ label: 'MB', value: 'mb' },

frontend/src/container/CreateAlertV2/AlertCondition/styles.scss

@@ -11,7 +11,7 @@
 		.alert-condition-tabs {
 			display: flex;
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--l2-border);
 			background: var(--l2-background);
 			flex-direction: row;
 			border-bottom: none;
@@ -26,19 +26,19 @@
 				padding: 9px;
 				box-shadow: none;
 				border-radius: 0px;
-				border-left: 0.5px solid var(--l1-border);
-				border-bottom: 0.5px solid var(--l1-border);
+				border-left: 0.5px solid var(--l2-border);
+				border-bottom: 0.5px solid var(--l2-border);
 				width: 120px;
 				height: 36px;
 
 				gap: 8px;
 
 				&.active-tab {
-					background-color: var(--l1-background);
+					background-color: var(--l2-background);
 					border-bottom: none;
 
 					&:hover {
-						background-color: var(--l1-background) !important;
+						background-color: var(--l2-background-hover) !important;
 					}
 				}
 
@@ -54,7 +54,7 @@
 				&:hover {
 					background-color: transparent !important;
 					border-left: 1px solid transparent !important;
-					color: var(--l1-foreground);
+					color: var(--l3-foreground);
 				}
 			}
 		}
@@ -65,10 +65,16 @@
 .anomaly-threshold-container {
 	padding: 24px;
 	padding-right: 72px;
-	background-color: var(--l1-background);
-	border: 1px solid var(--l1-border);
+	background-color: var(--l2-background);
+	border: 1px solid var(--l2-border);
 	width: 100%;
 
+	--select-trigger-background-color: var(--l3-background);
+	--select-trigger-border-color: var(--l3-border);
+
+	--combobox-trigger-background-color: var(--l3-background);
+	--combobox-trigger-border-color: var(--l3-border);
+
 	.alert-condition-sentences {
 		display: flex;
 		flex-direction: column;
@@ -88,34 +94,6 @@
 				align-items: center;
 				gap: 8px;
 			}
-
-			.ant-select {
-				width: 240px;
-
-				.ant-select-selector {
-					background-color: var(--l2-background);
-					border: 1px solid var(--l1-border);
-					color: var(--muted-foreground);
-					font-family: 'Space Mono';
-
-					&:hover {
-						border-color: var(--l1-border);
-					}
-
-					&:focus {
-						border-color: var(--l1-border);
-						box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
-					}
-				}
-
-				.ant-select-selection-item {
-					color: var(--l1-foreground);
-				}
-
-				.ant-select-arrow {
-					color: var(--muted-foreground);
-				}
-			}
 		}
 	}
 
@@ -151,9 +129,9 @@
 					flex-wrap: wrap;
 
 					.ant-input {
-						background-color: var(--card);
-						border: 1px solid var(--l1-border);
-						color: var(--l1-foreground);
+						background-color: var(--l3-background);
+						border: 1px solid var(--l3-border);
+						color: var(--l2-foreground);
 						height: 32px;
 
 						&::placeholder {
@@ -161,28 +139,28 @@
 						}
 
 						&:hover {
-							border-color: var(--l1-border);
+							border-color: var(--l3-border);
 						}
 
 						&:focus {
-							border-color: var(--l1-border);
+							border-color: var(--l3-border);
 							box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
 						}
 					}
 
 					.ant-select {
 						.ant-select-selector {
-							background-color: var(--card);
-							border: 1px solid var(--l1-border);
-							color: var(--l1-foreground);
+							background-color: var(--l3-background);
+							border: 1px solid var(--l3-border);
+							color: var(--l2-foreground);
 							height: 32px;
 
 							&:hover {
-								border-color: var(--l1-border);
+								border-color: var(--l2-border);
 							}
 
 							&:focus {
-								border-color: var(--l1-border);
+								border-color: var(--l2-border);
 								box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
 							}
 
@@ -192,21 +170,23 @@
 						}
 
 						.ant-select-selection-item {
-							color: var(--l1-foreground);
+							color: var(--l2-foreground);
 						}
 
 						.ant-select-arrow {
-							color: var(--muted-foreground);
+							color: var(--l2-foreground);
 						}
 					}
 
 					.icon-btn {
-						color: var(--muted-foreground);
-						border: 1px solid var(--l1-border);
+						color: var(--l2-foreground);
+						border: 1px solid var(--l3-border);
+						background-color: var(--l3-background);
 						border-radius: 4px;
 						display: flex;
 						align-items: center;
 						justify-content: center;
+						box-shadow: none;
 					}
 				}
 			}
@@ -226,8 +206,8 @@
 					pointer-events: none;
 					cursor: default;
 					color: var(--muted-foreground);
-					background-color: var(--card) !important;
-					border: 1px solid var(--l1-border);
+					background-color: var(--l3-background) !important;
+					border: 1px solid var(--l3-border);
 					border-radius: 4px;
 					display: flex;
 					align-items: center;
@@ -235,9 +215,9 @@
 				}
 
 				.ant-input {
-					background-color: var(--card);
-					border: 1px solid var(--l1-border);
-					color: var(--l1-foreground);
+					background-color: var(--l3-background);
+					border: 1px solid var(--l3-border);
+					color: var(--l2-foreground);
 					height: 32px;
 
 					&::placeholder {
@@ -245,11 +225,11 @@
 					}
 
 					&:hover {
-						border-color: var(--l1-border);
+						border-color: var(--l3-border);
 					}
 
 					&:focus {
-						border-color: var(--l1-border);
+						border-color: var(--l2-border);
 						box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
 					}
 				}
@@ -258,7 +238,7 @@
 
 		.add-threshold-btn {
 			margin-top: 8px;
-			border: 1px dashed var(--l1-border);
+			border: 1px dashed var(--l3-border);
 			color: var(--l2-foreground);
 			background-color: transparent;
 			border-radius: 4px;
@@ -267,10 +247,11 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
+			box-shadow: none;
 
 			&:hover {
-				border-color: var(--l1-border);
-				color: var(--l1-foreground);
+				border-color: var(--l2-border);
+				color: var(--l3-foreground);
 			}
 
 			.anticon {
@@ -339,8 +320,9 @@
 		min-width: 240px;
 		width: auto;
 		justify-content: space-between;
-		background-color: var(--l2-background);
-		border: 1px solid var(--l1-border);
+		background-color: var(--l3-background);
+		border: 1px solid var(--l3-border);
+		box-shadow: none;
 
 		.evaluate-alert-conditions-button-left {
 			color: var(--l2-foreground);
@@ -358,7 +340,7 @@
 			.evaluate-alert-conditions-button-right-text {
 				font-size: 12px;
 				font-weight: 500;
-				background-color: var(--l1-border);
+				background-color: var(--l3-border);
 				padding: 1px 4px;
 			}
 		}

frontend/src/container/CreateAlertV2/AlertCondition/types.ts

@@ -1,4 +1,4 @@
-import type { DefaultOptionType } from 'antd/es/select';
+import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import { Channels } from 'types/api/channels/getAll';
 
 import {
@@ -23,7 +23,7 @@ export interface ThresholdItemProps {
 	showRemoveButton: boolean;
 	channels: Channels[];
 	isLoadingChannels: boolean;
-	units: DefaultOptionType[];
+	units: ComboboxSimpleItem[];
 	isErrorChannels: boolean;
 	refreshChannels: () => void;
 }

frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx

@@ -1,6 +1,7 @@
-import { Button, Flex, SelectProps, Switch } from 'antd';
+import { Button, Flex } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
+import { ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import { Typography } from '@signozhq/ui/typography';
-import type { BaseOptionType, DefaultOptionType } from 'antd/es/select';
 import { getInvolvedQueriesInTraceOperator } from 'components/QueryBuilderV2/QueryV2/TraceOperator/utils/utils';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { getYAxisCategories } from 'components/YAxisUnitSelector/utils';
@@ -21,11 +22,11 @@ import { openInNewTab } from 'utils/navigation';
 import { ROUTING_POLICIES_ROUTE } from './constants';
 import { RoutingPolicyBannerProps } from './types';
 
-export function getQueryNames(currentQuery: Query): BaseOptionType[] {
+export function getQueryNames(currentQuery: Query): ComboboxSimpleItem[] {
 	const involvedQueriesInTraceOperator = getInvolvedQueriesInTraceOperator(
 		currentQuery.builder.queryTraceOperator,
 	);
-	const queryConfig: Record<EQueryType, () => SelectProps['options']> = {
+	const queryConfig: Record<EQueryType, () => ComboboxSimpleItem[]> = {
 		[EQueryType.QUERY_BUILDER]: () => [
 			...(getSelectedQueryOptions(currentQuery.builder.queryData)?.filter(
 				(option) =>
@@ -51,7 +52,7 @@ export function getCategoryByOptionId(id: string): string | undefined {
 
 export function getCategorySelectOptionByName(
 	name: string | undefined,
-): DefaultOptionType[] {
+): ComboboxSimpleItem[] {
 	if (!name) {
 		return [];
 	}
@@ -67,7 +68,6 @@ export function getCategorySelectOptionByName(
 			?.units.map((unit) => ({
 				label: unit.name,
 				value: unit.id,
-				'data-testid': `threshold-unit-select-option-${unit.id}`,
 			})) || []
 	);
 }
@@ -419,8 +419,8 @@ export function RoutingPolicyBanner({
 			</Typography.Text>
 			<div className="routing-policies-info-banner-right">
 				<Switch
-					checked={notificationSettings.routingPolicies}
-					data-testid="routing-policies-switch"
+					value={notificationSettings.routingPolicies}
+					testId="routing-policies-switch"
 					onChange={(value): void => {
 						setNotificationSettings({
 							type: 'SET_ROUTING_POLICIES',

frontend/src/container/CreateAlertV2/CreateAlertHeader/LabelsInput.tsx

@@ -3,6 +3,7 @@ import { X } from '@signozhq/icons';
 import { useNotifications } from 'hooks/useNotifications';
 
 import { LabelInputState, LabelsInputProps } from './types';
+import { Button } from '@signozhq/ui/button';
 
 function LabelsInput({
 	labels,
@@ -144,14 +145,16 @@ function LabelsInput({
 			)}
 
 			{!isAdding ? (
-				<button
+				<Button
 					className="labels-input__add-button"
 					type="button"
+					variant="outlined"
+					color="secondary"
 					onClick={handleAddLabelsClick}
 					data-testid="alert-add-label-button"
 				>
 					+ Add labels
-				</button>
+				</Button>
 			) : (
 				<div className="labels-input__input-container">
 					<input

frontend/src/container/CreateAlertV2/CreateAlertHeader/styles.scss

@@ -39,9 +39,14 @@
 
 	&__input.title {
 		background-color: transparent;
-		color: var(--l1-foreground);
+		background: var(--l2-background);
+		color: var(--l2-foreground);
 		width: 100%;
 		min-width: 300px;
+
+		&:hover {
+			background: var(--l2-background);
+		}
 	}
 
 	&__input.description {
@@ -49,15 +54,6 @@
 		background-color: transparent;
 		color: var(--l2-foreground);
 	}
-
-	.ant-btn {
-		display: flex;
-		gap: 4px;
-		align-items: center;
-		color: var(--l1-foreground);
-		border: 1px solid var(--l1-border);
-		margin-right: 16px;
-	}
 }
 
 .labels-input {
@@ -66,19 +62,7 @@
 	gap: 8px;
 
 	&__add-button {
-		width: fit-content;
-		font-size: 13px;
-		color: var(--l2-foreground);
-		border: 1px solid var(--l1-border);
-		background-color: transparent;
-		cursor: pointer;
-		padding: 4px 8px;
-		border-radius: 4px;
-
-		&:hover {
-			border-color: var(--l1-border);
-			color: var(--l1-foreground);
-		}
+		width: 80px;
 	}
 
 	&__existing-labels {
@@ -121,6 +105,7 @@
 		align-items: center;
 		background-color: transparent;
 		border: none;
+		border: 1px solid var(--l2-border);
 	}
 
 	&__input {

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/AdvancedOptionItem.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { Switch, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import { Info } from '@signozhq/icons';
 
@@ -49,7 +50,7 @@ function AdvancedOptionItem({
 				>
 					{input}
 				</div>
-				<Switch onChange={handleOnToggle} checked={showInput} />
+				<Switch onChange={handleOnToggle} value={showInput} />
 			</div>
 		</div>
 	);

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/styles.scss

@@ -93,16 +93,16 @@
 			gap: 8px;
 
 			.ant-input {
-				background-color: var(--l2-background);
-				border: 1px solid var(--l1-border);
-				color: var(--l1-foreground);
+				background-color: var(--l3-background);
+				border: 1px solid var(--l3-border);
+				color: var(--l2-foreground);
 
 				&:hover {
-					border-color: var(--l1-border);
+					border-color: var(--l3-border);
 				}
 
 				&:focus {
-					border-color: var(--l1-border);
+					border-color: var(--l3-border);
 					box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
 				}
 			}

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadence.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { Input, Select, Tooltip } from 'antd';
+import { Input, Tooltip } from 'antd';
+import { SelectSimple } from '@signozhq/ui/select';
 import { Typography } from '@signozhq/ui/typography';
 import { Info } from '@signozhq/icons';
 
@@ -79,8 +80,8 @@ function EvaluationCadence(): JSX.Element {
 								}
 								data-testid="evaluation-cadence-duration-input"
 							/>
-							<Select
-								options={ADVANCED_OPTIONS_TIME_UNIT_OPTIONS}
+							<SelectSimple
+								items={ADVANCED_OPTIONS_TIME_UNIT_OPTIONS}
 								placeholder="Select time unit"
 								style={{ width: 120 }}
 								value={advancedOptions.evaluationCadence.default.timeUnit}
@@ -91,7 +92,7 @@ function EvaluationCadence(): JSX.Element {
 											...advancedOptions.evaluationCadence,
 											default: {
 												...advancedOptions.evaluationCadence.default,
-												timeUnit: value,
+												timeUnit: value as string,
 											},
 										},
 									})

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadenceDetails.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Button, DatePicker, Input, Select } from 'antd';
+import { Button, DatePicker, Input } from 'antd';
+import { ComboboxSimple } from '@signozhq/ui/combobox';
 import { Typography } from '@signozhq/ui/typography';
 import classNames from 'classnames';
 import { useCreateAlertState } from 'container/CreateAlertV2/context';
@@ -42,10 +43,6 @@ function EvaluationCadenceDetails({
 		},
 	});
 
-	const [searchTimezoneString, setSearchTimezoneString] = useState('');
-	const [occurenceSearchString, setOccurenceSearchString] = useState('');
-	const [repeatEverySearchString, setRepeatEverySearchString] = useState('');
-
 	const tabs = [
 		{
 			label: 'Editor',
@@ -93,45 +90,39 @@ function EvaluationCadenceDetails({
 		<div className="editor-view" data-testid="editor-view">
 			<div className="select-group">
 				<Typography.Text>REPEAT EVERY</Typography.Text>
-				<Select
-					options={EVALUATION_CADENCE_REPEAT_EVERY_OPTIONS}
-					value={evaluationCadence.custom.repeatEvery || null}
+				<ComboboxSimple
+					items={EVALUATION_CADENCE_REPEAT_EVERY_OPTIONS}
+					value={evaluationCadence.custom.repeatEvery || undefined}
 					onChange={(value): void =>
 						setEvaluationCadence({
 							...evaluationCadence,
 							custom: {
 								...evaluationCadence.custom,
-								repeatEvery: value,
+								repeatEvery: value as string,
 								occurence: [],
 							},
 						})
 					}
 					placeholder="Select repeat every"
-					showSearch
-					searchValue={repeatEverySearchString}
-					onSearch={setRepeatEverySearchString}
 				/>
 			</div>
 			{evaluationCadence.custom.repeatEvery !== 'day' && (
 				<div className="select-group">
 					<Typography.Text>ON DAY(S)</Typography.Text>
-					<Select
-						options={occurenceOptions}
-						value={evaluationCadence.custom.occurence || null}
-						mode="multiple"
+					<ComboboxSimple
+						items={occurenceOptions}
+						value={evaluationCadence.custom.occurence || []}
+						multiple
 						onChange={(value): void =>
 							setEvaluationCadence({
 								...evaluationCadence,
 								custom: {
 									...evaluationCadence.custom,
-									occurence: value,
+									occurence: value as string[],
 								},
 							})
 						}
 						placeholder="Select day(s)"
-						showSearch
-						searchValue={occurenceSearchString}
-						onSearch={setOccurenceSearchString}
 					/>
 				</div>
 			)}
@@ -152,22 +143,19 @@ function EvaluationCadenceDetails({
 			</div>
 			<div className="select-group">
 				<Typography.Text>TIMEZONE</Typography.Text>
-				<Select
-					options={TIMEZONE_DATA}
-					value={evaluationCadence.custom.timezone || null}
+				<ComboboxSimple
+					items={TIMEZONE_DATA}
+					value={evaluationCadence.custom.timezone || undefined}
 					onChange={(value): void =>
 						setEvaluationCadence({
 							...evaluationCadence,
 							custom: {
 								...evaluationCadence.custom,
-								timezone: value,
+								timezone: value as string,
 							},
 						})
 					}
 					placeholder="Select timezone"
-					onSearch={setSearchTimezoneString}
-					searchValue={searchTimezoneString}
-					showSearch
 				/>
 			</div>
 		</div>

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/styles.scss

@@ -1,5 +1,9 @@
 .evaluation-cadence-container {
 	border-bottom: 1px solid var(--l1-border);
+
+	--select-trigger-background-color: var(--l3-background);
+	--select-trigger-border-color: var(--l3-border);
+
 	.evaluation-cadence-item {
 		border-bottom: none !important;
 	}
@@ -157,24 +161,6 @@
 						font-weight: 500;
 					}
 
-					.ant-select {
-						border: 1px solid var(--l1-border);
-
-						.ant-select-selector {
-							background-color: var(--l2-background);
-							border: 1px solid var(--l1-border);
-							color: var(--l1-foreground);
-
-							&:hover {
-								border-color: var(--l1-border);
-							}
-
-							&:focus {
-								border-color: var(--l1-border);
-							}
-						}
-					}
-
 					.ant-picker {
 						background-color: var(--l2-background);
 						border: 1px solid var(--l1-border);

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Input, Select } from 'antd';
+import { Input } from 'antd';
+import { SelectSimple } from '@signozhq/ui/select';
 import { Typography } from '@signozhq/ui/typography';
 
 import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';
@@ -19,7 +20,7 @@ function EvaluationWindowDetails({
 	const currentHourOptions = useMemo(() => {
 		const options = [];
 		for (let i = 0; i < 60; i++) {
-			options.push({ label: i.toString(), value: i });
+			options.push({ label: i.toString(), value: i.toString() });
 		}
 		return options;
 	}, []);
@@ -27,7 +28,7 @@ function EvaluationWindowDetails({
 	const currentMonthOptions = useMemo(() => {
 		const options = [];
 		for (let i = 1; i <= 31; i++) {
-			options.push({ label: i.toString(), value: i });
+			options.push({ label: i.toString(), value: i.toString() });
 		}
 		return options;
 	}, []);
@@ -123,10 +124,10 @@ function EvaluationWindowDetails({
 				<Typography.Text>{displayText}</Typography.Text>
 				<div className="select-group">
 					<Typography.Text>STARTING AT MINUTE</Typography.Text>
-					<Select
-						options={currentHourOptions}
-						value={evaluationWindow.startingAt.number || null}
-						onChange={handleNumberChange}
+					<SelectSimple
+						items={currentHourOptions}
+						value={evaluationWindow.startingAt.number || undefined}
+						onChange={(value): void => handleNumberChange(value as string)}
 						placeholder="Select starting at"
 						data-testid="evaluation-window-details-starting-at-select"
 					/>
@@ -151,10 +152,10 @@ function EvaluationWindowDetails({
 				</div>
 				<div className="select-group">
 					<Typography.Text>SELECT TIMEZONE</Typography.Text>
-					<Select
-						options={TIMEZONE_DATA}
-						value={evaluationWindow.startingAt.timezone || null}
-						onChange={handleTimezoneChange}
+					<SelectSimple
+						items={TIMEZONE_DATA}
+						value={evaluationWindow.startingAt.timezone || undefined}
+						onChange={(value): void => handleTimezoneChange(value as string)}
 						placeholder="Select timezone"
 						data-testid="evaluation-window-details-timezone-select"
 					/>
@@ -172,10 +173,10 @@ function EvaluationWindowDetails({
 				<Typography.Text>{displayText}</Typography.Text>
 				<div className="select-group">
 					<Typography.Text>STARTING ON DAY</Typography.Text>
-					<Select
-						options={currentMonthOptions}
-						value={evaluationWindow.startingAt.number || null}
-						onChange={handleNumberChange}
+					<SelectSimple
+						items={currentMonthOptions}
+						value={evaluationWindow.startingAt.number || undefined}
+						onChange={(value): void => handleNumberChange(value as string)}
 						placeholder="Select starting at"
 						data-testid="evaluation-window-details-starting-at-select"
 					/>
@@ -189,10 +190,10 @@ function EvaluationWindowDetails({
 				</div>
 				<div className="select-group">
 					<Typography.Text>SELECT TIMEZONE</Typography.Text>
-					<Select
-						options={TIMEZONE_DATA}
-						value={evaluationWindow.startingAt.timezone || null}
-						onChange={handleTimezoneChange}
+					<SelectSimple
+						items={TIMEZONE_DATA}
+						value={evaluationWindow.startingAt.timezone || undefined}
+						onChange={(value): void => handleTimezoneChange(value as string)}
 						placeholder="Select timezone"
 						data-testid="evaluation-window-details-timezone-select"
 					/>
@@ -221,10 +222,10 @@ function EvaluationWindowDetails({
 			</div>
 			<div className="select-group time-select-group">
 				<Typography.Text>UNIT</Typography.Text>
-				<Select
-					options={ADVANCED_OPTIONS_TIME_UNIT_OPTIONS}
-					value={evaluationWindow.startingAt.unit || null}
-					onChange={handleUnitChange}
+				<SelectSimple
+					items={ADVANCED_OPTIONS_TIME_UNIT_OPTIONS}
+					value={evaluationWindow.startingAt.unit || undefined}
+					onChange={(value): void => handleUnitChange(value as string)}
 					placeholder="Select unit"
 					data-testid="evaluation-window-details-custom-rolling-window-unit-select"
 				/>

frontend/src/container/CreateAlertV2/NotificationSettings/MultipleNotifications.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';
-import { Select, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
+import { SelectSimple } from '@signozhq/ui/select';
 import { Typography } from '@signozhq/ui/typography';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Info } from '@signozhq/icons';
@@ -87,16 +88,15 @@ function MultipleNotifications(): JSX.Element {
 			: 'No grouping fields available';
 		let input = (
 			<div>
-				<Select
-					options={spaceAggregationOptions}
-					onChange={onSelectChange}
-					value={notificationSettings.multipleNotifications}
-					mode="multiple"
+				<SelectSimple
+					items={spaceAggregationOptions}
+					onChange={(value): void => onSelectChange(value as string[])}
+					value={notificationSettings.multipleNotifications || []}
+					multiple
 					placeholder={placeholder}
 					disabled={!isMultipleNotificationsEnabled}
-					aria-disabled={!isMultipleNotificationsEnabled}
-					maxTagCount={3}
-					data-testid="multiple-notifications-select"
+					maxDisplayedPills={3}
+					testId="multiple-notifications-select"
 				/>
 				{isMultipleNotificationsEnabled && (
 					<Typography.Text className="multiple-notifications-select-description">

frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx

@@ -1,4 +1,5 @@
-import { Input, Select } from 'antd';
+import { Input } from 'antd';
+import { SelectSimple } from '@signozhq/ui/select';
 import { Typography } from '@signozhq/ui/typography';
 
 import { useCreateAlertState } from '../context';
@@ -38,31 +39,31 @@ function NotificationSettings(): JSX.Element {
 				}}
 				data-testid="repeat-notifications-time-input"
 			/>
-			<Select
-				value={notificationSettings.reNotification.unit || null}
+			<SelectSimple
+				value={notificationSettings.reNotification.unit || undefined}
 				placeholder="Select unit"
 				disabled={!notificationSettings.reNotification.enabled}
-				options={RE_NOTIFICATION_TIME_UNIT_OPTIONS}
+				items={RE_NOTIFICATION_TIME_UNIT_OPTIONS}
 				onChange={(value): void => {
 					setNotificationSettings({
 						type: 'SET_RE_NOTIFICATION',
 						payload: {
 							enabled: notificationSettings.reNotification.enabled,
 							value: notificationSettings.reNotification.value,
-							unit: value,
+							unit: value as string,
 							conditions: notificationSettings.reNotification.conditions,
 						},
 					});
 				}}
-				data-testid="repeat-notifications-unit-select"
+				testId="repeat-notifications-unit-select"
 			/>
 			<Typography.Text>while</Typography.Text>
-			<Select
-				mode="multiple"
-				value={notificationSettings.reNotification.conditions || null}
+			<SelectSimple
+				multiple
+				value={notificationSettings.reNotification.conditions || []}
 				placeholder="Select conditions"
 				disabled={!notificationSettings.reNotification.enabled}
-				options={RE_NOTIFICATION_CONDITION_OPTIONS}
+				items={RE_NOTIFICATION_CONDITION_OPTIONS}
 				onChange={(value): void => {
 					setNotificationSettings({
 						type: 'SET_RE_NOTIFICATION',
@@ -70,11 +71,11 @@ function NotificationSettings(): JSX.Element {
 							enabled: notificationSettings.reNotification.enabled,
 							value: notificationSettings.reNotification.value,
 							unit: notificationSettings.reNotification.unit,
-							conditions: value,
+							conditions: value as ('firing' | 'nodata')[],
 						},
 					});
 				}}
-				data-testid="repeat-notifications-conditions-select"
+				testId="repeat-notifications-conditions-select"
 			/>
 		</div>
 	);

frontend/src/container/CreateAlertV2/NotificationSettings/styles.scss

@@ -3,6 +3,9 @@
 	flex-direction: column;
 	margin: 0 16px;
 
+	--select-trigger-background-color: var(--l3-background);
+	--select-trigger-border-color: var(--l3-border);
+
 	.notification-message-container {
 		display: flex;
 		flex-direction: column;
@@ -54,8 +57,8 @@
 
 		textarea {
 			height: 150px;
-			background: var(--l2-background);
-			border: 1px solid var(--l1-border);
+			background: var(--l3-background);
+			border: 1px solid var(--l3-border);
 			border-radius: 4px;
 			color: var(--l2-foreground) !important;
 			font-family: Inter;
@@ -77,8 +80,9 @@
 			gap: 8px;
 
 			.ant-input {
-				width: 120px;
-				border: 1px solid var(--l1-border);
+				width: 190px;
+				border: 1px solid var(--l3-border);
+				background-color: var(--l3-background);
 			}
 
 			.ant-select {

frontend/src/container/CreateAlertV2/QuerySection/styles.scss

@@ -37,11 +37,11 @@
 				gap: 8px;
 
 				&.active-tab {
-					background-color: var(--l1-background);
+					background-color: var(--l3-background);
 					border-bottom: none;
 
 					&:hover {
-						background-color: var(--l1-background) !important;
+						background-color: var(--l3-background) !important;
 					}
 				}
 

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/DynamicVariable/DynamicVariable.tsx

@@ -7,7 +7,7 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Select } from 'antd';
+import { SelectSimple } from '@signozhq/ui/select';
 import { Typography } from '@signozhq/ui/typography';
 import CustomSelect from 'components/NewSelect/CustomSelect';
 import TextToolTip from 'components/TextToolTip';
@@ -204,10 +204,9 @@ function DynamicVariable({
 						}
 					/>
 				</span>
-				<Select
+				<SelectSimple
 					placeholder="Source"
-					defaultValue={AttributeSource.ALL_TELEMETRY}
-					options={sources.map((source) => ({ label: source, value: source }))}
+					items={sources.map((source) => ({ label: source, value: source }))}
 					onChange={(value): void => setAttributeSource(value as AttributeSource)}
 					value={attributeSource || dynamicVariablesSelectedValue?.value}
 				/>

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx

@@ -5,7 +5,9 @@ import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { orange } from '@ant-design/colors';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Collapse, Input, Select, Switch, Tag } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
+import { Button, Collapse, Input, Tag } from 'antd';
+import { SelectSimple } from '@signozhq/ui/select';
 import { Typography } from '@signozhq/ui/typography';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import cx from 'classnames';
@@ -55,7 +57,11 @@ import { WidgetSelector } from './WidgetSelector';
 
 import './VariableItem.styles.scss';
 
-const { Option } = Select;
+const SORT_ITEMS = [
+	{ value: VariableSortTypeArr[0], label: 'Disabled' },
+	{ value: VariableSortTypeArr[1], label: 'Ascending' },
+	{ value: VariableSortTypeArr[2], label: 'Descending' },
+];
 
 interface VariableItemProps {
 	variableData: IDashboardVariable;
@@ -742,19 +748,14 @@ function VariableItem({
 									<Typography className="typography-variables">Sort Values</Typography>
 								</LabelContainer>
 
-								<Select
-									defaultActiveFirstOption
-									defaultValue={VariableSortTypeArr[0]}
+								<SelectSimple
 									value={variableSortType}
-									onChange={(value: TSortVariableValuesType): void =>
-										setVariableSortType(value)
+									onChange={(value): void =>
+										setVariableSortType(value as TSortVariableValuesType)
 									}
 									className="sort-input"
-								>
-									<Option value={VariableSortTypeArr[0]}>Disabled</Option>
-									<Option value={VariableSortTypeArr[1]}>Ascending</Option>
-									<Option value={VariableSortTypeArr[2]}>Descending</Option>
-								</Select>
+									items={SORT_ITEMS}
+								/>
 							</VariableItemRow>
 							<VariableItemRow className="multiple-values-section">
 								<LabelContainer>
@@ -763,7 +764,7 @@ function VariableItem({
 									</Typography>
 								</LabelContainer>
 								<Switch
-									checked={variableMultiSelect}
+									value={variableMultiSelect}
 									onChange={(e): void => {
 										setVariableMultiSelect(e);
 										if (!e) {
@@ -780,7 +781,7 @@ function VariableItem({
 										</Typography>
 									</LabelContainer>
 									<Switch
-										checked={variableShowALLOption}
+										value={variableShowALLOption}
 										onChange={(e): void => setVariableShowALLOption(e)}
 									/>
 								</VariableItemRow>
@@ -797,10 +798,10 @@ function VariableItem({
 								<CustomSelect
 									placeholder="Select a default value"
 									value={variableDefaultValue}
-									onChange={(value): void => setVariableDefaultValue(value)}
-									options={previewValues.map((value) => ({
-										label: value,
-										value,
+									onChange={(value): void => setVariableDefaultValue(value ?? '')}
+									options={previewValues.map((val) => ({
+										label: val,
+										value: val,
 									}))}
 								/>
 							</VariableItemRow>

frontend/src/container/DashboardContainer/DashboardSettings/General/GeneralSettings.module.scss

@@ -98,6 +98,14 @@
 
 .nameIconInput {
 	display: flex;
+
+	--select-trigger-width: 40px;
+	--select-trigger-background-color: var(--l3-background);
+	--select-trigger-border-color: var(--l1-border);
+
+	[data-slot='select-trigger'] svg {
+		display: none;
+	}
 }
 
 .dashboardImageInput {
@@ -108,7 +116,7 @@
 		padding: 6px;
 		justify-content: center;
 		align-items: center;
-		border-radius: 2px 0px 0px 2px;
+		border-radius: 2var (--l3-border) px 0px 0px 2px;
 		border: 1px solid var(--l1-border) !important;
 		background: var(--l3-background) !important;
 

frontend/src/container/DashboardContainer/DashboardSettings/General/index.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Col, Input, Radio, Select, Space, Tooltip } from 'antd';
+import { Col, Input, Radio, Space, Tooltip } from 'antd';
+import { SelectSimple } from '@signozhq/ui/select';
 import { Typography } from '@signozhq/ui/typography';
 import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddTags';
 import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
@@ -21,8 +22,6 @@ import logEvent from 'api/common/logEvent';
 import { Events } from 'constants/events';
 import { getAbsoluteUrl } from 'utils/basePath';
 
-const { Option } = Select;
-
 function GeneralDashboardSettings(): JSX.Element {
 	const { dashboardData, setDashboardData } = useDashboardStore();
 
@@ -130,24 +129,22 @@ function GeneralDashboardSettings(): JSX.Element {
 					<div>
 						<Typography className={styles.dashboardName}>Dashboard Name</Typography>
 						<section className={styles.nameIconInput}>
-							<Select
-								defaultActiveFirstOption
+							<SelectSimple
 								data-testid="dashboard-image"
-								suffixIcon={null}
-								rootClassName={styles.dashboardImageInput}
+								className={styles.dashboardImageInput}
 								value={updatedImage}
-								onChange={(value: string): void => setUpdatedImage(value)}
-							>
-								{Base64Icons.map((icon) => (
-									<Option value={icon} key={icon}>
+								onChange={(value): void => setUpdatedImage(value as string)}
+								items={Base64Icons.map((icon) => ({
+									value: icon,
+									label: (
 										<img
 											src={icon}
 											alt="dashboard-icon"
 											className={styles.listItemImage}
 										/>
-									</Option>
-								))}
-							</Select>
+									),
+								}))}
+							/>
 							<Input
 								data-testid="dashboard-name"
 								className={styles.dashboardNameInput}

frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/index.tsx

@@ -3,7 +3,8 @@ import { useMutation } from 'react-query';
 import { useCopyToClipboard } from 'react-use';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { toast } from '@signozhq/ui/sonner';
-import { Button, Select } from 'antd';
+import { Button } from 'antd';
+import { SelectSimple } from '@signozhq/ui/select';
 import { Typography } from '@signozhq/ui/typography';
 import createPublicDashboardAPI from 'api/dashboard/public/createPublicDashboard';
 import revokePublicDashboardAccessAPI from 'api/dashboard/public/revokePublicDashboardAccess';
@@ -270,12 +271,12 @@ function PublicDashboardSetting(): JSX.Element {
 							Default time range
 						</Typography.Text>
 					</div>
-					<Select
+					<SelectSimple
 						placeholder="Select default time range"
-						options={TIME_RANGE_PRESETS_OPTIONS}
+						items={TIME_RANGE_PRESETS_OPTIONS}
 						value={defaultTimeRange}
-						onChange={handleDefaultTimeRange}
-						data-testid="default-time-range-select-dropdown"
+						onChange={(value): void => handleDefaultTimeRange(value as string)}
+						testId="default-time-range-select-dropdown"
 						className="default-time-range-select-dropdown"
 					/>
 				</div>

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/usePanelContextMenu.test.ts

@@ -0,0 +1,147 @@
+import { renderHook } from '@testing-library/react';
+import { UseQueryResult } from 'react-query';
+import { SuccessResponse } from 'types/api';
+import { Widgets } from 'types/api/dashboard/getAll';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
+import { usePanelContextMenu } from '../usePanelContextMenu';
+
+// The hook composes `useCoordinates` (popover state) and `useGraphContextMenu`
+// (menu items). We mock both so the test focuses on the `enableDrillDown` gate
+// rather than the implementation of the menu wiring itself.
+const onClickMock = jest.fn();
+jest.mock('periscope/components/ContextMenu', () => ({
+	useCoordinates: (): unknown => ({
+		coordinates: null,
+		popoverPosition: null,
+		clickedData: null,
+		onClose: jest.fn(),
+		subMenu: null,
+		onClick: onClickMock,
+		setSubMenu: jest.fn(),
+	}),
+}));
+
+jest.mock('container/QueryTable/Drilldown/useGraphContextMenu', () => ({
+	__esModule: true,
+	default: (): { menuItemsConfig: { header: string; items: string } } => ({
+		menuItemsConfig: { header: 'menu-header', items: 'menu-items' },
+	}),
+}));
+
+jest.mock('container/QueryTable/Drilldown/drilldownUtils', () => ({
+	getUplotClickData: jest.fn(() => ({
+		coord: { x: 1, y: 2 },
+		record: { queryName: 'A', filters: [] },
+		label: 'lbl',
+		seriesColor: '#abc',
+	})),
+}));
+
+jest.mock('container/PanelWrapper/utils', () => ({
+	isApmMetric: jest.fn(() => false),
+	getTimeRangeFromStepInterval: jest.fn(() => ({ start: 0, end: 0 })),
+}));
+
+const mockWidget = { id: 'w-1', query: {} } as unknown as Widgets;
+const mockQueryResponse = {
+	data: undefined,
+	isLoading: false,
+} as unknown as UseQueryResult<
+	SuccessResponse<MetricRangePayloadProps, unknown>,
+	Error
+>;
+
+describe('usePanelContextMenu', () => {
+	beforeEach(() => {
+		onClickMock.mockClear();
+	});
+
+	it('returns empty menuItemsConfig when enableDrillDown is false', () => {
+		const { result } = renderHook(() =>
+			usePanelContextMenu({
+				widget: mockWidget,
+				queryResponse: mockQueryResponse,
+				enableDrillDown: false,
+			}),
+		);
+
+		expect(result.current.menuItemsConfig).toStrictEqual({});
+	});
+
+	it('returns wired menuItemsConfig when enableDrillDown is true', () => {
+		const { result } = renderHook(() =>
+			usePanelContextMenu({
+				widget: mockWidget,
+				queryResponse: mockQueryResponse,
+				enableDrillDown: true,
+			}),
+		);
+
+		expect(result.current.menuItemsConfig).toStrictEqual({
+			header: 'menu-header',
+			items: 'menu-items',
+		});
+	});
+
+	it('clickHandlerWithContextMenu is a no-op when enableDrillDown is false', () => {
+		const { result } = renderHook(() =>
+			usePanelContextMenu({
+				widget: mockWidget,
+				queryResponse: mockQueryResponse,
+				enableDrillDown: false,
+			}),
+		);
+
+		result.current.clickHandlerWithContextMenu(
+			100, // xValue
+			200, // yValue
+			0, // mouseX
+			0, // mouseY
+			{ serviceName: 'svc' }, // metric
+			{ queryName: 'A', inFocusOrNot: true }, // queryData
+			10, // absoluteMouseX
+			20, // absoluteMouseY
+			{}, // axesData
+			{ seriesIndex: 0, seriesName: 'A', value: 1, color: '#abc' }, // focusedSeries
+		);
+
+		expect(onClickMock).not.toHaveBeenCalled();
+	});
+
+	it('clickHandlerWithContextMenu opens popover when enableDrillDown is true', () => {
+		const { result } = renderHook(() =>
+			usePanelContextMenu({
+				widget: mockWidget,
+				queryResponse: mockQueryResponse,
+				enableDrillDown: true,
+			}),
+		);
+
+		result.current.clickHandlerWithContextMenu(
+			100,
+			200,
+			0,
+			0,
+			{ serviceName: 'svc' },
+			{ queryName: 'A', inFocusOrNot: true },
+			10,
+			20,
+			{},
+			{ seriesIndex: 0, seriesName: 'A', value: 1, color: '#abc' },
+		);
+
+		expect(onClickMock).toHaveBeenCalledTimes(1);
+	});
+
+	it('defaults to disabled when enableDrillDown is not provided', () => {
+		const { result } = renderHook(() =>
+			usePanelContextMenu({
+				widget: mockWidget,
+				queryResponse: mockQueryResponse,
+			}),
+		);
+
+		expect(result.current.menuItemsConfig).toStrictEqual({});
+	});
+});

frontend/src/container/DashboardContainer/visualization/hooks/usePanelContextMenu.ts

@@ -21,11 +21,13 @@ interface UseTimeSeriesContextMenuParams {
 		SuccessResponse<MetricRangePayloadProps, unknown>,
 		Error
 	>;
+	enableDrillDown?: boolean;
 }
 
 export const usePanelContextMenu = ({
 	widget,
 	queryResponse,
+	enableDrillDown = false,
 }: UseTimeSeriesContextMenuParams): {
 	coordinates: { x: number; y: number } | null;
 	popoverPosition: PopoverPosition | null;
@@ -61,6 +63,9 @@ export const usePanelContextMenu = ({
 
 	const clickHandlerWithContextMenu = useCallback(
 		(...args: any[]) => {
+			if (!enableDrillDown) {
+				return;
+			}
 			const [
 				xValue,
 				_yvalue,
@@ -112,14 +117,14 @@ export const usePanelContextMenu = ({
 				});
 			}
 		},
-		[onClick, queryResponse],
+		[enableDrillDown, onClick, queryResponse],
 	);
 
 	return {
 		coordinates,
 		popoverPosition,
 		onClose,
-		menuItemsConfig,
+		menuItemsConfig: enableDrillDown ? menuItemsConfig : {},
 		clickHandlerWithContextMenu,
 	};
 };

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -31,6 +31,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		isFullViewMode,
 		onToggleModelHandler,
 		groupByPerQuery,
+		enableDrillDown = false,
 	} = props;
 	const uPlotRef = useRef<uPlot | null>(null);
 	const graphRef = useRef<HTMLDivElement>(null);
@@ -61,6 +62,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 	} = usePanelContextMenu({
 		widget,
 		queryResponse,
+		enableDrillDown,
 	});
 
 	const config = useMemo(() => {

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx

@@ -31,6 +31,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 		isFullViewMode,
 		onToggleModelHandler,
 		groupByPerQuery,
+		enableDrillDown = false,
 	} = props;
 	const graphRef = useRef<HTMLDivElement>(null);
 	const [minTimeScale, setMinTimeScale] = useState<number>();
@@ -60,6 +61,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	} = usePanelContextMenu({
 		widget,
 		queryResponse,
+		enableDrillDown,
 	});
 
 	const chartData = useMemo(() => {

frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss

@@ -75,8 +75,8 @@
 	gap: 16px;
 	z-index: 1;
 
-	.ant-select-selector {
-		padding: 0 !important;
+	.views-dropdown {
+		--combobox-trigger-border-color: transparent;
 	}
 
 	hr {
@@ -98,29 +98,17 @@
 		align-items: center;
 		gap: 8px;
 
-		.ant-select-focused {
-			border-color: transparent !important;
-
-			.ant-select-selector {
-				border-color: transparent !important;
-				box-shadow: none !important;
-			}
-		}
-
-		.ant-select-selector {
-			border: transparent !important;
-			background-color: transparent !important;
-
-			.ant-select-selection-placeholder {
-				margin-left: 12px;
-			}
+		button {
+			display: flex;
+			align-items: center;
+			justify-content: center;
 		}
 	}
 	.hidden {
 		display: none;
 	}
 
-	button {
+	.views-save-button {
 		display: flex;
 		align-items: center;
 		justify-content: center;

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -1,11 +1,9 @@
 import {
-	CSSProperties,
 	Dispatch,
 	SetStateAction,
 	useCallback,
 	useEffect,
 	useMemo,
-	useRef,
 	useState,
 } from 'react';
 import { useHistory } from 'react-router-dom';
@@ -23,12 +21,12 @@ import {
 	Button,
 	ColorPicker,
 	Divider,
+	Dropdown,
 	Input,
 	Modal,
-	RefSelectProps,
-	Select,
 	Tooltip,
 } from 'antd';
+import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import { Typography } from '@signozhq/ui/typography';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
@@ -58,7 +56,6 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
 import { useSaveView } from 'hooks/saveViews/useSaveView';
 import { useUpdateView } from 'hooks/saveViews/useUpdateView';
-import { useIsDarkMode } from 'hooks/useDarkMode';
 import useErrorNotification from 'hooks/useErrorNotification';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { useNotifications } from 'hooks/useNotifications';
@@ -108,8 +105,6 @@ function ExplorerOptions({
 	const [color, setColor] = useState(Color.BG_SIENNA_500);
 	const { notifications } = useNotifications();
 	const history = useHistory();
-	const ref = useRef<RefSelectProps>(null);
-	const isDarkMode = useIsDarkMode();
 	const [queryToExport, setQueryToExport] = useState<Query | null>(null);
 
 	const isLogsExplorer = sourcepage === DataSource.LOGS;
@@ -493,10 +488,16 @@ function ExplorerOptions({
 		);
 	};
 
-	const handleSelect = (
-		value: string,
-		option: { key: string; value: string },
-	): void => {
+	const handleSelect = (value: string | string[]): void => {
+		const selectedId = value as string;
+		const selectedView = viewsData?.data?.data?.find(
+			(view) => view.id === selectedId,
+		);
+		const option = {
+			key: selectedId,
+			value: selectedView?.name ?? '',
+		};
+
 		onMenuItemSelectHandler({
 			key: option.key,
 		});
@@ -530,10 +531,6 @@ function ExplorerOptions({
 			options,
 			handleOptionsChange,
 		);
-
-		if (ref.current) {
-			ref.current.blur();
-		}
 	};
 
 	const removeCurrentViewFromLocalStorage = (): void => {
@@ -639,24 +636,42 @@ function ExplorerOptions({
 		}
 	};
 
-	// TODO: Remove this and move this to scss file
-	const dropdownStyle: CSSProperties = useMemo(
-		() => ({
-			borderRadius: '4px',
-			border: isDarkMode
-				? `1px solid ${Color.BG_SLATE_400}`
-				: `1px solid ${Color.BG_VANILLA_300}`,
-			background: isDarkMode
-				? 'var(--bg-gradient-dark-shadow)'
-				: 'linear-gradient(139deg, rgba(241, 241, 241, 0.8) 0%, rgba(241, 241, 241, 0.9) 98.68%)',
-			boxShadow: '4px 10px 16px 2px rgba(0, 0, 0, 0.20)',
-			backdropFilter: 'blur(20px)',
-			bottom: '74px',
-			width: '191px',
-		}),
-		[isDarkMode],
+	const viewSelectItems = useMemo<ComboboxSimpleItem[]>(
+		() =>
+			viewsData?.data?.data?.map((view) => {
+				const extraData = view.extraData !== '' ? JSON.parse(view.extraData) : '';
+				let bgColor = getRandomColor();
+				if (extraData !== '') {
+					bgColor = extraData.color;
+				}
+				return {
+					value: view.id,
+					label: (
+						<div className="render-options">
+							<span
+								className="dot"
+								style={{
+									background: bgColor,
+									boxShadow: `0px 0px 6px 0px ${bgColor}`,
+								}}
+							/>{' '}
+							{view.name}
+						</div>
+					),
+					displayValue: view.name,
+					keywords: [view.name],
+				};
+			}) ?? [],
+		[viewsData?.data?.data],
 	);
 
+	const viewSelectValue = useMemo<string | undefined>(() => {
+		if (!viewName) {
+			return undefined;
+		}
+		return viewsData?.data?.data?.find((view) => view.name === viewName)?.id;
+	}, [viewName, viewsData?.data?.data]);
+
 	const isEditDeleteSupported = allowedRoles.includes(user.role as string);
 
 	const [isRecentlyUsedSavedViewSelected, setIsRecentlyUsedSavedViewSelected] =
@@ -735,37 +750,32 @@ function ExplorerOptions({
 
 	const CreateAlertButton = useMemo(() => {
 		if (isOneChartPerQuery) {
-			const selectLabel = (
-				<Button
-					disabled={disabled}
-					shape="round"
-					icon={<ConciergeBell size={16} />}
-				>
-					Create an Alert
-				</Button>
-			);
 			return (
-				<Select
+				<Dropdown
 					disabled={disabled}
-					className="multi-alert-button"
-					placeholder={selectLabel}
-					value={selectLabel}
-					suffixIcon={null}
-					onSelect={(e): void => {
-						const selectedQuery = splitedQueries.find(
-							(query) => query.id === (e as unknown as string),
-						);
-						if (selectedQuery) {
-							onCreateAlertsHandler(selectedQuery);
-						}
+					trigger={['click']}
+					overlayClassName="multi-alert-button"
+					menu={{
+						items: splitedQueries.map((splittedQuery) => ({
+							key: splittedQuery.id,
+							label: getQueryName(splittedQuery),
+						})),
+						onClick: ({ key }): void => {
+							const selectedQuery = splitedQueries.find((query) => query.id === key);
+							if (selectedQuery) {
+								onCreateAlertsHandler(selectedQuery);
+							}
+						},
 					}}
 				>
-					{splitedQueries.map((splittedQuery) => (
-						<Select.Option key={splittedQuery.id} value={splittedQuery.id}>
-							{getQueryName(splittedQuery)}
-						</Select.Option>
-					))}
-				</Select>
+					<Button
+						disabled={disabled}
+						shape="round"
+						icon={<ConciergeBell size={16} />}
+					>
+						Create an Alert
+					</Button>
+				</Dropdown>
 			);
 		}
 		return (
@@ -788,43 +798,36 @@ function ExplorerOptions({
 
 	const AddToDashboardButton = useMemo(() => {
 		if (isOneChartPerQuery) {
-			const selectLabel = (
-				<Button
-					type="primary"
-					disabled={disabled}
-					shape="round"
-					onClick={onAddToDashboard}
-					icon={<Plus size={16} />}
-				>
-					Add to Dashboard
-				</Button>
-			);
 			return (
-				<Select
+				<Dropdown
 					disabled={disabled}
-					className="multi-dashboard-button"
-					placeholder={selectLabel}
-					value={selectLabel}
-					suffixIcon={null}
-					onSelect={(e): void => {
-						const selectedQuery = splitedQueries.find(
-							(query) => query.id === (e as unknown as string),
-						);
-						if (selectedQuery) {
-							setQueryToExport(() => {
-								onAddToDashboard();
-								return selectedQuery;
-							});
-						}
+					trigger={['click']}
+					overlayClassName="multi-dashboard-button"
+					menu={{
+						items: splitedQueries.map((splittedQuery) => ({
+							key: splittedQuery.id,
+							label: getQueryName(splittedQuery),
+						})),
+						onClick: ({ key }): void => {
+							const selectedQuery = splitedQueries.find((query) => query.id === key);
+							if (selectedQuery) {
+								setQueryToExport(() => {
+									onAddToDashboard();
+									return selectedQuery;
+								});
+							}
+						},
 					}}
 				>
-					{/* eslint-disable-next-line sonarjs/no-identical-functions */}
-					{splitedQueries.map((splittedQuery) => (
-						<Select.Option key={splittedQuery.id} value={splittedQuery.id}>
-							{getQueryName(splittedQuery)}
-						</Select.Option>
-					))}
-				</Select>
+					<Button
+						type="primary"
+						disabled={disabled}
+						shape="round"
+						icon={<Plus size={16} />}
+					>
+						Add to Dashboard
+					</Button>
+				</Dropdown>
 			);
 		}
 		return (
@@ -898,48 +901,24 @@ function ExplorerOptions({
 					}}
 				>
 					<div className="view-options">
-						<Select<string, { key: string; value: string }>
-							showSearch
+						<ComboboxSimple
 							placeholder="Select a view"
 							loading={viewsIsLoading || isRefetching}
-							value={viewName || undefined}
-							onSelect={handleSelect}
+							value={viewSelectValue}
+							onChange={handleSelect}
 							style={{
 								minWidth: 170,
 							}}
-							dropdownStyle={dropdownStyle}
 							className="views-dropdown"
-							allowClear={false}
-							ref={ref}
-						>
-							{viewsData?.data?.data?.map((view) => {
-								const extraData =
-									view.extraData !== '' ? JSON.parse(view.extraData) : '';
-								let bgColor = getRandomColor();
-								if (extraData !== '') {
-									bgColor = extraData.color;
-								}
-								return (
-									<Select.Option key={view.id} value={view.name}>
-										<div className="render-options">
-											<span
-												className="dot"
-												style={{
-													background: bgColor,
-													boxShadow: `0px 0px 6px 0px ${bgColor}`,
-												}}
-											/>{' '}
-											{view.name}
-										</div>
-									</Select.Option>
-								);
-							})}
-						</Select>
+							items={viewSelectItems}
+						/>
 
 						<Button
 							shape="round"
 							onClick={handleSaveViewModalToggle}
-							className={isEditDeleteSupported ? '' : 'hidden'}
+							className={
+								isEditDeleteSupported ? 'views-save-button' : 'views-save-button hidden'
+							}
 							disabled={viewsIsLoading || isRefetching}
 							icon={<Disc3 size={16} />}
 						>

frontend/src/container/ExplorerOrderBy/index.tsx

@@ -1,9 +1,11 @@
 import { memo, useMemo } from 'react';
-import { Select, Spin } from 'antd';
+import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import { IOption } from 'hooks/useResourceAttribute/types';
 import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
 import { useOrderByFilter } from 'container/QueryBuilder/filters/OrderByFilter/useOrderByFilter';
 import { selectStyle } from 'container/QueryBuilder/filters/QueryBuilderSearch/config';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+import { uniqWith } from 'lodash-es';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { StringOperators } from 'types/common/queryBuilder';
 
@@ -15,7 +17,6 @@ function ExplorerOrderBy({ query, onChange }: OrderByFilterProps): JSX.Element {
 		generateOptions,
 		createOptions,
 		handleChange,
-		handleSearchKeys,
 	} = useOrderByFilter({ query, onChange });
 
 	const { data, isFetching } = useGetAggregateKeys(
@@ -54,18 +55,42 @@ function ExplorerOrderBy({ query, onChange }: OrderByFilterProps): JSX.Element {
 		query.aggregateOperator,
 	]);
 
+	const items: ComboboxSimpleItem[] = useMemo(() => {
+		const merged: IOption[] = [...selectedValue, ...options];
+		const unique = uniqWith(merged, (a, b) => a.value === b.value);
+		return unique.map((opt) => ({
+			label: opt.label,
+			displayValue: opt.label,
+			value: opt.value,
+		}));
+	}, [selectedValue, options]);
+
+	const value = useMemo(
+		() => selectedValue.map((item) => item.value),
+		[selectedValue],
+	);
+
+	const handleComboboxChange = (next: string | string[]): void => {
+		const values = (next as string[]) || [];
+		const asOptions: IOption[] = values.map((v) => {
+			const found = items.find((item) => item.value === v);
+			return {
+				label: typeof found?.label === 'string' ? found.label : v,
+				value: v,
+			};
+		});
+		handleChange(asOptions);
+	};
+
 	return (
-		<Select
-			mode="tags"
+		<ComboboxSimple
+			multiple
+			allowCreate
+			loading={isFetching}
 			style={selectStyle}
-			onSearch={handleSearchKeys}
-			showSearch
-			showArrow={false}
-			value={selectedValue}
-			labelInValue
-			options={options}
-			notFoundContent={isFetching ? <Spin size="small" /> : null}
-			onChange={handleChange}
+			items={items}
+			value={value}
+			onChange={handleComboboxChange}
 		/>
 	);
 }

frontend/src/container/ExportPanel/ExportPanelContainer.tsx

@@ -17,7 +17,7 @@ import {
 	Title,
 	Wrapper,
 } from './styles';
-import { filterOptions, getSelectOptions } from './utils';
+import { getSelectOptions } from './utils';
 
 function ExportPanelContainer({
 	isLoading,
@@ -91,13 +91,13 @@ function ExportPanelContainer({
 			<SelectWrapper direction="horizontal">
 				<DashboardSelect
 					placeholder="Select Dashboard"
-					options={options}
-					showSearch
+					items={options}
 					loading={isDashboardLoading}
-					disabled={isDashboardLoading}
-					value={dashboardId}
-					onSelect={handleSelect}
-					filterOption={filterOptions}
+					style={
+						isDashboardLoading ? { pointerEvents: 'none', opacity: 0.5 } : undefined
+					}
+					value={dashboardId || ''}
+					onChange={(value): void => handleSelect(value as string)}
 				/>
 				<Button
 					type="primary"

frontend/src/container/ExportPanel/styles.ts

@@ -1,11 +1,9 @@
-import { FunctionComponent } from 'react';
-import { Button, Select, SelectProps, Space } from 'antd';
+import { Button, Space } from 'antd';
+import { ComboboxSimple } from '@signozhq/ui/combobox';
 import { Typography } from '@signozhq/ui/typography';
 import styled from 'styled-components';
 
-export const DashboardSelect: FunctionComponent<SelectProps> = styled(
-	Select,
-)<SelectProps>`
+export const DashboardSelect = styled(ComboboxSimple)`
 	width: 100%;
 `;
 

frontend/src/container/ExportPanel/utils.ts

@@ -1,16 +1,8 @@
-import { SelectProps } from 'antd';
+import { ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import { Dashboard } from 'types/api/dashboard/getAll';
 
-export const getSelectOptions = (data: Dashboard[]): SelectProps['options'] =>
+export const getSelectOptions = (data: Dashboard[]): ComboboxSimpleItem[] =>
 	data.map(({ id, data }) => ({
 		label: data.title,
 		value: id,
 	}));
-
-export const filterOptions: SelectProps['filterOption'] = (
-	input,
-	options,
-): boolean =>
-	(options?.label?.toString() ?? '')
-		?.toLowerCase()
-		.includes(input.toLowerCase());

frontend/src/container/ForgotPassword/index.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useMemo } from 'react';
 import { ArrowLeft, ArrowRight } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import { Form, Select } from 'antd';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Form } from 'antd';
 import { ErrorResponseHandlerForGeneratedAPIs } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import { useForgotPassword } from 'api/generated/services/users';
 import AuthError from 'components/AuthError/AuthError';
@@ -168,15 +169,18 @@ function ForgotPassword({
 								name="orgId"
 								rules={[{ required: true, message: 'Please select your organization' }]}
 							>
-								<Select
+								<SelectSimple
 									id="orgId"
-									data-testid="orgId"
+									testId="orgId"
 									className="login-form-input login-form-select-no-border"
 									placeholder="Select your organization"
-									options={orgs.map((org) => ({
+									items={orgs.map((org) => ({
 										value: org.id,
 										label: org.name || 'default',
 									}))}
+									onChange={(value): void => {
+										form.setFieldValue('orgId', value);
+									}}
 								/>
 							</Form.Item>
 						</div>

frontend/src/container/FormAlertChannels/index.tsx

@@ -1,6 +1,8 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, FormInstance, Input, Select, Switch } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
+import { Form, FormInstance, Input } from 'antd';
+import { SelectSimple } from '@signozhq/ui/select';
 import { Typography } from '@signozhq/ui/typography';
 import type { Store } from 'antd/lib/form/interface';
 import ROUTES from 'constants/routes';
@@ -82,8 +84,8 @@ function FormAlertChannels({
 					name="send_resolved"
 				>
 					<Switch
-						defaultChecked={initialValue?.send_resolved}
-						data-testid="field-send-resolved-checkbox"
+						defaultValue={initialValue?.send_resolved}
+						testId="field-send-resolved-checkbox"
 						onChange={(value): void => {
 							setSelectedConfig((state) => ({
 								...state,
@@ -94,40 +96,20 @@ function FormAlertChannels({
 				</Form.Item>
 
 				<Form.Item label={t('field_channel_type')} labelAlign="left" name="type">
-					<Select
+					<SelectSimple
 						disabled={editing}
-						onChange={onTypeChangeHandler}
+						onChange={(value): void => onTypeChangeHandler(value as ChannelType)}
 						value={type}
-						data-testid="channel-type-select"
-					>
-						<Select.Option value="slack" key="slack" data-testid="select-option">
-							Slack
-						</Select.Option>
-						<Select.Option value="webhook" key="webhook" data-testid="select-option">
-							Webhook
-						</Select.Option>
-						<Select.Option
-							value="pagerduty"
-							key="pagerduty"
-							data-testid="select-option"
-						>
-							Pagerduty
-						</Select.Option>
-						<Select.Option
-							value="opsgenie"
-							key="opsgenie"
-							data-testid="select-option"
-						>
-							Opsgenie
-						</Select.Option>
-						<Select.Option value="email" key="email" data-testid="select-option">
-							Email
-						</Select.Option>
-
-						<Select.Option value="msteams" key="msteams" data-testid="select-option">
-							Microsoft Teams
-						</Select.Option>
-					</Select>
+						testId="channel-type-select"
+						items={[
+							{ value: 'slack', label: 'Slack' },
+							{ value: 'webhook', label: 'Webhook' },
+							{ value: 'pagerduty', label: 'Pagerduty' },
+							{ value: 'opsgenie', label: 'Opsgenie' },
+							{ value: 'email', label: 'Email' },
+							{ value: 'msteams', label: 'Microsoft Teams' },
+						]}
+					/>
 				</Form.Item>
 
 				<Form.Item>{renderSettings()}</Form.Item>

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -2,7 +2,9 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { Plus } from '@signozhq/icons';
-import { Button, Flex, Form, Select, Switch, Tooltip } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
+import { Button, Flex, Form, Tooltip } from 'antd';
+import { SelectSimple } from '@signozhq/ui/select';
 import getAll from 'api/channels/getAll';
 import logEvent from 'api/common/logEvent';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
@@ -16,7 +18,6 @@ import { Channels } from 'types/api/channels/getAll';
 import APIError from 'types/api/error';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
 import { openInNewTab } from 'utils/navigation';
-import { popupContainer } from 'utils/selectPopupContainer';
 
 import ChannelSelect from './ChannelSelect';
 import LabelSelect from './labels';
@@ -24,15 +25,12 @@ import {
 	FormContainer,
 	FormItemMedium,
 	InputSmall,
-	SeveritySelect,
 	StepHeading,
 	TextareaMedium,
 } from './styles';
 
 import './FormAlertRules.styles.scss';
 
-const { Option } = Select;
-
 interface BasicInfoProps {
 	isNewRule: boolean;
 	alertDef: AlertDef;
@@ -115,10 +113,9 @@ function BasicInfo({
 					labelAlign="left"
 					name={['labels', 'severity']}
 				>
-					<SeveritySelect
-						getPopupContainer={popupContainer}
+					<SelectSimple
 						defaultValue="critical"
-						onChange={(value: unknown | string): void => {
+						onChange={(value): void => {
 							const s = (value as string) || 'critical';
 							setAlertDef({
 								...alertDef,
@@ -128,12 +125,14 @@ function BasicInfo({
 								},
 							});
 						}}
-					>
-						<Option value="critical">{t('option_critical')}</Option>
-						<Option value="error">{t('option_error')}</Option>
-						<Option value="warning">{t('option_warning')}</Option>
-						<Option value="info">{t('option_info')}</Option>
-					</SeveritySelect>
+						items={[
+							{ value: 'critical', label: t('option_critical') },
+							{ value: 'error', label: t('option_error') },
+							{ value: 'warning', label: t('option_warning') },
+							{ value: 'info', label: t('option_info') },
+						]}
+						style={{ width: '25%' }}
+					/>
 				</Form.Item>
 
 				<Form.Item
@@ -198,10 +197,10 @@ function BasicInfo({
 						placement="right"
 					>
 						<Switch
-							checked={shouldBroadCastToAllChannels}
+							value={shouldBroadCastToAllChannels}
 							onChange={handleBroadcastToAllChannels}
 							disabled={noChannels || !!isLoading}
-							data-testid="alert-broadcast-to-all-channels"
+							testId="alert-broadcast-to-all-channels"
 						/>
 					</Tooltip>
 				</FormItemMedium>

frontend/src/container/FormAlertRules/ChannelSelect/index.tsx

@@ -1,14 +1,16 @@
-import { ReactNode } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Plus } from '@signozhq/icons';
-import { Select, Spin } from 'antd';
+import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useNotifications } from 'hooks/useNotifications';
 import { useAppContext } from 'providers/App/App';
 import { Channels } from 'types/api/channels/getAll';
 import APIError from 'types/api/error';
 
-import { StyledCreateChannelOption, StyledSelect } from './styles';
+import { StyledCreateChannelOption } from './styles';
+
+const ADD_NEW_CHANNEL_VALUE = 'add-new-channel';
 
 export interface ChannelSelectProps {
 	disabled?: boolean;
@@ -38,12 +40,13 @@ function ChannelSelect({
 
 	const { notifications } = useNotifications();
 
-	const handleChange = (value: string[]): void => {
-		if (value.includes('add-new-channel')) {
+	const handleChange = (value: string | string[]): void => {
+		const arr = Array.isArray(value) ? value : [value];
+		if (arr.includes(ADD_NEW_CHANNEL_VALUE)) {
 			handleCreateNewChannels();
 			return;
 		}
-		onSelectChannels(value);
+		onSelectChannels(arr);
 	};
 
 	if (hasError) {
@@ -59,57 +62,55 @@ function ChannelSelect({
 		user.role,
 	);
 
-	const renderOptions = (): ReactNode[] => {
-		const children: ReactNode[] = [];
+	const items = useMemo<ComboboxSimpleItem[]>(() => {
+		const result: ComboboxSimpleItem[] = [];
 
 		if (!isLoading && addNewChannelPermission) {
-			children.push(
-				<Select.Option key="add-new-channel" value="add-new-channel">
+			result.push({
+				value: ADD_NEW_CHANNEL_VALUE,
+				label: (
 					<StyledCreateChannelOption>
 						<Plus size="md" />
 						Create a new channel
 					</StyledCreateChannelOption>
-				</Select.Option>,
-			);
+				),
+				displayValue: 'Create a new channel',
+			});
 		}
 
-		if (isLoading || channels.length === 0) {
-			return children;
+		if (!isLoading && channels.length > 0) {
+			channels.forEach((o) => {
+				result.push({
+					value: o.name,
+					label: o.name,
+				});
+			});
 		}
 
-		channels.forEach((o) => {
-			children.push(
-				<Select.Option key={o.id} value={o.name}>
-					{o.name}
-				</Select.Option>,
-			);
-		});
-
-		return children;
-	};
+		return result;
+	}, [isLoading, addNewChannelPermission, channels]);
 
 	return (
-		<StyledSelect
+		<ComboboxSimple
+			multiple
+			style={{
+				width: '100%',
+				borderRadius: 4,
+			}}
 			disabled={disabled}
-			status={hasError ? 'error' : ''}
-			mode="multiple"
-			style={{ width: '100%' }}
+			className={hasError ? 'channel-select-error' : undefined}
 			placeholder={t('placeholder_channel_select')}
-			data-testid="alert-channel-select"
+			testId="alert-channel-select"
 			value={currentValue}
-			notFoundContent={isLoading && <Spin size="small" />}
-			onDropdownVisibleChange={(open): void => {
-				if (open) {
-					onDropdownOpen();
-				}
-			}}
+			loading={isLoading}
+			items={items}
 			onChange={(value): void => {
-				handleChange(value as string[]);
+				// ComboboxSimple has no onOpen callback, so we fire onDropdownOpen
+				// (the refetch trigger) on the first interaction via onChange.
+				onDropdownOpen();
+				handleChange(value);
 			}}
-			optionLabelProp="label"
-		>
-			{renderOptions()}
-		</StyledSelect>
+		/>
 	);
 }
 

frontend/src/container/FormAlertRules/ChannelSelect/styles.ts

@@ -1,10 +1,5 @@
-import { Select } from 'antd';
 import styled from 'styled-components';
 
-export const StyledSelect = styled(Select)`
-	border-radius: 4px;
-`;
-
 export const StyledCreateChannelOption = styled.div`
 	color: var(--accent-primary);
 	display: flex;