@genexus/genexus-ide-ui 0.0.60 → 0.0.62

package/dist/collection/components/kb-manager-import/kb-manager-import.js

@@ -0,0 +1,424 @@
+/* STENCIL IMPORTS */
+import { Host, h } from "@stencil/core";
+/* CUSTOM IMPORTS */
+import { Locale } from "../../common/locale";
+import { config } from "../../common/config";
+import { convertImportCategoryToTreeView, addImportItemResultDataItem } from "./helpers";
+import { countTreeItems } from "../../common/helpers";
+export class GxIdeKbManagerImport {
+  constructor() {
+    this.renderedFirstTime = false;
+    /* ImportCategoryBasicData Holds the original name of category data, and its id. Used to create parent nodes on the imported tree*/
+    this.importCategoryData = [];
+    this.objectsInFileTotalNodes = 0;
+    // 9.LOCAL METHODS //
+    this.evaluateObjects = () => {
+      var _a;
+      this.noObjects = !!(((_a = this.objectsTreeState) === null || _a === void 0 ? void 0 : _a.length) === 0 || !this.objectsTreeState);
+    };
+    this.evaluateImport = () => {
+      var _a;
+      this.noImport = !!(((_a = this.importTreeState) === null || _a === void 0 ? void 0 : _a.length) === 0 || !this.importTreeState);
+    };
+    this.selectFileHandler = () => {
+      this.fileInputEl.openFile();
+    };
+    this.loadFileHandler = async () => {
+      if (this.loadCallback && this.selectedFile) {
+        this.importCategoryData = await this.loadCallback(this.selectedFile);
+        const importCategoryTreeData = convertImportCategoryToTreeView(this.importCategoryData);
+        this.objectsTreeState = importCategoryTreeData;
+        if (this.importCategoryData.length > 0) {
+          // clear input
+          this.selectedFile = null;
+        }
+      }
+    };
+    this.fileSelectedHandler = (fileEvent) => {
+      this.selectedFile = fileEvent.detail[0];
+    };
+    this.evaluateHeaderActiveButton = () => {
+      if (!this.selectedFile) {
+        this.headerButtonsGroup.activeButtonId = "select-file-btn";
+        this.fileInputEl.value = undefined;
+      }
+      else {
+        this.headerButtonsGroup.activeButtonId = "load-file-btn";
+      }
+    };
+    this.importObjectsHandler = async () => {
+      if (this.importCallback) {
+        this.importingObjects = true;
+        this.objectsButtonsGroup.activeButtonId = "cancel-import-btn";
+        const result = await this.importCallback(this.checkedObjectsIds);
+        if (result || result === false) {
+          this.importingObjects = false;
+          this.objectsButtonsGroup.activeButtonId = "import-btn";
+        }
+      }
+    };
+    this.objectsTreeCheckedItemsChangedHandler = (event) => {
+      const allItemsWithCheckbox = [...event.detail.values()];
+      const checkedItems = allItemsWithCheckbox.filter(node => node.item.checked);
+      // objects checked
+      const checkedObjects = checkedItems.filter(node => node.item.class === "object");
+      const checkedObjectsIds = [];
+      if (checkedObjects.length > 0) {
+        checkedObjects.forEach(objectChecked => {
+          checkedObjectsIds.push(objectChecked.item.id);
+        });
+      }
+      this.checkedObjectsIds = checkedObjectsIds;
+    };
+    this.cancelImportHandler = () => {
+      if (this.cancelCallback) {
+        this.cancelCallback();
+        // returns boolean
+      }
+    };
+    this.optionsHandler = () => {
+      if (this.optionsCallback) {
+        this.optionsCallback();
+        // returns boolean
+      }
+    };
+    this.clearStatusHandler = () => {
+      this.importTreeState = [];
+      this.statusInfo.error.number = 0;
+      this.statusInfo.warning.number = 0;
+      this.statusInfo.success.number = 0;
+    };
+    this.selectAllClickedHandler = (e) => {
+      const checked = e.target.checked;
+      if (checked && this.objectsTreeEl) {
+        console.log("select all");
+        this.objectsTreeEl.updateAllItemsProperties({ checked: true });
+      }
+    };
+    this.statusButtonsSelectionChangedHandler = (e) => {
+      const activeStates = e.detail;
+      const newStatusInfo = Object.assign({}, this.statusInfo);
+      newStatusInfo.warning.display = false;
+      newStatusInfo.error.display = false;
+      newStatusInfo.success.display = false;
+      activeStates.forEach(activeState => {
+        const status = activeState.itemId;
+        newStatusInfo[status].display = true;
+        this.statusInfo = newStatusInfo;
+      });
+      this.evaluateHiddenImportsMessage();
+    };
+    this.evaluateCheckAllValue = () => {
+      let checked = true;
+      const allAreChecked = this.objectsInFileTotalNodes === this.checkedObjectsIds.length;
+      const conditionToUncheck = this.objectsTreeState.length === 0 || !allAreChecked;
+      if (conditionToUncheck) {
+        checked = false;
+      }
+      return checked;
+    };
+    this.evaluateHiddenImportsMessage = () => {
+      /* to do*/
+    };
+    this.checkedObjectsIds = [];
+    this.noObjects = undefined;
+    this.showHiddenImportsMessage = false;
+    this.statusInfo = {
+      error: {
+        display: true,
+        number: 0
+      },
+      warning: {
+        display: true,
+        number: 0
+      },
+      success: {
+        display: true,
+        number: 0
+      }
+    };
+    this.objectsTreeState = [];
+    this.noImport = undefined;
+    this.importTreeState = [];
+    this.importingObjects = false;
+    this.selectedFile = undefined;
+    this.optionsCallback = undefined;
+    this.importCallback = undefined;
+    this.loadCallback = undefined;
+    this.cancelCallback = undefined;
+    this.statusMinimal = false;
+  }
+  watchObjectsTreeStateHandler(newState) {
+    this.noObjects = !!(newState.length === 0 || !newState);
+    this.objectsInFileTotalNodes = countTreeItems(newState);
+  }
+  watchImportTreeStateHandler(newState) {
+    this.noImport = !!(newState.length === 0 || !newState);
+  }
+  watchSelectedFileHandler() {
+    this.evaluateHeaderActiveButton();
+  }
+  // 6.COMPONENT LIFECYCLE EVENTS //
+  async componentWillLoad() {
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+    this.componentDidLoadEvent.emit(true);
+    this.evaluateObjects();
+    this.evaluateImport();
+  }
+  componentDidRender() {
+    if (!this.renderedFirstTime) {
+      this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+      this.renderedFirstTime = true;
+    }
+  }
+  // 7.LISTENERS //
+  // 8.PUBLIC METHODS API //
+  /**
+   * Add the result of importing an item
+   */
+  async addResultItem(item) {
+    this.importTreeState = addImportItemResultDataItem(item, this.importCategoryData, this.importTreeState);
+    this.statusInfo[`${item.status}`].number += item.messages.length;
+  }
+  //  10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noFooterPadding: true, containerTitle: this._componentLocale.componentName }, h("header", { class: "header", slot: "header" }, h("gxg-form-text", { type: "file", class: "select-file", label: this._componentLocale.header.fileNameLabel, placeholder: this._componentLocale.header.fileNamePlaceholder, part: "file-name", acceptFile: ".xpz, .xml", clearButton: true, iconPosition: "start", onFileSelected: this.fileSelectedHandler, ref: (el) => (this.fileInputEl = el) }), h("gxg-button-group", {
+      // default-selected-btn-id="select-file-btn"
+      ref: (el) => (this.headerButtonsGroup = el)
+    }, h("button", { id: "select-file-btn", part: "select-file-button", onClick: this.selectFileHandler }, this._componentLocale.header.selectFileButton), h("button", { id: "load-file-btn", part: "load-file-button", disabled: !this.selectedFile, onClick: this.loadFileHandler }, this._componentLocale.header.loadButton))), h("main", { class: "main" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.objectsInFile.title, noContentPadding: true, noBorderFooter: true, class: "left-grid-item", slimmerFooter: true, inactiveTitle: this.noObjects, footerSubtleShadow: !this.noObjects, titleType: "secondary" }, h("div", { class: {
+        "tree-container": true,
+        "tree-container--objects-in-file": true,
+        "tree-container--empty": this.noObjects
+      } }, !this.noObjects ? (h("gxg-tree-view", { treeModel: this.objectsTreeState, dragDisabled: true, dropDisabled: true, toggleCheckboxes: true, onCheckedItemsChange: this.objectsTreeCheckedItemsChangedHandler, ref: el => (this.objectsTreeEl = el) })) : (h("div", { class: "gx-ide-message" }, h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "objects-in-file-empty-status-message" }, "There are no Objects. ", h("br", null), h("gxg-text", { type: "text-link-no-line", onClick: this.selectFileHandler }, "Begin by selecting a file."))))), h("gxg-form-checkbox", { label: this.objectsTreeState.length > 0 &&
+        this.objectsInFileTotalNodes ===
+          this.checkedObjectsIds.length
+        ? this._componentLocale.main.objectsInFile.deselectAll
+        : this._componentLocale.main.objectsInFile.selectAll, part: "select-all-checkbox", slot: "footer-start", disabled: this.importingObjects || this.objectsTreeState.length === 0, checked: this.evaluateCheckAllValue(), onClick: this.selectAllClickedHandler }), h("gxg-button-group", { slot: "footer-end", ref: (el) => (this.objectsButtonsGroup = el) }, h("button", { id: "import-btn", part: "import-button", disabled: this.importingObjects ||
+        this.checkedObjectsIds.length === 0, onClick: this.importObjectsHandler }, this._componentLocale.main.objectsInFile.importButton), h("button", { id: "cancel-import-btn", part: "cancel-import-button", disabled: !this.importingObjects, onClick: this.cancelImportHandler }, this._componentLocale.main.objectsInFile.cancelButton)), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/settings", slot: "footer-end", part: "select-kb-btn", onClick: this.optionsHandler }, this._componentLocale.header.optionsButton)), h("gx-ide-container", { containerTitle: this._componentLocale.main.importStatus.title, noContentPadding: true, noBorderFooter: true, slimmerFooter: true, inactiveTitle: this.noImport, footerSubtleShadow: !this.noImport, titleType: "secondary" }, h("div", { class: {
+        "tree-container": true,
+        "tree-container--import-status": true,
+        "tree-container--empty": this.noImport,
+        "tree-container--no-warnings": !this.statusInfo.warning.display,
+        "tree-container--no-errors": !this.statusInfo.error.display,
+        "tree-container--no-successes": this.statusInfo.success.display === false
+      } }, !this.noImport ? (h("gxg-tree-view", { treeModel: this.importTreeState, toggleCheckboxes: true, ref: el => (this.objectsTreeEl = el) })) : (h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "objects-in-file-empty-status-message", class: "gx-ide-message" }, "There are no Imported files."))), h("gxg-text", { type: "button-like", slot: "footer-end", part: "select-kb-btn", onClick: this.clearStatusHandler, disabled: this.noImport }, this._componentLocale.main.importStatus.clearButton), h("span", { class: "ghost-element", slot: "footer-start" }))), h("footer", { slot: "footer-start" }, h("gx-ide-status-buttons", { errors: this.statusInfo.error.number, warnings: this.statusInfo.warning.number, successes: this.statusInfo.success.number, compact: true, noBorderTop: true, noBorderBottom: true, noBorderStart: true, minimal: this.statusMinimal, onSelectionChanged: this.statusButtonsSelectionChangedHandler }))), h("gxg-ide-loader", { description: "Importing objects..." }))));
+  }
+  static get is() { return "gx-ide-kb-manager-import"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["kb-manager-import.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["kb-manager-import.css"]
+    };
+  }
+  static get assetsDirs() { return ["gx-ide-assets/kb-manager-import"]; }
+  static get properties() {
+    return {
+      "selectedFile": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "File",
+          "resolved": "File",
+          "references": {
+            "File": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the imported xml or xps file"
+        }
+      },
+      "optionsCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "OptionsCallback",
+          "resolved": "() => Promise<void>",
+          "references": {
+            "OptionsCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when the user wants to access the export options."
+        }
+      },
+      "importCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ImportCallback",
+          "resolved": "(itemIds: string[]) => Promise<boolean>",
+          "references": {
+            "ImportCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when the user wants to initiate the import process."
+        }
+      },
+      "loadCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "LoadCallback",
+          "resolved": "(file: File) => Promise<ImportCategoryData[]>",
+          "references": {
+            "LoadCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when the user wants to load the xpz information"
+        }
+      },
+      "cancelCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "CancelCallback",
+          "resolved": "() => Promise<boolean>",
+          "references": {
+            "CancelCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "returns",
+              "text": "It returns a boolean indicating whether the process could be canceled or not."
+            }],
+          "text": "Callback invoked when the user wants to cancel the export process."
+        }
+      },
+      "statusMinimal": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "It displays the status buttons (errors, warning, successes) with the minimal ui (no captions)"
+        },
+        "attribute": "status-minimal",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "checkedObjectsIds": {},
+      "noObjects": {},
+      "showHiddenImportsMessage": {},
+      "statusInfo": {},
+      "objectsTreeState": {},
+      "noImport": {},
+      "importTreeState": {},
+      "importingObjects": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "componentDidRenderFirstTime",
+        "name": "componentDidRenderFirstTime",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This event is emitted once just after the component is fully loaded and the first render() occurs"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "componentDidLoadEvent",
+        "name": "componentDidLoadEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This event is emitted once just after the component is fully loaded and the first render() occurs."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "addResultItem": {
+        "complexType": {
+          "signature": "(item: ImportItemResultData) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ImportItemResultData": {
+              "location": "import",
+              "path": "../../common/types"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Add the result of importing an item",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "objectsTreeState",
+        "methodName": "watchObjectsTreeStateHandler"
+      }, {
+        "propName": "importTreeState",
+        "methodName": "watchImportTreeStateHandler"
+      }, {
+        "propName": "selectedFile",
+        "methodName": "watchSelectedFileHandler"
+      }];
+  }
+}

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

