geonetwork-ui 2.4.1-dev.e5315d8c8 → 2.4.2-dev.096cd6eb9

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

@@ -4,7 +4,7 @@
     [thumbnailUrl]="contact.organization?.logoUrl?.href"
     [fit]="'contain'"
   ></gn-ui-thumbnail>
-  <div class="flex flex-col w-full overflow-hidden leading-snug">
+  <div class="flex flex-col w-full overflow-hidden leading-snug justify-center">
     <div class="text-[16px] font-bold text-main" data-test="contactCardName">
       {{ contact.firstName }} {{ contact.lastName }}
     </div>

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

@@ -18,7 +18,7 @@
 
       <ng-icon
         *ngIf="isPlaceWithoutExtent(keyword)"
-        [title]="'editor.form.placeKeywordWithoutExtent' | translate"
+        [title]="'editor.record.form.keywords.place.withoutExtent' | translate"
         class="badge-warning"
         name="matWarningAmberOutline"
       ></ng-icon>

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

@@ -35,7 +35,10 @@
         >
           <ng-icon name="iconoirArrowLeft"></ng-icon>
         </gn-ui-button>
-        <span class="font-bold"> {{ externalImportBackLabel }}</span>
+        <span class="font-bold" translate
+          >dashboard.importRecord.importExternal.title</span
+        >
+        <span translate>dashboard.importRecord.importExternal.subtitle</span>
       </div>
       <gn-ui-url-input
         (uploadClick)="importRecord($event)"

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

