From b23e4b5a5e6245332b898808b9a84885bd3a62a7 Mon Sep 17 00:00:00 2001
From: Alexey Zinoviev <alexey.zinoviev@xored.com>
Date: Thu, 2 Oct 2025 20:51:44 +0400
Subject: [PATCH 1/2] uberf-13843: protocols ui improvements Signed-off-by:
 Alexey Zinoviev <alexey.zinoviev@xored.com>

---
 .../src/components/DropdownLabelsIntl.svelte  |  3 +-
 .../components/DropdownLabelsPopupIntl.svelte | 70 ++++++++++++++++---
 .../src/components/EditEnum.svelte            |  4 +-
 .../components/typeEditors/RefEditor.svelte   | 10 ++-
 4 files changed, 76 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/components/DropdownLabelsIntl.svelte b/packages/ui/src/components/DropdownLabelsIntl.svelte
index 8b08b353093..fd5366b4595 100644
--- a/packages/ui/src/components/DropdownLabelsIntl.svelte
+++ b/packages/ui/src/components/DropdownLabelsIntl.svelte
@@ -43,6 +43,7 @@
   export let focusIndex: number = -1
   export let dataId: string | undefined = undefined
   export let noFocus: boolean = false
+  export let withSearch: boolean = false
 
   let container: HTMLElement
   let opened: boolean = false
