Skip to content

Commit f5b03f3

Browse files
bmcomfybmcomfy
authored
[System Pop Up] Hide hidden and deprecated settings from search results (#4390)
1 parent d6f6407 commit f5b03f3

File tree

3 files changed

+719
-0
lines changed

3 files changed

+719
-0
lines changed

‎browser_tests/tests/useSettingSearch.spec.ts‎

Lines changed: 289 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,289 @@
1+
import { expect } from '@playwright/test'
2+
3+
import { comfyPageFixture as test } from '../fixtures/ComfyPage'
4+
5+
test.describe('Settings Search functionality', () => {
6+
test.beforeEach(async ({ comfyPage }) => {
7+
// Register test settings to verify hidden/deprecated filtering
8+
await comfyPage.page.evaluate(() => {
9+
window['app'].registerExtension({
10+
name: 'TestSettingsExtension',
11+
settings: [
12+
{
13+
id: 'TestHiddenSetting',
14+
name: 'Test Hidden Setting',
15+
type: 'hidden',
16+
defaultValue: 'hidden_value',
17+
category: ['Test', 'Hidden']
18+
},
19+
{
20+
id: 'TestDeprecatedSetting',
21+
name: 'Test Deprecated Setting',
22+
type: 'text',
23+
defaultValue: 'deprecated_value',
24+
deprecated: true,
25+
category: ['Test', 'Deprecated']
26+
},
27+
{
28+
id: 'TestVisibleSetting',
29+
name: 'Test Visible Setting',
30+
type: 'text',
31+
defaultValue: 'visible_value',
32+
category: ['Test', 'Visible']
33+
}
34+
]
35+
})
36+
})
37+
})
38+
39+
test('can open settings dialog and use search box', async ({ comfyPage }) => {
40+
// Open settings dialog
41+
await comfyPage.page.keyboard.press('Control+,')
42+
const settingsDialog = comfyPage.page.locator('.settings-container')
43+
await expect(settingsDialog).toBeVisible()
44+
45+
// Find the search box
46+
const searchBox = comfyPage.page.locator('.settings-search-box input')
47+
await expect(searchBox).toBeVisible()
48+
49+
// Verify search box has the correct placeholder
50+
await expect(searchBox).toHaveAttribute(
51+
'placeholder',
52+
expect.stringContaining('Search')
53+
)
54+
})
55+
56+
test('search box is functional and accepts input', async ({ comfyPage }) => {
57+
// Open settings dialog
58+
await comfyPage.page.keyboard.press('Control+,')
59+
const settingsDialog = comfyPage.page.locator('.settings-container')
60+
await expect(settingsDialog).toBeVisible()
61+
62+
// Find and interact with the search box
63+
const searchBox = comfyPage.page.locator('.settings-search-box input')
64+
await searchBox.fill('Comfy')
65+
66+
// Verify the input was accepted
67+
await expect(searchBox).toHaveValue('Comfy')
68+
})
69+
70+
test('search box clears properly', async ({ comfyPage }) => {
71+
// Open settings dialog
72+
await comfyPage.page.keyboard.press('Control+,')
73+
const settingsDialog = comfyPage.page.locator('.settings-container')
74+
await expect(settingsDialog).toBeVisible()
75+
76+
// Find and interact with the search box
77+
const searchBox = comfyPage.page.locator('.settings-search-box input')
78+
await searchBox.fill('test')
79+
await expect(searchBox).toHaveValue('test')
80+
81+
// Clear the search box
82+
await searchBox.clear()
83+
await expect(searchBox).toHaveValue('')
84+
})
85+
86+
test('settings categories are visible in sidebar', async ({ comfyPage }) => {
87+
// Open settings dialog
88+
await comfyPage.page.keyboard.press('Control+,')
89+
const settingsDialog = comfyPage.page.locator('.settings-container')
90+
await expect(settingsDialog).toBeVisible()
91+
92+
// Check that the sidebar has categories
93+
const categories = comfyPage.page.locator(
94+
'.settings-sidebar .p-listbox-option'
95+
)
96+
expect(await categories.count()).toBeGreaterThan(0)
97+
98+
// Check that at least one category is visible
99+
await expect(categories.first()).toBeVisible()
100+
})
101+
102+
test('can select different categories in sidebar', async ({ comfyPage }) => {
103+
// Open settings dialog
104+
await comfyPage.page.keyboard.press('Control+,')
105+
const settingsDialog = comfyPage.page.locator('.settings-container')
106+
await expect(settingsDialog).toBeVisible()
107+
108+
// Get categories and click on different ones
109+
const categories = comfyPage.page.locator(
110+
'.settings-sidebar .p-listbox-option'
111+
)
112+
const categoryCount = await categories.count()
113+
114+
if (categoryCount > 1) {
115+
// Click on the second category
116+
await categories.nth(1).click()
117+
118+
// Verify the category is selected
119+
await expect(categories.nth(1)).toHaveClass(/p-listbox-option-selected/)
120+
}
121+
})
122+
123+
test('settings content area is visible', async ({ comfyPage }) => {
124+
// Open settings dialog
125+
await comfyPage.page.keyboard.press('Control+,')
126+
const settingsDialog = comfyPage.page.locator('.settings-container')
127+
await expect(settingsDialog).toBeVisible()
128+
129+
// Check that the content area is visible
130+
const contentArea = comfyPage.page.locator('.settings-content')
131+
await expect(contentArea).toBeVisible()
132+
133+
// Check that tab panels are visible
134+
const tabPanels = comfyPage.page.locator('.settings-tab-panels')
135+
await expect(tabPanels).toBeVisible()
136+
})
137+
138+
test('search functionality affects UI state', async ({ comfyPage }) => {
139+
// Open settings dialog
140+
await comfyPage.page.keyboard.press('Control+,')
141+
const settingsDialog = comfyPage.page.locator('.settings-container')
142+
await expect(settingsDialog).toBeVisible()
143+
144+
// Find the search box
145+
const searchBox = comfyPage.page.locator('.settings-search-box input')
146+
147+
// Type in search box
148+
await searchBox.fill('graph')
149+
await comfyPage.page.waitForTimeout(200) // Wait for debounce
150+
151+
// Verify that the search input is handled
152+
await expect(searchBox).toHaveValue('graph')
153+
})
154+
155+
test('settings dialog can be closed', async ({ comfyPage }) => {
156+
// Open settings dialog
157+
await comfyPage.page.keyboard.press('Control+,')
158+
const settingsDialog = comfyPage.page.locator('.settings-container')
159+
await expect(settingsDialog).toBeVisible()
160+
161+
// Close with escape key
162+
await comfyPage.page.keyboard.press('Escape')
163+
164+
// Verify dialog is closed
165+
await expect(settingsDialog).not.toBeVisible()
166+
})
167+
168+
test('search box has proper debouncing behavior', async ({ comfyPage }) => {
169+
// Open settings dialog
170+
await comfyPage.page.keyboard.press('Control+,')
171+
const settingsDialog = comfyPage.page.locator('.settings-container')
172+
await expect(settingsDialog).toBeVisible()
173+
174+
// Type rapidly in search box
175+
const searchBox = comfyPage.page.locator('.settings-search-box input')
176+
await searchBox.fill('a')
177+
await searchBox.fill('ab')
178+
await searchBox.fill('abc')
179+
await searchBox.fill('abcd')
180+
181+
// Wait for debounce
182+
await comfyPage.page.waitForTimeout(200)
183+
184+
// Verify final value
185+
await expect(searchBox).toHaveValue('abcd')
186+
})
187+
188+
test('search excludes hidden settings from results', async ({
189+
comfyPage
190+
}) => {
191+
// Open settings dialog
192+
await comfyPage.page.keyboard.press('Control+,')
193+
const settingsDialog = comfyPage.page.locator('.settings-container')
194+
await expect(settingsDialog).toBeVisible()
195+
196+
// Search for our test settings
197+
const searchBox = comfyPage.page.locator('.settings-search-box input')
198+
await searchBox.fill('Test')
199+
await comfyPage.page.waitForTimeout(300) // Wait for debounce
200+
201+
// Get all settings content
202+
const settingsContent = comfyPage.page.locator('.settings-tab-panels')
203+
204+
// Should show visible setting but not hidden setting
205+
await expect(settingsContent).toContainText('Test Visible Setting')
206+
await expect(settingsContent).not.toContainText('Test Hidden Setting')
207+
})
208+
209+
test('search excludes deprecated settings from results', async ({
210+
comfyPage
211+
}) => {
212+
// Open settings dialog
213+
await comfyPage.page.keyboard.press('Control+,')
214+
const settingsDialog = comfyPage.page.locator('.settings-container')
215+
await expect(settingsDialog).toBeVisible()
216+
217+
// Search for our test settings
218+
const searchBox = comfyPage.page.locator('.settings-search-box input')
219+
await searchBox.fill('Test')
220+
await comfyPage.page.waitForTimeout(300) // Wait for debounce
221+
222+
// Get all settings content
223+
const settingsContent = comfyPage.page.locator('.settings-tab-panels')
224+
225+
// Should show visible setting but not deprecated setting
226+
await expect(settingsContent).toContainText('Test Visible Setting')
227+
await expect(settingsContent).not.toContainText('Test Deprecated Setting')
228+
})
229+
230+
test('search shows visible settings but excludes hidden and deprecated', async ({
231+
comfyPage
232+
}) => {
233+
// Open settings dialog
234+
await comfyPage.page.keyboard.press('Control+,')
235+
const settingsDialog = comfyPage.page.locator('.settings-container')
236+
await expect(settingsDialog).toBeVisible()
237+
238+
// Search for our test settings
239+
const searchBox = comfyPage.page.locator('.settings-search-box input')
240+
await searchBox.fill('Test')
241+
await comfyPage.page.waitForTimeout(300) // Wait for debounce
242+
243+
// Get all settings content
244+
const settingsContent = comfyPage.page.locator('.settings-tab-panels')
245+
246+
// Should only show the visible setting
247+
await expect(settingsContent).toContainText('Test Visible Setting')
248+
249+
// Should not show hidden or deprecated settings
250+
await expect(settingsContent).not.toContainText('Test Hidden Setting')
251+
await expect(settingsContent).not.toContainText('Test Deprecated Setting')
252+
})
253+
254+
test('search by setting name excludes hidden and deprecated', async ({
255+
comfyPage
256+
}) => {
257+
// Open settings dialog
258+
await comfyPage.page.keyboard.press('Control+,')
259+
const settingsDialog = comfyPage.page.locator('.settings-container')
260+
await expect(settingsDialog).toBeVisible()
261+
262+
const searchBox = comfyPage.page.locator('.settings-search-box input')
263+
const settingsContent = comfyPage.page.locator('.settings-tab-panels')
264+
265+
// Search specifically for hidden setting by name
266+
await searchBox.clear()
267+
await searchBox.fill('Hidden')
268+
await comfyPage.page.waitForTimeout(300)
269+
270+
// Should not show the hidden setting even when searching by name
271+
await expect(settingsContent).not.toContainText('Test Hidden Setting')
272+
273+
// Search specifically for deprecated setting by name
274+
await searchBox.clear()
275+
await searchBox.fill('Deprecated')
276+
await comfyPage.page.waitForTimeout(300)
277+
278+
// Should not show the deprecated setting even when searching by name
279+
await expect(settingsContent).not.toContainText('Test Deprecated Setting')
280+
281+
// Search for visible setting by name - should work
282+
await searchBox.clear()
283+
await searchBox.fill('Visible')
284+
await comfyPage.page.waitForTimeout(300)
285+
286+
// Should show the visible setting
287+
await expect(settingsContent).toContainText('Test Visible Setting')
288+
})
289+
})

‎src/composables/setting/useSettingSearch.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,11 @@ export function useSettingSearch() {
5353
const queryLower = query.toLocaleLowerCase()
5454
const allSettings = Object.values(settingStore.settingsById)
5555
const filteredSettings = allSettings.filter((setting) => {
56+
// Filter out hidden and deprecated settings, just like in normal settings tree
57+
if (setting.type === 'hidden' || setting.deprecated) {
58+
return false
59+
}
60+
5661
const idLower = setting.id.toLowerCase()
5762
const nameLower = setting.name.toLowerCase()
5863
const translatedName = st(

0 commit comments

Comments
 (0)