Allow configuration to be static/readonly (#4315)

* Allow configuration to be static/readonly

* Make all components disableable

* Improve disabled component styling

* Rename edits allowed field in configuration

* Fix CI

12 files changed, 49 insertions, 4 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 3ceea02ca..6ae7b1b79 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -63,7 +63,7 @@
     <div class="col-md-7 col-xl-5"></div>
     <div class="col-md-5 col-xl-5">
 
-      <div class="form-error submit-error" i18n *ngIf="!form.valid">
+      <div class="form-error submit-error" i18n *ngIf="!form.valid && serverConfig.allowEdits">
         There are errors in the form:
 
         <ul>
@@ -77,7 +77,11 @@
         You cannot allow live replay if you don't enable transcoding.
       </span>
 
-      <input (click)="formValidated()" type="submit" i18n-value value="Update configuration" [disabled]="!form.valid || !hasConsistentOptions()">
+      <span i18n *ngIf="!serverConfig.allowEdits">
+        You cannot change the server configuration because it's managed externally.
+      </span>
+
+      <input (click)="formValidated()" type="submit" i18n-value value="Update configuration" [disabled]="!form.valid || !hasConsistentOptions() || !serverConfig.allowEdits">
     </div>
   </div>
 </form>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index 5951d0aaa..0458d257f 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -33,6 +33,11 @@ input[type=number] {
     top: 5px;
     right: 2.5rem;
   }
+
+  input[disabled] {
+    background-color: #f9f9f9;
+    pointer-events: none;
+  }
 }
 
 input[type=checkbox] {
@@ -93,6 +98,11 @@ textarea {
   }
 }
 
+input[disabled] {
+  opacity: 0.5;
+}
+
+
 .form-group-right {
   padding-top: 2px;
 }
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index f13fe4bf9..04b0175a7 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -258,6 +258,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
 
     this.loadConfigAndUpdateForm()
     this.loadCategoriesAndLanguages()
+    if (!this.serverConfig.allowEdits) {
+      this.form.disable()
+    }
   }
 
   formValidated () {
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.html b/client/src/app/shared/shared-forms/markdown-textarea.component.html
index 6e70e2f37..a460cb9b7 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.html
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.html
@@ -2,6 +2,7 @@
   <textarea #textarea
     [(ngModel)]="content" (ngModelChange)="onModelChange()"
     class="form-control" [ngClass]="classes"
+    [attr.disabled]="disabled"
     [ngStyle]="{ height: textareaHeight }"
     [id]="name" [name]="name">
   </textarea>
@@ -25,11 +26,11 @@
     </ng-container>
 
     <my-button
-      *ngIf="!isMaximized" [title]="maximizeInText" className="maximize-button" icon="fullscreen" (click)="onMaximizeClick()"
+      *ngIf="!isMaximized" [title]="maximizeInText" className="maximize-button" icon="fullscreen" (click)="onMaximizeClick()" [disabled]="disabled"
     ></my-button>
 
     <my-button
-      *ngIf="isMaximized" [title]="maximizeOutText" className="maximize-button" icon="exit-fullscreen" (click)="onMaximizeClick()"
+      *ngIf="isMaximized" [title]="maximizeOutText" className="maximize-button" icon="exit-fullscreen" (click)="onMaximizeClick()" [disabled]="disabled"
     ></my-button>
   </div>
 
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.ts b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
index 80ca6690f..dcb5d20da 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
@@ -45,6 +45,7 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
   previewHTML: SafeHtml | string = ''
 
   isMaximized = false
+  disabled = false
 
   maximizeInText = $localize`Maximize editor`
   maximizeOutText = $localize`Exit maximized editor`
@@ -108,6 +109,10 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
     }
   }
 
