refactor(datahub): move many dh-specific components to the app

These components specified a layout that was very specific to the datahub

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

@@ -70,6 +70,12 @@ import { METADATA_LANGUAGE } from '@geonetwork-ui/api/repository'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { GN_UI_VERSION } from '@geonetwork-ui/feature/record'
 import { LOGIN_URL } from '@geonetwork-ui/api/repository/gn4'
+import { RecordRelatedRecordsComponent } from './record/record-related-records/record-related-records.component'
+import { RecordMetadataComponent } from './record/record-metadata/record-metadata.component'
+import { RecordOtherlinksComponent } from './record/record-otherlinks/record-otherlinks.component'
+import { RecordDownloadsComponent } from './record/record-downloads/record-downloads.component'
+import { RecordApisComponent } from './record/record-apis/record-apis.component'
+import { MatTabsModule } from '@angular/material/tabs'
 
 export const metaReducers: MetaReducer[] = !environment.production ? [] : []
 // https://github.com/nrwl/nx/issues/191
@@ -89,6 +95,11 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
     LastCreatedComponent,
     KeyFiguresComponent,
     NavigationMenuComponent,
+    RecordRelatedRecordsComponent,
+    RecordMetadataComponent,
+    RecordOtherlinksComponent,
+    RecordDownloadsComponent,
+    RecordApisComponent,
   ],
   imports: [
     BrowserModule,
@@ -128,6 +139,7 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
     FormsModule,
     UiInputsModule,
     UiCatalogModule,
+    MatTabsModule,
   ],
   providers: [
     { provide: RouterService, useClass: DatahubRouterService },

libs/feature/record/src/lib/data-apis/data-apis.component.spec.ts → apps/datahub/src/app/record/record-apis/record-apis.component.spec.ts

@@ -1,20 +1,19 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { Subject } from 'rxjs'
-import { MdViewFacade } from '../state'
-
-import { DataApisComponent } from './data-apis.component'
+import { RecordApisComponent } from './record-apis.component'
+import { MdViewFacade } from '@geonetwork-ui/feature/record'
 
 class MdViewFacadeMock {
   apiLinks$ = new Subject()
 }
 
 describe('DataApisComponent', () => {
-  let component: DataApisComponent
-  let fixture: ComponentFixture<DataApisComponent>
+  let component: RecordApisComponent
+  let fixture: ComponentFixture<RecordApisComponent>
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [DataApisComponent],
+      declarations: [RecordApisComponent],
       providers: [
         {
           provide: MdViewFacade,
@@ -25,7 +24,7 @@ describe('DataApisComponent', () => {
   })
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DataApisComponent)
+    fixture = TestBed.createComponent(RecordApisComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
   })

apps/datahub/src/app/record/record-apis/record-apis.component.ts

@@ -0,0 +1,12 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core'
+import { MdViewFacade } from '@geonetwork-ui/feature/record'
+
+@Component({
+  selector: 'datahub-record-apis',
+  templateUrl: './record-apis.component.html',
+  styleUrls: ['./record-apis.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RecordApisComponent {
+  constructor(public facade: MdViewFacade) {}
+}

libs/feature/record/src/lib/data-downloads/data-downloads.component.spec.ts → apps/datahub/src/app/record/record-downloads/record-downloads.component.spec.ts

@@ -5,12 +5,12 @@ import {
   tick,
 } from '@angular/core/testing'
 import { BehaviorSubject, of, throwError } from 'rxjs'
-import { MdViewFacade } from '../state'
-import { DataDownloadsComponent } from './data-downloads.component'
+import { RecordDownloadsComponent } from './record-downloads.component'
 import { Component, Input, NO_ERRORS_SCHEMA } from '@angular/core'
 import { By } from '@angular/platform-browser'
 import { DataService } from '@geonetwork-ui/feature/dataviz'
 import { DatasetDistribution } from '@geonetwork-ui/common/domain/record'
+import { MdViewFacade } from '@geonetwork-ui/feature/record'
 
 // This is used to work around a very weird bug when comparing URL objects would fail
 // if the `searchParams` of the object wasn't accessed beforehand in some cases...
@@ -58,6 +58,7 @@ class DataServiceMock {
 }
 
 @Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'gn-ui-download-item',
   template: '<div></div>',
 })
@@ -66,20 +67,21 @@ export class MockDownloadsListItemComponent {
 }
 
 @Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'gn-ui-popup-alert',
   template: '<div></div>',
 })
 export class MockPopupAlertComponent {}
 
 describe('DataDownloadsComponent', () => {
-  let component: DataDownloadsComponent
-  let fixture: ComponentFixture<DataDownloadsComponent>
+  let component: RecordDownloadsComponent
+  let fixture: ComponentFixture<RecordDownloadsComponent>
   let facade
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [
-        DataDownloadsComponent,
+        RecordDownloadsComponent,
         MockDownloadsListItemComponent,
         MockPopupAlertComponent,
       ],
@@ -99,7 +101,7 @@ describe('DataDownloadsComponent', () => {
   })
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DataDownloadsComponent)
+    fixture = TestBed.createComponent(RecordDownloadsComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
   })

libs/feature/record/src/lib/data-downloads/data-downloads.component.ts → apps/datahub/src/app/record/record-downloads/record-downloads.component.ts

@@ -3,19 +3,19 @@ import { DataService } from '@geonetwork-ui/feature/dataviz'
 import { getFileFormat, getLinkPriority } from '@geonetwork-ui/util/shared'
 import { combineLatest, of } from 'rxjs'
 import { catchError, map, switchMap } from 'rxjs/operators'
-import { MdViewFacade } from '../state'
 import {
   DatasetDistribution,
   DatasetServiceDistribution,
 } from '@geonetwork-ui/common/domain/record'
+import { MdViewFacade } from '@geonetwork-ui/feature/record'
 
 @Component({
-  selector: 'gn-ui-data-downloads',
-  templateUrl: './data-downloads.component.html',
-  styleUrls: ['./data-downloads.component.css'],
+  selector: 'datahub-record-downloads',
+  templateUrl: './record-downloads.component.html',
+  styleUrls: ['./record-downloads.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DataDownloadsComponent {
+export class RecordDownloadsComponent {
   constructor(public facade: MdViewFacade, private dataService: DataService) {}
 
   error: string = null

libs/feature/record/src/lib/record-metadata/record-metadata.component.css → apps/datahub/src/app/record/record-metadata/record-metadata.component.css

@@ -33,3 +33,18 @@
 .tab-header-label {
   @apply uppercase text-sm text-primary opacity-75 hover:text-primary-darker;
 }
+
+:host {
+  --container-outside-width: calc(50vw - 1024px / 2);
+}
+@media (max-width: 1024px) {
+  :host {
+    --container-outside-width: 1rem;
+  }
+}
+
+/deep/ gn-ui-carousel {
+  display: block;
+  margin-left: calc(-1 * var(--container-outside-width));
+  margin-right: calc(-1 * var(--container-outside-width));
+}

libs/feature/record/src/lib/record-metadata/record-metadata.component.html → apps/datahub/src/app/record/record-metadata/record-metadata.component.html

@@ -111,26 +111,26 @@
     class="container-lg px-4 lg:mx-auto"
     *ngIf="displayDownload$ | async"
   >
-    <gn-ui-data-downloads class="block mt-5"></gn-ui-data-downloads>
+    <datahub-record-downloads class="block mt-5"></datahub-record-downloads>
   </div>
 
   <div id="links" class="container-lg px-4 lg:mx-auto">
     <div *ngIf="displayOtherLinks | async">
-      <gn-ui-data-otherlinks class="block mt-5"></gn-ui-data-otherlinks>
+      <datahub-record-otherlinks class="block mt-5"></datahub-record-otherlinks>
     </div>
 
     <div *ngIf="displayApi$ | async">
-      <gn-ui-data-apis class="block mt-6"></gn-ui-data-apis>
+      <datahub-record-apis class="block mt-6"></datahub-record-apis>
     </div>
   </div>
 
   <div id="related-records" *ngIf="displayRelated$ | async">
     <div>
       <div class="h-48 overflow-visible">
         <div class="container-lg px-4 lg:mx-auto">
-          <gn-ui-related-records
+          <datahub-record-related-records
             [records]="facade.related$ | async"
-          ></gn-ui-related-records>
+          ></datahub-record-related-records>
         </div>
       </div>
     </div>

libs/feature/record/src/lib/record-metadata/record-metadata.component.spec.ts → apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts

@@ -14,10 +14,10 @@ import {
 } from '@geonetwork-ui/ui/elements'
 import { TranslateModule } from '@ngx-translate/core'
 import { BehaviorSubject, of } from 'rxjs'
-import { MdViewFacade } from '../state/mdview.facade'
 import { RecordMetadataComponent } from './record-metadata.component'
 import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
 import { DATASET_RECORDS } from '@geonetwork-ui/common/fixtures'
+import { MdViewFacade } from '@geonetwork-ui/feature/record'
 
 const SAMPLE_RECORD = {
   ...DATASET_RECORDS[0],
@@ -56,43 +56,46 @@ class OrganisationsServiceMock {
 }
 
 @Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'gn-ui-map-view',
   template: '<div></div>',
 })
 export class MockDataMapComponent {}
 
 @Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'gn-ui-data-view',
   template: '<div></div>',
 })
 export class MockDataViewComponent {}
 
 @Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'gn-ui-data-view-share',
   template: '<div></div>',
 })
 export class MockDataViewShareComponent {}
 
 @Component({
-  selector: 'gn-ui-data-downloads',
+  selector: 'datahub-record-downloads',
   template: '<div></div>',
 })
 export class MockDataDownloadsComponent {}
 
 @Component({
-  selector: 'gn-ui-data-otherlinks',
+  selector: 'datahub-record-otherlinks',
   template: '<div></div>',
 })
 export class MockDataOtherlinksComponent {}
 
 @Component({
-  selector: 'gn-ui-data-apis',
+  selector: 'datahub-record-apis',
   template: '<div></div>',
 })
 export class MockDataApisComponent {}
 
 @Component({
-  selector: 'gn-ui-related-records',
+  selector: 'datahub-record-related-records',
   template: '<div></div>',
 })
 export class MockRelatedComponent {}

