geonetwork-ui 2.6.0-dev.9df114cd4 → 2.6.0-dev.a0bd52a21

package/src/libs/feature/search/src/lib/results-list/results-list.container.component.ts

@@ -17,7 +17,11 @@ import {
   ResultsLayoutConfigItem,
   ResultsLayoutConfigModel,
 } from '../../../../../../libs/ui/search/src'
-import { RECORD_URL_TOKEN } from '../record-url.token'
+import {
+  RECORD_DATASET_URL_TOKEN,
+  RECORD_SERVICE_URL_TOKEN,
+  RECORD_REUSE_URL_TOKEN,
+} from '../record-url.token'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 export type ResultsListShowMoreStrategy = 'auto' | 'button' | 'none'
@@ -49,8 +53,14 @@ export class ResultsListContainerComponent implements OnInit {
     @Inject(RESULTS_LAYOUT_CONFIG)
     private resultsLayoutConfig: ResultsLayoutConfigModel,
     @Optional()
-    @Inject(RECORD_URL_TOKEN)
-    private recordUrlTemplate: string
+    @Inject(RECORD_DATASET_URL_TOKEN)
+    private recordDatasetUrlTemplate: string,
+    @Optional()
+    @Inject(RECORD_SERVICE_URL_TOKEN)
+    private recordServiceUrlTemplate: string,
+    @Optional()
+    @Inject(RECORD_REUSE_URL_TOKEN)
+    private recordReuseUrlTemplate: string
   ) {}
 
   ngOnInit(): void {
@@ -103,7 +113,18 @@ export class ResultsListContainerComponent implements OnInit {
   }
 
   getRecordUrl(metadata: CatalogRecord) {
-    if (!this.recordUrlTemplate) return null
-    return this.recordUrlTemplate.replace('${uuid}', metadata.uniqueIdentifier)
+    const tokenMap = {
+      dataset: this.recordDatasetUrlTemplate,
+      service: this.recordServiceUrlTemplate,
+      reuse: this.recordReuseUrlTemplate,
+    }
+    if (
+      !this.recordDatasetUrlTemplate &&
+      !this.recordServiceUrlTemplate &&
+      !this.recordReuseUrlTemplate
+    )
+      return null
+    const urlKind = tokenMap[metadata.kind]
+    return urlKind.replace('${uuid}', metadata.uniqueIdentifier)
   }
 }

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.html

@@ -7,6 +7,7 @@
   [canDelete]="canDelete"
   [canDuplicate]="canDuplicate"
   [isDuplicating]="isDuplicating"
+  [canEdit]="canEdit"
   (recordClick)="handleRecordClick($event)"
   (duplicateRecord)="handleDuplicateRecord($event)"
   (deleteRecord)="handleDeleteRecord($event)"

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.ts

@@ -12,7 +12,7 @@ import { SearchService } from '../utils/service/search.service'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 import { ResultsTableComponent } from '../../../../../../libs/ui/search/src'
 import { CommonModule } from '@angular/common'
-import { Subscription } from 'rxjs'
+import { Observable, Subscription } from 'rxjs'
 import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
 import { TranslateService } from '@ngx-translate/core'
 