+  setDisabledState (isDisabled: boolean) {
+    this.disabled = isDisabled
+  }
+
   private lockBodyScroll () {
     this.scrollPosition = this.viewportScroller.getScrollPosition()
     document.getElementById('content').classList.add('lock-scroll')
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.html b/client/src/app/shared/shared-forms/select/select-checkbox.component.html
index 7b49a0c01..03db2875b 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.html
@@ -7,6 +7,7 @@
   [multiple]="true"
   [searchable]="true"
   [closeOnSelect]="false"
+  [disabled]="disabled"
 
   bindValue="id"
   bindLabel="label"
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.ts b/client/src/app/shared/shared-forms/select/select-checkbox.component.ts
index 12f697628..c9a500324 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.ts
@@ -23,6 +23,8 @@ export class SelectCheckboxComponent implements OnInit, ControlValueAccessor {
   @Input() selectableGroupAsModel: boolean
   @Input() placeholder: string
 
+  disabled = false
+
   ngOnInit () {
     if (!this.placeholder) this.placeholder = $localize`Add a new option`
   }
@@ -59,6 +61,10 @@ export class SelectCheckboxComponent implements OnInit, ControlValueAccessor {
     this.propagateChange(this.selectedItems)
   }
 
+  setDisabledState (isDisabled: boolean) {
+    this.disabled = isDisabled
+  }
+
   compareFn (item: SelectOptionsItem, selected: ItemSelectCheckboxValue) {
     if (typeof selected === 'string' || typeof selected === 'number') {
       return item.id === selected
diff --git a/client/src/app/shared/shared-forms/select/select-custom-value.component.html b/client/src/app/shared/shared-forms/select/select-custom-value.component.html
index 9dc8c2ec2..69fdedc10 100644
--- a/client/src/app/shared/shared-forms/select/select-custom-value.component.html
+++ b/client/src/app/shared/shared-forms/select/select-custom-value.component.html
@@ -5,6 +5,7 @@
     [searchable]="searchable"
     [groupBy]="groupBy"
     [labelForId]="labelForId"
+    [disabled]="disabled"
 
     [(ngModel)]="selectedId"
     (ngModelChange)="onModelChange()"
diff --git a/client/src/app/shared/shared-forms/select/select-custom-value.component.ts b/client/src/app/shared/shared-forms/select/select-custom-value.component.ts
index bc6b863c7..636bd6101 100644
--- a/client/src/app/shared/shared-forms/select/select-custom-value.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-custom-value.component.ts
@@ -25,6 +25,7 @@ export class SelectCustomValueComponent implements ControlValueAccessor, OnChang
 
   customValue: number | string = ''
   selectedId: number | string
+  disabled = false
 
   itemsWithCustom: SelectOptionsItem[] = []
 
@@ -75,4 +76,8 @@ export class SelectCustomValueComponent implements ControlValueAccessor, OnChang
   isCustomValue () {
     return this.selectedId === 'other'
   }
+
+  setDisabledState (isDisabled: boolean) {
+    this.disabled = isDisabled
+  }
 }
diff --git a/client/src/app/shared/shared-forms/select/select-options.component.html b/client/src/app/shared/shared-forms/select/select-options.component.html
index 3b1761255..83c7de9f5 100644
--- a/client/src/app/shared/shared-forms/select/select-options.component.html
+++ b/client/src/app/shared/shared-forms/select/select-options.component.html
@@ -7,6 +7,7 @@
   [labelForId]="labelForId"
   [searchable]="searchable"
   [searchFn]="searchFn"
+  [disabled]="disabled"
 
   bindLabel="label"
   bindValue="id"
diff --git a/client/src/app/shared/shared-forms/select/select-options.component.ts b/client/src/app/shared/shared-forms/select/select-options.component.ts
index 8482b9dea..820a82c24 100644
--- a/client/src/app/shared/shared-forms/select/select-options.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-options.component.ts
@@ -23,6 +23,7 @@ export class SelectOptionsComponent implements ControlValueAccessor {
   @Input() searchFn: any
 
   selectedId: number | string
+  disabled = false
 
   propagateChange = (_: any) => { /* empty */ }
 
@@ -48,4 +49,8 @@ export class SelectOptionsComponent implements ControlValueAccessor {
   onModelChange () {
     this.propagateChange(this.selectedId)
   }
+
+  setDisabledState (isDisabled: boolean) {
+    this.disabled = isDisabled
+  }
 }
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 9f6d69131..679c235a6 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -364,6 +364,9 @@
       cursor: default;
     }
   }
+  select[disabled] {
+    background-color: #f9f9f9;
+  }
 
   @media screen and (max-width: $width) {
     width: 100%;