From 4ed54e25716362bcf8b9c3260d06b9483b966181 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 20 Mar 2026 14:42:20 +0000
Subject: [PATCH 1/7] chore: update @tabler/icons-react to v3.40.0

Update from v3.5.0 to get IconConnection (added in v3.39) for the
data source select enhancement.

Made-with: Cursor
---
 packages/app/package.json |  2 +-
 yarn.lock                 | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/app/package.json b/packages/app/package.json
index 18ae7c8319..a768126d5e 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -42,7 +42,7 @@
     "@mantine/notifications": "^7.17.8",
     "@mantine/spotlight": "^7.17.8",
     "@microsoft/fetch-event-source": "^2.0.1",
-    "@tabler/icons-react": "^3.5.0",
+    "@tabler/icons-react": "^3.39.0",
     "@tanstack/react-query": "^5.56.2",
     "@tanstack/react-query-devtools": "^5.56.2",
     "@tanstack/react-table": "^8.7.9",
diff --git a/yarn.lock b/yarn.lock
index e4ceb35e57..42604e6edb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4330,7 +4330,7 @@ __metadata:
     "@storybook/addon-themes": "npm:^10.1.4"
     "@storybook/nextjs": "npm:^10.1.4"
     "@storybook/react": "npm:^10.1.4"
-    "@tabler/icons-react": "npm:^3.5.0"
+    "@tabler/icons-react": "npm:^3.39.0"
     "@tanstack/react-query": "npm:^5.56.2"
     "@tanstack/react-query-devtools": "npm:^5.56.2"
     "@tanstack/react-table": "npm:^8.7.9"
@@ -8376,21 +8376,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tabler/icons-react@npm:^3.5.0":
-  version: 3.5.0
-  resolution: "@tabler/icons-react@npm:3.5.0"
+"@tabler/icons-react@npm:^3.39.0":
+  version: 3.40.0
+  resolution: "@tabler/icons-react@npm:3.40.0"
   dependencies:
-    "@tabler/icons": "npm:3.5.0"
+    "@tabler/icons": "npm:3.40.0"
   peerDependencies:
     react: ">= 16"
-  checksum: 10c0/9669d26e2ab4654d3d1c124a5ffd42c276d5a7ebc83b81ecb200e1f89dc3e9271557cf6eccc78bdd0ebdd0536fa4cd566e2b638ab4407e9415457c28ef05786e
+  checksum: 10c0/a6985c9e8d1986c14594f5bc7007d2398b7b1efd2202304a24e23eb1fa6a48a23f9a6aaa3c5626781990cc0f0a46773c0a0cb747b6984dde26f03ba4ebd1d9cf
   languageName: node
   linkType: hard
 
-"@tabler/icons@npm:3.5.0":
-  version: 3.5.0
-  resolution: "@tabler/icons@npm:3.5.0"
-  checksum: 10c0/0d6b15266e116dcf56bca417d013f1027b57404e5ed7f9a2a14e216eabdd04980ff971129491b666ffdc11953107c0b4540033c92d611fa74e127fc9d443fc4f
+"@tabler/icons@npm:3.40.0":
+  version: 3.40.0
+  resolution: "@tabler/icons@npm:3.40.0"
+  checksum: 10c0/d335323695dff9218b486bb84a79893f86d5c284dc022c86bfdcfc550605c48ddffe72161c93f6fcab47ba6d828311c101fc5e306fb698b5b5104cf6250ed314
   languageName: node
   linkType: hard
 

From 2a23fa495520399161d01fc5ab96b42182f41374 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 20 Mar 2026 14:43:22 +0000
Subject: [PATCH 2/7] feat: enhance data source select with context-aware icons
 and inline actions

Show IconConnection for trace sources, IconLogs for log sources, and
IconStack as fallback. Move Create New Source and Edit Sources actions
into the dropdown as a grouped section with icons, replacing the
separate gear icon menu.

Made-with: Cursor
---
 .changeset/enhance-data-source-select.md      |   5 +
 packages/app/src/DBSearchPage.tsx             |  93 +++----------
 .../app/src/components/SelectControlled.tsx   |  33 +++--
 packages/app/src/components/SourceSelect.tsx  | 123 +++++++++++++-----
 .../styles/SourceSelectControlled.module.scss |   6 +
 5 files changed, 144 insertions(+), 116 deletions(-)
 create mode 100644 .changeset/enhance-data-source-select.md

