From 5820ade1e4b9d638c9b6369aef369d6dc9320da6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?=
 <netroy@users.noreply.github.com>
Date: Thu, 23 Jan 2025 14:48:08 +0100
Subject: [PATCH] fix(editor): Render inline SVGs correctly on the external
 secrets settings page (#12802)

---
 .../ExternalSecretsProviderImage.ee.vue       | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/packages/editor-ui/src/components/ExternalSecretsProviderImage.ee.vue b/packages/editor-ui/src/components/ExternalSecretsProviderImage.ee.vue
index 8d8eec9109..8763c7aca2 100644
--- a/packages/editor-ui/src/components/ExternalSecretsProviderImage.ee.vue
+++ b/packages/editor-ui/src/components/ExternalSecretsProviderImage.ee.vue
@@ -5,27 +5,20 @@ import { computed } from 'vue';
 import infisical from '../assets/images/infisical.webp';
 import doppler from '../assets/images/doppler.webp';
 import vault from '../assets/images/hashicorp.webp';
-import awsSecretsManager from '../assets/images/aws-secrets-manager.svg';
-import azureKeyVault from '../assets/images/azure-key-vault.svg';
-import gcpSecretsManager from '../assets/images/gcp-secrets-manager.svg';
+import AwsSecretsManager from '../assets/images/aws-secrets-manager.svg';
+import AzureKeyVault from '../assets/images/azure-key-vault.svg';
+import GcpSecretsManager from '../assets/images/gcp-secrets-manager.svg';
 
-const props = defineProps<{
+const { provider } = defineProps<{
 	provider: ExternalSecretsProvider;
 }>();
 
-const image = computed(
-	() =>
-		({
-			doppler,
-			infisical,
-			vault,
-			awsSecretsManager,
-			azureKeyVault,
-			gcpSecretsManager,
-		})[props.provider.name],
-);
+const image = computed(() => ({ doppler, infisical, vault })[provider.name]);
 </script>
 
 <template>
-	<img :src="image" :alt="provider.displayName" width="28" height="28" />
+	<AwsSecretsManager v-if="provider.name === 'awsSecretsManager'" />
+	<AzureKeyVault v-else-if="provider.name === 'azureKeyVault'" />
+	<GcpSecretsManager v-else-if="provider.name === 'gcpSecretsManager'" />
+	<img v-else :src="image" :alt="provider.displayName" width="28" height="28" />
 </template>