Add thumbnail field to core plugin

Author: danielfdsilva

packages/data-plugins/lib/collections/core.ts

@@ -202,6 +202,21 @@ export class PluginCore extends Plugin {
             }
           }
         },
+        thumbnail: {
+          type: 'object',
+          'ui:widget': 'object:fieldset',
+          label: 'Thumbnail',
+          properties: {
+            title: {
+              label: 'Title',
+              type: 'string'
+            },
+            href: {
+              label: 'Href',
+              type: 'string'
+            }
+          }
+        },
         assets: {
           type: 'array',
           label: 'Assets',
@@ -260,6 +275,10 @@ export class PluginCore extends Plugin {
       spatial: data?.extent?.spatial.bbox || [],
       temporal: data?.extent?.temporal.interval.map(null2EmptyString) || [],
       links: data?.links || [],
+      thumbnail: {
+        title: data?.assets?.thumbnail?.title || '',
+        href: data?.assets?.thumbnail?.href || ''
+      },
       assets: Object.entries<Record<string, any>>(data?.assets || {}).map(
         ([key, value]) => ({
           id: key,
@@ -271,6 +290,19 @@ export class PluginCore extends Plugin {
   }
 
   exitData(data: any) {
+    const thumbnail = data.thumbnail.title
+      ? {
+          thumbnail: {
+            href: data.thumbnail.href,
+            title: data.thumbnail.title,
+            roles: ['thumbnail'],
+            type: data.thumbnail.href.match(/\.jpe?g$/)
+              ? 'image/jpeg'
+              : 'image/png'
+          }
+        }
+      : {};
+
     return {
       type: 'Collection',
       stac_version: '1.0.0',
@@ -299,7 +331,7 @@ export class PluginCore extends Plugin {
             [asset.id]: asset
           };
         },
-        {}
+        { ...thumbnail }
       ),
       summaries: data.summaries
     };

packages/data-widgets/lib/config/index.ts

@@ -5,6 +5,7 @@ import { WidgetNumber } from '../widgets/number';
 import { WidgetRadio } from '../widgets/radio';
 import { WidgetCheckbox } from '../widgets/checkbox';
 import { WidgetObject } from '../widgets/object';
+import { WidgetObjectFieldset } from '../widgets/object-fieldset';
 import { WidgetArray } from '../widgets/array';
 import { WidgetArrayInput } from '../widgets/array-input';
 import { WidgetSelect } from '../widgets/select';
@@ -14,6 +15,7 @@ import { WidgetTagger } from '../widgets/tagger';
 export const defaultPluginWidgetConfig = extendPluginConfig({
   'ui:widget': {
     object: WidgetObject,
+    'object:fieldset': WidgetObjectFieldset,
     text: WidgetText,
     number: WidgetNumber,
     radio: WidgetRadio,

packages/data-widgets/lib/widgets/object-fieldset.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { WidgetProps } from '@stac-manager/data-core';
+
+import { WidgetObject } from './object';
+import { ArrayFieldset } from '../components/elements';
+
+export function WidgetObjectFieldset(props: WidgetProps) {
+  return (
+    <ArrayFieldset label={props.field.label}>
+      <WidgetObject {...props} />
+    </ArrayFieldset>
+  );
+}

packages/data-widgets/lib/widgets/object.tsx

@@ -38,8 +38,9 @@ export function WidgetObject(props: WidgetProps) {
 
   const ctx = useFormikContext();
   const values = pointer ? get(ctx.values, pointer) : ctx.values;
+
   const schemaKeys = Object.keys(field.properties);
-  const valueKeys = Object.keys(values);
+  const valueKeys = Object.keys(values || {});
   const unlistedKeys = valueKeys.filter((key) => !schemaKeys.includes(key));
 
   return (