[ACS-8365] Editing prompt - review fixes

projects/aca-content/assets/i18n/en.json

@@ -621,7 +621,13 @@
           "DISLIKE_BUTTON_LABEL": "Dislike",
           "COPY_MESSAGE": "Copied response to clipboard",
           "CANCEL": "Cancel",
-          "UPDATE": "Update"
+          "UPDATE": "Update",
+          "ACCESSIBILITY": {
+            "CANCEL_BUTTON": "Cancel editing of the query button",
+            "UPDATE_BUTTON": "Update query button",
+            "EDIT_BUTTON": "Edit query button",
+            "TEXT_AREA": "Update query text area"
+          }
         },
         "AGENTS_BUTTON": {
           "LABEL": "Ask Discovery",

projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.html

@@ -33,9 +33,11 @@
             matInput
             class="aca-search-ai-results-container-wrapper-form-field-input"
             data-automation-id="toggle-edit-input-textarea"
-            [attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
+            #editTextArea
+            [attr.aria-label]="'KNOWLEDGE_RETRIEVAL.SEARCH.RESULTS_PAGE.ACCESSIBILITY.TEXT_AREA' | translate"
             [(ngModel)]="searchQuery"
             (keyup.enter)="updateInput()"
+            (keyup.escape)="cancelUpdateInput()"
             [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
             autocomplete="off"
           ></textarea>
@@ -45,7 +47,7 @@
           <button
             (click)="cancelUpdateInput()"
             mat-flat-button
-            [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
+            [attr.aria-label]="'KNOWLEDGE_RETRIEVAL.SEARCH.RESULTS_PAGE.ACCESSIBILITY.CANCEL_BUTTON' | translate"
             data-automation-id="cancel-input-button"
             class="aca-search-ai-results-container-wrapper-form-field-cancel-button">
             {{ 'KNOWLEDGE_RETRIEVAL.SEARCH.RESULTS_PAGE.CANCEL' | translate }}
@@ -53,7 +55,7 @@
           <button
             (click)="updateInput()"
             mat-flat-button
-            [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
+            [attr.aria-label]="'KNOWLEDGE_RETRIEVAL.SEARCH.RESULTS_PAGE.ACCESSIBILITY.UPDATE_BUTTON' | translate"
             data-automation-id="update-input-button"
             class="aca-search-ai-results-container-wrapper-form-field-update-button">
             {{ 'KNOWLEDGE_RETRIEVAL.SEARCH.RESULTS_PAGE.UPDATE' | translate }}
@@ -163,7 +165,7 @@
     (click)="setEditing(true)"
     [disabled]="disabled"
     mat-flat-button
-    [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
+    [attr.aria-label]="'KNOWLEDGE_RETRIEVAL.SEARCH.RESULTS_PAGE.ACCESSIBILITY.EDIT_BUTTON' | translate"
     data-automation-id="toggle-edit-input-button"
     class="aca-search-ai-results-container-wrapper-edit-button"
     [class.aca-search-ai-results-container-wrapper-edit-button-disabled]="disabled">

projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.scss

@@ -31,7 +31,8 @@
             width: 52%;
             border-radius: 12px;
             padding: 20px 15px 50px;
-            background: var(--theme-card-background-grey-color);
+            background: var(--theme-form-field-background-grey-color);
+            border: 1px var(--theme-light-grey-3-color) solid;
 
             div {
               padding: 0;
@@ -85,8 +86,9 @@
           }
 
           &-edit-button-disabled {
-            top: -15px;
+            top: -16px;
             right: -53px;
+            background: transparent;
           }
 
           &-query {

projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.spec.ts

@@ -24,18 +24,20 @@
 
 import { TestBed, ComponentFixture, tick, fakeAsync } from '@angular/core/testing';
 import { SearchAiResultsComponent } from './search-ai-results.component';
-import { ActivatedRoute, Params } from '@angular/router';
+import { ActivatedRoute, Params, Router } from '@angular/router';
 import { of, Subject, throwError } from 'rxjs';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { UserPreferencesService } from '@alfresco/adf-core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { AppTestingModule } from '../../../../testing/app-testing.module';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
-import { NodesApiService, SearchAiService } from '@alfresco/adf-content-services';
+import { AgentService, NodesApiService, SearchAiService } from '@alfresco/adf-content-services';
 import { By } from '@angular/platform-browser';
 import { ModalAiService } from '../../../../services/modal-ai.service';
 import { delay } from 'rxjs/operators';
 import { AiAnswer, AiAnswerEntry, QuestionModel, QuestionRequest } from '@alfresco/js-api/typings';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { getAppSelection, getCurrentFolder, SearchByTermAiAction } from '@alfresco/aca-shared/store';
 
 const questionMock: QuestionModel = { question: 'test', questionId: 'testId', restrictionQuery: { nodesIds: [] } };
 const aiAnswerMock: AiAnswer = { answer: 'Some answer', questionId: 'some id', references: [] };
@@ -52,6 +54,7 @@ describe('SearchAiResultsComponent', () => {
   let modalAiService: ModalAiService;
   let searchAiService: SearchAiService;
   let askSpy: jasmine.Spy<(questionRequest: QuestionRequest) => void>;
+  let store: MockStore;
 
   afterEach(() => {
     mockQueryParams = new Subject<Params>();
@@ -62,6 +65,7 @@ describe('SearchAiResultsComponent', () => {
     TestBed.configureTestingModule({
       imports: [AppTestingModule, SearchAiResultsComponent, MatSnackBarModule, MatDialogModule, MatIconTestingModule],
       providers: [
+        provideMockStore(),
         {
           provide: NodesApiService,
           useValue: {
@@ -84,6 +88,28 @@ describe('SearchAiResultsComponent', () => {
     modalAiService = TestBed.inject(ModalAiService);
     searchAiService = TestBed.inject(SearchAiService);
     userPreferencesService = TestBed.inject(UserPreferencesService);
+    spyOn(TestBed.inject(AgentService), 'getAgents').and.returnValue(of([]));
+    TestBed.inject(Router);
+    store = TestBed.inject(MockStore);
+
+    store.overrideSelector(getCurrentFolder, {
+      isFolder: true,
+      id: 'folder1',
+      name: '',
+      nodeType: '',
+      isFile: false,
+      modifiedAt: undefined,
+      modifiedByUser: undefined,
+      createdAt: undefined,
+      createdByUser: undefined
+    });
+    store.overrideSelector(getAppSelection, {
+      nodes: [],
+      isEmpty: true,
+      count: 0,
+      libraries: []
+    });
+
     askSpy = spyOn(searchAiService, 'ask').and.returnValue(of(questionMock));
     component = fixture.componentInstance;
     component.ngOnInit();
@@ -93,13 +119,6 @@ describe('SearchAiResultsComponent', () => {
     let textArea: HTMLTextAreaElement;
     let toggleTriggerContainer: HTMLElement;
 
-    beforeEach(() => {
-      spyOn(userPreferencesService, 'get').and.returnValue(knowledgeRetrievalNodes);
-      mockQueryParams.next({ query: 'test', agentId: 'agentId1' });
-      fixture.detectChanges();
-      toggleTriggerContainer = fixture.debugElement.query(By.css('[data-automation-id="toggle-edit-trigger-container"]')).nativeElement;
-    });
-
     const getToggleEditInputButton = (): HTMLButtonElement | undefined => {
       return fixture.debugElement.query(By.css('[data-automation-id="toggle-edit-input-button"]'))?.nativeElement;
     };
@@ -133,6 +152,14 @@ describe('SearchAiResultsComponent', () => {
       expect(component.searchQuery).toBe('test');
     };
 
+    beforeEach(() => {
+      spyOn(userPreferencesService, 'get').and.returnValue(knowledgeRetrievalNodes);
+      spyOn(searchAiService, 'getAnswer').and.returnValue(of({ entry: { answer: 'Some answer', questionId: 'some id', references: [] } }));
+      mockQueryParams.next({ query: 'test', agentId: 'agentId1' });
+      fixture.detectChanges();
+      toggleTriggerContainer = fixture.debugElement.query(By.css('[data-automation-id="toggle-edit-trigger-container"]')).nativeElement;
+    });
+
     it('should show toggle edit input button on mouseenter', () => {
       toggleTriggerContainer.dispatchEvent(new MouseEvent('mouseenter'));
       fixture.detectChanges();
@@ -151,10 +178,12 @@ describe('SearchAiResultsComponent', () => {
 
     it('should search for a new results after typing new query and clicking update button', () => {
       insertTextIntoTextArea();
+      spyOn(store, 'dispatch');
 
       getUpdateInputButton().dispatchEvent(new MouseEvent('click'));
       fixture.detectChanges();
 
+      expect(store.dispatch<SearchByTermAiAction>).toHaveBeenCalledWith(new SearchByTermAiAction({ searchTerm: 'new query', agentId: 'agentId1' }));
       expect(getToggleEditInputTextArea()).toBeUndefined();
       expect(component.editing).toBeFalse();
       expect(component.searchQuery).toBe('new query');

projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.ts

@@ -22,14 +22,13 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { PageComponent, PageLayoutComponent, ToolbarActionComponent, ToolbarComponent } from '@alfresco/aca-shared';
 import { concatMap, delay, finalize, retryWhen, skipWhile, switchMap, takeUntil } from 'rxjs/operators';
 import {
   AvatarComponent,
   ClipboardService,
-  CoreModule,
   EmptyContentComponent,
   ThumbnailService,
   ToolbarModule,
@@ -52,6 +51,7 @@ import { ModalAiService } from '../../../../services/modal-ai.service';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
+import { AiSearchByTermPayload, SearchByTermAiAction } from '@alfresco/aca-shared/store';
 
 @Component({
   standalone: true,
@@ -71,7 +71,6 @@ import { FormsModule } from '@angular/forms';
     AvatarComponent,
     MatTooltipModule,
     ToggleIconDirective,
-    CoreModule,
     MatFormFieldModule,
     MatInputModule,
     FormsModule
@@ -97,6 +96,9 @@ export class SearchAiResultsComponent extends PageComponent implements OnInit, O
 
   searchQuery = '';
 
+  @ViewChild('editTextArea')
+  editTextArea: ElementRef;
+
   get agentId(): string {
     return this._agentId;
   }
@@ -137,7 +139,8 @@ export class SearchAiResultsComponent extends PageComponent implements OnInit, O
     private userPreferencesService: UserPreferencesService,
     private translateService: TranslateService,
     private unsavedChangesGuard: UnsavedChangesGuard,
-    private modalAiService: ModalAiService
+    private modalAiService: ModalAiService,
+    private cdr: ChangeDetectorRef
   ) {
     super();
   }
@@ -171,10 +174,19 @@ export class SearchAiResultsComponent extends PageComponent implements OnInit, O
   setEditing(editing: boolean) {
     this._initSearchQuery = this.searchQuery;
     this._editing = editing;
+    this.cdr.detectChanges();
+    if (this.editTextArea) {
+      this.editTextArea.nativeElement.focus();
+    }
   }
 
   updateInput() {
     if (this.searchQuery !== this._initSearchQuery && this.searchQuery.length > 0) {
+      const payload: AiSearchByTermPayload = {
+        searchTerm: this.searchQuery,
+        agentId: this._agentId
+      };
+      this.store.dispatch(new SearchByTermAiAction(payload));
       this.performAiSearch();
     }
 

projects/aca-content/src/lib/ui/variables/variables.scss

@@ -106,6 +106,7 @@ $defaults: (
   --theme-search-highlight-background-color: $search-highlight-background-color,
   --theme-text-light-color: $text-light-color,
   --theme-card-background-grey-color: $card-background-grey-color,
+  --theme-form-field-background-grey-color: $card-background-grey-color,
   --theme-light-grey-1-color: $light-grey-1,
   --theme-light-grey-2-color: $light-grey-2,
   --theme-light-grey-3-color: $light-grey-3