libs/feature/record/src/lib/record-metadata/record-metadata.component.ts → apps/datahub/src/app/record/record-metadata/record-metadata.component.ts

@@ -4,12 +4,12 @@ import { SearchService } from '@geonetwork-ui/feature/search'
 import { ErrorType, MetadataQualityDisplay } from '@geonetwork-ui/ui/elements'
 import { BehaviorSubject, combineLatest } from 'rxjs'
 import { filter, map, mergeMap } from 'rxjs/operators'
-import { MdViewFacade } from '../state/mdview.facade'
 import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
 import { Organization } from '@geonetwork-ui/common/domain/record'
+import { MdViewFacade } from '@geonetwork-ui/feature/record'
 
 @Component({
-  selector: 'gn-ui-record-metadata',
+  selector: 'datahub-record-metadata',
   templateUrl: './record-metadata.component.html',
   styleUrls: ['./record-metadata.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,

libs/feature/record/src/lib/data-otherlinks/data-otherlinks.component.spec.ts → apps/datahub/src/app/record/record-otherlinks/record-otherlinks.component.spec.ts

@@ -1,25 +1,24 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { Subject } from 'rxjs'
-import { MdViewFacade } from '../state'
-
-import { DataOtherlinksComponent } from './data-otherlinks.component'
+import { RecordOtherlinksComponent } from './record-otherlinks.component'
+import { MdViewFacade } from '@geonetwork-ui/feature/record'
 
 class MdViewFacadeMock {
   otherLinks$ = new Subject()
 }
 describe('DataOtherlinksComponent', () => {
-  let component: DataOtherlinksComponent
-  let fixture: ComponentFixture<DataOtherlinksComponent>
+  let component: RecordOtherlinksComponent
+  let fixture: ComponentFixture<RecordOtherlinksComponent>
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [DataOtherlinksComponent],
+      declarations: [RecordOtherlinksComponent],
       providers: [{ provide: MdViewFacade, useClass: MdViewFacadeMock }],
     }).compileComponents()
   })
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DataOtherlinksComponent)
+    fixture = TestBed.createComponent(RecordOtherlinksComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
   })

