IGN - 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 {
@@ -16,6 +17,7 @@ import {
   DefaultRouterModule,
   ROUTE_PARAMS,
   ROUTER_ROUTE_DATASET,
+  ROUTER_ROUTE_ORGANIZATION,
   ROUTER_ROUTE_SEARCH,
   RouterService,
 } from '@geonetwork-ui/feature/router'
@@ -92,6 +94,7 @@ import { MatTabsModule } from '@angular/material/tabs'
 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'
 
 export const metaReducers: MetaReducer[] = !environment.production ? [] : []
 
@@ -145,6 +148,7 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
       searchStateId: 'mainSearch',
       searchRouteComponent: SearchPageComponent,
       recordRouteComponent: RecordPageComponent,
+      organizationRouteComponent: OrganizationPageComponent,
     }),
     FeatureRecordModule,
     FeatureCatalogModule,
@@ -217,6 +221,10 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
       },
     },
     { provide: RECORD_URL_TOKEN, useValue: `${ROUTER_ROUTE_DATASET}/\${uuid}` },
+    {
+      provide: ORGANIZATION_PAGE_URL_TOKEN,
+      useValue: `${ROUTER_ROUTE_ORGANIZATION}/\${name}`,
+    },
     {
       provide: ORGANIZATION_URL_TOKEN,
       useValue: `${ROUTER_ROUTE_SEARCH}?${ROUTE_PARAMS.PUBLISHER}=\${name}`,

apps/datahub/src/app/home/navigation-menu/navigation-menu.component.spec.ts

@@ -1,15 +1,15 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import {
-  RouterFacade,
   ROUTER_ROUTE_SEARCH,
+  RouterFacade,
 } from '@geonetwork-ui/feature/router'
 import { TranslateModule } from '@ngx-translate/core'
 import { readFirst } from '@nx/angular/testing'
 import { BehaviorSubject } from 'rxjs'
 import {
   ROUTER_ROUTE_NEWS,
-  ROUTER_ROUTE_ORGANISATIONS,
+  ROUTER_ROUTE_ORGANIZATIONS,
 } from '../../router/constants'
 
 import { NavigationMenuComponent } from './navigation-menu.component'
@@ -73,7 +73,7 @@ describe('NavigationMenuComponent', () => {
     describe('navigate to organisations route', () => {
       beforeEach(() => {
         routerFacadeMock.currentRoute$.next({
-          url: [{ path: ROUTER_ROUTE_ORGANISATIONS }],
+          url: [{ path: ROUTER_ROUTE_ORGANIZATIONS }],
         })
       })
       it('displays activeLabel for organisations', async () => {

apps/datahub/src/app/home/navigation-menu/navigation-menu.component.ts

@@ -1,13 +1,13 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import {
-  RouterFacade,
   ROUTER_ROUTE_SEARCH,
+  RouterFacade,
 } from '@geonetwork-ui/feature/router'
 import { map } from 'rxjs/operators'
 import {
   ROUTER_ROUTE_NEWS,
-  ROUTER_ROUTE_ORGANISATIONS,
+  ROUTER_ROUTE_ORGANIZATIONS,
 } from '../../router/constants'
 import { getThemeConfig } from '@geonetwork-ui/util/app-config'
 
@@ -33,7 +33,7 @@ export class NavigationMenuComponent {
       label: 'datahub.header.datasets',
     },
     {
-      link: `${ROUTER_ROUTE_ORGANISATIONS}`,
+      link: `${ROUTER_ROUTE_ORGANIZATIONS}`,
       label: 'datahub.header.organisations',
     },
   ]

apps/datahub/src/app/home/news-page/key-figures/key-figures.component.html

@@ -4,7 +4,7 @@
       class="py-[37px] pl-[47px] rounded-lg border bg-white mb-5 card-shadow cursor-pointer"
       [figure]="recordsCount$ | async"
       [icon]="'folder_open'"
-      title="catalog.figures.datasets"
+      [title]="'catalog.figures.datasets'"
       [color]="'secondary'"
     ></gn-ui-figure>
   </a>
@@ -13,7 +13,7 @@
       class="py-[37px] pl-[47px] rounded-lg bg-white border card-shadow cursor-pointer"
       [figure]="orgsCount$ | async"
       [icon]="'corporate_fare'"
-      title="catalog.figures.organisations"
+      [title]="'catalog.figures.organizations'"
       [color]="'secondary'"
     ></gn-ui-figure>
   </a>

apps/datahub/src/app/home/news-page/key-figures/key-figures.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { startWith } from 'rxjs/operators'
 import { RecordsService } from '@geonetwork-ui/feature/catalog'
 import { ROUTER_ROUTE_SEARCH } from '@geonetwork-ui/feature/router'
-import { ROUTER_ROUTE_ORGANISATIONS } from '../../../router/constants'
+import { ROUTER_ROUTE_ORGANIZATIONS } from '../../../router/constants'
 import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 
@@ -19,7 +19,7 @@ export class KeyFiguresComponent {
   recordsCount$ = this.catalogRecords.recordsCount$.pipe(startWith('-'))
   orgsCount$ = this.catalogOrgs.organisationsCount$.pipe(startWith('-'))
   ROUTE_SEARCH = `/${ROUTER_ROUTE_SEARCH}`
-  ROUTE_ORGANISATIONS = `/${ROUTER_ROUTE_ORGANISATIONS}`
+  ROUTE_ORGANISATIONS = `/${ROUTER_ROUTE_ORGANIZATIONS}`
 
   constructor(
     private catalogRecords: RecordsService,

apps/datahub/src/app/home/organisations-page/organisations-page.component.html

@@ -1,5 +1,5 @@
 <div class="container-lg mx-auto mt-8">
   <gn-ui-organisations
-    (orgSelect)="searchByOrganisation($event)"
+    (orgSelect)="onOrganizationSelection($event)"
   ></gn-ui-organisations>
 </div>

apps/datahub/src/app/home/organisations-page/organisations-page.component.spec.ts

@@ -2,46 +2,33 @@ import { NO_ERRORS_SCHEMA } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { OrganisationsPageComponent } from './organisations-page.component'
-import { SearchService } from '@geonetwork-ui/feature/search'
-import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
-import { of } from 'rxjs'
+import { RouterFacade } from '@geonetwork-ui/feature/router'
+import { ORGANISATIONS_FIXTURE } from '@geonetwork-ui/common/fixtures'
 
-class SearchServiceMock {
-  setFilters = jest.fn()
-}
-
-class OrganisationsServiceMock {
-  getFiltersForOrgs = jest.fn((orgs) =>
-    of({
-      orgs: orgs.reduce((prev, curr) => ({ ...prev, [curr.name]: true }), {}),
-    })
-  )
+class RouterFacadeMock {
+  goToOrganization = jest.fn()
 }
 
 describe('OrganisationsPageComponent', () => {
   let component: OrganisationsPageComponent
   let fixture: ComponentFixture<OrganisationsPageComponent>
-  let searchService: SearchService
-  let orgsService: OrganizationsServiceInterface
+  let routerFacade: RouterFacade
+
+  const selectedOrganization = ORGANISATIONS_FIXTURE[0]
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [OrganisationsPageComponent],
       schemas: [NO_ERRORS_SCHEMA],
       providers: [
         {
-          provide: SearchService,
-          useClass: SearchServiceMock,
-        },
-        {
-          provide: OrganizationsServiceInterface,
-          useClass: OrganisationsServiceMock,
+          provide: RouterFacade,
+          useClass: RouterFacadeMock,
         },
       ],
     }).compileComponents()
 
-    searchService = TestBed.inject(SearchService)
-    orgsService = TestBed.inject(OrganizationsServiceInterface)
+    routerFacade = TestBed.inject(RouterFacade)
 
     fixture = TestBed.createComponent(OrganisationsPageComponent)
     component = fixture.componentInstance
@@ -52,23 +39,15 @@ describe('OrganisationsPageComponent', () => {
     expect(component).toBeTruthy()
   })
 
-  describe('#searchByOrganisation', () => {
-    beforeEach(() => {
-      component.searchByOrganisation({
-        name: 'MyOrg',
-      })
-    })
-    it('generates filters for the org', () => {
-      expect(orgsService.getFiltersForOrgs).toHaveBeenCalledWith([
-        { name: 'MyOrg' },
-      ])
-    })
-    it('updates filters to filter on the org', () => {
-      expect(searchService.setFilters).toHaveBeenCalledWith({
-        orgs: {
-          MyOrg: true,
-        },
-      })
+  describe('onOrganizationSelection', () => {
+    it('should goToOrganization page', () => {
+      component.onOrganizationSelection(selectedOrganization)
+
+      fixture.detectChanges()
+
+      expect(routerFacade.goToOrganization).toHaveBeenCalledWith(
+        selectedOrganization.name
+      )
     })
   })
 })

apps/datahub/src/app/home/organisations-page/organisations-page.component.ts

@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { SearchService } from '@geonetwork-ui/feature/search'
-import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
 import { Organization } from '@geonetwork-ui/common/domain/model/record'
+import { RouterFacade } from '@geonetwork-ui/feature/router'
 
 @Component({
   selector: 'datahub-organisations-page',
@@ -10,14 +9,9 @@ import { Organization } from '@geonetwork-ui/common/domain/model/record'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OrganisationsPageComponent {
-  constructor(
-    private searchService: SearchService,
-    private orgsService: OrganizationsServiceInterface
-  ) {}
+  constructor(private routerFacade: RouterFacade) {}
 
-  searchByOrganisation(organisation: Organization) {
-    this.orgsService
-      .getFiltersForOrgs([organisation])
-      .subscribe((filters) => this.searchService.setFilters(filters))
+  onOrganizationSelection(organisation: Organization) {
+    this.routerFacade.goToOrganization(organisation.name)
   }
 }