geonetwork-ui 2.10.0-dev.fc6515c0b → 2.10.0

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

@@ -3,6 +3,7 @@ import {
   DatasetRecord,
   DatasetSpatialExtent,
   Keyword,
+  ReuseRecord,
   ServiceRecord,
 } from '../../../../../libs/common/domain/src/lib/model/record'
 
@@ -134,6 +135,8 @@ Cette section contient des *caractères internationaux* (ainsi que des "caractè
     lineage: `This record was edited manually to test the conversion processes
 
 As such, **it is not very interesting at all.**`,
+    sourceRecords: [],
+    associatedRecords: [],
     licenses: [
       {
         text: 'Licence ODbL mai 2013 (basée sur ODbL 1.0)',
@@ -310,6 +313,8 @@ Malgré l'attention portée à la création de ces données, il est rappelé que
     ],
     lineage: `Document d’urbanisme numérisé conformément aux prescriptions nationales du CNIG par le Service d'Information Géographique de l'Agglomération de la Région de Compiègne.
 Ce lot de données produit en 2019, a été numérisé à partir du PCI Vecteur de 2019 et contrôlé par le Service d'Information Géographique de l'Agglomération de la Région de Compiègne.`,
+    sourceRecords: [],
+    associatedRecords: [],
     legalConstraints: [],
     securityConstraints: [],
     otherConstraints: [],
@@ -361,6 +366,8 @@ export const simpleDatasetRecordFixture = (): DatasetRecord => ({
   overviews: [],
   spatialExtents: [],
   temporalExtents: [],
+  sourceRecords: [],
+  associatedRecords: [],
   onlineResources: [
     {
       type: 'download',
@@ -413,6 +420,8 @@ export const simpleDatasetRecordWithFcatsFixture = (): DatasetRecord => ({
   overviews: [],
   spatialExtents: [],
   temporalExtents: [],
+  sourceRecords: [],
+  associatedRecords: [],
   onlineResources: [],
   updateFrequency: { per: 'month', updatedTimes: 3 },
   translations: {},
@@ -978,6 +987,8 @@ export const multilingualDatasetFixture: () => DatasetRecord = () => ({
   title: 'English Title',
   abstract: 'English Abstract',
   lineage: 'English Lineage',
+  sourceRecords: [],
+  associatedRecords: [],
   translations: {
     title: { fr: 'Titre Français', de: 'Titel DE' },
     abstract: { fr: 'Résumé Français', de: 'Beschreibung DE' },
@@ -1022,3 +1033,54 @@ export const multilingualDatasetFixture: () => DatasetRecord = () => ({
   topics: [],
   recordUpdated: null,
 })
+
+export const simpleReuseRecordFixture = (): ReuseRecord => ({
+  abstract: `Sample reuse record`,
+  kind: 'reuse',
+  reuseType: 'application',
+  recordUpdated: new Date('2023-03-17T07:38:08.875Z'),
+  recordPublished: null,
+  ownerOrganization: null,
+  licenses: [],
+  legalConstraints: [],
+  securityConstraints: [],
+  otherConstraints: [],
+  contacts: [],
+  contactsForResource: [],
+  keywords: [],
+  topics: [],
+  spatialExtents: [],
+  temporalExtents: [],
+  lineage: 'bla',
+  sourceRecords: [],
+  associatedRecords: [],
+  overviews: [],
+  defaultLanguage: null,
+  otherLanguages: [],
+  title: 'Sites de gestion des déchets miniers - Service de visualisation WMS',
+  onlineResources: [
+    {
+      name: 'Rapport de disponibilité du service WMS',
+      description:
+        'Ce service de visualisation WMS permet de consulter la série de couches de données "Sites de gestion des déchets miniers - Série".',
+      mimeType: 'text/html',
+      type: 'link',
+      url: new URL(
+        'https://geoservices.wallonie.be/rapportDisponibilite/wms/sites_de_gestion_des_dechets_miniers_srie.html'
+      ),
+      accessRestricted: false,
+    },
+  ],
+  uniqueIdentifier: '00b22798-ec8e-4500-89e8-90eeeda45919',
+  landingPage: new URL(
+    'http://localhost:4200/geonetwork/srv/fre/catalog.search#/metadata/00b22798-ec8e-4500-89e8-90eeeda45919'
+  ),
+  extras: {
+    isPublishedToAll: true,
+    id: '723',
+    isHarvested: true,
+    ownerInfo: 'admin|admin|admin|Administrator',
+    edit: true,
+  },
+  recordCreated: new Date('2023-03-17T07:38:08.875Z'),
+})

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

@@ -1,4 +1,4 @@
-import { Injectable, inject } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
 import { SourcesApiService } from '../../../../../../libs/data-access/gn4/src'
 import { Observable } from 'rxjs'
 import { filter, map, shareReplay } from 'rxjs/operators'
@@ -21,7 +21,10 @@ export class SourcesService {
     return this.sources$.pipe(
       map((sources) => sources.filter((source) => source.uuid === uuid)[0]),
       filter((source) => !!source),
-      map((source) => source.label[toLang3(this.translateService.currentLang)])
+      map(
+        (source) =>
+          source.label[toLang3(this.translateService.getCurrentLang())]
+      )
     )
   }
 }

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

@@ -3,6 +3,7 @@ export * from './lib/+state/editor.facade'
 export * from './lib/+state/editor.models'
 export * from './lib/+state/editor.reducer'
 export * from './lib/+state/editor.selectors'
+export * from './lib/components/contact-details/contact-details-form.component'
 export * from './lib/components/import-record/import-record.component'
 export * from './lib/components/metadata-quality-panel/metadata-quality-panel.component'
 export * from './lib/components/multilingual-panel/multilingual-panel.component'

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

@@ -29,7 +29,10 @@ export const markRecordAsChanged = createAction(
   '[Editor] Mark record as changed'
 )
 
-export const saveRecord = createAction('[Editor] Save record')
+export const saveRecord = createAction(
+  '[Editor] Save record',
+  props<{ publish: boolean }>()
+)
 export const saveRecordSuccess = createAction('[Editor] Save record success')
 export const saveRecordFailure = createAction(
   '[Editor] Save record failure',

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

@@ -28,30 +28,37 @@ export class EditorEffects {
         this.store.select(selectRecordSource),
         this.store.select(selectEditorConfig)
       ),
-      switchMap(([, record, recordSource, fieldsConfig]) =>
-        this.editorService.saveRecord(record, recordSource, fieldsConfig).pipe(
-          switchMap(([savedRecord, savedRecordSource]) => {
-            const actions: Action[] = [EditorActions.saveRecordSuccess()]
+      switchMap(([{ publish }, record, recordSource, fieldsConfig]) =>
+        this.editorService
+          .saveRecord(record, recordSource, fieldsConfig, publish)
+          .pipe(
+            switchMap(([savedRecord, savedRecordSource]) => {
+              const actions: Action[] = [EditorActions.saveRecordSuccess()]
+
+              if (publish) {
+                // saving without publishing doesn't unpublish
+                actions.push(EditorActions.isPublished({ isPublished: true }))
+              }
 
-            if (!record?.uniqueIdentifier) {
-              actions.push(
-                EditorActions.openRecord({
-                  record: savedRecord,
-                  recordSource: savedRecordSource,
+              if (!record?.uniqueIdentifier) {
+                actions.push(
+                  EditorActions.openRecord({
+                    record: savedRecord,
+                    recordSource: savedRecordSource,
+                  })
+                )
+              }
+
+              return of(...actions)
+            }),
+            catchError((error) =>
+              of(
+                EditorActions.saveRecordFailure({
+                  error,
                 })
               )
-            }
-
-            return of(...actions)
-          }),
-          catchError((error) =>
-            of(
-              EditorActions.saveRecordFailure({
-                error,
-              })
             )
           )
-        )
       )
     )
   )

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

@@ -54,7 +54,11 @@ export class EditorFacade {
   }
 
   saveRecord() {
-    this.store.dispatch(EditorActions.saveRecord())
+    this.store.dispatch(EditorActions.saveRecord({ publish: false }))
+  }
+
+  saveAndPublishRecord() {
+    this.store.dispatch(EditorActions.saveRecord({ publish: true }))
   }
 
   undoRecordDraft() {

package/src/libs/feature/editor/src/lib/components/constraint-card/constraint-card.component.ts

@@ -8,7 +8,6 @@ import {
 
 import { FormFieldRichComponent } from '../record-form/form-field/form-field-rich/form-field-rich.component'
 import { ButtonComponent, UrlInputComponent } from '../../../../../../../libs/ui/inputs/src'
-import { MatIconModule } from '@angular/material/icon'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { Constraint } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import {
@@ -26,7 +25,6 @@ import { marker } from '@biesbjerg/ngx-translate-extract-marker'
     FormFieldRichComponent,
     UrlInputComponent,
     ButtonComponent,
-    MatIconModule,
     TranslateDirective,
     TranslatePipe,
     NgIconComponent,

package/src/libs/feature/editor/src/lib/components/contact-details/contact-details-form.component.html

@@ -0,0 +1,68 @@
+<div class="flex flex-col gap-7">
+  <div class="grid grid-cols-2 gap-4">
+    <div class="min-w-0">
+      <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+        editor.record.form.field.contactDetails.lastName
+      </h3>
+      <gn-ui-text-input
+        class="block w-full"
+        extraClass="w-full"
+        [value]="contact.lastName ?? ''"
+        (valueChange)="handleChange({ lastName: $event })"
+        [placeholder]="
+          'editor.record.form.field.contactDetails.lastName.placeholder'
+            | translate
+        "
+        data-test="contactDetailsLastName"
+      ></gn-ui-text-input>
+    </div>
+    <div class="min-w-0">
+      <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+        editor.record.form.field.contactDetails.firstName
+      </h3>
+      <gn-ui-text-input
+        class="block w-full"
+        extraClass="w-full"
+        [value]="contact.firstName ?? ''"
+        (valueChange)="handleChange({ firstName: $event })"
+        [placeholder]="
+          'editor.record.form.field.contactDetails.firstName.placeholder'
+            | translate
+        "
+        data-test="contactDetailsFirstName"
+      ></gn-ui-text-input>
+    </div>
+  </div>
+  <div>
+    <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+      editor.record.form.field.contactDetails.email
+    </h3>
+    <gn-ui-text-input
+      class="block w-full"
+      extraClass="w-full"
+      [type]="'email'"
+      [value]="contact.email ?? ''"
+      (valueChange)="handleChange({ email: $event })"
+      [placeholder]="
+        'editor.record.form.field.contactDetails.email.placeholder' | translate
+      "
+      data-test="contactDetailsEmail"
+    ></gn-ui-text-input>
+  </div>
+  <div>
+    <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+      editor.record.form.field.contactDetails.organization
+    </h3>
+    <gn-ui-text-input
+      class="block w-full"
+      extraClass="w-full"
+      [value]="contact.organization?.name ?? ''"
+      (valueChange)="handleOrganizationChange({ name: $event })"
+      [placeholder]="
+        'editor.record.form.field.contactDetails.organization.placeholder'
+          | translate
+      "
+      data-test="contactDetailsOrganization"
+    ></gn-ui-text-input>
+  </div>
+</div>

package/src/libs/feature/editor/src/lib/components/contact-details/contact-details-form.component.ts

@@ -0,0 +1,41 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import {
+  Individual,
+  Organization,
+} from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { TextInputComponent } from '../../../../../../../libs/ui/inputs/src'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-contact-details-form',
+  templateUrl: './contact-details-form.component.html',
+  styleUrls: ['./contact-details-form.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [TextInputComponent, TranslateDirective, TranslatePipe],
+})
+export class ContactDetailsFormComponent {
+  @Input() contact: Individual
+  @Output() contactChange = new EventEmitter<Individual>()
+
+  // emit a fresh contact on each change; never mutate the @Input
+  handleChange(change: Partial<Individual>) {
+    this.contactChange.emit({ ...this.contact, ...change })
+  }
+
+  handleOrganizationChange(change: Partial<Organization>) {
+    this.contactChange.emit({
+      ...this.contact,
+      organization: {
+        ...(this.contact.organization ?? ({} as Organization)),
+        ...change,
+      } as Organization,
+    })
+  }
+}

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

@@ -11,20 +11,11 @@
   ></gn-ui-autocomplete>
   <div class="flex gap-2 flex-wrap">
     @for (keyword of keywords; track keyword) {
-      <gn-ui-badge
-        [removable]="true"
-        (badgeRemoveClicked)="removeKeyword(keyword)"
-        >{{ keyword.label }}
-        @if (isPlaceWithoutExtent(keyword)) {
-          <ng-icon
-            [title]="
-              'editor.record.form.keywords.place.withoutExtent' | translate
-            "
-            class="badge-warning"
-            name="matWarningAmberOutline"
-          ></ng-icon>
-        }
-      </gn-ui-badge>
+      <gn-ui-keyword-badge
+        [keyword]="keyword"
+        [editable]="true"
+        (keywordRemove)="removeKeyword($event)"
+      ></gn-ui-keyword-badge>
     }
   </div>
 </div>

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

@@ -7,40 +7,20 @@ import {
   inject,
 } from '@angular/core'
 import { PlatformServiceInterface } from '../../../../../../../libs/common/domain/src/lib/platform.service.interface'
-import { AutocompleteComponent, BadgeComponent } from '../../../../../../../libs/ui/inputs/src'
+import { AutocompleteComponent } from '../../../../../../../libs/ui/inputs/src'
+import { KeywordBadgeComponent } from '../../../../../../../libs/ui/elements/src'
 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,
-  provideNgIconsConfig,
-} from '@ng-icons/core'
-import { matWarningAmberOutline } from '@ng-icons/material-icons/outline'
 
 type AutocompleteItem = { title: string; value: Keyword }
 
 @Component({
   selector: 'gn-ui-generic-keywords',
   templateUrl: './generic-keywords.component.html',
-  styleUrls: ['./generic-keywords.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [
-    AutocompleteComponent,
-    NgIconComponent,
-    BadgeComponent,
-    TranslatePipe,
-  ],
-  providers: [
-    provideIcons({
-      matWarningAmberOutline,
-    }),
-    provideNgIconsConfig({
-      size: '1.5em',
-    }),
-  ],
+  imports: [AutocompleteComponent, KeywordBadgeComponent],
 })
 export class GenericKeywordsComponent {
   private platformService = inject(PlatformServiceInterface)
@@ -87,9 +67,4 @@ export class GenericKeywordsComponent {
     this.changedKeywords.emit(this.keywords)
     this.deletedKeyword.emit(keyword)
   }
-
-  isPlaceWithoutExtent(keyword: Keyword): boolean {
-    if (keyword.type !== 'place') return false
-    return !keyword.bbox
-  }
 }

package/src/libs/feature/editor/src/lib/components/online-service-resource-input/online-service-resource-input.component.html

@@ -3,13 +3,13 @@
     editor.record.form.field.onlineResource.edit.protocol
   </h3>
   @if (protocolHint) {
-    <span
-      class="material-symbols-outlined m-2 gn-ui-icon-small"
+    <ng-icon
+      name="matHelpOutline"
+      size="16"
+      class="m-2"
       [matTooltip]="protocolHint"
       matTooltipPosition="above"
-    >
-      help
-    </span>
+    ></ng-icon>
   }
 </div>
 <div class="flex flex-row items-center gap-4 h-[48px]">

package/src/libs/feature/editor/src/lib/components/online-service-resource-input/online-service-resource-input.component.ts

@@ -30,6 +30,7 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import { iconoirRefresh } from '@ng-icons/iconoir'
+import { matHelpOutline } from '@ng-icons/material-icons/outline'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import {
   BehaviorSubject,
@@ -65,7 +66,7 @@ marker(
     UrlInputComponent,
   ],
   providers: [
-    provideIcons({ iconoirRefresh }),
+    provideIcons({ iconoirRefresh, matHelpOutline }),
     provideNgIconsConfig({
       size: '1.5em',
     }),

package/src/libs/feature/editor/src/lib/components/record-form/form-field/field-focus.directive.ts

@@ -10,7 +10,7 @@ export class FieldFocusDirective {
 
   private el = inject(ElementRef)
 
-  public focusField() {
+  public focusField(focusInnerTarget = true) {
     setTimeout(() => {
       const host = this.el.nativeElement as HTMLElement
       const glowClass = this.gnUiFieldFocusGlowClass
@@ -25,6 +25,9 @@ export class FieldFocusDirective {
       )
 
       host.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      if (!focusInnerTarget) {
+        return
+      }
       const target =
         host.querySelector<HTMLElement>(
           'input, textarea, select, [contenteditable="true"]'

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-constraints-shortcuts/form-field-constraints-shortcuts.component.ts

@@ -131,14 +131,14 @@ export class FormFieldConstraintsShortcutsComponent implements OnDestroy {
           map((c) => c.length > 0),
           distinctUntilChanged()
         )
-        combineLatest([
-          isConstraintNotEmpty$,
-          this.anyToggleActivated$,
-        ]).subscribe(([isNotEmpty, anyToggleActivated]) => {
-          const visible = isNotEmpty && !anyToggleActivated
-          this.editorFacade.setFieldVisibility({ model }, visible)
-        })
+        combineLatest([isConstraintNotEmpty$, this.anyToggleActivated$])
+          .pipe(takeUntil(this.onDestroy$))
+          .subscribe(([isNotEmpty, anyToggleActivated]) => {
+            const visible = isNotEmpty && !anyToggleActivated
+            this.editorFacade.setFieldVisibility({ model }, visible)
+          })
       }
+      hideEmptyConstraints(this.legalConstraints$, 'legalConstraints')
       hideEmptyConstraints(this.securityConstraints$, 'securityConstraints')
       hideEmptyConstraints(this.otherConstraints$, 'otherConstraints')
     })

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts/form-field-contacts.component.html

@@ -15,8 +15,15 @@
       (itemsOrderChange)="handleContactsChanged($event)"
       [elementTemplate]="contactTemplate"
     ></gn-ui-sortable-list>
-    <ng-template #contactTemplate let-contact>
-      <gn-ui-contact-card [contact]="contact"></gn-ui-contact-card>
+    <ng-template #contactTemplate let-contact let-index="index">
+      @if (modelSpecifier === 'contact:editableDetails') {
+        <gn-ui-contact-details-form
+          [contact]="contact"
+          (contactChange)="handleContactChanged($event, index)"
+        ></gn-ui-contact-details-form>
+      } @else {
+        <gn-ui-contact-card [contact]="contact"></gn-ui-contact-card>
+      }
     </ng-template>
   } @else {
     <div

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts/form-field-contacts.component.ts

@@ -28,6 +28,7 @@ import { UserModel } from '../../../../../../../../../libs/common/domain/src/lib
 import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
 import { OrganizationsServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/organizations.service.interface'
 import { ContactCardComponent } from '../../../contact-card/contact-card.component'
+import { ContactDetailsFormComponent } from '../../../contact-details/contact-details-form.component'
 import {
   createFuzzyFilter,
   getIndividualDisplayName,
@@ -35,6 +36,7 @@ import {
 } from '../../../../../../../../../libs/util/shared/src'
 import { map } from 'rxjs/operators'
 import { SortableListComponent } from '../../../../../../../../../libs/ui/layout/src'
+import { FieldModelSpecifier } from '../../../../models/editor-config.model'
 
 @Component({
   selector: 'gn-ui-form-field-contacts',
@@ -47,6 +49,7 @@ import { SortableListComponent } from '../../../../../../../../../libs/ui/layout
     TranslateDirective,
     TranslatePipe,
     ContactCardComponent,
+    ContactDetailsFormComponent,
     SortableListComponent,
   ],
 })
@@ -56,6 +59,7 @@ export class FormFieldContactsComponent implements OnDestroy, OnChanges {
   private changeDetectorRef = inject(ChangeDetectorRef)
 
   @Input() value: Individual[]
+  @Input() modelSpecifier: FieldModelSpecifier
   @Output() valueChange: EventEmitter<Individual[]> = new EventEmitter()
 
   contacts: Individual[] = []
@@ -117,6 +121,14 @@ export class FormFieldContactsComponent implements OnDestroy, OnChanges {
     this.valueChange.emit(contacts)
   }
 
+  handleContactChanged(updatedContact: Individual, index: number) {
+    const contacts = this.contacts.map((contact, i) =>
+      i === index ? updatedContact : contact
+    )
+
+    this.handleContactsChanged(contacts)
+  }
+
   /**
    * gn-ui-autocomplete
    */

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-online-resources/form-field-online-resources.component.ts

@@ -3,11 +3,11 @@ import {
   ChangeDetectorRef,
   Component,
   EventEmitter,
+  inject,
   Input,
   Output,
   TemplateRef,
   ViewChild,
-  inject,
 } from '@angular/core'
 import { MatDialog } from '@angular/material/dialog'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-overviews/form-field-overviews.component.ts

@@ -3,11 +3,14 @@ import {
   ChangeDetectorRef,
   Component,
   EventEmitter,
+  inject,
   Input,
   Output,
-  inject,
 } from '@angular/core'
-import { GraphicOverview } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  GraphicOverview,
+  RecordKind,
+} from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import { ImageInputComponent } from '../../../../../../../../../libs/ui/elements/src'
 import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
 import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
@@ -30,6 +33,7 @@ export class FormFieldOverviewsComponent {
   private cd = inject(ChangeDetectorRef)
 
   @Input() metadataUuid: string
+  @Input() recordKind: RecordKind
   @Input() value: Array<GraphicOverview>
   @Output() valueChange: EventEmitter<Array<GraphicOverview>> =
     new EventEmitter()
@@ -111,13 +115,16 @@ export class FormFieldOverviewsComponent {
       {
         type: 'error',
         title: this.translateService.instant(
-          'editor.record.resourceError.title'
+          'editor.record.resourceError.title',
+          { recordKind: this.recordKind }
         ),
         text: `${this.translateService.instant(
-          'editor.record.resourceError.body'
+          'editor.record.resourceError.body',
+          { recordKind: this.recordKind }
         )} ${error.message}`,
         closeMessage: this.translateService.instant(
-          'editor.record.resourceError.closeMessage'
+          'editor.record.resourceError.closeMessage',
+          { recordKind: this.recordKind }
         ),
       },
       undefined,

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.html

@@ -9,11 +9,11 @@
     "
     (buttonClick)="togglePreview()"
   >
-    <span
-      class="material-symbols-outlined gn-ui-icon-small"
+    <ng-icon
+      [name]="preview ? 'matVisibilityOffOutline' : 'matVisibilityOutline'"
+      size="16"
       [ngClass]="{ 'text-primary': !preview }"
-      >{{ preview ? 'visibility_off' : 'visibility' }}</span
-    >
+    ></ng-icon>
     &nbsp;
     {{ preview ? 'Edit' : 'Preview' }}
   </gn-ui-button>