@c8y/ngx-components 1021.38.0 → 1021.49.1

package/fesm2022/c8y-ngx-components-ecosystem-application-plugins.mjs

@@ -1,18 +1,19 @@
 import * as i0 from '@angular/core';
 import { Pipe, Component, Input, EventEmitter, Output, ViewChild, Injectable, NgModule } from '@angular/core';
 import * as i2 from '@c8y/ngx-components';
-import { gettext, ApplicationPluginStatus, PluginsService, PluginsExportScopes, DataGridComponent, CoreModule, hookRoute, ViewContext } from '@c8y/ngx-components';
-import * as i3 from '@c8y/ngx-components/ecosystem/shared';
-import { PRODUCT_EXPERIENCE_ECOSYSTEM, SharedEcosystemModule } from '@c8y/ngx-components/ecosystem/shared';
-import * as i1$1 from '@angular/router';
+import { gettext, PackageType, ApplicationPluginStatus, PluginsService, PluginsExportScopes, DataGridComponent, CoreModule, hookRoute, ViewContext } from '@c8y/ngx-components';
+import * as i1 from '@c8y/ngx-components/ecosystem/shared';
+import { PRODUCT_EXPERIENCE_ECOSYSTEM, defaultPackageTypes, SharedEcosystemModule } from '@c8y/ngx-components/ecosystem/shared';
+import * as i1$2 from '@angular/router';
 import { pick, uniq } from 'lodash-es';
-import * as i1 from 'ngx-bootstrap/modal';
-import { Subject, BehaviorSubject, combineLatest, of, firstValueFrom } from 'rxjs';
+import * as i1$1 from 'ngx-bootstrap/modal';
+import { Subject, BehaviorSubject, combineLatest, of, firstValueFrom, map as map$1 } from 'rxjs';
 import { map, takeUntil, shareReplay } from 'rxjs/operators';
 import * as i5 from '@angular/common';
-import * as i5$1 from '@angular/forms';
 import { ApplicationType } from '@c8y/client';
 import * as i4 from '@ngx-translate/core';
