geonetwork-ui 2.3.0-dev.c3722986 → 2.3.0-dev.e07c5606

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

@@ -0,0 +1,64 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { FormControl } from '@angular/forms'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { DropdownSelectorComponent } from '../../../../../../../../../libs/ui/inputs/src'
+
+@Component({
+  selector: 'gn-ui-form-field-license',
+  templateUrl: './form-field-license.component.html',
+  styleUrls: ['./form-field-license.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [DropdownSelectorComponent],
+})
+export class FormFieldLicenseComponent {
+  @Input() control!: FormControl
+  @Input() label: string
+
+  get selected() {
+    return this.control.value[0]?.text
+  }
+
+  onSelectValue(value: unknown) {
+    this.control.setValue([{ text: value }])
+  }
+
+  choices = [
+    {
+      value: 'cc-by',
+      label: marker('editor.record.form.license.cc-by'),
+    },
+    {
+      value: 'cc-by-sa',
+      label: marker('editor.record.form.license.cc-by-sa'),
+    },
+    {
+      value: 'cc-zero',
+      label: marker('editor.record.form.license.cc-zero'),
+    },
+    {
+      value: 'etalab',
+      label: marker('editor.record.form.license.etalab'),
+    },
+    {
+      value: 'etalab-v2',
+      label: marker('editor.record.form.license.etalab-v2'),
+    },
+    {
+      value: 'odbl',
+      label: marker('editor.record.form.license.odbl'),
+    },
+    {
+      value: 'odc-by',
+      label: marker('editor.record.form.license.odc-by'),
+    },
+    {
+      value: 'pddl',
+      label: marker('editor.record.form.license.pddl'),
+    },
+    {
+      value: 'unknown',
+      label: marker('editor.record.form.license.unknown'),
+    },
+  ]
+}

package/src/libs/{ui/inputs/src/lib → feature/editor/src/lib/components/record-form}/form-field/form-field-object/form-field-object.component.ts

@@ -5,5 +5,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
   templateUrl: './form-field-object.component.html',
   styleUrls: ['./form-field-object.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class FormFieldObjectComponent {}

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

@@ -0,0 +1,20 @@
+<gn-ui-form-field-wrapper [label]="label" [hint]="hint">
+  <gn-ui-button
+    form-field-interaction
+    [extraClass]="getButtonExtraClass()"
+    (buttonClick)="togglePreview()"
+  >
+    <span class="material-symbols-outlined mr-1 gn-ui-icon-small">{{
+      preview ? 'visibility' : 'visibility_off'
+    }}</span>
+    {{ preview ? 'WYSIWYG' : 'Markdown' }}
+  </gn-ui-button>
+  <gn-ui-markdown-editor
+    class="h-full"
+    [preview]="preview"
+    [helperText]="helperText"
+    [placeholder]="placeholder"
+    [textContent]="control.value"
+    (textContentChanged)="handleTextContentChanged($event)"
+  ></gn-ui-markdown-editor>
+</gn-ui-form-field-wrapper>

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

@@ -0,0 +1,44 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { FormControl, ReactiveFormsModule } from '@angular/forms'
+import { MarkdownEditorComponent } from '../../../../../../../../../libs/ui/elements/src'
+import { ButtonComponent } from '../../../../../../../../../libs/ui/inputs/src'
+import { FormFieldWrapperComponent } from '../../../../../../../../../libs/ui/layout/src'
+
+@Component({
+  selector: 'gn-ui-form-field-rich',
+  templateUrl: './form-field-rich.component.html',
+  styleUrls: ['./form-field-rich.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MarkdownEditorComponent,
+    FormFieldWrapperComponent,
+    ButtonComponent,
+  ],
+})
+export class FormFieldRichComponent {
+  @Input() control!: FormControl
+  @Input() label: string
+  @Input() hint: string
+  @Input() helperText: string
+  @Input() placeholder = 'Votre texte ici' //TODO: translate
+
+  preview = false
+
+  getButtonExtraClass() {
+    return `${
+      this.preview ? 'text-gray-200 bg-gray-900' : 'text-gray-900 bg-gray-200'
+    } rounded-[1.25rem] p-[0.375rem] text-xs font-medium w-24`
+  }
+
+  togglePreview() {
+    this.preview = !this.preview
+  }
+
+  handleTextContentChanged(textContent: string) {
+    this.control.setValue(textContent)
+  }
+}

package/src/libs/{ui/inputs/src/lib → feature/editor/src/lib/components/record-form}/form-field/form-field-simple/form-field-simple.component.ts

@@ -1,11 +1,14 @@
+import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { FormControl } from '@angular/forms'
+import { FormControl, ReactiveFormsModule } from '@angular/forms'
 
 @Component({
   selector: 'gn-ui-form-field-simple',
   templateUrl: './form-field-simple.component.html',
   styleUrls: ['./form-field-simple.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
 })
 export class FormFieldSimpleComponent {
   @Input() type: 'date' | 'url' | 'text' | 'number' | 'list' | 'toggle'

package/src/libs/{ui/inputs/src/lib → feature/editor/src/lib/components/record-form}/form-field/form-field-spatial-extent/form-field-spatial-extent.component.ts

@@ -5,5 +5,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
   templateUrl: './form-field-spatial-extent.component.html',
   styleUrls: ['./form-field-spatial-extent.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class FormFieldSpatialExtentComponent {}

package/src/libs/{ui/inputs/src/lib → feature/editor/src/lib/components/record-form}/form-field/form-field-temporal-extent/form-field-temporal-extent.component.ts

@@ -5,5 +5,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
   templateUrl: './form-field-temporal-extent.component.html',
   styleUrls: ['./form-field-temporal-extent.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class FormFieldTemporalExtentComponent {}

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

@@ -0,0 +1,87 @@
+<div class="flex flex-col h-full">
+  <ng-container *ngIf="withoutWrapper; else withGenericWrapper">
+    <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
+  </ng-container>
+  <ng-template #withGenericWrapper>
+    <gn-ui-form-field-wrapper
+      [label]="config.labelKey | translate"
+      [hint]="config.hintKey | translate"
+    >
+      <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
+    </gn-ui-form-field-wrapper>
+  </ng-template>
+</div>
+
+<ng-template #fieldContent>
+  <ng-container *ngIf="isTitle">
+    <div class="flex justify-between items-center gap-3">
+      <h2
+        #titleInput
+        class="grow text-3xl font-normal"
+        [gnUiEditableLabel]="true"
+        (editableLabelChanged)="formControl.setValue($event)"
+      >
+        {{ formControl.value }}
+      </h2>
+      <span
+        class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
+        (click)="focusTitleInput()"
+        >edit</span
+      >
+      <span
+        class="material-symbols-outlined gn-ui-icon-small m-2"
+        [matTooltip]="config.hintKey | translate"
+        matTooltipPosition="above"
+      >
+        help
+      </span>
+    </div>
+  </ng-container>
+  <ng-container *ngIf="isAbstract">
+    <gn-ui-form-field-rich
+      class="h-[8rem]"
+      [control]="formControl"
+      [label]="config.labelKey | translate"
+      [hint]="config.hintKey | translate"
+    ></gn-ui-form-field-rich>
+  </ng-container>
+  <ng-container *ngIf="isLicenses">
+    <gn-ui-form-field-license
+      [control]="formControl"
+      [label]="config.labelKey | translate"
+    ></gn-ui-form-field-license>
+  </ng-container>
+  <ng-container *ngIf="isSimpleField">
+    <gn-ui-form-field-simple
+      [type]="simpleType"
+      [control]="formControl"
+      [readonly]="isFieldLocked"
+      [invalid]="isFieldInvalid"
+    ></gn-ui-form-field-simple>
+  </ng-container>
+  <ng-container *ngIf="isFileField">
+    <gn-ui-form-field-file
+      [control]="formControl"
+      [readonly]="isFieldLocked"
+      [invalid]="isFieldInvalid"
+    ></gn-ui-form-field-file>
+  </ng-container>
+  <ng-container *ngIf="isArrayField">
+    <gn-ui-form-field-array></gn-ui-form-field-array>
+  </ng-container>
+  <ng-container *ngIf="isObjectField">
+    <gn-ui-form-field-object></gn-ui-form-field-object>
+  </ng-container>
+  <ng-container *ngIf="isSpatialExtentField">
+    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>
+  </ng-container>
+  <ng-container *ngIf="isTemporalExtentField">
+    <gn-ui-form-field-temporal-extent></gn-ui-form-field-temporal-extent>
+  </ng-container>
+  <div
+    *ngIf="isFieldInvalid && config.invalidHintKey"
+    class="mt-2 text-pink-500 text-sm field-invalid-hint"
+  >
+    {{ config.invalidHintKey | translate }}
+  </div>
+</ng-template>

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

@@ -0,0 +1,132 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { FormControl, ReactiveFormsModule } from '@angular/forms'
+import { MatIconModule } from '@angular/material/icon'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { EditableLabelDirective } from '../../../../../../../../libs/ui/inputs/src'
+import { FormFieldWrapperComponent } from '../../../../../../../../libs/ui/layout/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { Observable } from 'rxjs'
+import { FormFieldArrayComponent } from './form-field-array/form-field-array.component'
+import { FormFieldFileComponent } from './form-field-file/form-field-file.component'
+import { FormFieldLicenseComponent } from './form-field-license/form-field-license.component'
+import { FormFieldObjectComponent } from './form-field-object/form-field-object.component'
+import { FormFieldRichComponent } from './form-field-rich/form-field-rich.component'
+import { FormFieldSimpleComponent } from './form-field-simple/form-field-simple.component'
+import { FormFieldSpatialExtentComponent } from './form-field-spatial-extent/form-field-spatial-extent.component'
+import { FormFieldTemporalExtentComponent } from './form-field-temporal-extent/form-field-temporal-extent.component'
+import { FormFieldConfig } from './form-field.model'
+
+@Component({
+  selector: 'gn-ui-form-field',
+  templateUrl: './form-field.component.html',
+  styleUrls: ['./form-field.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    EditableLabelDirective,
+    MatIconModule,
+    MatTooltipModule,
+    FormFieldWrapperComponent,
+    FormFieldSimpleComponent,
+    FormFieldRichComponent,
+    FormFieldObjectComponent,
+    FormFieldSpatialExtentComponent,
+    FormFieldTemporalExtentComponent,
+    FormFieldFileComponent,
+    FormFieldArrayComponent,
+    FormFieldLicenseComponent,
+    TranslateModule,
+  ],
+})
+export class FormFieldComponent {
+  @Input() model: string
+  @Input() config: FormFieldConfig
+  @Input() set value(v: unknown) {
+    this.formControl.setValue(v, {
+      emitEvent: false,
+    })
+  }
+  @Output() valueChange: Observable<unknown>
+
+  @ViewChild('titleInput') titleInput: ElementRef
+
+  formControl = new FormControl()
+
+  constructor() {
+    this.valueChange = this.formControl.valueChanges
+  }
+
+  focusTitleInput() {
+    this.titleInput.nativeElement.children[0].focus()
+  }
+
+  get simpleType() {
+    return this.config.type as
+      | 'date'
+      | 'url'
+      | 'text'
+      | 'number'
+      | 'list'
+      | 'toggle'
+  }
+
+  get isSimpleField() {
+    return (
+      this.config.type === 'text' ||
+      this.config.type === 'number' ||
+      this.config.type === 'date' ||
+      this.config.type === 'list' ||
+      this.config.type === 'url' ||
+      this.config.type === 'toggle'
+    )
+  }
+  get isFileField() {
+    return this.config.type === 'file'
+  }
+  get isSpatialExtentField() {
+    return this.config.type === 'spatial_extent'
+  }
+  get isTemporalExtentField() {
+    return this.config.type === 'temporal_extent'
+  }
+  get isArrayField() {
+    return this.config.type === 'array'
+  }
+  get isObjectField() {
+    return this.config.type === 'object'
+  }
+
+  get isFieldOk() {
+    return !this.config.locked && !this.config.invalid
+  }
+  get isFieldLocked() {
+    return this.config.locked
+  }
+  get isFieldInvalid() {
+    return !this.config.locked && this.config.invalid
+  }
+
+  get isTitle() {
+    return this.model === 'title'
+  }
+  get isAbstract() {
+    return this.model === 'abstract'
+  }
+  get isLicenses() {
+    return this.model === 'licenses'
+  }
+
+  get withoutWrapper() {
+    return this.model === 'title' || this.model === 'abstract'
+  }
+}

package/src/libs/feature/editor/src/lib/{record-form → components/record-form}/record-form.component.html

@@ -2,6 +2,7 @@
   <ng-container *ngFor="let field of fields$ | async; trackBy: fieldTracker">
     <gn-ui-form-field
       *ngIf="field.config.formFieldConfig && !field.config.hidden"
+      [model]="field.config.model"
       [config]="field.config.formFieldConfig"
       [value]="field.value"
       (valueChange)="handleFieldValueChange(field, $event)"

package/src/libs/feature/editor/src/lib/{record-form → components/record-form}/record-form.component.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { UiInputsModule } from '../../../../../../libs/ui/inputs/src'
-import { EditorFacade } from '../+state/editor.facade'
-import { EditorFieldState, EditorFieldValue } from '../models/fields.model'
+import { EditorFacade } from '../../+state/editor.facade'
+import { EditorFieldState, EditorFieldValue } from '../../models/fields.model'
+import { FormFieldComponent } from './form-field'
 
 @Component({
   selector: 'gn-ui-record-form',
@@ -10,7 +10,7 @@ import { EditorFieldState, EditorFieldValue } from '../models/fields.model'
   styleUrls: ['./record-form.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, UiInputsModule],
+  imports: [CommonModule, FormFieldComponent],
 })
 export class RecordFormComponent {
   fields$ = this.facade.recordFields$

package/src/libs/feature/editor/src/lib/feature-editor.module.ts

@@ -1,20 +1,20 @@
+import { CommonModule } from '@angular/common'
+import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http'
 import { NgModule } from '@angular/core'
 import { MatNativeDateModule } from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatFormFieldModule } from '@angular/material/form-field'
-import { WizardComponent } from './components/wizard/wizard.component'
-import { WizardFieldComponent } from './components/wizard-field/wizard-field.component'
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
-import { TranslateModule } from '@ngx-translate/core'
-import { WizardSummarizeComponent } from './components/wizard-summarize/wizard-summarize.component'
-import { CommonModule } from '@angular/common'
-import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http'
-import { StoreModule } from '@ngrx/store'
 import { EffectsModule } from '@ngrx/effects'
-import * as fromEditor from './+state/editor.reducer'
+import { StoreModule } from '@ngrx/store'
+import { TranslateModule } from '@ngx-translate/core'
 import { EditorEffects } from './+state/editor.effects'
 import { EditorFacade } from './+state/editor.facade'
+import * as fromEditor from './+state/editor.reducer'
+import { WizardFieldComponent } from './components/wizard-field/wizard-field.component'
+import { WizardSummarizeComponent } from './components/wizard-summarize/wizard-summarize.component'
+import { WizardComponent } from './components/wizard/wizard.component'
 
 @NgModule({
   declarations: [
@@ -42,5 +42,5 @@ import { EditorFacade } from './+state/editor.facade'
   providers: [EditorFacade],
 })
 export class FeatureEditorModule {}
-export * from './services/wizard.service'
 export * from './models/index'
+export * from './services/wizard.service'

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -1,3 +1,4 @@
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { EditorFieldsConfig } from './models/fields.model'
 
 export const DEFAULT_FIELDS: EditorFieldsConfig = [
@@ -32,4 +33,11 @@ export const DEFAULT_FIELDS: EditorFieldsConfig = [
     },
     onSaveProcess: '${dateNow()}',
   },
+  {
+    model: 'licenses',
+    formFieldConfig: {
+      labelKey: marker('editor.record.form.license'),
+      type: 'list',
+    },
+  },
 ]

package/src/libs/feature/editor/src/lib/models/fields.model.ts

@@ -1,4 +1,4 @@
-import { FormFieldConfig } from '../../../../../../libs/ui/inputs/src'
+import { FormFieldConfig } from '../components/record-form/form-field'
 
 // Expressions should be enclosed in `${}` to be recognized as such
 // eg. ${dateNow()}

package/src/libs/feature/map/src/lib/add-layer-from-file/add-layer-from-file.component.html

@@ -1,6 +1,6 @@
 <div class="flex flex-col gap-2 my-2">
   <div class="flex items-center gap-4">
-    <div class="flex-grow rounded-md border-2 border-gray-200">
+    <div class="grow rounded-md border-2 border-gray-200">
       <gn-ui-drag-and-drop-file-input
         (fileChange)="handleFileChange($event)"
         [accept]="acceptedMimeType.join(',')"

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

@@ -0,0 +1,3 @@
+export * from './lib/feature-notifications.module'
+export * from './lib/notifications.service'
+export * from './lib/notifications-container/notifications-container.component'

package/src/libs/feature/notifications/src/lib/feature-notifications.module.ts

@@ -0,0 +1,10 @@
+import { NotificationsService } from './notifications.service'
+import { NgModule } from '@angular/core'
+
+@NgModule({
+  declarations: [],
+  exports: [],
+  imports: [],
+  providers: [NotificationsService],
+})
+export class FeatureNotificationsModule {}

package/src/libs/feature/notifications/src/lib/notification.model.ts

@@ -0,0 +1,6 @@
+export interface NotificationContent {
+  type: 'info' | 'warning' | 'error' | 'success'
+  title: string
+  text: string
+  closeMessage?: string
+}

package/src/libs/feature/notifications/src/lib/notifications-container/notifications-container.component.html

@@ -0,0 +1,17 @@
+<div class="flex flex-col gap-6 p-6 items-start pointer-events-none">
+  <gn-ui-notification
+    *ngFor="
+      let notification of notificationsService.notifications$ | async;
+      trackBy: trackById
+    "
+    class="max-w-full pointer-events-auto"
+    [text]="notification.text"
+    [type]="notification.type"
+    [title]="notification.title"
+    [closeMessage]="notification.closeMessage"
+    (notificationClose)="
+      notificationsService.removeNotificationById(notification.id)
+    "
+    [@enterExit]
+  ></gn-ui-notification>
+</div>

package/src/libs/feature/notifications/src/lib/notifications-container/notifications-container.component.ts

@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { NotificationsService } from '../notifications.service'
+import { NotificationComponent } from '../../../../../../libs/ui/elements/src'
+import {
+  animate,
+  keyframes,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations'
+
+@Component({
+  selector: 'gn-ui-notifications-container',
+  standalone: true,
+  imports: [CommonModule, NotificationComponent],
+  templateUrl: './notifications-container.component.html',
+  styleUrls: ['./notifications-container.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('enterExit', [
+      transition(':enter', [
+        animate(
+          '150ms',
+          keyframes([
+            style({ transform: 'scale(1)', opacity: 0 }),
+            style({ transform: 'scale(1.03)', opacity: 0.5 }),
+            style({ transform: 'scale(1)', opacity: 1 }),
+          ])
+        ),
+      ]),
+      transition(':leave', [
+        animate('200ms', style({ transform: 'translateX(50px)', opacity: 0 })),
+      ]),
+    ]),
+  ],
+})
+export class NotificationsContainerComponent {
+  constructor(protected notificationsService: NotificationsService) {}
+
+  trackById(index: number, notification: { id: number }) {
+    return notification.id
+  }
+}

package/src/libs/feature/notifications/src/lib/notifications.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core'
+import { NotificationContent } from './notification.model'
+import { BehaviorSubject } from 'rxjs'
+
+type NotificationWithIdentity = NotificationContent & { id: number }
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NotificationsService {
+  notifications$ = new BehaviorSubject<NotificationWithIdentity[]>([])
+
+  showNotification(content: NotificationContent, timeoutMs?: number) {
+    const id = Math.floor(Math.random() * 1000000)
+    this.notifications$.next([...this.notifications$.value, { ...content, id }])
+    if (typeof timeoutMs === 'undefined') return
+    setTimeout(() => {
+      this.removeNotificationById(id)
+    }, timeoutMs)
+  }
+
+  removeNotificationById(id: number) {
+    this.notifications$.next(
+      this.notifications$.value.filter((n) => n.id !== id)
+    )
+  }
+}

package/src/libs/feature/record/src/lib/feature-record.module.ts

@@ -11,7 +11,10 @@ import { MdViewFacade } from './state'
 import { MdViewEffects } from './state/mdview.effects'
 import { MapViewComponent } from './map-view/map-view.component'
 import { DataViewComponent } from './data-view/data-view.component'
-import { MD_VIEW_FEATURE_STATE_KEY, reducer } from './state/mdview.reducer'
+import {
+  METADATA_VIEW_FEATURE_STATE_KEY,
+  reducer,
+} from './state/mdview.reducer'
 import { MatTabsModule } from '@angular/material/tabs'
 import { MatIconModule } from '@angular/material/icon'
 import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
@@ -35,7 +38,7 @@ import { DataViewShareComponent } from './data-view-share/data-view-share.compon
   ],
   imports: [
     CommonModule,
-    StoreModule.forFeature(MD_VIEW_FEATURE_STATE_KEY, reducer),
+    StoreModule.forFeature(METADATA_VIEW_FEATURE_STATE_KEY, reducer),
     EffectsModule.forFeature([MdViewEffects]),
     UiLayoutModule,
     FeatureMapModule,