N21-1918 External Tool Thumbnails

src/modules/data/external-tool/types/external-tool-display-data.ts

@@ -9,6 +9,8 @@ export type ExternalToolDisplayData = {
 
 	logoUrl?: string;
 
+	thumbnailUrl?: string;
+
 	openInNewTab: boolean;
 
 	status: ContextExternalToolConfigurationStatus;

src/modules/feature/media-shelf/MediaBoardAvailableElement.vue

@@ -48,7 +48,7 @@ useErrorNotification(launchError);
 const displayData: ComputedRef<MediaElementDisplay> = computed(() => ({
 	title: props.element.name,
 	description: props.element.description,
-	thumbnail: props.element?.logoUrl,
+	thumbnail: props.element.thumbnailUrl || props.element.logoUrl,
 }));
 
 const loadAvailableLineElementData = async (

src/modules/feature/media-shelf/MediaBoardExternalToolElement.vue

@@ -80,7 +80,7 @@ const elementDisplayData: Ref<MediaElementDisplay | undefined> = computed(() =>
 		? {
 				title: displayData.value.name,
 				description: displayData.value.description,
-				thumbnail: displayData.value.logoUrl,
+				thumbnail: displayData.value.thumbnailUrl || displayData.value.logoUrl,
 			}
 		: undefined
 );

src/serverApi/v3/api.ts

@@ -2547,6 +2547,12 @@ export interface ExternalToolCreateParams {
      * @memberof ExternalToolCreateParams
      */
     logoUrl?: string;
+    /**
+     * URL of the thumbnail of the external tool
+     * @type {string}
+     * @memberof ExternalToolCreateParams
+     */
+    thumbnailUrl?: string;
     /**
      * Configuration of the external tool
      * @type {BasicToolConfigParams | Lti11ToolConfigCreateParams | Oauth2ToolConfigCreateParams}
@@ -2758,6 +2764,12 @@ export interface ExternalToolResponse {
      * @memberof ExternalToolResponse
      */
     logoUrl?: string;
+    /**
+     * URL of the thumbnail of the external tool
+     * @type {string}
+     * @memberof ExternalToolResponse
+     */
+    thumbnailUrl?: string;
     /**
      * Configuration of the external tool
      * @type {BasicToolConfigParams | Lti11ToolConfigCreateParams | Oauth2ToolConfigCreateParams}
@@ -2868,6 +2880,12 @@ export interface ExternalToolUpdateParams {
      * @memberof ExternalToolUpdateParams
      */
     logoUrl?: string;
+    /**
+     * URL of the thumbnail of the external tool
+     * @type {string}
+     * @memberof ExternalToolUpdateParams
+     */
+    thumbnailUrl?: string;
     /**
      * Configuration of the external tool
      * @type {BasicToolConfigParams | Lti11ToolConfigUpdateParams | Oauth2ToolConfigUpdateParams}
@@ -4183,6 +4201,12 @@ export interface MediaAvailableLineElementResponse {
      * @memberof MediaAvailableLineElementResponse
      */
     logoUrl?: string;
+    /**
+     * Thumbnail url of the media available line element
+     * @type {string}
+     * @memberof MediaAvailableLineElementResponse
+     */
+    thumbnailUrl?: string;
 }
 /**
  * 
@@ -7627,6 +7651,12 @@ export interface ToolReferenceResponse {
      * @memberof ToolReferenceResponse
      */
     logoUrl?: string;
+    /**
+     * The url of the thumbnail which is stored in the db
+     * @type {string}
+     * @memberof ToolReferenceResponse
+     */
+    thumbnailUrl?: string;
     /**
      * The display name of the tool
      * @type {string}

src/store/external-tool/mapper/external-tool.mapper.ts

@@ -56,6 +56,7 @@ export class ExternalToolMapper {
 				response.status
 			),
 			logoUrl: response.logoUrl,
+			thumbnailUrl: response.thumbnailUrl,
 			openInNewTab: response.openInNewTab,
 		};