@@ -55,6 +55,15 @@ ch-grid-column {
   border-bottom: 1px solid var(--gray-01);
 }
 
+ch-grid-column {
+  padding-inline-start: --gxg-container--padding;
+  padding-inline-end: --gxg-container--padding;
+}
+
+ch-grid-cell {
+  --spacing-comp-02: var(--gxg-container--padding);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -78,6 +87,7 @@ gxg-tabs {
   color: var(--gx-ide-component-text-color);
   font-weight: var(--font-weight-regular);
   font-size: var(--font-size-lg);
+  font-family: var(--font-family-primary);
   line-height: 1.6em;
   height: 100%;
   background-color: var(--gx-ide-component-background-color);
@@ -144,6 +154,14 @@ gxg-tabs {
   padding-inline-end: 2px;
 }
 
+/*gxg-tree-view*/
+.tree-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 /*Gemini*/
 /*Gx Ide*/
 :host {
@@ -157,37 +175,38 @@ gxg-tabs {
   box-shadow: var(--box-shadow-01);
 }
 
-/*HEADER*/
+/*Header*/
 .header {
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: 1fr;
-  grid-template-columns: auto 1fr auto;
+  display: flex;
 }
-.header *:nth-child(1) {
-  grid-area: 1/1/2/2;
+.header__label {
+  flex: none;
 }
-.header *:nth-child(2) {
-  grid-area: 1/2/2/3;
+
+/*Main*/
+.main {
+  height: 100%;
 }
 
-/*GXG-TABS*/
+/*Main > Gxg-Tabs*/
 .gxg-tabs {
   margin-top: 0;
   box-shadow: none;
 }
 
-/*Basic*/
-.grid--basic {
-  flex-grow: 1;
-  grid-template-columns: 1fr 1fr;
-  gap: 0;
+/*Main > Gxg-Tabs > Basic*/
+.basic-main {
+  display: flex;
   height: 100%;
 }
-.grid--basic > *:first-child {
-  border-right: 1px solid var(--gx-ide-container-border-color);
+.basic-main__back-end {
+  flex: 1;
+}
+.basic-main__front-end {
+  flex: 1;
 }
 
-/*Advanced*/
+/*Main > Gxg-Tabs > Advanced*/
 .advanced-second-row {
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: 1fr;

package/dist/collection/components/new-environment/new-environment.js

@@ -3,10 +3,12 @@ import { Host, h } from "@stencil/core";
 /* OTHER LIBRARIES IMPORTS */
 /* CUSTOM IMPORTS */
 import { Locale } from "../../common/locale";
+import { config } from "../../common/config";
 import { renderFormItems } from "../../common/common";
 import { formSubmitValidation } from "../../common/form-validation";
 export class GxIdeNewEnvironment {
   constructor() {
+    this.renderedFirstTime = false;
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
@@ -76,7 +78,7 @@ export class GxIdeNewEnvironment {
       this.changedCallback(newEnvData);
     };
     this.renderTabBasic = () => {
-      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, h("gx-ide-container", { containerTitle: this._componentLocale.runtime, displayBorderBottom: true }, h("gxg-form-radio-group", { ref: (el) => (this.runtimeGroup = el), row: true, onChange: this.runtimeEnvironmentChangedHandler, slot: "header" }, renderFormItems("gxg-form-radio", this.runtimes, "runtime-environment"))), h("div", { class: "grid grid--no-gap grid--basic" }, h("gx-ide-container", { noHeadingBorder: true, "container-title": this._componentLocale.tabBasic.backEnd.backEndLabel }, h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.language, value: this.languages[0]["id"], ref: (el) => (this.languageEl = el), onValueChanged: this.languageValueChangedHandler, part: "language" }, renderFormItems("gxg-combo-box-item", this.languages)), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.dataStores, value: this.dataStores[0]["id"], ref: (el) => (this.dataStoreEl = el), onValueChanged: this.dataStoreValueChangedHandler, part: "data-store" }, renderFormItems("gxg-combo-box-item", this.dataStores))), h("gx-ide-container", { noHeadingBorder: true, "container-title": this._componentLocale.tabBasic.frontEnd.frontEndLabel }, h("gxg-form-checkbox-group", { ref: (el) => (this.frontEndsEl = el) }, renderFormItems("gxg-form-checkbox", this.frontEnds))))));
+      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, h("gx-ide-container", { containerTitle: this._componentLocale.runtime, noContentPadding: true, displayBorderBottom: true }, h("gxg-form-radio-group", { slot: "header", ref: (el) => (this.runtimeGroup = el), row: true, center: true, onChange: this.runtimeEnvironmentChangedHandler }, renderFormItems("gxg-form-radio", this.runtimes, "runtime-environment")), h("div", { class: "basic-main" }, h("gx-ide-container", { "container-title": this._componentLocale.tabBasic.backEnd.backEndLabel, class: "basic-main__back-end", contentBorderEnd: true, titleType: "secondary" }, h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.language, value: this.languages[0]["id"], ref: (el) => (this.languageEl = el), toolTip: config.tooltip, onValueChanged: this.languageValueChangedHandler, part: "language" }, renderFormItems("gxg-combo-box-item", this.languages)), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.dataStores, value: this.dataStores[0]["id"], ref: (el) => (this.dataStoreEl = el), onValueChanged: this.dataStoreValueChangedHandler, toolTip: config.tooltip, part: "data-store" }, renderFormItems("gxg-combo-box-item", this.dataStores))), h("gx-ide-container", { "container-title": this._componentLocale.tabBasic.frontEnd.frontEndLabel, class: "basic-main__front-end", titleType: "secondary" }, h("gxg-form-checkbox-group", { ref: (el) => (this.frontEndsEl = el) }, renderFormItems("gxg-form-checkbox", this.frontEnds)))))));
     };
     this.renderTabAdvanced = () => {
       return (h("gxg-tab", { tab: "advanced", "no-padding": true }, h("gx-ide-container", null, h("slot", { name: "property-grid" }))));
@@ -98,11 +100,14 @@ export class GxIdeNewEnvironment {
     this._componentLocale = await Locale.getComponentStrings(this.el);
   }
   componentDidRender() {
-    this.componentDidRenderEvent.emit(this._componentLocale.componentName);
+    if (!this.renderedFirstTime) {
+      this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+      this.renderedFirstTime = true;
+    }
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", null, h("header", { class: "header grid" }, h("gxg-label", { labelPosition: "start" }, this._componentLocale.name), h("gxg-form-text", { "label-position": "start", placeholder: "NewEnvironment", "max-width": "100%", value: this.environmentName, ref: (el) => (this.nameEl = el), part: "environment-name" }))), h("main", { class: "gxi-full-height gx-ide-overflow" }, h("gxg-tabs", { class: "gxg-tabs" }, h("gxg-tab-bar", { slot: "tab-bar-container", displayBorder: true }, h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true }), h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabAdvanced.tabLabel, tab: "advanced", disabled: this.disableAdvanced })), this.renderTabBasic(), this.renderTabAdvanced())), h("gx-ide-container", { displayBorderTop: true }, h("gxg-form-checkbox", { label: this._componentLocale.setCurrentEnvironment, id: "show-current-environment", checked: this.setAsTarget, slot: "footer-start" }), h("gxg-button", { id: "button-create", slot: "footer-end", type: "primary-text-only", onClick: this.setEnvironmentHandler, part: "gxg-button gxg-button--create" }, this._componentLocale.footer.btnSetNewEnvironment), h("gxg-button", { id: "button-cancel", slot: "footer-end", type: "outlined", onClick: this.cancelButtonClickedHandler, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel)))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noBorderFooter: true, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("header", { class: "header", slot: "header" }, h("gxg-label", { labelPosition: "start", class: "header__label" }, this._componentLocale.name), h("gxg-form-text", { "label-position": "start", placeholder: "New Environment", "max-width": "100%", value: this.environmentName, ref: (el) => (this.nameEl = el), toolTip: config.tooltip, class: "header__text", part: "environment-name" })), h("main", { class: "main" }, h("gxg-tabs", { class: "gxg-tabs" }, h("gxg-tab-bar", { slot: "tab-bar-container", displayBorder: true }, h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true }), h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabAdvanced.tabLabel, tab: "advanced", disabled: this.disableAdvanced })), this.renderTabBasic(), this.renderTabAdvanced())), h("gxg-form-checkbox", { label: this._componentLocale.setCurrentEnvironment, id: "show-current-environment", checked: this.setAsTarget, slot: "footer-start" }), h("gxg-button", { id: "button-create", slot: "footer-end", type: "primary-text-only", onClick: this.setEnvironmentHandler, part: "gxg-button gxg-button--create" }, this._componentLocale.footer.btnSetNewEnvironment), h("gxg-button", { id: "button-cancel", slot: "footer-end", type: "outlined", onClick: this.cancelButtonClickedHandler, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel)))));
   }
   static get is() { return "gx-ide-new-environment"; }
   static get encapsulation() { return "shadow"; }
@@ -333,8 +338,8 @@ export class GxIdeNewEnvironment {
   }
   static get events() {
     return [{
-        "method": "componentDidRenderEvent",
-        "name": "componentDidRenderEvent",
+        "method": "componentDidRenderFirstTime",
+        "name": "componentDidRenderFirstTime",
         "bubbles": true,
         "cancelable": true,
         "composed": true,

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

@@ -55,6 +55,15 @@ ch-grid-column {
   border-bottom: 1px solid var(--gray-01);
 }
 
+ch-grid-column {
+  padding-inline-start: --gxg-container--padding;
+  padding-inline-end: --gxg-container--padding;
+}
+
+ch-grid-cell {
+  --spacing-comp-02: var(--gxg-container--padding);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -78,6 +87,7 @@ gxg-tabs {
   color: var(--gx-ide-component-text-color);
   font-weight: var(--font-weight-regular);
   font-size: var(--font-size-lg);
+  font-family: var(--font-family-primary);
   line-height: 1.6em;
   height: 100%;
   background-color: var(--gx-ide-component-background-color);
@@ -144,6 +154,14 @@ gxg-tabs {
   padding-inline-end: 2px;
 }
 
+/*gxg-tree-view*/
+.tree-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 /*Gemini*/
 /*Gx Ide*/
 :host {
@@ -185,23 +203,23 @@ gxg-tabs {
 
 /*Basic*/
 .basic-row-first {
-  grid-template-areas: "prototyping-target user-interface-language";
+  display: grid;
+  gap: var(--gx-ide-grid-column-gap);
+  padding: var(--gxg-container--padding);
+  border-bottom: 1px solid var(--gx-ide-container-border-color);
   grid-template-columns: repeat(2, 1fr);
 }
 
 .basic-row-second {
-  grid-template-areas: "prototyping-environment data-source";
   grid-template-columns: repeat(2, 1fr);
   grid-column-gap: 0;
   grid-row-gap: 0;
   flex-grow: 1;
 }
-.basic-row-second > *:first-child {
-  border-right: 1px solid var(--gx-ide-container-border-color);
-}
 
 /*Advanced*/
 .knowledge-base-storage {
+  display: grid;
   grid-template-areas: "knowledge-base-storage__col-left knowledge-base-storage__col-right";
   grid-template-columns: repeat(2, 1fr);
   flex-grow: 1;
@@ -211,8 +229,12 @@ gxg-tabs {
   border-right: 1px solid var(--gx-ide-container-border-color);
 }
 .knowledge-base-storage__col-left {
+  display: grid;
+  gap: var(--gx-ide-grid-row-gap);
+  padding: var(--gxg-container--padding);
   grid-area: knowledge-base-storage__col-left;
   grid-template-columns: 1fr auto;
+  grid-template-rows: repeat(4, min-content);
   grid-template-areas: "server-name-combo-box server-name-button" "database-name ." "collation-combo-box collation-button" "create-data-in-kb .";
 }
 .knowledge-base-storage__col-left .server-name-combo-box {
@@ -236,8 +258,12 @@ gxg-tabs {
   grid-area: create-data-in-kb;
 }
 .knowledge-base-storage__col-right {
+  display: grid;
+  padding: var(--gxg-container--padding);
+  gap: var(--gx-ide-grid-row-gap);
   grid-area: knowledge-base-storage__col-right;
   grid-template-columns: 1fr;
+  grid-template-rows: repeat(4, min-content);
   grid-template-areas: "authentication-type" "user-name" "password" "save-password";
 }
 .knowledge-base-storage__col-right .authentication-type {