From e6755055d846bcb344b27d502afd2228f3c823c4 Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo@devplant.ro>
Date: Tue, 13 Dec 2022 12:51:45 +0200
Subject: [PATCH 1/7] RED-3800 rss editing

---
 .../rss-dialog/rss-dialog.component.html      | 39 ++++++++++++++++---
 .../rss-dialog/rss-dialog.component.scss      | 28 +++++++++++++
 .../rss-dialog/rss-dialog.component.ts        | 18 ++++++++-
 .../src/app/services/files/rss.service.ts     |  2 +-
 apps/red-ui/src/assets/config/config.json     |  8 ++--
 5 files changed, 83 insertions(+), 12 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
index 5e98ca16f..cd30afbae 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
@@ -3,11 +3,40 @@
 
     <hr />
     <div class="dialog-content">
-        <div *ngIf="rssData$ | async as rssEntry">
-            <div *ngFor="let entry of rssEntry.result | keyvalue: originalOrder" class="rss-row">
-                <div class="rss-key">{{ entry.key }}:</div>
-                <div class="rss-value">{{ entry.value }}</div>
-            </div>
+        <div class="table output-data" *ngIf="rssData$ | async as rssEntry">
+            <div class="table-header">Component</div>
+            <div class="table-header">Value</div>
+            <div class="table-header">Transformation</div>
+            <div class="table-header">Annotations</div>
+
+            <ng-container *ngFor="let entry of rssEntry.result | keyvalue: originalOrder">
+                <div class="bold">{{ entry.key }}</div>
+                <div>
+                    <div class="value-content">
+                        <iqser-editable-input
+                            (save)="saveEdit($event, entry.value.originalKey)"
+                            [buttonsType]="iconButtonTypes.dark"
+                            [cancelTooltip]="'rss-dialog.actions.cancel-edit-name' | translate"
+                            [class]="'w-200'"
+                            [editTooltip]="'rss-dialog.actions.edit-name' | translate"
+                            [saveTooltip]="'rss-dialog.actions.save-name' | translate"
+                            [value]="entry.value.value ?? entry.value.originalValue"
+                        ></iqser-editable-input>
+
+                        <div class="actions">
+                            <iqser-circle-button
+                                (action)="undo()"
+                                icon="red:undo"
+                                [showDot]="false"
+                                [tooltip]="'rss-dialog.actions.undo' | translate"
+                                [type]="iconButtonTypes.dark"
+                            ></iqser-circle-button>
+                        </div>
+                    </div>
+                </div>
+                <div>{{ entry.value.transformation }}</div>
+                <div>{{ entry.value.scmAnnotations | json }}</div>
+            </ng-container>
         </div>
     </div>
 
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.scss
index fa01814c2..f741ead8d 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.scss
@@ -19,3 +19,31 @@
 .dialog-content {
     overflow: auto;
 }
