feat(datahub): finish organization-page

apps/datahub-e2e/src/e2e/organization-page.cy.ts

@@ -0,0 +1,118 @@
+import 'cypress-real-events'
+
+describe('organizations', () => {
+  beforeEach(() => {
+    cy.visit('organization/Barbie%20Inc.')
+
+    // aliases
+    cy.get('gn-ui-navigation-button').as('backButton')
+    cy.get('[data-test="organizationHeaderName"]').as('organizationHeaderName')
+    cy.get('[data-test="organizationHeaderWebsiteLink"]').as(
+      'organizationHeaderWebsiteLink'
+    )
+    cy.get('[data-test="organizationDescription"]').as(
+      'organizationDescription'
+    )
+    cy.get('gn-ui-max-lines').contains('Read more').as('readMoreButton')
+    cy.get('[data-test="organizationLogo"]').as('organizationLogo')
+    cy.get('[data-test="organizationDatasetCount"]').as(
+      'organizationDatasetCount'
+    )
+    cy.get('[data-test="organizationEmail"]').as('organizationEmail')
+    cy.get('[data-test="orgPageLasPubDat"]').as('orgPageLasPubDat')
+    cy.get('[data-test="orgDetailsSearchAllBtn"]').as('orgDetailsSearchAllBtn')
+  })
+
+  describe('general display', () => {
+    describe('header', () => {
+      describe('back button', () => {
+        beforeEach(() => {
+          cy.visit('organisations')
+          cy.visit('organization/Barbie%20Inc.')
+        })
+
+        it('back button goes to the previous visited page', () => {
+          cy.get('@backButton').click()
+          cy.url().should('include', '/organisations')
+        })
+      })
+
+      it('should display the organization name', () => {
+        cy.get('@organizationHeaderName').should('contain', 'Barbie Inc.')
+      })
+
+      it('should display the organization website link', () => {
+        cy.get('@organizationHeaderWebsiteLink')
+          .should('be.visible')
+          .should('have.attr', 'href', 'https://www.barbie-inc.com/')
+          .and('have.attr', 'target', '_blank')
+      })
+    })
+
+    describe('details', () => {
+      describe('left column', () => {
+        it('should display the organization description', () => {
+          cy.get('@organizationDescription').should('be.visible')
+        })
+
+        it('click on read more should expand the organization description', () => {
+          let initialDescription
+          let newDescription
+
+          cy.get('@organizationDescription').then((firstDescription) => {
+            initialDescription = firstDescription
+            cy.get('@readMoreButton').trigger('click')
+            cy.get('@organizationDescription').then((secondDescription) => {
+              newDescription = secondDescription
+              expect(newDescription).to.not.equal(initialDescription)
+            })
+          })
+        })
+      })
+
+      describe('right column', () => {
+        it('should display the organization logo', () => {
+          cy.get('@organizationLogo').should('be.visible')
+        })
+
+        it('should display the organization dataset count', () => {
+          cy.get('@organizationDatasetCount').should('be.visible')
+        })
+
+        it('a click on the organization dataset count should open the dataset search page filtered on the organization', () => {
+          cy.get('@organizationDatasetCount').then(($link) => {
+            const url = $link.prop('href')
+            cy.wrap($link).click()
+
+            cy.url().should('eq', url)
+          })
+        })
+
+        it('should display the organization email', () => {
+          cy.get('@organizationEmail')
+            .should('be.visible')
+            .and('have.attr', 'href', 'mailto:[email protected]')
+        })
+      })
+
+      describe('last published datasets', () => {
+        it('should display the last published datasets', () => {
+          cy.get('@orgPageLasPubDat').should('be.visible')
+        })
+
+        it('should display the search all button', () => {
+          cy.get('@orgDetailsSearchAllBtn').should('be.visible')
+        })
+
+        it('a click on the search all button should open the dataset search page filtered on the organization', () => {
+          cy.get('@orgDetailsSearchAllBtn').then(($link) => {
+            const url = $link.prop('href')
+            cy.wrap($link).click()
+
+            cy.url().should('eq', url)
+          })
+        })
+      })
+    })
+  })
+})

apps/datahub-e2e/src/e2e/organizations.cy.ts

@@ -77,14 +77,15 @@ describe('organizations', () => {
   })
 
   describe('list features', () => {
-    it('should search with a filter on the selected org on click', () => {
+    it('should open the organization page', () => {
       cy.get('@organizationsName')
         .eq(10)
         .then(($clickedName) => {
           cy.get('@organizations').eq(10).click()
-          cy.url()
-            .should('include', 'publisher=')
-            .and('include', encodeURIComponent($clickedName.text().trim()))
+          cy.url().should(
+            'contain',
+            `organization/${encodeURIComponent($clickedName.text().trim())}`
+          )
         })
     })
   })

apps/datahub/src/app/app.module.ts

@@ -5,6 +5,7 @@ import { BrowserModule } from '@angular/platform-browser'
 import { Router, RouterModule } from '@angular/router'
 import {
   FeatureCatalogModule,
+  ORGANIZATION_PAGE_URL_TOKEN,
   ORGANIZATION_URL_TOKEN,
 } from '@geonetwork-ui/feature/catalog'
 import {
@@ -94,7 +95,6 @@ import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
 import { RecordUserFeedbacksComponent } from './record/record-user-feedbacks/record-user-feedbacks.component'
 import { LetDirective } from '@ngrx/component'
 import { OrganizationPageComponent } from './organization/organization-page/organization-page.component'
-import { ORGANIZATION_PAGE_URL_TOKEN } from '../../../../libs/feature/catalog/src/lib/organization-url.token'
 
 export const metaReducers: MetaReducer[] = !environment.production ? [] : []
 

apps/datahub/src/app/organization/organization-details/organization-details.component.css

@@ -0,0 +1,15 @@
+.list-page-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 6px;
+  position: relative;
+}
+
+.list-page-dot:after {
+  content: '';
+  position: absolute;
+  left: -7px;
+  top: -7px;
+  width: 20px;
+  height: 20px;
+}