Merge pull request #1064 from geonetwork/ME-search-catalog-any-dashboard

[Editor]: Search in the whole catalog from any dashboard

apps/metadata-editor-e2e/src/e2e/dashboard.cy.ts

@@ -272,10 +272,6 @@ describe('dashboard (authenticated)', () => {
         cy.get('md-editor-dashboard-menu').find('a').eq(5).click()
         cy.get('gn-ui-autocomplete').should('have.value', '')
       })
-      it('should hide the search input when navigating to my drafts', () => {
-        cy.get('md-editor-dashboard-menu').find('a').eq(4).click()
-        cy.get('gn-ui-autocomplete').should('not.exist')
-      })
     })
     describe('myRecords search input', () => {
       beforeEach(() => {
@@ -293,6 +289,14 @@ describe('dashboard (authenticated)', () => {
         cy.get('md-editor-dashboard-menu').find('a').first().click()
         cy.get('gn-ui-autocomplete').should('have.value', '')
       })
+      it('should allow to search in the entire catalog', () => {
+        cy.get('gn-ui-autocomplete').type('mat{enter}')
+        cy.get('gn-ui-interactive-table')
+          .find('[data-cy="table-row"]')
+          .should('have.length', '1')
+        cy.url().should('include', '/search?q=mat')
+        cy.url().should('not.include', 'owner')
+      })
     })
   })
   describe('search filters', () => {

apps/metadata-editor/src/app/dashboard/dashboard-page.component.html

@@ -7,6 +7,9 @@
       <div class="absolute top-0 left-0 w-2/3 z-50 pointer-events-none">
         <gn-ui-notifications-container></gn-ui-notifications-container>
       </div>
+      <header class="shrink-0 border-b border-gray-300">
+        <md-editor-search-header></md-editor-search-header>
+      </header>
       <router-outlet></router-outlet>
     </div>
   </div>

apps/metadata-editor/src/app/records/all-records/all-records.component.html

@@ -1,6 +1,3 @@
-<header class="shrink-0 border-b border-gray-300">
-  <md-editor-search-header></md-editor-search-header>
-</header>
 <main class="bg-white overflow-y-auto">
   <div class="flex flex-row items-baseline gap-[8px] px-[32px] py-[20px]">
     <ng-container *ngIf="searchText$ | async as searchText; else allRecords">

apps/metadata-editor/src/app/records/all-records/all-records.component.spec.ts

@@ -6,7 +6,7 @@ import {
 } from '@geonetwork-ui/feature/search'
 import { ChangeDetectionStrategy } from '@angular/core'
 import { TranslateModule } from '@ngx-translate/core'
-import { BehaviorSubject, of } from 'rxjs'
+import { BehaviorSubject, firstValueFrom, of } from 'rxjs'
 import { barbieUserFixture } from '@geonetwork-ui/common/fixtures'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AllRecordsComponent } from './all-records.component'
@@ -25,6 +25,7 @@ describe('AllRecordsComponent', () => {
 
   const searchFilters = new BehaviorSubject({
     any: 'hello world',
+    owner: {},
   })
 
   let component: AllRecordsComponent
@@ -34,6 +35,7 @@ describe('AllRecordsComponent', () => {
   let searchFacade: SearchFacade
   let platformService: PlatformServiceInterface
   let fieldsService: FieldsService
+  let searchService: SearchService
 
   beforeEach(() => {
     return MockBuilder(AllRecordsComponent)
@@ -76,6 +78,7 @@ describe('AllRecordsComponent', () => {
 
     router = TestBed.inject(Router)
     searchFacade = TestBed.inject(SearchFacade)
+    searchService = TestBed.inject(SearchService)
     platformService = TestBed.inject(PlatformServiceInterface)
     fieldsService = TestBed.inject(FieldsService)
 
@@ -103,6 +106,8 @@ describe('AllRecordsComponent', () => {
     searchFacade.setPageSize = jest.fn(() => this)
     searchFacade.setConfigRequestFields = jest.fn(() => this)
 
+    searchService.setFilters = jest.fn(() => this)
+
     component = fixture.componentInstance
 
     fixture.detectChanges()
@@ -119,6 +124,35 @@ describe('AllRecordsComponent', () => {
     })
   })
 
+  describe('when updating the search filters', () => {
+    beforeEach(() => {
+      searchFilters.next({ any: 'new search', owner: { 1: true } })
+    })
+
+    it('updates the search text', async () => {
+      const searchText = await firstValueFrom(component.searchText$)
+      expect(searchText).toBe('new search')
+    })
+    it('resets the owner filter', () => {
+      expect(searchService.setFilters).toHaveBeenCalledWith({
+        any: 'new search',
+      })
+    })
+  })
+
+  describe('when destroying the component', () => {
+    beforeEach(() => {
+      component.ngOnDestroy()
+    })
+
+    it('resets the search filters', () => {
+      expect(searchFacade.updateFilters).toHaveBeenCalledWith({ any: '' })
+    })
+    it('unsubscribes from component subscription', () => {
+      expect(component.subscription.closed).toBe(true)
+    })
+  })
+
   describe('when clicking createRecord', () => {
     beforeEach(() => {
       component.createRecord()

apps/metadata-editor/src/app/records/all-records/all-records.component.ts

@@ -3,32 +3,24 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
+  OnDestroy,
+  OnInit,
   TemplateRef,
   ViewChild,
   ViewContainerRef,
 } from '@angular/core'
-import {
-  ResultsTableContainerComponent,
-  SearchFacade,
-  SearchService,
-} from '@geonetwork-ui/feature/search'
+import { SearchFacade, SearchService } from '@geonetwork-ui/feature/search'
 import { TranslateModule } from '@ngx-translate/core'
 import { Router } from '@angular/router'
 import { RecordsCountComponent } from '../records-count/records-count.component'
-import { Observable } from 'rxjs'
+import { Observable, Subscription } from 'rxjs'
 import { UiElementsModule } from '@geonetwork-ui/ui/elements'
 import { UiInputsModule } from '@geonetwork-ui/ui/inputs'
-import {
-  CdkConnectedOverlay,
-  CdkOverlayOrigin,
-  Overlay,
-  OverlayRef,
-} from '@angular/cdk/overlay'
+import { CdkOverlayOrigin, Overlay, OverlayRef } from '@angular/cdk/overlay'
 import { TemplatePortal } from '@angular/cdk/portal'
 import { ImportRecordComponent } from '@geonetwork-ui/feature/editor'
 import { RecordsListComponent } from '../records-list.component'
-import { map } from 'rxjs/operators'
-import { SearchHeaderComponent } from '../../dashboard/search-header/search-header.component'
+import { map, take } from 'rxjs/operators'
 import { SearchFiltersComponent } from '../../dashboard/search-filters/search-filters.component'
 import {
   NgIconComponent,
@@ -50,14 +42,11 @@ import {
     CommonModule,
     TranslateModule,
     RecordsCountComponent,
-    ResultsTableContainerComponent,
     UiElementsModule,
     UiInputsModule,
     ImportRecordComponent,
     CdkOverlayOrigin,
-    CdkConnectedOverlay,
     RecordsListComponent,
-    SearchHeaderComponent,
     SearchFiltersComponent,
     NgIconComponent,
   ],
@@ -72,16 +61,14 @@ import {
     }),
   ],
 })
-export class AllRecordsComponent {
+export class AllRecordsComponent implements OnInit, OnDestroy {
   @ViewChild('importRecordButton', { read: ElementRef })
   importRecordButton!: ElementRef
   @ViewChild('template') template!: TemplateRef<any>
   private overlayRef!: OverlayRef
   searchFields = ['user', 'changeDate']
-  searchText$: Observable<string | null> =
-    this.searchFacade.searchFilters$.pipe(
-      map((filters) => ('any' in filters ? (filters['any'] as string) : null))
-    )
+  searchText$: Observable<string | null>
+  subscription: Subscription
 
   isImportMenuOpen = false
 
@@ -94,6 +81,31 @@ export class AllRecordsComponent {
     private cdr: ChangeDetectorRef
   ) {}
 
+  ngOnInit() {
+    this.subscription = this.searchFacade.searchFilters$
+      .pipe(
+        map((filters) => {
+          if ('owner' in filters) {
+            const { owner, ...rest } = filters
+            return rest
+          }
+          return filters
+        }),
+        take(1)
+      )
+      .subscribe((filters) => {
+        this.searchService.setFilters(filters)
+      })
+    this.searchText$ = this.searchFacade.searchFilters$.pipe(
+      map((filters) => ('any' in filters ? (filters['any'] as string) : null))
+    )
+  }
+
+  ngOnDestroy() {
+    this.searchFacade.updateFilters({ any: '' })
+    this.subscription.unsubscribe()
+  }
+
   createRecord() {
     this.router.navigate(['/create']).catch((err) => console.error(err))
   }

apps/metadata-editor/src/app/records/my-draft/my-draft.component.html

@@ -1,7 +1,6 @@
-<header class="h-[60px] border-b border-gray-300"></header>
 <main class="bg-white overflow-y-auto">
   <div class="flex flex-row items-baseline gap-[8px] px-[32px] py-[20px]">
-    <h1 class="text-[16px] text-main font-title font-bold" translate>
+    <h1 class="text-[16px] text-main font-bold" translate>
       dashboard.records.myDraft
     </h1>
   </div>

apps/metadata-editor/src/app/records/my-draft/my-draft.component.ts

@@ -12,7 +12,7 @@ import { startWith, switchMap } from 'rxjs'
 import { RecordsCountComponent } from '../records-count/records-count.component'
 import { RecordsListComponent } from '../records-list.component'
 @Component({
-  selector: 'md-editor-my-my-draft',
+  selector: 'md-editor-my-draft',
   templateUrl: './my-draft.component.html',
   styleUrls: ['./my-draft.component.css'],
   standalone: true,

apps/metadata-editor/src/app/records/my-records/my-records.component.html

@@ -1,28 +1,13 @@
-<header class="shrink-0 border-b border-gray-300">
-  <md-editor-search-header></md-editor-search-header>
-</header>
 <main class="bg-white overflow-y-auto">
   <div class="flex flex-row items-baseline gap-[8px] px-[32px] py-[20px]">
-    <ng-container *ngIf="searchText$ | async as searchText; else myRecords">
-      <h1
-        class="text-[16px] text-main font-title font-bold"
-        translate
-        [translateParams]="{ searchText: searchText }"
-      >
-        dashboard.records.search
-      </h1>
-      <div class="text-[12px]">
-        <md-editor-records-count></md-editor-records-count>
-      </div>
-    </ng-container>
-    <ng-template #myRecords>
-      <h1 class="text-[16px] text-main font-title font-bold" translate>
+    <ng-container *ngIf="searchFacade.searchFilters$ | async">
+      <h1 class="text-[16px] text-main font-bold" translate>
         dashboard.records.myRecords
       </h1>
       <div class="text-[12px]">
         <md-editor-records-count></md-editor-records-count>
       </div>
-    </ng-template>
+    </ng-container>
   </div>
   <div
     class="flex flex-row items-center mx-[32px] my-[16px] py-[8px] gap-[16px]"

apps/metadata-editor/src/app/records/my-records/my-records.component.spec.ts

@@ -112,12 +112,5 @@ describe('MyRecordsComponent', () => {
         owner: user.id,
       })
     })
-
-    it('should map search filters to searchText$', (done) => {
-      component.searchText$.subscribe((text) => {
-        expect(text).toBe('hello world')
-        done()
-      })
-    })
   })
 })

apps/metadata-editor/src/app/records/my-records/my-records.component.ts

@@ -24,8 +24,6 @@ import { TemplatePortal } from '@angular/cdk/portal'
 import { RecordsCountComponent } from '../records-count/records-count.component'
 import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
 import { ImportRecordComponent } from '@geonetwork-ui/feature/editor'
-import { SearchHeaderComponent } from '../../dashboard/search-header/search-header.component'
-import { map, Observable } from 'rxjs'
 import { SearchFiltersComponent } from '../../dashboard/search-filters/search-filters.component'
 import {
   NgIconComponent,
@@ -54,7 +52,6 @@ const FILTER_OWNER = 'owner'
     ButtonComponent,
     ImportRecordComponent,
     FeatureSearchModule,
-    SearchHeaderComponent,
     SearchFiltersComponent,
     NgIconComponent,
   ],
@@ -76,7 +73,6 @@ export class MyRecordsComponent implements OnInit {
   @ViewChild('template') template!: TemplateRef<any>
   private overlayRef!: OverlayRef
   searchFields = ['changeDate']
-  searchText$: Observable<string | null>
 
   isImportMenuOpen = false
 
@@ -100,10 +96,6 @@ export class MyRecordsComponent implements OnInit {
           this.searchFacade.updateFilters(filters)
         })
     })
-
-    this.searchText$ = this.searchFacade.searchFilters$.pipe(
-      map((filters) => ('any' in filters ? (filters['any'] as string) : null))
-    )
   }
 
   createRecord() {