mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-09-11 04:37:16 +00:00
MRVX
fc08b53395
* feat(ui): add global command palette (Ctrl+K) for fast navigation and search * fix(ui): address review feedback for shortcut listener, i18n parity, and search deep links * fix(ui): resolve search routing, translation keys, and palette state reset * fix(ui): improve command palette styling and sidebar transitions * fix(ui): address review feedback for typecheck, codegen, debouncing, and state reset * fix(ui): resolve effect state update warning and debounce reset in command palette * fix(ui): address review feedback for stale client search results and theme action * style(ui): apply oxfmt formatting to command palette and tests * fix(deps): update js-yaml override to resolve audit advisory * docs(api): sync the docs OpenAPI copy with the new InboundOption fields Adding Network/Security to InboundOption regenerated frontend/public/openapi.json, but docs/public/openapi.json is a hand-kept copy of that file and nothing checks it: make verify never reaches docs/, and docs-ci.yml fires only on docs/**. The two files were byte-identical on main and had diverged here, so the published API reference described a response shape the panel no longer returns. Regenerating the MDX under docs/content/docs/en/reference/api/ produced no change — the schema is read from the JSON at render time. * fix(ui): unnest the command palette row control and label its shortcut The palette row was a <button> wrapping the copy-subscription <button>. Nested interactive content is invalid HTML and React 19 logs two errors for it on every client result. The row is now a role="button" div using activateOnKey, the pattern the rest of the panel already uses, with line-height pinned so dropping the UA button style does not grow every row. Its keydown handler ignores events bubbling from the nested button: activateOnKey preventDefaults Enter, which would otherwise cancel the browser's Enter-to-click on the copy button and navigate instead. The sidebar chip hardcoded the Mac glyph while the handler accepts Ctrl as well, so Linux and Windows operators were shown a key they do not have; it now picks the modifier from the platform. Also restores the comment on ClientsPage's debouncedSearch that the deep-link change removed — the code it explains is unchanged.
74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
import { fireEvent, screen } from '@testing-library/react';
|
|
import { MemoryRouter } from 'react-router';
|
|
import { afterEach, expect, test, vi } from 'vitest';
|
|
|
|
import AppSidebar from '@/layouts/AppSidebar';
|
|
import { renderWithProviders } from './test-utils';
|
|
|
|
vi.mock('@/api/queries/useAllSettings', () => ({
|
|
useAllSettings: () => ({ allSetting: {} }),
|
|
}));
|
|
|
|
afterEach(() => {
|
|
localStorage.clear();
|
|
});
|
|
|
|
function renderSidebar() {
|
|
return renderWithProviders(
|
|
<MemoryRouter>
|
|
<AppSidebar />
|
|
</MemoryRouter>,
|
|
);
|
|
}
|
|
|
|
test('keeps the sidebar expanded after pinning it from the header and restores the choice', () => {
|
|
const first = renderSidebar();
|
|
const sidebar = first.container.querySelector('.ant-layout-sider');
|
|
const sidebarRoot = first.container.querySelector('.ant-sidebar');
|
|
|
|
expect(sidebar?.classList.contains('ant-layout-sider-collapsed')).toBe(true);
|
|
|
|
fireEvent.mouseEnter(sidebarRoot!);
|
|
|
|
const pinButton = screen.getByRole('button', { name: 'Pin sidebar' });
|
|
expect(pinButton.closest('.brand-actions')).not.toBeNull();
|
|
|
|
fireEvent.click(pinButton);
|
|
fireEvent.mouseLeave(sidebarRoot!);
|
|
|
|
expect(sidebar?.classList.contains('ant-layout-sider-collapsed')).toBe(false);
|
|
expect(sidebarRoot?.getAttribute('style')).toContain('--sider-rail: 220px');
|
|
expect(localStorage.getItem('sidebar-pinned')).toBe('true');
|
|
|
|
first.unmount();
|
|
|
|
const second = renderSidebar();
|
|
const restoredSidebar = second.container.querySelector('.ant-layout-sider');
|
|
const restoredSidebarRoot = second.container.querySelector('.ant-sidebar');
|
|
|
|
expect(restoredSidebar?.classList.contains('ant-layout-sider-collapsed')).toBe(false);
|
|
expect(restoredSidebarRoot?.getAttribute('style')).toContain('--sider-rail: 220px');
|
|
expect(screen.getByRole('button', { name: 'Pin sidebar' })).not.toBeNull();
|
|
});
|
|
|
|
test('returns to the compact rail after unpinning', () => {
|
|
const view = renderSidebar();
|
|
const sidebar = view.container.querySelector('.ant-layout-sider');
|
|
const sidebarRoot = view.container.querySelector('.ant-sidebar');
|
|
|
|
fireEvent.mouseEnter(sidebarRoot!);
|
|
fireEvent.click(screen.getByRole('button', { name: 'Pin sidebar' }));
|
|
fireEvent.click(screen.getByRole('button', { name: 'Pin sidebar' }));
|
|
fireEvent.mouseLeave(sidebarRoot!);
|
|
|
|
expect(sidebar?.classList.contains('ant-layout-sider-collapsed')).toBe(true);
|
|
expect(sidebarRoot?.getAttribute('style')).toContain('--sider-rail: 72px');
|
|
expect(localStorage.getItem('sidebar-pinned')).toBe('false');
|
|
});
|
|
|
|
test('labels the palette shortcut with the modifier the platform actually uses', () => {
|
|
const view = renderSidebar();
|
|
const chip = view.container.querySelector('.sidebar-command-kbd');
|
|
expect(chip?.textContent).toBe('CtrlK');
|
|
});
|