From 4e6962b43a8a35d72e02de848affc4d3c03ef4f1 Mon Sep 17 00:00:00 2001
From: Camille Moinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Wed, 6 Dec 2023 15:12:25 +0100
Subject: [PATCH] feat(dh): various UX fixes

---
 .../record-apis/record-apis.component.html    |  3 +-
 .../record-apis/record-apis.component.spec.ts |  6 +--
 .../record-apis/record-apis.component.ts      |  2 +-
 .../record-metadata.component.html            |  4 +-
 .../record-metadata.component.spec.ts         | 42 +++++++++++--------
 .../record-metadata.component.ts              |  2 +-
 .../src/lib/api-card/api-card.component.html  |  6 ++-
 .../lib/api-card/api-card.component.spec.ts   | 10 ++---
 .../src/lib/api-card/api-card.component.ts    | 14 +++++--
 .../record-api-form.component.css             |  1 +
 .../record-api-form.component.ts              |  6 +--
 translations/de.json                          |  3 +-
 translations/en.json                          |  5 ++-
 translations/es.json                          |  3 +-
 translations/fr.json                          |  3 +-
 translations/it.json                          |  3 +-
 translations/nl.json                          |  3 +-
 translations/pt.json                          |  3 +-
 18 files changed, 72 insertions(+), 47 deletions(-)

diff --git a/apps/datahub/src/app/record/record-apis/record-apis.component.html b/apps/datahub/src/app/record/record-apis/record-apis.component.html
index 57c66cf2c7..23dd9ac594 100644
--- a/apps/datahub/src/app/record/record-apis/record-apis.component.html
+++ b/apps/datahub/src/app/record/record-apis/record-apis.component.html
@@ -15,6 +15,7 @@
       let last = last
     "
     [link]="link"
+    [currentLink]="facade.selectedApiLink$ | async"
     class="w-80"
     [ngClass]="{
       'mr-[var(--container-outside-width)]': last,
@@ -22,7 +23,7 @@
       'shadow-xl bg-white': link === (facade.selectedApiLink$ | async),
       'bg-neutral-100': link !== (facade.selectedApiLink$ | async)
     }"
-    (openCustomPanel)="openCustomPanel($event)"
+    (openRecordApiForm)="openRecordApiForm($event)"
   >
   </gn-ui-api-card>
 </gn-ui-carousel>