diff --git a/.changeset/enhance-data-source-select.md b/.changeset/enhance-data-source-select.md
new file mode 100644
index 0000000000..0d8d25b75c
--- /dev/null
+++ b/.changeset/enhance-data-source-select.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+feat: Enhance data source select with context-aware icons and inline actions
diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx
index cfa5079ae4..454a9bded2 100644
--- a/packages/app/src/DBSearchPage.tsx
+++ b/packages/app/src/DBSearchPage.tsx
@@ -11,7 +11,6 @@ import {
 } from 'react';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import Link from 'next/link';
 import router from 'next/router';
 import {
   parseAsBoolean,
@@ -51,7 +50,6 @@ import {
   Flex,
   Grid,
   Group,
-  Menu,
   Modal,
   Paper,
   Select,
@@ -67,10 +65,8 @@ import {
 import { notifications } from '@mantine/notifications';
 import {
   IconBolt,
-  IconCirclePlus,
   IconPlayerPlay,
   IconPlus,
-  IconSettings,
   IconTags,
   IconX,
 } from '@tabler/icons-react';
@@ -191,59 +187,6 @@ export function getDefaultSourceId(
   return sources[0].id;
 }
 
-function SourceEditMenu({
-  setModalOpen,
-  setModelFormExpanded,
-}: {
-  setModalOpen: (val: SetStateAction<boolean>) => void;
-  setModelFormExpanded: (val: SetStateAction<boolean>) => void;
-}) {
-  return (
-    <Menu withArrow position="bottom-start">
-      <Menu.Target>
-        <ActionIcon
-          data-testid="source-settings-menu"
-          variant="subtle"
-          size="sm"
-          title="Edit Source"
-        >
-          <Text size="xs">
-            <IconSettings size={14} />
-          </Text>
-        </ActionIcon>
-      </Menu.Target>
-      <Menu.Dropdown>
-        <Menu.Label>Sources</Menu.Label>
-        <Menu.Item
-          data-testid="create-new-source-menu-item"
-          leftSection={<IconCirclePlus size={14} />}
-          onClick={() => setModalOpen(true)}
-        >
-          Create New Source
-        </Menu.Item>
-        {IS_LOCAL_MODE ? (
-          <Menu.Item
-            data-testid="edit-sources-menu-item"
-            leftSection={<IconSettings size={14} />}
-            onClick={() => setModelFormExpanded(v => !v)}
-          >
-            Edit Source
-          </Menu.Item>
-        ) : (
-          <Menu.Item
-            data-testid="edit-sources-menu-item"
-            leftSection={<IconSettings size={14} />}
-            component={Link}
-            href="/team"
-          >
-            Edit Sources
-          </Menu.Item>
-        )}
-      </Menu.Dropdown>
-    </Menu>
-  );
-}
-
 function SourceEditModal({
   opened,
   onClose,
@@ -1568,6 +1511,14 @@ function DBSearchPage() {
     setModelFormExpanded(false);
   }, [setModelFormExpanded]);
 
+  const onEditSources = useCallback(() => {
+    if (IS_LOCAL_MODE) {
+      setModelFormExpanded(v => !v);
+    } else {
+      router.push('/team');
+    }
+  }, [setModelFormExpanded]);
+
   const setNewSourceModalClosed = useCallback(
     () => setNewSourceModalOpened(false),
     [setNewSourceModalOpened],
@@ -1609,22 +1560,18 @@ function DBSearchPage() {
       >
         {/* <DevTool control={control} /> */}
         <Flex gap="sm" px="sm" pt="sm" wrap="nowrap">
-          <Group gap="4px" wrap="nowrap" style={{ minWidth: 150 }}>
-            <SourceSelectControlled
-              key={`${savedSearchId}`}
-              size="xs"
-              control={control}
-              name="source"
-              onCreate={openNewSourceModal}
-              allowedSourceKinds={ALLOWED_SOURCE_KINDS}
-              data-testid="source-selector"
-              sourceSchemaPreview={sourceSchemaPreview}
-            />
-            <SourceEditMenu
-              setModalOpen={setNewSourceModalOpened}
-              setModelFormExpanded={setModelFormExpanded}
-            />
-          </Group>
+          <SourceSelectControlled
+            key={`${savedSearchId}`}
+            size="xs"
+            control={control}
+            name="source"
+            onCreate={openNewSourceModal}
+            onEdit={onEditSources}
+            allowedSourceKinds={ALLOWED_SOURCE_KINDS}
+            data-testid="source-selector"
+            sourceSchemaPreview={sourceSchemaPreview}
+            style={{ minWidth: 150 }}
+          />
           <Box style={{ flex: '1 1 0%', minWidth: 100 }}>
             <SQLInlineEditorControlled
               tableConnection={inputSourceTableConnection}
diff --git a/packages/app/src/components/SelectControlled.tsx b/packages/app/src/components/SelectControlled.tsx
index 866a5f5140..8cbb325ea0 100644
--- a/packages/app/src/components/SelectControlled.tsx
+++ b/packages/app/src/components/SelectControlled.tsx
@@ -5,6 +5,7 @@ import { Select, SelectProps } from '@mantine/core';
 export type SelectControlledProps = SelectProps &
   UseControllerProps<any> & {
     onCreate?: () => void;
+    onEdit?: () => void;
     allowDeselect?: boolean;
   };
 
@@ -19,35 +20,41 @@ export default function SelectControlled(props: SelectControlledProps) {
     },
     fieldState,
   } = useController(props);
-  const { onCreate, allowDeselect = true, ...restProps } = props;
+  const { onCreate, onEdit, allowDeselect = true, ...restProps } = props;
 
-  // This is needed as mantine does not clear the select
-  // if the value is not in the data after
-  // if it was previously in the data (ex. data was deleted)
-  const selected = props.data?.find(d =>
-    typeof d === 'string'
-      ? d === fieldValue
-      : 'value' in d
-        ? d.value === fieldValue
-        : true,
-  );
+  // Mantine does not clear the select if the value is removed from data
+  // after it was previously present (ex. data was deleted)
+  const selected = props.data?.some(d => {
+    if (typeof d === 'string') return d === fieldValue;
+    if ('value' in d) return d.value === fieldValue;
+    if ('items' in d) {
+      return d.items.some(item =>
+        typeof item === 'string'
+          ? item === fieldValue
+          : item.value === fieldValue,
+      );
+    }
+    return false;
+  });
 
   const onChange = useCallback(
     (value: string | null) => {
       if (value === '_create_new_value' && onCreate != null) {
         onCreate();
+      } else if (value === '_edit_sources_value' && onEdit != null) {
+        onEdit();
       } else if (value !== null || allowDeselect) {
         fieldOnChange(value);
       }
     },
-    [fieldOnChange, onCreate, allowDeselect],
+    [fieldOnChange, onCreate, onEdit, allowDeselect],
   );
 
   return (
     <Select
       {...restProps}
       error={fieldState.error?.message}
-      value={selected == null ? null : fieldValue}
+      value={selected ? fieldValue : null}
       onChange={onChange}
       onBlur={fieldOnBlur}
       name={fieldName}
diff --git a/packages/app/src/components/SourceSelect.tsx b/packages/app/src/components/SourceSelect.tsx
index 01b6105ea1..735a9e6e0b 100644
--- a/packages/app/src/components/SourceSelect.tsx
+++ b/packages/app/src/components/SourceSelect.tsx
@@ -1,9 +1,15 @@
-import { memo, useMemo } from 'react';
-import { UseControllerProps } from 'react-hook-form';
+import { memo, useCallback, useMemo } from 'react';
+import { UseControllerProps, useWatch } from 'react-hook-form';
 import { SourceKind } from '@hyperdx/common-utils/dist/types';
-import { SelectProps, UnstyledButton } from '@mantine/core';
+import { Group, SelectProps, UnstyledButton } from '@mantine/core';
 import { ComboboxChevron } from '@mantine/core';
-import { IconStack } from '@tabler/icons-react';
+import {
+  IconConnection,
+  IconLogs,
+  IconPlus,
+  IconSettings,
+  IconStack,
+} from '@tabler/icons-react';
 
 import SelectControlled from '@/components/SelectControlled';
 import { HDX_LOCAL_DEFAULT_SOURCES } from '@/config';
@@ -43,9 +49,31 @@ export const SourceSelectRightSection = ({
   };
 };
 
+const SOURCE_KIND_ICONS: Record<string, React.ReactNode> = {
+  [SourceKind.Trace]: <IconConnection size={16} />,
+  [SourceKind.Log]: <IconLogs size={16} />,
+};
+
+const ACTION_ICONS: Record<string, React.ReactNode> = {
+  _create_new_value: <IconPlus size={14} />,
+  _edit_sources_value: <IconSettings size={14} />,
+};
+
+const renderOption: SelectProps['renderOption'] = ({ option, checked }) => {
+  const icon = ACTION_ICONS[option.value];
+  if (!icon) return option.label;
+  return (
+    <Group gap="xs" wrap="nowrap">
+      {icon}
+      {option.label}
+    </Group>
+  );
+};
+
 function SourceSelectControlledComponent({
   size,
   onCreate,
+  onEdit,
   allowedSourceKinds,
   connectionId,
   comboboxProps,
@@ -54,6 +82,7 @@ function SourceSelectControlledComponent({
 }: {
   size?: string;
   onCreate?: () => void;
+  onEdit?: () => void;
   allowedSourceKinds?: SourceKind[];
   connectionId?: string;
   sourceSchemaPreview?: React.ReactNode;
@@ -62,33 +91,64 @@ function SourceSelectControlledComponent({
   const { data } = useSources();
   const hasLocalDefaultSources = !!HDX_LOCAL_DEFAULT_SOURCES;
 
-  const values = useMemo(
-    () => [
-      ...(
-        data
-          ?.filter(
-            source =>
-              (!allowedSourceKinds ||
-                allowedSourceKinds.includes(source.kind)) &&
-              (!connectionId || source.connection === connectionId),
-          )
-          .map(d => ({
-            value: d.id,
-            label: d.name,
-          })) ?? []
-      ).sort((a, b) => a.label.localeCompare(b.label)),
-      ...(onCreate && !hasLocalDefaultSources
-        ? [
-            {
-              value: '_create_new_value',
-              label: 'Create New Source',
-            },
-          ]
-        : []),
-    ],
-    [data, onCreate, allowedSourceKinds, connectionId, hasLocalDefaultSources],
+  const selectedSourceId = useWatch({
+    control: props.control,
+    name: props.name,
+  });
+
+  const selectedSourceKind = useMemo(
+    () => data?.find(s => s.id === selectedSourceId)?.kind,
+    [data, selectedSourceId],
+  );
+
+  const leftIcon = SOURCE_KIND_ICONS[selectedSourceKind ?? ''] ?? (
+    <IconStack size={16} />
   );
 
+  const hasActions =
+    (onCreate && !hasLocalDefaultSources) ||
+    (onEdit && !hasLocalDefaultSources);
+
+  const values = useMemo(() => {
+    const sourceItems = (
+      data
+        ?.filter(
+          source =>
+            (!allowedSourceKinds || allowedSourceKinds.includes(source.kind)) &&
+            (!connectionId || source.connection === connectionId),
+        )
+        .map(d => ({
+          value: d.id,
+          label: d.name,
+        })) ?? []
+    ).sort((a, b) => a.label.localeCompare(b.label));
+
+    if (!hasActions) {
+      return sourceItems;
+    }
+
+    const actionItems: { value: string; label: string }[] = [];
+    if (onCreate && !hasLocalDefaultSources) {
+      actionItems.push({
+        value: '_create_new_value',
+        label: 'Create New Source',
+      });
+    }
+    if (onEdit && !hasLocalDefaultSources) {
+      actionItems.push({ value: '_edit_sources_value', label: 'Edit Sources' });
+    }
+
+    return [...sourceItems, { group: 'Actions', items: actionItems }];
+  }, [
+    data,
+    onCreate,
+    onEdit,
+    allowedSourceKinds,
+    connectionId,
+    hasLocalDefaultSources,
+    hasActions,
+  ]);
+
   const rightSectionProps = SourceSelectRightSection({ sourceSchemaPreview });
 
   return (
@@ -96,12 +156,15 @@ function SourceSelectControlledComponent({
       {...props}
       data={values}
       comboboxProps={{ withinPortal: false, ...comboboxProps }}
+      classNames={{ groupLabel: styles.groupLabel }}
+      renderOption={renderOption}
       searchable
       placeholder="Data Source"
-      leftSection={<IconStack size={16} />}
+      leftSection={leftIcon}
       maxDropdownHeight={280}
       size={size}
       onCreate={onCreate}
+      onEdit={onEdit}
       {...rightSectionProps}
     />
   );
diff --git a/packages/app/styles/SourceSelectControlled.module.scss b/packages/app/styles/SourceSelectControlled.module.scss
index ce21864671..f586b5d2a7 100644
--- a/packages/app/styles/SourceSelectControlled.module.scss
+++ b/packages/app/styles/SourceSelectControlled.module.scss
@@ -10,3 +10,9 @@
     cursor: pointer;
   }
 }
+
+.groupLabel {
+  &::after {
+    border-color: var(--color-border);
+  }
+}

From bdcfbf4a8da86b732a81c6f2edfd909ef2718509 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 20 Mar 2026 14:47:40 +0000
Subject: [PATCH 3/7] feat: update SourceSelect to use context-aware option
 rendering with icons

Refactor SourceSelect to utilize a context-aware mapping for option icons, enhancing the user experience by displaying relevant icons based on the source kind. The renderOption function has been updated to accommodate this new logic, improving the visual representation of options in the dropdown.
---
 packages/app/src/components/SourceSelect.tsx | 44 +++++++++++++-------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/packages/app/src/components/SourceSelect.tsx b/packages/app/src/components/SourceSelect.tsx
index 735a9e6e0b..b30173236b 100644
--- a/packages/app/src/components/SourceSelect.tsx
+++ b/packages/app/src/components/SourceSelect.tsx
@@ -1,8 +1,13 @@
 import { memo, useCallback, useMemo } from 'react';
 import { UseControllerProps, useWatch } from 'react-hook-form';
 import { SourceKind } from '@hyperdx/common-utils/dist/types';
-import { Group, SelectProps, UnstyledButton } from '@mantine/core';
-import { ComboboxChevron } from '@mantine/core';
+import {
+  ComboboxChevron,
+  ComboboxItem,
+  Group,
+  SelectProps,
+  UnstyledButton,
+} from '@mantine/core';
 import {
   IconConnection,
   IconLogs,
@@ -54,22 +59,11 @@ const SOURCE_KIND_ICONS: Record<string, React.ReactNode> = {
   [SourceKind.Log]: <IconLogs size={16} />,
 };
 
-const ACTION_ICONS: Record<string, React.ReactNode> = {
+const OPTION_ICONS: Record<string, React.ReactNode> = {
   _create_new_value: <IconPlus size={14} />,
   _edit_sources_value: <IconSettings size={14} />,
 };
 
-const renderOption: SelectProps['renderOption'] = ({ option, checked }) => {
-  const icon = ACTION_ICONS[option.value];
-  if (!icon) return option.label;
-  return (
-    <Group gap="xs" wrap="nowrap">
-      {icon}
-      {option.label}
-    </Group>
-  );
-};
-
 function SourceSelectControlledComponent({
   size,
   onCreate,
@@ -105,6 +99,28 @@ function SourceSelectControlledComponent({
     <IconStack size={16} />
   );
 
+  const sourceKindMap = useMemo(() => {
+    const map = new Map<string, SourceKind>();
+    data?.forEach(s => map.set(s.id, s.kind));
+    return map;
+  }, [data]);
+
+  const renderOption = useCallback(
+    ({ option }: { option: ComboboxItem }) => {
+      const icon =
+        OPTION_ICONS[option.value] ??
+        SOURCE_KIND_ICONS[sourceKindMap.get(option.value) ?? ''];
+      if (!icon) return option.label;
+      return (
+        <Group gap="xs" wrap="nowrap">
+          {icon}
+          {option.label}
+        </Group>
+      );
+    },
+    [sourceKindMap],
+  );
+
   const hasActions =
     (onCreate && !hasLocalDefaultSources) ||
     (onEdit && !hasLocalDefaultSources);

From 5d85133bfac911a700e2b02fb7ba8dccafd55a35 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 20 Mar 2026 15:00:02 +0000
Subject: [PATCH 4/7] fix: update E2E tests for inline source actions

The source settings menu was removed in favor of inline dropdown
actions. Update global setup to wait for the source selector instead
of the removed gear icon, and update the SearchPage page object and
sources spec to interact with actions via the dropdown.

Made-with: Cursor
---
 .../app/tests/e2e/features/sources.spec.ts    | 14 ++++++-------
 .../app/tests/e2e/global-setup-fullstack.ts   |  2 +-
 .../app/tests/e2e/page-objects/SearchPage.ts  | 21 ++++++-------------
 3 files changed, 13 insertions(+), 24 deletions(-)

diff --git a/packages/app/tests/e2e/features/sources.spec.ts b/packages/app/tests/e2e/features/sources.spec.ts
index 8d2604dfc5..b56bad6fbf 100644
--- a/packages/app/tests/e2e/features/sources.spec.ts
+++ b/packages/app/tests/e2e/features/sources.spec.ts
@@ -102,15 +102,13 @@ test.describe('Sources Functionality', { tag: ['@sources'] }, () => {
     await searchPage.goto();
   });
 
-  test('should open source settings menu', async () => {
-    // Click source settings menu
-    await searchPage.sourceMenu.click();
+  test('should show source actions in dropdown', async () => {
+    // Open source selector dropdown
+    await searchPage.sourceDropdown.click();
 
-    // Verify create new source menu item is visible
+    // Verify action items are visible in the dropdown
     await expect(searchPage.createNewSourceItem).toBeVisible();
-
-    // Verify edit source menu items are visible
-    await expect(searchPage.editSourceMenuItem).toBeVisible();
+    await expect(searchPage.editSourcesItem).toBeVisible();
   });
 
   test(
@@ -144,7 +142,7 @@ test.describe('Sources Functionality', { tag: ['@sources'] }, () => {
   );
 
   test('should show proper fields when creating a new source', async () => {
-    await searchPage.sourceMenu.click();
+    await searchPage.sourceDropdown.click();
     await searchPage.createNewSourceItem.click();
     // for each source type (log, trace, session, metric), verify the correct fields are shown
     for (const sourceData of allSourcesData) {
diff --git a/packages/app/tests/e2e/global-setup-fullstack.ts b/packages/app/tests/e2e/global-setup-fullstack.ts
index 89ff37a6f0..73d2eca767 100644
--- a/packages/app/tests/e2e/global-setup-fullstack.ts
+++ b/packages/app/tests/e2e/global-setup-fullstack.ts
@@ -251,7 +251,7 @@ async function globalSetup(_config: FullConfig) {
     await page.goto('/search', { timeout: PAGE_LOAD_TIMEOUT_MS });
 
     // Wait for source selector to be ready (indicates sources are loaded)
-    await page.waitForSelector('[data-testid="source-settings-menu"]', {
+    await page.waitForSelector('[data-testid="source-selector"]', {
       state: 'visible',
       timeout: SOURCE_SELECTOR_TIMEOUT_MS,
     });
diff --git a/packages/app/tests/e2e/page-objects/SearchPage.ts b/packages/app/tests/e2e/page-objects/SearchPage.ts
index 631c5be2e1..f99eb4fc77 100644
--- a/packages/app/tests/e2e/page-objects/SearchPage.ts
+++ b/packages/app/tests/e2e/page-objects/SearchPage.ts
@@ -25,8 +25,6 @@ export class SearchPage {
   readonly savedSearchModal: SavedSearchModalComponent;
   readonly alertModal: SearchPageAlertModalComponent;
   readonly defaultTimeout: number = 3000;
-  readonly editSourceMenuItem: Locator;
-
   private readonly alertsButtonLocator: Locator;
 
   // Page-specific locators
@@ -39,8 +37,6 @@ export class SearchPage {
   private readonly luceneTab: Locator;
   private readonly sqlTab: Locator;
   private readonly sourceSelector: Locator;
-  private readonly sourceSettingsMenu: Locator;
-  private readonly createNewSourceMenuItem: Locator;
 
   constructor(page: Page, defaultTimeout: number = 3000) {
     this.page = page;
@@ -71,19 +67,14 @@ export class SearchPage {
     this.sqlTab = page.getByRole('option', { name: 'SQL', exact: true });
     this.luceneTab = page.getByRole('option', { name: 'Lucene', exact: true });
     this.sourceSelector = page.getByTestId('source-selector');
-    this.sourceSettingsMenu = page.getByTestId('source-settings-menu');
-    this.editSourceMenuItem = page.getByTestId('edit-sources-menu-item');
-    this.createNewSourceMenuItem = page.getByTestId(
-      'create-new-source-menu-item',
-    );
   }
 
-  get sourceMenu() {
-    return this.sourceSettingsMenu;
+  get createNewSourceItem() {
+    return this.page.getByRole('option', { name: 'Create New Source' });
   }
 
-  get createNewSourceItem() {
-    return this.createNewSourceMenuItem;
+  get editSourcesItem() {
+    return this.page.getByRole('option', { name: 'Edit Sources' });
   }
 
   /**
@@ -103,8 +94,8 @@ export class SearchPage {
   }
 
   async openEditSourceModal() {
-    await this.sourceSettingsMenu.click();
-    await this.editSourceMenuItem.click();
+    await this.sourceSelector.click();
+    await this.editSourcesItem.click();
   }
 
   async sourceModalShowOptionalFields() {

From 295f0bd9d243325e9307e78401dafce95d50a72b Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 20 Mar 2026 16:48:40 +0000
Subject: [PATCH 5/7] fix: restore source management UI when
 HDX_LOCAL_DEFAULT_SOURCES is set

The previous refactor removed the standalone SourceEditMenu gear icon
and moved its actions into the SourceSelectControlled dropdown, but kept
the hasLocalDefaultSources guard that hid those actions. Since the gear
icon fallback no longer exists, users with HDX_LOCAL_DEFAULT_SOURCES set
lost all access to "Create New Source" and "Edit Sources".

Remove the hasLocalDefaultSources guard so the actions always appear in
the dropdown when onCreate/onEdit callbacks are provided.

Made-with: Cursor
---
 packages/app/src/components/SourceSelect.tsx | 21 ++++----------------
 1 file changed, 4 insertions(+), 17 deletions(-)

diff --git a/packages/app/src/components/SourceSelect.tsx b/packages/app/src/components/SourceSelect.tsx
index b30173236b..760fceebfd 100644
--- a/packages/app/src/components/SourceSelect.tsx
+++ b/packages/app/src/components/SourceSelect.tsx
@@ -17,7 +17,6 @@ import {
 } from '@tabler/icons-react';
 
 import SelectControlled from '@/components/SelectControlled';
-import { HDX_LOCAL_DEFAULT_SOURCES } from '@/config';
 import { useSources } from '@/source';
 
 import styles from '../../styles/SourceSelectControlled.module.scss';
@@ -83,8 +82,6 @@ function SourceSelectControlledComponent({
 } & UseControllerProps<any> &
   SelectProps) {
   const { data } = useSources();
-  const hasLocalDefaultSources = !!HDX_LOCAL_DEFAULT_SOURCES;
-
   const selectedSourceId = useWatch({
     control: props.control,
     name: props.name,
@@ -121,9 +118,7 @@ function SourceSelectControlledComponent({
     [sourceKindMap],
   );
 
-  const hasActions =
-    (onCreate && !hasLocalDefaultSources) ||
-    (onEdit && !hasLocalDefaultSources);
+  const hasActions = !!onCreate || !!onEdit;
 
   const values = useMemo(() => {
     const sourceItems = (
@@ -144,26 +139,18 @@ function SourceSelectControlledComponent({
     }
 
     const actionItems: { value: string; label: string }[] = [];
-    if (onCreate && !hasLocalDefaultSources) {
+    if (onCreate) {
       actionItems.push({
         value: '_create_new_value',
         label: 'Create New Source',
       });
     }
-    if (onEdit && !hasLocalDefaultSources) {
+    if (onEdit) {
       actionItems.push({ value: '_edit_sources_value', label: 'Edit Sources' });
     }
 
     return [...sourceItems, { group: 'Actions', items: actionItems }];
-  }, [
-    data,
-    onCreate,
-    onEdit,
-    allowedSourceKinds,
-    connectionId,
-    hasLocalDefaultSources,
-    hasActions,
-  ]);
+  }, [data, onCreate, onEdit, allowedSourceKinds, connectionId, hasActions]);
 
   const rightSectionProps = SourceSelectRightSection({ sourceSchemaPreview });
 

From a3ae4fdbcdf7f2687563a522d7975aea77036bde Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 20 Mar 2026 17:57:44 +0000
Subject: [PATCH 6/7] feat: enhance SourceSelect with additional context-aware
 icons

Added new icons for session and metric sources in the SourceSelect component, improving visual differentiation of source types. The SourceKind enum now includes IconDeviceLaptop for sessions and IconChartLine for metrics, enhancing the user experience in the dropdown selection.
---
 packages/app/src/components/SourceSelect.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/components/SourceSelect.tsx b/packages/app/src/components/SourceSelect.tsx
index 760fceebfd..ea168186fd 100644
--- a/packages/app/src/components/SourceSelect.tsx
+++ b/packages/app/src/components/SourceSelect.tsx
@@ -9,7 +9,9 @@ import {
   UnstyledButton,
 } from '@mantine/core';
 import {
+  IconChartLine,
   IconConnection,
+  IconDeviceLaptop,
   IconLogs,
   IconPlus,
   IconSettings,
@@ -54,8 +56,10 @@ export const SourceSelectRightSection = ({
 };
 
 const SOURCE_KIND_ICONS: Record<string, React.ReactNode> = {
-  [SourceKind.Trace]: <IconConnection size={16} />,
   [SourceKind.Log]: <IconLogs size={16} />,
+  [SourceKind.Trace]: <IconConnection size={16} />,
+  [SourceKind.Session]: <IconDeviceLaptop size={16} />,
+  [SourceKind.Metric]: <IconChartLine size={16} />,
 };
 
 const OPTION_ICONS: Record<string, React.ReactNode> = {

From 4a54426ce3118116fd526e25b3d3ef45ac699bed Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 20 Mar 2026 19:12:33 +0000
Subject: [PATCH 7/7] refactor: extract special select values into enum

Replace hardcoded string values with SelectControlledSpecialValues enum
and rename _edit_sources_value to _edit_value for generality.

Made-with: Cursor
---
 packages/app/src/components/SelectControlled.tsx | 15 +++++++++++++--
 packages/app/src/components/SourceSelect.tsx     | 15 ++++++++++-----
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/app/src/components/SelectControlled.tsx b/packages/app/src/components/SelectControlled.tsx
index 8cbb325ea0..b4653198a1 100644
--- a/packages/app/src/components/SelectControlled.tsx
+++ b/packages/app/src/components/SelectControlled.tsx
@@ -2,6 +2,11 @@ import { useCallback } from 'react';
 import { useController, UseControllerProps } from 'react-hook-form';
 import { Select, SelectProps } from '@mantine/core';
 
+export enum SelectControlledSpecialValues {
+  CreateNewValue = '_create_new_value',
+  EditValue = '_edit_value',
+}
+
 export type SelectControlledProps = SelectProps &
   UseControllerProps<any> & {
     onCreate?: () => void;
@@ -39,9 +44,15 @@ export default function SelectControlled(props: SelectControlledProps) {
 
   const onChange = useCallback(
     (value: string | null) => {
-      if (value === '_create_new_value' && onCreate != null) {
+      if (
+        value === SelectControlledSpecialValues.CreateNewValue &&
+        onCreate != null
+      ) {
         onCreate();
-      } else if (value === '_edit_sources_value' && onEdit != null) {
+      } else if (
+        value === SelectControlledSpecialValues.EditValue &&
+        onEdit != null
+      ) {
         onEdit();
       } else if (value !== null || allowDeselect) {
         fieldOnChange(value);
diff --git a/packages/app/src/components/SourceSelect.tsx b/packages/app/src/components/SourceSelect.tsx
index ea168186fd..9b28cb10b7 100644
--- a/packages/app/src/components/SourceSelect.tsx
+++ b/packages/app/src/components/SourceSelect.tsx
@@ -18,7 +18,9 @@ import {
   IconStack,
 } from '@tabler/icons-react';
 
-import SelectControlled from '@/components/SelectControlled';
+import SelectControlled, {
+  SelectControlledSpecialValues,
+} from '@/components/SelectControlled';
 import { useSources } from '@/source';
 
 import styles from '../../styles/SourceSelectControlled.module.scss';
@@ -63,8 +65,8 @@ const SOURCE_KIND_ICONS: Record<string, React.ReactNode> = {
 };
 
 const OPTION_ICONS: Record<string, React.ReactNode> = {
-  _create_new_value: <IconPlus size={14} />,
-  _edit_sources_value: <IconSettings size={14} />,
+  [SelectControlledSpecialValues.CreateNewValue]: <IconPlus size={14} />,
+  [SelectControlledSpecialValues.EditValue]: <IconSettings size={14} />,
 };
 
 function SourceSelectControlledComponent({
@@ -145,12 +147,15 @@ function SourceSelectControlledComponent({
     const actionItems: { value: string; label: string }[] = [];
     if (onCreate) {
       actionItems.push({
-        value: '_create_new_value',
+        value: SelectControlledSpecialValues.CreateNewValue,
         label: 'Create New Source',
       });
     }
     if (onEdit) {
-      actionItems.push({ value: '_edit_sources_value', label: 'Edit Sources' });
+      actionItems.push({
+        value: SelectControlledSpecialValues.EditValue,
+        label: 'Edit Sources',
+      });
     }
 
     return [...sourceItems, { group: 'Actions', items: actionItems }];