geonetwork-ui 2.7.0-dev.fa54bd3a5 → 2.7.0-dev.fdfe671c3

package/src/libs/api/repository/src/lib/gn4/organizations/organizations-service.factory.ts

@@ -0,0 +1,33 @@
+import {
+  GroupsApiService,
+  SearchApiService,
+} from '../../../../../../../libs/data-access/gn4/src'
+import { TranslateService } from '@ngx-translate/core'
+import { PlatformServiceInterface } from '../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { ElasticsearchService } from '../elasticsearch'
+import { OrganizationsStrategy } from './organization-strategy.token'
+import { OrganizationsFromGroupsService } from './organizations-from-groups.service'
+import { OrganizationsFromMetadataService } from './organizations-from-metadata.service'
+
+export const organizationsServiceFactory = (
+  strategy: OrganizationsStrategy,
+  esService: ElasticsearchService,
+  searchApiService: SearchApiService,
+  groupsApiService: GroupsApiService,
+  translateService: TranslateService,
+  platformService: PlatformServiceInterface
+) =>
+  strategy === 'groups'
+    ? new OrganizationsFromGroupsService(
+        esService,
+        searchApiService,
+        groupsApiService,
+        translateService
+      )
+    : new OrganizationsFromMetadataService(
+        esService,
+        searchApiService,
+        groupsApiService,
+        platformService,
+        translateService
+      )

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

@@ -11,7 +11,6 @@ import {
   MeApiService,
   RecordsApiService,
   RegistriesApiService,
-  SiteApiService,
   ToolsApiService,
   UserfeedbackApiService,
   UsersApiService,
@@ -45,7 +44,8 @@ import {
   throwError,
 } from 'rxjs'
 import { TranslateService } from '@ngx-translate/core'
-import { getLang3FromLang2 } from '../../../../../../../libs/util/i18n/src'
+import { toLang3 } from '../../../../../../../libs/util/i18n/src'
+import { Gn4SettingsService } from '../settings/gn4-settings.service'
 
 const minApiVersion = '4.2.2'
 
@@ -55,6 +55,7 @@ export class Gn4PlatformService implements PlatformServiceInterface {
   private readonly me$: Observable<UserModel>
   private readonly users$: Observable<UserModel[]>
   private readonly isUserAnonymous$: Observable<boolean>
+  private readonly gnParseVersion = '4.2.5'
 
   private keyTranslations$ = this.toolsApiService
     .getTranslationsPackage1('gnui')
@@ -65,31 +66,6 @@ export class Gn4PlatformService implements PlatformServiceInterface {
       }),
       shareReplay(1)
     )
