geonetwork-ui 2.6.0-dev.a6b2f3e85 → 2.6.0-dev.a8e63e487

package/src/libs/api/metadata-converter/src/lib/common/distribution.mapper.ts

@@ -4,6 +4,7 @@ export function matchProtocol(protocol: string): ServiceProtocol {
   if (/wms/i.test(protocol)) return 'wms'
   if (/wfs/i.test(protocol)) return 'wfs'
   if (/wmts/i.test(protocol)) return 'wmts'
+  if (/tms/i.test(protocol)) return 'tms'
   if (/wps/i.test(protocol)) return 'wps'
   if (/ogc\W*api\W*features/i.test(protocol)) return 'ogcFeatures'
   if (/esri/i.test(protocol)) return 'esriRest'

package/src/libs/api/metadata-converter/src/lib/fixtures/geocat-ch.records.ts

@@ -617,7 +617,7 @@ Die Quelle ist zu bezeichnen: „Quelle: Stadt Zürich“.`,
   status: 'completed',
   updateFrequency: 'asNeeded',
   defaultLanguage: 'de',
-  otherLanguages: ['fr', 'it', 'en', 'rm'],
+  otherLanguages: ['fr', 'it', 'en', 'rm', 'aar'],
   translations: {
     abstract: {
       en: 'The perimeters of the Alpine Convention in Switzerland. The Alpine Convention is an international treaty between the eight Alpine countries: Germany, France, Italy, Liechtenstein, Monaco, Austria, Switzerland and Slovenia, plus the European Union. The aim of the treaty is to protect the Alps by means of cross-sectoral, integrated and sustainable policies.',

package/src/libs/api/metadata-converter/src/lib/gn4/gn4.field.mapper.ts

@@ -152,12 +152,22 @@ export class Gn4FieldMapper {
       )
       const languages = langList.map((lang) => LANG_3_TO_2_MAPPER[lang])
       const defaultLanguage = output.defaultLanguage ?? languages[0] ?? null // set the first language as main one as fallback
+
+      return {
+        ...output,
+        defaultLanguage,
+      }
+    },
+    otherLanguage: (output, source) => {
+      const langList = getAsArray(selectField<string>(source, 'otherLanguage'))
+      const languages = langList.map((lang) => LANG_3_TO_2_MAPPER[lang])
+      const defaultLanguage = output.defaultLanguage ?? languages[0] ?? null
       const otherLanguages = languages.filter(
         (lang) => lang !== defaultLanguage
       )
+
       return {
         ...output,
-        defaultLanguage,
         otherLanguages,
       }
     },
@@ -294,12 +304,52 @@ export class Gn4FieldMapper {
         ) ?? {},
         '_source'
       )
-      const featureCatalogIdentifier = selectField(
+      const featureCatalogIdentifier: string = selectField(
         <SourceWithUnknownProps>fcatSource,
         'uuid'
       )
-      return featureCatalogIdentifier
-        ? this.addExtra({ featureCatalogIdentifier }, output)
+      const sourceOfLinks = getAsArray(
+        selectField(
+          <SourceWithUnknownProps>selectField(source, 'related'),
+          'hassources'
+        )
+      )
+      const sourceOfIdentifiers: string[] = sourceOfLinks
+        .filter((link) => link['origin'] === 'catalog')
+        .map((link) => {
+          return selectField(
+            selectField(<SourceWithUnknownProps>link, '_source'),
+            'uuid'
+          )
+        })
+      const extraValues: Record<string, string | string[]> = {}
+      if (featureCatalogIdentifier) {
+        extraValues.featureCatalogIdentifier = featureCatalogIdentifier
+      }
+      if (sourceOfIdentifiers && sourceOfIdentifiers.length > 0) {
+        extraValues.sourceOfIdentifiers = sourceOfIdentifiers
+      }
+      return Object.keys(extraValues).length > 0
+        ? this.addExtra(extraValues, output)
+        : output
+    },
+    recordLink: (output, source) => {
+      const recordLinks = getAsArray(
+        selectField<SourceWithUnknownProps[]>(source, 'recordLink')
+      )
+      const sourcesIdentifiers: string[] = recordLinks
+        .filter(
+          (link) => link['origin'] === 'catalog' && link['type'] === 'sources'
+        )
+        .map((link) => selectField(<SourceWithUnknownProps>link, 'to'))
+
+      return sourcesIdentifiers && sourcesIdentifiers.length > 0
+        ? this.addExtra(
+            {
+              sourcesIdentifiers,
+            },
+            output
+          )
         : output
     },
     isPublishedToAll: (output, source) =>
@@ -430,6 +480,7 @@ export class Gn4FieldMapper {
       /^OGC:WMS/.test(protocol) ||
       /^OGC:WFS/.test(protocol) ||
       /^OGC:WMTS/.test(protocol) ||
+      /TMS/i.test(protocol) ||
       /ogc\W*api\W*features/i.test(protocol) ||
       (/^WWW:DOWNLOAD-/.test(protocol) && /data.geopf.fr/.test(url)) // TO DO : change with the good protocol when decided
     ) {

package/src/libs/api/metadata-converter/src/lib/gn4/types/metadata.model.ts

@@ -164,7 +164,6 @@ export type MetadataObject = Partial<{
   resourceDate: ResourceDate[]
   resourceEdition: string
   resourceIdentifier: ResourceIdentifier[]
-  resourceLanguage: string[]
   resourceTemporalDateRange: ResourceTemporalDateRange[]
   resourceTemporalExtentDateRange: ResourceTemporalDateRange[]
   resourceTitleObject: MultilingualField

package/src/libs/api/metadata-converter/src/lib/iso19115-3/read-parts.ts

@@ -363,11 +363,18 @@ export function readOnlineResources(rootEl: XmlElement): OnlineResource[] {
   )(rootEl)
 }
 
-function readLocaleElement(): ChainableFunction<XmlElement, LanguageCode> {
+export function readLocaleElement(): ChainableFunction<
+  XmlElement,
+  LanguageCode
+> {
   return pipe(
     findChildElement('lan:LanguageCode'),
     readAttribute('codeListValue'),
-    map((lang) => (lang ? LANG_3_TO_2_MAPPER[lang.toLowerCase()] : null))
+    map((lang) => {
+      const normalized = lang?.toLowerCase()
+      const iso2Lang = LANG_3_TO_2_MAPPER[normalized]
+      return iso2Lang ?? lang
+    })
   )
 }
 
@@ -381,6 +388,9 @@ export function readDefaultLanguage(rootEl: XmlElement): LanguageCode {
 export function readOtherLanguages(rootEl: XmlElement): LanguageCode[] {
   return pipe(
     findChildrenElement('mdb:otherLocale', false),
-    mapArray(readLocaleElement())
+    mapArray(readLocaleElement()),
+    map((languages) =>
+      languages.filter((lang): lang is LanguageCode => lang !== null)
+    )
   )(rootEl)
 }

package/src/libs/api/metadata-converter/src/lib/iso19115-3/write-parts.ts

@@ -529,7 +529,11 @@ export function writeOnlineResources(
 }
 
 function writeLocaleElement(language: LanguageCode) {
-  const lang3 = LANG_2_TO_3_MAPPER[language.toLowerCase()]
+  const normalizedLang = language.toLowerCase()
+  const lang3 =
+    normalizedLang.length === 2
+      ? LANG_2_TO_3_MAPPER[normalizedLang]
+      : normalizedLang
   return pipe(
     findChildOrCreate('lan:PT_Locale'),
     writeAttribute('id', language.toUpperCase()),

package/src/libs/api/metadata-converter/src/lib/iso19139/read-parts.ts

@@ -65,7 +65,8 @@ export function extractCharacterString(): ChainableFunction<
   return pipe(
     fallback(
       findChildElement('gco:CharacterString', false),
-      findChildElement('gmx:Anchor', false)
+      findChildElement('gmx:Anchor', false),
+      findChildElement('gmx:MimeFileType', false)
     ),
     readText()
   )
@@ -1161,11 +1162,14 @@ export function readOtherLanguages(rootEl: XmlElement): LanguageCode[] {
     findChildrenElement('gmd:locale', false),
     mapArray(
       pipe(
-        findChildElement('gmd:LanguageCode'),
+        findChildElement('lan:LanguageCode'),
         readAttribute('codeListValue'),
-        map((lang) => LANG_3_TO_2_MAPPER[lang.toLowerCase()])
+        map((lang) => LANG_3_TO_2_MAPPER[lang.toLowerCase()] ?? lang)
       )
     ),
+    map((languages) =>
+      languages.filter((lang): lang is LanguageCode => lang !== null)
+    ),
     map((languages) => (languages.length ? languages : [defaultLanguage]))
   )(rootEl)
 }
@@ -1173,7 +1177,7 @@ export function readOtherLanguages(rootEl: XmlElement): LanguageCode[] {
 export function readDefaultLanguage(rootEl: XmlElement): LanguageCode {
   return pipe(
     findChildElement('gmd:language', false),
-    findChildElement('gmd:LanguageCode'),
+    findChildElement('lan:LanguageCode'),
     readAttribute('codeListValue'),
     map((lang) => (lang ? LANG_3_TO_2_MAPPER[lang.toLowerCase()] : null))
   )(rootEl)

package/src/libs/api/metadata-converter/src/lib/iso19139/write-parts.ts

@@ -1471,7 +1471,10 @@ export function writeLanguages(record: DatasetRecord, rootEl: XmlElement) {
       writeAttribute('id', lang.toUpperCase()),
       createNestedChild('gmd:languageCode', 'gmd:LanguageCode'),
       writeAttribute('codeList', 'http://www.loc.gov/standards/iso639-2/'),
-      writeAttribute('codeListValue', LANG_2_TO_3_MAPPER[lang])
+      writeAttribute(
+        'codeListValue',
+        lang.length === 2 ? LANG_2_TO_3_MAPPER[lang] : lang
+      )
     )
 
   // add new languages (only if other than default one)

package/src/libs/api/repository/src/lib/gn4/elasticsearch/constant.ts

@@ -8,6 +8,7 @@ export const ES_SOURCE_SUMMARY = [
   'overview',
   'logo',
   'codelist_status_text',
+  'link',
   'linkProtocol',
   'contactForResource.organisation',
   'contact.organisation',

package/src/libs/api/repository/src/lib/gn4/elasticsearch/elasticsearch.service.ts

@@ -124,11 +124,11 @@ export class ElasticsearchService {
     this.runtimeFields[fieldName] = expression
   }
 
-  getMetadataByIdPayload(uuid: string): EsSearchParams {
+  getMetadataByIdsPayload(uuids: string[]): EsSearchParams {
     return {
       query: {
         ids: {
-          values: [uuid],
+          values: uuids,
         },
       },
     }

package/src/libs/api/repository/src/lib/gn4/gn4-repository.ts

@@ -31,7 +31,7 @@ import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain
 import {
   RecordsApiService,
   SearchApiService,
-  FeatureResponseApiModel,
+  LanguagesApiService,
 } from '../../../../../../libs/data-access/gn4/src'
 import {
   combineLatest,
@@ -47,6 +47,7 @@ import {
 import { catchError, map, tap } from 'rxjs/operators'
 import { lt } from 'semver'
 import { ElasticsearchService } from './elasticsearch'
+import { LANG_3_TO_2_MAPPER } from '../../../../../../libs/util/i18n/src'
 
 const minPublicationApiVersion = '4.2.5'
 
@@ -65,7 +66,8 @@ export class Gn4Repository implements RecordsRepositoryInterface {
     private gn4SearchHelper: ElasticsearchService,
     private gn4Mapper: Gn4Converter,
     private gn4RecordsApi: RecordsApiService,
-    private platformService: PlatformServiceInterface
+    private platformService: PlatformServiceInterface,
+    private gn4LanguagesApi: LanguagesApiService
   ) {}
 
   search({
@@ -129,9 +131,9 @@ export class Gn4Repository implements RecordsRepositoryInterface {
     return this.gn4SearchApi
       .search(
         'bucket',
-        ['fcats'],
+        ['fcats', 'hassources'],
         JSON.stringify(
-          this.gn4SearchHelper.getMetadataByIdPayload(uniqueIdentifier)
+          this.gn4SearchHelper.getMetadataByIdsPayload([uniqueIdentifier])
         )
       )
       .pipe(
@@ -142,6 +144,27 @@ export class Gn4Repository implements RecordsRepositoryInterface {
       )
   }
 
+  getMultipleRecords(
+    uniqueIdentifiers: string[]
+  ): Observable<CatalogRecord[] | null> {
+    return this.gn4SearchApi
+      .search(
+        'bucket',
+        undefined,
+        JSON.stringify(
+          this.gn4SearchHelper.getMetadataByIdsPayload(uniqueIdentifiers)
+        )
+      )
+      .pipe(
+        map((results: Gn4SearchResults) => results.hits.hits),
+        switchMap((records) =>
+          records && records.length > 0
+            ? this.gn4Mapper.readRecords(records)
+            : of(null)
+        )
+      )
+  }
+
   private mapEmbeddedFeatureCatalog(
     featureTypes: Array<DatasetFeatureType>
   ): DatasetFeatureCatalog {
@@ -154,6 +177,7 @@ export class Gn4Repository implements RecordsRepositoryInterface {
               name: attr.name,
               code: attr.code,
               title: attr.definition,
+              type: attr.type,
             }))
           : [],
       })),
@@ -165,7 +189,8 @@ export class Gn4Repository implements RecordsRepositoryInterface {
   ): Observable<DatasetFeatureCatalog | null> {
     if (
       record.extras?.['featureTypes'] &&
-      Array.isArray(record.extras['featureTypes'])
+      Array.isArray(record.extras['featureTypes']) &&
+      record.extras['featureTypes'].length > 0
     ) {
       return of(this.mapEmbeddedFeatureCatalog(record.extras['featureTypes']))
     }
@@ -201,6 +226,24 @@ export class Gn4Repository implements RecordsRepositoryInterface {
       )
   }
 
+  getSources(record: CatalogRecord): Observable<CatalogRecord[]> {
+    const sourcesIdentifiers = record.extras?.['sourcesIdentifiers'] as string[]
+    if (sourcesIdentifiers && sourcesIdentifiers.length > 0) {
+      return this.getMultipleRecords(sourcesIdentifiers)
+    }
+    return of(null)
+  }
+
+  getSourceOf(record: CatalogRecord): Observable<CatalogRecord[]> {
+    const sourceOfIdentifiers = record.extras?.[
+      'sourceOfIdentifiers'
+    ] as string[]
+    if (sourceOfIdentifiers && sourceOfIdentifiers.length > 0) {
+      return this.getMultipleRecords(sourceOfIdentifiers)
+    }
+    return of(null)
+  }
+
   aggregate(params: AggregationsParams): Observable<Aggregations> {
     // if aggregations are empty, return an empty object right away
     if (Object.keys(params).length === 0) return of({})
@@ -363,9 +406,12 @@ export class Gn4Repository implements RecordsRepositoryInterface {
         const record = await converter.readRecord(fetchedRecordAsXml)
 
         record.title = `${record.title} (Copy)`
-        await converter.writeRecord(record, fetchedRecordAsXml)
+        const recordAsXml = await converter.writeRecord(
+          record,
+          fetchedRecordAsXml
+        )
 
-        return this.saveRecord(record, '', false)
+        return this.saveRecord(record, recordAsXml, false)
       }),
       exhaustMap((uuidObservable: Observable<string>) => uuidObservable),
       catchError((error: HttpErrorResponse) => {
@@ -466,6 +512,18 @@ export class Gn4Repository implements RecordsRepositoryInterface {
     )
   }
 
+  getApplicationLanguages(): Observable<string[]> {
+    return this.gn4LanguagesApi
+      .getApplicationLanguages()
+      .pipe(
+        map((languages) =>
+          languages
+            .map((lang) => LANG_3_TO_2_MAPPER[lang.id ?? ''])
+            .filter((code): code is string => !!code)
+        )
+      )
+  }
+
   private getRecordAsXml(uniqueIdentifier: string): Observable<string | null> {
     return this.gn4RecordsApi
       .getRecordAs(

package/src/libs/common/domain/src/lib/model/record/metadata.model.ts

@@ -152,6 +152,8 @@ export type ServiceProtocol =
   | 'esriRest'
   | 'ogcFeatures'
   | 'GPFDL'
+  | 'tms'
+  | 'maplibre-style'
   | 'other'
 
 export type OnlineResourceType = 'service' | 'download' | 'link' | 'endpoint'
@@ -272,7 +274,12 @@ export interface DatasetFeatureType {
   isAbstract: string
   typeName: string
   definition: string
-  attributeTable: Array<{ name: string; definition: string; code: string }>
+  attributeTable: Array<{
+    name: string
+    definition: string
+    type: string
+    code: string
+  }>
 }
 
 export type ReuseType = 'application' | 'map' | 'other'

package/src/libs/common/domain/src/lib/repository/records-repository.interface.ts

@@ -19,6 +19,8 @@ export abstract class RecordsRepositoryInterface {
   abstract getSimilarRecords(
     similarTo: CatalogRecord
   ): Observable<CatalogRecord[]>
+  abstract getSources(record: CatalogRecord): Observable<CatalogRecord[]>
+  abstract getSourceOf(record: CatalogRecord): Observable<CatalogRecord[]>
   abstract fuzzySearch(query: string): Observable<SearchResults>
   abstract canEditRecord(uniqueIdentifier: string): Observable<boolean>
   /**
@@ -95,4 +97,5 @@ export abstract class RecordsRepositoryInterface {
     localRecord: CatalogRecord
   ): Observable<{ user: string; date: Date }>
   abstract getRecordPublicationStatus(uuid: string): Observable<boolean>
+  abstract getApplicationLanguages(): Observable<string[]>
 }

package/src/libs/common/fixtures/src/lib/elasticsearch/metadata-links.fixtures.ts

@@ -144,4 +144,14 @@ export const elasticLinkFixture = (): Record<string, unknown> => ({
     name: 'ogcapi features layer',
     url: 'https://mel.integration.apps.gs-fr-prod.camptocamp.com/data/ogcapi/collections/comptages_velo/items?',
   },
+  maplayerTms: {
+    accessServiceProtocol: 'TMS',
+    name: 'mytmslayer',
+    url: 'https://my.tms.server/MapServer',
+  },
+  maplayerTms2: {
+    accessServiceProtocol: 'OSGeo:TMS',
+    name: 'myothertmslayer',
+    url: 'https://my.tms.server/MapServer',
+  },
 })

package/src/libs/common/fixtures/src/lib/link.fixtures.ts

@@ -185,6 +185,20 @@ export const aSetOfLinksFixture = () => ({
       url: new URL('https://my.ogc.server/wms'),
       accessServiceProtocol: 'wms',
     }) as DatasetServiceDistribution,
+  geodataTms: () =>
+    ({
+      name: 'mytmslayer',
+      type: 'service',
+      url: new URL('https://my.ogc.server/tms'),
+      accessServiceProtocol: 'tms',
+    }) as DatasetServiceDistribution,
+  geodataAsMaplibreStyle: () =>
+    ({
+      name: 'mytmslayerAsMaplibreJson',
+      type: 'service',
+      url: new URL('https://my.ogc.server/tms/layer/style.json'),
+      accessServiceProtocol: 'maplibre-style',
+    }) as DatasetServiceDistribution,
   geodataWfs2: () =>
     ({
       name: 'myotherlayer',

package/src/libs/common/fixtures/src/lib/records.fixtures.ts

@@ -231,7 +231,7 @@ As such, **it is not very interesting at all.**`,
     recordUpdated: new Date('2022-04-15T14:18:19'),
     resourceUpdated: new Date('2022-03-29'),
     title:
-      "Plan local d'urbanisme (PLU) dématérialisé - commune d'Avrigny - approbation du 29/03/2022",
+      "Plan local d'urbanisme (PLU) dématérialisé - commune d'Avrigny - approbation du 29/03/2022 (Ce lot informe du droit à bâtir sur la commune d'Avrigny)",
     abstract: `Plan local d'urbanisme (PLU) dématérialisé - commune d'Avrigny - approbation du 29/03/2022.
 
 Ce lot informe du droit à bâtir sur la commune d'Avrigny.

package/src/libs/feature/dataviz/src/lib/service/data.service.ts

@@ -6,6 +6,7 @@ import {
   OgcApiRecord,
   WfsEndpoint,
   WfsVersion,
+  TmsEndpoint,
 } from '@camptocamp/ogc-client'
 import {
   BaseReader,
@@ -231,6 +232,42 @@ export class DataService {
       })
   }
 
+  async getGeodataLinksFromTms(
+    tmsLink: DatasetServiceDistribution,
+    keepOriginalLink = false
+  ): Promise<DatasetServiceDistribution[]> {
+    const endpoint = new TmsEndpoint(tmsLink.url.toString())
+    const tileMaps = await endpoint.allTileMaps
+    if (!tileMaps?.length) return null
+
+    // TODO: at some point use the identifierInService field if more that one layers in the TMS service
+    const tileMapInfo = await endpoint.getTileMapInfo(tileMaps[0].href)
+
+    // case 1: no styles; return a plain TMS link
+    if (!tileMapInfo?.metadata?.length) return [tmsLink]
+
+    // case 2: styles present; return each as a separate link
+    const styleLinks = tileMapInfo.metadata
+      .filter((meta) => meta.href)
+      .map((meta) => {
+        const fileName = meta.href.split('/').pop() || ''
+        const linkName =
+          tmsLink.description || ('name' in tmsLink ? tmsLink.name : '')
+        const styleName = fileName.split('.')[0]
+        const name = `${linkName} - ${styleName}`
+        return {
+          type: 'service',
+          url: new URL(meta.href),
+          name,
+          accessServiceProtocol: 'maplibre-style',
+        } as DatasetServiceDistribution
+      })
+    if (keepOriginalLink) {
+      styleLinks.unshift(tmsLink)
+    }
+    return styleLinks
+  }
+
   getDownloadLinksFromEsriRest(
     esriRestLink: DatasetServiceDistribution
   ): DatasetOnlineResource[] {

package/src/libs/feature/editor/src/lib/components/multilingual-panel/multilingual-panel.component.html

@@ -1,14 +1,120 @@
 <div
-  class="flex flex-col h-full w-[302px] bg-neutral-100 border-l border-gray-300 py-9 px-3 gap-8"
+  class="flex flex-col h-full w-[302px] bg-neutral-100 border-l border-gray-300 py-8 px-3 gap-6 overflow-auto"
 >
-  <span class="text-3xl font-title text-black/80 px-2" translate
-    >editor.record.form.multilingual.title</span
-  >
-  <gn-ui-check-toggle
-    class="p-2"
-    [label]="'editor.record.form.multilingual.enable' | translate"
-    [color]="'primary'"
-    [value]="translationsEnabled"
-    (toggled)="translationsEnabled = $event"
-  ></gn-ui-check-toggle>
+  <div class="flex flex-row px-2 justify-between">
+    <span class="text-3xl font-title text-black/80" translate
+      >editor.record.form.multilingual.title</span
+    >
+    <button
+      [title]="'editor.record.form.multilingual.open' | translate"
+      (click)="toggleLanguageSelection()"
+      *ngIf="isMultilingual"
+      data-test="activateSelection"
+    >
+      <ng-icon class="mt-1" name="iconoirSettings"></ng-icon>
+    </button>
+  </div>
+  <div class="flex flex-col gap-2" *ngIf="editTranslations || !isMultilingual">
+    <gn-ui-check-toggle
+      class="p-2"
+      [label]="'editor.record.form.multilingual.enable' | translate"
+      [color]="'primary'"
+      [(value)]="isMultilingual"
+      (toggled)="switchMultilingual($event)"
+    ></gn-ui-check-toggle>
+    <div *ngIf="isMultilingual" class="flex flex-col gap-2">
+      <div class="flex flex-row justify-between border-t border-gray-300 p-3">
+        <span class="mt-2 text-sm text-gray-600" translate
+          >editor.record.form.multilingual.activate</span
+        >
+        <gn-ui-button
+          extraClass="w-16 h-8 font-bold"
+          type="gray"
+          (buttonClick)="validateTranslations()"
+          data-test="validateSelection"
+          >{{ 'editor.record.form.multilingual.validate' | translate }}
+        </gn-ui-button>
+      </div>
+      <ng-container *ngIf="supportedLanguages$ | async as languages">
+        <div
+          class="flex flex-col gap-2 w-full px-2"
+          data-test="langAvailable"
+          *ngFor="let lang of languages"
+        >
+          <gn-ui-button
+            [extraClass]="getExtraClass(lang)"
+            type="gray"
+            (buttonClick)="toggleLanguage(lang)"
+            [disabled]="lang === _record.defaultLanguage"
+            [title]="getToggleTitle(lang)"
+          >
+            <span [class]="getIconClass(lang)"></span>
+            <span class="ml-2">{{ 'language.' + lang | translate }}</span>
+          </gn-ui-button>
+        </div>
+      </ng-container>
+    </div>
+  </div>
+  <div *ngIf="!editTranslations && isMultilingual" class="flex flex-col gap-2">
+    <gn-ui-button
+      *ngFor="let recordLang of sortLanguages(recordLanguages); let i = index"
+      extraClass="flex flex-row justify-between bg-white border border-white rounded mb-1 h-[34px] w-full"
+      [ngClass]="{
+        'mt-8': isFirstUnsupported(i),
+        '': true,
+      }"
+      (buttonClick)="switchFormLang(recordLang)"
+      type="outline"
+      data-test="langSwitch"
+    >
+      <div class="flex flex-row gap-2 items-center">
+        <ng-icon
+          *ngIf="recordLang === formLanguage"
+          class="text-primary mt-1"
+          name="iconoirCheckCircle"
+        ></ng-icon>
+        <ng-icon
+          *ngIf="recordLang !== formLanguage"
+          class="text-gray-800 mt-1"
+          name="iconoirCircle"
+        ></ng-icon>
+        <span
+          *ngIf="recordLang.length === 2"
+          [class]="getIconClass(recordLang) + 'mt-1'"
+        ></span>
+        <span [ngClass]="recordLang === formLanguage ? 'text-black' : ''">{{
+          isLangSupported(recordLang)
+            ? ('language.' + recordLang | translate)
+            : recordLang.toUpperCase()
+        }}</span>
+      </div>
+      <div class="flex flex-row gap-2 items-center">
+        <span
+          *ngIf="recordLang === formLanguage"
+          class="text-xs text-base"
+          translate
+          >editor.record.form.multilingual.default</span
+        >
+        <button
+          (click)="
+            openActionMenu(recordLang, template); $event.stopPropagation()
+          "
+          cdkOverlayOrigin
+          #actionMenuButton
+        >
+          <ng-icon class="pb-5" name="matMoreHorizOutline"></ng-icon>
+        </button>
+        <ng-template #template>
+          <gn-ui-action-menu
+            [canDelete]="recordLang !== _record.defaultLanguage"
+            page="record"
+            (delete)="confirmDeleteAction(recordLang)"
+            (closeActionMenu)="closeActionMenu()"
+            (switch)="switchDefaultLang(recordLang)"
+          >
+          </gn-ui-action-menu>
+        </ng-template>
+      </div>
+    </gn-ui-button>
+  </div>
 </div>