Merge pull request #122 from camptocamp/external-viewer-button

[Dataset Page] Add external viewer button

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

@@ -98,6 +98,18 @@ describe('datasets', () => {
       cy.get('gn-ui-chart-view').should('not.exist')
     })
 
+    it('should open mapstore with dataset in a new tab', () => {
+      cy.window().then((win) => {
+        cy.stub(win, 'open').as('windowOpen')
+      })
+      cy.get('mel-datahub-external-viewer-button').find('button').click()
+      cy.get('@windowOpen').should(
+        'be.calledWith',
+        '/mapstore/#/?actions=[{"type":"CATALOG:ADD_LAYERS_FROM_CATALOGS","layers":["rectangles_200m_menage_erbm"],"sources":[{"url":"https%3A%2F%2Fwww.geo2france.fr%2Fgeoserver%2Finsee%2Fows","type":"wms"}]}]',
+        '_blank'
+      )
+    })
+
     it('should switch between tabs and display the table and analysis components', () => {
       cy.get('mel-datahub-dataset-visualisation')
         .find('.mat-mdc-tab-labels')

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

@@ -34,6 +34,8 @@ import {
   ErrorComponent,
   CopyTextButtonComponent,
   MapContainerComponent,
+  EXTERNAL_VIEWER_URL_TEMPLATE,
+  EXTERNAL_VIEWER_OPEN_NEW_TAB,
 } from 'geonetwork-ui'
 import {
   TranslateLoader,
@@ -74,6 +76,9 @@ import { environment } from '../environments/environnment'
 import { MelModule, MelEmbeddedTranslateLoader } from '@mel-dataplatform/mel'
 import { MelFieldsService } from './search/service/fields.service'
 import { MelDatahubDropdownRangeComponent } from './search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component'
+import { matCloseOutline } from '@ng-icons/material-icons/outline'
+import { NgIconsModule } from '@ng-icons/core'
+import { matMoreHoriz } from '@ng-icons/material-icons/baseline'
 
 @NgModule({
   declarations: [
@@ -130,6 +135,7 @@ import { MelDatahubDropdownRangeComponent } from './search/search-filters/mel-da
     ChartViewComponent,
     TableViewComponent,
     MapContainerComponent,
+    NgIconsModule.withIcons({ matCloseOutline, matMoreHoriz }),
     TranslateModule.forRoot({
       ...TRANSLATE_DEFAULT_CONFIG,
       loader: {
@@ -176,6 +182,15 @@ import { MelDatahubDropdownRangeComponent } from './search/search-filters/mel-da
       provide: LOGIN_URL,
       useFactory: () => '${current_url}?login',
     },
+    {
+      provide: EXTERNAL_VIEWER_URL_TEMPLATE,
+      useFactory: () =>
+        '/mapstore/#/?actions=[{"type":"CATALOG:ADD_LAYERS_FROM_CATALOGS","layers":["${layer_name}"],"sources":[{"url":"${service_url}","type":"${service_type}"}]}]',
+    },
+    {
+      provide: EXTERNAL_VIEWER_OPEN_NEW_TAB,
+      useFactory: () => true,
+    },
     { provide: FieldsService, useClass: MelFieldsService },
   ],
   bootstrap: [AppComponent],

apps/datahub/src/app/dataset/dataset-apis/api-card/api-card.component.html

@@ -39,13 +39,13 @@ <h1 class="font-bold text-[17px] line-clamp-2">
         "
         matTooltipPosition="above"
       >
-        <mat-icon
-          class="material-symbols-outlined pointer-events-none align-middle card-icon"
+        <ng-icon
+          class="pointer-events-none align-middle card-icon"
+          name="matMoreHoriz"
           [ngClass]="{
             'text-primary-dark opacity-100': currentlyActive
           }"
-          >more_horiz</mat-icon
-        >
+        ></ng-icon>
       </button>
       }
     </div>

apps/datahub/src/app/dataset/dataset-apis/api-form/api-form.component.html

@@ -79,10 +79,10 @@
       target="_blank"
       translate
       >mel.dataset.api.swagger
-      <mat-icon
-        class="material-symbols-outlined !w-[12px] !h-[14px] !text-[14px] opacity-75"
-        >open_in_new</mat-icon
-      >
+      <ng-icon
+        class="!w-[12px] !h-[14px] !text-[14px] opacity-75"
+        name="matOpenInNew"
+      ></ng-icon>
     </a>
   </div>
 </div>

apps/datahub/src/app/dataset/dataset-apis/dataset-apis.component.html

@@ -52,10 +52,11 @@
           >
             mel.record.metadata.api.form.closeButton
           </div>
-          <mat-icon
-            class="!w-5 !h-5 text-xl font-bold material-symbols-outlined !flex items-center"
-            >close</mat-icon
+          <ng-icon
+            class="!w-5 !h-5 text-xl font-bold !flex items-center"
+            name="matCloseOutline"
           >
+          </ng-icon>
         </button>
       </div>
       <mel-datahub-api-form [apiLink]="selectedApiLink"></mel-datahub-api-form>

apps/datahub/src/app/dataset/dataset-information/dataset-information.component.html

@@ -61,10 +61,10 @@
         translate
         >mel.dataset.details
       </a>
-      <mat-icon
+      <ng-icon
         class="material-symbols-outlined !w-[12px] !h-[14px] !text-[14px] opacity-75 mt-1"
-        >open_in_new</mat-icon
-      >
+        name="matOpenInNew"
+      ></ng-icon>
     </div>
     }
   </div>

apps/datahub/src/app/dataset/dataset-visualisation/map-view/map-view.component.html

@@ -1,12 +1,17 @@
 <div class="w-full h-full flex flex-col p-1">
-  <div class="w-full flex justify-end">
+  <div class="w-full flex justify-end px-4">
     <gn-ui-dropdown-selector
       class="truncate mt-2 mr-4 p-2"
       extraBtnClass="!text-primary font-sans font-medium"
       [title]="'mel.record.preview.select' | translate"
       [choices]="dropdownChoices$ | async"
       (selectValue)="selectLinkToDisplay($event)"
     ></gn-ui-dropdown-selector>
+    <mel-datahub-external-viewer-button
+      class="shrink-0 py-2 place-self-end"
+      [link]="selectedLink$ | async"
+    >
+    </mel-datahub-external-viewer-button>
   </div>
   <div
     class="relative h-full bg-white border border-gray-300 rounded overflow-hidden m-4"
@@ -24,11 +29,7 @@
         (click)="resetSelection()"
         class="rounded bg-primary-opacity-25 absolute right-[0.5em]"
       >
-        <mat-icon
-          class="material-symbols-outlined align-middle text-sm"
-          style="height: 21px"
-          >close</mat-icon
-        >
+        <ng-icon class="align-middle text-sm" name="matClose"></ng-icon>
       </button>
       <gn-ui-feature-detail [feature]="selection"></gn-ui-feature-detail>
     </div>

apps/datahub/src/app/search/search-filters/dropdown-multiselect/dropdown-multiselect.component.html

@@ -18,21 +18,19 @@
   </div>
   <button class="h-6 w-6" data-cy="clearSelection">
     @if(hasSelectedChoices && !overlayOpen){
-    <mat-icon
-      class="material-symbols-outlined shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn"
+    <ng-icon
+      class="shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn"
+      name="matClose"
       (click)="clearSelection($event)"
     >
-      close
-    </mat-icon>
+    </ng-icon>
     }
   </button>
-  <mat-icon class="material-symbols-outlined shrink-0">
-    @if(overlayOpen){
-    <ng-container>expand_less</ng-container>
-    } @else {
-    <ng-container>expand_more</ng-container>
-    }
-  </mat-icon>
+  @if(overlayOpen){
+  <ng-icon name="matExpandLess" class="shrink-0"></ng-icon>
+  } @else {
+  <ng-icon name="matExpandMore" class="shrink-0"></ng-icon>
+  }
 </button>
 
 <ng-template
@@ -75,11 +73,10 @@
         <div
           class="flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0"
         >
-          <mat-icon
-            class="material-symbols-outlined !h-[12px] !w-[12px] text-[12px]"
-          >
-            close</mat-icon
-          >
+          <ng-icon
+            class="!h-[12px] !w-[12px] text-[12px]"
+            name="matClose"
+          ></ng-icon>
         </div>
       </button>
       } @if(allowSearch){
@@ -97,11 +94,8 @@
           class="absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2"
           (click)="clearSearchInputValue($event)"
         >
-          <mat-icon
-            class="material-symbols-outlined !h-[10px] !w-[12px] text-[12px]"
-          >
-            close
-          </mat-icon>
+          <ng-icon class="!h-[10px] !w-[12px] text-[12px]" name="matClose">
+          </ng-icon>
         </button>
         }
       </div>

apps/datahub/src/app/search/search-filters/mel-datahub-dropdown-range/mel-datahub-dropdown-range.component.html

@@ -8,21 +8,19 @@
   <span>{{ title }}</span>
   <button class="h-6 w-6" data-cy="clearSelection">
     @if(hasSelectedChoices && !overlayOpen){
-    <mat-icon
-      class="material-symbols-outlined shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn"
+    <ng-icon
+      class="shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn"
+      name="matClose"
       (click)="clearSelection($event)"
     >
-      close
-    </mat-icon>
+    </ng-icon>
     }
   </button>
-  <mat-icon class="material-symbols-outlined shrink-0">
-    @if(overlayOpen){
-    <ng-container>expand_less</ng-container>
-    } @else {
-    <ng-container>expand_more</ng-container>
-    }
-  </mat-icon>
+  @if(overlayOpen){
+  <ng-icon name="matExpandLess" class="shrink-0"></ng-icon>
+  } @else {
+  <ng-icon name="matExpandMore" class="shrink-0"></ng-icon>
+  }
 </button>
 
 <ng-template

apps/datahub/src/app/search/search-filters/search-filters.component.html

@@ -32,10 +32,10 @@
       translate
     >
       mel.datahub.search.filters.more
-      <mat-icon
-        class="material-symbols-outlined ml-1 align-middle leading-none mt-0.5"
-        >keyboard_arrow_down</mat-icon
-      >
+      <ng-icon
+        name="matExpandMore"
+        class="ml-1 align-middle leading-none mt-0.5"
+      ></ng-icon>
     </button>
     } @else {
     <button
@@ -46,10 +46,10 @@
       translate
     >
       mel.datahub.search.filters.reduce
-      <mat-icon
-        class="material-symbols-outlined ml-1 align-middle leading-none mt-0.5"
-        >keyboard_arrow_up</mat-icon
-      >
+      <ng-icon
+        name="matExpandLess"
+        class="ml-1 align-middle leading-none mt-0.5"
+      ></ng-icon>
     </button>
     }
     <button

libs/mel/src/lib/autocomplete/autocomplete.component.html

@@ -17,7 +17,7 @@
       [ariaLabel]="'mel.datahub.search.clear' | translate"
       (click)="clear()"
     >
-      <mat-icon class="material-symbols-outlined">close</mat-icon>
+      <ng-icon name="matClose"></ng-icon>
     </button>
     }
     <button
@@ -26,7 +26,7 @@
       aria-label="Trigger search"
       (click)="handleClickSearch()"
     >
-      <mat-icon class="material-symbols-outlined">search</mat-icon>
+      <ng-icon name="matSearch"></ng-icon>
     </button>
   </div>
 

libs/mel/src/lib/external-viewer-button/external-viewer-button.component.html

@@ -0,0 +1,8 @@
+<gn-ui-button
+  *ngIf="externalViewer"
+  (buttonClick)="openInExternalViewer()"
+  [title]="'record.externalViewer.open' | translate"
+  extraClass="rounded-md border-none mel-primary-button"
+>
+  <ng-icon name="matOpenInNew"></ng-icon>
+</gn-ui-button>

libs/mel/src/lib/external-viewer-button/external-viewer-button.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { ExternalViewerButtonComponent } from 'geonetwork-ui'
+
+@Component({
+  selector: 'mel-datahub-external-viewer-button',
+  templateUrl: './external-viewer-button.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MelExternalViewerButtonComponent extends ExternalViewerButtonComponent {}

libs/mel/src/lib/mel.module.ts

@@ -32,6 +32,14 @@ import { ReactiveFormsModule } from '@angular/forms'
 import { TranslateModule } from '@ngx-translate/core'
 import { StripHtmlPipe } from './strip-html.pipe'
 import { MelPaginationButtonsComponent } from './pagination-buttons/pagination-buttons.component'
+import { MelExternalViewerButtonComponent } from './external-viewer-button/external-viewer-button.component'
+import { NgIconsModule } from '@ng-icons/core'
+import {
+  matChevronLeft,
+  matChevronRight,
+  matOpenInNew,
+  matSearch,
+} from '@ng-icons/material-icons/baseline'
 
 @NgModule({
   imports: [
@@ -48,6 +56,12 @@ import { MelPaginationButtonsComponent } from './pagination-buttons/pagination-b
     ReactiveFormsModule,
     PopupAlertComponent,
     UiInputsModule,
+    NgIconsModule.withIcons({
+      matOpenInNew,
+      matSearch,
+      matChevronLeft,
+      matChevronRight,
+    }),
   ],
   declarations: [
     ResultsListComponent,
@@ -68,6 +82,7 @@ import { MelPaginationButtonsComponent } from './pagination-buttons/pagination-b
     MelAutocompleteComponent,
     StripHtmlPipe,
     MelPaginationButtonsComponent,
+    MelExternalViewerButtonComponent,
   ],
   exports: [
     ResultsListComponent,
@@ -87,6 +102,7 @@ import { MelPaginationButtonsComponent } from './pagination-buttons/pagination-b
     MelFuzzySearchComponent,
     MelAutocompleteComponent,
     MelPaginationButtonsComponent,
+    MelExternalViewerButtonComponent,
   ],
 })
 export class MelModule {}

libs/mel/src/lib/pagination-buttons/pagination-buttons.component.html

@@ -6,9 +6,7 @@
       (buttonClick)="listComponent.goToPrevPage()"
       extraClass="pagination-btn-nav mr-8"
     >
-      <mat-icon class="pagination-btn-arrow material-symbols-outlined"
-        >chevron_left</mat-icon
-      >
+      <ng-icon class="pagination-btn-arrow" name="matChevronLeft"></ng-icon>
       <span class="font-medium ml-1" translate
         >mel.datahub.search.pagination.previous</span
       >
@@ -32,9 +30,7 @@
       <span class="font-medium mr-1" translate
         >mel.datahub.search.pagination.next</span
       >
-      <mat-icon class="pagination-btn-arrow material-symbols-outlined"
-        >chevron_right</mat-icon
-      >
+      <ng-icon class="pagination-btn-arrow" name="matChevronRight"></ng-icon>
     </gn-ui-button>
     }
   </div>