From 53dcafbec3f3f99f78b44bd99123eb0d003d2ee9 Mon Sep 17 00:00:00 2001 From: Val Alexander <68980965+BunsDev@users.noreply.github.com> Date: Tue, 17 Mar 2026 22:10:31 -0500 Subject: [PATCH] Config UI: click-to-reveal redacted env vars and use lightweight re-render (#49399) * Refactor CSS styles: replace hardcoded colors with CSS variables for accent colors and optimize spacing rules in layout files. * Update CSS styles: streamline selectors, enhance hover effects, and adjust focus states for chat components and layout elements. * Enhance focus styles for chat components: update border colors and box-shadow effects for improved accessibility and visual consistency. * Config UI: click-to-reveal redacted env vars and use lightweight re-render --- ui/src/styles/config.css | 7 +++++++ ui/src/ui/app-render.ts | 6 ++++++ ui/src/ui/views/config-form.node.ts | 31 ++++++++++++++++++++--------- ui/src/ui/views/config.ts | 10 ++++++---- 4 files changed, 41 insertions(+), 13 deletions(-) diff --git a/ui/src/styles/config.css b/ui/src/styles/config.css index c05bdcbe98e..455fbeb019a 100644 --- a/ui/src/styles/config.css +++ b/ui/src/styles/config.css @@ -962,6 +962,13 @@ font-size: 12px; } +/* Redacted (click-to-reveal) */ +.cfg-input--redacted, +.cfg-textarea--redacted { + cursor: pointer; + opacity: 0.7; +} + /* Number Input */ .cfg-number { display: inline-flex; diff --git a/ui/src/ui/app-render.ts b/ui/src/ui/app-render.ts index 11bcacae1ee..76a2fcb04b7 100644 --- a/ui/src/ui/app-render.ts +++ b/ui/src/ui/app-render.ts @@ -1512,6 +1512,7 @@ export function renderApp(state: AppViewState) { onRawChange: (next) => { state.configRaw = next; }, + onRequestUpdate: requestHostUpdate, onFormModeChange: (mode) => (state.configFormMode = mode), onFormPatch: (path, value) => updateConfigFormValue(state, path, value), onSearchChange: (query) => (state.configSearchQuery = query), @@ -1582,6 +1583,7 @@ export function renderApp(state: AppViewState) { onRawChange: (next) => { state.configRaw = next; }, + onRequestUpdate: requestHostUpdate, onFormModeChange: (mode) => (state.communicationsFormMode = mode), onFormPatch: (path, value) => updateConfigFormValue(state, path, value), onSearchChange: (query) => (state.communicationsSearchQuery = query), @@ -1646,6 +1648,7 @@ export function renderApp(state: AppViewState) { onRawChange: (next) => { state.configRaw = next; }, + onRequestUpdate: requestHostUpdate, onFormModeChange: (mode) => (state.appearanceFormMode = mode), onFormPatch: (path, value) => updateConfigFormValue(state, path, value), onSearchChange: (query) => (state.appearanceSearchQuery = query), @@ -1710,6 +1713,7 @@ export function renderApp(state: AppViewState) { onRawChange: (next) => { state.configRaw = next; }, + onRequestUpdate: requestHostUpdate, onFormModeChange: (mode) => (state.automationFormMode = mode), onFormPatch: (path, value) => updateConfigFormValue(state, path, value), onSearchChange: (query) => (state.automationSearchQuery = query), @@ -1774,6 +1778,7 @@ export function renderApp(state: AppViewState) { onRawChange: (next) => { state.configRaw = next; }, + onRequestUpdate: requestHostUpdate, onFormModeChange: (mode) => (state.infrastructureFormMode = mode), onFormPatch: (path, value) => updateConfigFormValue(state, path, value), onSearchChange: (query) => (state.infrastructureSearchQuery = query), @@ -1838,6 +1843,7 @@ export function renderApp(state: AppViewState) { onRawChange: (next) => { state.configRaw = next; }, + onRequestUpdate: requestHostUpdate, onFormModeChange: (mode) => (state.aiAgentsFormMode = mode), onFormPatch: (path, value) => updateConfigFormValue(state, path, value), onSearchChange: (query) => (state.aiAgentsSearchQuery = query), diff --git a/ui/src/ui/views/config-form.node.ts b/ui/src/ui/views/config-form.node.ts index e7758e1c29a..9e5be1c20f7 100644 --- a/ui/src/ui/views/config-form.node.ts +++ b/ui/src/ui/views/config-form.node.ts @@ -646,7 +646,6 @@ function renderTextInput(params: { // oxlint-disable typescript/no-base-to-string (schema.default !== undefined ? `Default: ${String(schema.default)}` : "")); const displayValue = sensitiveState.isRedacted ? "" : (value ?? ""); - const effectiveDisabled = disabled || sensitiveState.isRedacted; const effectiveInputType = sensitiveState.isSensitive && !sensitiveState.isRedacted ? "text" : inputType; @@ -658,11 +657,16 @@ function renderTextInput(params: {
{ + if (sensitiveState.isRedacted && params.onToggleSensitivePath) { + params.onToggleSensitivePath(path); + } + }} @input=${(e: Event) => { if (sensitiveState.isRedacted) { return; @@ -700,7 +704,7 @@ function renderTextInput(params: { type="button" class="cfg-input__reset" title="Reset to default" - ?disabled=${effectiveDisabled} + ?disabled=${disabled || sensitiveState.isRedacted} @click=${() => onPatch(path, schema.default)} >↺ ` @@ -830,7 +834,6 @@ function renderJsonTextarea(params: { isSensitivePathRevealed: params.isSensitivePathRevealed, }); const displayValue = sensitiveState.isRedacted ? "" : fallback; - const effectiveDisabled = disabled || sensitiveState.isRedacted; return html`
@@ -839,12 +842,17 @@ function renderJsonTextarea(params: { ${renderTags(tags)}