-
-  private settings$ = of(true).pipe(
-    switchMap(() => this.siteApiService.getSiteOrPortalDescription()),
-    shareReplay(1)
-  )
-
-  private readonly apiVersion$ = this.settings$.pipe(
-    map((info) => info['system/platform/version'] as string),
-    tap((version) => {
-      if (ltr(version, minApiVersion)) {
-        throw new Error(
-          `Gn4 API version is not compatible.\nMinimum: ${minApiVersion}\nYour version: ${version}`
-        )
-      }
-    }),
-    shareReplay(1)
-  )
-
-  private readonly allowEditHarvestedMd$ = this.settings$.pipe(
-    map((info) => {
-      return info['system/harvester/enableEditing'] as boolean
-    }),
-    shareReplay(1)
-  )
-
   /**
    * A map of already loaded thesauri (groups of keywords); the key is a URI
    * @private
@@ -97,11 +73,10 @@ export class Gn4PlatformService implements PlatformServiceInterface {
   private keywordsByThesauri: Record<string, Observable<Keyword[]>> = {}
 
   private get lang3() {
-    return getLang3FromLang2(this.translateService.currentLang)
+    return toLang3(this.translateService.currentLang)
   }
 
   constructor(
-    private siteApiService: SiteApiService,
     private meApi: MeApiService,
     private usersApi: UsersApiService,
     private mapper: Gn4PlatformMapper,
@@ -110,7 +85,8 @@ export class Gn4PlatformService implements PlatformServiceInterface {
     private translateService: TranslateService,
     private userfeedbackApiService: UserfeedbackApiService,
     private httpClient: HttpClient,
-    private recordsApiService: RecordsApiService
+    private recordsApiService: RecordsApiService,
+    private settingsService: Gn4SettingsService
   ) {
     this.me$ = this.meApi.getMe().pipe(
       switchMap((apiUser) => this.mapper.userFromMeApi(apiUser)),
@@ -127,16 +103,28 @@ export class Gn4PlatformService implements PlatformServiceInterface {
     )
   }
 
+  getFeedbacksAllowed(): Observable<boolean> {
+    return this.settingsService.allowFeedbacks$
+  }
+
+  getAllowEditHarvestedMd(): Observable<boolean> {
+    return this.settingsService.allowEditHarvested$
+  }
+
   getType(): string {
     return this.type
   }
 
   getApiVersion(): Observable<string> {
-    return this.apiVersion$
-  }
-
-  getAllowEditHarvestedMd(): Observable<boolean> {
-    return this.allowEditHarvestedMd$
+    return this.settingsService.apiVersion$.pipe(
+      tap((version) => {
+        if (ltr(version, minApiVersion)) {
+          throw new Error(
+            `Gn4 API version is not compatible.\nMinimum: ${minApiVersion}\nYour version: ${version}`
+          )
+        }
+      })
+    )
   }
 
   getMe(): Observable<UserModel> {
@@ -323,10 +311,15 @@ export class Gn4PlatformService implements PlatformServiceInterface {
           ...(Array.isArray(onlines) ? onlines : []),
           ...(Array.isArray(thumbnails) ? thumbnails : []),
         ].map((resource) => Object.values(resource.url)[0])
-
-        const fileToDelete = attachments
-          .filter((attachment) => !urlsToKeep.includes(attachment.url))
-          .map((attachment) => attachment.filename)
+        const fileToDelete = attachments.reduce<string[]>((acc, attachment) => {
+          if (
+            !urlsToKeep.includes(attachment.url) &&
+            attachment.filename !== 'datavizConfig.json'
+          ) {
+            acc.push(attachment.filename)
+          }
+          return acc
+        }, [])
 
         return fileToDelete
       }),
@@ -384,6 +377,34 @@ export class Gn4PlatformService implements PlatformServiceInterface {
         })
       )
   }
+  getFileContent(url: URL | string): Observable<any> {
+    return combineLatest([
+      this.httpClient.get(url.toString(), { responseType: 'text' }),
+      this.getApiVersion(),
+    ]).pipe(
+      map(([text, version]) => {
+        const parsed = JSON.parse(text)
+
+        if (version > this.gnParseVersion) {
+          return parsed
+        }
+
+        const decoded = this.decodeBase64(parsed)
+        return JSON.parse(decoded)
+      })
+    )
+  }
+
+  decodeBase64(base64) {
+    const text = atob(base64)
+    const length = text.length
+    const bytes = new Uint8Array(length)
+    for (let i = 0; i < length; i++) {
+      bytes[i] = text.charCodeAt(i)
+    }
+    const decoder = new TextDecoder()
+    return decoder.decode(bytes)
+  }
 
   attachFileToRecord(
     recordUuid: string,

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

@@ -14,6 +14,14 @@ export class Gn4SettingsService {
   public allowEditHarvested$: Observable<boolean> =
     this.getSettingsSetValueByKey('system/harvester/enableEditing')
 
+  public allowFeedbacks$: Observable<boolean> = this.getSettingsSetValueByKey(
+    'system/userFeedback/enable'
+  )
+
+  public apiVersion$: Observable<string> = this.getSettingsSetValueByKey(
+    'system/platform/version'
+  )
+
   constructor(private siteApiService: SiteApiService) {}
 
   private getSettingsSetValueByKey(key: string) {

package/src/libs/api/repository/src/lib/metadata-language.token.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core'
+import { LanguageCode } from '../../../../../libs/common/domain/src/lib/model/record'
+
+export type LanguageCodeFactory = () => LanguageCode
+
+export const METADATA_LANGUAGE = new InjectionToken<
+  LanguageCode | LanguageCodeFactory
+>('metadata-language')

package/src/libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model.ts

@@ -24,4 +24,5 @@ export interface DatavizConfigModel {
   view: string
   source: DatasetOnlineResource
   chartConfig?: DatavizChartConfigModel
+  styleTMSIndex: number
 }

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

@@ -69,6 +69,8 @@ marker('domain.record.status.ongoing')
 marker('domain.record.status.under_development')
 marker('domain.record.status.deprecated')
 marker('domain.record.status.removed')
+marker('domain.record.status.planned')
+marker('domain.record.status.required')
 
 export const RecordStatusValues = [
   'completed',
@@ -76,6 +78,8 @@ export const RecordStatusValues = [
   'under_development',
   'deprecated',
   'removed',
+  'planned',
+  'required',
 ]
 export type RecordStatus = (typeof RecordStatusValues)[number]
 
@@ -104,6 +108,11 @@ export interface Keyword {
   translations?: KeywordTranslations
 }
 
+export interface INSPIRE_theme {
+  value: string
+  label: string
+}
+
 export interface BaseRecord {
   uniqueIdentifier: Uuid
   ownerOrganization: Organization
@@ -156,6 +165,17 @@ export type ServiceProtocol =
   | 'maplibre-style'
   | 'other'
 
+marker('record.metadata.api.accessServiceProtocol.wms')
+marker('record.metadata.api.accessServiceProtocol.wfs')
+marker('record.metadata.api.accessServiceProtocol.wps')
+marker('record.metadata.api.accessServiceProtocol.wmts')
+marker('record.metadata.api.accessServiceProtocol.esriRest')
+marker('record.metadata.api.accessServiceProtocol.ogcFeatures')
+marker('record.metadata.api.accessServiceProtocol.GPFDL')
+marker('record.metadata.api.accessServiceProtocol.tms')
+marker('record.metadata.api.accessServiceProtocol.maplibre-style')
+marker('record.metadata.api.accessServiceProtocol.other')
+
 export type OnlineResourceType = 'service' | 'download' | 'link' | 'endpoint'
 
 export interface DatasetServiceDistribution {
@@ -254,7 +274,7 @@ export interface ServiceRecord extends BaseRecord {
 export interface ReuseRecord extends BaseRecord {
   kind: 'reuse'
   lineage: string // Explanation of the origin of this record (e.g: how, why)"
-  onlineResources: Array<OnlineLinkResource>
+  onlineResources: Array<DatasetOnlineResource>
   reuseType: ReuseType
   spatialExtents: Array<DatasetSpatialExtent>
   temporalExtents: Array<DatasetTemporalExtent>

package/src/libs/common/domain/src/lib/platform.service.interface.ts

@@ -3,6 +3,7 @@ import type { UserModel } from './model/user/user.model'
 import type { Organization } from './model/record/organization.model'
 import { CatalogRecord, Keyword, UserFeedback } from './model/record'
 import { KeywordType } from './model/thesaurus'
+import { DatavizConfigModel } from './model/dataviz/dataviz-configuration.model'
 
 export interface RecordAttachment {
   url: URL
@@ -55,4 +56,6 @@ export abstract class PlatformServiceInterface {
     file: File,
     removeDuplicate?: boolean
   ): Observable<UploadEvent>
+  abstract getFileContent(url: URL): Observable<any>
+  abstract getFeedbacksAllowed(): Observable<boolean>
 }

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

@@ -127,9 +127,6 @@ export const editorFieldSpatialExtentsFixture = () => ({
 export const editorFieldKeywordsFixture = () => ({
   model: 'keywords',
   hidden: false,
-  formFieldConfig: {
-    labelKey: 'editor.record.form.field.keywords',
-  },
 })
 
 export const editorFieldUniqueIdentifierFixture = () => ({

package/src/libs/feature/catalog/src/index.ts

@@ -1,4 +1,3 @@
-export * from './lib/feature-catalog.module'
 export * from './lib/organization-url.token'
 export * from './lib/sources/sources.service'
 export * from './lib/sources/sources.model'

package/src/libs/feature/catalog/src/lib/organization-url.token.ts

@@ -4,3 +4,8 @@ import { InjectionToken } from '@angular/core'
 export const ORGANIZATION_PAGE_URL_TOKEN = new InjectionToken<string>(
   'organization-page-url-token'
 )
+
+// expects the replacement key ${name}
+export const ORGANIZATION_URL_TOKEN = new InjectionToken<string>(
+  'organization-url-token'
+)

package/src/libs/feature/catalog/src/lib/site-title/site-title.component.ts

@@ -1,8 +1,10 @@
+import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import {
   SettingsListResponseApiModel,
   SiteApiService,
 } from '../../../../../../libs/data-access/gn4/src'
+import { CatalogTitleComponent } from '../../../../../../libs/ui/catalog/src'
 import { Observable } from 'rxjs'
 import { shareReplay } from 'rxjs/operators'
 
@@ -11,6 +13,8 @@ import { shareReplay } from 'rxjs/operators'
   templateUrl: './site-title.component.html',
   styleUrls: ['./site-title.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, CatalogTitleComponent],
 })
 export class SiteTitleComponent {
   info$: Observable<SettingsListResponseApiModel>

package/src/libs/feature/catalog/src/lib/source-label/source-label.component.ts

@@ -1,12 +1,15 @@
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
 import { Observable } from 'rxjs'
 import { SourcesService } from '../sources/sources.service'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-source-label',
   templateUrl: './source-label.component.html',
   styleUrls: ['./source-label.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule],
 })
 export class SourceLabelComponent {
   sourceLabel$: Observable<string>

package/src/libs/feature/catalog/src/lib/sources/sources.service.ts

@@ -4,7 +4,7 @@ import { Observable } from 'rxjs'
 import { filter, map, shareReplay } from 'rxjs/operators'
 import { CatalogSource } from './sources.model'
 import { TranslateService } from '@ngx-translate/core'
-import { getLang3FromLang2 } from '../../../../../../libs/util/i18n/src'
+import { toLang3 } from '../../../../../../libs/util/i18n/src'
 
 @Injectable({
   providedIn: 'root',
@@ -23,10 +23,7 @@ export class SourcesService {
     return this.sources$.pipe(
       map((sources) => sources.filter((source) => source.uuid === uuid)[0]),
       filter((source) => !!source),
-      map(
-        (source) =>
-          source.label[getLang3FromLang2(this.translateService.currentLang)]
-      )
+      map((source) => source.label[toLang3(this.translateService.currentLang)])
     )
   }
 }

package/src/libs/feature/dataviz/src/lib/chart-view/chart-view.component.ts

@@ -28,7 +28,10 @@ import {
   tap,
 } from 'rxjs/operators'
 import { DataService } from '../service/data.service'
-import { InputChartType } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
+import {
+  DatavizChartConfigModel,
+  InputChartType,
+} from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
 import {
   DatasetFeatureCatalog,
   DatasetOnlineResource,
@@ -104,6 +107,12 @@ export class ChartViewComponent {
   }
   chartType$ = new BehaviorSubject<InputChartType>('bar')
 
+  @Input() set userChartConfig(config: DatavizChartConfigModel) {
+    this.aggregation$.next(config.aggregation)
+    this.xProperty$.next(config.xProperty)
+    this.yProperty$.next(config.yProperty)
+    this.chartType$.next(config.chartType)
+  }
   @Output() chartConfig$ = combineLatest([
     this.xProperty$.pipe(filter((value) => value !== undefined)),
     this.yProperty$.pipe(filter((value) => value !== undefined)),

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

@@ -211,21 +211,21 @@ export class DataService {
 
   async getDownloadUrlsFromOgcApi(url: string): Promise<OgcApiCollectionInfo> {
     const endpoint = new OgcApiEndpoint(url)
-    return await endpoint.allCollections
+    return await endpoint.featureCollections
       .then((collections) => {
-        return endpoint.getCollectionInfo(collections[0].name)
+        return endpoint.getCollectionInfo(collections[0])
       })
       .catch((error) => {
         throw new Error(`ogc.unreachable.unknown`)
       })
   }
 
-  async getItemsFromOgcApi(url: string): Promise<OgcApiRecord> {
+  async getItemsFromOgcApi(url: string): Promise<OgcApiRecord[]> {
     const endpoint = new OgcApiEndpoint(url)
     return await endpoint.featureCollections
       .then((collections) => {
         return collections.length
-          ? endpoint.getCollectionItem(collections[0], '1')
+          ? endpoint.getCollectionItems(collections[0])
           : null
       })
       .catch(() => {
@@ -237,7 +237,9 @@ export class DataService {
     tmsLink: DatasetServiceDistribution,
     keepOriginalLink = false
   ): Promise<DatasetServiceDistribution[]> {
-    const endpoint = new TmsEndpoint(tmsLink.url.toString())
+    const endpoint = new TmsEndpoint(
+      tmsLink.url.toString().replace(/\/?$/, `/${tmsLink.name}`)
+    )
     const tileMaps = await endpoint.allTileMaps.catch(() => {
       throw new Error(`ogc.unreachable.unknown`)
     })

package/src/libs/feature/editor/src/index.ts

@@ -9,3 +9,4 @@ export * from './lib/components/import-record/import-record.component'
 export * from './lib/components/record-form/record-form.component'
 export * from './lib/components/record-form/form-field'
 export * from './lib/components/multilingual-panel/multilingual-panel.component'
+export * from './lib/components/metadata-quality-panel/metadata-quality-panel.component'

package/src/libs/feature/editor/src/lib/+state/editor.effects.ts

@@ -11,14 +11,14 @@ import {
   selectRecordSource,
 } from './editor.selectors'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
-import { Gn4PlatformService } from '../../../../../../libs/api/repository/src'
+import { PlatformServiceInterface } from '../../../../../../libs/common/domain/src/lib/platform.service.interface'
 
 @Injectable()
 export class EditorEffects {
   private actions$ = inject(Actions)
   private editorService = inject(EditorService)
   private recordsRepository = inject(RecordsRepositoryInterface)
-  private gn4PlateformService = inject(Gn4PlatformService)
+  private plateformService = inject(PlatformServiceInterface)
   private store = inject(Store)
 
   saveRecord$ = createEffect(() =>
@@ -64,7 +64,7 @@ export class EditorEffects {
         withLatestFrom(this.store.select(selectRecord)),
         switchMap(([_, record]) => {
           if (record.uniqueIdentifier !== null) {
-            this.gn4PlateformService.cleanRecordAttachments(record).subscribe({
+            this.plateformService.cleanRecordAttachments(record).subscribe({
               next: (_) => undefined,
               error: (err) => {
                 console.error(err)

package/src/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.ts

@@ -12,7 +12,11 @@ import { map } from 'rxjs'
 import { Keyword } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { KeywordType } from '../../../../../../../libs/common/domain/src/lib/model/thesaurus'
 import { TranslatePipe } from '@ngx-translate/core'
-import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
 import { matWarningAmberOutline } from '@ng-icons/material-icons/outline'
 
 type AutocompleteItem = { title: string; value: Keyword }
@@ -34,6 +38,9 @@ type AutocompleteItem = { title: string; value: Keyword }
     provideIcons({
       matWarningAmberOutline,
     }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
   ],
 })
 export class GenericKeywordsComponent {

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

@@ -0,0 +1,37 @@
+<div
+  class="flex flex-col h-full w-[302px] border-l border-gray-300 py-8 px-3 gap-3 overflow-auto"
+  style="background-color: #fafaf9"
+>
+  <div class="flex flex-row px-2 justify-between">
+    <span class="text-3xl font-title text-black/80" translate
+      >editor.record.form.metadataQuality.title</span
+    >
+  </div>
+  <div
+    *ngFor="let properties of propertiesByPage; let i = index"
+    class="flex flex-col gap-2"
+  >
+    <gn-ui-button
+      *ngFor="let property of properties"
+      [extraClass]="getExtraClass(property.value)"
+      type="outline"
+      attr.data-cy="md-quality-btn-{{ property.label }}"
+    >
+      <span>{{ property.label | translate }}</span>
+      <div class="flex flex-row gap-2 items-center">
+        <ng-icon
+          *ngIf="property.value; else notChecked"
+          class="text-primary"
+          name="iconoirBadgeCheck"
+        ></ng-icon>
+        <ng-template #notChecked>
+          <ng-icon class="text-neutral-300" name="iconoirSystemShut"></ng-icon>
+        </ng-template>
+      </div>
+    </gn-ui-button>
+    <hr
+      *ngIf="i !== propertiesByPage.length - 1"
+      class="border-gray-300 w-11/12 mx-auto"
+    />
+  </div>
+</div>

package/src/libs/feature/editor/src/lib/components/metadata-quality-panel/metadata-quality-panel.component.ts

@@ -0,0 +1,90 @@
+import { CommonModule } from '@angular/common'
+import { Component, Input, OnChanges } from '@angular/core'
+import { CatalogRecord } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import {
+  getAllKeysValidator,
+  getQualityValidators,
+  ValidatorMapperKeys,
+} from '../../../../../../../libs/util/shared/src'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { iconoirBadgeCheck, iconoirSystemShut } from '@ng-icons/iconoir'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
+import { EditorConfig } from '../../models'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+
+//forced translations that are not available in fields.config.ts
+marker('editor.record.form.field.keywords')
+marker('editor.record.form.field.topics')
+marker('editor.record.form.field.contacts')
+marker('editor.record.form.field.organisation')
+@Component({
+  selector: 'gn-ui-metadata-quality-panel',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateDirective,
+    TranslatePipe,
+    ButtonComponent,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirSystemShut,
+      iconoirBadgeCheck,
+    }),
+    provideNgIconsConfig({
+      size: '1.25em',
+    }),
+  ],
+  templateUrl: './metadata-quality-panel.component.html',
+  styleUrl: './metadata-quality-panel.component.css',
+})
+export class MetadataQualityPanelComponent implements OnChanges {
+  propsToValidate: ValidatorMapperKeys[] = getAllKeysValidator()
+  propertiesByPage: { label: string; value: boolean }[][] = []
+  @Input() editorConfig: EditorConfig
+  @Input() record: CatalogRecord
+
+  ngOnChanges() {
+    if (this.editorConfig && this.record) {
+      const fieldsByPage = this.editorConfig.pages.map((page) =>
+        page.sections.flatMap((section) =>
+          section.fields
+            .filter((field) => this.propsToValidate.includes(field.model))
+            .map((field) => field.model as ValidatorMapperKeys)
+        )
+      )
+      // FIXME: temporarily add topics and organisation to the first and third page
+      // as long as they are not handled by the editor
+      if (fieldsByPage.length > 0) {
+        fieldsByPage[0].includes('topics') || fieldsByPage[0].push('topics')
+        fieldsByPage[2].includes('organisation') ||
+          fieldsByPage[2].push('organisation')
+      }
+      this.propertiesByPage = fieldsByPage
+        .map((fields) =>
+          getQualityValidators(
+            this.record,
+            fields as ValidatorMapperKeys[]
+          ).map(({ name, validator }) => ({
+            label: `editor.record.form.field.${name}`, // use same translations as in fields.config.ts
+            value: validator(),
+          }))
+        )
+        .filter((arr) => arr.length > 0)
+    }
+  }
+
+  getExtraClass(checked: boolean): string {
+    const baseClasses =
+      'flex flex-row justify-between rounded mb-1 h-[34px] w-full focus:ring-0 hover:border-none border-none hover:text-black text-black cursor-default'
+    return checked
+      ? `${baseClasses} bg-neutral-100 hover:bg-neutral-100`
+      : `${baseClasses} bg-transparent hover:bg-transparent`
+  }
+}

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

@@ -1,5 +1,6 @@
 <div
-  class="flex flex-col h-full w-[302px] bg-neutral-100 border-l border-gray-300 py-8 px-3 gap-6 overflow-auto"
+  class="flex flex-col h-full w-[302px] border-l border-gray-300 py-8 px-3 gap-6 overflow-auto"
+  style="background-color: #fafaf9"
 >
   <div class="flex flex-row px-2 justify-between">
     <span class="text-3xl font-title text-black/80" translate