feat(hub-common): event implements image picker (#1784)

packages/common/src/core/schemas/internal/getThumbnailUiSchemaElement.ts

@@ -8,6 +8,8 @@ const DEFAULT_ENTITY_THUMBNAILS: Partial<Record<HubEntityType, string>> = {
     "/ember-arcgis-opendata-components/assets/images/placeholders/discussion.png",
   group:
     "/ember-arcgis-opendata-components/assets/images/placeholders/group.png",
+  event:
+    "/ember-arcgis-opendata-components/assets/images/placeholders/event.png",
   content:
     "/ember-arcgis-opendata-components/assets/images/placeholders/content.png",
 };
@@ -31,20 +33,30 @@ export function getThumbnailUiSchemaElement(
     DEFAULT_ENTITY_THUMBNAILS[entityType] ?? DEFAULT_ENTITY_THUMBNAILS.content;
   const defaultImgUrl = getCdnAssetUrl(defaultEntityThumbnail, requestOptions);
 
-  const options =
-    entityType === "group"
-      ? {
-          aspectRatio: 1,
-          sizeDescription: {
-            labelKey: `${i18nScope}.fields._thumbnail.sizeDescription`,
-          },
-        }
-      : {
-          aspectRatio: 1.5,
-          sizeDescription: {
-            labelKey: "shared.fields._thumbnail.sizeDescription",
-          },
-        };
+  let options;
+  if (entityType === "group") {
+    options = {
+      aspectRatio: 1,
+      sizeDescription: {
+        labelKey: `${i18nScope}.fields._thumbnail.sizeDescription`,
+      },
+    };
+  } else if (entityType === "event") {
+    options = {
+      aspectRatio: 1.5,
+      sizeDescription: {
+        labelKey: "shared.fields._thumbnail.sizeDescription",
+      },
+      sources: ["url"],
+    };
+  } else {
+    options = {
+      aspectRatio: 1.5,
+      sizeDescription: {
+        labelKey: "shared.fields._thumbnail.sizeDescription",
+      },
+    };
+  }
 
   return [
     {

packages/common/src/core/schemas/shared/subschemas.ts

@@ -102,6 +102,7 @@ export const ENTITY_IMAGE_SCHEMA = {
         size: { type: "number" },
       },
     },
+    url: { type: "string" },
   },
 };
 

packages/common/src/events/HubEvent.ts

@@ -232,7 +232,13 @@ export class HubEvent
    * @returns Promise<IHubEvent>
    */
   async fromEditor(editor: IHubEventEditor): Promise<IHubEvent> {
+    const thumbnail = editor._thumbnail;
     const entity = cloneObject(editor) as IHubEvent;
+
+    if (thumbnail) {
+      entity.thumbnailUrl = thumbnail.url || null;
+    }
+
     this.entity = entity;
     await this.save();
     return this.entity;

packages/common/src/events/_internal/EventSchemaEdit.ts

@@ -1,5 +1,6 @@
 import {
   ENTITY_CATEGORIES_SCHEMA,
+  ENTITY_IMAGE_SCHEMA,
   ENTITY_LOCATION_SCHEMA,
   ENTITY_NAME_SCHEMA,
   ENTITY_SUMMARY_SCHEMA,
@@ -27,6 +28,7 @@ export const buildSchema = (): IConfigurationSchema => {
       description: {
         type: "string",
       },
+      _thumbnail: ENTITY_IMAGE_SCHEMA,
       attendanceType: {
         type: "string",
         enum: [

packages/common/src/events/_internal/EventUiSchemaEdit.ts

@@ -8,6 +8,9 @@ import { getLocationOptions } from "../../core/schemas/internal/getLocationOptio
 import { fetchCategoriesUiSchemaElement } from "../../core/schemas/internal/fetchCategoriesUiSchemaElement";
 import { getWellKnownCatalog } from "../../search/wellKnownCatalog";
 import { buildReferencedContentSchema } from "./buildReferencedContentSchema";
+import { getThumbnailUiSchemaElement } from "../../core/schemas/internal/getThumbnailUiSchemaElement";
+import { getEntityThumbnailUrl } from "../../core/getEntityThumbnailUrl";
+import { HubEntity } from "../../core";
 
 /**
  * @private
@@ -60,6 +63,13 @@ export const buildUiSchema = async (
               },
             },
           },
+          ...getThumbnailUiSchemaElement(
+            i18nScope,
+            options.thumbnail,
+            getEntityThumbnailUrl(options as HubEntity),
+            "event",
+            context.requestOptions
+          ),
         ],
       },
       {

packages/common/src/events/_internal/PropertyMapper.ts

@@ -107,9 +107,12 @@ export class EventPropertyMapper extends PropertyMapper<
     obj.createdDateSource = "createdAt";
     obj.updatedDate = new Date(store.updatedAt);
     obj.updatedDateSource = "updatedAt";
+
     obj.links = computeLinks(store as IEvent);
     obj.slug = getEventSlug(store as IEvent);
-    obj.thumbnailUrl = getEventThumbnail();
+    if (!obj.thumbnailUrl) {
+      obj.thumbnailUrl = getEventThumbnail();
+    }
 
     obj.view = {
       showMap: !!store.location,
@@ -133,8 +136,6 @@ export class EventPropertyMapper extends PropertyMapper<
     entity: Partial<IHubEvent>,
     store: Partial<IEvent>
   ): Partial<IEvent> {
-    // TODO: thumbnail & thumbnail url
-
     const clonedEntity = cloneObject(entity);
 
     const obj = mapEntityToStore(clonedEntity, store, this.mappings);

packages/common/src/events/_internal/computeLinks.ts

@@ -19,6 +19,6 @@ export function computeLinks(event: IEvent): IHubEntityLinks {
     siteRelative,
     siteRelativeEntityType: getHubRelativeUrl("event"),
     workspaceRelative: getRelativeWorkspaceUrl("Event", event.id),
-    thumbnail: getEventThumbnail(),
+    thumbnail: event.thumbnailUrl ?? getEventThumbnail(),
   };
 }

packages/common/src/events/_internal/getPropertyMap.ts

@@ -21,6 +21,7 @@ export function getPropertyMap(): IPropertyMap[] {
     "startTime",
     "endDate",
     "endTime",
+    "thumbnailUrl",
   ];
   return commonPropNames.reduce(
     (acc, propName) => [...acc, { entityKey: propName, storeKey: propName }],

packages/common/src/events/edit.ts

@@ -132,6 +132,7 @@ export async function updateHubEvent(
     status: model.status,
     summary: model.summary?.trim() || null,
     tags: model.tags,
+    thumbnailUrl: model.thumbnailUrl || null,
     timeZone: model.timeZone,
     title: model.title,
     location: model.location,

packages/common/test/events/HubEvent.test.ts

@@ -203,6 +203,52 @@ describe("HubEvent Class:", () => {
         expect(result.name).toEqual("new name");
       });
 
+      it("sets thumbnail url if available", async () => {
+        const chk = HubEvent.fromJson(
+          {
+            id: "bc3",
+            name: "Test Entity",
+            thumbnailUrl: "https://myserver.com/thumbnail.png",
+          },
+          authdCtxMgr.context
+        );
+        // spy on the instance .save method and retrn void
+        const saveSpy = spyOn(chk, "save").and.returnValue(Promise.resolve());
+        // make changes to the editor
+        const editor = await chk.toEditor();
+        editor.name = "new name";
+        editor._thumbnail = { url: "https://thumbnail.jpg" };
+        // call fromEditor
+        const result = await chk.fromEditor(editor);
+        // expect the save method to have been called
+        expect(saveSpy).toHaveBeenCalledTimes(1);
+        // expect the name to have been updated
+        expect(result.name).toEqual("new name");
+      });
+
+      it("does not set thumbnail if url is not available", async () => {
+        const chk = HubEvent.fromJson(
+          {
+            id: "bc3",
+            name: "Test Entity",
+            thumbnailUrl: "https://myserver.com/thumbnail.png",
+          },
+          authdCtxMgr.context
+        );
+        // spy on the instance .save method and retrn void
+        const saveSpy = spyOn(chk, "save").and.returnValue(Promise.resolve());
+        // make changes to the editor
+        const editor = await chk.toEditor();
+        editor.name = "new name";
+        editor._thumbnail = {};
+        // call fromEditor
+        const result = await chk.fromEditor(editor);
+        // expect the save method to have been called
+        expect(saveSpy).toHaveBeenCalledTimes(1);
+        // expect the name to have been updated
+        expect(result.name).toEqual("new name");
+      });
+
       it("throws if creating", async () => {
         const chk = HubEvent.fromJson(
           {

packages/common/test/events/_internal/EventSchemaEdit.test.ts

@@ -2,6 +2,7 @@ import { buildSchema } from "../../../src/events/_internal/EventSchemaEdit";
 import { IConfigurationSchema } from "../../../src/core/schemas/types";
 import {
   ENTITY_CATEGORIES_SCHEMA,
+  ENTITY_IMAGE_SCHEMA,
   ENTITY_LOCATION_SCHEMA,
   ENTITY_NAME_SCHEMA,
   ENTITY_SUMMARY_SCHEMA,
@@ -30,6 +31,7 @@ describe("EventSchemaEdit", () => {
           description: {
             type: "string",
           },
+          _thumbnail: ENTITY_IMAGE_SCHEMA,
           attendanceType: {
             type: "string",
             enum: [