@genexus/genexus-ide-ui 3.2.9 → 3.2.11

package/dist/collection/components/db-instance-selector/db-instance-selector.js

@@ -0,0 +1,262 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _GxIdeDbInstanceSelector_componentLocale, _GxIdeDbInstanceSelector_chShortcutsEl, _GxIdeDbInstanceSelector_shortcutsSrc, _GxIdeDbInstanceSelector_selectedInstanceName, _GxIdeDbInstanceSelector_lazyLoadTreeItems, _GxIdeDbInstanceSelector_selectedItemsChangeHandler, _GxIdeDbInstanceSelector_cancelButtonClickedHandler, _GxIdeDbInstanceSelector_confirmButtonClickedHandler;
+import { Host, getAssetPath, h } from "@stencil/core";
+import { getIconPath } from "@genexus/mercury";
+import { Locale } from "../../common/locale";
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "components/tree-view",
+    "utils/form--full",
+    "utils/layout",
+    "utils/typography",
+    "utils/spacing",
+    "chameleon/scrollbar"
+];
+const SERVER_ICON = getIconPath({
+    category: "system",
+    name: "computer",
+    colorType: "primary"
+});
+const DATABASE_ICON = getIconPath({
+    category: "system",
+    name: "database",
+    colorType: "success"
+});
+const LOCAL_SERVERS_NODE_ID = "local-servers";
+const NETWORK_SERVERS_NODE_ID = "network-servers";
+export class GxIdeDbInstanceSelector {
+    constructor() {
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeDbInstanceSelector_componentLocale.set(this, void 0);
+        _GxIdeDbInstanceSelector_chShortcutsEl.set(this, void 0);
+        _GxIdeDbInstanceSelector_shortcutsSrc.set(this, getAssetPath(`./gx-ide-assets/db-instance-selector/shortcuts.json`));
+        _GxIdeDbInstanceSelector_selectedInstanceName.set(this, void 0);
+        _GxIdeDbInstanceSelector_lazyLoadTreeItems.set(this, async (treeItemId) => {
+            var _a, _b, _c, _d;
+            let servers = [];
+            if (treeItemId === LOCAL_SERVERS_NODE_ID) {
+                servers = (_b = (await ((_a = this.getLocalServersCallback) === null || _a === void 0 ? void 0 : _a.call(this)))) !== null && _b !== void 0 ? _b : [];
+            }
+            else if (treeItemId === NETWORK_SERVERS_NODE_ID) {
+                servers = (_d = (await ((_c = this.getNetworkServersCallback) === null || _c === void 0 ? void 0 : _c.call(this)))) !== null && _d !== void 0 ? _d : [];
+            }
+            return servers.map(server => ({
+                id: `${treeItemId}__${server.id}`,
+                caption: server.name,
+                startImgSrc: DATABASE_ICON,
+                leaf: true,
+                metadata: server.name
+            }));
+        });
+        _GxIdeDbInstanceSelector_selectedItemsChangeHandler.set(this, (event) => {
+            var _a;
+            const selected = event.detail.find(node => node.item.leaf);
+            if (selected) {
+                this.selectedInstanceId = selected.item.id;
+                __classPrivateFieldSet(this, _GxIdeDbInstanceSelector_selectedInstanceName, (_a = selected.item.metadata) !== null && _a !== void 0 ? _a : selected.item.caption, "f");
+            }
+            else {
+                this.selectedInstanceId = undefined;
+                __classPrivateFieldSet(this, _GxIdeDbInstanceSelector_selectedInstanceName, undefined, "f");
+            }
+        });
+        _GxIdeDbInstanceSelector_cancelButtonClickedHandler.set(this, () => {
+            var _a;
+            (_a = this.cancelCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        });
+        _GxIdeDbInstanceSelector_confirmButtonClickedHandler.set(this, () => {
+            var _a;
+            if (__classPrivateFieldGet(this, _GxIdeDbInstanceSelector_selectedInstanceName, "f")) {
+                (_a = this.confirmCallback) === null || _a === void 0 ? void 0 : _a.call(this, __classPrivateFieldGet(this, _GxIdeDbInstanceSelector_selectedInstanceName, "f"));
+            }
+        });
+        this.treeModel = [];
+        this.selectedInstanceId = undefined;
+        this.getLocalServersCallback = undefined;
+        this.getNetworkServersCallback = undefined;
+        this.cancelCallback = undefined;
+        this.confirmCallback = undefined;
+    }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeDbInstanceSelector_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        this.treeModel = [
+            {
+                id: LOCAL_SERVERS_NODE_ID,
+                caption: __classPrivateFieldGet(this, _GxIdeDbInstanceSelector_componentLocale, "f").tree.localServers,
+                startImgSrc: SERVER_ICON,
+                leaf: false,
+                lazy: true,
+                expanded: false,
+                items: []
+            },
+            {
+                id: NETWORK_SERVERS_NODE_ID,
+                caption: __classPrivateFieldGet(this, _GxIdeDbInstanceSelector_componentLocale, "f").tree.networkServers,
+                startImgSrc: SERVER_ICON,
+                leaf: false,
+                lazy: true,
+                expanded: false,
+                items: []
+            }
+        ];
+    }
+    /**
+     * Suspends or reactivates the shortcuts.
+     */
+    async suspendShortcuts(suspendShortcuts) {
+        __classPrivateFieldGet(this, _GxIdeDbInstanceSelector_chShortcutsEl, "f").suspend = suspendShortcuts;
+    }
+    render() {
+        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("ch-shortcuts", { src: __classPrivateFieldGet(this, _GxIdeDbInstanceSelector_shortcutsSrc, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeDbInstanceSelector_chShortcutsEl, el, "f")) }), h("section", { class: "section" }, h("header", { class: "dialog-header spacing-body dialog-header" }, h("h1", { class: "label" }, __classPrivateFieldGet(this, _GxIdeDbInstanceSelector_componentLocale, "f").header.title)), h("div", { class: "main" }, h("ch-tree-view-render", { class: "tree-view", model: this.treeModel, dragDisabled: true, dropDisabled: true, showLines: "all", lazyLoadTreeItemsCallback: __classPrivateFieldGet(this, _GxIdeDbInstanceSelector_lazyLoadTreeItems, "f"), onSelectedItemsChange: __classPrivateFieldGet(this, _GxIdeDbInstanceSelector_selectedItemsChangeHandler, "f") })), h("footer", { class: "dialog-footer dialog-footer-with-border spacing-body-block-end spacing-body-inline" }, h("div", { class: "buttons-spacer" }, h("button", { class: "button-secondary", id: "button-cancel", onClick: __classPrivateFieldGet(this, _GxIdeDbInstanceSelector_cancelButtonClickedHandler, "f"), part: "button-cancel" }, __classPrivateFieldGet(this, _GxIdeDbInstanceSelector_componentLocale, "f").footer.btnCancel), h("button", { class: "button-primary", id: "button-confirm", onClick: __classPrivateFieldGet(this, _GxIdeDbInstanceSelector_confirmButtonClickedHandler, "f"), disabled: !this.selectedInstanceId, part: "button-confirm" }, __classPrivateFieldGet(this, _GxIdeDbInstanceSelector_componentLocale, "f").footer.btnConfirm))))));
+    }
+    static get is() { return "gx-ide-db-instance-selector"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["db-instance-selector.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["db-instance-selector.css"]
+        };
+    }
+    static get assetsDirs() { return ["gx-ide-assets/db-instance-selector"]; }
+    static get properties() {
+        return {
+            "getLocalServersCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "GetServersCallback",
+                    "resolved": "() => DbServerInstance[] | Promise<DbServerInstance[]>",
+                    "references": {
+                        "GetServersCallback": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/db-instance-selector/db-instance-selector.tsx",
+                            "id": "src/components/db-instance-selector/db-instance-selector.tsx::GetServersCallback"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback invoked to load the available local server instances.\nShould return the list of database instances available on local servers."
+                }
+            },
+            "getNetworkServersCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "GetServersCallback",
+                    "resolved": "() => DbServerInstance[] | Promise<DbServerInstance[]>",
+                    "references": {
+                        "GetServersCallback": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/db-instance-selector/db-instance-selector.tsx",
+                            "id": "src/components/db-instance-selector/db-instance-selector.tsx::GetServersCallback"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback invoked to load the available network server instances.\nShould return the list of database instances available on network servers."
+                }
+            },
+            "cancelCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "CancelCallback",
+                    "resolved": "() => void | Promise<void>",
+                    "references": {
+                        "CancelCallback": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/db-instance-selector/db-instance-selector.tsx",
+                            "id": "src/components/db-instance-selector/db-instance-selector.tsx::CancelCallback"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback invoked when the user cancels the selection."
+                }
+            },
+            "confirmCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ConfirmCallback",
+                    "resolved": "(selectedInstanceName: string) => void | Promise<void>",
+                    "references": {
+                        "ConfirmCallback": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/db-instance-selector/db-instance-selector.tsx",
+                            "id": "src/components/db-instance-selector/db-instance-selector.tsx::ConfirmCallback"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback invoked when the user confirms the selection. Receives the name\nof the selected database instance."
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "treeModel": {},
+            "selectedInstanceId": {}
+        };
+    }
+    static get methods() {
+        return {
+            "suspendShortcuts": {
+                "complexType": {
+                    "signature": "(suspendShortcuts: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "suspendShortcuts",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Suspends or reactivates the shortcuts.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+_GxIdeDbInstanceSelector_componentLocale = new WeakMap(), _GxIdeDbInstanceSelector_chShortcutsEl = new WeakMap(), _GxIdeDbInstanceSelector_shortcutsSrc = new WeakMap(), _GxIdeDbInstanceSelector_selectedInstanceName = new WeakMap(), _GxIdeDbInstanceSelector_lazyLoadTreeItems = new WeakMap(), _GxIdeDbInstanceSelector_selectedItemsChangeHandler = new WeakMap(), _GxIdeDbInstanceSelector_cancelButtonClickedHandler = new WeakMap(), _GxIdeDbInstanceSelector_confirmButtonClickedHandler = new WeakMap();
+//# sourceMappingURL=db-instance-selector.js.map

package/dist/collection/components/db-instance-selector/db-instance-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"db-instance-selector.js","sourceRoot":"","sources":["../../../src/components/db-instance-selector/db-instance-selector.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  Prop,\n  Element,\n  State,\n  getAssetPath,\n  Method,\n  h\n} from \"@stencil/core\";\n\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport {\n  TreeViewItemModel,\n  TreeViewItemModelExtended\n} from \"@genexus/chameleon-controls-library\";\n\nimport { Locale } from \"../../common/locale\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/tree-view\",\n  \"utils/form--full\",\n  \"utils/layout\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"chameleon/scrollbar\"\n];\n\nconst SERVER_ICON = getIconPath({\n  category: \"system\",\n  name: \"computer\",\n  colorType: \"primary\"\n});\n\nconst DATABASE_ICON = getIconPath({\n  category: \"system\",\n  name: \"database\",\n  colorType: \"success\"\n});\n\nconst LOCAL_SERVERS_NODE_ID = \"local-servers\";\nconst NETWORK_SERVERS_NODE_ID = \"network-servers\";\n\n@Component({\n  tag: \"gx-ide-db-instance-selector\",\n  styleUrl: \"db-instance-selector.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/db-instance-selector\"]\n})\nexport class GxIdeDbInstanceSelector {\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n\n  #chShortcutsEl: HTMLChShortcutsElement;\n  #shortcutsSrc = getAssetPath(\n    `./gx-ide-assets/db-instance-selector/shortcuts.json`\n  );\n\n  #selectedInstanceName: string | undefined;\n\n  @Element() el: HTMLGxIdeDbInstanceSelectorElement;\n\n  @State() treeModel: TreeViewItemModel[] = [];\n  @State() selectedInstanceId: string | undefined;\n\n  /**\n   * Callback invoked to load the available local server instances.\n   * Should return the list of database instances available on local servers.\n   */\n  @Prop() readonly getLocalServersCallback!: GetServersCallback;\n\n  /**\n   * Callback invoked to load the available network server instances.\n   * Should return the list of database instances available on network servers.\n   */\n  @Prop() readonly getNetworkServersCallback!: GetServersCallback;\n\n  /**\n   * Callback invoked when the user cancels the selection.\n   */\n  @Prop() readonly cancelCallback!: CancelCallback;\n\n  /**\n   * Callback invoked when the user confirms the selection. Receives the name\n   * of the selected database instance.\n   */\n  @Prop() readonly confirmCallback!: ConfirmCallback;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.treeModel = [\n      {\n        id: LOCAL_SERVERS_NODE_ID,\n        caption: this.#componentLocale.tree.localServers,\n        startImgSrc: SERVER_ICON,\n        leaf: false,\n        lazy: true,\n        expanded: false,\n        items: []\n      },\n      {\n        id: NETWORK_SERVERS_NODE_ID,\n        caption: this.#componentLocale.tree.networkServers,\n        startImgSrc: SERVER_ICON,\n        leaf: false,\n        lazy: true,\n        expanded: false,\n        items: []\n      }\n    ];\n  }\n\n  /**\n   * Suspends or reactivates the shortcuts.\n   */\n  @Method()\n  async suspendShortcuts(suspendShortcuts: boolean) {\n    this.#chShortcutsEl.suspend = suspendShortcuts;\n  }\n\n  #lazyLoadTreeItems = async (\n    treeItemId: string\n  ): Promise<TreeViewItemModel[]> => {\n    let servers: DbServerInstance[] = [];\n\n    if (treeItemId === LOCAL_SERVERS_NODE_ID) {\n      servers = (await this.getLocalServersCallback?.()) ?? [];\n    } else if (treeItemId === NETWORK_SERVERS_NODE_ID) {\n      servers = (await this.getNetworkServersCallback?.()) ?? [];\n    }\n\n    return servers.map(server => ({\n      id: `${treeItemId}__${server.id}`,\n      caption: server.name,\n      startImgSrc: DATABASE_ICON,\n      leaf: true,\n      metadata: server.name\n    }));\n  };\n\n  #selectedItemsChangeHandler = (\n    event: CustomEvent<TreeViewItemModelExtended[]>\n  ) => {\n    const selected = event.detail.find(node => node.item.leaf);\n    if (selected) {\n      this.selectedInstanceId = selected.item.id;\n      this.#selectedInstanceName =\n        (selected.item.metadata as string) ?? selected.item.caption;\n    } else {\n      this.selectedInstanceId = undefined;\n      this.#selectedInstanceName = undefined;\n    }\n  };\n\n  #cancelButtonClickedHandler = () => {\n    this.cancelCallback?.();\n  };\n\n  #confirmButtonClickedHandler = () => {\n    if (this.#selectedInstanceName) {\n      this.confirmCallback?.(this.#selectedInstanceName);\n    }\n  };\n\n  render() {\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <ch-shortcuts\n          src={this.#shortcutsSrc}\n          ref={(el: HTMLChShortcutsElement) =>\n            (this.#chShortcutsEl = el as HTMLChShortcutsElement)\n          }\n        ></ch-shortcuts>\n        <section class=\"section\">\n          <header class=\"dialog-header spacing-body dialog-header\">\n            <h1 class=\"label\">{this.#componentLocale.header.title}</h1>\n          </header>\n\n          <div class=\"main\">\n            <ch-tree-view-render\n              class=\"tree-view\"\n              model={this.treeModel}\n              dragDisabled={true}\n              dropDisabled={true}\n              showLines=\"all\"\n              lazyLoadTreeItemsCallback={this.#lazyLoadTreeItems}\n              onSelectedItemsChange={this.#selectedItemsChangeHandler}\n            ></ch-tree-view-render>\n          </div>\n\n          <footer class=\"dialog-footer dialog-footer-with-border spacing-body-block-end spacing-body-inline\">\n            <div class=\"buttons-spacer\">\n              <button\n                class=\"button-secondary\"\n                id=\"button-cancel\"\n                onClick={this.#cancelButtonClickedHandler}\n                part=\"button-cancel\"\n              >\n                {this.#componentLocale.footer.btnCancel}\n              </button>\n              <button\n                class=\"button-primary\"\n                id=\"button-confirm\"\n                onClick={this.#confirmButtonClickedHandler}\n                disabled={!this.selectedInstanceId}\n                part=\"button-confirm\"\n              >\n                {this.#componentLocale.footer.btnConfirm}\n              </button>\n            </div>\n          </footer>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type DbServerInstance = {\n  id: string;\n  name: string;\n};\n\nexport type GetServersCallback = () =>\n  | Promise<DbServerInstance[]>\n  | DbServerInstance[];\n\nexport type CancelCallback = () => void | Promise<void>;\n\nexport type ConfirmCallback = (\n  selectedInstanceName: string\n) => void | Promise<void>;\n"]}

package/dist/collection/components/db-instance-selector/gx-ide-assets/db-instance-selector/langs/db-instance-selector.lang.en.json

@@ -0,0 +1,14 @@
+{
+  "componentName": "DB Instance Selector",
+  "header": {
+    "title": "Select the server to connect to"
+  },
+  "tree": {
+    "localServers": "Local Servers",
+    "networkServers": "Network Servers"
+  },
+  "footer": {
+    "btnCancel": "Cancel",
+    "btnConfirm": "Confirm"
+  }
+}

package/dist/collection/components/db-instance-selector/gx-ide-assets/db-instance-selector/langs/db-instance-selector.lang.ja.json

@@ -0,0 +1,14 @@
+{
+  "componentName": "DB インスタンス セレクタ",
+  "header": {
+    "title": "接続するサーバーを選択してください"
+  },
+  "tree": {
+    "localServers": "ローカル サーバー",
+    "networkServers": "ネットワーク サーバー"
+  },
+  "footer": {
+    "btnCancel": "キャンセル",
+    "btnConfirm": "確認"
+  }
+}

package/dist/collection/components/db-instance-selector/gx-ide-assets/db-instance-selector/langs/db-instance-selector.lang.zh.json

@@ -0,0 +1,14 @@
+{
+  "componentName": "数据库实例选择器",
+  "header": {
+    "title": "选择要连接的服务器"
+  },
+  "tree": {
+    "localServers": "本地服务器",
+    "networkServers": "网络服务器"
+  },
+  "footer": {
+    "btnCancel": "取消",
+    "btnConfirm": "确认"
+  }
+}

package/dist/collection/components/db-instance-selector/gx-ide-assets/db-instance-selector/shortcuts.json

@@ -0,0 +1,15 @@
+[
+  {
+    "selector": "[part='button-confirm']",
+    "keyShortcuts": "Enter",
+    "action": "click",
+    "conditions": {
+      "focusExclude": "[part='button-cancel']"
+    }
+  },
+  {
+    "selector": "[part='button-cancel']",
+    "keyShortcuts": "Escape",
+    "action": "click"
+  }
+]

package/dist/collection/components/new-kb/gx-ide-assets/new-kb/langs/new-kb.lang.en.json

@@ -39,20 +39,28 @@
   "tabAdvanced": {
     "tabLabel": "Advanced",
     "tabTitle": "Knowledge Base Storage",
+    "tabSubtitle": "Where this KB's metadata and objects will live",
+    "connectionGroup": "Connection",
+    "authenticationGroup": "Authentication",
+    "databaseHint": "Will be created if it doesn't exist.",
+    "windowsAuthCalloutTitle": "Using current Windows credentials",
+    "windowsAuthCalloutDescription": "Your domain account will be used to connect. No username or password is required.",
     "serverName": {
       "label": "Server Name",
       "placeholder": null,
-      "disabledPlaceholder": "There are no server names to display"
+      "disabledPlaceholder": "There are no server names to display",
+      "browseForMore": "Browse for more..."
     },
     "databaseName": {
-      "label": "Database",
+      "label": "Database Name",
       "placeholder": null,
       "disabledPlaceholder": null
     },
     "collation": {
       "label": "Collation",
       "placeholder": null,
-      "disabledPlaceholder": "There are no collations to display"
+      "disabledPlaceholder": "There are no collations to display",
+      "loadingPlaceholder": "Loading collations..."
     },
     "createDataFilesInKbFolder": "Create Data in Knowledge Base Folder",
     "authenticationType": {
@@ -74,6 +82,11 @@
   },
   "footer": {
     "btnCreate": "Create",
-    "btnCancel": "Cancel"
+    "btnCancel": "Cancel",
+    "connectionStatus": {
+      "connecting": "Connecting...",
+      "success": "Connection success",
+      "failed": "Connection failed"
+    }
   }
 }

package/dist/collection/components/new-kb/gx-ide-assets/new-kb/langs/new-kb.lang.ja.json

@@ -39,20 +39,28 @@
   "tabAdvanced": {
     "tabLabel": "詳細",
     "tabTitle": "ナレッジベースのストレージ",
+    "tabSubtitle": "この KB のメタデータとオブジェクトの保存先",
+    "connectionGroup": "接続",
+    "authenticationGroup": "認証",
+    "databaseHint": "存在しない場合は作成されます。",
+    "windowsAuthCalloutTitle": "現在の Windows 認証情報を使用",
+    "windowsAuthCalloutDescription": "ドメインアカウントを使用して接続します。ユーザー名とパスワードは必要ありません。",
     "serverName": {
       "label": "サーバー名",
       "placeholder": null,
-      "disabledPlaceholder": "表示するサーバー名がありません"
+      "disabledPlaceholder": "表示するサーバー名がありません",
+      "browseForMore": "さらに参照..."
     },
     "databaseName": {
-      "label": "データベース",
+      "label": "データベース名",
       "placeholder": null,
       "disabledPlaceholder": null
     },
     "collation": {
       "label": "照合順序",
       "placeholder": null,
-      "disabledPlaceholder": "表示する照合順序がありません"
+      "disabledPlaceholder": "表示する照合順序がありません",
+      "loadingPlaceholder": "照合順序を読み込み中..."
     },
     "createDataFilesInKbFolder": "ナレッジベースのフォルダ内にデータを作成",
     "authenticationType": {
@@ -74,6 +82,11 @@
   },
   "footer": {
     "btnCreate": "作成",
-    "btnCancel": "キャンセル"
+    "btnCancel": "キャンセル",
+    "connectionStatus": {
+      "connecting": "接続中...",
+      "success": "接続に成功しました",
+      "failed": "接続に失敗しました"
+    }
   }
 }

package/dist/collection/components/new-kb/gx-ide-assets/new-kb/langs/new-kb.lang.zh.json

@@ -39,20 +39,28 @@
   "tabAdvanced": {
     "tabLabel": "Advanced",
     "tabTitle": "Knowledge Base Storage",
+    "tabSubtitle": "Where this KB's metadata and objects will live",
+    "connectionGroup": "Connection",
+    "authenticationGroup": "Authentication",
+    "databaseHint": "Will be created if it doesn't exist.",
+    "windowsAuthCalloutTitle": "Using current Windows credentials",
+    "windowsAuthCalloutDescription": "Your domain account will be used to connect. No username or password is required.",
     "serverName": {
       "label": "Server Name",
       "placeholder": null,
-      "disabledPlaceholder": "There are no server names to display"
+      "disabledPlaceholder": "There are no server names to display",
+      "browseForMore": "Browse for more..."
     },
     "databaseName": {
-      "label": "Database",
+      "label": "Database Name",
       "placeholder": null,
       "disabledPlaceholder": null
     },
     "collation": {
       "label": "Collation",
       "placeholder": null,
-      "disabledPlaceholder": "There are no collations to display"
+      "disabledPlaceholder": "There are no collations to display",
+      "loadingPlaceholder": "加载排序规则中..."
     },
     "createDataFilesInKbFolder": "Create Data in Knowledge Base Folder",
     "authenticationType": {
@@ -74,6 +82,11 @@
   },
   "footer": {
     "btnCreate": "Create",
-    "btnCancel": "Cancel"
+    "btnCancel": "Cancel",
+    "connectionStatus": {
+      "connecting": "Connecting...",
+      "success": "Connection success",
+      "failed": "Connection failed"
+    }
   }
 }

package/dist/collection/components/new-kb/new-kb.css

@@ -1,7 +1,3 @@
-button.button-secondary {
-  border-color: var(--color-border-neutral-default);
-}
-
 :host {
   display: grid;
   block-size: 100%;
@@ -83,29 +79,114 @@ button.button-secondary {
   overflow: auto;
 }
 
-.tab-advanced-title {
-  grid-area: tab-advanced-title;
+.basic,
+.advanced {
+  padding-block-start: 12px;
+  overflow: auto;
+  block-size: 100%;
 }
 
-.layout-tab-advanced-left-col {
-  grid-area: layout-tab-advanced-left-col;
+.kb-storage-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-l);
+  padding-inline: var(--spacing-padding-xl);
 }
 
-.layout-tab-advanced-right-col {
-  grid-area: layout-tab-advanced-right-col;
+.kb-storage-card__header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-s);
+  padding-block-end: var(--spacing-padding-m);
+  border-bottom: 1px solid var(--color-border-surface-on-elevation-1);
 }
 
-.basic,
-.advanced {
-  padding-block-start: 12px;
-  overflow: auto;
-  block-size: 100%;
+.kb-storage-card__heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-xs);
+  min-inline-size: 0;
+}
+
+.kb-storage-card__title {
+  margin: 0;
+  color: var(--color-text-neutral-default);
 }
 
-.tab-advanced__field-group {
+.kb-storage-card__grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-auto-rows: auto;
+  column-gap: var(--spacing-gap-xl);
+  row-gap: var(--spacing-gap-l);
+}
+
+.kb-storage-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-m);
+  min-inline-size: 0;
+}
+
+.kb-storage-column__title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-s);
+  color: var(--color-text-neutral-disabled);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.kb-storage-column__title-text {
+  white-space: nowrap;
+}
+
+.kb-storage-column__title-rule {
+  flex: 1;
+  block-size: 1px;
+  background-color: var(--color-border-surface-on-elevation-1);
+}
+
+.field-group--stacked {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-m);
+}
+
+.server-name-wrapper {
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  gap: var(--spacing-gap-xs);
+  min-inline-size: 0;
+}
+
+.kb-storage-credentials {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-m);
+}
+
+.kb-storage-callout {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-gap-xs);
+  padding: var(--spacing-padding-m);
+  border: 1px solid var(--color-border-surface-on-elevation-2);
+  border-radius: var(--border-radius-s);
+  background-color: var(--color-accent-surface-elevation-2);
+}
+
+.kb-storage-callout-inner {
+  display: flex;
+  flex-direction: column;
+}
+
+.kb-storage-callout__title {
+  display: flex;
+  gap: var(--spacing-gap-xs);
+}
+
+.kb-storage-callout__description {
+  color: var(--color-text-neutral-disabled);
 }
 
 .text-align-center {
@@ -116,6 +197,30 @@ button.button-secondary {
   scrollbar-width: thin;
 }
 
+.tab::part(tab-list block-start) {
+  padding-inline: var(--spacing-padding-xl);
+}
+
 .checkbox {
   inline-size: max-content;
+}
+
+.footer.dialog-footer-with-border {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-gap-m);
+}
+.footer.dialog-footer-with-border > .buttons-spacer {
+  margin-inline-start: auto;
+}
+
+.connection-status--connecting {
+  color: var(--color-text-neutral-disabled);
+}
+.connection-status--success {
+  color: var(--color-text-success-default);
+}
+.connection-status--failed {
+  color: var(--color-text-error-default);
 }