From b0557c2422bb3c227bcdb299d495fee156359c0c Mon Sep 17 00:00:00 2001 From: pcvantol Date: Mon, 7 Sep 2026 08:21:39 +0200 Subject: [PATCH] Normalize configuration color hierarchy --- src/engineering_platform/assets/dashboard.css | 3 ++- tests/engineering/dashboard.spec.mjs | 24 +++++++++++++++++++ 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/src/engineering_platform/assets/dashboard.css b/src/engineering_platform/assets/dashboard.css index 3d4bd533..20ab63ed 100644 --- a/src/engineering_platform/assets/dashboard.css +++ b/src/engineering_platform/assets/dashboard.css @@ -736,12 +736,13 @@ html[data-theme="light"] .report-view-modal__content,html[data-theme="light"] .r .configuration-card{margin-bottom:0} .configuration-subsection-description{color:var(--dashboard-modal-muted);font-size:13px;line-height:1.4;margin:6px 0 0}.configuration-subsection-description+.configuration-controls{margin-top:16px} .configuration-server-settings{border:1px solid color-mix(in srgb,var(--house-style) 72%,transparent);border-radius:12px;margin:16px 0;padding:14px}.configuration-server-settings h2{color:var(--house-style);font-size:16px;margin:0}.configuration-server-settings .configuration-controls{margin:16px 0 0}.configuration-server-settings .configuration-controls label>span:first-child{color:var(--house-style);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase} -.configuration-central-database{border:1px solid color-mix(in srgb,var(--house-style) 72%,transparent);border-radius:12px;display:grid;gap:14px;margin:16px 0;padding:14px}.configuration-central-database__header{align-items:start;display:grid;gap:12px;grid-template-columns:minmax(0,1fr) auto}.configuration-central-database__header h2{color:var(--house-style);font-size:16px;margin:0}.configuration-central-database__header p{color:var(--dashboard-modal-muted);font-size:13px;line-height:1.4;margin:5px 0 0}.configuration-central-database__header .dashboard-action{align-self:start;white-space:nowrap}.configuration-central-database__facts{display:grid;gap:10px 16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));margin:0}.configuration-central-database__facts>div{min-width:0}.configuration-central-database__facts dt{margin:0}.configuration-central-database__facts dd{margin:3px 0 0;min-width:0}.configuration-central-database__location{grid-column:1/-1}.configuration-central-database__location-link{display:block;font:12px ui-monospace,monospace;min-width:0;white-space:pre-wrap}.configuration-central-database__maintenance{align-items:center;border-top:1px solid color-mix(in srgb,var(--house-style) 42%,transparent);display:grid;gap:12px;grid-template-columns:minmax(0,1fr) minmax(9rem,14rem);padding-top:14px}.configuration-central-database__maintenance .label{color:var(--house-style);margin:0}.configuration-central-database__maintenance p{color:var(--dashboard-modal-muted);font-size:12px;line-height:1.35;margin:4px 0 0}.configuration-central-database__maintenance select{justify-self:end;max-width:14rem;width:100%}.configuration-central-database__maintenance .dashboard-select-picker{justify-self:end;max-width:14rem;width:100%}.configuration-central-database #centralDatabaseMaintenanceStatus{color:#54d6a0;font-size:12px;margin:0;min-height:1em}.configuration-central-database #centralDatabaseMaintenanceStatus:empty{display:none}.configuration-central-database select[aria-busy="true"]{cursor:wait;opacity:.7} +.configuration-central-database{border:1px solid color-mix(in srgb,var(--house-style) 72%,transparent);border-radius:12px;display:grid;gap:14px;margin:16px 0;padding:14px}.configuration-central-database__header{align-items:start;display:grid;gap:12px;grid-template-columns:minmax(0,1fr) auto}.configuration-central-database__header h2{color:var(--house-style);font-size:16px;margin:0}.configuration-central-database__header p{color:var(--dashboard-modal-muted);font-size:13px;line-height:1.4;margin:5px 0 0}.configuration-central-database__header .dashboard-action{align-self:start;white-space:nowrap}.configuration-central-database__facts{display:grid;gap:10px 16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));margin:0}.configuration-central-database__facts>div{min-width:0}.configuration-central-database__facts dt{color:#f3d36a!important;font-size:11px;font-weight:700;letter-spacing:.04em;margin:0;text-transform:uppercase}.configuration-central-database__facts dd{margin:3px 0 0;min-width:0}.configuration-central-database__location{grid-column:1/-1}.configuration-central-database__location-link{display:block;font:12px ui-monospace,monospace;min-width:0;white-space:pre-wrap}.configuration-central-database__maintenance{align-items:center;border-top:1px solid color-mix(in srgb,var(--house-style) 42%,transparent);display:grid;gap:12px;grid-template-columns:minmax(0,1fr) minmax(9rem,14rem);padding-top:14px}.configuration-central-database__maintenance .label{color:#f3d36a;margin:0}.configuration-central-database__maintenance p{color:var(--dashboard-modal-muted);font-size:12px;line-height:1.35;margin:4px 0 0}.configuration-central-database__maintenance select{justify-self:end;max-width:14rem;width:100%}.configuration-central-database__maintenance .dashboard-select-picker{justify-self:end;max-width:14rem;width:100%}.configuration-central-database #centralDatabaseMaintenanceStatus{color:#54d6a0;font-size:12px;margin:0;min-height:1em}.configuration-central-database #centralDatabaseMaintenanceStatus:empty{display:none}.configuration-central-database select[aria-busy="true"]{cursor:wait;opacity:.7} .inbox-queue>.configuration-inbox-field,.inbox-queue>.queue-project-settings{border-top:1px solid color-mix(in srgb,var(--category-color) 40%,transparent);margin-top:16px;padding-top:16px}.inbox-queue>.queue-project-settings{margin-bottom:0} .configuration-status--saved{color:#54d6a0!important} .capacity-reserve-configuration,.telemetry-retention,.log-settings,.platform-settings,.configuration-provider-readiness-settings{border-top:1px solid color-mix(in srgb,var(--category-color) 40%,transparent);margin-top:16px;padding-top:16px} .configuration-provider-status{border:1px solid var(--house-style);border-radius:10px;display:grid;gap:8px;margin:16px 0;padding:12px}.configuration-provider-status h2{color:var(--category-color);font-size:14px;margin:0}.configuration-provider-status__row{align-items:center;display:grid;gap:8px;grid-template-columns:auto minmax(0,1fr) auto auto;min-height:36px}.configuration-provider-status__dot{background:#9a9aa3;border-radius:50%;grid-column:1;height:10px;width:10px}.configuration-provider-status__row>strong{color:var(--dashboard-modal-ink);grid-column:2;justify-self:start}.configuration-provider-status__details{display:grid;gap:6px;grid-column:2 / -1;padding-bottom:3px}.configuration-provider-status__details .configuration-validation-environment__detail{grid-template-columns:112px minmax(0,1fr)}.configuration-provider-status__row[data-provider-state="READY"] .configuration-provider-status__dot{background:#54d6a0;box-shadow:0 0 8px #54d6a066}.configuration-provider-status__row[data-provider-state="AUTH_REQUIRED"] .configuration-provider-status__dot{background:#f0b66a}.configuration-provider-status__row[data-provider-state="UNAVAILABLE"],.configuration-provider-status__row[data-provider-state="CHECK_FAILED"]{color:#ff7899}.configuration-provider-status__row[data-provider-state="UNAVAILABLE"] .configuration-provider-status__dot,.configuration-provider-status__row[data-provider-state="CHECK_FAILED"] .configuration-provider-status__dot{background:#ff7899}.configuration-provider-status__label{font-size:13px;grid-column:3;text-align:right}.configuration-provider-status__logout{background:transparent;border:1px solid #ff7899;border-radius:8px;color:#ffd8df;cursor:pointer;font:400 12px/1 system-ui;grid-column:4;min-height:32px;padding:0 10px;white-space:nowrap}.configuration-provider-status__logout:hover:not(:disabled){background:#ff718f!important;border-color:#ff718f!important;color:#23131a!important}.configuration-provider-status__logout:focus-visible{box-shadow:0 0 0 4px #ff91a188;outline:2px solid #ff91a1;outline-offset:2px}.configuration-provider-status__logout:disabled{cursor:not-allowed;opacity:.45}html[data-theme="light"] .configuration-provider-status__logout{border-color:#b8354c;color:#8e2639}html[data-theme="light"] .configuration-provider-status__logout:hover:not(:disabled){background:#ff718f!important;border-color:#ff718f!important;color:#23131a!important} .configuration-validation-environment{border:1px solid color-mix(in srgb,var(--house-style) 62%,transparent);border-radius:10px;display:grid;gap:8px;margin:0 0 16px;padding:12px}.configuration-validation-environment h3{color:var(--category-color);font-size:14px;margin:0}.configuration-validation-environment__details{display:grid;gap:6px;padding-left:18px}.configuration-validation-environment__detail{align-items:baseline;display:grid;gap:8px;grid-template-columns:92px minmax(0,1fr);font-size:12px}.configuration-validation-environment__detail>span{color:var(--dashboard-modal-muted)}.configuration-validation-environment__detail code{min-width:0;overflow-wrap:anywhere} +.configuration-card{--configuration-heading-color:var(--house-style);--configuration-label-color:#f3d36a}.configuration-card :is(.configuration-provider-status h2,.configuration-validation-environment h3,.configuration-timeout-policy h2){color:var(--configuration-heading-color)}.configuration-card .configuration-controls label>span:first-child,.configuration-card .configuration-field .label,.configuration-card .configuration-central-database__maintenance .label{color:var(--configuration-label-color)}.configuration-card .configuration-server-settings .configuration-controls label>span:first-child{color:var(--configuration-label-color)} @media (max-width:620px){ /* Long configuration labels and their values must each own a full row on direct-touch screens. This prevents the controls from squeezing into—or diff --git a/tests/engineering/dashboard.spec.mjs b/tests/engineering/dashboard.spec.mjs index acfb0f14..dbf88e23 100644 --- a/tests/engineering/dashboard.spec.mjs +++ b/tests/engineering/dashboard.spec.mjs @@ -519,6 +519,30 @@ test.describe("Engineering Status browser smoke", () => { await expect(page.locator("#executionRuntimeBanner")).toBeHidden(); }); + test("uses one color hierarchy throughout Configuration", async ({ page }) => { + await page.goto(dashboardUrl, { waitUntil: "domcontentloaded" }); + await page.waitForFunction(() => document.body?.classList.contains("dashboard-ready")); + await page.locator("#configuration").evaluate((element) => { element.open = true; }); + const colors = await page.evaluate(() => { + const values = (selector) => [...document.querySelectorAll(selector)] + .map((element) => getComputedStyle(element).color); + return { + headings: values("#configurationServerSettings h2, .configuration-central-database__header h2, #configurationHostComponents h2, .configuration-readonly-settings h2, .configuration-timeout-policy h2, #configurationProviderLoginStatus h2, #configurationValidationEnvironmentStatus h3"), + labels: [ + ["server", values("#configurationServerSettings label > span:first-child")], + ["database", values(".configuration-central-database__facts dt")], + ["maintenance", values(".configuration-central-database__maintenance .label")], + ["timeout", values(".configuration-timeout-policy .field .label")], + ], + }; + }); + expect(colors.headings.length).toBeGreaterThan(1); + const labelColors = colors.labels.flatMap(([, values]) => values); + expect(labelColors.length).toBeGreaterThan(1); + expect(new Set(colors.headings)).toEqual(new Set(["rgb(240, 182, 106)"])); + expect(new Set(labelColors)).toEqual(new Set(["rgb(243, 211, 106)"])); + }); + test("uses the compact destructive action contract for provider sign-out", async ({ page }) => { await page.setViewportSize({ width: 1440, height: 900 }); await page.route("**/api/provider-login-status", (route) => route.fulfill({ json: {