Merge pull request #990 from geonetwork/me-fix-misc-issues-with-dashb…

…oard-views

[ME]: Fix misc issues with dashboard view

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

@@ -187,7 +187,7 @@ describe('dashboard', () => {
       cy.get('@draft')
         .children('div')
         .eq(5)
-        .should('contain', ' Not published ')
+        .should('include.text', 'Not published')
       cy.get('@draft').children('div').eq(6).should('contain', ' - ')
       cy.clearRecordDrafts()
     })
@@ -204,23 +204,26 @@ describe('dashboard', () => {
         .find('span')
         .invoke('text')
         .should('eq', 'admin admin')
-      cy.get('@record').children('div').eq(5).should('contain', ' Published ')
+      cy.get('@record')
+        .children('div')
+        .eq(5)
+        .find('span')
+        .should('include.text', 'Published')
       cy.get('@record').children('div').eq(6).should('not.contain', ' - ')
       cy.clearRecordDrafts()
     })
   })
+
   describe('navigation', () => {
     beforeEach(() => {
       cy.login('admin', 'admin', false)
       cy.visit('/catalog/search')
     })
-    describe('search input', () => {
-      it('should filter the dashboard based on the search input', () => {
-        cy.get('gn-ui-autocomplete').type('Mat')
-        cy.get('mat-option').first().click()
-        cy.get('gn-ui-interactive-table')
+    describe('all records', () => {
+      it('should display the correct amount of records', () => {
+        cy.get('gn-ui-results-table')
           .find('[data-cy="table-row"]')
-          .should('have.length', '1')
+          .should('have.length', '15')
       })
     })
     describe('my records', () => {
@@ -232,6 +235,83 @@ describe('dashboard', () => {
           .next()
           .should('contain', 'admin admin')
       })
+      it('should display the correct amount of records', () => {
+        cy.get('md-editor-dashboard-menu').find('a').eq(5).click()
+        cy.get('gn-ui-results-table')
+          .find('[data-cy="table-row"]')
+          .should('have.length', '10')
+      })
+      it('should sort the records by title', () => {
+        cy.get('md-editor-dashboard-menu').find('a').eq(5).click()
+        cy.get('gn-ui-results-table')
+          .find('[data-cy="table-row"]')
+          .first()
+          .invoke('text')
+          .then((firstRecord) => {
+            console.log(firstRecord)
+            cy.get('gn-ui-results-table')
+              .find('.table-header-cell')
+              .eq(1)
+              .click()
+            cy.get('gn-ui-results-table')
+              .find('[data-cy="table-row"]')
+              .first()
+              .invoke('text')
+              .should('not.eq', firstRecord)
+          })
+      })
+    })
+  })
+
+  describe('search', () => {
+    function checkDashboardFiltered() {
+      cy.get('gn-ui-autocomplete').type('velo{enter}')
+      cy.get('gn-ui-interactive-table')
+        .find('[data-cy="table-row"]')
+        .should('have.length', '1')
+    }
+    function checkAutocompleteSelected() {
+      cy.get('gn-ui-autocomplete').type('velo')
+      cy.get('mat-option').first().click()
+      cy.url().should('include', '/edit/accroche_velos')
+    }
+    describe('allRecords search input', () => {
+      beforeEach(() => {
+        cy.login('admin', 'admin', false)
+        cy.visit('/catalog/search')
+      })
+      it('should filter the dashboard based on the search input', () => {
+        checkDashboardFiltered()
+      })
+      it('should navigate to the record selected in the autocomplete', () => {
+        checkAutocompleteSelected()
+      })
+      it('should clear the search input when navigating to my records', () => {
+        cy.get('gn-ui-autocomplete').type('velo')
+        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(6).click()
+        cy.get('gn-ui-autocomplete').should('not.exist')
+      })
+    })
+    describe('myRecords search input', () => {
+      beforeEach(() => {
+        cy.login('admin', 'admin', false)
+        cy.visit('/my-space/my-records')
+      })
+      it('should filter the dashboard based on the search input', () => {
+        checkDashboardFiltered()
+      })
+      it('should navigate to the record selected in the autocomplete', () => {
+        checkAutocompleteSelected()
+      })
+      it('should clear the search input when navigating to all records', () => {
+        cy.get('gn-ui-autocomplete').type('velo')
+        cy.get('md-editor-dashboard-menu').find('a').first().click()
+        cy.get('gn-ui-autocomplete').should('have.value', '')
+      })
     })
   })
 })

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

@@ -1,9 +1,10 @@
 /* eslint-disable cypress/no-unnecessary-waiting */
 
 describe('editor form', () => {
-  let recordUuid
+  let recordUuid: any
   before(() => {
     cy.login('admin', 'admin', false)
+    cy.viewport(1920, 2400)
 
     cy.clearRecordDrafts()
 
@@ -53,6 +54,7 @@ describe('editor form', () => {
   })
   beforeEach(() => {
     cy.login('admin', 'admin', false)
+    cy.visit('/catalog/search')
     cy.wrap(recordUuid).as('recordUuid')
 
     cy.get('@recordUuid').then((recordUuid) => {

apps/metadata-editor-e2e/src/e2e/record-actions.cy.ts

@@ -4,6 +4,7 @@ describe('record-actions', () => {
     cy.visit('/catalog/search')
   })
   describe('delete', () => {
+    const recordId = `TEST_RECORD_${Date.now()}`
     describe('record with draft', () => {
       it('should delete the record, delete its associated draft and refresh the interface', () => {
         // First create a record and its draft
@@ -13,13 +14,15 @@ describe('record-actions', () => {
           .as('abstractField')
           .focus()
         cy.get('@abstractField').type('record abstract')
+        cy.get('[data-test="recordTitleInput"]').click()
+        cy.get('[data-test="recordTitleInput"]').type('{selectAll}{backspace}')
+        cy.get('[data-test="recordTitleInput"]').type(recordId)
         cy.intercept({
           method: 'PUT',
           pathname: '**/records',
         }).as('insertRecord')
         cy.get('md-editor-publish-button').click()
         cy.wait('@insertRecord')
-        cy.get('@abstractField').focus()
         cy.get('@abstractField').type('draft abstract')
         // Assert that the draft exists in the local storage
         cy.editor_readFormUniqueIdentifier().then((uniqueIdentifier) =>
@@ -31,18 +34,17 @@ describe('record-actions', () => {
         )
         cy.visit('/my-space/my-records')
         cy.get('[data-cy="table-row"]')
-          .contains('My new record')
+          .contains(recordId)
           .should('have.length', 1)
         cy.get('[data-cy="dashboard-drafts-count"]').should('contain', '1')
         // Delete the record
         cy.get('[data-test="record-menu-button"]').last().click()
         cy.get('[data-test="record-menu-delete-button"]').click()
         cy.get('[data-cy="confirm-button"]').click()
         cy.get('[data-cy="table-row"]')
-          .contains('My new record')
+          .contains(recordId)
           .should('have.length', 0)
         cy.get('gn-ui-notification').should('contain', 'Delete success')
-        cy.get('[data-cy="dashboard-drafts-count"]').should('contain', '0')
       })
     })
 
@@ -51,6 +53,9 @@ describe('record-actions', () => {
         // First create a draft
         cy.get('[data-cy="create-record"]').click()
         cy.url().should('include', '/create')
+        cy.get('[data-test="recordTitleInput"]').click()
+        cy.get('[data-test="recordTitleInput"]').type('{selectAll}{backspace}')
+        cy.get('[data-test="recordTitleInput"]').type(recordId)
         cy.get('gn-ui-form-field[ng-reflect-model=abstract] textarea')
           .as('abstractField')
           .focus()
@@ -63,17 +68,14 @@ describe('record-actions', () => {
         })
         cy.visit('/my-space/my-draft')
         cy.get('[data-cy="table-row"]')
-          .contains('My new record')
+          .contains(recordId)
           .should('have.length', 1)
         cy.get('[data-cy="dashboard-drafts-count"]').should('contain', '1')
         // Delete the draft
         cy.get('[data-test="record-menu-button"]').click()
         cy.get('[data-test="record-menu-delete-button"]').click()
         cy.get('[data-cy="confirm-button"]').click()
-        cy.get('[data-cy="table-row"]')
-          .contains('New record')
-          .should('have.length', 0)
-        cy.get('[data-cy="dashboard-drafts-count"]').should('contain', '0')
+        cy.get('[data-cy="table-row"]').should('not.exist')
       })
     })
   })

apps/metadata-editor/src/app/app.routes.ts

@@ -3,14 +3,13 @@ import { DashboardPageComponent } from './dashboard/dashboard-page.component'
 import { SignInPageComponent } from './sign-in/sign-in-page.component'
 import { EditPageComponent } from './edit/edit-page.component'
 import { EditRecordResolver } from './edit-record.resolver'
-import { MyRecordsComponent } from './records/my-records/my-records.component'
 import { MyDraftComponent } from './records/my-draft/my-draft.component'
-import { MyLibraryComponent } from './records/my-library/my-library.component'
-import { SearchRecordsComponent } from './records/search-records/search-records-list.component'
+import { TemplatesComponent } from './records/templates/templates.component'
 import { MyOrgUsersComponent } from './my-org-users/my-org-users.component'
-import { MyOrgRecordsComponent } from './records/my-org-records/my-org-records.component'
 import { NewRecordResolver } from './new-record.resolver'
 import { DuplicateRecordResolver } from './duplicate-record.resolver'
+import { AllRecordsComponent } from './records/all-records/all-records.component'
+import { MyRecordsStateWrapperComponent } from './records/my-records/my-records-state-wrapper.component'
 
 export const appRoutes: Route[] = [
   { path: '', redirectTo: 'catalog/search', pathMatch: 'prefix' },
@@ -26,35 +25,30 @@ export const appRoutes: Route[] = [
       },
       {
         path: 'discussion',
-        component: SearchRecordsComponent,
+        component: AllRecordsComponent,
         pathMatch: 'prefix',
       },
       {
         path: 'calendar',
-        component: SearchRecordsComponent,
+        component: AllRecordsComponent,
         pathMatch: 'prefix',
       },
       {
         path: 'contacts',
-        component: SearchRecordsComponent,
+        component: AllRecordsComponent,
         pathMatch: 'prefix',
       },
       {
         path: 'thesaurus',
-        component: SearchRecordsComponent,
+        component: AllRecordsComponent,
         pathMatch: 'prefix',
       },
       {
         path: 'search',
         title: 'Search Records',
-        component: SearchRecordsComponent,
+        component: AllRecordsComponent,
         pathMatch: 'prefix',
       },
-      {
-        path: 'my-org',
-        title: 'My Organisation',
-        component: MyOrgRecordsComponent,
-      },
     ],
   },
   {
@@ -66,7 +60,7 @@ export const appRoutes: Route[] = [
       {
         path: 'my-records',
         title: 'My Records',
-        component: MyRecordsComponent,
+        component: MyRecordsStateWrapperComponent,
         pathMatch: 'prefix',
       },
       {
@@ -78,7 +72,7 @@ export const appRoutes: Route[] = [
       {
         path: 'templates',
         title: 'Templates',
-        component: MyLibraryComponent,
+        component: TemplatesComponent,
         pathMatch: 'prefix',
       },
     ],

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

@@ -71,11 +71,15 @@
     >
       <mat-icon class="material-symbols-outlined">edit_note</mat-icon>
       <span translate="">dashboard.records.myDraft</span>
-      <gn-ui-badge
-        [style.--gn-ui-badge-rounded]="'100px'"
-        data-cy="dashboard-drafts-count"
-        >{{ draftsCount$ | async }}</gn-ui-badge
-      >
+      <ng-container *ngIf="draftsCount$ | async as draftsCount">
+        <gn-ui-badge
+          [style.--gn-ui-badge-padding]="'0.375em 0.875em'"
+          [style.--gn-ui-badge-text-size]="'12px'"
+          *ngIf="draftsCount > 0"
+          data-cy="dashboard-drafts-count"
+          >{{ draftsCount }}</gn-ui-badge
+        >
+      </ng-container>
     </a>
     <a
       class="menu-item btn-inactive"

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

@@ -3,16 +3,11 @@
     <aside class="w-[370px] shrink-0 border-r">
       <md-editor-sidebar></md-editor-sidebar>
     </aside>
-    <div class="grow flex flex-col">
-      <header class="shrink-0 border-b border-blue-300">
-        <md-editor-search-header></md-editor-search-header>
-      </header>
-      <div class="relative">
-        <div class="absolute top-0 left-0 w-2/3 z-10 pointer-events-none">
-          <gn-ui-notifications-container></gn-ui-notifications-container>
-        </div>
-        <router-outlet></router-outlet>
+    <div class="relative grow flex flex-col">
+      <div class="absolute top-0 left-0 w-2/3 z-10 pointer-events-none">
+        <gn-ui-notifications-container></gn-ui-notifications-container>
       </div>
+      <router-outlet></router-outlet>
     </div>
   </div>
 </div>