@@ -24,8 +24,6 @@ import { TranslateService } from '@ngx-translate/core'
   imports: [CommonModule, ResultsTableComponent],
 })
 export class ResultsTableContainerComponent implements OnDestroy {
-  @Input() canDuplicate: (record: CatalogRecord) => boolean = () => true
-  @Input() canDelete: (record: CatalogRecord) => boolean = () => true
   @Input() isDuplicating: false
 
   @Output() recordClick = new EventEmitter<CatalogRecord>()
@@ -39,6 +37,18 @@ export class ResultsTableContainerComponent implements OnDestroy {
   hasDraft = (record: CatalogRecord): boolean =>
     this.recordsRepository.recordHasDraft(record.uniqueIdentifier)
 
+  canDuplicate = (record: CatalogRecord): boolean => {
+    return this.recordsRepository.canDuplicate(record)
+  }
+
+  canDelete = (record: CatalogRecord): Observable<boolean> => {
+    return this.recordsRepository.canDelete(record)
+  }
+
+  canEdit = (record: CatalogRecord): Observable<boolean> => {
+    return this.recordsRepository.canEditIndexedRecord(record)
+  }
+
   constructor(
     protected searchFacade: SearchFacade,
     private searchService: SearchService,

package/src/libs/feature/search/src/lib/utils/service/fields.service.ts

@@ -10,8 +10,10 @@ import {
   MultilingualSearchField,
   OrganizationSearchField,
   OwnerSearchField,
+  ResourceTypeLegacyField,
   SimpleSearchField,
   TranslatedSearchField,
+  RecordKindField,
   UserSearchField,
 } from './fields'
 import { forkJoin, Observable, of } from 'rxjs'
@@ -47,11 +49,8 @@ export class FieldsService {
   protected fields = {
     organization: new OrganizationSearchField(this.injector),
     format: new SimpleSearchField('format', this.injector, 'asc'),
-    resourceType: new TranslatedSearchField(
-      'resourceType',
-      this.injector,
-      'asc'
-    ),
+    resourceType: new ResourceTypeLegacyField(this.injector), // Deprecated, use `recordKind` instead
+    recordKind: new RecordKindField(this.injector),
     representationType: new TranslatedSearchField(
       'cl_spatialRepresentationType.key',
       this.injector,

package/src/libs/feature/search/src/lib/utils/service/fields.ts

@@ -22,6 +22,7 @@ import {
 } from '../../../../../../../libs/api/repository/src'
 import { LangService } from '../../../../../../../libs/util/i18n/src'
 import { formatUserInfo } from '../../../../../../../libs/util/shared/src'
+import { PossibleResourceTypes } from '../../../../../../../libs/api/metadata-converter/src'
 
 export type FieldType = 'values' | 'dateRange'
 
@@ -29,6 +30,7 @@ export type FieldValue = string | number
 export interface FieldAvailableValue {
   value: FieldValue
   label: string
+  count?: number
 }
 
 export abstract class AbstractSearchField {
@@ -80,6 +82,7 @@ export class SimpleSearchField implements AbstractSearchField {
         const bucketPromises = buckets.map(async (bucket) => ({
           label: `${await this.getBucketLabel(bucket)} (${bucket.count})`,
           value: bucket.term.toString(),
+          count: bucket.count,
         }))
         return Promise.all(bucketPromises)
       })
@@ -480,3 +483,99 @@ export class AvailableServicesField extends SimpleSearchField {
     return of(values)
   }
 }
+
+/**
+ * This class is meant to be used with the legacy filter on `resourceType` (now deprecated, the use of `recordKind` field is recommended).
+ * Since creating filters on the same ES field is not possible, in order to make the resource type filter still working,
+ * we create an ES on the fly: `resourceTypeLegacy` that references the `resourceType` under the hood.
+ * @deprecated Use `recordKind` field instead.
+ */
+export class ResourceTypeLegacyField extends TranslatedSearchField {
+  constructor(injector: Injector) {
+    super('resourceTypeLegacy', injector, 'asc')
+
+    // Ask ES to create a field on the fly: 'resourceTypeLegacy' that is in fact, 'resourceType'
+    this.esService.registerRuntimeField(
+      'resourceTypeLegacy',
+      `for (resourceType in doc.resourceType) { emit(resourceType) }`
+    )
+  }
+}
+
+export class RecordKindField extends SimpleSearchField {
+  TYPE_MAPPING = {
+    dataset: ['dataset', 'series', 'featureCatalog'],
+    service: ['service'],
+    reuse: Object.entries(PossibleResourceTypes)
+      .filter(([_, v]) => v === 'reuse')
+      .map(([k]) => k), // = ['application', 'map', 'staticMap', 'interactiveMap', ...]
+  }
+
+  constructor(injector: Injector) {
+    super('resourceType', injector, 'asc')
+  }
+
+  getAvailableValues(): Observable<FieldAvailableValue[]> {
+    return this.repository.aggregate(this.getAggregations()).pipe(
+      map(
+        (response) =>
+          (response[this.esFieldName] as AggregationBuckets).buckets || []
+      ),
+      map((buckets: TermBucket[]) => {
+        const counts = buckets.reduce(
+          (acc, { term, count }) => {
+            const value = term.toString()
+            const key = this.TYPE_MAPPING.reuse.includes(value)
+              ? 'reuse'
+              : this.TYPE_MAPPING.dataset.includes(value)
+                ? 'dataset'
+                : value
+
+            acc[key] = (acc[key] || 0) + count
+            return acc
+          },
+          {} as Record<string, number>
+        )
+
+        return Object.keys(this.TYPE_MAPPING).map((type) => ({
+          label: type,
+          value: type,
+          count: counts[type] ?? 0,
+        }))
+      })
+    )
+  }
+
+  getFiltersForValues(values: FieldValue[]): Observable<FieldFilters> {
+    const filters = {
+      [this.esFieldName]: values.reduce((acc, value) => {
+        if (value === '') return { ...acc, [value]: true }
+
+        const keysToAdd = this.TYPE_MAPPING[value] || [value]
+        keysToAdd.forEach((key: string) => (acc[key] = true))
+
+        return acc
+      }, {}),
+    }
+
+    return of(filters)
+  }
+
+  getValuesForFilter(filters: FieldFilters): Observable<FieldValue[]> {
+    const filter = filters[this.esFieldName]
+    if (!filter) return of([])
+
+    const activeValues = Object.keys(filter).filter((v) => filter[v])
+    const activeTypes = Object.keys(this.TYPE_MAPPING).filter((type) =>
+      this.TYPE_MAPPING[type].every((t: string) => activeValues.includes(t))
+    )
+
+    // Allow unknown values eg. 'type=somethingnotexist' (for UI to select none)
+    const allTypes = [].concat(...Object.values(this.TYPE_MAPPING))
+    const unknownValues = activeValues.filter(
+      (value) => !allTypes.includes(value)
+    )
+
+    return of([...activeTypes, ...unknownValues])
+  }
+}

package/src/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.html

@@ -5,6 +5,6 @@
   [selected]="currentLang"
   ariaName="languages"
   [showTitle]="false"
-  extraBtnClass="bg-transparent flex justify-items-center !pl-2 !py-1"
+  extraBtnClass="bg-transparent flex justify-items-center !pl-2 !py-1 rounded-lg"
 >
 </gn-ui-dropdown-selector>

package/src/libs/ui/dataviz/src/lib/chart/chart.component.ts

@@ -57,6 +57,7 @@ export class ChartComponent implements OnChanges, AfterViewInit {
     this.dataRaw = value
   }
   @Input() labelProperty: string
+  @Input() prettyLabel: string
   @Input() valueProperty: string
   @Input() secondaryValueProperty: string
   @Input() type: InputChartType = 'bar'
@@ -95,7 +96,7 @@ export class ChartComponent implements OnChanges, AfterViewInit {
       labels: this.getDataProxy(this.labelProperty) as string[],
       datasets: [
         {
-          label: this.valueProperty,
+          label: this.prettyLabel,
           data,
         },
       ],

package/src/libs/ui/dataviz/src/lib/data-table/data-table.component.html

@@ -8,21 +8,24 @@
       [matSortDisableClear]="true"
       *ngrxLet="properties$ as properties"
     >
-      <ng-container *ngFor="let prop of properties" [matColumnDef]="prop">
+      <ng-container
+        *ngFor="let attr of _featureAttributes"
+        [matColumnDef]="attr.value"
+      >
         <th
           mat-header-cell
           *matHeaderCellDef
           mat-sort-header
           class="text-sm text-black bg-white"
         >
-          {{ prop }}
+          {{ attr.label }}
         </th>
         <td
           mat-cell
           *matCellDef="let element"
           class="whitespace-nowrap pr-1 truncate"
         >
-          {{ element[prop] }}
+          {{ element[attr.value] }}
         </td>
       </ng-container>
 

package/src/libs/ui/dataviz/src/lib/data-table/data-table.component.ts

@@ -61,13 +61,14 @@ export interface TableItemModel {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
+  _featureAttributes = []
+  @Input() set featureAttributes(value: { value: string; label: string }[]) {
+    this._featureAttributes = value
+    this.properties$.next(value.map((attr) => attr.value))
+  }
   @Input() set dataset(value: BaseReader) {
-    this.properties$.next(null)
     this.dataset_ = value
     this.dataset_.load()
-    this.dataset_.properties.then((properties) =>
-      this.properties$.next(properties.map((p) => p.name))
-    )
     this.dataset_.info.then((info) => (this.count = info.itemsCount))
   }
   @Input() activeId: TableItemId

package/src/libs/ui/elements/src/index.ts

@@ -5,8 +5,10 @@ export * from './lib/content-ghost/content-ghost.component'
 export * from './lib/download-item/download-item.component'
 export * from './lib/downloads-list/downloads-list.component'
 export * from './lib/error/error.component'
+export * from './lib/geo-data-badge/geo-data-badge.component'
 export * from './lib/image-input/image-input.component'
 export * from './lib/image-overlay-preview/image-overlay-preview.component'
+export * from './lib/kind-badge/kind-badge.component'
 export * from './lib/link-card/link-card.component'
 export * from './lib/markdown-editor/markdown-editor.component'
 export * from './lib/markdown-parser/markdown-parser.component'
@@ -24,3 +26,5 @@ export * from './lib/user-feedback-item/user-feedback-item.component'
 export * from './lib/user-preview/user-preview.component'
 export * from './lib/application-banner/application-banner.component'
 export * from './lib/internal-link-card/internal-link-card.component'
+export * from './lib/service-capabilities/service-capabilities.component'
+export * from './lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component'

package/src/libs/ui/elements/src/lib/api-card/api-card.component.html

@@ -1,12 +1,12 @@
 <div
-  class="group flex justify-between rounded filter overflow-hidden"
+  class="group flex justify-between rounded filter overflow-hidden card-shadow"
   [ngClass]="cardClass"
 >
   <ng-container *ngIf="size !== 'S'">
-    <div>
+    <div class="flex-1 min-w-0">
       <ng-container *ngTemplateOutlet="content"></ng-container>
     </div>
-    <div class="flex items-center">
+    <div class="flex items-center min-w-[32px]">
       <ng-container *ngTemplateOutlet="buttons"></ng-container>
     </div>
   </ng-container>
@@ -51,7 +51,7 @@
 </ng-template>
 
 <ng-template #content>
-  <div>
+  <div class="flex-1 min-w-0">
     <div class="gn-ui-card-title">
       {{ link.description || link.name }}
     </div>

package/src/libs/ui/elements/src/lib/download-item/download-item.component.html

@@ -1,20 +1,20 @@
 <a
   href="{{ link.url }}"
   target="_blank"
-  class="group flex flex-row justify-between card-shadow cursor-pointer rounded overflow-hidden"
+  class="group flex flex-row justify-between card-shadow cursor-pointer rounded overflow-hidden w-full"
   rel="noopener"
   [ngClass]="cardClass"
 >
-  <div class="flex flex-col justify-between">
+  <div class="flex flex-col flex-1 justify-between min-w-0">
     <div class="gn-ui-card-title" [title]="link.description || link.name">
       {{ link.description || link.name }}
     </div>
     <div class="gn-ui-card-detail">
       {{ link.name }}
     </div>
-    <div class="flex flex-row gap-2 items-center pt-1">
+    <div class="flex flex-row gap-2 items-center pt-1 min-w-0">
       <span
-        class="inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100"
+        class="inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100 whitespace-nowrap"
         [style.background-color]="color"
         data-cy="download-format"
         >{{ format || ('downloads.format.unknown' | translate) }}</span
@@ -24,7 +24,10 @@
       >
     </div>
   </div>
-  <div class="flex" [ngClass]="size === 'S' ? 'items-end' : 'items-center'">
+  <div
+    class="flex min-w-[32px] flex-shrink-0"
+    [ngClass]="size === 'S' ? 'items-end' : 'items-center'"
+  >
     <div class="gn-ui-card-icon">
       <ng-icon
         class="inline-block card-icon align-middle"

package/src/libs/ui/elements/src/lib/download-item/download-item.component.ts

@@ -27,7 +27,7 @@ type CardSize = 'L' | 'M' | 'S' | 'XS'
   ],
 })
 export class DownloadItemComponent {
-  private _size: 'L' | 'M' | 'S' | 'XS'
+  private _size: CardSize
   @Input() link: DatasetOnlineResource
   @Input() color: string
   @Input() format: string
@@ -43,7 +43,7 @@ export class DownloadItemComponent {
     this._size = value
     this.cardClass = this.sizeClassMap[value]
   }
-  get size(): 'L' | 'M' | 'S' | 'XS' {
+  get size(): CardSize {
     return this._size
   }
   cardClass = ''

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.html

@@ -2,12 +2,23 @@
   class="flex flex-wrap justify-between items-center pb-4"
   *ngIf="links && links.length > 0"
 >
-  <div
-    class="font-title text-xl text-title font-medium mr-4 text-center sm:text-left"
-    translate
-  >
-    record.metadata.download
+  <div class="flex flex-row items-center gap-x-4">
+    <div>
+      <h3
+        class="inline-block font-title text-xl text-title font-medium mr-4"
+        translate
+      >
+        record.metadata.download
+      </h3>
+      <span class="px-3">({{ linksCount }})</span>
+    </div>
+    <gn-ui-previous-next-buttons
+      class="md:block hidden"
+      *ngIf="_list?.pagesCount > 1"
+      [listComponent]="_list"
+    ></gn-ui-previous-next-buttons>
   </div>
+
   <div
     class="flex flex-wrap justify-start sm:justify-end"
     data-cy="download-format-filters"
@@ -26,9 +37,29 @@
     </gn-ui-button>
   </div>
 </div>
-<div class="mb-2 sm:mb-3" *ngFor="let link of filteredLinks">
+
+<ng-container>
+  <gn-ui-block-list
+    class="md:block hidden"
+    #blockList
+    (listChanges)="updateList($event)"
+    containerClass="gap-4 pt-5 pb-7"
+  >
+    <gn-ui-download-item
+      #block
+      *ngFor="let link of filteredLinks"
+      [link]="link"
+      [color]="getLinkColor(link)"
+      [format]="getLinkFormat(link)"
+      [isFromApi]="isFromApi(link)"
+      [size]="blockList.subComponentSize"
+    ></gn-ui-download-item>
+  </gn-ui-block-list>
+</ng-container>
+
+<div class="mb-5 md:hidden block" *ngFor="let link of filteredLinks">
   <gn-ui-download-item
-    size="L"
+    size="M"
     [link]="link"
     [color]="getLinkColor(link)"
     [format]="getLinkFormat(link)"

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts

@@ -1,4 +1,11 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  ViewChild,
+} from '@angular/core'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { getBadgeColor, getFileFormat } from '../../../../../../libs/util/shared/src'
@@ -6,6 +13,11 @@ import { DatasetDownloadDistribution } from '../../../../../../libs/common/domai
 import { CommonModule } from '@angular/common'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 import { DownloadItemComponent } from '../download-item/download-item.component'
+import {
+  BlockListComponent,
+  Paginable,
+  PreviousNextButtonsComponent,
+} from '../../../../../../libs/ui/layout/src'
 
 marker('datahub.search.filter.all')
 marker('datahub.search.filter.others')
@@ -22,17 +34,32 @@ type FilterFormat = (typeof FILTER_FORMATS)[number]
   imports: [
     CommonModule,
     ButtonComponent,
+    BlockListComponent,
     DownloadItemComponent,
     TranslateModule,
+    PreviousNextButtonsComponent,
   ],
 })
 export class DownloadsListComponent {
-  constructor(private translateService: TranslateService) {}
+  constructor(
+    private translateService: TranslateService,
+    private changeDetector: ChangeDetectorRef
+  ) {}
 
+  _list: BlockListComponent
   @Input() links: DatasetDownloadDistribution[]
 
+  get linksCount(): number {
+    return this.filteredLinks?.length || 0
+  }
+
   activeFilterFormats: FilterFormat[] = ['all']
 
+  updateList($event: BlockListComponent) {
+    this._list = $event
+    this.changeDetector.detectChanges()
+  }
+
   private removeDuplicateFormats(
     links: DatasetDownloadDistribution[]
   ): DatasetDownloadDistribution[] {

package/src/libs/ui/elements/src/lib/geo-data-badge/geo-data-badge.component.css

@@ -0,0 +1,4 @@
+:host {
+  --gn-ui-geo-data-badge-background-color: var(--color-primary-white);
+  --gn-ui-geo-data-badge-text-color: var(--color-primary-darkest);
+}

package/src/libs/ui/elements/src/lib/geo-data-badge/geo-data-badge.component.html

@@ -0,0 +1,13 @@
+<div
+  [class]="badgeClasses"
+  [title]="'record.metadata.isGeographical' | translate"
+  *ngIf="isGeodata()"
+>
+  <ng-icon
+    class="shrink-0 text-[0.75em]"
+    name="matLocationSearchingOutline"
+  ></ng-icon>
+  <span class="ml-1 hidden sm:inline-block shrink-0" *ngIf="showLabel" translate
+    >record.metadata.isGeographical</span
+  >
+</div>

package/src/libs/ui/elements/src/lib/geo-data-badge/geo-data-badge.component.ts

@@ -0,0 +1,54 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { matLocationSearchingOutline } from '@ng-icons/material-icons/outline'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { LinkClassifierService, LinkUsage } from '../../../../../../libs/util/shared/src'
+
+@Component({
+  selector: 'gn-ui-geo-data-badge',
+  templateUrl: './geo-data-badge.component.html',
+  styleUrls: ['./geo-data-badge.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, NgIcon, TranslateModule],
+  viewProviders: [
+    provideIcons({
+      matLocationSearchingOutline,
+    }),
+  ],
+})
+export class GeoDataBadgeComponent {
+  @Input() showLabel = true
+  @Input() styling = 'default'
+  @Input() record: CatalogRecord
+
+  isGeodata() {
+    const links =
+      'onlineResources' in this.record ? this.record.onlineResources : []
+    const hasMapApi = links.some((link) =>
+      this.linkClassifier.hasUsage(link, LinkUsage.MAP_API)
+    )
+    const hasGeoData = links.some((link) =>
+      this.linkClassifier.hasUsage(link, LinkUsage.GEODATA)
+    )
+    return hasMapApi || hasGeoData
+  }
+
+  get badgeClasses(): string {
+    const baseClasses =
+      'flex shrink-0 items-center badge-btn text-xs px-2 h-6 min-h-6'
+
+    switch (this.styling) {
+      case 'light':
+        return `${baseClasses} bg-primary-white text-primary-darkest`
+      case 'default':
+        return `${baseClasses} bg-primary-darker text-white`
+      default:
+        return 'flex shrink-0 items-center'
+    }
+  }
+
+  constructor(public linkClassifier: LinkClassifierService) {}
+}

package/src/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html

@@ -5,7 +5,7 @@
   <div
     *ngIf="imageUrl"
     data-cy="record-thumbnail"
-    class="shrink-0 bg-gray-100 rounded-lg overflow-hidden border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-full w-full"
+    class="shrink-0 rounded-lg overflow-hidden group-hover:shadow-xl group-hover:border-0 h-full w-full"
   >
     <gn-ui-thumbnail
       class="relative h-full w-full"