From c5f072f6b6073ac07e8d999c754e612225cd81a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina.teudan.ext@knecon.com>
Date: Thu, 26 Sep 2024 15:11:00 +0300
Subject: [PATCH] RED-9757: Working find panel toggle

---
 .../edit-dossier-dictionary.component.html    | 49 ++++---------------
 .../edit-dossier-dictionary.component.scss    | 33 ++-----------
 .../dictionary-manager.component.html         |  4 +-
 .../dictionary-manager.component.ts           | 14 +++++-
 .../components/editor/editor.component.ts     | 23 +++++++--
 5 files changed, 50 insertions(+), 73 deletions(-)

diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.html b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.html
index 7d5b0684e..e3d988163 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.html
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.html
@@ -33,44 +33,15 @@
         </div>
     </div>
     <div class="entries">
-        <div class="header-wrapper">
-            <div class="header-left">
-                <div class="heading">
-                    <div class="flex-align-items-center">
-                        {{ selectedDictionary?.label }}
-                        <iqser-circle-button
-                            (action)="openEditDictionaryModal()"
-                            *ngIf="selectedDictionary.dossierDictionaryOnly && selectedDictionary.hasDictionary"
-                            [size]="20"
-                            [tooltip]="'edit-dossier-dialog.dictionary.edit-button-tooltip' | translate"
-                            class="p-left-8"
-                            icon="iqser:edit"
-                        ></iqser-circle-button>
-                    </div>
-                    <div class="small-label stats-subtitle">
-                        <div>
-                            <mat-icon svgIcon="red:entries"></mat-icon>
-                            <ng-container *ngIf="activeEntryType === entryTypes.ENTRY || selectedDictionary.hint">
-                                {{
-                                    'edit-dossier-dialog.dictionary.entries'
-                                        | translate: { length: entriesToDisplay.length, hint: selectedDictionary.hint }
-                                }}
-                            </ng-container>
-                            <ng-container *ngIf="activeEntryType === entryTypes.FALSE_POSITIVE && !selectedDictionary.hint">
-                                {{
-                                    'edit-dossier-dialog.dictionary.false-positive-entries' | translate: { length: entriesToDisplay.length }
-                                }}
-                            </ng-container>
-                            <ng-container *ngIf="activeEntryType === entryTypes.FALSE_RECOMMENDATION && !selectedDictionary.hint">
-                                {{
-                                    'edit-dossier-dialog.dictionary.false-recommendation-entries'
-                                        | translate: { length: entriesToDisplay.length }
-                                }}
-                            </ng-container>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <div class="heading flex-align-items-center">
+            {{ selectedDictionary?.label }}
+            <iqser-circle-button
+                (action)="openEditDictionaryModal()"
+                [size]="20"
+                [tooltip]="'edit-dossier-dialog.dictionary.edit-button-tooltip' | translate"
+                class="p-left-8"
+                icon="iqser:edit"
+            ></iqser-circle-button>
         </div>
 
         <redaction-dictionary-manager
@@ -85,7 +56,7 @@
             [withFloatingActions]="false"
         >
             <ng-container slot="typeSwitch">