+import * as i2$1 from '@angular/forms';
+import { FormControl } from '@angular/forms';
 
 class AppStatePipe {
     constructor(ecosystemService) {
@@ -22,7 +23,7 @@ class AppStatePipe {
         const appState = this.ecosystemService.getAppState(app);
         return appState[arg];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AppStatePipe, deps: [{ token: i3.EcosystemService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AppStatePipe, deps: [{ token: i1.EcosystemService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: AppStatePipe, name: "appState" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AppStatePipe, decorators: [{
@@ -31,7 +32,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                     name: 'appState',
                     pure: true
                 }]
-        }], ctorParameters: () => [{ type: i3.EcosystemService }] });
+        }], ctorParameters: () => [{ type: i1.EcosystemService }] });
 
 class AppsToUpdateRemotesSelectComponent {
     constructor(bsModalRef, wizardModalService, ecosystemService) {
@@ -101,13 +102,13 @@ class AppsToUpdateRemotesSelectComponent {
     async getOwnedHostedApps() {
         return (await this.ecosystemService.getWebApplications()).filter(app => this.ecosystemService.isOwner(app) && app.type !== ApplicationType.EXTERNAL);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AppsToUpdateRemotesSelectComponent, deps: [{ token: i1.BsModalRef }, { token: i2.WizardModalService }, { token: i3.EcosystemService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AppsToUpdateRemotesSelectComponent, selector: "c8y-apps-to-update-remotes-select", inputs: { apps: "apps", updateType: "updateType", pluginName: "pluginName", appsDisabled: "appsDisabled" }, ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-modules'\"></i>\n    <div class=\"modal-title h4\" id=\"modal-title\" translate>Custom applications</div>\n  </div>\n  <div class=\"inner-scroll\" id=\"modal-body\">\n    <div class=\"p-16 text-center separator-bottom sticky-top bg-component\">\n      <p class=\"text-medium\">\n        {{ textConfig.header | translate }}\n      </p>\n      <c8y-filter (onSearch)=\"filterTerm$.next($event)\"></c8y-filter>\n    </div>\n    <c8y-list-group *ngIf=\"apps.length; else emptyList\">\n      <c8y-li\n        [ngClass]=\"{ disabled: updateType === 'install' && appsDisabled.has(app.id) }\"\n        *ngFor=\"let app of filteredApps$ | async\"\n        data-cy=\"apps-to-update-remotes-select--applications-list\"\n      >\n        <c8y-li-checkbox (onSelect)=\"setSelectedApps($event, app)\" data-cy=\"apps-to-update-remotes-select--app-checkbox\"></c8y-li-checkbox>\n        <c8y-li-icon class=\"p-l-0 icon-32\">\n          <c8y-app-icon\n            class=\"list-group-icon\"\n            [app]=\"app\"\n            [contextPath]=\"app.contextPath\"\n            [name]=\"app.name\"\n          ></c8y-app-icon>\n        </c8y-li-icon>\n        <div class=\"d-flex\">\n          <div class=\"p-r-8\">\n            <p class=\"text-medium\" [innerText]=\"app | humanizeAppName | async\"></p>\n            <p class=\"small text-muted\">{{ app.description }}</p>\n          </div>\n          <span class=\"label m-l-auto a-s-start\" [ngClass]=\"app | appState: 'class'\">\n            {{ app | appState: 'label' | translate }}\n          </span>\n        </div>\n      </c8y-li>\n    </c8y-list-group>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ textConfig.applyButton | translate }}\"\n      [disabled]=\"appsToUpdateRemotes.length === 0\"\n      (click)=\"apply()\"\n    >\n      {{ textConfig.applyButton | translate }}\n    </button>\n  </div>\n</div>\n<ng-template #emptyList>\n  <c8y-ui-empty-state\n    [icon]=\"'c8y-modules'\"\n    [title]=\"'No custom applications available.' | translate\"\n    *ngIf=\"updateType !== 'install'\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\n  <ng-container *ngIf=\"updateType === 'install'\">\n    <c8y-ui-empty-state\n      [icon]=\"'c8y-modules'\"\n      [title]=\"'No custom applications available.' | translate\"\n      [subtitle]=\"'Create a custom application by duplicating an existing one.' | translate\"\n      [horizontal]=\"true\"\n    >\n      <button\n        class=\"btn btn-sm btn-default m-t-8\"\n        title=\"{{ 'Duplicate' | translate }}\"\n        (click)=\"duplicateApp()\"\n      >\n        {{ 'Duplicate' | translate }}\n      </button>\n    </c8y-ui-empty-state>\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "component", type: i2.AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FilterInputComponent, selector: "c8y-filter", inputs: ["icon"], outputs: ["onSearch"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: AppStatePipe, name: "appState" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AppsToUpdateRemotesSelectComponent, deps: [{ token: i1$1.BsModalRef }, { token: i2.WizardModalService }, { token: i1.EcosystemService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AppsToUpdateRemotesSelectComponent, selector: "c8y-apps-to-update-remotes-select", inputs: { apps: "apps", updateType: "updateType", pluginName: "pluginName", appsDisabled: "appsDisabled" }, ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-modules'\"></i>\n    <div class=\"modal-title h4\" id=\"modal-title\" translate>Custom applications</div>\n  </div>\n  <div class=\"inner-scroll\" id=\"modal-body\">\n    <div class=\"p-16 text-center separator-bottom sticky-top bg-component\">\n      <p class=\"text-medium\">\n        {{ textConfig.header | translate }}\n      </p>\n      <c8y-filter (onSearch)=\"filterTerm$.next($event)\"></c8y-filter>\n    </div>\n    <c8y-list-group *ngIf=\"apps.length; else emptyList\">\n      <c8y-li\n        [ngClass]=\"{ disabled: updateType === 'install' && appsDisabled.has(app.id) }\"\n        *ngFor=\"let app of filteredApps$ | async\"\n        data-cy=\"apps-to-update-remotes-select--applications-list\"\n      >\n        <c8y-li-checkbox (onSelect)=\"setSelectedApps($event, app)\" data-cy=\"apps-to-update-remotes-select--app-checkbox\"></c8y-li-checkbox>\n        <c8y-li-icon class=\"p-l-0 icon-32\">\n          <c8y-app-icon\n            class=\"list-group-icon\"\n            [app]=\"app\"\n            [contextPath]=\"app.contextPath\"\n            [name]=\"app.name\"\n          ></c8y-app-icon>\n        </c8y-li-icon>\n        <div class=\"d-flex\">\n          <div class=\"p-r-8\">\n            <p class=\"text-medium\" [innerText]=\"app | humanizeAppName | async\"></p>\n            <p class=\"small text-muted\">{{ app.description }}</p>\n          </div>\n          <span class=\"label m-l-auto a-s-start\" [ngClass]=\"app | appState: 'class'\">\n            {{ app | appState: 'label' | translate }}\n          </span>\n        </div>\n      </c8y-li>\n    </c8y-list-group>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ textConfig.applyButton | translate }}\"\n      [disabled]=\"appsToUpdateRemotes.length === 0\"\n      (click)=\"apply()\"\n    >\n      {{ textConfig.applyButton | translate }}\n    </button>\n  </div>\n</div>\n<ng-template #emptyList>\n  <c8y-ui-empty-state\n    [icon]=\"'c8y-modules'\"\n    [title]=\"'No custom applications available.' | translate\"\n    *ngIf=\"updateType !== 'install'\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\n  <ng-container *ngIf=\"updateType === 'install'\">\n    <c8y-ui-empty-state\n      [icon]=\"'c8y-modules'\"\n      [title]=\"'No custom applications available.' | translate\"\n      [subtitle]=\"'Create a custom application by duplicating an existing one.' | translate\"\n      [horizontal]=\"true\"\n    >\n      <button\n        class=\"btn btn-sm btn-default m-t-8\"\n        title=\"{{ 'Duplicate' | translate }}\"\n        (click)=\"duplicateApp()\"\n      >\n        {{ 'Duplicate' | translate }}\n      </button>\n    </c8y-ui-empty-state>\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "component", type: i2.AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FilterInputComponent, selector: "c8y-filter", inputs: ["icon", "filterTerm"], outputs: ["onSearch"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: AppStatePipe, name: "appState" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AppsToUpdateRemotesSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-apps-to-update-remotes-select', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-modules'\"></i>\n    <div class=\"modal-title h4\" id=\"modal-title\" translate>Custom applications</div>\n  </div>\n  <div class=\"inner-scroll\" id=\"modal-body\">\n    <div class=\"p-16 text-center separator-bottom sticky-top bg-component\">\n      <p class=\"text-medium\">\n        {{ textConfig.header | translate }}\n      </p>\n      <c8y-filter (onSearch)=\"filterTerm$.next($event)\"></c8y-filter>\n    </div>\n    <c8y-list-group *ngIf=\"apps.length; else emptyList\">\n      <c8y-li\n        [ngClass]=\"{ disabled: updateType === 'install' && appsDisabled.has(app.id) }\"\n        *ngFor=\"let app of filteredApps$ | async\"\n        data-cy=\"apps-to-update-remotes-select--applications-list\"\n      >\n        <c8y-li-checkbox (onSelect)=\"setSelectedApps($event, app)\" data-cy=\"apps-to-update-remotes-select--app-checkbox\"></c8y-li-checkbox>\n        <c8y-li-icon class=\"p-l-0 icon-32\">\n          <c8y-app-icon\n            class=\"list-group-icon\"\n            [app]=\"app\"\n            [contextPath]=\"app.contextPath\"\n            [name]=\"app.name\"\n          ></c8y-app-icon>\n        </c8y-li-icon>\n        <div class=\"d-flex\">\n          <div class=\"p-r-8\">\n            <p class=\"text-medium\" [innerText]=\"app | humanizeAppName | async\"></p>\n            <p class=\"small text-muted\">{{ app.description }}</p>\n          </div>\n          <span class=\"label m-l-auto a-s-start\" [ngClass]=\"app | appState: 'class'\">\n            {{ app | appState: 'label' | translate }}\n          </span>\n        </div>\n      </c8y-li>\n    </c8y-list-group>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ textConfig.applyButton | translate }}\"\n      [disabled]=\"appsToUpdateRemotes.length === 0\"\n      (click)=\"apply()\"\n    >\n      {{ textConfig.applyButton | translate }}\n    </button>\n  </div>\n</div>\n<ng-template #emptyList>\n  <c8y-ui-empty-state\n    [icon]=\"'c8y-modules'\"\n    [title]=\"'No custom applications available.' | translate\"\n    *ngIf=\"updateType !== 'install'\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\n  <ng-container *ngIf=\"updateType === 'install'\">\n    <c8y-ui-empty-state\n      [icon]=\"'c8y-modules'\"\n      [title]=\"'No custom applications available.' | translate\"\n      [subtitle]=\"'Create a custom application by duplicating an existing one.' | translate\"\n      [horizontal]=\"true\"\n    >\n      <button\n        class=\"btn btn-sm btn-default m-t-8\"\n        title=\"{{ 'Duplicate' | translate }}\"\n        (click)=\"duplicateApp()\"\n      >\n        {{ 'Duplicate' | translate }}\n      </button>\n    </c8y-ui-empty-state>\n  </ng-container>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1.BsModalRef }, { type: i2.WizardModalService }, { type: i3.EcosystemService }], propDecorators: { apps: [{
+        }], ctorParameters: () => [{ type: i1$1.BsModalRef }, { type: i2.WizardModalService }, { type: i1.EcosystemService }], propDecorators: { apps: [{
                 type: Input
             }], updateType: [{
                 type: Input
@@ -118,21 +119,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             }] } });
 
 class PluginListItemComponent {
-    constructor() {
+    constructor(pluginService) {
+        this.pluginService = pluginService;
         this.hideSource = false;
         this.isItemSelected = new EventEmitter();
+        this.packageType = PackageType.UNKNOWN;
+        this.PACKAGE_TYPE = PackageType;
+    }
+    ngOnInit() {
+        this.packageType = this.pluginService.getPackageType(this.plugin.originApp);
     }
     onChange(event) {
         this.plugin.selected = !this.plugin.selected;
         this.isItemSelected.next(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PluginListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: PluginListItemComponent, selector: "c8y-plugin-list-item", inputs: { plugin: "plugin", selectable: "selectable", hideSource: "hideSource" }, outputs: { isItemSelected: "isItemSelected" }, ngImport: i0, template: "<c8y-li-checkbox\n  class=\"p-r-16 p-l-0\"\n  (change)=\"onChange($event.target.checked)\"\n  *ngIf=\"selectable\"\n  [disabled]=\"plugin.installed\"\n  [selected]=\"plugin.selected\"\n></c8y-li-checkbox>\n<c8y-li-icon class=\"p-l-0\">\n  <i class=\"c8y-plugin-icon\">\n    <span>{{ plugin.name?.substr(0, 2) }}</span>\n  </i>\n</c8y-li-icon>\n<div>\n  <div [ngClass]=\"{ 'p-r-8': selectable }\">\n    <p>\n      <span class=\"text-medium\">{{ plugin.name }}</span>\n      <em class=\"text-muted small m-l-8\">{{ plugin.version }}</em>\n      <span *ngIf=\"plugin.installed\">\n        <i\n          class=\"text-success\"\n          [c8yIcon]=\"'check-circle'\"\n        ></i>\n        <em\n          class=\"text-muted small\"\n          translate\n        >\n          Installed`plugins`\n        </em>\n      </span>\n    </p>\n    <p class=\"small l-h-tight\">{{ plugin.description }}</p>\n  </div>\n\n  <span\n    class=\"label label-info a-s-start m-t-8\"\n    *ngIf=\"selectable && !hideSource\"\n  >\n    {{ plugin.contextPath }}\n  </span>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PluginListItemComponent, deps: [{ token: i2.PluginsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: PluginListItemComponent, selector: "c8y-plugin-list-item", inputs: { plugin: "plugin", selectable: "selectable", hideSource: "hideSource" }, outputs: { isItemSelected: "isItemSelected" }, ngImport: i0, template: "<c8y-li-checkbox\n  class=\"p-r-16 p-l-0\"\n  (change)=\"onChange($event.target.checked)\"\n  *ngIf=\"selectable\"\n  [disabled]=\"plugin.installed\"\n  [selected]=\"plugin.selected\"\n></c8y-li-checkbox>\n<c8y-li-icon class=\"p-l-0 text-center\">\n  <i class=\"c8y-plugin-icon\">\n    <span>{{ plugin.name?.substr(0, 2) }}</span>\n  </i>\n</c8y-li-icon>\n<div class=\"p-relative\">\n  <div [ngClass]=\"{ 'p-r-8': selectable }\">\n    <p>\n      <span class=\"text-medium\">{{ plugin.name }}</span>\n      <em class=\"text-muted small m-l-8\">{{ plugin.version }}</em>\n      <span *ngIf=\"plugin.installed\">\n        <i\n          class=\"text-success\"\n          [c8yIcon]=\"'check-circle'\"\n        ></i>\n        <em\n          class=\"text-muted small\"\n          translate\n        >\n          Installed`plugins`\n        </em>\n      </span>\n    </p>\n    <p class=\"small l-h-tight\">{{ plugin.description }}</p>\n  </div>\n\n  <span\n    class=\"tag tag--info a-s-start m-t-8\"\n    *ngIf=\"selectable && !hideSource\"\n  >\n    {{ plugin.contextPath }}\n  </span>\n\n  <span\n    class=\"tag a-s-start m-t-8 m-l-4\"\n    [ngClass]=\"{\n      'tag--default': packageType === PACKAGE_TYPE.COMMUNITY,\n      'tag--primary': packageType === PACKAGE_TYPE.OFFICIAL\n    }\"\n  >\n    {{ plugin.originApp?.label || plugin.originApp?.manifest?.label | translatePackageLabel }}\n  </span>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "pipe", type: i1.TranslatePackageLabelPipe, name: "translatePackageLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PluginListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-plugin-list-item', template: "<c8y-li-checkbox\n  class=\"p-r-16 p-l-0\"\n  (change)=\"onChange($event.target.checked)\"\n  *ngIf=\"selectable\"\n  [disabled]=\"plugin.installed\"\n  [selected]=\"plugin.selected\"\n></c8y-li-checkbox>\n<c8y-li-icon class=\"p-l-0\">\n  <i class=\"c8y-plugin-icon\">\n    <span>{{ plugin.name?.substr(0, 2) }}</span>\n  </i>\n</c8y-li-icon>\n<div>\n  <div [ngClass]=\"{ 'p-r-8': selectable }\">\n    <p>\n      <span class=\"text-medium\">{{ plugin.name }}</span>\n      <em class=\"text-muted small m-l-8\">{{ plugin.version }}</em>\n      <span *ngIf=\"plugin.installed\">\n        <i\n          class=\"text-success\"\n          [c8yIcon]=\"'check-circle'\"\n        ></i>\n        <em\n          class=\"text-muted small\"\n          translate\n        >\n          Installed`plugins`\n        </em>\n      </span>\n    </p>\n    <p class=\"small l-h-tight\">{{ plugin.description }}</p>\n  </div>\n\n  <span\n    class=\"label label-info a-s-start m-t-8\"\n    *ngIf=\"selectable && !hideSource\"\n  >\n    {{ plugin.contextPath }}\n  </span>\n</div>\n" }]
-        }], propDecorators: { plugin: [{
+            args: [{ selector: 'c8y-plugin-list-item', template: "<c8y-li-checkbox\n  class=\"p-r-16 p-l-0\"\n  (change)=\"onChange($event.target.checked)\"\n  *ngIf=\"selectable\"\n  [disabled]=\"plugin.installed\"\n  [selected]=\"plugin.selected\"\n></c8y-li-checkbox>\n<c8y-li-icon class=\"p-l-0 text-center\">\n  <i class=\"c8y-plugin-icon\">\n    <span>{{ plugin.name?.substr(0, 2) }}</span>\n  </i>\n</c8y-li-icon>\n<div class=\"p-relative\">\n  <div [ngClass]=\"{ 'p-r-8': selectable }\">\n    <p>\n      <span class=\"text-medium\">{{ plugin.name }}</span>\n      <em class=\"text-muted small m-l-8\">{{ plugin.version }}</em>\n      <span *ngIf=\"plugin.installed\">\n        <i\n          class=\"text-success\"\n          [c8yIcon]=\"'check-circle'\"\n        ></i>\n        <em\n          class=\"text-muted small\"\n          translate\n        >\n          Installed`plugins`\n        </em>\n      </span>\n    </p>\n    <p class=\"small l-h-tight\">{{ plugin.description }}</p>\n  </div>\n\n  <span\n    class=\"tag tag--info a-s-start m-t-8\"\n    *ngIf=\"selectable && !hideSource\"\n  >\n    {{ plugin.contextPath }}\n  </span>\n\n  <span\n    class=\"tag a-s-start m-t-8 m-l-4\"\n    [ngClass]=\"{\n      'tag--default': packageType === PACKAGE_TYPE.COMMUNITY,\n      'tag--primary': packageType === PACKAGE_TYPE.OFFICIAL\n    }\"\n  >\n    {{ plugin.originApp?.label || plugin.originApp?.manifest?.label | translatePackageLabel }}\n  </span>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i2.PluginsService }], propDecorators: { plugin: [{
                 type: Input
             }], selectable: [{
                 type: Input
@@ -204,6 +211,11 @@ class PluginListComponent {
             // unreached
         }
         if (updateType === 'install') {
+            const isArchived = await this.ecosystemService.verifyArchived([plugin]);
+            if (!isArchived) {
+                this.updatingPluginId[updateType] = '';
+                return;
+            }
             const licensesVerifiedByUser = await this.ecosystemService.verifyLicenses([plugin]);
             if (!licensesVerifiedByUser) {
                 this.updatingPluginId[updateType] = '';
@@ -229,17 +241,12 @@ class PluginListComponent {
                 this.onUpdateEventHandleGS(plugin, app, updateType);
             }
             catch (error) {
-                this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_PLUGINS, {
-                    component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.PLUGIN_LIST,
-                    result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SERVER_FAILURE,
-                    url: this.CURRENT_LOCATION,
-                    error
-                });
+                this.onUpdateEventHandleGS(plugin, app, updateType, error);
             }
         }
         this.updatingPluginId[updateType] = '';
     }
-    onUpdateEventHandleGS(plugin, app, updateType) {
+    onUpdateEventHandleGS(plugin, app, updateType, error) {
         const pluginCustomEventInfo = pick(plugin, [
             'name',
             'contextPath',
@@ -251,14 +258,16 @@ class PluginListComponent {
         const gsEventResult = updateType === 'install'
             ? PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.PLUGIN_INSTALLED
             : PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.PLUGIN_REMOVED;
-        this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_PLUGINS, {
+        const eventData = {
             component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.PLUGIN_LIST,
-            result: gsEventResult,
+            result: error || gsEventResult,
             url: this.CURRENT_LOCATION,
             ...pluginCustomEventInfo,
             targetApplicationName: app.name,
-            targetApplicationContextPath: app.contextPath
-        });
+            targetApplicationContextPath: app.contextPath,
+            ...(error && { error })
+        };
+        this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_PLUGINS, eventData);
     }
     async getAppsForUpdate(plugin, updateType) {
         let apps = (await this.ecosystemService.getWebApplications()).filter(app => this.ecosystemService.isOwner(app) && app.type !== ApplicationType.EXTERNAL);
@@ -344,13 +353,13 @@ class PluginListComponent {
             return;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PluginListComponent, deps: [{ token: i3.EcosystemService }, { token: i1.BsModalService }, { token: i2.PluginsService }, { token: i2.AlertService }, { token: i4.TranslateService }, { token: i2.GainsightService }, { token: i2.HumanizeAppNamePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PluginListComponent, deps: [{ token: i1.EcosystemService }, { token: i1$1.BsModalService }, { token: i2.PluginsService }, { token: i2.AlertService }, { token: i4.TranslateService }, { token: i2.GainsightService }, { token: i2.HumanizeAppNamePipe }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: PluginListComponent, selector: "c8y-plugin-list", inputs: { plugins$: "plugins$", emptyListText: "emptyListText", selectable: "selectable", hideSource: "hideSource", installable: "installable", package: "package" }, outputs: { selectedItems: "selectedItems" }, ngImport: i0, template: "<c8y-list-group class=\"bg-inherit\">\n  <ng-container *ngIf=\"(plugins$ | async)?.length !== 0; else emptyList\">\n    <ng-container *ngFor=\"let plugin of plugins$ | async\">\n      <c8y-li [ngClass]=\"{ disabled: plugin.installed }\" class=\"bg-inherit\">\n        <c8y-plugin-list-item\n          (isItemSelected)=\"updateSelectedItems($event, plugin)\"\n          [plugin]=\"plugin\"\n          [selectable]=\"selectable\"\n          [hideSource]=\"hideSource\"\n          class=\"d-flex\"\n        ></c8y-plugin-list-item>\n        <div class=\"p-l-40 m-t-4\">\n          <button\n            *ngIf=\"installable\"\n            (click)=\"uninstallPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.uninstall }\"\n            [disabled]=\"updatingPluginId.uninstall && plugin.id !== updatingPluginId.uninstall\"\n            class=\"btn btn-danger btn-sm m-l-4\"\n            title=\"{{ 'Uninstall plugin' | translate }}\"\n            data-cy=\"plugin-list--uninstall-plugin-button\"\n            translate\n          >\n            Uninstall plugin\n          </button>\n          <button\n            *ngIf=\"installable\"\n            (click)=\"installPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.install }\"\n            [disabled]=\"updatingPluginId.install && plugin.id !== updatingPluginId.install\"\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Install plugin' | translate }}\"\n            data-cy=\"plugin-list--install-plugin-button\"\n            translate\n          >\n            Install plugin\n          </button>\n        </div>\n      </c8y-li>\n    </ng-container>\n  </ng-container>\n</c8y-list-group>\n<ng-template #emptyList>\n  <div class=\"c8y-empty-state text-left\" *ngIf=\"emptyListText\">\n    <h1 c8yIcon=\"plugin\"></h1>\n    <p>\n      {{ emptyListText | translate }}\n    </p>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: PluginListItemComponent, selector: "c8y-plugin-list-item", inputs: ["plugin", "selectable", "hideSource"], outputs: ["isItemSelected"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PluginListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-plugin-list', template: "<c8y-list-group class=\"bg-inherit\">\n  <ng-container *ngIf=\"(plugins$ | async)?.length !== 0; else emptyList\">\n    <ng-container *ngFor=\"let plugin of plugins$ | async\">\n      <c8y-li [ngClass]=\"{ disabled: plugin.installed }\" class=\"bg-inherit\">\n        <c8y-plugin-list-item\n          (isItemSelected)=\"updateSelectedItems($event, plugin)\"\n          [plugin]=\"plugin\"\n          [selectable]=\"selectable\"\n          [hideSource]=\"hideSource\"\n          class=\"d-flex\"\n        ></c8y-plugin-list-item>\n        <div class=\"p-l-40 m-t-4\">\n          <button\n            *ngIf=\"installable\"\n            (click)=\"uninstallPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.uninstall }\"\n            [disabled]=\"updatingPluginId.uninstall && plugin.id !== updatingPluginId.uninstall\"\n            class=\"btn btn-danger btn-sm m-l-4\"\n            title=\"{{ 'Uninstall plugin' | translate }}\"\n            data-cy=\"plugin-list--uninstall-plugin-button\"\n            translate\n          >\n            Uninstall plugin\n          </button>\n          <button\n            *ngIf=\"installable\"\n            (click)=\"installPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.install }\"\n            [disabled]=\"updatingPluginId.install && plugin.id !== updatingPluginId.install\"\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Install plugin' | translate }}\"\n            data-cy=\"plugin-list--install-plugin-button\"\n            translate\n          >\n            Install plugin\n          </button>\n        </div>\n      </c8y-li>\n    </ng-container>\n  </ng-container>\n</c8y-list-group>\n<ng-template #emptyList>\n  <div class=\"c8y-empty-state text-left\" *ngIf=\"emptyListText\">\n    <h1 c8yIcon=\"plugin\"></h1>\n    <p>\n      {{ emptyListText | translate }}\n    </p>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i3.EcosystemService }, { type: i1.BsModalService }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i4.TranslateService }, { type: i2.GainsightService }, { type: i2.HumanizeAppNamePipe }], propDecorators: { plugins$: [{
+        }], ctorParameters: () => [{ type: i1.EcosystemService }, { type: i1$1.BsModalService }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i4.TranslateService }, { type: i2.GainsightService }, { type: i2.HumanizeAppNamePipe }], propDecorators: { plugins$: [{
                 type: Input
             }], emptyListText: [{
                 type: Input
@@ -366,41 +375,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: Output
             }] } });
 
-class OnlyLatestPluginVersionPipe {
-    transform(value, disabled) {
-        if (disabled) {
-            return value;
-        }
-        return value.pipe(map(list => list.filter(plugin => !!plugin.tags?.includes('latest'))));
+class OnlyLatestFilterComponent {
+    constructor(filterComponent) {
+        this.filterComponent = filterComponent;
+        this.filterLabel = gettext('Only latest versions');
+        this.onlyLatestFormControl = new FormControl(true);
+        this.filterComponent.formGroup.controls.custom.addControl(this.filterLabel, this.onlyLatestFormControl);
+        filterComponent.customFilters.set(this.filterLabel, (plugin, enabled) => {
+            return !enabled || !!plugin.tags?.includes('latest');
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OnlyLatestPluginVersionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: OnlyLatestPluginVersionPipe, name: "onlyLatestPluginVersion" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OnlyLatestFilterComponent, deps: [{ token: i1.ListFiltersComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: OnlyLatestFilterComponent, selector: "c8y-only-latest-filter", ngImport: i0, template: "<label class=\"c8y-switch\">\n  <input\n    type=\"checkbox\"\n    checked=\"checked\"\n    [formControl]=\"onlyLatestFormControl\"\n  />\n  <span></span>\n  {{ 'Show only latest version of plugins' | translate }}\n</label>\n", dependencies: [{ kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OnlyLatestPluginVersionPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'onlyLatestPluginVersion'
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OnlyLatestFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-only-latest-filter', template: "<label class=\"c8y-switch\">\n  <input\n    type=\"checkbox\"\n    checked=\"checked\"\n    [formControl]=\"onlyLatestFormControl\"\n  />\n  <span></span>\n  {{ 'Show only latest version of plugins' | translate }}\n</label>\n" }]
+        }], ctorParameters: () => [{ type: i1.ListFiltersComponent }] });
 
 class InstallPluginComponent {
-    constructor(bsModalRef, modal, ecosystemService) {
+    constructor(bsModalRef, ecosystemService) {
         this.bsModalRef = bsModalRef;
-        this.modal = modal;
         this.ecosystemService = ecosystemService;
-        this.filterTerm$ = new BehaviorSubject('');
         this.filteredPlugins$ = new BehaviorSubject([]);
         this.selectedPlugins = [];
+        this.packageTypes = defaultPackageTypes;
         this.result = new Promise((resolve, reject) => {
             this._install = resolve;
             this._cancel = reject;
         });
         this.onlyLatestPluginVersion = true;
     }
-    ngOnInit() {
-        this.filteredPlugins$ = combineLatest([this.plugins$, this.filterTerm$]).pipe(map(([plugins, filterTerm]) => filterTerm.trim().length === 0
-            ? plugins
-            : plugins.filter((plugin) => this.ecosystemService.filterContainString(plugin.name, filterTerm))));
+    setFilterPipe(filterPipe) {
+        this.filteredPlugins$ = this.plugins$.pipe(map$1(plugins => plugins.map(plugin => {
+            plugin.filterProps = this.ecosystemService.getAppFilterProps(plugin.originApp);
+            return plugin;
+        })), src => filterPipe(src));
     }
     cancel() {
         this.bsModalRef.hide();
@@ -410,13 +420,13 @@ class InstallPluginComponent {
         this._install(this.selectedPlugins);
         this.bsModalRef.hide();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InstallPluginComponent, deps: [{ token: i1.BsModalRef }, { token: i2.ModalService }, { token: i3.EcosystemService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: InstallPluginComponent, selector: "c8y-install-plugin", inputs: { plugins$: "plugins$" }, ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'plugin'\"></i>\n    <div id=\"modal-title\" class=\"modal-title h4\" translate>Available plugins</div>\n  </div>\n  <div class=\"p-t-8 p-16 text-center separator-bottom flex-no-shrink\">\n    <p class=\"text-medium m-b-8\" translate>Select the compatible plugins to install</p>\n    <label class=\"c8y-switch\">\n      <input type=\"checkbox\" [(ngModel)]=\"onlyLatestPluginVersion\" />\n      <span></span>\n      <span translate>Only latest version of plugins</span>\n    </label>\n    <c8y-filter (onSearch)=\"this.filterTerm$.next($event)\"></c8y-filter>\n  </div>\n  <div class=\"modal-inner-scroll\" id=\"modal-body\">\n    <c8y-plugin-list\n      (selectedItems)=\"selectedPlugins = $event\"\n      [emptyListText]=\"'No plugins available' | translate\"\n      [plugins$]=\"filteredPlugins$ | onlyLatestPluginVersion: !onlyLatestPluginVersion\"\n      [selectable]=\"true\"\n      class=\"m-t-16\"\n    ></c8y-plugin-list>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      (click)=\"cancel()\"\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      data-cy=\"install-plugin--cancel-button\"\n      type=\"button\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      (click)=\"install()\"\n      [disabled]=\"selectedPlugins.length === 0\"\n      class=\"btn btn-primary\"\n      title=\"{{ 'Install' | translate }}\"\n      data-cy=\"install-plugin--install-button\"\n      type=\"button\"\n    >\n      {{ 'Install' | translate }}\n      <span class=\"badge\" *ngIf=\"selectedPlugins.length as length\">{{ length }}</span>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FilterInputComponent, selector: "c8y-filter", inputs: ["icon"], outputs: ["onSearch"] }, { kind: "component", type: PluginListComponent, selector: "c8y-plugin-list", inputs: ["plugins$", "emptyListText", "selectable", "hideSource", "installable", "package"], outputs: ["selectedItems"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: OnlyLatestPluginVersionPipe, name: "onlyLatestPluginVersion" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InstallPluginComponent, deps: [{ token: i1$1.BsModalRef }, { token: i1.EcosystemService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: InstallPluginComponent, selector: "c8y-install-plugin", inputs: { plugins$: "plugins$" }, ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'plugin'\"></i>\n    <div\n      class=\"modal-title h4\"\n      id=\"modal-title\"\n      translate\n    >\n      Available plugins\n    </div>\n  </div>\n  <div class=\"p-t-8 p-16 text-center separator-bottom flex-no-shrink\">\n    <p\n      class=\"text-medium m-b-8\"\n      translate\n    >\n      Select the compatible plugins to install\n    </p>\n    <c8y-list-filters\n      (filterPipeChange)=\"setFilterPipe($event)\"\n      [packageTypes]=\"packageTypes\"\n    >\n      <c8y-archived-filter></c8y-archived-filter>\n      <c8y-only-latest-filter></c8y-only-latest-filter>\n    </c8y-list-filters>\n  </div>\n  <div\n    class=\"modal-inner-scroll\"\n    id=\"modal-body\"\n  >\n    <c8y-plugin-list\n      class=\"m-t-16\"\n      (selectedItems)=\"selectedPlugins = $event\"\n      [emptyListText]=\"'No plugins available' | translate\"\n      [plugins$]=\"filteredPlugins$\"\n      [selectable]=\"true\"\n    ></c8y-plugin-list>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n      data-cy=\"install-plugin--cancel-button\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Install' | translate }}\"\n      type=\"button\"\n      (click)=\"install()\"\n      [disabled]=\"selectedPlugins.length === 0\"\n      data-cy=\"install-plugin--install-button\"\n    >\n      {{ 'Install' | translate }}\n      <span\n        class=\"badge\"\n        *ngIf=\"selectedPlugins.length as length\"\n      >\n        {{ length }}\n      </span>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ListFiltersComponent, selector: "c8y-list-filters", inputs: ["packageTypes", "packageAvailabilities", "packageContents"], outputs: ["filterPipeChange"] }, { kind: "component", type: i1.ArchivedFilterComponent, selector: "c8y-archived-filter" }, { kind: "component", type: PluginListComponent, selector: "c8y-plugin-list", inputs: ["plugins$", "emptyListText", "selectable", "hideSource", "installable", "package"], outputs: ["selectedItems"] }, { kind: "component", type: OnlyLatestFilterComponent, selector: "c8y-only-latest-filter" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InstallPluginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-install-plugin', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'plugin'\"></i>\n    <div id=\"modal-title\" class=\"modal-title h4\" translate>Available plugins</div>\n  </div>\n  <div class=\"p-t-8 p-16 text-center separator-bottom flex-no-shrink\">\n    <p class=\"text-medium m-b-8\" translate>Select the compatible plugins to install</p>\n    <label class=\"c8y-switch\">\n      <input type=\"checkbox\" [(ngModel)]=\"onlyLatestPluginVersion\" />\n      <span></span>\n      <span translate>Only latest version of plugins</span>\n    </label>\n    <c8y-filter (onSearch)=\"this.filterTerm$.next($event)\"></c8y-filter>\n  </div>\n  <div class=\"modal-inner-scroll\" id=\"modal-body\">\n    <c8y-plugin-list\n      (selectedItems)=\"selectedPlugins = $event\"\n      [emptyListText]=\"'No plugins available' | translate\"\n      [plugins$]=\"filteredPlugins$ | onlyLatestPluginVersion: !onlyLatestPluginVersion\"\n      [selectable]=\"true\"\n      class=\"m-t-16\"\n    ></c8y-plugin-list>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      (click)=\"cancel()\"\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      data-cy=\"install-plugin--cancel-button\"\n      type=\"button\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      (click)=\"install()\"\n      [disabled]=\"selectedPlugins.length === 0\"\n      class=\"btn btn-primary\"\n      title=\"{{ 'Install' | translate }}\"\n      data-cy=\"install-plugin--install-button\"\n      type=\"button\"\n    >\n      {{ 'Install' | translate }}\n      <span class=\"badge\" *ngIf=\"selectedPlugins.length as length\">{{ length }}</span>\n    </button>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.BsModalRef }, { type: i2.ModalService }, { type: i3.EcosystemService }], propDecorators: { plugins$: [{
+            args: [{ selector: 'c8y-install-plugin', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'plugin'\"></i>\n    <div\n      class=\"modal-title h4\"\n      id=\"modal-title\"\n      translate\n    >\n      Available plugins\n    </div>\n  </div>\n  <div class=\"p-t-8 p-16 text-center separator-bottom flex-no-shrink\">\n    <p\n      class=\"text-medium m-b-8\"\n      translate\n    >\n      Select the compatible plugins to install\n    </p>\n    <c8y-list-filters\n      (filterPipeChange)=\"setFilterPipe($event)\"\n      [packageTypes]=\"packageTypes\"\n    >\n      <c8y-archived-filter></c8y-archived-filter>\n      <c8y-only-latest-filter></c8y-only-latest-filter>\n    </c8y-list-filters>\n  </div>\n  <div\n    class=\"modal-inner-scroll\"\n    id=\"modal-body\"\n  >\n    <c8y-plugin-list\n      class=\"m-t-16\"\n      (selectedItems)=\"selectedPlugins = $event\"\n      [emptyListText]=\"'No plugins available' | translate\"\n      [plugins$]=\"filteredPlugins$\"\n      [selectable]=\"true\"\n    ></c8y-plugin-list>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n      data-cy=\"install-plugin--cancel-button\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Install' | translate }}\"\n      type=\"button\"\n      (click)=\"install()\"\n      [disabled]=\"selectedPlugins.length === 0\"\n      data-cy=\"install-plugin--install-button\"\n    >\n      {{ 'Install' | translate }}\n      <span\n        class=\"badge\"\n        *ngIf=\"selectedPlugins.length as length\"\n      >\n        {{ length }}\n      </span>\n    </button>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.BsModalRef }, { type: i1.EcosystemService }], propDecorators: { plugins$: [{
                 type: Input
             }] } });
 
@@ -505,6 +515,12 @@ class UpdatePluginOfAppComponent {
             this.cancel();
             return;
         }
+        const isArchived = await this.ecosystemService.verifyArchived([this.plugin]);
+        if (!isArchived) {
+            this.alert.warning(gettext('Plugin update aborted by user.'));
+            this.cancel();
+            return;
+        }
         const result = await this.ecosystemService.verifyLicenses([this.plugin]);
         if (!result) {
             this.alert.warning(gettext('Plugin update aborted by user.'));
@@ -567,13 +583,13 @@ class UpdatePluginOfAppComponent {
         this.bsModalRef.hide();
         this._cancel();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UpdatePluginOfAppComponent, deps: [{ token: i1.BsModalRef }, { token: i2.PluginsService }, { token: i2.AlertService }, { token: i3.EcosystemService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: UpdatePluginOfAppComponent, selector: "c8y-update-plugin-of-app", ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-modules'\"></i>\n    <h4 *ngIf=\"!downgrade\" id=\"modal-title\" translate>Update plugin</h4>\n    <h4 *ngIf=\"downgrade\" id=\"modal-title\" translate>Downgrade plugin</h4>\n  </div>\n  <div class=\"inner-scroll\" id=\"modal-body\">\n    <div class=\"p-16\">\n      <div class=\"d-block fit-w bg-gray-white\">\n        <c8y-package-version-select\n          [packageContextPath]=\"plugin?.contextPath\"\n          [(ngModel)]=\"applicationVersion\"\n        ></c8y-package-version-select>\n        <div\n          *ngIf=\"plugin?.version && plugin.version === applicationVersion?.version\"\n          class=\"alert alert-info\"\n          role=\"alert\"\n        >\n          <span translate ngNonBindable [translateParams]=\"applicationVersion\">\n            Select another version, as {{ version }} is currently used.\n          </span>\n        </div>\n      </div>\n\n      <div class=\"form-group\">\n        <label class=\"c8y-checkbox\">\n          <input [(ngModel)]=\"updateAll\" type=\"checkbox\" />\n          <span></span>\n          <span translate ngNonBindable [translateParams]=\"plugin\">\n            Set version for all plugins using the same context path \"{{ contextPath }}\".\n          </span>\n        </label>\n      </div>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Set version' | translate }}\"\n      [disabled]=\"!applicationVersion || plugin?.version === applicationVersion?.version\"\n      (click)=\"update()\"\n    >\n      {{ 'Set version' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PackageVersionSelectComponent, selector: "c8y-package-version-select", inputs: ["label", "packageContextPath", "packageId"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UpdatePluginOfAppComponent, deps: [{ token: i1$1.BsModalRef }, { token: i2.PluginsService }, { token: i2.AlertService }, { token: i1.EcosystemService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: UpdatePluginOfAppComponent, selector: "c8y-update-plugin-of-app", ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-modules'\"></i>\n    <h4 *ngIf=\"!downgrade\" id=\"modal-title\" translate>Update plugin</h4>\n    <h4 *ngIf=\"downgrade\" id=\"modal-title\" translate>Downgrade plugin</h4>\n  </div>\n  <div class=\"inner-scroll\" id=\"modal-body\">\n    <div class=\"p-16\">\n      <div class=\"d-block fit-w bg-gray-white\">\n        <c8y-package-version-select\n          [packageContextPath]=\"plugin?.contextPath\"\n          [(ngModel)]=\"applicationVersion\"\n        ></c8y-package-version-select>\n        <div\n          *ngIf=\"plugin?.version && plugin.version === applicationVersion?.version\"\n          class=\"alert alert-info\"\n          role=\"alert\"\n        >\n          <span translate ngNonBindable [translateParams]=\"applicationVersion\">\n            Select another version, as {{ version }} is currently used.\n          </span>\n        </div>\n      </div>\n\n      <div class=\"form-group\">\n        <label class=\"c8y-checkbox\">\n          <input [(ngModel)]=\"updateAll\" type=\"checkbox\" />\n          <span></span>\n          <span translate ngNonBindable [translateParams]=\"plugin\">\n            Set version for all plugins using the same context path \"{{ contextPath }}\".\n          </span>\n        </label>\n      </div>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Set version' | translate }}\"\n      [disabled]=\"!applicationVersion || plugin?.version === applicationVersion?.version\"\n      (click)=\"update()\"\n    >\n      {{ 'Set version' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.PackageVersionSelectComponent, selector: "c8y-package-version-select", inputs: ["label", "packageContextPath", "packageId"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UpdatePluginOfAppComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-update-plugin-of-app', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-modules'\"></i>\n    <h4 *ngIf=\"!downgrade\" id=\"modal-title\" translate>Update plugin</h4>\n    <h4 *ngIf=\"downgrade\" id=\"modal-title\" translate>Downgrade plugin</h4>\n  </div>\n  <div class=\"inner-scroll\" id=\"modal-body\">\n    <div class=\"p-16\">\n      <div class=\"d-block fit-w bg-gray-white\">\n        <c8y-package-version-select\n          [packageContextPath]=\"plugin?.contextPath\"\n          [(ngModel)]=\"applicationVersion\"\n        ></c8y-package-version-select>\n        <div\n          *ngIf=\"plugin?.version && plugin.version === applicationVersion?.version\"\n          class=\"alert alert-info\"\n          role=\"alert\"\n        >\n          <span translate ngNonBindable [translateParams]=\"applicationVersion\">\n            Select another version, as {{ version }} is currently used.\n          </span>\n        </div>\n      </div>\n\n      <div class=\"form-group\">\n        <label class=\"c8y-checkbox\">\n          <input [(ngModel)]=\"updateAll\" type=\"checkbox\" />\n          <span></span>\n          <span translate ngNonBindable [translateParams]=\"plugin\">\n            Set version for all plugins using the same context path \"{{ contextPath }}\".\n          </span>\n        </label>\n      </div>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Set version' | translate }}\"\n      [disabled]=\"!applicationVersion || plugin?.version === applicationVersion?.version\"\n      (click)=\"update()\"\n    >\n      {{ 'Set version' | translate }}\n    </button>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.BsModalRef }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i3.EcosystemService }, { type: i2.GainsightService }] });
+        }], ctorParameters: () => [{ type: i1$1.BsModalRef }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i1.EcosystemService }, { type: i2.GainsightService }] });
 
 class ApplicationPluginsComponent {
     constructor(activatedRoute, ecosystemService, bsModalService, pluginsService, alertService, gainsightService) {
@@ -704,14 +720,26 @@ class ApplicationPluginsComponent {
         this.alertService.success(gettext('The application was reset to its default plugins.'));
     }
     async installPlugins() {
+        let currentPlugin = null;
         try {
+            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
+                component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,
+                action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.INSTALL_PLUGINS_INITIATED,
+                url: this.CURRENT_LOCATION,
+                targetApplicationName: this.app.name,
+                targetApplicationContextPath: this.app.contextPath
+            });
             const pluginsToAdd = await this.bsModalService.show(InstallPluginComponent, {
-                class: 'modal-sm',
+                class: 'modal-md',
                 ariaDescribedby: 'modal-body',
                 ariaLabelledBy: 'modal-title',
                 initialState: this.getInstallModalInitState(),
                 ignoreBackdropClick: true
             }).content.result;
+            const isArchived = await this.ecosystemService.verifyArchived(pluginsToAdd);
+            if (!isArchived) {
+                return;
+            }
             const licensesVerifiedByUser = await this.ecosystemService.verifyLicenses(pluginsToAdd);
             if (!licensesVerifiedByUser) {
                 return;
@@ -724,33 +752,14 @@ class ApplicationPluginsComponent {
             await this.handleRemotesInstallation(pluginsToAdd);
             this.alertService.success(gettext('Plugins installed.'));
             pluginsToAdd.forEach(plugin => {
-                const pluginCustomEventInfo = pick(plugin, [
-                    'name',
-                    'contextPath',
-                    'module',
-                    'version',
-                    'type',
-                    'id'
-                ]);
-                this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
-                    component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,
-                    result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.PLUGIN_INSTALLED,
-                    url: this.CURRENT_LOCATION,
-                    ...pluginCustomEventInfo,
-                    targetApplicationName: this.app.name,
-                    targetApplicationContextPath: this.app.contextPath
-                });
+                currentPlugin = plugin;
+                this.triggerPluginEvent(plugin, PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.PLUGIN_INSTALLED);
             });
         }
         catch (ex) {
             if (ex) {
                 this.alertService.addServerFailure(ex);
-                this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
-                    component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,
-                    result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SERVER_FAILURE,
-                    url: this.CURRENT_LOCATION,
-                    error: ex
-                });
+                this.triggerPluginEvent(currentPlugin, PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SERVER_FAILURE);
             }
         }
         finally {
@@ -758,34 +767,25 @@ class ApplicationPluginsComponent {
         }
     }
     async removePlugins(plugins) {
+        let currentPlugin = null;
         try {
             this.isLoading = true;
             const installedPlugins = await firstValueFrom(this.installedPlugins$);
+            const pluginsToRemove = installedPlugins.filter(p => plugins.includes(p.id));
             const updatedRemotes = await this.pluginsService.removeRemotes(this.app, plugins.map(id => installedPlugins.find(p => p.id === id)));
             this.emitRemotes(updatedRemotes);
             this.isLoading = false;
             this.dataGrid.cancel();
             this.alertService.success(gettext('Plugins removed.'));
-            plugins.forEach(plugin => {
-                this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
-                    component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,
-                    result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.PLUGIN_REMOVED,
-                    url: this.CURRENT_LOCATION,
-                    id: plugin,
-                    targetApplicationName: this.app.name,
-                    targetApplicationContextPath: this.app.contextPath
-                });
+            pluginsToRemove.forEach(plugin => {
+                currentPlugin = plugin;
+                this.triggerPluginEvent(plugin, PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.PLUGIN_REMOVED);
             });
         }
         catch (ex) {
             if (ex) {
                 this.alertService.addServerFailure(ex);
-                this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
-                    component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,
-                    result: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SERVER_FAILURE,
-                    url: this.CURRENT_LOCATION,
-                    error: ex
-                });
+                this.triggerPluginEvent(currentPlugin, PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.RESULTS.SERVER_FAILURE);
             }
         }
         finally {
@@ -1028,13 +1028,31 @@ class ApplicationPluginsComponent {
         const value = matches ? matches[0] : '';
         return value.replace(/(@|\/)/g, '');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i3.EcosystemService }, { token: i1.BsModalService }, { token: i2.PluginsService }, { token: i2.AlertService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
+    triggerPluginEvent(plugin, result) {
+        const pluginInfo = pick(plugin, [
+            'name',
+            'contextPath',
+            'module',
+            'version',
+            'type',
+            'id'
+        ]);
+        this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
+            component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,
+            result,
+            url: this.CURRENT_LOCATION,
+            ...pluginInfo,
+            targetApplicationName: this.app.name,
+            targetApplicationContextPath: this.app.contextPath
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1.EcosystemService }, { token: i1$1.BsModalService }, { token: i2.PluginsService }, { token: i2.AlertService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ApplicationPluginsComponent, selector: "c8y-app-plugins", inputs: { appId: "appId" }, viewQueries: [{ propertyName: "dataGrid", first: true, predicate: DataGridComponent, descendants: true }], ngImport: i0, template: "<c8y-title>{{ app | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-modules'\"\n    [label]=\"'Applications' | translate\"\n    [path]=\"'ecosystem/application/applications'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"app | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Plugins' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"!(isStandard$ | async)\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reset to default plugins' | translate }}\"\n    [ngClass]=\"{ 'btn-pending': isLoading }\"\n    (click)=\"resetToDefault()\"\n  >\n    <i c8yIcon=\"undo\"></i>\n    {{ 'Reset to default' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Install plugins' | translate }}\"\n    (click)=\"installPlugins()\"\n    [ngClass]=\"{ 'btn-pending': isLoading }\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Install plugins' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<ng-container *ngIf=\"orphanedPlugins$ | async as orphanedPlugins\">\n  <c8y-action-bar-item\n    *ngIf=\"orphanedPlugins?.length\"\n    [placement]=\"'right'\"\n  >\n    <button\n      class=\"btn btn-link\"\n      title=\"{{ 'Clean up orphaned plugins' | translate }}\"\n      (click)=\"cleanupOrphanedPlugins(orphanedPlugins)\"\n      [ngClass]=\"{ 'btn-pending': isLoading }\"\n    >\n      <i c8yIcon=\"erase\"></i>\n      {{ 'Clean up orphaned plugins' | translate }}\n    </button>\n  </c8y-action-bar-item>\n</ng-container>\n\n<div class=\"content-fullpage d-flex d-col border-top\">\n  <c8y-data-grid\n    class=\"d-contents\"\n    [title]=\"title\"\n    [loadMoreItemsLabel]=\"loadMoreItemsLabel\"\n    [loadingItemsLabel]=\"loadingItemsLabel\"\n    [displayOptions]=\"displayOptions\"\n    [columns]=\"columns\"\n    [rows]=\"installedPlugins$ | async\"\n    [pagination]=\"pagination\"\n    [selectable]=\"true\"\n    [actionControls]=\"actionControls\"\n    [bulkActionControls]=\"bulkActionControls\"\n    [headerActionControls]=\"headerActionControls\"\n    (onReload)=\"refresh()\"\n  >\n    <c8y-ui-empty-state\n      [icon]=\"stats?.size > 0 ? 'search' : 'plugin'\"\n      [title]=\"stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)\"\n      [subtitle]=\"stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)\"\n      *emptyStateContext=\"let stats\"\n      [horizontal]=\"stats?.size > 0\"\n    >\n      <p *ngIf=\"stats?.size === 0\">\n        <button\n          class=\"btn btn-primary btn-sm\"\n          title=\"{{ 'Install plugins' | translate }}\"\n          (click)=\"installPlugins()\"\n          [ngClass]=\"{ 'btn-pending': isLoading }\"\n          translate\n        >\n          Install plugins\n        </button>\n      </p>\n    </c8y-ui-empty-state>\n  </c8y-data-grid>\n</div>\n", dependencies: [{ kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.EmptyStateContextDirective, selector: "[emptyStateContext]" }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "columns", "rows", "pagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-app-plugins', template: "<c8y-title>{{ app | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-modules'\"\n    [label]=\"'Applications' | translate\"\n    [path]=\"'ecosystem/application/applications'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"app | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Plugins' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"!(isStandard$ | async)\"\n>\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reset to default plugins' | translate }}\"\n    [ngClass]=\"{ 'btn-pending': isLoading }\"\n    (click)=\"resetToDefault()\"\n  >\n    <i c8yIcon=\"undo\"></i>\n    {{ 'Reset to default' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Install plugins' | translate }}\"\n    (click)=\"installPlugins()\"\n    [ngClass]=\"{ 'btn-pending': isLoading }\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Install plugins' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<ng-container *ngIf=\"orphanedPlugins$ | async as orphanedPlugins\">\n  <c8y-action-bar-item\n    *ngIf=\"orphanedPlugins?.length\"\n    [placement]=\"'right'\"\n  >\n    <button\n      class=\"btn btn-link\"\n      title=\"{{ 'Clean up orphaned plugins' | translate }}\"\n      (click)=\"cleanupOrphanedPlugins(orphanedPlugins)\"\n      [ngClass]=\"{ 'btn-pending': isLoading }\"\n    >\n      <i c8yIcon=\"erase\"></i>\n      {{ 'Clean up orphaned plugins' | translate }}\n    </button>\n  </c8y-action-bar-item>\n</ng-container>\n\n<div class=\"content-fullpage d-flex d-col border-top\">\n  <c8y-data-grid\n    class=\"d-contents\"\n    [title]=\"title\"\n    [loadMoreItemsLabel]=\"loadMoreItemsLabel\"\n    [loadingItemsLabel]=\"loadingItemsLabel\"\n    [displayOptions]=\"displayOptions\"\n    [columns]=\"columns\"\n    [rows]=\"installedPlugins$ | async\"\n    [pagination]=\"pagination\"\n    [selectable]=\"true\"\n    [actionControls]=\"actionControls\"\n    [bulkActionControls]=\"bulkActionControls\"\n    [headerActionControls]=\"headerActionControls\"\n    (onReload)=\"refresh()\"\n  >\n    <c8y-ui-empty-state\n      [icon]=\"stats?.size > 0 ? 'search' : 'plugin'\"\n      [title]=\"stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)\"\n      [subtitle]=\"stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)\"\n      *emptyStateContext=\"let stats\"\n      [horizontal]=\"stats?.size > 0\"\n    >\n      <p *ngIf=\"stats?.size === 0\">\n        <button\n          class=\"btn btn-primary btn-sm\"\n          title=\"{{ 'Install plugins' | translate }}\"\n          (click)=\"installPlugins()\"\n          [ngClass]=\"{ 'btn-pending': isLoading }\"\n          translate\n        >\n          Install plugins\n        </button>\n      </p>\n    </c8y-ui-empty-state>\n  </c8y-data-grid>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i3.EcosystemService }, { type: i1.BsModalService }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i2.GainsightService }], propDecorators: { appId: [{
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1.EcosystemService }, { type: i1$1.BsModalService }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i2.GainsightService }], propDecorators: { appId: [{
                 type: Input
             }], dataGrid: [{
                 type: ViewChild,
@@ -1060,12 +1078,12 @@ class ApplicationPluginsGuard {
             // apps like e.g. the public-options should not have the plugins tab
             !manifest.noAppSwitcher);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsGuard, deps: [{ token: i3.EcosystemService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsGuard, deps: [{ token: i1.EcosystemService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsGuard }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsGuard, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i3.EcosystemService }] });
+        }], ctorParameters: () => [{ type: i1.EcosystemService }] });
 
 class ApplicationPluginsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -1078,7 +1096,7 @@ class ApplicationPluginsModule {
             LabelCellRendererComponent,
             OrphanedStatusCellRendererComponent,
             UpdatePluginOfAppComponent,
-            OnlyLatestPluginVersionPipe], imports: [CoreModule, SharedEcosystemModule], exports: [ApplicationPluginsComponent,
+            OnlyLatestFilterComponent], imports: [CoreModule, SharedEcosystemModule], exports: [ApplicationPluginsComponent,
             PluginListItemComponent,
             InstallPluginComponent,
             PluginListComponent,
@@ -1086,7 +1104,8 @@ class ApplicationPluginsModule {
             AppStatePipe,
             LabelCellRendererComponent,
             OrphanedStatusCellRendererComponent,
-            UpdatePluginOfAppComponent] }); }
+            UpdatePluginOfAppComponent,
+            OnlyLatestFilterComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplicationPluginsModule, providers: [
             ApplicationPluginsGuard,
             hookRoute([
@@ -1116,7 +1135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         LabelCellRendererComponent,
                         OrphanedStatusCellRendererComponent,
                         UpdatePluginOfAppComponent,
-                        OnlyLatestPluginVersionPipe
+                        OnlyLatestFilterComponent
                     ],
                     exports: [
                         ApplicationPluginsComponent,
@@ -1127,7 +1146,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         AppStatePipe,
                         LabelCellRendererComponent,
                         OrphanedStatusCellRendererComponent,
-                        UpdatePluginOfAppComponent
+                        UpdatePluginOfAppComponent,
+                        OnlyLatestFilterComponent
                     ],
                     providers: [
                         ApplicationPluginsGuard,
@@ -1150,5 +1170,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AppStatePipe, ApplicationPluginsComponent, ApplicationPluginsGuard, ApplicationPluginsModule, AppsToUpdateRemotesSelectComponent, InstallPluginComponent, LabelCellRendererComponent, OrphanedStatusCellRendererComponent, PluginListComponent, PluginListItemComponent, UpdatePluginOfAppComponent };
+export { AppStatePipe, ApplicationPluginsComponent, ApplicationPluginsGuard, ApplicationPluginsModule, AppsToUpdateRemotesSelectComponent, InstallPluginComponent, LabelCellRendererComponent, OnlyLatestFilterComponent, OrphanedStatusCellRendererComponent, PluginListComponent, PluginListItemComponent, UpdatePluginOfAppComponent };
 //# sourceMappingURL=c8y-ngx-components-ecosystem-application-plugins.mjs.map