+
+.table {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+
+    > div {
+        padding: 8px 10px;
+    }
+
+    .bold {
+        font-weight: 600;
+    }
+
+    .value-content {
+        .value {
+        }
+
+        .actions {
+        }
+    }
+
+    .table-header {
+        margin: 10px 0;
+        border-bottom: 1px solid var(--iqser-separator);
+        background-color: var(--iqser-grey-2);
+        font-weight: 600;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts
index 2b8eb4b21..603c1ddd5 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { BaseDialogComponent } from '@iqser/common-ui';
+import { BaseDialogComponent, IconButtonTypes } from '@iqser/common-ui';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { RssService } from '@services/files/rss.service';
 import { IFile, IRssEntry } from '@red/domain';
@@ -18,9 +18,11 @@ interface RssData {
     styleUrls: ['./rss-dialog.component.scss'],
 })
 export class RssDialogComponent extends BaseDialogComponent {
+    readonly iconButtonTypes = IconButtonTypes;
+
     rssData$: Observable<IRssEntry>;
 
-    originalOrder = (a: KeyValue<string, string>, b: KeyValue<string, string>): number => 0;
+    originalOrder = (a: KeyValue<string, any>, b: KeyValue<string, any>): number => 0;
 
     constructor(
         protected readonly _dialogRef: MatDialogRef<RssDialogComponent>,
@@ -35,6 +37,7 @@ export class RssDialogComponent extends BaseDialogComponent {
                 const mapped = {};
                 for (const key of Object.keys(entry.result)) {
                     const newKey = key.replace(new RegExp('_', 'g'), ' ');
+                    (<any>entry.result[key]).originalKey = key;
                     mapped[newKey] = entry.result[key];
                 }
                 return {
@@ -64,4 +67,15 @@ export class RssDialogComponent extends BaseDialogComponent {
     save(): void {
         this.exportJSON();
     }
+
+    undo() {
+        console.log('Undo');
+    }
+
+    saveEdit(event: string, originalKey: string) {
+        console.log(event, originalKey);
+        /**
+         * https://qa2.iqser.cloud/redaction-gateway-v1/swagger-ui/index.html#/rss-controller/revertOverrides
+         */
+    }
 }
diff --git a/apps/red-ui/src/app/services/files/rss.service.ts b/apps/red-ui/src/app/services/files/rss.service.ts
index 71f639f6d..1d4b14d5e 100644
--- a/apps/red-ui/src/app/services/files/rss.service.ts
+++ b/apps/red-ui/src/app/services/files/rss.service.ts
@@ -15,7 +15,7 @@ export class RssService extends GenericService<void> {
         const queryParams: QueryParam[] = [];
         queryParams.push({ key: 'fileId', value: fileId });
 
-        const rssData$ = this._getOne<IRssData>([dossierId], 'rss', queryParams);
+        const rssData$ = this._getOne<IRssData>([dossierId], 'rss/detailed', queryParams);
         return rssData$.pipe(
             map(data => data.files[0]),
             catchError(() => of({} as IRssEntry)),
diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json
index f4b69417a..ef98789d9 100644
--- a/apps/red-ui/src/assets/config/config.json
+++ b/apps/red-ui/src/assets/config/config.json
@@ -1,7 +1,7 @@
 {
   "ADMIN_CONTACT_NAME": null,
   "ADMIN_CONTACT_URL": null,
-  "API_URL": "https://dev-08.iqser.cloud/redaction-gateway-v1",
+  "API_URL": "https://syngenta-scm.iqser.cloud/redaction-gateway-v1",
   "APP_NAME": "RedactManager",
   "AUTO_READ_TIME": 3,
   "BACKEND_APP_VERSION": "4.4.40",
@@ -11,11 +11,11 @@
   "MAX_RETRIES_ON_SERVER_ERROR": 3,
   "OAUTH_CLIENT_ID": "redaction",
   "OAUTH_IDP_HINT": null,
-  "OAUTH_URL": "https://dev-08.iqser.cloud/auth/realms/redaction",
+  "OAUTH_URL": "https://syngenta-scm.iqser.cloud/auth/realms/redaction",
   "RECENT_PERIOD_IN_HOURS": 24,
   "SELECTION_MODE": "structural",
   "MANUAL_BASE_URL": "https://docs.redactmanager.com/preview",
   "ANNOTATIONS_THRESHOLD": 1000,
-  "THEME": "redact",
-  "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/redact/"
+  "THEME": "scm",
+  "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/scm/"
 }

From 85e5c5623ace044367e6728a03eebfcc4ccb9f1e Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo@devplant.ro>
Date: Tue, 13 Dec 2022 12:51:45 +0200
Subject: [PATCH 2/7] RED-3800 rss editing

---
 .../rss-dialog/rss-dialog.component.html      | 39 ++++++++++++++++---
 .../rss-dialog/rss-dialog.component.scss      | 28 +++++++++++++
 .../rss-dialog/rss-dialog.component.ts        | 18 ++++++++-
 .../src/app/services/files/rss.service.ts     |  2 +-
 apps/red-ui/src/assets/config/config.json     |  8 ++--
 5 files changed, 83 insertions(+), 12 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
index 5e98ca16f..cd30afbae 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
@@ -3,11 +3,40 @@
 
     <hr />
     <div class="dialog-content">
-        <div *ngIf="rssData$ | async as rssEntry">
-            <div *ngFor="let entry of rssEntry.result | keyvalue: originalOrder" class="rss-row">
-                <div class="rss-key">{{ entry.key }}:</div>
-                <div class="rss-value">{{ entry.value }}</div>
-            </div>
+        <div class="table output-data" *ngIf="rssData$ | async as rssEntry">
+            <div class="table-header">Component</div>
+            <div class="table-header">Value</div>
+            <div class="table-header">Transformation</div>
+            <div class="table-header">Annotations</div>
+
+            <ng-container *ngFor="let entry of rssEntry.result | keyvalue: originalOrder">
+                <div class="bold">{{ entry.key }}</div>
+                <div>
+                    <div class="value-content">
+                        <iqser-editable-input
+                            (save)="saveEdit($event, entry.value.originalKey)"
+                            [buttonsType]="iconButtonTypes.dark"
+                            [cancelTooltip]="'rss-dialog.actions.cancel-edit-name' | translate"
+                            [class]="'w-200'"
+                            [editTooltip]="'rss-dialog.actions.edit-name' | translate"
+                            [saveTooltip]="'rss-dialog.actions.save-name' | translate"
+                            [value]="entry.value.value ?? entry.value.originalValue"
+                        ></iqser-editable-input>
+
+                        <div class="actions">
+                            <iqser-circle-button
+                                (action)="undo()"
+                                icon="red:undo"
+                                [showDot]="false"
+                                [tooltip]="'rss-dialog.actions.undo' | translate"
+                                [type]="iconButtonTypes.dark"
+                            ></iqser-circle-button>
+                        </div>
+                    </div>
+                </div>
+                <div>{{ entry.value.transformation }}</div>
+                <div>{{ entry.value.scmAnnotations | json }}</div>
+            </ng-container>
         </div>
     </div>
 
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.scss
index fa01814c2..f741ead8d 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.scss
@@ -19,3 +19,31 @@
 .dialog-content {
     overflow: auto;
 }
+
+.table {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+
+    > div {
+        padding: 8px 10px;
+    }
+
+    .bold {
+        font-weight: 600;
+    }
+
+    .value-content {
+        .value {
+        }
+
+        .actions {
+        }
+    }
+
+    .table-header {
+        margin: 10px 0;
+        border-bottom: 1px solid var(--iqser-separator);
+        background-color: var(--iqser-grey-2);
+        font-weight: 600;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts
index 2b8eb4b21..603c1ddd5 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { BaseDialogComponent } from '@iqser/common-ui';
+import { BaseDialogComponent, IconButtonTypes } from '@iqser/common-ui';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { RssService } from '@services/files/rss.service';
 import { IFile, IRssEntry } from '@red/domain';
@@ -18,9 +18,11 @@ interface RssData {
     styleUrls: ['./rss-dialog.component.scss'],
 })
 export class RssDialogComponent extends BaseDialogComponent {
+    readonly iconButtonTypes = IconButtonTypes;
+
     rssData$: Observable<IRssEntry>;
 
-    originalOrder = (a: KeyValue<string, string>, b: KeyValue<string, string>): number => 0;
+    originalOrder = (a: KeyValue<string, any>, b: KeyValue<string, any>): number => 0;
 
     constructor(
         protected readonly _dialogRef: MatDialogRef<RssDialogComponent>,
@@ -35,6 +37,7 @@ export class RssDialogComponent extends BaseDialogComponent {
                 const mapped = {};
                 for (const key of Object.keys(entry.result)) {
                     const newKey = key.replace(new RegExp('_', 'g'), ' ');
+                    (<any>entry.result[key]).originalKey = key;
                     mapped[newKey] = entry.result[key];
                 }
                 return {
@@ -64,4 +67,15 @@ export class RssDialogComponent extends BaseDialogComponent {
     save(): void {
         this.exportJSON();
     }
+
+    undo() {
+        console.log('Undo');
+    }
+
+    saveEdit(event: string, originalKey: string) {
+        console.log(event, originalKey);
+        /**
+         * https://qa2.iqser.cloud/redaction-gateway-v1/swagger-ui/index.html#/rss-controller/revertOverrides
+         */
+    }
 }
diff --git a/apps/red-ui/src/app/services/files/rss.service.ts b/apps/red-ui/src/app/services/files/rss.service.ts
index 71f639f6d..1d4b14d5e 100644
--- a/apps/red-ui/src/app/services/files/rss.service.ts
+++ b/apps/red-ui/src/app/services/files/rss.service.ts
@@ -15,7 +15,7 @@ export class RssService extends GenericService<void> {
         const queryParams: QueryParam[] = [];
         queryParams.push({ key: 'fileId', value: fileId });
 
-        const rssData$ = this._getOne<IRssData>([dossierId], 'rss', queryParams);
+        const rssData$ = this._getOne<IRssData>([dossierId], 'rss/detailed', queryParams);
         return rssData$.pipe(
             map(data => data.files[0]),
             catchError(() => of({} as IRssEntry)),
diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json
index f4b69417a..ef98789d9 100644
--- a/apps/red-ui/src/assets/config/config.json
+++ b/apps/red-ui/src/assets/config/config.json
@@ -1,7 +1,7 @@
 {
   "ADMIN_CONTACT_NAME": null,
   "ADMIN_CONTACT_URL": null,
-  "API_URL": "https://dev-08.iqser.cloud/redaction-gateway-v1",
+  "API_URL": "https://syngenta-scm.iqser.cloud/redaction-gateway-v1",
   "APP_NAME": "RedactManager",
   "AUTO_READ_TIME": 3,
   "BACKEND_APP_VERSION": "4.4.40",
@@ -11,11 +11,11 @@
   "MAX_RETRIES_ON_SERVER_ERROR": 3,
   "OAUTH_CLIENT_ID": "redaction",
   "OAUTH_IDP_HINT": null,
-  "OAUTH_URL": "https://dev-08.iqser.cloud/auth/realms/redaction",
+  "OAUTH_URL": "https://syngenta-scm.iqser.cloud/auth/realms/redaction",
   "RECENT_PERIOD_IN_HOURS": 24,
   "SELECTION_MODE": "structural",
   "MANUAL_BASE_URL": "https://docs.redactmanager.com/preview",
   "ANNOTATIONS_THRESHOLD": 1000,
-  "THEME": "redact",
-  "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/redact/"
+  "THEME": "scm",
+  "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/scm/"
 }

From 8c4d78f3e23d131b0b425edcbb8bc6f2bd2846f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 13 Dec 2022 13:28:39 +0200
Subject: [PATCH 3/7] RED-3800: RSS editing

---
 .../rss-dialog/rss-dialog.component.html      | 45 ++++++------
 .../rss-dialog/rss-dialog.component.ts        | 69 +++++++++++--------
 .../src/app/services/files/rss.service.ts     | 14 ++++
 apps/red-ui/src/assets/i18n/redact/de.json    |  6 +-
 apps/red-ui/src/assets/i18n/redact/en.json    |  6 +-
 apps/red-ui/src/assets/i18n/scm/de.json       |  6 +-
 apps/red-ui/src/assets/i18n/scm/en.json       |  6 +-
 libs/common-ui                                |  2 +-
 8 files changed, 99 insertions(+), 55 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
index cd30afbae..60ee41f38 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
@@ -1,9 +1,9 @@
 <section class="dialog">
-    <div translate="rss-dialog.title" class="dialog-header heading-l"></div>
+    <div class="dialog-header heading-l" translate="rss-dialog.title"></div>
 
     <hr />
     <div class="dialog-content">
-        <div class="table output-data" *ngIf="rssData$ | async as rssEntry">
+        <div *ngIf="rssData$ | async as rssEntry" class="table output-data">
             <div class="table-header">Component</div>
             <div class="table-header">Value</div>
             <div class="table-header">Transformation</div>
@@ -12,27 +12,26 @@
             <ng-container *ngFor="let entry of rssEntry.result | keyvalue: originalOrder">
                 <div class="bold">{{ entry.key }}</div>
                 <div>
-                    <div class="value-content">
-                        <iqser-editable-input
-                            (save)="saveEdit($event, entry.value.originalKey)"
-                            [buttonsType]="iconButtonTypes.dark"
-                            [cancelTooltip]="'rss-dialog.actions.cancel-edit-name' | translate"
-                            [class]="'w-200'"
-                            [editTooltip]="'rss-dialog.actions.edit-name' | translate"
-                            [saveTooltip]="'rss-dialog.actions.save-name' | translate"
-                            [value]="entry.value.value ?? entry.value.originalValue"
-                        ></iqser-editable-input>
-
-                        <div class="actions">
+                    <iqser-editable-input
+                        (save)="saveEdit($event, entry)"
+                        [buttonsType]="iconButtonTypes.dark"
+                        [cancelTooltip]="'rss-dialog.actions.cancel-edit' | translate"
+                        [editTooltip]="'rss-dialog.actions.edit' | translate"
+                        [saveTooltip]="'rss-dialog.actions.save' | translate"
+                        [value]="entry.value.value ?? entry.value.originalValue"
+                    >
+                        <ng-container slot="editing">
                             <iqser-circle-button
-                                (action)="undo()"
-                                icon="red:undo"
-                                [showDot]="false"
+                                (action)="undo(entry)"
+                                *ngIf="entry.value.value"
+                                [showDot]="true"
                                 [tooltip]="'rss-dialog.actions.undo' | translate"
                                 [type]="iconButtonTypes.dark"
+                                class="ml-2"
+                                icon="red:undo"
                             ></iqser-circle-button>
-                        </div>
-                    </div>
+                        </ng-container>
+                    </iqser-editable-input>
                 </div>
                 <div>{{ entry.value.transformation }}</div>
                 <div>{{ entry.value.scmAnnotations | json }}</div>
@@ -41,17 +40,17 @@
     </div>
 
     <div class="dialog-actions">
-        <button color="primary" mat-flat-button type="submit" (click)="exportJSON()">
+        <button (click)="exportJSON()" color="primary" mat-flat-button type="submit">
             {{ 'rss-dialog.actions.export-json' | translate }}
         </button>
-        <button color="primary" mat-flat-button type="button" (click)="exportXML()">
+        <button (click)="exportXML()" color="primary" mat-flat-button type="button">
             {{ 'rss-dialog.actions.export-xml' | translate }}
         </button>
-        <button color="primary" mat-flat-button type="button" (click)="exportAllInDossier()" *ngIf="userPreferences.areDevFeaturesEnabled">
+        <button (click)="exportAllInDossier()" *ngIf="userPreferences.areDevFeaturesEnabled" color="primary" mat-flat-button type="button">
             {{ 'Export All' }}
         </button>
         <div class="all-caps-label cancel" mat-dialog-close translate="rss-dialog.actions.close"></div>
     </div>
 
-    <iqser-circle-button class="dialog-close" icon="iqser:close" (action)="close()"></iqser-circle-button>
+    <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts
index 603c1ddd5..62a8119ab 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts
@@ -1,9 +1,9 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { BaseDialogComponent, IconButtonTypes } from '@iqser/common-ui';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { RssService } from '@services/files/rss.service';
 import { IFile, IRssEntry } from '@red/domain';
-import { firstValueFrom, Observable } from 'rxjs';
+import { BehaviorSubject, firstValueFrom } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { FilesMapService } from '@services/files/files-map.service';
 import { UserPreferenceService } from '@users/user-preference.service';
@@ -17,12 +17,10 @@ interface RssData {
     templateUrl: './rss-dialog.component.html',
     styleUrls: ['./rss-dialog.component.scss'],
 })
-export class RssDialogComponent extends BaseDialogComponent {
+export class RssDialogComponent extends BaseDialogComponent implements OnInit {
     readonly iconButtonTypes = IconButtonTypes;
 
-    rssData$: Observable<IRssEntry>;
-
-    originalOrder = (a: KeyValue<string, any>, b: KeyValue<string, any>): number => 0;
+    rssData$ = new BehaviorSubject<IRssEntry>(null);
 
     constructor(
         protected readonly _dialogRef: MatDialogRef<RssDialogComponent>,
@@ -32,22 +30,14 @@ export class RssDialogComponent extends BaseDialogComponent {
         @Inject(MAT_DIALOG_DATA) readonly data: RssData,
     ) {
         super(_dialogRef);
-        this.rssData$ = this._rssService.getRSSData(this.data.file.dossierId, this.data.file.fileId).pipe(
-            map(entry => {
-                const mapped = {};
-                for (const key of Object.keys(entry.result)) {
-                    const newKey = key.replace(new RegExp('_', 'g'), ' ');
-                    (<any>entry.result[key]).originalKey = key;
-                    mapped[newKey] = entry.result[key];
-                }
-                return {
-                    filaName: entry.filaName,
-                    result: mapped,
-                };
-            }),
-        );
     }
 
+    async ngOnInit(): Promise<void> {
+        await this.#loadData();
+    }
+
+    originalOrder = (a: KeyValue<string, any>, b: KeyValue<string, any>): number => 0;
+
     exportJSON() {
         this._rssService.exportJSON(this.data.file.dossierId, this.data.file.fileId, this.data.file.filename).subscribe();
     }
@@ -68,14 +58,39 @@ export class RssDialogComponent extends BaseDialogComponent {
         this.exportJSON();
     }
 
-    undo() {
-        console.log('Undo');
+    async undo(entry: KeyValue<string, any>) {
+        this._loadingService.start();
+        await firstValueFrom(this._rssService.revertOverride(this.data.file.dossierId, this.data.file.fileId, [entry.value.originalKey]));
+        await this.#loadData();
     }
 
-    saveEdit(event: string, originalKey: string) {
-        console.log(event, originalKey);
-        /**
-         * https://qa2.iqser.cloud/redaction-gateway-v1/swagger-ui/index.html#/rss-controller/revertOverrides
-         */
+    async saveEdit(event: string, entry: KeyValue<string, any>) {
+        this._loadingService.start();
+        await firstValueFrom(
+            this._rssService.override(this.data.file.dossierId, this.data.file.fileId, { [entry.value.originalKey]: event }),
+        );
+        await this.#loadData();
+    }
+
+    async #loadData(): Promise<void> {
+        this._loadingService.start();
+        const rssData = await firstValueFrom(
+            this._rssService.getRSSData(this.data.file.dossierId, this.data.file.fileId).pipe(
+                map(entry => {
+                    const mapped = {};
+                    for (const key of Object.keys(entry.result)) {
+                        const newKey = key.replace(new RegExp('_', 'g'), ' ');
+                        (<any>entry.result[key]).originalKey = key;
+                        mapped[newKey] = entry.result[key];
+                    }
+                    return {
+                        filaName: entry.filaName,
+                        result: mapped,
+                    };
+                }),
+            ),
+        );
+        this.rssData$.next(rssData);
+        this._loadingService.stop();
     }
 }
diff --git a/apps/red-ui/src/app/services/files/rss.service.ts b/apps/red-ui/src/app/services/files/rss.service.ts
index 1d4b14d5e..25f60ea1d 100644
--- a/apps/red-ui/src/app/services/files/rss.service.ts
+++ b/apps/red-ui/src/app/services/files/rss.service.ts
@@ -40,6 +40,20 @@ export class RssService extends GenericService<void> {
         });
     }
 
+    @Validate()
+    override(
+        @RequiredParam() dossierId: string,
+        @RequiredParam() fileId: string,
+        @RequiredParam() componentOverrides: Record<string, string>,
+    ) {
+        return this._post({ componentOverrides }, `rss/override/${dossierId}/${fileId}`);
+    }
+
+    @Validate()
+    revertOverride(@RequiredParam() dossierId: string, @RequiredParam() fileId: string, @RequiredParam() components: string[]) {
+        return this._post({ components }, `rss/override/revert/${dossierId}/${fileId}`);
+    }
+
     exportJSON(dossierId: string, fileId: string, name: string) {
         return this.getRSSData(dossierId, fileId).pipe(
             tap(data => {
diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json
index 6fbb77a45..1045a6ad2 100644
--- a/apps/red-ui/src/assets/i18n/redact/de.json
+++ b/apps/red-ui/src/assets/i18n/redact/de.json
@@ -1953,9 +1953,13 @@
   },
   "rss-dialog": {
     "actions": {
+      "cancel-edit": "",
       "close": "",
+      "edit": "",
       "export-json": "",
-      "export-xml": ""
+      "export-xml": "",
+      "save": "",
+      "undo": ""
     },
     "title": ""
   },
diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json
index c08cefd6c..4ba768210 100644
--- a/apps/red-ui/src/assets/i18n/redact/en.json
+++ b/apps/red-ui/src/assets/i18n/redact/en.json
@@ -1953,9 +1953,13 @@
   },
   "rss-dialog": {
     "actions": {
+      "cancel-edit": "Cancel",
       "close": "Close",
+      "edit": "Edit",
       "export-json": "Export JSON",
-      "export-xml": "Export XML"
+      "export-xml": "Export XML",
+      "save": "Save",
+      "undo": "Undo"
     },
     "title": "Structured Component Management"
   },
diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json
index 7cf98b4e0..2e29848a1 100644
--- a/apps/red-ui/src/assets/i18n/scm/de.json
+++ b/apps/red-ui/src/assets/i18n/scm/de.json
@@ -1953,9 +1953,13 @@
   },
   "rss-dialog": {
     "actions": {
+      "cancel-edit": "",
       "close": "",
+      "edit": "",
       "export-json": "",
-      "export-xml": ""
+      "export-xml": "",
+      "save": "",
+      "undo": ""
     },
     "title": ""
   },
diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json
index 097c86b11..e4c0f2681 100644
--- a/apps/red-ui/src/assets/i18n/scm/en.json
+++ b/apps/red-ui/src/assets/i18n/scm/en.json
@@ -1953,9 +1953,13 @@
   },
   "rss-dialog": {
     "actions": {
+      "cancel-edit": "Cancel",
       "close": "Close",
+      "edit": "Edit",
       "export-json": "Export JSON",
-      "export-xml": "Export XML"
+      "export-xml": "Export XML",
+      "save": "Save",
+      "undo": "Undo"
     },
     "title": "Structured Component Management"
   },
diff --git a/libs/common-ui b/libs/common-ui
index 5f9c754ab..b58f1ca2f 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 5f9c754abf0fb4fcc0606d811a66c5bbb88d164a
+Subproject commit b58f1ca2fed8e8ddf2834c0fd15e48d00b6a1329

From b79469717bff6e19f4774f9acca98af705ab7e3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 13 Dec 2022 13:39:24 +0200
Subject: [PATCH 4/7] RED-3800: RSS editing

---
 .../dialogs/rss-dialog/rss-dialog.component.html     |  2 +-
 .../dialogs/rss-dialog/rss-dialog.component.ts       | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
index 60ee41f38..3f4f19e2c 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
@@ -34,7 +34,7 @@
                     </iqser-editable-input>
                 </div>
                 <div>{{ entry.value.transformation }}</div>
-                <div>{{ entry.value.scmAnnotations | json }}</div>
+                <div>{{ entry.value.scmAnnotations || '-' }}</div>
             </ng-container>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts
index 62a8119ab..944c9e51e 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts
@@ -83,6 +83,18 @@ export class RssDialogComponent extends BaseDialogComponent implements OnInit {
                         (<any>entry.result[key]).originalKey = key;
                         mapped[newKey] = entry.result[key];
                     }
+                    console.log({ mapped });
+                    for (const key of Object.keys(mapped)) {
+                        if (mapped[key].scmAnnotations) {
+                            mapped[key].scmAnnotations = mapped[key].scmAnnotations
+                                .map(annotation =>
+                                    Object.entries(annotation)
+                                        .map(([k, value]) => `${k[0].toUpperCase()}${k.slice(1)}: ${value}`)
+                                        .join(', '),
+                                )
+                                .join('; ');
+                        }
+                    }
                     return {
                         filaName: entry.filaName,
                         result: mapped,

From 1f67ce64e3da96fef4379054f5fe0e3a312ce429 Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo@devplant.ro>
Date: Tue, 13 Dec 2022 13:40:31 +0200
Subject: [PATCH 5/7] RED-3800 rss editing

---
 .../manual-annotation-dialog.component.html   |  4 +--
 .../manual-annotation-dialog.component.ts     | 25 ++++++++++++++++---
 .../services/pdf-proxy.service.ts             | 16 ++++++------
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
index 48aef3433..241444383 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
@@ -46,9 +46,7 @@
                         [value]="dictionary.type"
                         matTooltipPosition="after"
                     >
-                        <span>
-                            {{ dictionary.label }}
-                        </span>
+                        <span> {{ dictionary.label }} {{ dictionary.hasDictionary }} </span>
                     </mat-option>
                 </mat-select>
             </div>
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
index 7f3292dc0..3f21c6c0e 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
@@ -6,10 +6,11 @@ import { JustificationsService } from '@services/entity-services/justifications.
 import { Dictionary, Dossier, File, IAddRedactionRequest, SuperTypes } from '@red/domain';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { DictionaryService } from '@services/entity-services/dictionary.service';
-import { BaseDialogComponent, CircleButtonTypes } from '@iqser/common-ui';
+import { BaseDialogComponent, CircleButtonTypes, IqserPermissionsService } from '@iqser/common-ui';
 import { firstValueFrom } from 'rxjs';
 import { ManualRedactionService } from '../../services/manual-redaction.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { ROLES } from '@users/roles';
 
 export interface LegalBasisOption {
     label?: string;
@@ -35,6 +36,7 @@ export class ManualAnnotationDialogComponent extends BaseDialogComponent impleme
     private readonly _dossier: Dossier;
 
     constructor(
+        private readonly _iqserPermissionsService: IqserPermissionsService,
         private readonly _justificationsService: JustificationsService,
         private readonly _manualRedactionService: ManualRedactionService,
         activeDossiersService: ActiveDossiersService,
@@ -87,6 +89,9 @@ export class ManualAnnotationDialogComponent extends BaseDialogComponent impleme
         }));
 
         this.legalOptions.sort((a, b) => a.label.localeCompare(b.label));
+
+        this._selectReason();
+
         if (!this.isRectangle) {
             this._formatSelectedTextValue();
         }
@@ -165,9 +170,15 @@ export class ManualAnnotationDialogComponent extends BaseDialogComponent impleme
             addRedactionRequest.reason = legalOption.description;
             addRedactionRequest.legalBasis = legalOption.legalBasis;
         }
-        // todo fix this in backend
-        addRedactionRequest.addToDictionary = this.isDictionaryRequest && addRedactionRequest.type !== 'dossier_redaction';
-        addRedactionRequest.addToDossierDictionary = this.isDictionaryRequest && addRedactionRequest.type === 'dossier_redaction';
+
+        if (this._iqserPermissionsService.has(ROLES.getRss)) {
+            const selectedType = this.possibleDictionaries.find(d => d.type === addRedactionRequest.type);
+            console.log(selectedType.hasDictionary);
+            addRedactionRequest.addToDictionary = selectedType.hasDictionary;
+        } else {
+            addRedactionRequest.addToDictionary = this.isDictionaryRequest && addRedactionRequest.type !== 'dossier_redaction';
+            addRedactionRequest.addToDossierDictionary = this.isDictionaryRequest && addRedactionRequest.type === 'dossier_redaction';
+        }
 
         if (!addRedactionRequest.reason) {
             addRedactionRequest.reason = 'Dictionary Request';
@@ -179,4 +190,10 @@ export class ManualAnnotationDialogComponent extends BaseDialogComponent impleme
             ? this.form.get('classification').value
             : this.form.get('selectedText').value;
     }
+
+    private _selectReason() {
+        if (this.legalOptions.length === 1) {
+            this.form.get('reason').setValue(this.legalOptions[0]);
+        }
+    }
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts b/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts
index f3fa8143c..8c2391e64 100644
--- a/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts
+++ b/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts
@@ -253,13 +253,15 @@ export class PdfProxyService {
                 onClick: () => this._addManualRedactionOfType(ManualRedactionEntryTypes.REDACTION),
             });
 
-            popups.push({
-                type: 'actionButton',
-                dataElement: TextPopups.ADD_DICTIONARY,
-                img: this.#addDictIcon,
-                title: this.#getTitle(ManualRedactionEntryTypes.DICTIONARY),
-                onClick: () => this._addManualRedactionOfType(ManualRedactionEntryTypes.DICTIONARY),
-            });
+            if (!this._iqserPermissionsService.has(ROLES.getRss)) {
+                popups.push({
+                    type: 'actionButton',
+                    dataElement: TextPopups.ADD_DICTIONARY,
+                    img: this.#addDictIcon,
+                    title: this.#getTitle(ManualRedactionEntryTypes.DICTIONARY),
+                    onClick: () => this._addManualRedactionOfType(ManualRedactionEntryTypes.DICTIONARY),
+                });
+            }
         }
 
         this._pdf.configureTextPopups(popups);

From b5520473da5d60633acb80873121d258d3a227d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 13 Dec 2022 13:57:59 +0200
Subject: [PATCH 6/7] RED-3800: RSS editing

---
 .../rss-dialog/rss-dialog.component.html        | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
index 7c22adccb..78dfef15f 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
@@ -43,13 +43,16 @@
                     </iqser-editable-input>
                 </div>
                 <div>{{ entry.value.transformation }}</div>
-                <div class="annotation-grid">
-                    <ng-container *ngFor="let annotation of entry.value.scmAnnotations">
-                        <div>{{ annotation.type }}</div>
-                        <div>{{ annotation.ruleNumber }}</div>
-                        <div>{{ annotation.pages.join(',') }}</div>
-                        <div>{{ annotation.reason }}</div>
-                    </ng-container>
+                <!--                <div>{{ entry.value.scmAnnotations || '-' }}</div>-->
+                <div>
+                    <ul *ngIf="entry.value.scmAnnotations; else noAnnotations" class="pl-0">
+                        <li *ngFor="let annotation of entry.value.scmAnnotations" class="mb-8">
+                            <strong>Type: </strong> {{ annotation.type }}, <strong>Rule: </strong> {{ annotation.ruleNumber }},
+                            <strong>Pages: </strong>{{ annotation.pages.join(',') }}, <strong>Reason: </strong> {{ annotation.reason }}
+                        </li>
+                    </ul>
+
+                    <ng-template #noAnnotations>-</ng-template>
                 </div>
             </ng-container>
         </div>

From e7eb80548d2da66bf52c299dc7a5eb9ecd50940d Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo@devplant.ro>
Date: Tue, 13 Dec 2022 15:24:23 +0200
Subject: [PATCH 7/7] RED-3800 rss editing

---
 .../annotation-card.component.html            |  2 +-
 .../annotation-card.component.ts              |  5 ++-
 .../manual-annotation-dialog.component.html   |  6 ++--
 .../manual-annotation-dialog.component.ts     |  5 +--
 .../rss-dialog/rss-dialog.component.html      | 31 ++++++++++---------
 .../rss-dialog/rss-dialog.component.scss      | 11 +++++++
 apps/red-ui/src/assets/i18n/scm/en.json       |  3 +-
 7 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.html b/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.html
index a9c7db561..5fbccad00 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.html
@@ -21,7 +21,7 @@
             </strong>
             {{ annotation.entity.label }}
         </div>
-        <div *ngIf="annotation.shortContent && !annotation.isHint">
+        <div *ngIf="annotation.shortContent && !annotation.isHint && !iqserPermissionsService.has(roles.getRss)">
             <strong><span translate="content"></span>: </strong>{{ annotation.shortContent }}
         </div>
         <div *ngIf="annotation.isEarmark">
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.ts
index 24bc532c4..b085567d5 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.ts
@@ -2,6 +2,8 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { MultiSelectService } from '../../services/multi-select.service';
 import { annotationTypesTranslations } from '@translations/annotation-types-translations';
+import { ROLES } from '@users/roles';
+import { IqserPermissionsService } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-annotation-card',
@@ -10,9 +12,10 @@ import { annotationTypesTranslations } from '@translations/annotation-types-tran
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AnnotationCardComponent {
+    readonly roles = ROLES;
     annotationTypesTranslations = annotationTypesTranslations;
     @Input() annotation: AnnotationWrapper;
     @Input() isSelected = false;
 
-    constructor(readonly multiSelectService: MultiSelectService) {}
+    constructor(readonly iqserPermissionsService: IqserPermissionsService, readonly multiSelectService: MultiSelectService) {}
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
index 241444383..c5a49d8a1 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
@@ -46,12 +46,12 @@
                         [value]="dictionary.type"
                         matTooltipPosition="after"
                     >
-                        <span> {{ dictionary.label }} {{ dictionary.hasDictionary }} </span>
+                        <span> {{ dictionary.label }} </span>
                     </mat-option>
                 </mat-select>
             </div>
 
-            <div *ngIf="!isDictionaryRequest" class="iqser-input-group required w-450">
+            <div *ngIf="!isDictionaryRequest && !iqserPermissionsService.has(roles.getRss)" class="iqser-input-group required w-450">
                 <label translate="manual-annotation.dialog.content.reason"></label>
                 <mat-select
                     [placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate"
@@ -69,7 +69,7 @@
                 </mat-select>
             </div>
 
-            <div *ngIf="!isDictionaryRequest" class="iqser-input-group w-450">
+            <div *ngIf="!isDictionaryRequest && !iqserPermissionsService.has(roles.getRss)" class="iqser-input-group w-450">
                 <label translate="manual-annotation.dialog.content.legalBasis"></label>
                 <input [value]="form.get('reason').value?.legalBasis" disabled type="text" />
             </div>
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
index 3f21c6c0e..6f158fd0c 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
@@ -23,6 +23,7 @@ export interface LegalBasisOption {
     styleUrls: ['./manual-annotation-dialog.component.scss'],
 })
 export class ManualAnnotationDialogComponent extends BaseDialogComponent implements OnInit {
+    readonly roles = ROLES;
     readonly circleButtonTypes = CircleButtonTypes;
     isDictionaryRequest: boolean;
     isFalsePositiveRequest: boolean;
@@ -36,7 +37,7 @@ export class ManualAnnotationDialogComponent extends BaseDialogComponent impleme
     private readonly _dossier: Dossier;
 
     constructor(
-        private readonly _iqserPermissionsService: IqserPermissionsService,
+        readonly iqserPermissionsService: IqserPermissionsService,
         private readonly _justificationsService: JustificationsService,
         private readonly _manualRedactionService: ManualRedactionService,
         activeDossiersService: ActiveDossiersService,
@@ -171,7 +172,7 @@ export class ManualAnnotationDialogComponent extends BaseDialogComponent impleme
             addRedactionRequest.legalBasis = legalOption.legalBasis;
         }
 
-        if (this._iqserPermissionsService.has(ROLES.getRss)) {
+        if (this.iqserPermissionsService.has(ROLES.getRss)) {
             const selectedType = this.possibleDictionaries.find(d => d.type === addRedactionRequest.type);
             console.log(selectedType.hasDictionary);
             addRedactionRequest.addToDictionary = selectedType.hasDictionary;
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
index 78dfef15f..88ec0641b 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
@@ -7,16 +7,7 @@
             <div class="table-header">Component</div>
             <div class="table-header">Value</div>
             <div class="table-header">Transformation</div>
-            <div class="table-header">
-                Annotations
-                <hr />
-                <div class="annotation-grid">
-                    <div>Type</div>
-                    <div>Rule</div>
-                    <div>Pages</div>
-                    <div>Reason</div>
-                </div>
-            </div>
+            <div class="table-header">Annotations</div>
 
             <ng-container *ngFor="let entry of rssEntry.result | keyvalue: originalOrder">
                 <div class="bold">{{ entry.key }}</div>
@@ -34,7 +25,7 @@
                                 (action)="undo(entry)"
                                 *ngIf="entry.value.value"
                                 [showDot]="true"
-                                [tooltip]="'rss-dialog.actions.undo' | translate"
+                                [tooltip]="'rss-dialog.actions.undo' | translate: { value: entry.value.originalValue }"
                                 [type]="iconButtonTypes.dark"
                                 class="ml-2"
                                 icon="red:undo"
@@ -46,10 +37,20 @@
                 <!--                <div>{{ entry.value.scmAnnotations || '-' }}</div>-->
                 <div>
                     <ul *ngIf="entry.value.scmAnnotations; else noAnnotations" class="pl-0">
-                        <li *ngFor="let annotation of entry.value.scmAnnotations" class="mb-8">
-                            <strong>Type: </strong> {{ annotation.type }}, <strong>Rule: </strong> {{ annotation.ruleNumber }},
-                            <strong>Pages: </strong>{{ annotation.pages.join(',') }}, <strong>Reason: </strong> {{ annotation.reason }}
-                        </li>
+                        <li
+                            *ngFor="let annotation of entry.value.scmAnnotations"
+                            class="mb-8"
+                            [innerHTML]="
+                                'rss-dialog.annotations'
+                                    | translate
+                                        : {
+                                              ruleNumber: annotation.ruleNumber,
+                                              pageCount: annotation.pages.length,
+                                              pages: annotation.pages.join(','),
+                                              type: annotation.type
+                                          }
+                            "
+                        ></li>
                     </ul>
 
                     <ng-template #noAnnotations>-</ng-template>
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.scss
index 60782ce67..cf04f8aa6 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.scss
@@ -52,3 +52,14 @@
     display: grid;
     grid-template-columns: 3fr 1fr 1fr 5fr;
 }
+
+ul {
+    margin: 0;
+}
+
+.output-data > div:nth-child(8n + 9),
+.output-data > div:nth-child(8n + 10),
+.output-data > div:nth-child(8n + 11),
+.output-data > div:nth-child(8n + 12) {
+    background: var(--iqser-grey-8);
+}
diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json
index e4c0f2681..634c5d846 100644
--- a/apps/red-ui/src/assets/i18n/scm/en.json
+++ b/apps/red-ui/src/assets/i18n/scm/en.json
@@ -1959,8 +1959,9 @@
       "export-json": "Export JSON",
       "export-xml": "Export XML",
       "save": "Save",
-      "undo": "Undo"
+      "undo": "Undo to: {value}"
     },
+    "annotations": "<strong>{type}</strong> found on {pageCount, plural, one{page} other{pages}} {pages} by rule #{ruleNumber}",
     "title": "Structured Component Management"
   },
   "rules-screen": {