@c8y/ngx-components 1024.2.4 → 1024.8.3

package/fesm2022/c8y-ngx-components-context-dashboard.mjs

@@ -453,18 +453,23 @@ class ContextDashboardService {
         this.dashboardTabs$ = this.getTabs$(mo, types, route?.parent?.data, options);
         return this.dashboardTabs$;
     }
-    getDashboard(name, defaultWidgets) {
+    getDashboard(name, defaultWidgets, context) {
         const children = this.mapWidgets(defaultWidgets);
+        const defaultDashboard = this.getDefaultDashboard({
+            name,
+            children,
+            translateWidgetTitle: true,
+            widgetClasses: { 'dashboard-theme-light': true, 'panel-title-regular': true }
+        });
         return this.getDashboard$(name, [ContextDashboardType.Named]).pipe(throwIfEmpty(), catchError(() => {
-            if (!this.hasPermissionsToCopyDashboard()) {
-                this.alert.warning(gettext('You are viewing a read-only dashboard because you don’t have the necessary permissions to modify it.'));
-            }
-            return of(this.getDefaultDashboard({
-                name,
-                children,
-                translateWidgetTitle: true,
-                widgetClasses: { 'dashboard-theme-light': true, 'panel-title-regular': true }
-            }));
+            const canCreate$ = context?.id
+                ? from(this.permissions.canEdit(this.INVENTORY_ROLES, context))
+                : of(this.hasPermissionsToCopyDashboard());
+            return canCreate$.pipe(tap(hasPermission => {
+                if (!hasPermission) {
+                    this.alert.warning(gettext('You are viewing a read-only dashboard because you don’t have the necessary permissions to modify it.'));
+                }
+            }), map(() => defaultDashboard));
         }));
     }
     updateNavigatorItem(mo) {
@@ -521,12 +526,19 @@ class ContextDashboardService {
     }
     /**
      * Checks if user is able to edit dashboard according to his roles and dashboard ownership.
+     * When the dashboard managed object has no ID (e.g. a default in-memory dashboard), the check
+     * falls back to the provided `fallbackContext` managed object (e.g. the device or group), which
+     * allows group-level inventory roles to be evaluated correctly via the request-based check.
      *
      * @param mo - Dashboard managed object.
+     * @param fallbackContext - Optional context (device or group) used for permission checks when `mo` has no ID.
      * @returns True if user is able to edit dashboard, false if he cannot.
      */
-    async canEditDashboard(mo) {
-        return await this.permissions.canEdit(this.INVENTORY_ROLES, mo);
+    async canEditDashboard(mo, fallbackContext) {
+        if (!isEmpty(mo.id) || !fallbackContext?.id) {
+            return await this.permissions.canEdit(this.INVENTORY_ROLES, mo);
+        }
+        return await this.permissions.canEdit(this.INVENTORY_ROLES, fallbackContext);
     }
     /**
      * Checks if user has permissions to copy dashboard according to his roles.
@@ -1627,7 +1639,7 @@ class DashboardDetailComponent {
         this.tabs = this.dashboardDetailService.getTabs();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DashboardDetailComponent, deps: [{ token: ContextDashboardService }, { token: i2$1.TranslateService }, { token: i2.ContextRouteService }, { token: i1.ActivatedRoute }, { token: i2.TabsService }, { token: i1.Router }, { token: i1$1.InventoryService }, { token: i1.ActivatedRoute }, { token: DashboardDetailService }, { token: i2.AppStateService }, { token: i2.GroupService }, { token: i2.ModalService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DashboardDetailComponent, isStandalone: true, selector: "c8y-dashboard-detail", inputs: { isReport: "isReport", deviceType: "deviceType", context: "context", mo: "mo", dashboard: "dashboard", isNamedDashboard: "isNamedDashboard", hideAvailability: "hideAvailability" }, outputs: { dashboardSaved: "dashboardSaved", previewChanged: "previewChanged" }, providers: [DashboardDetailService], usesOnChanges: true, ngImport: i0, template: "<!--\n  [isAnimated]=\"false\": ngx-bootstrap's CollapseDirective builds an Angular animation\n  player on each open/close but never destroys it on teardown, so the root animation\n  engine retains the player and its onDone closure pins this directive \u2014 and via the\n  view tree the whole c8y-context-dashboard \u2014 on every \"Dashboard settings\" open (leak).\n-->\n<div\n  class=\"collapse c8y-top-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"false\"\n>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <span class=\"h4\">{{ 'Dashboard settings' | translate }}</span>\n  </div>\n\n  @if (!isCollapsed) {\n    <div class=\"d-flex\">\n      <c8y-tabs-outlet\n        class=\"c8y-top-drawer--tabs\"\n        [tabs]=\"tabs\"\n        [outletName]=\"TABS_OUTLET_NAME\"\n        [orientation]=\"'vertical'\"\n        [openFirstTab]=\"true\"\n      ></c8y-tabs-outlet>\n\n      <div\n        class=\"inner-scroll c8y-top-drawer__tabs-container flex-grow p-l-24 p-r-lg-32 p-r-xs-24 p-r-sm-24\"\n      >\n        <router-outlet name=\"dashboard-details\"></router-outlet>\n      </div>\n    </div>\n  }\n\n  <div class=\"c8y-top-drawer--footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--cancel-dashboard\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--save-dashboard\"\n      (click)=\"save()\"\n      [disabled]=\"\n        ((dashboardDetailsForm?.invalid || dashboardDetailsForm?.pristine) && this.isEdit) ||\n        dashboardDetailService.saveButtonDisabled\n      \"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DashboardDetailComponent, isStandalone: true, selector: "c8y-dashboard-detail", inputs: { isReport: "isReport", deviceType: "deviceType", context: "context", mo: "mo", dashboard: "dashboard", isNamedDashboard: "isNamedDashboard", hideAvailability: "hideAvailability" }, outputs: { dashboardSaved: "dashboardSaved", previewChanged: "previewChanged" }, providers: [DashboardDetailService], usesOnChanges: true, ngImport: i0, template: "<!--\n  [isAnimated]=\"false\": ngx-bootstrap's CollapseDirective builds an Angular animation\n  player on each open/close but never destroys it on teardown, so the root animation\n  engine retains the player and its onDone closure pins this directive \u2014 and via the\n  view tree the whole c8y-context-dashboard \u2014 on every \"Dashboard settings\" open (leak).\n\n  decision by Jan on 9/7/2026 renable it and start preparing to bump ngx-bootstrap to 21.2.1\n-->\n<div\n  class=\"collapse c8y-top-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <span class=\"h4\">{{ 'Dashboard settings' | translate }}</span>\n  </div>\n\n  @if (!isCollapsed) {\n    <div class=\"d-flex\">\n      <c8y-tabs-outlet\n        class=\"c8y-top-drawer--tabs\"\n        [tabs]=\"tabs\"\n        [outletName]=\"TABS_OUTLET_NAME\"\n        [orientation]=\"'vertical'\"\n        [openFirstTab]=\"true\"\n      ></c8y-tabs-outlet>\n\n      <div\n        class=\"inner-scroll c8y-top-drawer__tabs-container flex-grow p-l-24 p-r-lg-32 p-r-xs-24 p-r-sm-24\"\n      >\n        <router-outlet name=\"dashboard-details\"></router-outlet>\n      </div>\n    </div>\n  }\n\n  <div class=\"c8y-top-drawer--footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--cancel-dashboard\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--save-dashboard\"\n      (click)=\"save()\"\n      [disabled]=\"\n        ((dashboardDetailsForm?.invalid || dashboardDetailsForm?.pristine) && this.isEdit) ||\n        dashboardDetailService.saveButtonDisabled\n      \"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 __decorate([
     memoize(),
@@ -1637,7 +1649,7 @@ __decorate([
 ], DashboardDetailComponent.prototype, "convertStringToHash", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DashboardDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-dashboard-detail', providers: [DashboardDetailService], imports: [CollapseDirective, TabsOutletComponent, RouterOutlet, C8yTranslatePipe], template: "<!--\n  [isAnimated]=\"false\": ngx-bootstrap's CollapseDirective builds an Angular animation\n  player on each open/close but never destroys it on teardown, so the root animation\n  engine retains the player and its onDone closure pins this directive \u2014 and via the\n  view tree the whole c8y-context-dashboard \u2014 on every \"Dashboard settings\" open (leak).\n-->\n<div\n  class=\"collapse c8y-top-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"false\"\n>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <span class=\"h4\">{{ 'Dashboard settings' | translate }}</span>\n  </div>\n\n  @if (!isCollapsed) {\n    <div class=\"d-flex\">\n      <c8y-tabs-outlet\n        class=\"c8y-top-drawer--tabs\"\n        [tabs]=\"tabs\"\n        [outletName]=\"TABS_OUTLET_NAME\"\n        [orientation]=\"'vertical'\"\n        [openFirstTab]=\"true\"\n      ></c8y-tabs-outlet>\n\n      <div\n        class=\"inner-scroll c8y-top-drawer__tabs-container flex-grow p-l-24 p-r-lg-32 p-r-xs-24 p-r-sm-24\"\n      >\n        <router-outlet name=\"dashboard-details\"></router-outlet>\n      </div>\n    </div>\n  }\n\n  <div class=\"c8y-top-drawer--footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--cancel-dashboard\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--save-dashboard\"\n      (click)=\"save()\"\n      [disabled]=\"\n        ((dashboardDetailsForm?.invalid || dashboardDetailsForm?.pristine) && this.isEdit) ||\n        dashboardDetailService.saveButtonDisabled\n      \"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-dashboard-detail', providers: [DashboardDetailService], imports: [CollapseDirective, TabsOutletComponent, RouterOutlet, C8yTranslatePipe], template: "<!--\n  [isAnimated]=\"false\": ngx-bootstrap's CollapseDirective builds an Angular animation\n  player on each open/close but never destroys it on teardown, so the root animation\n  engine retains the player and its onDone closure pins this directive \u2014 and via the\n  view tree the whole c8y-context-dashboard \u2014 on every \"Dashboard settings\" open (leak).\n\n  decision by Jan on 9/7/2026 renable it and start preparing to bump ngx-bootstrap to 21.2.1\n-->\n<div\n  class=\"collapse c8y-top-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <span class=\"h4\">{{ 'Dashboard settings' | translate }}</span>\n  </div>\n\n  @if (!isCollapsed) {\n    <div class=\"d-flex\">\n      <c8y-tabs-outlet\n        class=\"c8y-top-drawer--tabs\"\n        [tabs]=\"tabs\"\n        [outletName]=\"TABS_OUTLET_NAME\"\n        [orientation]=\"'vertical'\"\n        [openFirstTab]=\"true\"\n      ></c8y-tabs-outlet>\n\n      <div\n        class=\"inner-scroll c8y-top-drawer__tabs-container flex-grow p-l-24 p-r-lg-32 p-r-xs-24 p-r-sm-24\"\n      >\n        <router-outlet name=\"dashboard-details\"></router-outlet>\n      </div>\n    </div>\n  }\n\n  <div class=\"c8y-top-drawer--footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--cancel-dashboard\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--save-dashboard\"\n      (click)=\"save()\"\n      [disabled]=\"\n        ((dashboardDetailsForm?.invalid || dashboardDetailsForm?.pristine) && this.isEdit) ||\n        dashboardDetailService.saveButtonDisabled\n      \"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: ContextDashboardService }, { type: i2$1.TranslateService }, { type: i2.ContextRouteService }, { type: i1.ActivatedRoute }, { type: i2.TabsService }, { type: i1.Router }, { type: i1$1.InventoryService }, { type: i1.ActivatedRoute }, { type: DashboardDetailService }, { type: i2.AppStateService }, { type: i2.GroupService }, { type: i2.ModalService }, { type: i2.GainsightService }], propDecorators: { isReport: [{
                 type: Input
             }], deviceType: [{
@@ -3413,8 +3425,9 @@ class ContextDashboardComponent {
     }
     async onLoad(trackExperience) {
         this.isNamedDashboard = this.contextDashboardService.isNamed(this.mo);
+        const activeContext = this.context?.contextData || this.context;
         this.hasPermissionToEditDashboard = this.dashboard
-            ? await this.contextDashboardService.canEditDashboard(this.mo)
+            ? await this.contextDashboardService.canEditDashboard(this.mo, activeContext)
             : false;
         this.canCopy =
             this._canCopy &&
@@ -3516,8 +3529,9 @@ class ContextDashboardComponent {
         }
     }
     loadNamedDashboard() {
+        const activeContext = this.context?.contextData || this.context;
         this.dataSub = this.contextDashboardService
-            .getDashboard(this.name, this.defaultWidgets)
+            .getDashboard(this.name, this.defaultWidgets, activeContext)
             .subscribe(mo => {
             this.context = this.context || {};
             this.mo = mo;