apps/datahub/src/app/record/record-otherlinks/record-otherlinks.component.ts

@@ -0,0 +1,12 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core'
+import { MdViewFacade } from '@geonetwork-ui/feature/record'
+
+@Component({
+  selector: 'datahub-record-otherlinks',
+  templateUrl: './record-otherlinks.component.html',
+  styleUrls: ['./record-otherlinks.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RecordOtherlinksComponent {
+  constructor(public facade: MdViewFacade) {}
+}

apps/datahub/src/app/record/record-page/record-page.component.html

@@ -2,7 +2,7 @@
   <datahub-header-record
     [metadata]="mdViewFacade.metadata$ | async"
   ></datahub-header-record>
-  <gn-ui-record-metadata
+  <datahub-record-metadata
     [metadataQualityDisplay]="metadataQualityDisplay"
-  ></gn-ui-record-metadata>
+  ></datahub-record-metadata>
 </div>

libs/feature/record/src/lib/related-records/related-records.component.spec.ts → apps/datahub/src/app/record/record-related-records/record-related-records.component.spec.ts

@@ -1,19 +1,19 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
-import { RelatedRecordsComponent } from './related-records.component'
+import { RecordRelatedRecordsComponent } from './record-related-records.component'
 
 describe('RelatedRecordsComponent', () => {
-  let component: RelatedRecordsComponent
-  let fixture: ComponentFixture<RelatedRecordsComponent>
+  let component: RecordRelatedRecordsComponent
+  let fixture: ComponentFixture<RecordRelatedRecordsComponent>
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [RelatedRecordsComponent],
+      declarations: [RecordRelatedRecordsComponent],
     }).compileComponents()
   })
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(RelatedRecordsComponent)
+    fixture = TestBed.createComponent(RecordRelatedRecordsComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
   })

libs/feature/record/src/lib/related-records/related-records.component.ts → apps/datahub/src/app/record/record-related-records/record-related-records.component.ts

@@ -2,11 +2,11 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { CatalogRecord } from '@geonetwork-ui/common/domain/record'
 
 @Component({
-  selector: 'gn-ui-related-records',
-  templateUrl: './related-records.component.html',
-  styleUrls: ['./related-records.component.css'],
+  selector: 'datahub-record-related-records',
+  templateUrl: './record-related-records.component.html',
+  styleUrls: ['./record-related-records.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RelatedRecordsComponent {
+export class RecordRelatedRecordsComponent {
   @Input() records: CatalogRecord[]
 }

libs/feature/record/src/index.ts

@@ -1,4 +1,3 @@
 export * from './lib/feature-record.module'
 export * from './lib/state'
-export * from './lib/record-metadata/record-metadata.component'
 export * from './lib/data-view-permalink/data-view-permalink.component'