mirror of
https://github.com/mudler/LocalAI.git
synced 2026-11-06 12:33:16 -05:00
Ettore Di Giacinto
fc087c13e8
The controls sit in a fieldset, which drew the browser border and padding around the rows. The rows also showed raw setting keys such as chats_egress_ceiling next to their labels. Reset the fieldset, hide the raw keys in the add-on controls, and make the row label fall back to the key in words, so a snake_case key is never a label. Add e2e and unit tests that fail when a raw key is drawn. Assisted-by: Claude Code:claude-sonnet-5-5 Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
36 lines
2.8 KiB
JavaScript
36 lines
2.8 KiB
JavaScript
import { test, expect } from '@playwright/test'
|
|
import { ADMIN, app, installedAddon, sessionFor, mockAddons } from './addons-fixtures.js'
|
|
|
|
// The host controls on an add-on's Settings tab are drawn with the same rows
|
|
// and styles as the Settings page: human labels, no raw setting key as a
|
|
// label, and the theme tokens applied.
|
|
const SHOTS = process.env.UI_SHOTS_DIR
|
|
|
|
test('the host controls of an add-on are styled like the Settings page and show no raw key as a label', async ({ page }) => {
|
|
const controlled = app({ id: 'sandbox', name: 'sandbox', title: 'Sandbox', description: 'Run commands.', shadows: ['bash'], ui: { entry: `/api/addons/sandbox/assets/${'a'.repeat(64)}/ui.js`, sdk: { min: 2, max: 2 }, controls: ['network-policy'] } })
|
|
await page.route('**/api/auth/status', route => route.fulfill({ json: sessionFor(ADMIN, { addons: true }) }))
|
|
await page.route('**/api/features', route => route.fulfill({ json: { addon_navigation: true } }))
|
|
await page.route('**/api/addons/builtin', route => route.fulfill({ json: { builtin: [] } }))
|
|
await mockAddons(page, { apps: [controlled], installed: [installedAddon({ id: 'sandbox', title: 'Sandbox' })], hostSettings: { chats_egress_ceiling: 'registries' } })
|
|
await page.route('**/api/settings', route => route.fulfill({ json: { chats_egress_ceiling: 'registries', chats_egress_audit_days: 14 } }))
|
|
await page.route('**/api/chats/admin/egress', route => route.fulfill({ json: { ceiling: 'registries', default: 'off', ports: [80, 443], audit_days: 14, registries: [], allowed_24h: 0, blocked_24h: 0 } }))
|
|
await page.setViewportSize({ width: 1360, height: 1400 })
|
|
await page.goto('/app/addons?detail=sandbox&view=settings')
|
|
const form = page.getByTestId('addon-host-controls')
|
|
await expect(form.getByTestId('host-control-network-policy')).toBeVisible()
|
|
if (SHOTS) await page.screenshot({ path: `${SHOTS}/${process.env.UI_SHOT_NAME || 'host-settings'}.png` })
|
|
|
|
// Every row has a human label, never the raw snake_case key.
|
|
const labels = await form.locator('.st-row__label').allTextContents()
|
|
expect(labels.length).toBeGreaterThan(3)
|
|
for (const text of labels) expect(text).not.toMatch(/^[a-z0-9]+(_[a-z0-9]+)+$/)
|
|
// No raw setting key is drawn anywhere in the block, and the fieldset that
|
|
// groups the controls has no browser border.
|
|
await expect(form.locator('.st-key')).toHaveCount(0)
|
|
for (const key of ['chats_egress_ceiling', 'chats_egress_default', 'chats_egress_ports', 'chats_egress_allow_private']) await expect(form).not.toContainText(key)
|
|
expect(await form.locator('fieldset').evaluate(el => getComputedStyle(el).borderTopWidth)).toBe('0px')
|
|
// The rows are styled: a row is a grid, not a plain block.
|
|
const display = await form.locator('.st-row').first().evaluate(el => getComputedStyle(el).display)
|
|
expect(display).toBe('grid')
|
|
})
|