vultr/openclaw
1
0
Fork 0
mirror of https://github.com/openclaw/openclaw.git synced 2026-03-28 10:22:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: share config section card rendering

Browse Source
This commit is contained in:
Peter Steinberger
2026-03-26 23:03:22 +00:00
parent 4890656d9d
commit 0106b0488a
1 changed files with 58 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
ui/src/ui/views/config-form.render.ts
View File

@@ -435,6 +435,46 @@ export function renderConfigForm(props: ConfigFormProps) {
`;
}
const renderSectionCard = (params: {
id: string;
sectionKey: string;
label: string;
description: string;
node: JsonSchema;
nodeValue: unknown;
path: Array<string | number>;
}) => html`
<section class="config-section-card" id=${params.id}>
<div class="config-section-card__header">
<span class="config-section-card__icon">${getSectionIcon(params.sectionKey)}</span>
<div class="config-section-card__titles">
<h3 class="config-section-card__title">${params.label}</h3>
${
params.description
? html`<p class="config-section-card__desc">${params.description}</p>`
: nothing
}
</div>
</div>
<div class="config-section-card__content">
${renderNode({
schema: params.node,
value: params.nodeValue,
path: params.path,
hints: props.uiHints,
unsupported,
disabled: props.disabled ?? false,
showLabel: false,
searchCriteria,
revealSensitive: props.revealSensitive ?? false,
isSensitivePathRevealed: props.isSensitivePathRevealed,
onToggleSensitivePath: props.onToggleSensitivePath,
onPatch: props.onPatch,
})}
</div>
</section>
`;
return html`
<div class="config-form config-form--modern">
${
@@ -449,38 +489,15 @@ export function renderConfigForm(props: ConfigFormProps) {
sectionValue && typeof sectionValue === "object"
? (sectionValue as Record<string, unknown>)[subsectionKey]
: undefined;
const id = `config-section-${sectionKey}-${subsectionKey}`;
return html`
<section class="config-section-card" id=${id}>
<div class="config-section-card__header">
<span class="config-section-card__icon">${getSectionIcon(sectionKey)}</span>
<div class="config-section-card__titles">
<h3 class="config-section-card__title">${label}</h3>
${
description
? html`<p class="config-section-card__desc">${description}</p>`
: nothing
}
</div>
</div>
<div class="config-section-card__content">
${renderNode({
schema: node,
value: scopedValue,
path: [sectionKey, subsectionKey],
hints: props.uiHints,
unsupported,
disabled: props.disabled ?? false,
showLabel: false,
searchCriteria,
revealSensitive: props.revealSensitive ?? false,
isSensitivePathRevealed: props.isSensitivePathRevealed,
onToggleSensitivePath: props.onToggleSensitivePath,
onPatch: props.onPatch,
})}
</div>
</section>
`;
return renderSectionCard({
id: `config-section-${sectionKey}-${subsectionKey}`,
sectionKey,
label,
description,
node,
nodeValue: scopedValue,
path: [sectionKey, subsectionKey],
});
})()
: filteredEntries.map(([key, node]) => {
const meta = SECTION_META[key] ?? {
@@ -488,37 +505,15 @@ export function renderConfigForm(props: ConfigFormProps) {
description: node.description ?? "",
};
return html`
<section class="config-section-card" id="config-section-${key}">
<div class="config-section-card__header">
<span class="config-section-card__icon">${getSectionIcon(key)}</span>
<div class="config-section-card__titles">
<h3 class="config-section-card__title">${meta.label}</h3>
${
meta.description
? html`<p class="config-section-card__desc">${meta.description}</p>`
: nothing
}
</div>
</div>
<div class="config-section-card__content">
${renderNode({
schema: node,
value: value[key],
path: [key],
hints: props.uiHints,
unsupported,
disabled: props.disabled ?? false,
showLabel: false,
searchCriteria,
revealSensitive: props.revealSensitive ?? false,
isSensitivePathRevealed: props.isSensitivePathRevealed,
onToggleSensitivePath: props.onToggleSensitivePath,
onPatch: props.onPatch,
})}
</div>
</section>
`;
return renderSectionCard({
id: `config-section-${key}`,
sectionKey: key,
label: meta.label,
description: meta.description,
node,
nodeValue: value[key],
path: [key],
});
})
}
</div>