diff --git a/apps/datahub/src/app/record/record-apis/record-apis.component.spec.ts b/apps/datahub/src/app/record/record-apis/record-apis.component.spec.ts
index b4b7a3593d..b0ce4d03da 100644
--- a/apps/datahub/src/app/record/record-apis/record-apis.component.spec.ts
+++ b/apps/datahub/src/app/record/record-apis/record-apis.component.spec.ts
@@ -11,7 +11,7 @@ class MdViewFacadeMock {
 
 const serviceDistributionMock = {
   type: 'service',
-  url: 'http://myogcapifeatures.test',
+  url: new URL('http://myogcapifeatures.test'),
   accessServiceProtocol: 'ogcFeatures',
 } as DatasetServiceDistribution
 
@@ -42,9 +42,9 @@ describe('RecordApisComponent', () => {
     expect(component).toBeTruthy()
   })
 
-  describe('#openCustomPanel', () => {
+  describe('#openRecordApiForm', () => {
     beforeEach(() => {
-      component.openCustomPanel(serviceDistributionMock)
+      component.openRecordApiForm(serviceDistributionMock)
     })
     it('should update value in facade.selectedApiLink$', async () => {
       const apiLink = await firstValueFrom(facade.selectedApiLink$)
diff --git a/apps/datahub/src/app/record/record-apis/record-apis.component.ts b/apps/datahub/src/app/record/record-apis/record-apis.component.ts
index a51e77a266..564c073f00 100644
--- a/apps/datahub/src/app/record/record-apis/record-apis.component.ts
+++ b/apps/datahub/src/app/record/record-apis/record-apis.component.ts
@@ -17,7 +17,7 @@ import { MdViewFacade } from '@geonetwork-ui/feature/record'
 export class RecordApisComponent {
   constructor(public facade: MdViewFacade) {}
 
-  openCustomPanel(link: DatasetServiceDistribution) {
+  openRecordApiForm(link: DatasetServiceDistribution) {
     this.facade.selectedApiLink$.next(link)
   }
 }
diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
index ad3a3e2697..757db1212f 100644
--- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
+++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
@@ -122,7 +122,7 @@
     <div *ngIf="displayApi$ | async">
       <datahub-record-apis
         [isPanelOpen]="isPanelOpen"
-        (selectedLink)="selectCard($event)"
+        (selectedLink)="selectApiLink($event)"
         class="block mt-6"
       ></datahub-record-apis>
     </div>
@@ -138,7 +138,7 @@
         </p>
         <button type="button" class="text-main" (click)="closeForm()">
           <span class="text-sm text-primary" translate
-            >record.metadata.api.form.close</span
+            >record.metadata.api.form.closeButton</span
           >
           <mat-icon
             class="material-symbols-outlined ml-1 align-middle leading-none text-primary"
diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts b/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts
index f030ae31cd..487ae6c83f 100644
--- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts
+++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts
@@ -20,7 +20,13 @@ 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'
-import { DatasetServiceDistribution } from '@geonetwork-ui/common/domain/record'
+import {
+  CatalogRecord,
+  DatasetRecord,
+  DatasetServiceDistribution,
+  Individual,
+  Organization,
+} from '@geonetwork-ui/common/domain/record'
 
 const SAMPLE_RECORD = {
   ...DATASET_RECORDS[0],
@@ -594,48 +600,48 @@ describe('RecordMetadataComponent', () => {
       })
     })
   })
-  describe('#selectCard', () => {
+  describe('#selectApiLink', () => {
     const serviceDistributionMockA = {
       type: 'service',
-      url: 'http://myogcapifeatures.test',
+      url: new URL('http://myogcapifeatures.test'),
       accessServiceProtocol: 'ogcFeatures',
     } as DatasetServiceDistribution
     const serviceDistributionMockB = {
       type: 'service',
-      url: 'http://another-mock.test',
+      url: new URL('http://another-mock.test'),
       accessServiceProtocol: 'ogcFeatures',
     } as DatasetServiceDistribution
-    describe('calling selectCard ones', () => {
+    describe('calling selectApiLink ones', () => {
       it('should pass value of selected card to facade.selectedApiLink$', async () => {
-        component.selectCard(serviceDistributionMockA)
+        component.selectApiLink(serviceDistributionMockA)
         const apiLink = await firstValueFrom(facade.selectedApiLink$)
         expect(apiLink).toEqual(serviceDistributionMockA)
       })
     })
-    describe('calling selectCard twice with different values', () => {
+    describe('calling selectApiLink twice with different values', () => {
       it('should pass second value to facade.selectedApiLink$', async () => {
-        component.selectCard(serviceDistributionMockA)
-        component.selectCard(serviceDistributionMockB)
+        component.selectApiLink(serviceDistributionMockA)
+        component.selectApiLink(serviceDistributionMockB)
         const apiLink = await firstValueFrom(facade.selectedApiLink$)
         expect(apiLink).toEqual(serviceDistributionMockB)
       })
     })
-    describe('calling selectCard multiple times with different values', () => {
+    describe('calling selectApiLink multiple times with different values', () => {
       it('should pass last value to facade.selectedApiLink$', async () => {
-        component.selectCard(serviceDistributionMockA)
-        component.selectCard(serviceDistributionMockB)
-        component.selectCard(serviceDistributionMockA)
-        component.selectCard(serviceDistributionMockB)
-        component.selectCard(serviceDistributionMockA)
+        component.selectApiLink(serviceDistributionMockA)
+        component.selectApiLink(serviceDistributionMockB)
+        component.selectApiLink(serviceDistributionMockA)
+        component.selectApiLink(serviceDistributionMockB)
+        component.selectApiLink(serviceDistributionMockA)
         const apiLink = await firstValueFrom(facade.selectedApiLink$)
         expect(apiLink).toEqual(serviceDistributionMockA)
       })
     })
 
-    describe('calling selectCard twice with different values', () => {
+    describe('calling selectApiLink twice with different values', () => {
       it('should pass undefined to facade.selectedApiLink$', async () => {
-        component.selectCard(serviceDistributionMockA)
-        component.selectCard(serviceDistributionMockA)
+        component.selectApiLink(serviceDistributionMockA)
+        component.selectApiLink(serviceDistributionMockA)
         const apiLink = await firstValueFrom(facade.selectedApiLink$)
         expect(apiLink).toBeUndefined()
       })
diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts b/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
index 7fc56c0b99..78e5a83cf1 100644
--- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
+++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
@@ -88,7 +88,7 @@ export class RecordMetadataComponent {
       .subscribe((filters) => this.searchService.updateFilters(filters))
   }
 
-  selectCard(val) {
+  selectApiLink(val) {
     this.facade.selectedApiLink$.getValue() === val
       ? this.facade.selectedApiLink$.next(undefined)
       : this.facade.selectedApiLink$.next(val)
diff --git a/libs/ui/elements/src/lib/api-card/api-card.component.html b/libs/ui/elements/src/lib/api-card/api-card.component.html
index 586a2aee21..26fb22ad2f 100644
--- a/libs/ui/elements/src/lib/api-card/api-card.component.html
+++ b/libs/ui/elements/src/lib/api-card/api-card.component.html
@@ -28,7 +28,11 @@
             displayText
         }"
         mat-raised-button
-        [matTooltip]="'record.metadata.api.form.open' | translate"
+        [matTooltip]="
+          !currentlyActive
+            ? ('record.metadata.api.form.openForm' | translate)
+            : ('record.metadata.api.form.closeForm' | translate)
+        "
         matTooltipPosition="above"
       >
         <mat-icon
diff --git a/libs/ui/elements/src/lib/api-card/api-card.component.spec.ts b/libs/ui/elements/src/lib/api-card/api-card.component.spec.ts
index 601e0db887..76307224ba 100644
--- a/libs/ui/elements/src/lib/api-card/api-card.component.spec.ts
+++ b/libs/ui/elements/src/lib/api-card/api-card.component.spec.ts
@@ -6,7 +6,7 @@ import { DatasetServiceDistribution } from '@geonetwork-ui/common/domain/record'
 describe('ApiCardComponent', () => {
   let component: ApiCardComponent
   let fixture: ComponentFixture<ApiCardComponent>
-  let openPanelEmit
+  let openRecordApiFormEmit
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ApiCardComponent],
@@ -20,9 +20,9 @@ describe('ApiCardComponent', () => {
     component.link = {
       accessServiceProtocol: 'ogcFeatures',
     } as DatasetServiceDistribution
-    openPanelEmit = component.openCustomPanel
+    openRecordApiFormEmit = component.openRecordApiForm
     jest.resetAllMocks()
-    jest.spyOn(openPanelEmit, 'emit')
+    jest.spyOn(openRecordApiFormEmit, 'emit')
     fixture.detectChanges()
   })
 
@@ -35,10 +35,10 @@ describe('ApiCardComponent', () => {
     expect(component.displayApiFormButton).toBe(true)
   })
 
-  it('should toggle currentlyActive and emit openCustomPanel event', () => {
+  it('should toggle currentlyActive and emit openRecordApiForm event', () => {
     component.openPanel()
 
     expect(component.currentlyActive).toBe(true)
-    expect(openPanelEmit.emit).toHaveBeenCalled()
+    expect(openRecordApiFormEmit.emit).toHaveBeenCalled()
   })
 })
diff --git a/libs/ui/elements/src/lib/api-card/api-card.component.ts b/libs/ui/elements/src/lib/api-card/api-card.component.ts
index a03207570a..3f358ccd4c 100644
--- a/libs/ui/elements/src/lib/api-card/api-card.component.ts
+++ b/libs/ui/elements/src/lib/api-card/api-card.component.ts
@@ -3,9 +3,11 @@ import {
   Component,
   EventEmitter,
   Input,
+  OnChanges,
   OnDestroy,
   OnInit,
   Output,
+  SimpleChanges,
 } from '@angular/core'
 import { DatasetServiceDistribution } from '@geonetwork-ui/common/domain/record'
 
@@ -15,11 +17,12 @@ import { DatasetServiceDistribution } from '@geonetwork-ui/common/domain/record'
   styleUrls: ['./api-card.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ApiCardComponent implements OnInit {
+export class ApiCardComponent implements OnInit, OnChanges {
   @Input() link: DatasetServiceDistribution
+  @Input() currentLink: DatasetServiceDistribution
   displayApiFormButton: boolean
   currentlyActive = false
-  @Output() openCustomPanel: EventEmitter<DatasetServiceDistribution> =
+  @Output() openRecordApiForm: EventEmitter<DatasetServiceDistribution> =
     new EventEmitter<DatasetServiceDistribution>()
 
   ngOnInit() {
@@ -27,8 +30,13 @@ export class ApiCardComponent implements OnInit {
       this.link.accessServiceProtocol === 'ogcFeatures' ? true : false
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    this.currentlyActive =
+      changes.currentLink.currentValue === this.link ? true : false
+  }
+
   openPanel() {
     this.currentlyActive = !this.currentlyActive
-    this.openCustomPanel.emit(this.currentlyActive ? this.link : undefined)
+    this.openRecordApiForm.emit(this.currentlyActive ? this.link : undefined)
   }
 }
diff --git a/libs/ui/elements/src/lib/record-api-form/record-api-form.component.css b/libs/ui/elements/src/lib/record-api-form/record-api-form.component.css
index 7fb65bbd51..4d0bb8dd17 100644
--- a/libs/ui/elements/src/lib/record-api-form/record-api-form.component.css
+++ b/libs/ui/elements/src/lib/record-api-form/record-api-form.component.css
@@ -2,6 +2,7 @@ gn-ui-text-input::ng-deep input,
 input[type='text'] {
   color: black;
   width: 7rem;
+  height: 2.2rem;
 }
 
 gn-ui-dropdown-selector::ng-deep div {
diff --git a/libs/ui/elements/src/lib/record-api-form/record-api-form.component.ts b/libs/ui/elements/src/lib/record-api-form/record-api-form.component.ts
index bc88915200..62fc3f7cb6 100644
--- a/libs/ui/elements/src/lib/record-api-form/record-api-form.component.ts
+++ b/libs/ui/elements/src/lib/record-api-form/record-api-form.component.ts
@@ -3,8 +3,8 @@ import { DatasetServiceDistribution } from '@geonetwork-ui/common/domain/record'
 import { BehaviorSubject, combineLatest, map } from 'rxjs'
 
 const DEFAULT_PARAMS = {
-  OFFSET: '0',
-  LIMIT: '0',
+  OFFSET: '',
+  LIMIT: '',
   FORMAT: 'json',
 }
 @Component({
@@ -15,7 +15,6 @@ const DEFAULT_PARAMS = {
 })
 export class RecordApiFormComponent {
   @Input() set apiLink(value: DatasetServiceDistribution) {
-    this.linkHref = new URL('/data/swagger-ui/index.html', value.url.origin)
     this.apiBaseUrl = value.url.href
     this.resetUrl()
   }
@@ -23,7 +22,6 @@ export class RecordApiFormComponent {
   limit$ = new BehaviorSubject('')
   format$ = new BehaviorSubject('')
   apiBaseUrl: string
-  linkHref: URL
   formatsList = [
     { label: 'JSON', value: 'json' },
     { label: 'CSV', value: 'csv' },
diff --git a/translations/de.json b/translations/de.json
index c15a18d4e2..1295c45871 100644
--- a/translations/de.json
+++ b/translations/de.json
@@ -188,7 +188,8 @@
   "record.metadata.api": "API",
   "record.metadata.api.form.access": "",
   "record.metadata.api.form.baseUrl": "",
-  "record.metadata.api.form.close": "",
+  "record.metadata.api.form.closeButton": "",
+  "record.metadata.api.form.closeForm": "",
   "record.metadata.api.form.create": "",
   "record.metadata.api.form.customUrl": "",
   "record.metadata.api.form.limit": "",
diff --git a/translations/en.json b/translations/en.json
index ac9b2578de..4cadd952e3 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -188,12 +188,13 @@
   "record.metadata.api": "API",
   "record.metadata.api.form.access": "You may also access the",
   "record.metadata.api.form.baseUrl": "Root URL",
-  "record.metadata.api.form.close": "CLOSE",
+  "record.metadata.api.form.closeButton": "CLOSE",
+  "record.metadata.api.form.closeForm": "Close the form",
   "record.metadata.api.form.create": "Create your request",
   "record.metadata.api.form.customUrl": "Custom URL",
   "record.metadata.api.form.limit": "Count of records",
   "record.metadata.api.form.offset": "Count of first record",
-  "record.metadata.api.form.open": "Open the custom panel",
+  "record.metadata.api.form.openForm": "Open the form",
   "record.metadata.api.form.reset": "RESET",
   "record.metadata.api.format.swagger": "Swagger UI generation console",
   "record.metadata.api.form.title": "Generate a custom URL",
diff --git a/translations/es.json b/translations/es.json
index 88b8214630..21d34f9bef 100644
--- a/translations/es.json
+++ b/translations/es.json
@@ -188,7 +188,8 @@
   "record.metadata.api": "",
   "record.metadata.api.form.access": "",
   "record.metadata.api.form.baseUrl": "",
-  "record.metadata.api.form.close": "",
+  "record.metadata.api.form.closeButton": "",
+  "record.metadata.api.form.closeForm": "",
   "record.metadata.api.form.create": "",
   "record.metadata.api.form.customUrl": "",
   "record.metadata.api.form.limit": "",
diff --git a/translations/fr.json b/translations/fr.json
index 0f734ed4ee..276d74b320 100644
--- a/translations/fr.json
+++ b/translations/fr.json
@@ -188,7 +188,8 @@
   "record.metadata.api": "API",
   "record.metadata.api.form.access": "Vous pouvez également accéder à la",
   "record.metadata.api.form.baseUrl": "URL racine",
-  "record.metadata.api.form.close": "FERMER",
+  "record.metadata.api.form.closeButton": "FERMER",
+  "record.metadata.api.form.closeForm": "Fermer le panneau de personnalisation",
   "record.metadata.api.form.create": "Créer votre requête",
   "record.metadata.api.form.customUrl": "URL personnalisée",
   "record.metadata.api.form.limit": "Nombre d'enregistrements",
diff --git a/translations/it.json b/translations/it.json
index eddeef5d0f..a43fdc097f 100644
--- a/translations/it.json
+++ b/translations/it.json
@@ -188,7 +188,8 @@
   "record.metadata.api": "",
   "record.metadata.api.form.access": "",
   "record.metadata.api.form.baseUrl": "",
-  "record.metadata.api.form.close": "",
+  "record.metadata.api.form.closeButton": "",
+  "record.metadata.api.form.closeForm": "",
   "record.metadata.api.form.create": "",
   "record.metadata.api.form.customUrl": "",
   "record.metadata.api.form.limit": "",
diff --git a/translations/nl.json b/translations/nl.json
index 36ee7a1015..0ed1fa8f75 100644
--- a/translations/nl.json
+++ b/translations/nl.json
@@ -188,7 +188,8 @@
   "record.metadata.api": "",
   "record.metadata.api.form.access": "",
   "record.metadata.api.form.baseUrl": "",
-  "record.metadata.api.form.close": "",
+  "record.metadata.api.form.closeButton": "",
+  "record.metadata.api.form.closeForm": "",
   "record.metadata.api.form.create": "",
   "record.metadata.api.form.customUrl": "",
   "record.metadata.api.form.limit": "",
diff --git a/translations/pt.json b/translations/pt.json
index 92a775890c..1657e28ecc 100644
--- a/translations/pt.json
+++ b/translations/pt.json
@@ -188,7 +188,8 @@
   "record.metadata.api": "",
   "record.metadata.api.form.access": "",
   "record.metadata.api.form.baseUrl": "",
-  "record.metadata.api.form.close": "",
+  "record.metadata.api.form.closeButton": "",
+  "record.metadata.api.form.closeForm": "",
   "record.metadata.api.form.create": "",
   "record.metadata.api.form.customUrl": "",
   "record.metadata.api.form.limit": "",