Implement changes as discussed in review

modules/portmaster/src/app/pages/app-settings/app-settings.ts

@@ -119,6 +119,11 @@ export class AppSettingsPageComponent implements OnInit, OnDestroy {
     // Actually safe the profile
     this.profileService.saveProfile(this.appProfile!)
       .subscribe({
+        next: () => {
+          if (!!event.accepted) {
+            event.accepted();
+          }
+        },
         error: err => {
           // if there's a callback function for errors call it.
           if (!!event.rejected) {
@@ -213,7 +218,7 @@ export class AppSettingsPageComponent implements OnInit, OnDestroy {
             this.settings = allSettings
               .map(setting => {
                 setting.Value = profileConfig[setting.Key];
-                setting.DefaultValue = global[setting.Key];
+                setting.GlobalDefault = global[setting.Key];
                 return setting;
               })
               .filter(setting => {

modules/portmaster/src/app/pages/settings/settings.ts

@@ -107,6 +107,10 @@ export class SettingsComponent implements OnInit, OnDestroy {
     this.configService.save(setting)
       .subscribe({
         next: () => {
+          if (!!event.accepted) {
+            event.accepted();
+          }
+
           this.settings[idx] = setting;
 
           // for the release level setting we need to
@@ -117,6 +121,10 @@ export class SettingsComponent implements OnInit, OnDestroy {
           }
         },
         error: err => {
+          if (!!event.rejected) {
+            event.rejected(err);
+          }
+
           this.actionIndicator.error('Failed to save setting', err);
           console.error(err);
         }

modules/portmaster/src/app/services/config.types.ts

@@ -143,7 +143,8 @@ export enum WellKnown {
   Subsystem = "safing/portbase:module:subsystem",
   Stackable = "safing/portbase:options:stackable",
   QuickSetting = "safing/portbase:ui:quick-setting",
-  Requires = "safing/portbase:config:requires"
+  Requires = "safing/portbase:config:requires",
+  RestartPending = "safing/portbase:options:restart-pending"
 }
 
 /**
@@ -225,6 +226,10 @@ export interface BaseSetting<T extends OptionValueType, O extends OptionType> ex
   // JavaScript as well.
   ValidationRegex?: string;
   PossibleValues?: PossilbeValue[];
+
+  // GlobalDefault holds the global default value and is used in the app settings
+  // This property is NOT defined inside the portmaster!
+  GlobalDefault?: T;
 }
 
 export type IntSetting = BaseSetting<number, OptionType.Int>;

modules/portmaster/src/app/shared/config/generic-setting/generic-setting.html

@@ -1,19 +1,42 @@
-<div class="relative flex flex-row flex-wrap items-center px-5 py-5 bg-gray-200 border-l border-transparent rounded"
-  [class.pr-8]="lockDefaults" [ngClass]="{'border-blue rounded-l-none': _setting?.Value === undefined}">
+<div class="relative flex flex-row flex-wrap items-center px-5 py-5 bg-gray-200 border-l border-transparent rounded-r"
+  [class.pr-8]="lockDefaults" [ngClass]="{
+    'border-blue': _setting?.Value !== undefined && !rejected,
+    'border-red': rejected,
+    'rounded-l': !rejected && _setting?.Value === undefined
+  }">
   <div class="flex flex-col flex-grow">
     <div class="flex flex-row items-center justify-start space-x-2 w-fit">
       <h3 [innerHTML]="setting?.Name | safe:'html'" class="mb-0 name"></h3>
       <app-tipup *ngIf="setting?.Description" [key]="setting!.Key" [text]="setting?.Description"
-        [title]="setting?.Name"></app-tipup>
+        [buttons]="tipupButtons" [title]="setting?.Name"></app-tipup>
+
+      <span *ngIf="changeAccepted || restartPending" (click)="restartNow()"
+        class="px-1.5 py-0.5 border  rounded inline-flex justify-evenly items-center text-xxs mb-0.5" [ngClass]="{
+          'border-green-300 text-green-300': !_setting?.RequiresRestart,
+          'border-yellow text-yellow cursor-pointer hover:bg-yellow hover:text-gray-200': _setting?.RequiresRestart
+        }" [@fadeIn]>
+        <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-4 h-4 mr-1" viewBox="0 0 20 20"
+          fill="currentColor">
+          <path fill-rule="evenodd"
+            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+            clip-rule="evenodd" />
+        </svg>
+        Saved {{ _setting?.RequiresRestart ? ' - Restart required' : '' }}
+      </span>
+
+      <span *ngIf="rejected" (click)="resetValue()"
+        class="px-1.5 py-0.5 border-red-300 border text-red-300 rounded inline-flex justify-evenly items-center text-xxs hover:bg-red hover:text-white mb-0.5 cursor-pointer">
+        <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-4 h-4 mr-1" *ngIf="rejected" fill="none"
+          viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+        </svg>
+        Invalid Value
+      </span>
     </div>
 
     <span class="flex flex-row items-center justify-start space-x-2"
-      *ngIf="setting?.ReleaseLevel != releaseLevel.Stable || rejected || (expertiseLevel | async) === 'developer'">
-      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-300" *ngIf="rejected" fill="none"
-        viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-      </svg>
+      *ngIf="setting?.ReleaseLevel != releaseLevel.Stable || (expertiseLevel | async) === 'developer'">
 
       <span class="inline-block px-1.5 py-0.5 bg-gray-400 rounded text-xxs text-secondary"
         *appExpertiseLevel="'developer'">{{setting?.Key}}</span>
@@ -59,7 +82,7 @@ <h3 [innerHTML]="setting?.Name | safe:'html'" class="mb-0 name"></h3>
       <div class="stacked-values" *ngIf="showStackable">
         <h4>This setting stacks on top of the following <a class="underline text-tertiary hover:text-primary"
             routerLink="/settings" [queryParams]="{setting: setting?.Key}">global setting</a>:</h4>
-        <app-rule-list class="w-full mt-4" [readonly]="true" [ngModel]="defaultValue"></app-rule-list>
+        <app-rule-list class="w-full mt-4" [readonly]="true" [ngModel]="setting?.GlobalDefault"></app-rule-list>
       </div>
     </ng-container>
 
@@ -78,7 +101,7 @@ <h4>This setting stacks on top of the following <a class="underline text-tertiar
       <div class="stacked-values" *ngIf="showStackable">
         <h4>This setting stacks on top of the following <a class="underline text-tertiary hover:text-primary"
             routerLink="/settings" [queryParams]="{setting: setting?.Key}">global setting</a>:</h4>
-        <app-ordered-list class="w-full mt-4" [ngModel]="defaultValue" [readonly]="true"></app-ordered-list>
+        <app-ordered-list class="w-full mt-4" [ngModel]="setting?.GlobalDefault" [readonly]="true"></app-ordered-list>
       </div>
     </ng-container>
 
@@ -93,21 +116,21 @@ <h4>This setting stacks on top of the following <a class="underline text-tertiar
         <div class="stacked-values" *ngIf="showStackable">
           <h4>This setting stacks on top of the following <a class="underline text-tertiary hover:text-primary"
               routerLink="/settings" [queryParams]="{setting: setting?.Key}">global setting</a>:</h4>
-          <app-ordered-list class="w-full mt-4" fixedOrder="true" [ngModel]="defaultValue" [readonly]="true">
+          <app-ordered-list class="w-full mt-4" fixedOrder="true" [ngModel]="setting?.GlobalDefault" [readonly]="true">
           </app-ordered-list>
         </div>
       </ng-container>
 
       <ng-template #basicSetting>
         <!-- basic inputs -->
         <app-basic-setting class="block" [setting]="_setting" [disabled]="disabled" [ngModel]="_currentValue"
-          [autoFocus]="!isLocked" (ngModelChange)="updateValue($event)" (onBlur)="updateValue(_currentValue!, true)">
+          [autoFocus]="!isLocked" (ngModelChange)="updateValue($event)"
+          (onBlur)="updateValue(_basicSettingsValueCache!, _currentValue !== _basicSettingsValueCache)">
         </app-basic-setting>
       </ng-template>
     </ng-container>
   </ng-container>
 
-
   <span class="unlock-button" [class.bg-blue]="!isLocked" [class.bg-gray-500]="isLocked" *ngIf="lockDefaults"
     (click)="toggleLock()">
     <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white" viewBox="0 0 20 20" fill="currentColor"
@@ -137,3 +160,13 @@ <h4>This setting stacks on top of the following <a class="underline text-tertiar
     {{resetLabelText}}
   </span>
 </div>
+
+<ng-template #helpTemplate>
+  <div class="relative flex flex-col overflow-hidden max-w-1/3vw">
+    <fa-icon class="absolute top-0 right-0 mt-2 mr-2 opacity-50 cursor-pointer hover:opacity" icon="times"
+      (click)="closeHelpDialog()"></fa-icon>
+    <h1>{{ _setting?.Name }}</h1>
+
+    <markdown emoji [data]="_setting?.Help" class="flex-grow block overflow-auto"></markdown>
+  </div>
+</ng-template>

modules/portmaster/src/app/shared/config/generic-setting/generic-setting.scss

@@ -25,15 +25,15 @@
 }
 
 .unlock-button {
-  @apply flex w-5 h-5 rounded-full;
+  @apply flex w-6 h-6 rounded-full;
 
   justify-content: center;
   align-items: center;
   cursor: pointer;
 
   position: absolute;
-  right: calc(-1.25rem/2);
-  top: calc(50% - 1.25rem/2);
+  right: calc(-1.5rem/2);
+  top: calc(50% - 1.5rem/2);
 
   &:hover {
     @apply bg-blue;