RED-2991: RED_USER permissions for dossier dictionary

apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts

@@ -68,6 +68,7 @@ export class EditorComponent implements OnInit, OnChanges {
             glyphMargin: true,
             automaticLayout: true,
             readOnly: !this.canEdit,
+            extraEditorClassName: this.canEdit ? '' : 'disabled',
         };
     }
 
@@ -79,19 +80,12 @@ export class EditorComponent implements OnInit, OnChanges {
         this._diffEditor.getModifiedEditor().onDidChangeModelContent(() => {
             this.value = this._diffEditor.getModel().modified.getValue();
         });
+        this._setTheme();
     }
 
     onCodeEditorInit(editor: ICodeEditor): void {
         this.codeEditor = editor;
-        (window as any).monaco.editor.defineTheme('redaction', {
-            base: 'vs',
-            inherit: true,
-            rules: [],
-            colors: {
-                'editor.lineHighlightBackground': '#f4f5f7',
-            },
-        });
-        (window as any).monaco.editor.setTheme('redaction');
+        this._setTheme();
     }
 
     @Debounce()
@@ -107,6 +101,34 @@ export class EditorComponent implements OnInit, OnChanges {
         this._diffEditor?.getModifiedEditor().setValue(this.diffValue);
     }
 
+    private _defineThemes(): void {
+        (window as any).monaco.editor.defineTheme('redaction', {
+            base: 'vs',
+            inherit: true,
+            rules: [],
+            colors: {
+                'editor.lineHighlightBackground': '#f4f5f7',
+            },
+        });
+        (window as any).monaco.editor.defineTheme('redaction-disabled', {
+            base: 'vs',
+            inherit: true,
+            rules: [],
+            colors: {
+                'editor.background': '#f4f5f7',
+                'editor.foreground': '#9398a0',
+                'editor.lineHighlightBackground': '#f4f5f7',
+                'editorLineNumber.foreground': '#9398a0',
+                'editorActiveLineNumber.foreground': '#9398a0',
+            },
+        });
+    }
+
+    private _setTheme(): void {
+        this._defineThemes();
+        (window as any).monaco.editor.setTheme(this.canEdit ? 'redaction' : 'redaction-disabled');
+    }
+
     private _handleMarginButtonClick(event: IEditorMouseEvent) {
         const isMarginButtonClick = event.target.detail.glyphMarginWidth && event.target.detail.glyphMarginWidth !== 0;
         if (isMarginButtonClick) {

apps/red-ui/src/assets/styles/red-editor.scss

@@ -1,5 +1,39 @@
 @use 'variables';
 
+.monaco-diff-editor {
+    .editor.original {
+        right: 30px !important; // diffOverviewRuler size
+        left: unset !important;
+    }
+
+    .editor.modified {
+        left: 0 !important;
+        width: unset !important;
+    }
+
+    .diffOverview {
+        .diffOverviewRuler.original {
+            left: 15px !important;
+        }
+
+        .diffOverviewRuler.modified {
+            right: 15px !important;
+        }
+    }
+}
+
+.monaco-editor.disabled {
+    cursor: default;
+
+    .monaco-mouse-cursor-text {
+        cursor: default;
+    }
+
+    .cursors-layer > .cursor {
+        display: none !important;
+    }
+}
+
 .changed-row-marker {
     background: rgba(variables.$primary, 0.1);
 }

apps/red-ui/src/styles.scss

@@ -32,25 +32,3 @@
     $iqser-yellow-2: vars.$yellow-2,
     $iqser-helpmode-primary: vars.$green-2
 );
-
-.monaco-diff-editor {
-    .editor.original {
-        right: 30px !important; // diffOverviewRuler size
-        left: unset !important;
-    }
-
-    .editor.modified {
-        left: 0 !important;
-        width: unset !important;
-    }
-
-    .diffOverview {
-        .diffOverviewRuler.original {
-            left: 15px !important;
-        }
-
-        .diffOverviewRuler.modified {
-            right: 15px !important;
-        }
-    }
-}