akanealw/caddy-proxy-manager
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: improve UI contrast, dark mode, dialog sizing, color coherence, and add table sorting

Browse Source 
- Fix dialog scrollability (flex layout + max-h-[90dvh]) and increase L4 dialog to lg width
- Add styled enable card to L4 dialog matching proxy host pattern
- Unify section colors across proxy host and L4 dialogs (cyan=LB, emerald=DNS, violet=upstream DNS, rose=geo, amber=mTLS)
- Improve light mode contrast: muted-foreground oklch 0.552→0.502, remove opacity modifiers on secondary text
- Improve dark mode: boost muted-foreground to 0.85, increase border opacity 10%→16%, input 15%→20%
- Add bg-card to DataTable wrapper and bg-muted/40 to table headers for surface hierarchy
- Add semantic badge variants (success, warning, info, muted) and StatusChip dark mode fix
- Add server-side sortable columns to Proxy Hosts and L4 Proxy Hosts (name, upstream, status, protocol, listen)
- Add sortKey to DataTable Column type with clickable sort headers (ArrowUp/Down indicators, URL param driven)
- Fix E2E test selectors for shadcn UI (label associations, combobox roles, dropdown menus, mobile drawer)
- Add htmlFor/id to proxy host form fields and aria-labels to select triggers for accessibility
- Add sorting E2E tests for both proxy host pages

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
fuomag9
2026-03-22 22:17:56 +01:00
parent 65753f6a8d
commit 9c60d11c2c
45 changed files with 1616 additions and 1052 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
tests/helpers/proxy-api.ts
View File

@@ -142,26 +142,26 @@ export async function createProxyHost(page: Page, config: ProxyHostConfig): Prom
await page.getByRole('button', { name: /^create$/i }).click();
await expect(page.getByRole('dialog')).not.toBeVisible({ timeout: 15_000 });
await expect(page.getByText(config.name)).toBeVisible({ timeout: 10_000 });
await expect(page.getByRole('table').getByText(config.name)).toBeVisible({ timeout: 10_000 });
}
export async function importCertificate(page: Page, config: ImportedCertificateConfig): Promise<void> {
await openCertificatesTab(page, /^Imported \(/i);
await openCertificatesTab(page, /^Imported/i);
await page.getByRole('button', { name: /import certificate/i }).click();
await expect(page.getByRole('heading', { name: /^import certificate$/i })).toBeVisible();
await page.getByRole('textbox', { name: 'Name', exact: true }).fill(config.name);
await page.getByLabel(/domains \(one per line\)/i).fill(config.domains.join('\n'));
await page.locator('[name="certificate_pem"]').fill(config.certificatePem);
await page.getByRole('button', { name: /show/i }).click();
await page.getByRole('button', { name: /show private key/i }).click();
await page.locator('[name="private_key_pem"]').fill(config.privateKeyPem);
await page.getByRole('button', { name: /^import certificate$/i }).click();
await expect(page.getByText(config.name)).toBeVisible({ timeout: 10_000 });
await expect(page.getByText(config.name).first()).toBeVisible({ timeout: 10_000 });
}
export async function generateCaCertificate(page: Page, config: GeneratedCaConfig): Promise<void> {
await openCertificatesTab(page, /^CA \/ mTLS \(/i);
await openCertificatesTab(page, /^CA \/ mTLS/i);
await page.getByRole('button', { name: /add ca certificate/i }).click();
await expect(page.getByRole('heading', { name: /^add ca certificate$/i })).toBeVisible();
@@ -181,7 +181,7 @@ export async function issueClientCertificate(
page: Page,
config: IssuedClientCertificateConfig
): Promise<Buffer> {
await openCertificatesTab(page, /^CA \/ mTLS \(/i);
await openCertificatesTab(page, /^CA \/ mTLS/i);
await expandCaRow(page, config.caName);
await page.getByRole('button', { name: /^issue cert$/i }).click();
await expect(page.getByRole('dialog', { name: /issue client certificate/i })).toBeVisible();
@@ -213,7 +213,7 @@ export async function issueClientCertificate(
}
export async function revokeIssuedClientCertificate(page: Page, caName: string, commonName: string): Promise<void> {
await openCertificatesTab(page, /^CA \/ mTLS \(/i);
await openCertificatesTab(page, /^CA \/ mTLS/i);
await expandCaRow(page, caName);
await page.getByRole('button', { name: /^manage$/i }).click();
const dialog = page.getByRole('dialog', { name: /issued client certificates/i });