-                <div *ngIf="!selectedDictionary.hint" [class.read-only]="!canEdit" class="header-right flex">
+                <div *ngIf="!selectedDictionary.hint" class="flex">
                     <iqser-icon-button
                         (click)="selectEntryType(entryTypes.ENTRY)"
                         [active]="activeEntryType === entryTypes.ENTRY"
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.scss b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.scss
index 01fac8bdf..62aca620b 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.scss
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.scss
@@ -11,13 +11,14 @@
 
     .dictionaries {
         border-right: 1px solid var(--iqser-separator);
-        overflow-y: scroll;
+        overflow-y: auto;
+        width: 200px;
         @include common-mixins.scroll-bar;
 
         .dictionary {
             height: 40px;
             padding: 15px;
-            border: 1px solid var(--iqser-separator);
+            border-bottom: 1px solid var(--iqser-separator);
             display: flex;
             gap: 10px;
             cursor: pointer;
@@ -43,33 +44,7 @@
     .entries {
         flex-grow: 1;
         padding: 16px 0 16px 12px;
-
-        .header-wrapper {
-            display: flex;
-            justify-content: space-between;
-
-            .header-left {
-                display: flex;
-
-                .iqser-input-group {
-                    margin-left: 24px;
-                }
-            }
-
-            .read-only {
-                padding-right: 100px;
-            }
-
-            .display-name {
-                display: flex;
-                align-items: center;
-                margin-bottom: 24px;
-
-                > div {
-                    font-weight: 600;
-                }
-            }
-        }
+        overflow: hidden;
     }
 }
 
diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
index 4557166e6..c1429100c 100644
--- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
@@ -13,7 +13,8 @@
             ></iqser-circle-button>
 
             <iqser-circle-button
-                (action)="editor.openFindPanel()"
+                (action)="editor.toggleFindPanel()"
+                [attr.aria-expanded]="_isSearchOpen()"
                 [matTooltip]="'dictionary-overview.search' | translate"
                 class="ml-8"
                 icon="iqser:search"
@@ -92,6 +93,7 @@
 
     <div class="editor-container">
         <redaction-editor
+            [(isSearchOpen)]="_isSearchOpen"
             [canEdit]="canEdit"
             [diffEditorText]="diffEditorText"
             [initialEntries]="initialEntries"
diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
index 5145a99bc..9996a0681 100644
--- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
@@ -1,4 +1,15 @@
-import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import {
+    ChangeDetectorRef,
+    Component,
+    EventEmitter,
+    Input,
+    OnChanges,
+    OnInit,
+    Output,
+    signal,
+    SimpleChanges,
+    ViewChild,
+} from '@angular/core';
 import { CircleButtonComponent, IconButtonComponent, IconButtonTypes, LoadingService } from '@iqser/common-ui';
 import { Dictionary, DictionaryEntryType, DictionaryEntryTypes, DictionaryType, Dossier, DossierTemplate, IDictionary } from '@red/domain';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
@@ -77,6 +88,7 @@ export class DictionaryManagerComponent implements OnChanges, OnInit {
     selectDossierTemplate = { name: _('dictionary-overview.compare.select-dossier-template') } as DossierTemplate;
     compare = false;
     dictionaries: List<Dictionary> = this.#dictionaries;
+    protected readonly _isSearchOpen = signal(false);
     protected initialDossierTemplateId: string;
     readonly #currentTab = window.location.href.split('/').pop();
     #dossierTemplate = this.dossierTemplatesService.all[0];
diff --git a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
index 45a452d89..e2538f236 100644
--- a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Component, Input, model, OnChanges, OnInit, SimpleChanges, untracked } from '@angular/core';
 import { LoadingService } from '@iqser/common-ui';
 import { EditorThemeService } from '@services/editor-theme.service';
 import { Subject } from 'rxjs';
@@ -39,6 +39,7 @@ export class EditorComponent implements OnInit, OnChanges {
     @Input() diffEditorText: string;
     @Input() @OnChange<List, EditorComponent>('revert') initialEntries: List;
     @Input() canEdit = false;
+    readonly isSearchOpen = model.required<boolean>();
     /**
      * Used as [modified] input on diff editor
      * Shouldn't be updated when editing in diff editor.
@@ -84,9 +85,14 @@ export class EditorComponent implements OnInit, OnChanges {
         return this.currentEntries.length;
     }
 
-    async openFindPanel(): Promise<void> {
+    async toggleFindPanel(): Promise<void> {
+        const isFindPanelOpen = untracked(this.isSearchOpen);
         const editor = this.showDiffEditor ? this._diffEditor.getOriginalEditor() : this.codeEditor;
-        await editor.getAction('actions.find').run();
+        if (isFindPanelOpen) {
+            await (editor.getContribution('editor.contrib.findController') as any).closeFindWidget();
+        } else {
+            await editor.getAction('actions.find').run();
+        }
     }
 
     onPaste(event: ClipboardEvent) {
@@ -127,11 +133,13 @@ export class EditorComponent implements OnInit, OnChanges {
         this._diffEditor.getModifiedEditor().onDidChangeModelContent(() => {
             this.value = this._diffEditor.getModel().modified.getValue();
         });
+        this._initializeFindWidget(editor.getOriginalEditor());
         this.#setTheme();
     }
 
     onCodeEditorInit(editor: MonacoStandaloneCodeEditor): void {
         this.codeEditor = editor;
+        this._initializeFindWidget(editor);
         this.#setTheme();
     }
 
@@ -143,6 +151,15 @@ export class EditorComponent implements OnInit, OnChanges {
         this._editorTextChanged$.next(this.value);
     }
 
+    private _initializeFindWidget(editor: MonacoStandaloneCodeEditor): void {
+        this.isSearchOpen.set(false);
+        (editor.getContribution('editor.contrib.findController') as any).getState().onFindReplaceStateChange(event => {
+            if (event.isRevealed) {
+                this.isSearchOpen.update(v => !v);
+            }
+        });
+    }
+
     #getDecorations(newText: string) {
         const currentEntries = newText.split('\n');
         const newDecorations: IModelDeltaDecoration[] = [];