@genexus/genexus-ide-ui 0.0.63 → 0.0.65

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

@@ -4,10 +4,9 @@ import { Host, h } from "@stencil/core";
 import { Locale } from "../../common/locale";
 import { config } from "../../common/config";
 import { updateTreeModelWithObjects, convertKbPropertiesDataToTreeItemData, clearKbPropertiesFromTree } from "./helpers";
-const KB_PROPERTIES = "properties";
+import { KB_PROPERTY, KB_OBJECT } from "./helpers";
 export class GxIdeKbManagerExport {
   constructor() {
-    this.checkedObjectsIds = [];
     this.checkedPropertiesIds = [];
     this.renderedFirstTime = false;
     this.flattenedObjectTypes = new Map();
@@ -26,6 +25,7 @@ export class GxIdeKbManagerExport {
     };
     this.addKBPropertiesCallbackHandler = async (e) => {
       const checked = e.detail.value;
+      this.addKbPropertiesIsChecked = checked;
       if (checked && this.addKBPropertiesCallback) {
         const kBPropertiesData = await this.addKBPropertiesCallback();
         if (kBPropertiesData.length === 0) {
@@ -61,7 +61,6 @@ export class GxIdeKbManagerExport {
     this.updateObjects = (objects) => {
       if (objects.length) {
         const newTreeModel = updateTreeModelWithObjects(objects, this.flattenedObjectTypes, this.treeModel);
-        console.log(JSON.stringify(newTreeModel, undefined, 2));
         this.treeModel = newTreeModel;
       }
     };
@@ -69,36 +68,35 @@ export class GxIdeKbManagerExport {
      * Update checked objects 'checkedObjectsArray' array. Used for the 'addReferencesCallback'
      */
     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");
+      // filter 'checked objects' and 'checked properties' ids
       const checkedObjectsIds = [];
-      if (checkedObjects.length > 0) {
-        checkedObjects.forEach(objectChecked => {
-          checkedObjectsIds.push(objectChecked.item.id);
-        });
-      }
-      this.checkedObjectsIds = checkedObjectsIds;
-      // properties checked
-      const checkedProperties = checkedItems.filter(node => node.item.class === "property");
       const checkedPropertiesIds = [];
-      if (checkedProperties.length > 0) {
-        checkedProperties.forEach(propertyChecked => {
-          checkedPropertiesIds.push(propertyChecked.item.id);
-        });
-      }
+      const allItemsWithCheckbox = [...event.detail.values()];
+      allItemsWithCheckbox.forEach(node => {
+        if (node.item.checked && node.item.metadata === KB_OBJECT) {
+          checkedObjectsIds.push(node.item.id);
+        }
+        else if (node.item.checked && node.item.metadata === KB_PROPERTY) {
+          checkedPropertiesIds.push(node.item.id);
+        }
+      });
+      this.checkedObjectsIds = checkedObjectsIds;
       this.checkedPropertiesIds = checkedPropertiesIds;
     };
     this.exportCallbackHandler = async () => {
       if (this.exportCallback) {
+        this.exportingIsInProcess = true;
         const exportAllChecked = this.exportAllCheckboxEl.checked;
         const fileName = this.fileNameEl.value;
-        const checkedKbPropertiesIds = this.checkedPropertiesIds;
+        const checkedKbPropertiesIds = this.addKbPropertiesIsChecked
+          ? this.checkedPropertiesIds
+          : [];
         const checkedObjectIds = exportAllChecked
           ? undefined
           : this.checkedObjectsIds;
-        this.exportCallback(fileName, checkedKbPropertiesIds, checkedObjectIds);
+        this.exportCallback(fileName, checkedKbPropertiesIds, checkedObjectIds).then(() => {
+          this.exportingIsInProcess = false;
+        });
         // returns Promise<boolean> but no procedure was detailed on the spec.
       }
     };
@@ -110,18 +108,59 @@ export class GxIdeKbManagerExport {
     };
     this.clearButtonHandler = () => {
       /* revisar*/
-      console.log("clear button clicked");
       this.objectsTreeEl.updateAllItemsProperties({ checked: false });
     };
     this.exportAllChangedHandler = (event) => {
       this.exportAllIsChecked = event.detail.value;
     };
+    this.evaluateTreeViewFilters = () => {
+      if (this.addKbPropertiesIsChecked && this.exportAllIsChecked) {
+        // only show properties
+        return KB_PROPERTY;
+      }
+      else if (!this.addKbPropertiesIsChecked && !this.exportAllIsChecked) {
+        // only show objects
+        return KB_OBJECT;
+      }
+      return "none"; // Applies if !this.addKbPropertiesIsChecked && this.exportAllIsChecked
+    };
+    this.evaluateContentToDisplay = () => {
+      // Nothing to display on the tree-view
+      if (this.noObjects) {
+        return this.renderMessage(true);
+      }
+      // The tree should be empty, because all filters are being applied.
+      // Display a message to prevent a white screen.
+      if (!this.addKbPropertiesIsChecked && this.exportAllIsChecked) {
+        return this.renderMessage(false);
+      }
+      return (h("gxg-tree-view", { treeModel: this.treeModel, dragDisabled: true, dropDisabled: true, toggleCheckboxes: true, checked: true, checkbox: true, filter: this.evaluateTreeViewFilters(), filterType: this.addKbPropertiesIsChecked && !this.exportAllIsChecked
+          ? "none"
+          : "metadata", onCheckedItemsChange: this.objectsTreeCheckedItemsChangedHandler, ref: el => (this.objectsTreeEl = el) }));
+    };
+    this.renderMessage = (nothingToDisplay) => {
+      return (h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, class: "gx-ide-message gx-ide-message--short", part: "referenced-by-empty-status-message" }, nothingToDisplay ? ([
+        h("span", null, this._componentLocale.main.noObjectsToDisplay),
+        h("gxg-text", { type: "text-link-no-line", textAlign: "center", onClick: this.addObjectsCallbackHandler }, this._componentLocale.main.beginByADdingSomeObjects)
+      ]) : (h("span", null, this._componentLocale.main.exportAllMessage))));
+    };
+    this.clearButtonDisabledConditions = () => {
+      return this.noObjects || this.checkedObjectsIds.length === 0;
+    };
+    this.loaderCancelCallbackHandler = () => {
+      if (this.cancelCallback) {
+        this.cancelCallback();
+      }
+    };
     this.exportAllIsChecked = false;
+    this.addKbPropertiesIsChecked = false;
+    this.checkedObjectsIds = [];
     this.fileName = "";
     this.exportFilePathName = undefined;
     this.noObjects = undefined;
     this.treeModel = [];
-    this.dummyInitialTree = undefined;
+    this.exportingIsInProcess = false;
+    this.loader = false;
     this.kbPropertiesTypes = undefined;
     this.objectTypes = undefined;
     this.exportFileDirectoryCallback = undefined;
@@ -132,13 +171,18 @@ export class GxIdeKbManagerExport {
     this.exportCallback = undefined;
     this.cancelCallback = undefined;
   }
-  watchtreeModelHandler(newState) {
+  watchTreeModelHandler(newState) {
     this.noObjects = !!(newState.length === 0 || !newState);
   }
-  watchDummyInitialTreeHandler(newTree) {
-    this.treeModel = newTree;
+  watchExportingIsInProcessHandler(isExporting) {
+    if (isExporting && this.loader) {
+      this.loaderEl.show = true;
+    }
+    else if (!isExporting && this.loader) {
+      this.loaderEl.show = true;
+    }
   }
-  watchObjectTypeslHandler(newState) {
+  watchObjectTypesHandler(newState) {
     this.flattenObjectTypes(newState);
   }
   // 6.COMPONENT LIFECYCLE EVENTS //
@@ -161,14 +205,17 @@ export class GxIdeKbManagerExport {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noHeadingPadding: true, headingPaddingTop: true, containerTitle: this._componentLocale.componentName, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("header", { slot: "header", class: "header" }, h("div", { class: "header__top" }, h("gx-ide-directory-selector", { class: { "select-file-input": true }, value: this.exportFilePathName, part: "xpz-file", label: this._componentLocale.header.exportFileName, ref: el => (this.fileNameEl = el), selectDirectoryCallback: this.exportFileDirectoryCallback }), h("gxg-button-group", { class: "export-cancel-buttons-group", "default-selected-btn-id": "responsive-tablet-btn" }, h("button", { id: "export-kb-btn", part: "export-btn", onClick: this.exportCallbackHandler }, this._componentLocale.header.exportButton), h("button", { id: "cancel-kb-export-btn", part: "cancel-button", onClick: this.cancelCallbackHandler }, this._componentLocale.header.cancelButton)), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/settings", part: "select-kb-btn", class: { "options-btn": true }, onClick: this.optionsCallbackHandler }, this._componentLocale.header.optionsButton)), h("div", { class: "header__bottom" }, h("div", { class: { "checkboxes-wrapper": true } }, h("gxg-form-checkbox", { label: this._componentLocale.main.addKnowledgeBaseDescription, onChange: this.addKBPropertiesCallbackHandler, part: "add-kb-checkbox" }), h("gxg-form-checkbox", { label: this._componentLocale.main.exportAll, part: "export-all-checkbox", ref: el => (this.exportAllCheckboxEl =
-        el), onChange: this.exportAllChangedHandler })))), h("div", { class: {
+    console.log("this.noObjects", this.noObjects);
+    console.log("this.exportingIsInProcess", this.exportingIsInProcess);
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noHeadingPadding: true, headingPaddingTop: true, containerTitle: this._componentLocale.componentName, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("header", { slot: "header", class: "header" }, h("div", { class: "header__top" }, h("gx-ide-directory-selector", { class: { "select-file-input": true }, value: this.exportFilePathName, part: "xpz-file", label: this._componentLocale.header.exportFileName, ref: el => (this.fileNameEl = el), selectDirectoryCallback: this.exportFileDirectoryCallback }), h("gxg-button-group", { class: "export-cancel-buttons-group" }, h("button", { id: "export-kb-btn", part: "export-btn", onClick: this.exportCallbackHandler, disabled: this.noObjects }, this._componentLocale.header.exportButton), h("button", { id: "cancel-kb-export-btn", part: "cancel-button", onClick: this.cancelCallbackHandler, disabled: !this.exportingIsInProcess || this.noObjects }, this._componentLocale.header.cancelButton)), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/settings", part: "select-kb-btn", class: { "options-btn": true }, onClick: this.optionsCallbackHandler }, this._componentLocale.header.optionsButton)), h("div", { class: "header__bottom" }, h("div", { class: { "checkboxes-wrapper": true } }, h("gxg-form-checkbox", { label: this._componentLocale.main.addKnowledgeBaseDescription, onChange: this.addKBPropertiesCallbackHandler, part: "add-kb-checkbox" }), h("gxg-form-checkbox", { label: this._componentLocale.main.exportAll, part: "export-all-checkbox", ref: el => (this.exportAllCheckboxEl =
+        el), disabled: this.noObjects, onChange: this.exportAllChangedHandler })))), h("div", { class: {
         "tree-container": true,
-        "tree-container--empty": this.noObjects
+        "tree-container--empty": this.noObjects ||
+          (!this.noObjects &&
+            this.exportAllIsChecked &&
+            !this.addKbPropertiesIsChecked)
         // "tree-container--export-all": this.exportAllIsChecked
-      } }, !this.noObjects ? (
-    /* objects tree */
-    h("ch-tree-view-render", { treeModel: this.treeModel, dragDisabled: true, dropDisabled: true, toggleCheckboxes: true, checked: true, checkbox: true, filter: KB_PROPERTIES, filterType: this.exportAllIsChecked ? "metadata" : "none", onCheckedItemsChange: this.objectsTreeCheckedItemsChangedHandler, 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, class: "gx-ide-message gx-ide-message--short", part: "referenced-by-empty-status-message" }, "There are no Objects to display. ", h("br", null), h("gxg-text", { type: "text-link-no-line", textAlign: "center", onClick: this.addObjectsCallbackHandler }, "Begin by adding some.")))), h("gxg-button", { type: "secondary-text-only", part: "export-button", class: { "cancel-btn": true }, slot: "footer-start", onClick: this.clearButtonHandler }, this._componentLocale.footer.clearButton), h("div", { class: { "footer-right-wrapper": true }, slot: "footer-end" }, h("gxg-button", { onClick: this.addReferencesCallbackHandler, type: "outlined-text-icon", icon: "general/references", part: "export-button", class: { "cancel-btn": true }, disabled: this.exportAllIsChecked }, this._componentLocale.footer.referencesButton), h("gxg-button", { type: "primary-text-icon", icon: "menus/new-object", part: "export-button", class: { "cancel-btn": true }, onClick: this.addObjectsCallbackHandler, disabled: this.exportAllIsChecked, grabAttention: this.noObjects }, this._componentLocale.footer.addButton))))));
+      } }, this.evaluateContentToDisplay()), h("gxg-text", { type: "button-like", part: "export-button", slot: "footer-start", onClick: this.clearButtonHandler, disabled: this.clearButtonDisabledConditions() }, this._componentLocale.footer.clearButton), h("div", { class: { "footer-right-wrapper": true }, slot: "footer-end" }, h("gxg-button", { onClick: this.addReferencesCallbackHandler, type: "outlined-text-icon", icon: "general/references", part: "export-button", class: { "cancel-btn": true }, disabled: this.exportAllIsChecked }, this._componentLocale.footer.referencesButton), h("gxg-button", { type: "primary-text-icon", icon: "menus/new-object", part: "export-button", class: { "cancel-btn": true }, onClick: this.addObjectsCallbackHandler, disabled: this.exportAllIsChecked }, this._componentLocale.footer.addButton)))), this.loader ? (h("gxg-ide-loader", { cancelLabel: this._componentLocale.loader.cancelLabel, container: this.el, loaderTitle: this._componentLocale.loader.title, ref: el => (this.loaderEl = el), cancelCallback: this.loaderCancelCallbackHandler })) : null));
   }
   static get is() { return "gx-ide-kb-manager-export"; }
   static get originalStyleUrls() {
@@ -184,25 +231,23 @@ export class GxIdeKbManagerExport {
   static get assetsDirs() { return ["gx-ide-assets/kb-manager-export"]; }
   static get properties() {
     return {
-      "dummyInitialTree": {
-        "type": "unknown",
+      "loader": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "TreeViewItemModel[]",
-          "resolved": "TreeViewItemModel[]",
-          "references": {
-            "TreeViewItemModel": {
-              "location": "import",
-              "path": "@genexus/chameleon-controls-library/dist/types/components/tree-view/tree-view/types"
-            }
-          }
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Just for testing. Remove when this is is done (Bruno)"
-        }
+          "text": "If true, it will display a loader when needed."
+        },
+        "attribute": "loader",
+        "reflect": false,
+        "defaultValue": "false"
       },
       "kbPropertiesTypes": {
         "type": "unknown",
@@ -398,10 +443,13 @@ export class GxIdeKbManagerExport {
   static get states() {
     return {
       "exportAllIsChecked": {},
+      "addKbPropertiesIsChecked": {},
+      "checkedObjectsIds": {},
       "fileName": {},
       "exportFilePathName": {},
       "noObjects": {},
-      "treeModel": {}
+      "treeModel": {},
+      "exportingIsInProcess": {}
     };
   }
   static get events() {
@@ -441,13 +489,13 @@ export class GxIdeKbManagerExport {
   static get watchers() {
     return [{
         "propName": "treeModel",
-        "methodName": "watchtreeModelHandler"
+        "methodName": "watchTreeModelHandler"
       }, {
-        "propName": "dummyInitialTree",
-        "methodName": "watchDummyInitialTreeHandler"
+        "propName": "exportingIsInProcess",
+        "methodName": "watchExportingIsInProcessHandler"
       }, {
         "propName": "objectTypes",
-        "methodName": "watchObjectTypeslHandler"
+        "methodName": "watchObjectTypesHandler"
       }];
   }
 }

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

@@ -20,7 +20,7 @@
       "title": "Import Status",
       "clearButton": "Clear Status",
       "noImportedFiles": "There are no imported files yet",
-      "importedButHidden": "There are imported files, but all are hidden. Try by activating errors, warnings or success"
+      "importedButHidden": "There are imported files, but all are hidden. Try by activating errors, warnings or success."
     }
   },
   "footer": {

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

@@ -1,3 +1,6 @@
+/* objects in file metadata*/
+export const KB_OBJECT = "object";
+export const KB_CATEGORY = "category";
 const convertImportItemToTreeItem = (importCatIcon, importItems) => {
   const importTreeItems = [];
   importItems.forEach(importItem => {
@@ -5,10 +8,10 @@ const convertImportItemToTreeItem = (importCatIcon, importItems) => {
       id: importItem.id,
       caption: importItem.name,
       leftImgSrc: importCatIcon,
-      checkbox: true,
       expanded: true,
       leaf: true,
-      class: "object tree-view-item"
+      class: "object tree-view-item",
+      metadata: KB_OBJECT
     });
   });
   return importTreeItems;
@@ -24,12 +27,13 @@ export const convertImportCategoryToTreeView = (importCategoryData) => {
   importCategoryData.forEach(importCat => {
     const importCategoryTreeItem = {
       id: importCat.id,
+      // caption: importCat.name,
       caption: `${importCat.name} (${importCat.items.length})`,
       leftImgSrc: importCat.icon,
-      checkbox: true,
       expanded: true,
       leaf: false,
       class: "category tree-view-item",
+      metadata: KB_CATEGORY,
       items: convertImportItemToTreeItem(importCat.icon, importCat.items)
     };
     treeData.push(importCategoryTreeItem);
@@ -60,7 +64,7 @@ const updateImportStatusTree = (importItemResultFullData, importTreeActualState)
       // the count is (1), because this is the first item for this category
       caption: `${importItemResultFullData.categoryName} (1)`,
       leftImgSrc: importItemResultFullData.categoryIcon,
-      class: `tree-view-item tree-view-item--${importItemResultFullData.status}`,
+      class: `tree-view-item`,
       expanded: true,
       items: [
         {

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

@@ -209,6 +209,7 @@ gxg-tabs {
   height: var(--spacing-comp-02);
   border-radius: 50%;
   background-color: var(--gray-03);
+  margin-inline-end: var(--spacing-comp-01);
   background-color: var(--color-success-dark);
 }
 .main .tree-container--import-status .tree-view-item--warning::part(action) {
@@ -221,6 +222,7 @@ gxg-tabs {
   height: var(--spacing-comp-02);
   border-radius: 50%;
   background-color: var(--gray-03);
+  margin-inline-end: var(--spacing-comp-01);
   background-color: var(--color-warning-dark);
 }
 .main .tree-container--import-status .tree-view-item--error::part(action) {
@@ -233,6 +235,7 @@ gxg-tabs {
   height: var(--spacing-comp-02);
   border-radius: 50%;
   background-color: var(--gray-03);
+  margin-inline-end: var(--spacing-comp-01);
   background-color: var(--color-error-dark);
 }
 .main .tree-container--no-warnings .tree-view-item--warning {

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

@@ -4,7 +4,9 @@ import { Host, h } from "@stencil/core";
 import { Locale } from "../../common/locale";
 import { config } from "../../common/config";
 import { convertImportCategoryToTreeView, addImportItemResultDataItem } from "./helpers";
+// import { CheckboxInfo } from "@genexus/gemini/dist/types/components/form-checkbox/form-checkbox";
 import { countTreeItems } from "../../common/helpers";
+import { KB_OBJECT } from "./helpers";
 export class GxIdeKbManagerImport {
   constructor() {
     this.renderedFirstTime = false;
@@ -12,6 +14,34 @@ export class GxIdeKbManagerImport {
     this.importCategoryData = [];
     this.objectsInFileTotalNodes = 0;
     // 9.LOCAL METHODS //
+    this.evaluateImportStatusMessage = () => {
+      this.someStatusVisible =
+        this.statusInfo.error.display ||
+          this.statusInfo.warning.display ||
+          this.statusInfo.success.display;
+    };
+    this.countMessages = () => {
+      /* totally inefficient way to count. This has to be improved*/
+      let errors = 0;
+      let warnings = 0;
+      let successes = 0;
+      this.importTreeState.forEach(category => {
+        category.items.forEach(object => {
+          if (object.class.includes("tree-view-item--error")) {
+            errors += object.items.length;
+          }
+          else if (object.class.includes("tree-view-item--warning")) {
+            warnings += object.items.length;
+          }
+          else if (object.class.includes("tree-view-item--success")) {
+            successes += object.items.length;
+          }
+        });
+      });
+      this.statusInfo.error.number = errors;
+      this.statusInfo.warning.number = warnings;
+      this.statusInfo.success.number = successes;
+    };
     this.evaluateObjects = () => {
       var _a;
       this.noObjects = !!(((_a = this.objectsTreeState) === null || _a === void 0 ? void 0 : _a.length) === 0 || !this.objectsTreeState);
@@ -40,7 +70,7 @@ export class GxIdeKbManagerImport {
     this.evaluateHeaderActiveButton = () => {
       if (!this.selectedFile) {
         this.headerButtonsGroup.activeButtonId = "select-file-btn";
-        this.fileInputEl.value = undefined;
+        this.fileInputEl.clearInput();
       }
       else {
         this.headerButtonsGroup.activeButtonId = "load-file-btn";
@@ -58,7 +88,7 @@ export class GxIdeKbManagerImport {
       }
     };
     this.objectsTreeCheckedItemsChangedHandler = (event) => {
-      /* Begin of evaluate 'select/unselect checkbox' state*/
+      /* 1. Begin of evaluate 'select/unselect checkbox' state*/
       if (event.detail == null) {
         this.toggleObjectsCheckboxEl.checked = false;
         this.toggleObjectsCheckboxEl.indeterminate = false;
@@ -75,18 +105,56 @@ export class GxIdeKbManagerImport {
       this.toggleObjectsCheckboxEl.checked = firstItemCheckedValue;
       this.toggleObjectsCheckboxEl.indeterminate =
         !allItemsHaveTheSameCheckedValue;
-      /* End of evaluate 'select/unselect checkbox' state*/
+      /* /End of evaluate 'select/unselect checkbox' state*/
+      /* 2. Begin of checked items evaluation*/
       const checkedItems = allItemsWithCheckbox.filter(node => node.item.checked);
       // objects checked
-      const checkedObjects = checkedItems.filter(node => node.item.class === "object");
+      const checkedObjects = checkedItems.filter(node => node.item.metadata === KB_OBJECT);
       const checkedObjectsIds = [];
       if (checkedObjects.length > 0) {
         checkedObjects.forEach(objectChecked => {
           checkedObjectsIds.push(objectChecked.item.id);
         });
       }
+      /* /End of checked items evaluation*/
+      /* 3. Begin of caption update*/
+      /* TO DO (when we can differentiate the caption from the number of children)*/
+      // const categoryItems = allItemsWithCheckbox.filter(
+      //   node => node.item.metadata === KB_CATEGORY
+      // );
+      // categoryItems.forEach(category => {
+      //   const itemInfo = category.item;
+      //   // Update the amount of checked values
+      //   if (itemInfo.leaf !== true) {
+      //     const totalItems = itemInfo.items.length;
+      //     const totalItemsChecked = itemInfo.items.filter(
+      //       itemUIModel => itemUIModel.checked
+      //     ).length;
+      //     const newItemCaption =
+      //       totalItems !== totalItemsChecked
+      //         ? `${itemInfo.caption} (${totalItemsChecked}/${totalItems})`
+      //         : `${itemInfo.caption} (${totalItems})`;
+      //     // Only update the item caption if needed
+      //     if (newItemCaption !== itemInfo.caption) {
+      //       this.objectsTreeEl.updateItemsProperties([itemInfo.id], {
+      //         id: itemInfo.id,
+      //         caption: newItemCaption
+      //       });
+      //     }
+      //   }
+      // });
+      /* /End of caption update*/
       this.checkedObjectsIds = checkedObjectsIds;
     };
+    this.objectsTreeContextMenuHandler = (event) => {
+      if (this.objectContextMenuCallback && event.detail.metadata === KB_OBJECT) {
+        this.objectContextMenuCallback({
+          objectId: event.detail.id,
+          screenX: event.detail.contextmenuEvent.screenX,
+          screenY: event.detail.contextmenuEvent.screenY
+        });
+      }
+    };
     this.cancelImportHandler = () => {
       if (this.cancelCallback) {
         this.cancelCallback();
@@ -105,23 +173,31 @@ export class GxIdeKbManagerImport {
       this.statusInfo.warning.number = 0;
       this.statusInfo.success.number = 0;
     };
-    this.toggleSelectionHandler = (e) => {
-      const checked = e.detail.value;
+    this.toggleSelectionClickHandler = (e) => {
+      const checked = e.target.checked;
       this.toggleObjectsCheckboxEl.indeterminate = false;
       this.objectsTreeEl.updateAllItemsProperties({ checked: checked });
     };
     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();
+      const errorIndex = activeStates.findIndex(state => state.itemId === "error");
+      const warningIndex = activeStates.findIndex(state => state.itemId === "warning");
+      const successIndex = activeStates.findIndex(state => state.itemId === "success");
+      this.statusInfo = {
+        error: {
+          display: errorIndex !== -1,
+          number: this.statusInfo.error.number
+        },
+        warning: {
+          display: warningIndex !== -1,
+          number: this.statusInfo.warning.number
+        },
+        success: {
+          display: successIndex !== -1,
+          number: this.statusInfo.success.number
+        }
+      };
+      this.evaluateImportStatusMessage();
     };
     this.evaluateCheckAllValue = () => {
       let checked = true;
@@ -132,8 +208,8 @@ export class GxIdeKbManagerImport {
       }
       return checked;
     };
-    this.evaluateHiddenImportsMessage = () => {
-      /* to do*/
+    this.fileClearedHandler = () => {
+      this.selectedFile = null;
     };
     this.checkedObjectsIds = [];
     this.noObjects = undefined;
@@ -153,6 +229,8 @@ export class GxIdeKbManagerImport {
       }
     };
     this.objectsTreeState = [];
+    this.importStatusMessage = undefined;
+    this.someStatusVisible = undefined;
     this.noImport = undefined;
     this.importTreeState = [];
     this.importingObjects = false;
@@ -162,6 +240,7 @@ export class GxIdeKbManagerImport {
     this.loadCallback = undefined;
     this.cancelCallback = undefined;
     this.statusMinimal = false;
+    this.objectContextMenuCallback = undefined;
   }
   watchObjectsTreeStateHandler(newState) {
     this.noObjects = !!(newState.length === 0 || !newState);
@@ -169,6 +248,14 @@ export class GxIdeKbManagerImport {
   }
   watchImportTreeStateHandler(newState) {
     this.noImport = !!(newState.length === 0 || !newState);
+    if (this.noImport) {
+      this.importStatusMessage =
+        this._componentLocale.main.importStatus.noImportedFiles;
+    }
+    else {
+      this.importStatusMessage =
+        this._componentLocale.main.importStatus.importedButHidden;
+    }
   }
   watchSelectedFileHandler() {
     this.evaluateHeaderActiveButton();
@@ -179,6 +266,9 @@ export class GxIdeKbManagerImport {
     this.componentDidLoadEvent.emit(true);
     this.evaluateObjects();
     this.evaluateImport();
+    this.importStatusMessage =
+      this._componentLocale.main.importStatus.noImportedFiles;
+    this.evaluateImportStatusMessage();
   }
   componentDidRender() {
     if (!this.renderedFirstTime) {
@@ -193,27 +283,27 @@ export class GxIdeKbManagerImport {
    */
   async addResultItem(item) {
     this.importTreeState = addImportItemResultDataItem(item, this.importCategoryData, this.importTreeState);
-    this.statusInfo[`${item.status}`].number += item.messages.length;
+    this.countMessages();
   }
   //  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", {
+    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, onClearButtonClicked: this.fileClearedHandler, 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: {
+    }, h("button", { id: "select-file-btn", part: "select-file-button", onClick: this.selectFileHandler, disabled: this.importingObjects }, this._componentLocale.header.selectFileButton), h("button", { id: "load-file-btn", part: "load-file-button", disabled: !this.selectedFile || this.importingObjects, 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._componentLocale.main.objectsInFile.selectUnselect, part: "select-all-checkbox", slot: "footer-start", disabled: this.importingObjects || this.objectsTreeState.length === 0, checked: this.evaluateCheckAllValue(), onChange: this.toggleSelectionHandler, ref: (el) => (this.toggleObjectsCheckboxEl =
+      } }, !this.noObjects ? (h("gxg-tree-view", { treeModel: this.objectsTreeState, dragDisabled: true, dropDisabled: true, toggleCheckboxes: true, checkbox: true, checked: true, onCheckedItemsChange: this.objectsTreeCheckedItemsChangedHandler, onItemContextmenu: this.objectsTreeContextMenuHandler, 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._componentLocale.main.objectsInFile.selectUnselect, part: "select-all-checkbox", slot: "footer-start", disabled: this.importingObjects || this.objectsTreeState.length === 0, checked: this.evaluateCheckAllValue(), onClick: this.toggleSelectionClickHandler, ref: (el) => (this.toggleObjectsCheckboxEl =
         el) }), 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--empty": this.noImport || !this.someStatusVisible,
         "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..." }))));
+        "tree-container--no-successes": !this.statusInfo.success.display
+      } }, !this.noImport && this.someStatusVisible ? (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" }, this.importStatusMessage))), h("gxg-text", { type: "button-like", slot: "footer-end", part: "select-kb-btn", onClick: this.clearStatusHandler, disabled: this.noImport || this.importingObjects }, 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"; }
@@ -345,6 +435,25 @@ export class GxIdeKbManagerImport {
         "attribute": "status-minimal",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "objectContextMenuCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ObjectContextMenuCallback",
+          "resolved": "(objectContextMenu: ObjectContextMenuInfo) => Promise<void>",
+          "references": {
+            "ObjectContextMenuCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "It displays the status buttons (errors, warning, successes) with the minimal ui (no captions)"
+        }
       }
     };
   }
@@ -355,6 +464,8 @@ export class GxIdeKbManagerImport {
       "showHiddenImportsMessage": {},
       "statusInfo": {},
       "objectsTreeState": {},
+      "importStatusMessage": {},
+      "someStatusVisible": {},
       "noImport": {},
       "importTreeState": {},
       "importingObjects": {}