@@ -84,10 +84,6 @@ export class ImportRecordComponent {
 
   sectionDisplayed: ImportMenuPage = 'mainMenu'
 
-  externalImportBackLabel = this.translateService.instant(
-    'dashboard.importRecord.importExternalLabel'
-  )
-
   constructor(
     private router: Router,
     private translateService: TranslateService,

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

@@ -54,8 +54,8 @@ export class OnlineResourceCardComponent {
       case 'service':
       case 'download':
         return (
-          this.onlineResource.name ??
-          this.onlineResource.description ??
+          this.onlineResource.description ||
+          this.onlineResource.name ||
           '(unknown)'
         )
       case 'endpoint':

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

@@ -15,9 +15,9 @@
   <mat-radio-group
     aria-labelledby="example-radio-group-label"
     class="flex flex-row gap-[8px]"
-    [(ngModel)]="service.accessServiceProtocol"
+    [(ngModel)]="_service.accessServiceProtocol"
     [disabled]="disabled"
-    (change)="resetLayersSuggestion()"
+    (change)="resetAllFormFields()"
   >
     <mat-radio-button
       *ngFor="let protocolOption of protocolOptions"
@@ -34,11 +34,11 @@
     (uploadClick)="handleUploadClick($event)"
     (valueChange)="handleUrlValueChange($event)"
     [disabled]="disabled"
-    [value]="url"
+    [value]="_service.url?.toString()"
     [showValidateButton]="activeLayerSuggestion"
   >
     <ng-content *ngIf="activeLayerSuggestion">
-      <ng-icon name="iconoirCloudUpload"></ng-icon>
+      <ng-icon name="iconoirRefresh"></ng-icon>
     </ng-content>
   </gn-ui-url-input>
 
@@ -48,38 +48,39 @@
 
   <gn-ui-text-input
     class="grow border-b border-gray-300 pb-4"
-    [(value)]="service.identifierInService"
+    [(value)]="_service.identifierInService"
     [placeholder]="getIdentifierPlaceholder() | translate"
     data-cy="identifier-in-service"
     [disabled]="disabled"
     *ngIf="
       !activeLayerSuggestion ||
-      (url && errorMessage) ||
-      (modifyMode && layers === undefined)
+      (_service.url && errorMessage) ||
+      (modifyMode && (layers$ | async).length === 0)
     "
   ></gn-ui-text-input>
-  <gn-ui-dropdown-selector
+  <gn-ui-autocomplete
     class="border-b border-gray-300 pb-4"
-    [showTitle]="false"
-    [title]="
+    [placeholder]="
       'editor.record.form.field.onlineResource.edit.identifier.select.label'
         | translate
     "
-    [choices]="layers || []"
-    *ngIf="activeLayerSuggestion && layers !== undefined"
-    [selected]="service.identifierInService"
-    (selectValue)="handleSelectValue($event)"
+    [action]="autoCompleteAction"
+    (itemSelected)="handleSelectValue($event)"
+    [displayWithFn]="displayWithFn"
+    [minCharacterCount]="0"
+    [clearOnSelection]="false"
+    *ngIf="activeLayerSuggestion && (layers$ | async)?.length > 0"
   >
-  </gn-ui-dropdown-selector>
+  </gn-ui-autocomplete>
   <gn-ui-button
-    (buttonClick)="submitIdentifier(service.identifierInService)"
-    [disabled]="disabled || !service.identifierInService"
+    (buttonClick)="submit()"
+    [disabled]="disabled || !_service.identifierInService"
     type="primary"
     *ngIf="
       !modifyMode &&
-      ((activeLayerSuggestion && layers) ||
+      ((activeLayerSuggestion && (layers$ | async)) ||
         !activeLayerSuggestion ||
-        (url && errorMessage))
+        (_service.url && errorMessage))
     "
   >
     <span class="text-white font-bold" translate>

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

@@ -5,8 +5,6 @@ import {
   Component,
   EventEmitter,
   Input,
-  OnChanges,
-  OnInit,
   Output,
 } from '@angular/core'
 import { FormsModule } from '@angular/forms'
@@ -18,20 +16,31 @@ import {
   ServiceProtocol,
 } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import {
+  AutocompleteComponent,
   ButtonComponent,
-  DropdownChoice,
-  DropdownSelectorComponent,
   TextInputComponent,
   UrlInputComponent,
 } from '../../../../../../../libs/ui/inputs/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { createFuzzyFilter, getLayers } from '../../../../../../../libs/util/shared/src'
 import {
   NgIconComponent,
   provideIcons,
   provideNgIconsConfig,
 } from '@ng-icons/core'
-import { iconoirCloudUpload } from '@ng-icons/iconoir'
-import { getLayers } from '../../../../../../../libs/util/shared/src'
+import { iconoirRefresh } from '@ng-icons/iconoir'
+import { TranslateModule } from '@ngx-translate/core'
+import {
+  BehaviorSubject,
+  debounceTime,
+  distinctUntilChanged,
+  Observable,
+  switchMap,
+} from 'rxjs'
+
+marker('editor.record.form.field.onlineResource.edit.identifier.placeholder')
+marker(
+  'editor.record.form.field.onlineResource.edit.identifier.placeholder.wps'
+)
 
 @Component({
   selector: 'gn-ui-online-service-resource-input',
@@ -40,7 +49,7 @@ import { getLayers } from '../../../../../../../libs/util/shared/src'
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DropdownSelectorComponent,
+    AutocompleteComponent,
     ButtonComponent,
     CommonModule,
     FormsModule,
@@ -52,27 +61,28 @@ import { getLayers } from '../../../../../../../libs/util/shared/src'
     UrlInputComponent,
   ],
   providers: [
-    provideIcons({ iconoirCloudUpload }),
+    provideIcons({ iconoirRefresh }),
     provideNgIconsConfig({
       size: '1.5em',
     }),
   ],
 })
-export class OnlineServiceResourceInputComponent implements OnChanges, OnInit {
-  @Input() service: DatasetServiceDistribution
+export class OnlineServiceResourceInputComponent {
+  _service: DatasetServiceDistribution
+  @Input() set service(service: DatasetServiceDistribution) {
+    this._service = { ...service }
+  }
   @Input() protocolHint?: string
   @Input() disabled? = false
   @Input() modifyMode? = false
-  @Output() urlChange: EventEmitter<string> = new EventEmitter()
-  @Output() identifierSubmit: EventEmitter<{
-    url: string
-    identifier: string
-  }> = new EventEmitter()
+  @Output() serviceChange: EventEmitter<DatasetServiceDistribution> =
+    new EventEmitter()
 
   errorMessage = false
-  selectedProtocol: ServiceProtocol
-  url: string
-  layers: DropdownChoice[] | undefined = undefined
+
+  layersSubject = new BehaviorSubject<{ name: string; title: string }[]>([])
+  layers$: Observable<{ name: string; title: string }[]> =
+    this.layersSubject.asObservable()
 
   protocolOptions: {
     label: string
@@ -112,74 +122,88 @@ export class OnlineServiceResourceInputComponent implements OnChanges, OnInit {
 
   get activeLayerSuggestion() {
     return !['wps', 'GPFDL', 'esriRest', 'other'].includes(
-      this.service.accessServiceProtocol
+      this._service.accessServiceProtocol
     )
   }
 
-  ngOnChanges() {
-    this.selectedProtocol =
-      this.protocolOptions.find(
-        (option) => option.value === this.service.accessServiceProtocol
-      )?.value ?? 'other'
-  }
-
-  ngOnInit() {
-    if (this.service.url) {
-      this.url = this.service.url.toString()
-    }
-  }
-
   handleUrlValueChange(url: string) {
-    this.url = url
-    this.service.url = new URL(url)
+    this._service.url = url ? new URL(url) : undefined
     this.resetLayersSuggestion()
-    this.urlChange.emit(this.url)
   }
 
   async handleUploadClick(url: string) {
-    this.url = url
-
     try {
-      const layers = await getLayers(url, this.service.accessServiceProtocol)
-      this.layers = layers.map((l) => {
-        return {
-          label: l.title ? `${l.title} ${l.name ? `(${l.name})` : ''}` : l.name,
-          value: l.name || l.title,
-        }
-      })
-
-      if (this.layers.length === 0) {
+      const layers = await getLayers(url, this._service.accessServiceProtocol)
+
+      if (layers.length === 0) {
         throw new Error('No layers found')
       }
+
+      this.layersSubject.next([...layers])
     } catch (e) {
       this.errorMessage = true
-      this.layers = undefined
+      this.layersSubject.next([])
     }
 
     this.cdr.detectChanges()
   }
 
-  handleSelectValue(val: string) {
-    this.service.identifierInService = val
+  resetAllFormFields() {
+    this._service.url = null
+    this.resetLayersSuggestion()
   }
 
   resetLayersSuggestion() {
     this.errorMessage = false
-    this.layers = undefined
-    this.service.identifierInService = null
+    this.layersSubject.next([])
+    this._service.identifierInService = null
   }
 
-  submitIdentifier(identifier: string) {
-    if (!identifier) return
-    this.identifierSubmit.emit({ url: this.url, identifier })
-    this.service.identifierInService = null
+  submit() {
+    this.serviceChange.emit({
+      ...this._service,
+      name: this._service.identifierInService, // should we keep the identifierInService? read-write duplicate with name
+    })
+    this._service.accessServiceProtocol = 'ogcFeatures'
+    this.resetAllFormFields()
   }
 
   getIdentifierPlaceholder(): string {
     const baseKey =
       'editor.record.form.field.onlineResource.edit.identifier.placeholder'
-    return this.service.accessServiceProtocol === 'wps'
+    return this._service.accessServiceProtocol === 'wps'
       ? `${baseKey}.wps`
       : baseKey
   }
+
+  /**
+   * gn-ui-autocomplete
+   */
+  displayWithFn(item: { name: string; title: string }) {
+    return item.title
+      ? `${item.title} ${item.name ? `(${item.name})` : ''}`
+      : item.name
+  }
+
+  /**
+   * gn-ui-autocomplete
+   */
+  autoCompleteAction = (query: string) => {
+    const fuzzyFilter = createFuzzyFilter(query)
+    return this.layers$.pipe(
+      switchMap((layers) => [
+        layers.filter((layer) => fuzzyFilter(layer.name)),
+      ]),
+      debounceTime(100),
+      distinctUntilChanged()
+    )
+  }
+
+  /**
+   * gn-ui-autocomplete
+   */
+  handleSelectValue(val: { name: string; title: string }) {
+    this._service.identifierInService = val.name // should we keep the identifierInService? read-write duplicate with name
+    this._service.description = val.title
+  }
 }

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

@@ -1,6 +1,6 @@
 <div class="flex flex-col gap-3">
   <gn-ui-autocomplete
-    [placeholder]="'Choose a contact'"
+    [placeholder]="'editor.record.form.field.contacts.placeholder' | translate"
     [action]="autoCompleteAction"
     (itemSelected)="addContact($event)"
     [displayWithFn]="displayWithFn"

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

@@ -31,7 +31,9 @@
       </div>
 
       <gn-ui-autocomplete
-        [placeholder]="'Choose a contact'"
+        [placeholder]="
+          'editor.record.form.field.contactsForResource.placeholder' | translate
+        "
         [action]="autoCompleteAction"
         (itemSelected)="addContact($event, role)"
         [displayWithFn]="displayWithFn"

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

@@ -2,7 +2,7 @@
   <gn-ui-generic-keywords
     [keywords]="filteredKeywords"
     [keywordTypes]="keywordTypes"
-    [placeholder]="'editor.form.keywords.placeholder' | translate"
+    [placeholder]="'editor.record.form.keywords.placeholder' | translate"
     (changedKeywords)="handleKeywordsChange($event)"
     [allowSubmit]="false"
   >

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

@@ -41,7 +41,6 @@
         class="w-full"
         [disabled]="true"
         [value]="onlineResource.url"
-        [disabled]="disabled$ | async"
         [showValidateButton]="false"
       ></gn-ui-url-input>
     </div>

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

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -8,28 +9,27 @@ import {
   TemplateRef,
   ViewChild,
 } from '@angular/core'
+import { MatDialog } from '@angular/material/dialog'
 import {
   OnlineLinkResource,
   OnlineResource,
 } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
 import {
   FileInputComponent,
   TextAreaComponent,
   TextInputComponent,
   UrlInputComponent,
 } from '../../../../../../../../../libs/ui/inputs/src'
-import { CommonModule } from '@angular/common'
-import { OnlineResourceCardComponent } from '../../../online-resource-card/online-resource-card.component'
 import {
   ModalDialogComponent,
   SortableListComponent,
 } from '../../../../../../../../../libs/ui/layout/src'
-import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
-import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
-import { map, Subscription } from 'rxjs'
-import { MatDialog } from '@angular/material/dialog'
+import { Subscription } from 'rxjs'
 import { MAX_UPLOAD_SIZE_MB } from '../../../../fields.config'
+import { OnlineResourceCardComponent } from '../../../online-resource-card/online-resource-card.component'
 
 @Component({
   selector: 'gn-ui-form-field-online-link-resources',

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

@@ -20,8 +20,7 @@
   >
     <gn-ui-online-service-resource-input
       [service]="newService"
-      [disabled]="disabled$ | async"
-      (identifierSubmit)="handleIdentifierSubmit($event)"
+      (serviceChange)="handleServiceChange($event)"
     ></gn-ui-online-service-resource-input>
   </div>
   <div class="h-[8px]"></div>
@@ -40,28 +39,36 @@
 
   <ng-template #dialogTemplate let-onlineResource>
     <div class="flex flex-col gap-[16px]">
-      <div>
-        <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
-          editor.record.form.field.onlineResource.edit.title
-        </h3>
-        <gn-ui-text-input [(value)]="onlineResource.name"></gn-ui-text-input>
-      </div>
-      <div>
-        <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
-          editor.record.form.field.onlineResource.edit.description
-        </h3>
-        <gn-ui-text-area
-          [(value)]="onlineResource.description"
-        ></gn-ui-text-area>
-      </div>
       <ng-container *ngIf="onlineResource.type === 'service'; else urlInput">
-        <span class="w-full border-b border-gray-300"></span>
         <gn-ui-online-service-resource-input
           [service]="onlineResource"
           [modifyMode]="true"
+          [disabled]="true"
         ></gn-ui-online-service-resource-input>
+        <div>
+          <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+            editor.record.form.field.onlineResource.edit.description
+          </h3>
+          <gn-ui-text-area
+            [(value)]="onlineResource.description"
+          ></gn-ui-text-area>
+        </div>
       </ng-container>
       <ng-template #urlInput>
+        <div>
+          <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+            editor.record.form.field.onlineResource.edit.title
+          </h3>
+          <gn-ui-text-input [(value)]="onlineResource.name"></gn-ui-text-input>
+        </div>
+        <div>
+          <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
+            editor.record.form.field.onlineResource.edit.description
+          </h3>
+          <gn-ui-text-area
+            [(value)]="onlineResource.description"
+          ></gn-ui-text-area>
+        </div>
         <span class="w-full border-b border-gray-300"></span>
         <gn-ui-url-input
           class="w-full"

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

@@ -159,33 +159,8 @@ export class FormFieldOnlineResourcesComponent {
     }
   }
 
-  handleServiceUrlChange(url: string) {
-    this.valueChange.emit([
-      ...this.allResources,
-      {
-        ...this.newService,
-        url: new URL(url),
-      },
-    ])
-  }
-
-  handleIdentifierSubmit(payload: { url: string; identifier: string }) {
-    this.valueChange.emit([
-      ...this.allResources,
-      {
-        ...this.newService,
-        url: new URL(payload.url),
-      },
-    ])
-  }
-
-  handleServiceModify(
-    oldService: DatasetServiceDistribution,
-    newService: DatasetServiceDistribution
-  ) {
-    oldService.accessServiceProtocol = newService.accessServiceProtocol
-    oldService.identifierInService = newService.identifierInService
-    oldService.url = newService.url
+  handleServiceChange(service: DatasetServiceDistribution) {
+    this.valueChange.emit([...this.allResources, service])
   }
 
   handleResourcesChange(items: unknown[]) {

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

@@ -1,6 +1,6 @@
 <div class="flex flex-col gap-3">
   <gn-ui-generic-keywords
-    [placeholder]="'Search for place keywords'"
+    [placeholder]="'editor.record.form.keywords.place.placeholder' | translate"
     [keywords]="shownKeywords$ | async"
     [keywordTypes]="['place']"
     (deletedKeyword)="handleKeywordDelete($event)"

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

@@ -10,7 +10,7 @@ import { firstValueFrom, map, shareReplay } from 'rxjs'
 import { EditorFacade } from '../../../../+state/editor.facade'
 import { switchMap } from 'rxjs/operators'
 import { FormFieldMapContainerComponent } from '../form-field-map-container/form-field-map-container.component'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { SPATIAL_SCOPES } from '../../../../fields.config'
 
 // This intermediary type will let us keep track of which keyword is bound to
@@ -36,6 +36,7 @@ type KeywordWithExtent = Keyword & {
     CommonModule,
     GenericKeywordsComponent,
     FormFieldMapContainerComponent,
+    TranslateModule,
   ],
 })
 export class FormFieldSpatialExtentComponent {

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

@@ -5,7 +5,7 @@
     (toggled)="onPlannedToggled()"
   ></gn-ui-check-toggle>
   <gn-ui-dropdown-selector
-    title="updateFrequency"
+    [title]="'editor.record.form.field.updateFrequency' | translate"
     [showTitle]="false"
     [choices]="choices"
     [selected]="selectedFrequency"

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

@@ -63,6 +63,8 @@ export const RECORD_KEYWORDS_FIELD: EditorField = {
   model: 'keywords',
   formFieldConfig: {},
 }
+// keeping track of the label to not lose existing translation
+marker('editor.record.form.field.keywords')
 
 export const RECORD_RESOURCE_CREATED_FIELD: EditorField = {
   model: 'resourceCreated',
@@ -156,18 +158,24 @@ export const RECORD_SPATIAL_EXTENTS_FIELD: EditorField = {
   model: 'spatialExtents',
   formFieldConfig: {},
 }
+// keeping track of the label to not lose existing translation
+marker('editor.record.form.field.spatialExtents')
 
 export const RECORD_ONLINE_RESOURCES: EditorField = {
   model: 'onlineResources',
   modelSpecifier: 'onlineResourceType:!link',
   formFieldConfig: {},
 }
+// keeping track of the label to not lose existing translation
+marker('editor.record.form.field.onlineResources')
 
 export const RECORD_ONLINE_LINK_RESOURCES: EditorField = {
   model: 'onlineResources',
   modelSpecifier: 'onlineResourceType:link',
   formFieldConfig: {},
 }
+// keeping track of the label to not lose existing translation
+marker('editor.record.form.field.onlineLinkResources')
 
 /************************************************************
  ***************          SECTIONS          *****************
@@ -273,7 +281,7 @@ export const DEFAULT_CONFIGURATION: EditorConfig = {
       ],
     },
     {
-      labelKey: marker('editor.record.form.page.ressources'),
+      labelKey: marker('editor.record.form.page.resources'),
       sections: [ASSOCIATED_RESOURCES_SECTION, ANNEXES_SECTION],
     },
     {

package/src/libs/feature/record/src/lib/data-view/data-view.component.html

@@ -1,6 +1,7 @@
 <div class="w-full h-full flex flex-col p-1">
   <gn-ui-dropdown-selector
     *ngIf="dropdownChoices$ | async as choices"
+    [ngClass]="{ hidden: !displaySource }"
     [title]="'table.select.data' | translate"
     class="truncate p-1 -mx-1 self-end mb-1"
     extraBtnClass="!text-primary font-sans font-medium"

package/src/libs/feature/record/src/lib/data-view/data-view.component.ts

@@ -34,6 +34,7 @@ import { TranslateModule } from '@ngx-translate/core'
 })
 export class DataViewComponent {
   @Input() mode: 'table' | 'chart'
+  @Input() displaySource = true
   @Output() chartConfig$ = new BehaviorSubject<DatavizConfigurationModel>(null)
   compatibleDataLinks$ = combineLatest([
     this.mdViewFacade.dataLinks$,

package/src/libs/feature/record/src/lib/data-view-share/data-view-share.component.html

@@ -1,4 +1,4 @@
-<div class="px-5 my-1" [ngClass]="extraClass">
+<div class="px-5 my-1">
   <mat-tab-group
     [selectedIndex]="0"
     animationDuration="0ms"

package/src/libs/feature/record/src/lib/data-view-share/data-view-share.component.ts

@@ -30,7 +30,6 @@ import { TranslateModule } from '@ngx-translate/core'
 })
 export class DataViewShareComponent {
   private _viewType: string
-  @Input() extraClass: string
 
   @Input()
   set viewType(value: string) {

package/src/libs/feature/record/src/lib/map-view/map-view.component.html

@@ -1,6 +1,7 @@
 <div class="w-full h-full flex flex-col p-1">
   <div class="w-full flex justify-end">
     <gn-ui-dropdown-selector
+      [ngClass]="{ hidden: !displaySource }"
       class="truncate p-1 -mx-1 mb-1"
       extraBtnClass="!text-primary font-sans font-medium"
       [title]="'map.select.layer' | translate"