From a7eb711b9c6efd7ef2813b4bcc3e80f932a6307c Mon Sep 17 00:00:00 2001
From: An Qiuyu <qiuyu.an@hotmail.com>
Date: Thu, 18 Sep 2025 23:08:46 +0800
Subject: [PATCH] fix(addons): fix icon display issue, use gravyvalet icon

---
 .../addons/addon-card/addon-card.component.html          | 9 ++-------
 src/app/shared/mappers/addon.mapper.ts                   | 1 +
 src/app/shared/mocks/addon.mock.ts                       | 1 +
 src/app/shared/models/addons/addons.models.ts            | 2 ++
 src/app/shared/models/addons/authorized-account.model.ts | 1 +
 src/app/shared/models/addons/configured-addon.model.ts   | 1 +
 6 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/app/shared/components/addons/addon-card/addon-card.component.html b/src/app/shared/components/addons/addon-card/addon-card.component.html
index 37081839e..19a76d46e 100644
--- a/src/app/shared/components/addons/addon-card/addon-card.component.html
+++ b/src/app/shared/components/addons/addon-card/addon-card.component.html
@@ -1,12 +1,7 @@
 <div class="addon-card flex flex-1 gap-4 flex-column p-5">
   <div class="max-h-8rem flex justify-content-center align-items-center">
-    @if (actualAddon()?.externalServiceName) {
-      <img
-        class="addon-image"
-        alt="Addon card image"
-        [src]="'assets/icons/addons/' + actualAddon()!.externalServiceName + '.svg'"
-        data-test-addon-card-logo
-      />
+    @if (actualAddon()?.iconUrl) {
+      <img class="addon-image" alt="Addon card image" [src]="actualAddon()!.iconUrl" data-test-addon-card-logo />
     }
   </div>
 
diff --git a/src/app/shared/mappers/addon.mapper.ts b/src/app/shared/mappers/addon.mapper.ts
index 2021d910f..c1b0412e4 100644
--- a/src/app/shared/mappers/addon.mapper.ts
+++ b/src/app/shared/mappers/addon.mapper.ts
@@ -25,6 +25,7 @@ export class AddonMapper {
       supportedResourceTypes: response.attributes.supported_resource_types,
       credentialsFormat: response.attributes.credentials_format,
       providerName: response.attributes.display_name,
+      iconUrl: response.attributes.icon_url,
     };
   }
 
diff --git a/src/app/shared/mocks/addon.mock.ts b/src/app/shared/mocks/addon.mock.ts
index f547d3250..ce83f4aa3 100644
--- a/src/app/shared/mocks/addon.mock.ts
+++ b/src/app/shared/mocks/addon.mock.ts
@@ -11,4 +11,5 @@ export const MOCK_ADDON: AddonModel = {
   credentialsFormat: CredentialsFormat.ACCESS_SECRET_KEYS,
   providerName: 'Test Provider',
   wbKey: 'github',
+  iconUrl: 'https://test.com/icon.png',
 };
diff --git a/src/app/shared/models/addons/addons.models.ts b/src/app/shared/models/addons/addons.models.ts
index 5f3590524..b01d49d55 100644
--- a/src/app/shared/models/addons/addons.models.ts
+++ b/src/app/shared/models/addons/addons.models.ts
@@ -9,6 +9,7 @@ export interface AddonGetResponseJsonApi {
     external_service_name: string;
     credentials_format: string;
     wb_key: string;
+    icon_url: string;
     [key: string]: unknown;
   };
   relationships: {
@@ -103,6 +104,7 @@ export interface AddonModel {
   credentialsFormat: string;
   providerName: string;
   wbKey: string;
+  iconUrl: string;
 }
 
 export interface IncludedAddonData {
diff --git a/src/app/shared/models/addons/authorized-account.model.ts b/src/app/shared/models/addons/authorized-account.model.ts
index f517c3f81..85fff1ff0 100644
--- a/src/app/shared/models/addons/authorized-account.model.ts
+++ b/src/app/shared/models/addons/authorized-account.model.ts
@@ -15,4 +15,5 @@ export interface AuthorizedAccountModel {
   supportedFeatures: string[];
   providerName: string;
   credentialsFormat: string;
+  iconUrl?: string;
 }
diff --git a/src/app/shared/models/addons/configured-addon.model.ts b/src/app/shared/models/addons/configured-addon.model.ts
index b1bf1bac3..359a4ac60 100644
--- a/src/app/shared/models/addons/configured-addon.model.ts
+++ b/src/app/shared/models/addons/configured-addon.model.ts
@@ -13,4 +13,5 @@ export interface ConfiguredAddonModel {
   baseAccountType: string;
   externalStorageServiceId?: string;
   rootFolderId?: string;
+  iconUrl?: string;
 }