feat: show warning when creating layer switch actions on all keymaps targeting a non-existing layer

packages/uhk-web/src/app/components/popover/popover.component.html

@@ -29,10 +29,13 @@
                       (keyActionChange)="keystrokeActionChange($event)"
         ></keypress-tab>
         <layer-tab #tab *ngSwitchCase="tabName.Layer" class="popover-content"
+                   [allowRemapOnAllKeymapWarning]="true"
                    [defaultKeyAction]="defaultKeyAction"
                    [currentLayer]="currentLayer"
                    [allowLayerDoubleTap]="allowLayerDoubleTap"
                    [layerOptions]="layerOptions$ | async"
+                   [remapInfo]="internalRemapInfo"
+                   [userConfiguration]="userConfiguration$ | async"
                    (validAction)="setKeyActionValidState($event)"
         ></layer-tab>
         <mouse-tab #tab *ngSwitchCase="tabName.Mouse" class="popover-content"
@@ -71,7 +74,8 @@
                     <input type="checkbox" class="form-check-input"
                         id="remapOnAllKeymap"
                         name="remapOnAllKeymap"
-                        [(ngModel)]="internalRemapInfo.remapOnAllKeymap">
+                        [(ngModel)]="internalRemapInfo.remapOnAllKeymap"
+                        (ngModelChange)="remapInfoChange()">
                     <label class="form-check-label" for="remapOnAllKeymap">Remap on all keymaps</label>
                 </div>
                 <div class="form-check">

packages/uhk-web/src/app/components/popover/popover.component.ts

@@ -28,7 +28,8 @@ import {
     SecondaryRoleAction,
     UhkThemeColors,
     SwitchKeymapAction,
-    SwitchLayerAction
+    SwitchLayerAction,
+    UserConfiguration,
 } from 'uhk-common';
 
 import { SelectedKeyModel } from '../../models';
@@ -40,6 +41,7 @@ import {
     getKeymaps,
     getLayerOptions,
     getUhkThemeColors,
+    getUserConfiguration,
     macroPlaybackSupported
 } from '../../store';
 import { KeyActionRemap } from '../../models/key-action-remap';
@@ -137,6 +139,7 @@ export class PopoverComponent implements OnChanges {
     ];
     macroPlaybackSupported$: Observable<boolean>;
     layerOptions$: Observable<LayerOption[]>;
+    userConfiguration$: Observable<UserConfiguration>;
 
     constructor(private store: Store<AppState>,
                 private cdRef: ChangeDetectorRef) {
@@ -145,6 +148,7 @@ export class PopoverComponent implements OnChanges {
         this.keymapOptions$ = store.select(getKeymapOptions);
         this.macroPlaybackSupported$ = store.select(macroPlaybackSupported);
         this.layerOptions$ = store.select(getLayerOptions);
+        this.userConfiguration$ = store.select(getUserConfiguration);
     }
 
     ngOnChanges(change: SimpleChanges) {

packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.html

@@ -38,6 +38,10 @@
                 <label class="form-check-label" for="lockLayerDoubleTap">Lock layer when double tapping this key.</label>
             </div>
         </div>
+
+        <div *ngIf="showWarning" class="alert alert-warning remap-warning" role="alert">
+            You're targeting the <strong>{{ layerDisplayText }}</strong> layer on all keymaps, some of which don't have this layer. This mapping will only be added to keymaps that have the <strong>{{ layerDisplayText }}</strong> layer.
+        </div>
     </div>
 </ng-template>
 <ng-template [ngIf]="isNotBase">

packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.scss

@@ -21,4 +21,11 @@
         display: inline-block;
         width: 6em;
     }
+
+    .remap-warning {
+        margin-top: 10px;
+        margin-bottom: 0;
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
 }

packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.ts

@@ -1,8 +1,10 @@
-import { ChangeDetectionStrategy, Component, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { copyRgbColor, KeyAction, LayerName, SwitchLayerAction, SwitchLayerMode } from 'uhk-common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { copyRgbColor, KeyAction, LayerName, SwitchLayerAction, SwitchLayerMode, UserConfiguration } from 'uhk-common';
 
 import { Tab } from '../tab';
 import { LayerOption } from '../../../../models';
+import { RemapInfo } from '../../../../models/remap-info';
+import { initLayerOptions } from '../../../../store/reducers/layer-options';
 
 export type toggleType = 'active' | 'toggle';
 
@@ -14,10 +16,13 @@ export type toggleType = 'active' | 'toggle';
     styleUrls: ['./layer-tab.component.scss']
 })
 export class LayerTabComponent extends Tab implements OnChanges {
+    @Input() allowRemapOnAllKeymapWarning: boolean;
     @Input() defaultKeyAction: KeyAction;
     @Input() currentLayer: LayerOption;
     @Input() allowLayerDoubleTap: boolean;
-    @Input() layerOptions: LayerOption[];
+    @Input() layerOptions: LayerOption[] = [];
+    @Input() remapInfo: RemapInfo;
+    @Input() userConfiguration: UserConfiguration;
 
     @HostBinding('class.no-base') isNotBase: boolean;
 
@@ -36,12 +41,15 @@ export class LayerTabComponent extends Tab implements OnChanges {
 
     toggle: toggleType;
     layer: LayerName;
+    layerDisplayText: string;
     lockLayerWhenDoubleTapping: boolean;
+    showWarning= false;
 
-    constructor() {
+    constructor(private cdRef: ChangeDetectorRef) {
         super();
         this.toggle = 'active';
         this.layer = LayerName.mod;
+        this.calculateWarning();
     }
 
     ngOnChanges(changes: SimpleChanges) {
@@ -57,6 +65,7 @@ export class LayerTabComponent extends Tab implements OnChanges {
             this.layerData = this.layerOptions.filter(layer => layer.selected && layer.allowed);
         }
 
+        this.calculateWarning();
         this.validAction.emit(!this.isNotBase);
     }
 
@@ -117,5 +126,32 @@ export class LayerTabComponent extends Tab implements OnChanges {
 
     layerChanged(value: number) {
         this.layer = +value;
+        this.calculateWarning();
+    }
+
+    private calculateWarning() {
+        if (this.allowRemapOnAllKeymapWarning && this.userConfiguration && this.remapInfo.remapOnAllKeymap) {
+            for (const keymap of this.userConfiguration.keymaps) {
+                const layer = keymap.layers.find(layer => layer.id === this.layer);
+                if (!layer) {
+                    this.showWarning = true;
+
+                    const layerOptions = initLayerOptions();
+                    const layerOption = layerOptions.get(this.layer);
+                    this.layerDisplayText = layerOption?.name;
+
+                    break;
+                }
+            }
+        }
+        else {
+            this.showWarning = false;
+        }
+    }
+
+    remapInfoChanged(remapInfo: RemapInfo): void {
+        this.remapInfo = remapInfo;
+        this.calculateWarning();
+        this.cdRef.markForCheck();
     }
 }