elements should be SolidJS elements from defaults
+ expect(typeof arr[0]).not.toBe('string'); // first code
+ expect(typeof arr[2]).not.toBe('string'); // second code
+ });
+
+ it('handles , , tags via defaults', () => {
+ const t = getTranslator();
+ const boldResult = t.getMessage('with_b');
+ expect(Array.isArray(boldResult)).toBe(true);
+
+ const italicResult = t.getMessage('with_i');
+ expect(Array.isArray(italicResult)).toBe(true);
+
+ const pResult = t.getMessage('with_p');
+ expect(Array.isArray(pResult)).toBe(true);
+ });
+});
+
+describe('intl.getMessage — missing placeholder fallback', () => {
+ it('returns the raw key and warns when a placeholder value is missing', () => {
+ const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+ const t = translate.createTranslator(
+ mockI18n('en'),
+ solidMessageConstructor,
+ createSolidDefaultValues(),
+ );
+
+ // Mirror the try-catch pattern from intl's getMessage
+ const safeGetMessage = (key: string, values?: any) => {
+ try {
+ return t.getMessage(key, values);
+ } catch (e) {
+ console.warn('[i18n] Missing placeholder value for key:', key, e);
+ return key;
+ }
+ };
+
+ // 'plain_only' has %name% but we pass no values → should return the key
+ const result = safeGetMessage('plain_only');
+ expect(result).toBe('plain_only');
+ expect(warnSpy).toHaveBeenCalledTimes(1);
+ expect(warnSpy.mock.calls[0][1]).toBe('plain_only');
+
+ warnSpy.mockRestore();
+ });
+
+ it('still returns formatted string when all values are provided', () => {
+ const t = translate.createTranslator(
+ mockI18n('en'),
+ solidMessageConstructor,
+ createSolidDefaultValues(),
+ );
+
+ const safeGetMessage = (key: string, values?: any) => {
+ try {
+ return t.getMessage(key, values);
+ } catch {
+ return key;
+ }
+ };
+
+ const result = safeGetMessage('plain_only', { name: 'World' });
+ expect(result).toBe('Hello World');
+ });
+
+ it('returns the raw key when getPlural is missing a required placeholder', () => {
+ const mockPluralI18n = (locale: string): any => ({
+ getMessage: (key: string) => {
+ const messages: Record = {
+ plural_with_value: 'Found %count% results for %query%',
+ };
+ return messages[key] || '';
+ },
+ getUILanguage: () => locale,
+ getBaseMessage: (key: string) => mockPluralI18n('en').getMessage(key),
+ getBaseUILanguage: () => 'en',
+ });
+
+ const pt = translate.createTranslator(
+ mockPluralI18n('en'),
+ solidMessageConstructor,
+ createSolidDefaultValues(),
+ );
+
+ const safeGetPlural = (key: string, number: number, values?: any) => {
+ try {
+ return pt.getPlural(key, number, values);
+ } catch {
+ return key;
+ }
+ };
+
+ // 'query' is missing from values → should return the key
+ const result = safeGetPlural('plural_with_value', 5);
+ expect(result).toBe('plural_with_value');
+ });
+});
diff --git a/client_v2/src/__tests__/login-store.test.ts b/client_v2/src/__tests__/login-store.test.ts
new file mode 100644
index 00000000000..66eb27235e0
--- /dev/null
+++ b/client_v2/src/__tests__/login-store.test.ts
@@ -0,0 +1,46 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// Mock the API client before importing the store.
+const mockLogin = vi.fn().mockResolvedValue(undefined);
+vi.mock('panel/api/Api', () => ({
+ apiClient: {
+ login: (...args: unknown[]) => mockLogin(...args),
+ },
+}));
+
+// Mock addErrorToast so it does not depend on other stores.
+vi.mock('panel/stores/toasts', () => ({
+ addErrorToast: vi.fn(),
+}));
+
+// Mock HTML_PAGES constant.
+vi.mock('panel/helpers/constants', () => ({
+ HTML_PAGES: { LOGIN: '/login.html', MAIN: '/dashboard.html' },
+}));
+
+import { processLogin } from '../stores/login';
+
+describe('processLogin', () => {
+ beforeEach(() => {
+ mockLogin.mockClear();
+ // Prevent window.location.replace from throwing in tests.
+ Object.defineProperty(window, 'location', {
+ value: { replace: vi.fn(), origin: 'http://localhost', pathname: '/login.html' },
+ writable: true,
+ });
+ });
+
+ it('sends { name, password } to the API (not username)', async () => {
+ await processLogin({ name: 'admin', password: 'supersecret' });
+
+ expect(mockLogin).toHaveBeenCalledTimes(1);
+ expect(mockLogin).toHaveBeenCalledWith({ name: 'admin', password: 'supersecret' });
+ });
+
+ it('does not send username field', async () => {
+ await processLogin({ name: 'admin', password: 'supersecret' });
+
+ const sentArg = mockLogin.mock.calls[0][0];
+ expect(sentArg).not.toHaveProperty('username');
+ });
+});
diff --git a/client_v2/src/__tests__/pagination.test.tsx b/client_v2/src/__tests__/pagination.test.tsx
new file mode 100644
index 00000000000..3c103b5f8ab
--- /dev/null
+++ b/client_v2/src/__tests__/pagination.test.tsx
@@ -0,0 +1,167 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@solidjs/testing-library';
+import { createSignal } from 'solid-js';
+
+// CSS modules return {} under css:false, so theme class names would be
+// undefined. Mock theme with identity class names for deterministic asserts.
+vi.mock('panel/lib/theme', () => {
+ const make = (names: string[]) => Object.fromEntries(names.map((n) => [n, n]));
+ return {
+ default: {
+ pagination: make([
+ 'wrapper',
+ 'pagesContainer',
+ 'button',
+ 'button_active',
+ 'arrow',
+ 'arrow_left',
+ 'arrow_right',
+ 'summary',
+ 'dropdownText',
+ 'dropdownShowOnPage',
+ 'limitContainer',
+ ]),
+ dropdown: make(['menu', 'item', 'item_active', 'icon', 'flexDropdownWrap', 'dropdown']),
+ },
+ };
+});
+
+vi.mock('panel/common/intl', () => ({
+ default: {
+ getMessage: (key: string, values?: { value?: number }) =>
+ values?.value !== undefined ? `${key}:${values.value}` : key,
+ },
+}));
+
+vi.mock('panel/common/ui/Dropdown', () => ({
+ Dropdown: (props: any) => (
+ <>
+ props.onOpenChange?.(!props.open)}
+ >
+ {props.children}
+
+ {props.open && {props.menu}
}
+
+ ),
+}));
+
+import { generatePageNumbers, Pagination } from '../common/ui/Table/blocks/Pagination/Pagination';
+
+describe('generatePageNumbers', () => {
+ it('returns a single page when totalPages is 1', () => {
+ expect(generatePageNumbers(0, 1)).toEqual([1]);
+ });
+
+ it('shows all pages without ellipsis for a small page count', () => {
+ expect(generatePageNumbers(0, 5)).toEqual([1, 2, 3, 4, 5]);
+ });
+
+ it('inserts an ellipsis at the end when on the first page of many', () => {
+ expect(generatePageNumbers(0, 20)).toEqual([1, 2, 3, 'ellipsis', 20]);
+ });
+
+ it('inserts ellipses on both sides when in the middle of many pages', () => {
+ expect(generatePageNumbers(9, 20)).toEqual([
+ 1,
+ 'ellipsis',
+ 8,
+ 9,
+ 10,
+ 11,
+ 12,
+ 'ellipsis',
+ 20,
+ ]);
+ });
+});
+
+const baseProps = {
+ pageSize: 10,
+ totalItems: 100,
+ pageSizeOptions: [10, 20, 30],
+ onPageChange: vi.fn(),
+ onPageSizeChange: vi.fn(),
+};
+
+const pageButton = (container: HTMLElement, text: string) =>
+ [...container.querySelectorAll('button')].find((b) => b.textContent === text)!;
+
+describe('Pagination', () => {
+ it('applies the active class only to the current page button', () => {
+ const { container } = render(() => (
+ {}}
+ placeholder="Select interface"
+ />
+ ));
+
+ const trigger = document.querySelector(
+ '[data-scope="select"][data-part="trigger"]',
+ ) as HTMLElement;
+ const indicator = trigger?.querySelector('[data-part="indicator"]');
+
+ // The indicator (arrow icon) should be inside the trigger.
+ expect(indicator).toBeTruthy();
+ });
+});
+
+describe('Select — single-select (searchable combobox)', () => {
+ it('shows the selected value via an overlay above the input', () => {
+ // react-select parity: the value text is rendered behind the search
+ // input (same grid cell) so it stays visible until the user types.
+ render(() => (
+ {}}
+ isSearchable
+ placeholder="Select interface"
+ />
+ ));
+
+ const overlay = document.querySelector('.solid-combobox-single-value');
+ expect(overlay).toBeInTheDocument();
+ expect(overlay?.textContent).toBe(OPTIONS[1].label);
+
+ // The overlay and the input share the same grid wrapper.
+ const wrapper = document.querySelector('.solid-combobox-single-value-wrapper');
+ expect(wrapper).toBeInTheDocument();
+ expect(
+ wrapper?.querySelector('[data-scope="combobox"][data-part="input"]'),
+ ).toBeInTheDocument();
+
+ // The input's own placeholder is empty — the overlay shows the value.
+ const input = document.querySelector(
+ '[data-scope="combobox"][data-part="input"]',
+ ) as HTMLInputElement;
+ expect(input.placeholder).toBe('');
+ });
+
+ it('shows the placeholder overlay when no value is selected', () => {
+ render(() => (
+ {}}
+ isSearchable
+ placeholder="Select interface"
+ />
+ ));
+
+ // No value overlay.
+ expect(document.querySelector('.solid-combobox-single-value')).not.toBeInTheDocument();
+
+ // Placeholder text is rendered instead.
+ const placeholder = document.querySelector('.solid-select-placeholder');
+ expect(placeholder).toBeInTheDocument();
+ expect(placeholder?.textContent).toBe('Select interface');
+ });
+});
+
+describe('Select — multi-select (searchable combobox)', () => {
+ it('places the search input inline inside the multi-value container', () => {
+ render(() => (
+ {}}
+ isMulti
+ isSearchable
+ placeholder="Pick tags"
+ />
+ ));
+
+ const container = document.querySelector('.solid-select-multi-value-container');
+ expect(container).toBeInTheDocument();
+
+ // The search input must be a descendant of the multi-value container so
+ // it flows inline after the pills (mimics react-select).
+ const inputInside = container?.querySelector('[data-scope="combobox"][data-part="input"]');
+ expect(inputInside).toBeInTheDocument();
+ });
+
+ it('hides the dropdown arrow and shows the clear button when values exist', () => {
+ // NOTE: isClearable is intentionally NOT passed. react-select v2's
+ // CustomClearIndicator only checks hasValue, and no consumer passes
+ // isClearable, so the clear button must appear for multi-select
+ // whenever values exist.
+ render(() => (
+ {}}
+ isMulti
+ isSearchable
+ />
+ ));
+
+ // Dropdown arrow is replaced by the clear button (react-select parity).
+ const trigger = document.querySelector('[data-scope="combobox"][data-part="trigger"]');
+ expect(trigger).not.toBeInTheDocument();
+
+ const clearTrigger = document.querySelector(
+ '[data-scope="combobox"][data-part="clear-trigger"]',
+ );
+ expect(clearTrigger).toBeInTheDocument();
+ });
+});
+
+describe('Select — multi-select (non-searchable) regression', () => {
+ it('keeps the multi-value container that wraps the pills', () => {
+ // SelectMultiValue no longer renders its own container div; both the
+ // searchable and non-searchable branches must provide it (see C1 fix).
+ render(() => (
+ {}}
+ isMulti
+ isSearchable={false}
+ />
+ ));
+
+ const container = document.querySelector('.solid-select-multi-value-container');
+ expect(container).toBeInTheDocument();
+ });
+});
+
+describe('Select — empty state (nothing found)', () => {
+ it('renders a nothing-found message when the search yields no options', () => {
+ render(() => (
+ {}} isSearchable menuIsOpen placeholder="Search" />
+ ));
+
+ const empty = document.querySelector('[data-scope="combobox"][data-part="empty"]');
+ expect(empty).toBeInTheDocument();
+ expect(empty?.textContent).toContain('Nothing found');
+ });
+});
+
+describe('Select — menuFooter', () => {
+ const Footer = () => Footer content
;
+
+ it('renders menuFooter in non-searchable mode', () => {
+ render(() => (
+ {}}
+ isSearchable={false}
+ menuIsOpen
+ menuFooter={}
+ />
+ ));
+
+ // The footer must appear inside the dropdown content.
+ const content = document.querySelector('[data-scope="select"][data-part="content"]');
+ expect(content).toBeInTheDocument();
+ expect(content?.querySelector('[data-testid="test-footer"]')).toBeInTheDocument();
+ });
+
+ it('renders menuFooter in searchable non-lazy mode (Bug #2 regression)', () => {
+ // Previously, menuFooter was only rendered in the lazy branch for the
+ // searchable Combobox — the non-lazy branch omitted it entirely.
+ render(() => (
+ {}}
+ isSearchable
+ menuIsOpen
+ menuFooter={}
+ />
+ ));
+
+ const content = document.querySelector('[data-scope="combobox"][data-part="content"]');
+ expect(content).toBeInTheDocument();
+ expect(content?.querySelector('[data-testid="test-footer"]')).toBeInTheDocument();
+ });
+
+ it('renders menuFooter in searchable lazy mode', () => {
+ render(() => (
+ {}}
+ isSearchable
+ lazyList
+ menuIsOpen
+ menuFooter={}
+ />
+ ));
+
+ const content = document.querySelector('[data-scope="combobox"][data-part="content"]');
+ expect(content).toBeInTheDocument();
+ expect(content?.querySelector('[data-testid="test-footer"]')).toBeInTheDocument();
+ });
+});
+
+describe('Select — autoFocus', () => {
+ it('calls focus on the trigger in non-searchable mode', () => {
+ // jsdom may not actually move focus, but we can verify that
+ // the ref callback calls `el.focus()` when `autoFocus` is set.
+ const focusSpy = vi.spyOn(HTMLElement.prototype, 'focus');
+
+ render(() => (
+ {}}
+ isSearchable={false}
+ autoFocus
+ />
+ ));
+
+ const trigger = document.querySelector('[data-scope="select"][data-part="trigger"]');
+ expect(trigger).toBeTruthy();
+ expect(focusSpy).toHaveBeenCalled();
+
+ focusSpy.mockRestore();
+ });
+});
+
+describe('Select — onMenuScrollToBottom', () => {
+ it('fires when the lazy menu list is scrolled (Bug #3 regression)', () => {
+ // Bug #3: in lazy mode, the scrollable inner div (data-part="menu-list")
+ // had no onScroll handler — scroll events don't bubble to the Ark UI
+ // Content element, so the callback never fired. The fix attaches
+ // onScroll to both Content and the inner div.
+ const onScrollToBottom = vi.fn();
+
+ render(() => (
+ {}}
+ isSearchable
+ lazyList
+ menuIsOpen
+ onMenuScrollToBottom={onScrollToBottom}
+ />
+ ));
+
+ // The lazy list renders a scrollable inner div identified by
+ // data-part="menu-list" (CSS module class names are not available in
+ // the test environment with css: false).
+ const menuList = document.querySelector('[data-part="menu-list"]') as HTMLElement;
+ expect(menuList).toBeInTheDocument();
+
+ // In jsdom, all scroll dimensions are 0 so the "near bottom" condition
+ // (scrollHeight - scrollTop <= clientHeight + 50) is always true.
+ menuList.dispatchEvent(new Event('scroll'));
+
+ expect(onScrollToBottom).toHaveBeenCalledTimes(1);
+ });
+});
+
+describe('Select — auto-searchable threshold', () => {
+ it('uses non-searchable ArkSelect for <= 10 options by default', () => {
+ render(() => {}} />);
+
+ // ArkSelect renders data-scope="select".
+ expect(document.querySelector('[data-scope="select"]')).toBeInTheDocument();
+ expect(document.querySelector('[data-scope="combobox"]')).not.toBeInTheDocument();
+ });
+
+ it('auto-enables search for > 10 options by default (single-select)', () => {
+ render(() => {}} />);
+
+ expect(document.querySelector('[data-scope="combobox"]')).toBeInTheDocument();
+ expect(document.querySelector('[data-scope="select"]')).not.toBeInTheDocument();
+ });
+});
diff --git a/client_v2/src/__tests__/setup.ts b/client_v2/src/__tests__/setup.ts
new file mode 100644
index 00000000000..23433121063
--- /dev/null
+++ b/client_v2/src/__tests__/setup.ts
@@ -0,0 +1,21 @@
+import '@testing-library/jest-dom/vitest';
+import { afterEach } from 'vitest';
+import { cleanup } from '@solidjs/testing-library';
+
+afterEach(() => cleanup());
+
+// Mock window.matchMedia for components that use useIsMobile
+Object.defineProperty(window, 'matchMedia', {
+ writable: true,
+ value: (query: string): MediaQueryList =>
+ ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: () => {},
+ removeListener: () => {},
+ addEventListener: () => {},
+ removeEventListener: () => {},
+ dispatchEvent: () => false,
+ }) as MediaQueryList,
+});
diff --git a/client_v2/src/__tests__/static-leases-table.test.tsx b/client_v2/src/__tests__/static-leases-table.test.tsx
new file mode 100644
index 00000000000..e16d91ff1c7
--- /dev/null
+++ b/client_v2/src/__tests__/static-leases-table.test.tsx
@@ -0,0 +1,90 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@solidjs/testing-library';
+import { StaticLeasesTable } from 'panel/components/Dhcp/LeasesPage/StaticLeasesTable';
+
+const LEASES = [{ mac: 'AA:BB:CC:DD:EE:FF', ip: '192.168.1.100', hostname: 'host1' }];
+
+describe('StaticLeasesTable', () => {
+ it('renders mobile action buttons for all three actions', () => {
+ const { getByTestId } = render(() => (
+ {}}
+ onDelete={() => {}}
+ onRefresh={() => {}}
+ />
+ ));
+
+ expect(getByTestId('static-lease-edit-button')).toBeInTheDocument();
+ expect(getByTestId('static-lease-refresh-button')).toBeInTheDocument();
+ expect(getByTestId('static-lease-delete-button')).toBeInTheDocument();
+ });
+
+ it('renders desktop Dropdown trigger', () => {
+ const { getByTestId } = render(() => (
+ {}}
+ onDelete={() => {}}
+ onRefresh={() => {}}
+ />
+ ));
+
+ expect(getByTestId('static-lease-actions-dropdown')).toBeInTheDocument();
+ });
+
+ it('fires onEdit when mobile edit button clicked', () => {
+ const onEdit = vi.fn();
+ const { getByTestId } = render(() => (
+ {}}
+ onRefresh={() => {}}
+ />
+ ));
+
+ fireEvent.click(getByTestId('static-lease-edit-button'));
+ expect(onEdit).toHaveBeenCalledWith(LEASES[0]);
+ });
+
+ it('fires onRefresh when mobile refresh button clicked', () => {
+ const onRefresh = vi.fn();
+ const { getByTestId } = render(() => (
+ {}}
+ onDelete={() => {}}
+ onRefresh={onRefresh}
+ />
+ ));
+
+ fireEvent.click(getByTestId('static-lease-refresh-button'));
+ expect(onRefresh).toHaveBeenCalled();
+ });
+
+ it('fires onDelete when mobile delete button clicked', () => {
+ const onDelete = vi.fn();
+ const { getByTestId } = render(() => (
+ {}}
+ onDelete={onDelete}
+ onRefresh={() => {}}
+ />
+ ));
+
+ fireEvent.click(getByTestId('static-lease-delete-button'));
+ expect(onDelete).toHaveBeenCalledWith(LEASES[0]);
+ });
+});
diff --git a/client_v2/src/__tests__/stats-store.test.ts b/client_v2/src/__tests__/stats-store.test.ts
new file mode 100644
index 00000000000..94b76574353
--- /dev/null
+++ b/client_v2/src/__tests__/stats-store.test.ts
@@ -0,0 +1,56 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+const mocks = vi.hoisted(() => ({
+ getStats: vi.fn(),
+ searchClients: vi.fn(),
+ addErrorToast: vi.fn(),
+}));
+
+vi.mock('panel/api/Api', () => ({
+ apiClient: {
+ getStats: mocks.getStats,
+ searchClients: mocks.searchClients,
+ },
+}));
+vi.mock('panel/stores/toasts', () => ({
+ addErrorToast: mocks.addErrorToast,
+}));
+
+import { getStats, statsState } from 'panel/stores/stats';
+
+describe('getStats', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ mocks.searchClients.mockResolvedValue([]);
+ });
+
+ it('enriches top clients and stores normalizedTopClients (FR-001/019)', async () => {
+ mocks.getStats.mockResolvedValue({
+ top_clients: [{ '1.2.3.4': 5 }],
+ avg_processing_time: 0.012,
+ top_blocked_domains: [],
+ top_queried_domains: [],
+ top_upstreams_avg_time: [],
+ top_upstreams_responses: [],
+ });
+
+ await getStats();
+
+ // searchClients was called with discovered client ids
+ expect(mocks.searchClients).toHaveBeenCalledWith({
+ clients: [{ id: '1.2.3.4' }],
+ });
+ // normalizedTopClients is populated (configured bucket carries info name)
+ expect(Object.keys(statsState.normalizedTopClients.auto)).toContain('1.2.3.4');
+ });
+
+ it('converts avg_processing_time to milliseconds, falsy passthrough (FR-002)', async () => {
+ mocks.getStats.mockResolvedValue({ avg_processing_time: 0.012 });
+ await getStats();
+ expect(statsState.avgProcessingTime).toBe(12);
+
+ mocks.getStats.mockResolvedValue({ avg_processing_time: 0 });
+ await getStats();
+ expect(statsState.avgProcessingTime).toBe(0); // not NaN
+ });
+});
diff --git a/client_v2/src/__tests__/toast.test.tsx b/client_v2/src/__tests__/toast.test.tsx
new file mode 100644
index 00000000000..f6e4d342c46
--- /dev/null
+++ b/client_v2/src/__tests__/toast.test.tsx
@@ -0,0 +1,10 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@solidjs/testing-library';
+import Toast from '../components/Toasts/Toast';
+
+describe('Toast', () => {
+ it('renders the plain message when no options', () => {
+ const { getByText } = render(() => ) => ({
+ message,
+ actionLabel,
+ undoId: 'test-undo-id',
+ onUndo,
+ }),
+}));
+
+describe('toggleBlocking', () => {
+ beforeEach(async () => {
+ lastSetRules = '';
+ mocks.apiSetRules.mockClear();
+ mocks.addSuccessToast.mockClear();
+ mocks.addErrorToast.mockClear();
+ // Reset store state - the default mock impl returns lastSetRules which is ''
+ const { setRules } = await import('panel/stores/filtering');
+ await setRules('');
+ });
+
+ it('adds a blocking rule when no rule exists', async () => {
+ const result = await toggleBlocking(BLOCK_ACTIONS.BLOCK, 'example.com');
+
+ expect(result).toBe(true);
+ expect(mocks.apiSetRules).toHaveBeenCalled();
+ expect(filteringState.userRules).toContain('||example.com^$important');
+ });
+
+ it('replaces an allowlist rule with a blocking rule', async () => {
+ // Set up initial state with an allowlist rule
+ const { setRules } = await import('panel/stores/filtering');
+ await setRules('@@||allowed.example^$important\n');
+ // After setRules, lastSetRules = '@@||allowed.example^$important\n'
+ // and filteringState.userRules should match
+
+ const result = await toggleBlocking(BLOCK_ACTIONS.BLOCK, 'allowed.example');
+
+ expect(result).toBe(true);
+ expect(filteringState.userRules).toContain('||allowed.example^$important');
+ });
+
+ it('replaces a blocking rule with an allowlist rule', async () => {
+ const { setRules } = await import('panel/stores/filtering');
+ await setRules('||blocked.example^$important\n');
+
+ const result = await toggleBlocking(BLOCK_ACTIONS.UNBLOCK, 'blocked.example');
+
+ expect(result).toBe(true);
+ expect(filteringState.userRules).toContain('@@||blocked.example^$important');
+ });
+});
diff --git a/client_v2/src/api/Api.ts b/client_v2/src/api/Api.ts
new file mode 100644
index 00000000000..228229d4609
--- /dev/null
+++ b/client_v2/src/api/Api.ts
@@ -0,0 +1,746 @@
+import type { LocalesType } from 'panel/common/intl';
+
+const BASE_URL = 'control';
+
+import { getPathWithQueryString } from '../helpers/helpers';
+import { QUERY_LOGS_PAGE_LIMIT, HTML_PAGES, R_PATH_LAST_PART, THEMES } from '../helpers/constants';
+import intl from '../common/intl';
+
+type Theme = (typeof THEMES)[keyof typeof THEMES];
+
+class Api {
+ baseUrl: string;
+
+ constructor(baseUrl: string) {
+ this.baseUrl = baseUrl;
+ }
+
+ async makeRequest(path: any, method = 'POST', config: any = {}) {
+ const pathWithBase = `${this.baseUrl}/${path}`;
+ const url = config.params
+ ? getPathWithQueryString(pathWithBase, config.params)
+ : pathWithBase;
+
+ const fetchConfig: RequestInit = { method };
+ const headers: Record = {};
+
+ if (method !== 'GET' && config.data) {
+ headers['Content-Type'] = config.headers?.['Content-Type'] || 'application/json';
+ fetchConfig.body =
+ typeof config.data === 'string' ? config.data : JSON.stringify(config.data);
+ }
+
+ fetchConfig.headers = headers;
+
+ try {
+ const response = await fetch(url, fetchConfig);
+ const text = await response.text();
+ const data = text
+ ? (() => {
+ try {
+ return JSON.parse(text);
+ } catch {
+ return text;
+ }
+ })()
+ : '';
+
+ if (!response.ok) {
+ const errorPath = url;
+ const { pathname } = document.location;
+ const shouldRedirect =
+ pathname !== HTML_PAGES.LOGIN && pathname !== HTML_PAGES.INSTALL;
+
+ if (response.status === 403 && shouldRedirect) {
+ const loginPageUrl = window.location.href.replace(
+ R_PATH_LAST_PART,
+ HTML_PAGES.LOGIN,
+ );
+ window.location.replace(loginPageUrl);
+ return false;
+ }
+
+ throw new Error(`${errorPath} | ${data} | ${response.status}`);
+ }
+
+ return data;
+ } catch (error) {
+ const errorPath = url;
+
+ if (error instanceof Error && error.message.includes('|')) {
+ throw error;
+ }
+
+ throw new Error(`${errorPath} | ${error.message || error}`);
+ }
+ }
+
+ // Global methods
+ GLOBAL_STATUS = { path: 'status', method: 'GET' };
+
+ GLOBAL_TEST_UPSTREAM_DNS = { path: 'test_upstream_dns', method: 'POST' };
+
+ GLOBAL_VERSION = { path: 'version.json', method: 'POST' };
+
+ GLOBAL_UPDATE = { path: 'update', method: 'POST' };
+
+ getGlobalStatus() {
+ const { path, method } = this.GLOBAL_STATUS;
+
+ return this.makeRequest(path, method);
+ }
+
+ testUpstream(servers: any) {
+ const { path, method } = this.GLOBAL_TEST_UPSTREAM_DNS;
+ const config = {
+ data: servers,
+ };
+ return this.makeRequest(path, method, config);
+ }
+
+ getGlobalVersion(data: any) {
+ const { path, method } = this.GLOBAL_VERSION;
+ const config = {
+ data,
+ };
+ return this.makeRequest(path, method, config);
+ }
+
+ getUpdate() {
+ const { path, method } = this.GLOBAL_UPDATE;
+
+ return this.makeRequest(path, method);
+ }
+
+ // Filtering
+ FILTERING_STATUS = { path: 'filtering/status', method: 'GET' };
+
+ FILTERING_ADD_FILTER = { path: 'filtering/add_url', method: 'POST' };
+
+ FILTERING_REMOVE_FILTER = { path: 'filtering/remove_url', method: 'POST' };
+
+ FILTERING_SET_RULES = { path: 'filtering/set_rules', method: 'POST' };
+
+ FILTERING_REFRESH = { path: 'filtering/refresh', method: 'POST' };
+
+ FILTERING_SET_URL = { path: 'filtering/set_url', method: 'POST' };
+
+ FILTERING_CONFIG = { path: 'filtering/config', method: 'POST' };
+
+ FILTERING_CHECK_HOST = { path: 'filtering/check_host', method: 'GET' };
+
+ getFilteringStatus() {
+ const { path, method } = this.FILTERING_STATUS;
+
+ return this.makeRequest(path, method);
+ }
+
+ refreshFilters(config: any) {
+ const { path, method } = this.FILTERING_REFRESH;
+ const parameters = {
+ data: config,
+ };
+
+ return this.makeRequest(path, method, parameters);
+ }
+
+ addFilter(config: any) {
+ const { path, method } = this.FILTERING_ADD_FILTER;
+ const parameters = {
+ data: config,
+ };
+
+ return this.makeRequest(path, method, parameters);
+ }
+
+ removeFilter(config: any) {
+ const { path, method } = this.FILTERING_REMOVE_FILTER;
+ const parameters = {
+ data: config,
+ };
+
+ return this.makeRequest(path, method, parameters);
+ }
+
+ setRules(rules: any) {
+ const { path, method } = this.FILTERING_SET_RULES;
+ const parameters = {
+ data: rules,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ setFiltersConfig(config: any) {
+ const { path, method } = this.FILTERING_CONFIG;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ setFilterUrl(config: any) {
+ const { path, method } = this.FILTERING_SET_URL;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ checkHost(params: any) {
+ const { path, method } = this.FILTERING_CHECK_HOST;
+ const url = getPathWithQueryString(path, params);
+
+ return this.makeRequest(url, method);
+ }
+
+ // Parental
+ PARENTAL_STATUS = { path: 'parental/status', method: 'GET' };
+
+ PARENTAL_ENABLE = { path: 'parental/enable', method: 'POST' };
+
+ PARENTAL_DISABLE = { path: 'parental/disable', method: 'POST' };
+
+ getParentalStatus() {
+ const { path, method } = this.PARENTAL_STATUS;
+
+ return this.makeRequest(path, method);
+ }
+
+ enableParentalControl() {
+ const { path, method } = this.PARENTAL_ENABLE;
+
+ return this.makeRequest(path, method);
+ }
+
+ disableParentalControl() {
+ const { path, method } = this.PARENTAL_DISABLE;
+
+ return this.makeRequest(path, method);
+ }
+
+ // Safebrowsing
+ SAFEBROWSING_STATUS = { path: 'safebrowsing/status', method: 'GET' };
+
+ SAFEBROWSING_ENABLE = { path: 'safebrowsing/enable', method: 'POST' };
+
+ SAFEBROWSING_DISABLE = { path: 'safebrowsing/disable', method: 'POST' };
+
+ getSafebrowsingStatus() {
+ const { path, method } = this.SAFEBROWSING_STATUS;
+
+ return this.makeRequest(path, method);
+ }
+
+ enableSafebrowsing() {
+ const { path, method } = this.SAFEBROWSING_ENABLE;
+
+ return this.makeRequest(path, method);
+ }
+
+ disableSafebrowsing() {
+ const { path, method } = this.SAFEBROWSING_DISABLE;
+
+ return this.makeRequest(path, method);
+ }
+
+ // Safesearch
+ SAFESEARCH_STATUS = { path: 'safesearch/status', method: 'GET' };
+
+ SAFESEARCH_UPDATE = { path: 'safesearch/settings', method: 'PUT' };
+
+ getSafesearchStatus() {
+ const { path, method } = this.SAFESEARCH_STATUS;
+
+ return this.makeRequest(path, method);
+ }
+
+ /**
+ * interface SafeSearchConfig {
+ "enabled": boolean,
+ "bing": boolean,
+ "duckduckgo": boolean,
+ "google": boolean,
+ "pixabay": boolean,
+ "yandex": boolean,
+ "youtube": boolean
+ * }
+ * @param {*} data - SafeSearchConfig
+ * @returns 200 ok
+ */
+ updateSafesearch(data: any) {
+ const { path, method } = this.SAFESEARCH_UPDATE;
+ return this.makeRequest(path, method, { data });
+ }
+
+ // enableSafesearch() {
+ // const { path, method } = this.SAFESEARCH_ENABLE;
+ // return this.makeRequest(path, method);
+ // }
+
+ // disableSafesearch() {
+ // const { path, method } = this.SAFESEARCH_DISABLE;
+ // return this.makeRequest(path, method);
+ // }
+
+ // Language
+ async changeLanguage(config: { language: LocalesType }) {
+ const profile = await this.getProfile();
+ profile.language = config.language;
+
+ return this.setProfile(profile);
+ }
+
+ // Theme
+ async changeTheme(config: { theme: Theme }) {
+ const profile = await this.getProfile();
+ profile.theme = config.theme;
+
+ return this.setProfile(profile);
+ }
+
+ // DHCP
+ DHCP_STATUS = { path: 'dhcp/status', method: 'GET' };
+
+ DHCP_SET_CONFIG = { path: 'dhcp/set_config', method: 'POST' };
+
+ DHCP_FIND_ACTIVE = { path: 'dhcp/find_active_dhcp', method: 'POST' };
+
+ DHCP_INTERFACES = { path: 'dhcp/interfaces', method: 'GET' };
+
+ DHCP_ADD_STATIC_LEASE = { path: 'dhcp/add_static_lease', method: 'POST' };
+
+ DHCP_REMOVE_STATIC_LEASE = { path: 'dhcp/remove_static_lease', method: 'POST' };
+
+ DHCP_UPDATE_STATIC_LEASE = { path: 'dhcp/update_static_lease', method: 'POST' };
+
+ DHCP_RESET = { path: 'dhcp/reset', method: 'POST' };
+
+ DHCP_LEASES_RESET = { path: 'dhcp/reset_leases', method: 'POST' };
+
+ getDhcpStatus() {
+ const { path, method } = this.DHCP_STATUS;
+
+ return this.makeRequest(path, method);
+ }
+
+ getDhcpInterfaces() {
+ const { path, method } = this.DHCP_INTERFACES;
+
+ return this.makeRequest(path, method);
+ }
+
+ setDhcpConfig(config: any) {
+ const { path, method } = this.DHCP_SET_CONFIG;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ findActiveDhcp(req: any) {
+ const { path, method } = this.DHCP_FIND_ACTIVE;
+ const parameters = {
+ data: req,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ addStaticLease(config: any) {
+ const { path, method } = this.DHCP_ADD_STATIC_LEASE;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ removeStaticLease(config: any) {
+ const { path, method } = this.DHCP_REMOVE_STATIC_LEASE;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ updateStaticLease(config: any) {
+ const { path, method } = this.DHCP_UPDATE_STATIC_LEASE;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ resetDhcp() {
+ const { path, method } = this.DHCP_RESET;
+
+ return this.makeRequest(path, method);
+ }
+
+ resetDhcpLeases() {
+ const { path, method } = this.DHCP_LEASES_RESET;
+
+ return this.makeRequest(path, method);
+ }
+
+ // Installation
+ INSTALL_GET_ADDRESSES = { path: 'install/get_addresses', method: 'GET' };
+
+ INSTALL_CONFIGURE = { path: 'install/configure', method: 'POST' };
+
+ INSTALL_CHECK_CONFIG = { path: 'install/check_config', method: 'POST' };
+
+ getDefaultAddresses() {
+ const { path, method } = this.INSTALL_GET_ADDRESSES;
+
+ return this.makeRequest(path, method);
+ }
+
+ setAllSettings(config: any) {
+ const { path, method } = this.INSTALL_CONFIGURE;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ checkConfig(config: any) {
+ const { path, method } = this.INSTALL_CHECK_CONFIG;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ // DNS-over-HTTPS and DNS-over-TLS
+ TLS_STATUS = { path: 'tls/status', method: 'GET' };
+
+ TLS_CONFIG = { path: 'tls/configure', method: 'POST' };
+
+ TLS_VALIDATE = { path: 'tls/validate', method: 'POST' };
+
+ getTlsStatus() {
+ const { path, method } = this.TLS_STATUS;
+
+ return this.makeRequest(path, method);
+ }
+
+ setTlsConfig(config: any) {
+ const { path, method } = this.TLS_CONFIG;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ validateTlsConfig(config: any) {
+ const { path, method } = this.TLS_VALIDATE;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ // Per-client settings
+ GET_CLIENTS = { path: 'clients', method: 'GET' };
+
+ SEARCH_CLIENTS = { path: 'clients/search', method: 'POST' };
+
+ ADD_CLIENT = { path: 'clients/add', method: 'POST' };
+
+ DELETE_CLIENT = { path: 'clients/delete', method: 'POST' };
+
+ UPDATE_CLIENT = { path: 'clients/update', method: 'POST' };
+
+ getClients() {
+ const { path, method } = this.GET_CLIENTS;
+
+ return this.makeRequest(path, method);
+ }
+
+ addClient(config: any) {
+ const { path, method } = this.ADD_CLIENT;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ deleteClient(config: any) {
+ const { path, method } = this.DELETE_CLIENT;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ updateClient(config: any) {
+ const { path, method } = this.UPDATE_CLIENT;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ searchClients(config: any) {
+ const { path, method } = this.SEARCH_CLIENTS;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ // DNS access settings
+ ACCESS_LIST = { path: 'access/list', method: 'GET' };
+
+ ACCESS_SET = { path: 'access/set', method: 'POST' };
+
+ getAccessList() {
+ const { path, method } = this.ACCESS_LIST;
+
+ return this.makeRequest(path, method);
+ }
+
+ setAccessList(config: any) {
+ const { path, method } = this.ACCESS_SET;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ // DNS rewrites
+ REWRITES_LIST = { path: 'rewrite/list', method: 'GET' };
+
+ REWRITE_ADD = { path: 'rewrite/add', method: 'POST' };
+
+ REWRITE_UPDATE = { path: 'rewrite/update', method: 'PUT' };
+
+ REWRITE_DELETE = { path: 'rewrite/delete', method: 'POST' };
+
+ getRewritesList() {
+ const { path, method } = this.REWRITES_LIST;
+
+ return this.makeRequest(path, method);
+ }
+
+ addRewrite(config: any) {
+ const { path, method } = this.REWRITE_ADD;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ updateRewrite(config: any) {
+ const { path, method } = this.REWRITE_UPDATE;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ deleteRewrite(config: any) {
+ const { path, method } = this.REWRITE_DELETE;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ REWRITE_SETTINGS = { path: 'rewrite/settings', method: 'GET' };
+
+ REWRITE_SETTINGS_UPDATE = { path: 'rewrite/settings/update', method: 'PUT' };
+
+ getRewriteSettings() {
+ const { path, method } = this.REWRITE_SETTINGS;
+ return this.makeRequest(path, method);
+ }
+
+ updateRewriteSettings(config: { enabled: boolean }) {
+ const { path, method } = this.REWRITE_SETTINGS_UPDATE;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ // Blocked services
+ BLOCKED_SERVICES_GET = { path: 'blocked_services/get', method: 'GET' };
+
+ BLOCKED_SERVICES_UPDATE = { path: 'blocked_services/update', method: 'PUT' };
+
+ BLOCKED_SERVICES_ALL = { path: 'blocked_services/all', method: 'GET' };
+
+ getAllBlockedServices() {
+ const { path, method } = this.BLOCKED_SERVICES_ALL;
+
+ return this.makeRequest(path, method);
+ }
+
+ getBlockedServices() {
+ const { path, method } = this.BLOCKED_SERVICES_GET;
+
+ return this.makeRequest(path, method);
+ }
+
+ updateBlockedServices(config: any) {
+ const { path, method } = this.BLOCKED_SERVICES_UPDATE;
+ const parameters = {
+ data: config,
+ };
+ return this.makeRequest(path, method, parameters);
+ }
+
+ // Settings for statistics
+ GET_STATS = { path: 'stats', method: 'GET' };
+
+ GET_STATS_CONFIG = { path: 'stats/config', method: 'GET' };
+
+ UPDATE_STATS_CONFIG = { path: 'stats/config/update', method: 'PUT' };
+
+ STATS_RESET = { path: 'stats_reset', method: 'POST' };
+
+ getStats(recent?: number) {
+ const { path, method } = this.GET_STATS;
+ const config = recent ? { params: { recent } } : undefined;
+
+ return this.makeRequest(path, method, config);
+ }
+
+ getStatsConfig() {
+ const { path, method } = this.GET_STATS_CONFIG;
+
+ return this.makeRequest(path, method);
+ }
+
+ setStatsConfig(data: any) {
+ const { path, method } = this.UPDATE_STATS_CONFIG;
+ const config = {
+ data,
+ };
+ return this.makeRequest(path, method, config);
+ }
+
+ resetStats() {
+ const { path, method } = this.STATS_RESET;
+
+ return this.makeRequest(path, method);
+ }
+
+ // Query log
+ GET_QUERY_LOG = { path: 'querylog', method: 'GET' };
+
+ UPDATE_QUERY_LOG_CONFIG = { path: 'querylog/config/update', method: 'PUT' };
+
+ GET_QUERY_LOG_CONFIG = { path: 'querylog/config', method: 'GET' };
+
+ QUERY_LOG_CLEAR = { path: 'querylog_clear', method: 'POST' };
+
+ getQueryLog(params: any) {
+ const { path, method } = this.GET_QUERY_LOG;
+ const url = getPathWithQueryString(path, {
+ ...params,
+ limit: QUERY_LOGS_PAGE_LIMIT,
+ });
+
+ return this.makeRequest(url, method);
+ }
+
+ getQueryLogConfig() {
+ const { path, method } = this.GET_QUERY_LOG_CONFIG;
+
+ return this.makeRequest(path, method);
+ }
+
+ setQueryLogConfig(data: any) {
+ const { path, method } = this.UPDATE_QUERY_LOG_CONFIG;
+ const config = {
+ data,
+ };
+ return this.makeRequest(path, method, config);
+ }
+
+ clearQueryLog() {
+ const { path, method } = this.QUERY_LOG_CLEAR;
+
+ return this.makeRequest(path, method);
+ }
+
+ // Login
+ LOGIN = { path: 'login', method: 'POST' };
+
+ login(data: any) {
+ const { path, method } = this.LOGIN;
+ const config = {
+ data,
+ };
+ return this.makeRequest(path, method, config);
+ }
+
+ // Logout
+ LOGOUT_PATH = 'logout';
+
+ getLogoutUrl() {
+ return `${this.baseUrl}/${this.LOGOUT_PATH}`;
+ }
+
+ // Profile
+ GET_PROFILE = { path: 'profile', method: 'GET' };
+
+ UPDATE_PROFILE = { path: 'profile/update', method: 'PUT' };
+
+ getProfile() {
+ const { path, method } = this.GET_PROFILE;
+
+ return this.makeRequest(path, method);
+ }
+
+ setProfile(data: any) {
+ const theme = data.theme ? data.theme : THEMES.auto;
+ const defaultLanguage = intl.getUILanguage() ? intl.getUILanguage() : 'en';
+ const language = data.language ? data.language : defaultLanguage;
+
+ const { path, method } = this.UPDATE_PROFILE;
+ const config = { data: { theme, language } };
+
+ return this.makeRequest(path, method, config);
+ }
+
+ // DNS config
+ GET_DNS_CONFIG = { path: 'dns_info', method: 'GET' };
+
+ SET_DNS_CONFIG = { path: 'dns_config', method: 'POST' };
+
+ getDnsConfig() {
+ const { path, method } = this.GET_DNS_CONFIG;
+
+ return this.makeRequest(path, method);
+ }
+
+ setDnsConfig(data: any) {
+ const { path, method } = this.SET_DNS_CONFIG;
+ const config = {
+ data,
+ };
+ return this.makeRequest(path, method, config);
+ }
+
+ SET_PROTECTION = { path: 'protection', method: 'POST' };
+
+ setProtection(data: any) {
+ const { enabled, duration } = data;
+ const { path, method } = this.SET_PROTECTION;
+
+ return this.makeRequest(path, method, { data: { enabled, duration } });
+ }
+
+ // Cache
+ CLEAR_CACHE = { path: 'cache_clear', method: 'POST' };
+
+ clearCache() {
+ const { path, method } = this.CLEAR_CACHE;
+
+ return this.makeRequest(path, method);
+ }
+}
+
+export const apiClient = new Api(BASE_URL);
diff --git a/client_v2/src/common/controls/Checkbox/Checkbox.module.pcss b/client_v2/src/common/controls/Checkbox/Checkbox.module.pcss
new file mode 100644
index 00000000000..01515b37fc5
--- /dev/null
+++ b/client_v2/src/common/controls/Checkbox/Checkbox.module.pcss
@@ -0,0 +1,65 @@
+.checkbox {
+ display: inline-flex;
+ align-items: center;
+ cursor: pointer;
+ gap: 8px;
+
+ &.disabled {
+ cursor: default;
+ }
+
+ &.center {
+ align-items: center;
+ }
+
+ &.start {
+ align-items: flex-start;
+ }
+
+ &.end {
+ align-items: flex-end;
+ }
+}
+
+.input {
+ display: none;
+}
+
+.input:disabled + .handler .icon {
+ color: var(--disabled-gray-icons);
+}
+
+.input:disabled + .handler .icon_active {
+ color: var(--disabled-main-button);
+}
+
+.handler {
+ flex-shrink: 0;
+ position: relative;
+ width: 24px;
+ height: 24px;
+
+ &.plus {
+ background-color: transparent;
+ border-color: transparent;
+ }
+}
+
+.label {
+ display: grid;
+ align-items: center;
+ font-size: 16px;
+ font-weight: var(--weight-regular);
+ user-select: none;
+}
+
+.icon {
+ position: absolute;
+ width: 24px;
+ height: 24px;
+ color: var(--default-gray-icons);
+}
+
+.active {
+ color: var(--default-product-icon);
+}
diff --git a/client_v2/src/common/controls/Checkbox/Checkbox.tsx b/client_v2/src/common/controls/Checkbox/Checkbox.tsx
new file mode 100644
index 00000000000..ef977f4363e
--- /dev/null
+++ b/client_v2/src/common/controls/Checkbox/Checkbox.tsx
@@ -0,0 +1,76 @@
+import { type JSX, Show } from 'solid-js';
+import cn from 'clsx';
+import theme from 'panel/lib/theme';
+import { Icon } from 'panel/common/ui/Icon';
+
+import s from './Checkbox.module.pcss';
+
+type Props = JSX.InputHTMLAttributes & {
+ class?: string;
+ labelClass?: string;
+ overflow?: boolean;
+ onClick?: (e: MouseEvent) => void;
+ children?: JSX.Element;
+ plusStyle?: boolean;
+ verticalAlign?: 'center' | 'start' | 'end';
+ ref?: HTMLInputElement | ((el: HTMLInputElement) => void);
+};
+
+export const Checkbox = (props: Props) => {
+ const setRef = (el: HTMLInputElement) => {
+ if (typeof props.ref === 'function') {
+ props.ref(el);
+ }
+ };
+
+ return (
+ (props.onClick as any)?.(e)}
+ >
+
+
+
+
+ {props.children}
+
+
+
+ );
+};
diff --git a/client_v2/src/common/controls/Checkbox/index.ts b/client_v2/src/common/controls/Checkbox/index.ts
new file mode 100644
index 00000000000..8f59e4fbb54
--- /dev/null
+++ b/client_v2/src/common/controls/Checkbox/index.ts
@@ -0,0 +1 @@
+export { Checkbox } from './Checkbox';
diff --git a/client_v2/src/common/controls/Input/Input.module.pcss b/client_v2/src/common/controls/Input/Input.module.pcss
new file mode 100644
index 00000000000..14255c644fc
--- /dev/null
+++ b/client_v2/src/common/controls/Input/Input.module.pcss
@@ -0,0 +1,166 @@
+.inputWrapper {
+ display: flex;
+ align-items: center;
+ position: relative;
+ background-color: var(--default-page-background);
+ height: 48px;
+ overflow: hidden;
+ font-size: 16px;
+ border: 1px solid var(--default-item-divider);
+ border-radius: 8px;
+
+ &.focused {
+ border-color: var(--pressed-link);
+ }
+
+ &.disabled {
+ background-color: var(--pressed-page-background);
+
+ .input {
+ background-color: var(--pressed-page-background);
+ color: var(--default-description-text);
+ cursor: default;
+
+ &:-webkit-autofill,
+ &:-webkit-autofill:hover,
+ &:-webkit-autofill:focus {
+ box-shadow: 0 0 0 100px var(--pressed-page-background) inset;
+ }
+ }
+ }
+
+ &.small {
+ height: 40px;
+ }
+
+ &.large {
+ height: 56px;
+ }
+
+ &.borderless {
+ border: 0;
+ }
+
+ &.error {
+ border-color: var(--default-error-icon);
+ }
+
+ &.invalid {
+ border: 1px solid var(--default-error-icon);
+
+ &:focus,
+ &:hover,
+ &:active {
+ border: 1px solid var(--default-error-icon);
+ }
+ }
+
+ .input {
+ color: var(--default-main-text);
+ font-size: 16px;
+ line-height: 1.3;
+ max-width: 100%;
+ height: 100%;
+ width: 100%;
+ outline: none;
+ border: 0;
+ padding: 8px 16px;
+ border-radius: 8px;
+ background-color: var(--default-page-background);
+
+ &::placeholder {
+ color: var(--default-placeholder);
+ }
+
+ &:focus,
+ &:hover,
+ &:active {
+ outline: none;
+ }
+
+ &:-webkit-autofill,
+ &:-webkit-autofill:hover,
+ &:-webkit-autofill:focus {
+ box-shadow: 0 0 0 100px var(--default-page-background) inset;
+ caret-color: var(--default-main-text);
+ transition: background-color 5000s ease-in-out 0s;
+ }
+ }
+}
+
+.prefix {
+ padding-left: 8px;
+}
+
+.suffix {
+ padding-right: 8px;
+}
+
+.postfix {
+ padding-right: 8px;
+}
+
+.actions {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ height: 100%;
+ padding-right: 4px;
+}
+
+.clearButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ flex-shrink: 0;
+ padding: 0;
+ border: 0;
+ background: transparent;
+ color: var(--default-gray-icons);
+ cursor: pointer;
+}
+
+.suffixIcon {
+ display: flex;
+ align-items: center;
+}
+
+.inputLabel {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 4px;
+ font-size: 14px;
+ line-height: 24px;
+ color: var(--default-description-text);
+}
+
+.inputError {
+ font-size: 14px;
+ color: var(--default-error-icon);
+ margin-top: 4px;
+}
+
+.inputSuffix {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.inputIconButton {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ border: 0;
+ background: transparent;
+ color: var(--default-description-text);
+ cursor: pointer;
+}
+
+.inputIconButton:disabled {
+ opacity: 0.4;
+ cursor: default;
+}
diff --git a/client_v2/src/common/controls/Input/Input.tsx b/client_v2/src/common/controls/Input/Input.tsx
new file mode 100644
index 00000000000..8ca2c4fa9c0
--- /dev/null
+++ b/client_v2/src/common/controls/Input/Input.tsx
@@ -0,0 +1,178 @@
+import { type JSX, createSignal, createEffect, Show, untrack } from 'solid-js';
+import cn from 'clsx';
+import { Icon } from 'panel/common/ui/Icon';
+
+import intl from 'panel/common/intl';
+import s from './Input.module.pcss';
+
+type InputChangeEvent = Event & {
+ currentTarget: HTMLInputElement;
+ target: HTMLInputElement;
+};
+
+type Props = Omit, 'size' | 'onChange' | 'onBlur'> & {
+ label?: JSX.Element;
+ class?: string;
+ innerClass?: string;
+ prefixIcon?: JSX.Element;
+ suffixIcon?: JSX.Element;
+ borderless?: boolean;
+ invalid?: boolean;
+ maxLength?: number;
+ error?: boolean;
+ errorMessage?: string;
+ isClearable?: boolean;
+ onClear?: () => void;
+ inputError?: string;
+ size?: 'small' | 'medium' | 'large';
+ value?: string | number | readonly string[];
+ defaultValue?: string;
+ onChange?: (event: InputChangeEvent) => void;
+ onBlur?: (event: FocusEvent) => void;
+ ref?: HTMLInputElement | ((el: HTMLInputElement) => void);
+ onKeyDown?: (e: KeyboardEvent) => void;
+};
+
+const hasInputValue = (value: string | number | readonly string[] | undefined) => {
+ if (Array.isArray(value)) {
+ return value.length > 0;
+ }
+ return String(value ?? '').length > 0;
+};
+
+export const Input = (props: Props) => {
+ let inputRef: HTMLInputElement | undefined;
+ const [focused, setFocused] = createSignal(false);
+ const [hasValue, setHasValue] = createSignal(
+ hasInputValue(untrack(() => props.value) ?? untrack(() => props.defaultValue)),
+ );
+
+ createEffect(() => {
+ if (props.value !== undefined) {
+ setHasValue(hasInputValue(props.value));
+ }
+ });
+
+ const setInputRef = (el: HTMLInputElement) => {
+ inputRef = el;
+ if (typeof props.ref === 'function') {
+ props.ref(el);
+ }
+ };
+
+ const showClearButton = () =>
+ Boolean(props.isClearable && !props.disabled && !props.readOnly && hasValue());
+ const hasActions = () => Boolean(props.suffixIcon || showClearButton());
+
+ const handleChange = (event: InputChangeEvent) => {
+ setHasValue((event.currentTarget as HTMLInputElement).value.length > 0);
+ props.onChange?.(event);
+ };
+
+ const handleClear = () => {
+ if (!inputRef) {
+ props.onClear?.();
+ setHasValue(false);
+ return;
+ }
+
+ inputRef.value = '';
+ props.onChange?.({
+ target: inputRef,
+ currentTarget: inputRef,
+ } as unknown as InputChangeEvent);
+
+ setHasValue(false);
+ props.onClear?.();
+ };
+
+ const handleKeyDown = (e: KeyboardEvent) => {
+ // Prevent minus key entry in number inputs to avoid negative values
+ if (props.type === 'number' && e.key === '-') {
+ e.preventDefault();
+ }
+ // Forward to any external onKeyDown handler
+ props.onKeyDown?.(e);
+ };
+
+ const computedErrorMessage = () => props.inputError ?? props.errorMessage;
+
+ return (
+ <>
+
+
+ {props.label}
+
+
+
+
{props.prefixIcon}
+
setInputRef(el)}
+ accept={props.accept}
+ autofocus={props.autofocus}
+ class={cn(s.input, props.innerClass, {
+ [s.prefix]: props.prefixIcon,
+ [s.postfix]: hasActions(),
+ })}
+ onChange={handleChange}
+ onInput={(e) => (props.onInput as any)?.(e)}
+ onKeyDown={handleKeyDown}
+ type={props.type}
+ id={props.id}
+ name={props.name}
+ placeholder={props.placeholder}
+ value={props.value as string | number}
+ onFocus={() => setFocused(true)}
+ onBlur={(e) => {
+ props.onBlur?.(e);
+ setFocused(false);
+ }}
+ maxLength={props.maxLength}
+ disabled={props.disabled}
+ autocomplete={props.autocomplete}
+ />
+
+
+
+ event.preventDefault()}
+ onClick={handleClear}
+ >
+
+
+
+ {props.suffixIcon}
+
+
+
+ {computedErrorMessage()}
+
+
+ );
+};
diff --git a/client_v2/src/common/controls/Input/PasswordInput.tsx b/client_v2/src/common/controls/Input/PasswordInput.tsx
new file mode 100644
index 00000000000..b4e781e2a26
--- /dev/null
+++ b/client_v2/src/common/controls/Input/PasswordInput.tsx
@@ -0,0 +1,53 @@
+import { createSignal, Show } from 'solid-js';
+
+import { Input } from 'panel/common/controls/Input/index';
+import { Icon } from 'panel/common/ui/Icon';
+
+import styles from './Input.module.pcss';
+
+type Props = Omit[0], 'type' | 'suffixIcon' | 'onChange' | 'value'> & {
+ value: string;
+ onChange: (value: string) => void;
+ ref?: HTMLInputElement | ((el: HTMLInputElement) => void);
+};
+
+export const PasswordInput = (props: Props) => {
+ const [isPasswordVisible, setIsPasswordVisible] = createSignal(false);
+
+ return (
+
+
+ e.preventDefault()}
+ onClick={() => {
+ setIsPasswordVisible(false);
+ props.onChange('');
+ }}
+ >
+
+
+ e.preventDefault()}
+ onClick={() => setIsPasswordVisible((v) => !v)}
+ >
+
+
+ }
+ />
+ );
+};
diff --git a/client_v2/src/common/controls/Input/index.ts b/client_v2/src/common/controls/Input/index.ts
new file mode 100644
index 00000000000..6322cf3241a
--- /dev/null
+++ b/client_v2/src/common/controls/Input/index.ts
@@ -0,0 +1 @@
+export { Input } from './Input';
diff --git a/client_v2/src/common/controls/Radio/Radio.module.pcss b/client_v2/src/common/controls/Radio/Radio.module.pcss
new file mode 100644
index 00000000000..c51b933d5b3
--- /dev/null
+++ b/client_v2/src/common/controls/Radio/Radio.module.pcss
@@ -0,0 +1,91 @@
+.wrap {
+ display: flex;
+ flex-direction: column;
+}
+
+.radio {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ margin: 0;
+ padding: 8px 0;
+ cursor: pointer;
+
+ &.center {
+ align-items: center;
+ }
+
+ &.start {
+ align-items: flex-start;
+ }
+
+ &.end {
+ align-items: flex-end;
+ }
+
+ &.modal {
+ align-items: flex-start;
+
+ .text {
+ max-width: 100%;
+ font-weight: var(--weight-bold);
+ }
+
+ .description {
+ font-size: var(--fs-text-t3);
+ line-height: var(--lh-t3-normal);
+ font-weight: var(--weight-regular);
+
+ p {
+ margin-bottom: 8px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ @media (min-width: 768px) {
+ padding: 16px 0;
+ }
+ }
+}
+
+.input {
+ display: none;
+}
+
+.text {
+ max-width: 250px;
+ flex: 1;
+
+ &.fullWidth {
+ max-width: 100%;
+ }
+
+ &.disabled {
+ color: var(--disabled-main-text);
+ }
+}
+
+.description {
+ margin-top: 2px;
+ color: var(--default-description-text);
+}
+
+.icon {
+ color: var(--default-gray-icons);
+}
+
+.active {
+ transition: none;
+ color: var(--default-product-icon);
+}
+
+.input:disabled + .handler .icon {
+ color: var(--disabled-gray-icons);
+}
+
+.input:disabled:checked + .handler .icon {
+ color: var(--disabled-main-button);
+}
diff --git a/client_v2/src/common/controls/Radio/Radio.tsx b/client_v2/src/common/controls/Radio/Radio.tsx
new file mode 100644
index 00000000000..cd10714f4e3
--- /dev/null
+++ b/client_v2/src/common/controls/Radio/Radio.tsx
@@ -0,0 +1,70 @@
+import { type JSX, Show, For } from 'solid-js';
+import cn from 'clsx';
+
+import { Icon } from 'panel/common/ui/Icon';
+import theme from 'panel/lib/theme';
+import s from './Radio.module.pcss';
+
+type Props = {
+ class?: string;
+ wrapClass?: string;
+ disabled?: boolean;
+ handleChange: (e: T) => void;
+ value: T;
+ options: { text: string; value: T; description?: JSX.Element; disabled?: boolean }[];
+ name?: string;
+ textClass?: string;
+ verticalAlign?: 'center' | 'start' | 'end';
+ ref?: HTMLDivElement | ((el: HTMLDivElement) => void);
+ inModal?: boolean;
+};
+
+export const Radio = (props: Props) => {
+ const setRef = (el: HTMLDivElement) => {
+ if (typeof props.ref === 'function') {
+ props.ref(el);
+ }
+ };
+
+ return (
+ setRef(el)} class={cn(s.wrap, props.wrapClass)}>
+
+ {(o) => (
+
+
+
+
+
{o.text}
+
+ {o.description}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {props.option.label}
+
+);
diff --git a/client_v2/src/common/controls/Select/ComboboxMultiValueDisplay.tsx b/client_v2/src/common/controls/Select/ComboboxMultiValueDisplay.tsx
new file mode 100644
index 00000000000..4da5c53169d
--- /dev/null
+++ b/client_v2/src/common/controls/Select/ComboboxMultiValueDisplay.tsx
@@ -0,0 +1,31 @@
+import { type JSX, Show } from 'solid-js';
+import { Combobox as ArkCombobox, useComboboxContext } from '@ark-ui/solid';
+import { SelectMultiValue } from './SelectMultiValue';
+import { optionToValue } from './helpers';
+
+interface ComboboxMultiValueDisplayProps {
+ placeholder?: string;
+ inputId?: string;
+ onInputRef?: (el: HTMLInputElement) => void;
+}
+
+// Multi-value pills + inline search input for searchable Combobox.
+export const ComboboxMultiValueDisplay = (props: ComboboxMultiValueDisplayProps): JSX.Element => {
+ const comboCtx = useComboboxContext();
+
+ return (
+ <>
+
+ comboCtx().clearValue(optionToValue(item.value))}
+ />
+
+ = object,
+>(
+ props: SelectProps,
+): JSX.Element => {
+ /* ---- Derived state ---- */
+ const selectClass = createMemo(() =>
+ cn(
+ { 'desktop-select-always': props.mobile === false },
+ { 'mobile-select-always': props.mobile },
+ 'solid-select',
+ { 'solid-select--multi': props.isMulti },
+ { 'solid-select-big': props.size === 'big' },
+ { 'solid-select-medium': props.size === 'medium' },
+ { 'solid-select-small': props.size === 'small' },
+ { 'solid-select-responsive': props.size === 'responsive' },
+ { 'solid-select--big-limit': props.size === 'big-limit' },
+ { 'solid-select--menu-small': props.menuSize === 'small' },
+ { 'solid-select--menu-medium': props.menuSize === 'medium' },
+ { 'solid-select--menu-big': props.menuSize === 'big' },
+ { 'solid-select--menu-right': props.menuPosition === 'right' },
+ { 'solid-select--borderless': props.borderless },
+ { 'solid-select--adaptive-height': props.adaptiveHeight },
+ { 'solid-select--height-small': props.height === 'small' },
+ { 'solid-select--height-medium': props.height === 'medium' },
+ { 'solid-select--height-big': props.height === 'big' },
+ { 'solid-select--height-big-mobile': props.height === 'big-mobile' },
+ { 'solid-select--dropdown': props.isDropdownSelect },
+ { low: props.low },
+ props.class,
+ ),
+ );
+
+ const isSearchable = createMemo(() => {
+ // Explicit isSearchable prop takes precedence over defaults.
+ if (props.isSearchable !== undefined) {
+ return props.isSearchable;
+ }
+ // Default: only non-multi selects with > SEARCH_ENABLE_LIMIT options are searchable.
+ return !(props.isMulti ?? false) && props.options.length > SEARCH_ENABLE_LIMIT;
+ });
+
+ const isDisabled = createMemo(() => props.isDisabled ?? false);
+ const isMulti = createMemo(() => props.isMulti ?? false);
+ const isClearable = createMemo(() => props.isClearable ?? false);
+
+ const [searchInput, setSearchInput] = createSignal('');
+ // Label shown immediately after selection, before the async onChange round-trip
+ // updates props.value. Always overridden by props.value when available.
+ const [pendingLabel, setPendingLabel] = createSignal();
+ // DOM ref for defensive input clear in multi-select (avoids onInputValueChange loop).
+ let inputRef: HTMLInputElement | undefined;
+
+ const filteredOptions = createMemo(() => filterOptions(props.options, searchInput()));
+
+ const collection = createMemo(() =>
+ createListCollection({
+ items: filteredOptions() as any[],
+ itemToString: (item: any) => item.label,
+ itemToValue: (item: any) => optionToValue(item.value),
+ isItemDisabled: (item: any) => item.isDisabled ?? item.disabled ?? false,
+ }),
+ );
+
+ const currentValue = createMemo(() => {
+ if (!props.value) return [];
+ const arr = Array.isArray(props.value) ? props.value : [props.value];
+ return arr.map((v: any) => optionToValue(v.value));
+ });
+
+ const handleValueChange = (details: { items: any[] }) => {
+ if (isMulti()) {
+ props.onChange(details.items as any);
+ } else {
+ const item = details.items[0];
+ setPendingLabel(item?.label);
+ props.onChange(item as any);
+ }
+ };
+
+ // Attached to both Content and inner scroll div (scroll events don't bubble).
+ const onContentScroll = (e: Event) => {
+ if (!props.onMenuScrollToBottom) return;
+ const el = e.currentTarget as HTMLElement;
+ if (el.scrollHeight - el.scrollTop <= el.clientHeight + 50) {
+ props.onMenuScrollToBottom();
+ }
+ };
+
+ const positioning = createMemo(() => ({
+ placement: (props.menuPlacement === 'top' ? 'top-start' : 'bottom-start') as
+ | 'top-start'
+ | 'bottom-start',
+ sameWidth: true,
+ fitViewport: true,
+ flip: (props.menuPlacement === 'auto'
+ ? true
+ : props.menuPlacement === 'top'
+ ? ['top-start', 'bottom-start']
+ : ['bottom-start', 'top-start']) as boolean | ('top-start' | 'bottom-start')[],
+ }));
+
+ const testId = (option: any) => getItemTestId(props.optionTestIdPrefix, option.value);
+
+ const clearAriaLabel = intl.getMessage('clear_btn');
+
+ // Reads the label from the controlled value prop (option object).
+ // Falls back to pendingLabel (set on selection) before props.value updates.
+ const singleValueLabel = createMemo(() => {
+ const value = props.value;
+ if (value) {
+ const arr = Array.isArray(value) ? value : [value];
+ const label = (arr[0] as any)?.label;
+ if (label) return label;
+ }
+ return pendingLabel() ?? '';
+ });
+
+ return (
+
+ {
+ if (details.open) {
+ props.onMenuOpen?.();
+ } else {
+ props.onMenuClose?.();
+ }
+ }}
+ positioning={positioning()}
+ >
+
+
+ {
+ if (props.autoFocus) el.focus();
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ >
+ {/* ===== Searchable (Combobox) mode: Ark UI Combobox ===== */}
+
+
{
+ if (details.reason === 'input-change') {
+ setSearchInput(details.inputValue);
+ } else {
+ // Non-typing change (select/clear/close): reset filter.
+ setSearchInput('');
+ if (isMulti() && inputRef) {
+ inputRef.value = '';
+ }
+ }
+ }}
+ onOpenChange={(details) => {
+ if (details.open) {
+ setSearchInput('');
+ props.onMenuOpen?.();
+ } else {
+ // Stale search cleared by ComboboxInputReset.
+ props.onMenuClose?.();
+ }
+ }}
+ positioning={positioning()}
+ >
+
+ {
+ // Click the input when clicking the control's dead zone.
+ if (e.target === e.currentTarget) {
+ const input = (e.currentTarget as HTMLElement).querySelector(
+ 'input',
+ );
+ input?.click();
+ }
+ }}
+ >
+
+
+ {
+ inputRef = el;
+ }}
+ />
+
+ {/* Clear button shown whenever values exist. */}
+ 0}>
+
+
+
+
+
+
+
+
+
+
+
}
+ >
+
+ {props.placeholder as string}
+
+ }
+ >
+
+ {singleValueLabel()}
+
+
+
+
{
+ inputRef = el;
+ }}
+ />
+ 0}>
+
+
+
+
+
+
+
+
+
+
+
+
+ {(option) => (
+
+
+ )}
+
+ }
+ >
+
+
+
+ {props.menuFooter}
+
+ {intl.getMessage('nothing_found')}
+
+
+
+
+
+
+
+ );
+};
diff --git a/client_v2/src/common/controls/Select/SelectItemContent.tsx b/client_v2/src/common/controls/Select/SelectItemContent.tsx
new file mode 100644
index 00000000000..39614dc0576
--- /dev/null
+++ b/client_v2/src/common/controls/Select/SelectItemContent.tsx
@@ -0,0 +1,28 @@
+import { type JSX, Show } from 'solid-js';
+import { Select as ArkSelect } from '@ark-ui/solid';
+import { Icon } from 'panel/common/ui/Icon';
+import { SelectCheckIcon } from './CheckIcons';
+import s from './MenuList.module.pcss';
+
+interface ItemContentProps {
+ option: any;
+ showOptionIcon?: boolean;
+ showIcons?: boolean;
+}
+
+// Option row for the non-searchable Select branch.
+export const SelectItemContent = (props: ItemContentProps): JSX.Element => (
+ <>
+
+
+
+
+
+
+
+
+ {props.option.label}
+
+);
diff --git a/client_v2/src/common/controls/Select/SelectMultiValue.module.pcss b/client_v2/src/common/controls/Select/SelectMultiValue.module.pcss
new file mode 100644
index 00000000000..0cf43289853
--- /dev/null
+++ b/client_v2/src/common/controls/Select/SelectMultiValue.module.pcss
@@ -0,0 +1,34 @@
+.pill {
+ display: inline-flex;
+ align-items: center;
+ gap: 12px;
+ padding: 6px 8px 6px 16px;
+ border: 1px solid var(--default-item-divider);
+ border-radius: 200px;
+ background-color: var(--default-page-background);
+ cursor: default;
+ white-space: nowrap;
+}
+
+.label {
+ font-size: 14px;
+ line-height: 1.5;
+ color: var(--default-main-text);
+ max-width: 160px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.removeBtn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 20px;
+ height: 20px;
+ padding: 0;
+ border: none;
+ background: transparent;
+ cursor: pointer;
+ flex-shrink: 0;
+ color: var(--default-gray-icons);
+}
diff --git a/client_v2/src/common/controls/Select/SelectMultiValue.tsx b/client_v2/src/common/controls/Select/SelectMultiValue.tsx
new file mode 100644
index 00000000000..37950774708
--- /dev/null
+++ b/client_v2/src/common/controls/Select/SelectMultiValue.tsx
@@ -0,0 +1,37 @@
+import { For } from 'solid-js';
+import { Icon } from 'panel/common/ui/Icon';
+import intl from 'panel/common/intl';
+
+import s from './SelectMultiValue.module.pcss';
+
+interface SelectMultiValueProps {
+ items: {
+ value: string | null;
+ label: string;
+ [key: string]: any;
+ }[];
+ onRemove: (item: any) => void;
+}
+
+export const SelectMultiValue = (props: SelectMultiValueProps) => (
+
+ {(item) => (
+
+ {item.label}
+ {
+ e.stopPropagation();
+ props.onRemove(item);
+ }}
+ aria-label={intl.getMessage('remove_tag', {
+ value: item.label,
+ })}
+ >
+
+
+ )}
+
+);
diff --git a/client_v2/src/common/controls/Select/SelectMultiValueDisplay.tsx b/client_v2/src/common/controls/Select/SelectMultiValueDisplay.tsx
new file mode 100644
index 00000000000..a977b224006
--- /dev/null
+++ b/client_v2/src/common/controls/Select/SelectMultiValueDisplay.tsx
@@ -0,0 +1,25 @@
+import { type JSX, Show } from 'solid-js';
+import { useSelectContext } from '@ark-ui/solid';
+import { SelectMultiValue } from './SelectMultiValue';
+import { optionToValue } from './helpers';
+
+interface DisplayProps {
+ placeholder?: string;
+}
+
+// Multi-value pills for non-searchable Select (reads from Select context).
+export const SelectMultiValueDisplay = (props: DisplayProps): JSX.Element => {
+ const selectCtx = useSelectContext();
+
+ return (
+ {props.placeholder ?? ''}}
+ >
+ selectCtx().clearValue(optionToValue(item.value))}
+ />
+
+ );
+};
diff --git a/client_v2/src/common/controls/Select/helpers.ts b/client_v2/src/common/controls/Select/helpers.ts
new file mode 100644
index 00000000000..c06478c59d8
--- /dev/null
+++ b/client_v2/src/common/controls/Select/helpers.ts
@@ -0,0 +1,13 @@
+// Converts an option value to string; null/undefined → '' (not "null"/"undefined").
+export const optionToValue = (value: unknown): string => (value == null ? '' : String(value));
+
+// Case-insensitive label filter; empty query returns options unchanged.
+export const filterOptions = (options: T[], query: string): T[] => {
+ const q = query.toLowerCase();
+ if (!q) return options;
+ return options.filter((opt) => String(opt.label).toLowerCase().includes(q));
+};
+
+// Returns `${prefix}-${value}` for test IDs, or undefined when no prefix.
+export const getItemTestId = (prefix: string | undefined, value: unknown): string | undefined =>
+ prefix ? `${prefix}-${optionToValue(value)}` : undefined;
diff --git a/client_v2/src/common/controls/Select/index.ts b/client_v2/src/common/controls/Select/index.ts
new file mode 100644
index 00000000000..5ba2e764534
--- /dev/null
+++ b/client_v2/src/common/controls/Select/index.ts
@@ -0,0 +1,8 @@
+export type {
+ ISelectSize,
+ ISelectHeight,
+ ISelectMenuSize,
+ ISelectValue,
+ SelectProps,
+} from './types';
+export { Select } from './Select';
diff --git a/client_v2/src/common/controls/Select/types.ts b/client_v2/src/common/controls/Select/types.ts
new file mode 100644
index 00000000000..e21da7f2171
--- /dev/null
+++ b/client_v2/src/common/controls/Select/types.ts
@@ -0,0 +1,52 @@
+import { type JSX } from 'solid-js';
+import { IOption } from 'panel/lib/helpers/utils';
+
+export const SEARCH_ENABLE_LIMIT = 10;
+
+export type ISelectSize = 'auto' | 'small' | 'medium' | 'big' | 'big-limit' | 'responsive';
+export type ISelectHeight = 'small' | 'medium' | 'big' | 'big-mobile';
+export type ISelectMenuSize = 'small' | 'medium' | 'big' | 'large';
+export type ISelectValue = Multi extends true ? IOption[] : IOption;
+
+export interface SelectProps<
+ T,
+ Multi extends boolean = false,
+ ExtendOption extends Record = object,
+> {
+ size?: ISelectSize;
+ height?: ISelectHeight;
+ menuSize?: ISelectMenuSize;
+ menuPosition?: 'right';
+ mobile?: boolean;
+ isDisabled?: boolean;
+ isMulti?: Multi;
+ menuIsOpen?: boolean;
+ placeholder?: JSX.Element;
+ class?: string;
+ autoFocus?: boolean;
+ low?: boolean;
+ options: (IOption & ExtendOption)[];
+ onChange: (
+ value: Multi extends true ? (IOption & ExtendOption)[] : IOption & ExtendOption,
+ ) => void;
+ value?: (IOption & ExtendOption) | (IOption & ExtendOption)[];
+ isSearchable?: boolean;
+ id?: string;
+ inputId?: string;
+ borderless?: boolean;
+ adaptiveHeight?: boolean;
+ lazyList?: boolean;
+ closeMenuOnSelect?: boolean;
+ menuPlacement?: 'top' | 'bottom' | 'auto';
+ isClearable?: boolean;
+ onMenuScrollToBottom?: () => void;
+ isLoading?: boolean;
+ isDropdownSelect?: boolean;
+ onMenuOpen?: () => void;
+ onMenuClose?: () => void;
+ showIcons?: boolean;
+ showOptionIcon?: boolean;
+ optionTestIdPrefix?: string;
+ /** Optional footer rendered after the scrollable item list inside the dropdown. */
+ menuFooter?: JSX.Element;
+}
diff --git a/client_v2/src/common/controls/Switch/Switch.module.pcss b/client_v2/src/common/controls/Switch/Switch.module.pcss
new file mode 100644
index 00000000000..b9e17aed3b7
--- /dev/null
+++ b/client_v2/src/common/controls/Switch/Switch.module.pcss
@@ -0,0 +1,88 @@
+.switch {
+ display: inline-flex;
+ align-items: center;
+ cursor: pointer;
+ gap: 8px;
+
+ &.disabled {
+ cursor: default;
+ }
+}
+
+.input {
+ display: none;
+}
+
+.label {
+ font-size: 16px;
+ font-weight: var(--weight-medium);
+ user-select: none;
+}
+
+.handler {
+ position: relative;
+ width: 40px;
+ height: 20px;
+ border-radius: 24px;
+ background-color: var(--fills-switch-off-default);
+ transition: background-color var(--t2);
+
+ &:hover,
+ &:focus {
+ background-color: var(--fills-switch-off-hovered);
+ }
+
+ &:before {
+ content: '';
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ width: 16px;
+ height: 16px;
+ border-radius: 16px;
+ background-color: var(--fills-switch-knob);
+ transition:
+ transform var(--t2),
+ background-color var(--t2);
+ }
+}
+
+.input:checked + .handler {
+ background-color: var(--fills-switch-on-default);
+
+ &:hover,
+ &:focus {
+ background-color: var(--fills-switch-on-hovered);
+ }
+
+ &:before {
+ transform: translateX(20px);
+ }
+}
+
+.input:disabled + .handler {
+ cursor: default;
+ background-color: var(--fills-switch-off-disabled);
+
+ &:hover,
+ &:focus {
+ background-color: var(--fills-switch-off-disabled);
+ }
+
+ &:before {
+ color: var(--fills-switch-knob-disabled);
+ }
+}
+
+.input:checked:disabled + .handler {
+ background-color: var(--fills-switch-on-disabled);
+
+ &:hover,
+ &:focus {
+ background-color: var(--fills-switch-on-disabled);
+ }
+
+ &:before {
+ color: var(--fills-switch-knob-disabled);
+ }
+}
diff --git a/client_v2/src/common/controls/Switch/Switch.tsx b/client_v2/src/common/controls/Switch/Switch.tsx
new file mode 100644
index 00000000000..286d25128b2
--- /dev/null
+++ b/client_v2/src/common/controls/Switch/Switch.tsx
@@ -0,0 +1,50 @@
+import { type JSX, Show } from 'solid-js';
+import cn from 'clsx';
+
+import s from './Switch.module.pcss';
+
+type Props = Omit, 'onChange' | 'type'> & {
+ id: string;
+ checked: boolean;
+ disabled?: boolean;
+ labelClass?: string;
+ class?: string;
+ wrapperClass?: string;
+ onChange: (e: Event) => void;
+ children?: JSX.Element;
+ ref?: HTMLInputElement | ((el: HTMLInputElement) => void);
+};
+
+export const Switch = (props: Props) => {
+ const setRef = (el: HTMLInputElement) => {
+ if (typeof props.ref === 'function') {
+ props.ref(el);
+ }
+ };
+
+ const switchControls = (
+ <>
+
+
+ {props.children}
+
+
+ );
+
+ return (
+
+
+ {switchControls}
+
+
+ );
+};
diff --git a/client_v2/src/common/controls/Switch/index.ts b/client_v2/src/common/controls/Switch/index.ts
new file mode 100644
index 00000000000..cee89a18b17
--- /dev/null
+++ b/client_v2/src/common/controls/Switch/index.ts
@@ -0,0 +1 @@
+export { Switch } from './Switch';
diff --git a/client_v2/src/common/controls/Textarea/Textarea.tsx b/client_v2/src/common/controls/Textarea/Textarea.tsx
new file mode 100644
index 00000000000..5fcf1a5b86f
--- /dev/null
+++ b/client_v2/src/common/controls/Textarea/Textarea.tsx
@@ -0,0 +1,67 @@
+import { type JSX, Show } from 'solid-js';
+import cn from 'clsx';
+
+import s from './styles.module.pcss';
+
+type TextareaChangeEvent = Event & {
+ currentTarget: HTMLTextAreaElement;
+ target: HTMLTextAreaElement;
+};
+
+type Props = Omit, 'onChange' | 'onBlur'> & {
+ label?: JSX.Element;
+ size?: 'small' | 'medium' | 'large';
+ errorMessage?: string;
+ ref?: HTMLTextAreaElement | ((el: HTMLTextAreaElement) => void);
+ onChange?: (event: TextareaChangeEvent) => void;
+ onBlur?: (event: FocusEvent) => void;
+};
+
+export const Textarea = (props: Props) => {
+ const setRef = (el: HTMLTextAreaElement) => {
+ if (typeof props.ref === 'function') {
+ props.ref(el);
+ }
+ };
+
+ const handleChange = (e: TextareaChangeEvent) => {
+ props.onChange?.(e);
+ };
+
+ const handleBlur = (e: FocusEvent) => {
+ props.onBlur?.(e);
+ };
+
+ return (
+
+
+
+ {props.label}
+
+
+