fix(addons): show provider icon for project connected addons

src/app/shared/mappers/addon.mapper.ts

@@ -80,8 +80,27 @@ export class AddonMapper {
     };
   }
 
-  static fromConfiguredAddonResponse(response: ConfiguredAddonGetResponseJsonApi): ConfiguredAddonModel {
+  static fromConfiguredAddonResponse(
+    response: ConfiguredAddonGetResponseJsonApi,
+    included?: IncludedAddonData[]
+  ): ConfiguredAddonModel {
     const isLinkAddon = response.type === ConfiguredAddonType.LINK;
+    const externalServiceData =
+      response.relationships?.external_storage_service?.data ||
+      response.relationships?.external_citation_service?.data ||
+      response.relationships?.external_link_service?.data;
+
+    const externalServiceId = externalServiceData?.id;
+
+    const matchingService = included?.find(
+      (item) =>
+        (item.type === AddonCategory.EXTERNAL_STORAGE_SERVICES ||
+          item.type === AddonCategory.EXTERNAL_CITATION_SERVICES ||
+          item.type === AddonCategory.EXTERNAL_LINK_SERVICES) &&
+        item.id === externalServiceId
+    )?.attributes;
+    const iconUrl = (matchingService?.['icon_url'] as string) || '';
+
     return {
       type: response.type,
       id: response.id,
@@ -97,6 +116,7 @@ export class AddonMapper {
       baseAccountType: response.relationships.base_account.data.type,
       externalStorageServiceId: response.relationships?.external_storage_service?.data?.id,
       rootFolderId: response.attributes.root_folder,
+      iconUrl,
     };
   }
 

src/app/shared/models/addons/addon-json-api.models.ts

@@ -86,7 +86,19 @@ export interface ConfiguredAddonGetResponseJsonApi {
         id: string;
       };
     };
-    external_storage_service: {
+    external_storage_service?: {
+      data: {
+        type: string;
+        id: string;
+      };
+    };
+    external_citation_service?: {
+      data: {
+        type: string;
+        id: string;
+      };
+    };
+    external_link_service?: {
       data: {
         type: string;
         id: string;

src/app/shared/services/addons/addons.service.spec.ts

@@ -56,7 +56,7 @@ describe('Service: Addons', () => {
     });
 
     const request = httpMock.expectOne(
-      'http://addons.localhost:8000/resource-references/reference-id/configured_storage_addons/'
+      'http://addons.localhost:8000/resource-references/reference-id/configured_storage_addons/?include=external-storage-service&fields%5Bexternal-storage-services%5D=external_service_name,credentials_format,icon_url'
     );
     expect(request.request.method).toBe('GET');
     request.flush(getConfiguredAddonsData());
@@ -77,6 +77,7 @@ describe('Service: Addons', () => {
         selectedStorageItemId: '0AIl0aR4C9JAFUk9PVA',
         targetUrl: undefined,
         type: 'configured-storage-addons',
+        iconUrl: 'https://osf.io/assets/images/logo.svg',
       })
     );
 

src/app/shared/services/addons/addons.service.ts

@@ -112,11 +112,16 @@ export class AddonsService {
   }
 
   getConfiguredAddons(addonType: string, referenceId: string): Observable<ConfiguredAddonModel[]> {
+    const params = {
+      [`fields[external-${addonType}-services]`]: 'external_service_name,credentials_format,icon_url',
+    };
     return this.jsonApiService
       .get<
-        JsonApiResponse<ConfiguredAddonGetResponseJsonApi[], null>
-      >(`${this.apiUrl}/resource-references/${referenceId}/configured_${addonType}_addons/`)
-      .pipe(map((response) => response.data.map((item) => AddonMapper.fromConfiguredAddonResponse(item))));
+        JsonApiResponse<ConfiguredAddonGetResponseJsonApi[], IncludedAddonData[]>
+      >(`${this.apiUrl}/resource-references/${referenceId}/configured_${addonType}_addons/?include=external-${addonType}-service`, params)
+      .pipe(
+        map((response) => response.data.map((item) => AddonMapper.fromConfiguredAddonResponse(item, response.included)))
+      );
   }
 
   createAuthorizedAddon(

src/app/shared/stores/addons/addons.state.spec.ts

@@ -130,7 +130,7 @@ describe('State: Addons', () => {
         expect(loading()).toBeTruthy();
 
         const request = httpMock.expectOne(
-          'http://addons.localhost:8000/resource-references/reference-id/configured_storage_addons/'
+          'http://addons.localhost:8000/resource-references/reference-id/configured_storage_addons/?include=external-storage-service&fields%5Bexternal-storage-services%5D=external_service_name,credentials_format,icon_url'
         );
         expect(request.request.method).toBe('GET');
         request.flush(getConfiguredAddonsData());
@@ -151,6 +151,7 @@ describe('State: Addons', () => {
             targetUrl: undefined,
             type: 'configured-storage-addons',
             externalStorageServiceId: '8aeb85e9-3a73-426f-a89b-5624b4b9d418',
+            iconUrl: 'https://osf.io/assets/images/logo.svg',
           })
         );
 
@@ -177,7 +178,7 @@ describe('State: Addons', () => {
         expect(loading()).toBeTruthy();
 
         const req = httpMock.expectOne(
-          'http://addons.localhost:8000/resource-references/reference-id/configured_storage_addons/'
+          'http://addons.localhost:8000/resource-references/reference-id/configured_storage_addons/?include=external-storage-service&fields%5Bexternal-storage-services%5D=external_service_name,credentials_format,icon_url'
         );
         expect(req.request.method).toBe('GET');
 
@@ -186,7 +187,7 @@ describe('State: Addons', () => {
         expect(result).toEqual({
           data: [],
           error:
-            'Http failure response for http://addons.localhost:8000/resource-references/reference-id/configured_storage_addons/: 500 Server Error',
+            'Http failure response for http://addons.localhost:8000/resource-references/reference-id/configured_storage_addons/?include=external-storage-service&fields%5Bexternal-storage-services%5D=external_service_name,credentials_format,icon_url: 500 Server Error',
           isLoading: false,
           isSubmitting: false,
         });

src/testing/data/addons/addons.configured.data.ts

@@ -58,6 +58,20 @@ const ConfiguredAddons = {
       },
     },
   ],
+  included: [
+    {
+      type: 'external-storage-services',
+      id: '8aeb85e9-3a73-426f-a89b-5624b4b9d418',
+      attributes: {
+        external_service_name: 'googledrive',
+        credentials_format: 'OAUTH2',
+        icon_url: 'https://osf.io/assets/images/logo.svg',
+      },
+      links: {
+        self: 'https://addons.staging4.osf.io/v1/external-storage-services/8aeb85e9-3a73-426f-a89b-5624b4b9d418',
+      },
+    },
+  ],
 };
 
 export function getConfiguredAddonsData(index?: number, asArray?: boolean) {