geocat: add geocat-header with langage switcher

Author: f-necas

apps/datahub/src/app/app.component.html

@@ -2,5 +2,6 @@
   gnUiSearchRouterContainer="mainSearch"
   class="selection:bg-primary-lightest selection:text-primary-darker"
 >
+  <datahub-geocat-header></datahub-geocat-header>
   <router-outlet></router-outlet>
 </div>

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

@@ -104,6 +104,7 @@ import {
 } from '@ng-icons/material-icons/outline'
 import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
 import { ORGANIZATIONS_STRATEGY } from '@geonetwork-ui/api/repository/gn4'
+import { GeocatHeaderComponent } from './home/geocat-header/geocat-header.component'
 
 export const metaReducers: MetaReducer[] = !environment.production ? [] : []
 
@@ -176,6 +177,7 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
     OrganisationsComponent,
     LanguageSwitcherComponent,
     LocationSearchComponent,
+    GeocatHeaderComponent,
   ],
   providers: [
     provideNgIconsConfig({

apps/datahub/src/app/home/geocat-header/geocat-header.component.html

@@ -0,0 +1,17 @@
+<div
+  class="px-5 mx-auto flex items-center justify-center sm:justify-end gap-6 py-1 text-sm"
+>
+  <a class="block hover:underline" [href]="gnLinkGeneral" target="_blank">{{
+    'datahub.header.geonetwork' | translate
+  }}</a>
+  <a class="block hover:underline" [href]="docLink" target="_blank">{{
+    'datahub.header.documentation' | translate
+  }}</a>
+  <a class="block hover:underline" [href]="gnLinkAdmin" target="_blank">{{
+    'datahub.header.admin' | translate
+  }}</a>
+  <gn-ui-language-switcher
+    *ngIf="showLanguageSwitcher"
+    class="language-switcher"
+  ></gn-ui-language-switcher>
+</div>

apps/datahub/src/app/home/geocat-header/geocat-header.component.spec.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { GeocatHeaderComponent } from './geocat-header.component'
+import { TranslateModule } from '@ngx-translate/core'
+
+jest.mock('@geonetwork-ui/util/app-config', () => ({
+  getGlobalConfig: jest.fn(() => ({
+    LANGUAGES: ['de', 'fr'],
+  })),
+}))
+
+describe('GeocatHeaderComponent', () => {
+  let component: GeocatHeaderComponent
+  let fixture: ComponentFixture<GeocatHeaderComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [GeocatHeaderComponent],
+      imports: [TranslateModule.forRoot()],
+    })
+    fixture = TestBed.createComponent(GeocatHeaderComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

apps/datahub/src/app/home/geocat-header/geocat-header.component.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { LANG_2_TO_3_MAPPER } from '@geonetwork-ui/util/i18n'
+import { getGlobalConfig } from '@geonetwork-ui/util/app-config'
+import { LanguageSwitcherComponent } from '@geonetwork-ui/ui/catalog'
+import { CommonModule } from '@angular/common'
+
+@Component({
+  selector: 'datahub-geocat-header',
+  templateUrl: './geocat-header.component.html',
+  imports: [CommonModule, TranslateModule, LanguageSwitcherComponent],
+  standalone: true,
+})
+export class GeocatHeaderComponent {
+  showLanguageSwitcher = getGlobalConfig().LANGUAGES?.length > 0
+
+  constructor(private translate: TranslateService) {}
+
+  get docLink() {
+    return `https://www.info.geocat.ch`
+  }
+
+  get gnLinkAdmin() {
+    return `/geonetwork/srv/${
+      LANG_2_TO_3_MAPPER[this.translate.currentLang] || 'eng'
+    }/catalog.edit#/board`
+  }
+
+  get gnLinkGeneral() {
+    return `/geonetwork/srv/${
+      LANG_2_TO_3_MAPPER[this.translate.currentLang] || 'eng'
+    }/catalog.search#/home`
+  }
+}

apps/datahub/src/app/home/home-header/home-header.component.html

@@ -91,13 +91,13 @@
         class="tabs flex justify-between font-medium -mx-5 sm:mx-0 sm:mt-32 inset-x-0 bottom-0 z-50"
       ></datahub-navigation-menu>
     </div>
-    <gn-ui-language-switcher
+    <!-- <gn-ui-language-switcher
       *ngIf="showLanguageSwitcher"
       class="language-switcher absolute top-3.5 right-6 text-[13px]"
       [style.--color-main]="foregroundColor"
       [style.--color-gray-300]="foregroundColor"
       [style.--color-primary-darker]="foregroundColor"
       [style.--color-primary-black]="foregroundColor"
-    ></gn-ui-language-switcher>
+    ></gn-ui-language-switcher> -->
   </div>
 </header>

apps/datahub/src/app/home/home-header/home-header.component.spec.ts

@@ -260,7 +260,8 @@ describe('HeaderComponent', () => {
         })
       })
 
-      describe('language switcher', () => {
+      // skipped for geocat
+      describe.skip('language switcher', () => {
         describe('given predefined languages', () => {
           it('should display language switcher', () => {
             const languageSwitcher = fixture.debugElement.queryAll(

apps/datahub/src/app/organization/organization-header/organization-header.component.html

@@ -12,14 +12,14 @@
         >
         </gn-ui-navigation-button>
       </div>
-      <div class="flex flex-row mr-6 content-center gap-3">
+      <!-- <div class="flex flex-row mr-6 content-center gap-3">
         <gn-ui-language-switcher
           *ngIf="showLanguageSwitcher"
           class="language-switcher text-[13px] mt-0.5"
           [style.--color-main]="foregroundColor"
           [style.--color-gray-300]="foregroundColor"
         ></gn-ui-language-switcher>
-      </div>
+      </div> -->
     </div>
     <ng-container *ngIf="organization">
       <div