Schedule and reminder disappear in monitoring preview

🐜 Bug report

about: Short explanation 🔧

The base schedule and reminder are not visible when previewing a monitoring setup.

What is the expected behaviour?

Base schedule and reminder should still be visible, but not editable.

What is the actual behaviour?

Base schedule and reminder are not visible

Steps to Reproduce

Example:

1. Open the monitoring setup page
2. Add one or more questions or select a template
3. Click "Follow-up Preview" button at the bottom of the page
4. Schedule and Reminder disappear

Files

lib/themes/bengal/quick-action-list/quick-action-list.component.html

lib/themes/theming-mechanics/components/quick-action-list/quick-action-list-base.component.ts

Related code:

The quick actions disappear when their editable property is set to false (as it should be when in preview mode, where editing is not allowed). Bengal themes variant of this component wraps it's whole template inside a button that is removed from the template when editIconRequired is falsy:

<!-- lib/themes/bengal/quick-action-list/quick-action-list.component.html -->

<button
    [ngClass]="{ editable }"
    (click)="editable && editClickEmitter.emit()"
    *ngIf="editIconRequired"
    [attr.aria-label]="label"
    >
    <!-- irrelevant code omitted -->
</button>

In its base component editIconRequired is defined as

// lib/themes/theming-mechanics/components/quick-action-list/quick-action-list-base.component.ts

public get editIconRequired()	: boolean { return this.editable && this.editClickEmitter.observed }

Tasks

• Make sure bengal themes RccQuickActionListComponent is visible, but not editable when editable is set to false

Any possible solutions?

The template could implement a fallback that is displayed in case editIconRequired is falsy. Possible way to implement it(needs to be tested):

<!-- lib/themes/bengal/quick-action-list/quick-action-list.component.html -->

<button
    [ngClass]="{ editable }"
    (click)="editable && editClickEmitter.emit()"
    *ngIf="editIconRequired; else notEditable"
    [attr.aria-label]="label"
    >
    <!-- irrelevant code omitted -->
</button>

<ng-template #notEditable>
    <div class="label">
        <ng-content></ng-content>
    </div>
</ng-template>