Can't remove item from action bar

[marija.stefanjuk]

What product/components do you use and which version/fix level?

1011.0.12

Are you using a free trial or a product with a customer license?

What are trying to achieve? Please describe in detail.

I would like to remove action bar item from Cockpit app, specifically “Add group” button on Groups page.
I tried it with extending ActionBarService but I didn’t succeed.
This is snippet of my code:

@Injectable({
    providedIn: 'root'
})
export class CustomActionBarService extends ActionBarService{
    constructor(injector: Injector, router: Router){
        super(injector, router);
        this.items$ = this.items$.pipe(
            tap((actions) => console.log("actions ", actions)),
            map(actions => {
                return actions.filter(({ template }) => {
                    let ele = template;
                    if(template._projectedViews) {
                        ele = template._projectedViews[0].nodes.find(view => !!view).renderElement;
                    } else {
                        return true;
                    }
                    return !ele.querySelector("button[title='Add group']");
                })
            })
        );
    }
}

Do you get any error messages? Please provide a full error message screenshot and log file.

Button is still there.

Am I missing something? Is there another way to implement this?
Thank you

[Tristan_Bastian]

Hi Marija,

Your filter is not working since the attribute _projectedViews is not actually existing on the object at the point in time when you are filtering. It is added later on to the object.

There are two other options I see:

1. You could just hide the button via CSS
2. You could override the SubAssetsService to at least disable the button (if that is sufficient for you) like so:

import { Injectable } from '@angular/core';
import { SubAssetsService } from '@c8y/ngx-components/sub-assets';

@Injectable({
  providedIn: 'root'
})

export class CustomSubAssetsService extends SubAssetsService {
  canCreateGroup(): boolean {
      return false;
  }
}