@@ -58,7 +59,7 @@
   function openPopup () {
     if (!opened) {
       opened = true
-      showPopup(DropdownLabelsPopupIntl, { items, selected, params }, container, (result) => {
+      showPopup(DropdownLabelsPopupIntl, { items, selected, params, withSearch }, container, (result) => {
         if (result) {
           selected = result
           dispatch('selected', result)
diff --git a/packages/ui/src/components/DropdownLabelsPopupIntl.svelte b/packages/ui/src/components/DropdownLabelsPopupIntl.svelte
index 6e1f1a8ee3d..27ddacd340d 100644
--- a/packages/ui/src/components/DropdownLabelsPopupIntl.svelte
+++ b/packages/ui/src/components/DropdownLabelsPopupIntl.svelte
@@ -14,37 +14,84 @@
 -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
+  import { IntlString, translate } from '@hcengineering/platform'
+
   import type { DropdownIntlItem } from '../types'
   import IconCheck from './icons/Check.svelte'
   import Label from './Label.svelte'
-  import { Icon, resizeObserver } from '..'
+  import { deviceOptionsStore, EditWithIcon, Icon, IconSearch, languageStore, resizeObserver } from '..'
+  import ui from '../plugin'
 
   export let items: DropdownIntlItem[]
   export let selected: DropdownIntlItem['id'] | undefined = undefined
   export let params: Record<string, any> = {}
+  export let withSearch: boolean = false
+  export let searchPlaceholder: IntlString = ui.string.Search
 
   const dispatch = createEventDispatcher()
-  const btns: HTMLButtonElement[] = []
+  let btns: HTMLButtonElement[] = []
 
-  const keyDown = (ev: KeyboardEvent, n: number): void => {
+  const keyDown = (ev: KeyboardEvent, n?: number): void => {
     if (ev.key === 'ArrowDown') {
-      if (n === btns.length - 1) btns[0].focus()
+      ev.stopPropagation()
+      ev.preventDefault()
+      if (n === undefined || n === btns.length - 1) btns[0].focus()
       else btns[n + 1].focus()
     } else if (ev.key === 'ArrowUp') {
-      if (n === 0) btns[btns.length - 1].focus()
+      ev.stopPropagation()
+      ev.preventDefault()
+      if (n === undefined || n === 0) btns[btns.length - 1].focus()
       else btns[n - 1].focus()
     }
   }
+
+  let search: string = ''
+
+  async function fillSearchMap (items: DropdownIntlItem[], lang: string): Promise<void> {
+    const result: Record<IntlString, string> = {}
+    for (const item of items) {
+      result[item.label] = (await translate(item.label, item.params, lang)).toLowerCase()
+    }
+    searchMap = result
+  }
+
+  let searchMap: Record<IntlString, string> = {}
+  $: if (withSearch) {
+    void fillSearchMap(items, $languageStore)
+  } else {
+    searchMap = {}
+  }
+
+  $: filteredItems = withSearch ? items.filter((item) => searchMap[item.label]?.includes(search.toLowerCase())) : items
+  $: btns = btns.slice(0, filteredItems.length)
 </script>
 
-<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
-  <div class="menu-space" />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')} on:keydown={keyDown}>
+  {#if withSearch}
+    <div class="search">
+      <EditWithIcon
+        icon={IconSearch}
+        size={'large'}
+        width={'100%'}
+        autoFocus={!$deviceOptionsStore.isMobile}
+        bind:value={search}
+        on:change={() => dispatch('search', search)}
+        on:input={() => dispatch('search', search)}
+        placeholder={searchPlaceholder}
+      />
+    </div>
+    <div class="menu-separator" />
+  {:else}
+    <div class="menu-space" />
+  {/if}
   <div class="scroll">
     <div class="box">
-      {#each items as item, i}
+      {#each filteredItems as item, i}
         <!-- svelte-ignore a11y-mouse-events-have-key-events -->
         <button
           class="menu-item flex-between"
+          bind:this={btns[i]}
           on:mouseover={(ev) => {
             ev.currentTarget.focus()
           }}
@@ -70,3 +117,10 @@
   </div>
   <div class="menu-space" />
 </div>
+
+<style lang="scss">
+  .search {
+    display: flex;
+    padding: 0.5rem 0.5rem 0 0.5rem;
+  }
+</style>
diff --git a/plugins/setting-resources/src/components/EditEnum.svelte b/plugins/setting-resources/src/components/EditEnum.svelte
index 0594aa5a3cf..01d38f09e0b 100644
--- a/plugins/setting-resources/src/components/EditEnum.svelte
+++ b/plugins/setting-resources/src/components/EditEnum.svelte
@@ -181,8 +181,10 @@
 
   function showConfirmationDialog (): void {
     const isEnumEmpty = values.length === 0
+    const oldValues = value?.enumValues ?? []
+    const isEnumSame = values.length === oldValues.length && values.every((it, i) => it === oldValues[i])
 
-    if (isEnumEmpty) {
+    if (isEnumEmpty || isEnumSame) {
       dispatch('close')
     } else {
       showPopup(
diff --git a/plugins/setting-resources/src/components/typeEditors/RefEditor.svelte b/plugins/setting-resources/src/components/typeEditors/RefEditor.svelte
index 0c25417648d..6662ef20757 100644
--- a/plugins/setting-resources/src/components/typeEditors/RefEditor.svelte
+++ b/plugins/setting-resources/src/components/typeEditors/RefEditor.svelte
@@ -79,7 +79,15 @@
   <Label label={core.string.Class} />
 </span>
 {#if editable}
-  <DropdownLabelsIntl label={core.string.Class} items={classes} {width} bind:selected={refClass} {kind} {size} />
+  <DropdownLabelsIntl
+    label={core.string.Class}
+    items={classes}
+    {width}
+    bind:selected={refClass}
+    {kind}
+    {size}
+    withSearch
+  />
 {:else if selected}
   <Label label={selected.label} />
 {/if}

From 8122c1059f00cb95ef5569c5f5083c633d7c82b3 Mon Sep 17 00:00:00 2001
From: Alexey Zinoviev <alexey.zinoviev@xored.com>
Date: Thu, 2 Oct 2025 22:24:25 +0400
Subject: [PATCH 2/2] uberf-13843: fix review comment Signed-off-by: Alexey
 Zinoviev <alexey.zinoviev@xored.com>

---
 packages/ui/src/components/DropdownLabelsPopupIntl.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/DropdownLabelsPopupIntl.svelte b/packages/ui/src/components/DropdownLabelsPopupIntl.svelte
index 27ddacd340d..b9ed3eea960 100644
--- a/packages/ui/src/components/DropdownLabelsPopupIntl.svelte
+++ b/packages/ui/src/components/DropdownLabelsPopupIntl.svelte
@@ -46,6 +46,7 @@
   }
 
   let search: string = ''
+  $: lowerSearch = search.toLowerCase()
 
   async function fillSearchMap (items: DropdownIntlItem[], lang: string): Promise<void> {
     const result: Record<IntlString, string> = {}
@@ -62,7 +63,7 @@
     searchMap = {}
   }
 
-  $: filteredItems = withSearch ? items.filter((item) => searchMap[item.label]?.includes(search.toLowerCase())) : items
+  $: filteredItems = withSearch ? items.filter((item) => searchMap[item.label]?.includes(lowerSearch)) : items
   $: btns = btns.slice(0, filteredItems.length)
 </script>