From 567551b54486ad8e84735c4fc86ad191ffd75c7f Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Mon, 16 Mar 2026 11:44:44 +0000 Subject: [PATCH] feat(service-create-view): add platform service toggles for MongoDB, S3, and ClickHouse provisioning --- changelog.md | 7 + ts_web/00_commitinfo_data.ts | 2 +- ts_web/elements/sz-service-create-view.ts | 192 ++++++++++++++++++++++ 3 files changed, 200 insertions(+), 1 deletion(-) diff --git a/changelog.md b/changelog.md index 5d0a6df..239c247 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,12 @@ # Changelog +## 2026-03-16 - 2.6.0 - feat(service-create-view) +add platform service toggles for MongoDB, S3, and ClickHouse provisioning + +- Adds a new Platform Services section to the service creation view with dedicated toggles for managed infrastructure dependencies. +- Includes MongoDB, S3-compatible storage, and ClickHouse selections in the emitted create-service configuration payload. +- Resets selected platform services after form submission to keep create flow state consistent. + ## 2026-02-23 - 2.5.0 - feat(sz-config-section) add header action buttons to sz-config-section allowing configurable actions/events diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 1b29a8a..c08f7c1 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@serve.zone/catalog', - version: '2.5.0', + version: '2.6.0', description: 'UI component catalog for serve.zone' } diff --git a/ts_web/elements/sz-service-create-view.ts b/ts_web/elements/sz-service-create-view.ts index 937ce16..67b78ba 100644 --- a/ts_web/elements/sz-service-create-view.ts +++ b/ts_web/elements/sz-service-create-view.ts @@ -48,6 +48,9 @@ export interface IServiceConfig { memoryLimit: string; restartPolicy: 'always' | 'on-failure' | 'never'; networkMode: string; + enableMongoDB: boolean; + enableS3: boolean; + enableClickHouse: boolean; } @customElement('sz-service-create-view') @@ -104,6 +107,15 @@ export class SzServiceCreateView extends DeesElement { @state() private accessor showAdvanced: boolean = false; + @state() + private accessor enableMongoDB: boolean = false; + + @state() + private accessor enableS3: boolean = false; + + @state() + private accessor enableClickHouse: boolean = false; + public static styles = [ cssManager.defaultStyles, css` @@ -312,6 +324,105 @@ export class SzServiceCreateView extends DeesElement { accent-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')}; } + .platform-toggle-list { + display: flex; + flex-direction: column; + gap: 12px; + } + + .platform-toggle-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px; + background: ${cssManager.bdTheme('#f4f4f5', '#18181b')}; + border-radius: 8px; + transition: background 200ms ease; + } + + .platform-toggle-item:has(input:checked) { + background: ${cssManager.bdTheme('#eff6ff', 'rgba(59, 130, 246, 0.1)')}; + } + + .platform-toggle-info { + display: flex; + align-items: center; + gap: 12px; + } + + .platform-toggle-icon { + width: 36px; + height: 36px; + border-radius: 8px; + background: ${cssManager.bdTheme('#ffffff', '#27272a')}; + display: flex; + align-items: center; + justify-content: center; + } + + .platform-toggle-icon svg { + width: 20px; + height: 20px; + color: ${cssManager.bdTheme('#18181b', '#fafafa')}; + } + + .platform-toggle-name { + font-size: 14px; + font-weight: 500; + color: ${cssManager.bdTheme('#18181b', '#fafafa')}; + } + + .platform-toggle-desc { + font-size: 12px; + color: ${cssManager.bdTheme('#71717a', '#a1a1aa')}; + margin-top: 2px; + } + + .toggle-switch { + position: relative; + width: 44px; + height: 24px; + flex-shrink: 0; + } + + .toggle-switch input { + opacity: 0; + width: 0; + height: 0; + } + + .toggle-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')}; + border-radius: 12px; + transition: background 200ms ease; + } + + .toggle-slider::before { + content: ''; + position: absolute; + height: 18px; + width: 18px; + left: 3px; + bottom: 3px; + background: white; + border-radius: 50%; + transition: transform 200ms ease; + } + + .toggle-switch input:checked + .toggle-slider { + background: ${cssManager.bdTheme('#3b82f6', '#60a5fa')}; + } + + .toggle-switch input:checked + .toggle-slider::before { + transform: translateX(20px); + } + .actions { display: flex; justify-content: flex-end; @@ -536,6 +647,81 @@ export class SzServiceCreateView extends DeesElement { + +
+
+ + + + + + + Platform Services +
+
+ Enable managed infrastructure services for this deployment. Resources are automatically provisioned and connection details injected as environment variables. +
+
+ + + +
+
+