From 06dbc6bf8e124af61badcf3546c82efed27a674e Mon Sep 17 00:00:00 2001
From: "Andoni A." <14891798+andoniaf@users.noreply.github.com>
Date: Tue, 24 Feb 2026 15:42:15 +0100
Subject: [PATCH] fix(ui): add cross-field validation and fix naming collision
 for image provider

- Add superRefine validation requiring registry username when password is provided
- Rename PROVIDER_ICONS to PROVIDER_BADGE_BY_NAME to avoid collision with provider-icon-cell
---
 ui/components/graphs/sankey-chart.tsx        |  7 ++++---
 ui/components/icons/providers-badge/index.ts |  2 +-
 ui/types/formSchemas.ts                      | 12 ++++++++++++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/ui/components/graphs/sankey-chart.tsx b/ui/components/graphs/sankey-chart.tsx
index fe7708e7a1..fc7a913444 100644
--- a/ui/components/graphs/sankey-chart.tsx
+++ b/ui/components/graphs/sankey-chart.tsx
@@ -5,7 +5,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { Rectangle, ResponsiveContainer, Sankey, Tooltip } from "recharts";
 
-import { PROVIDER_ICONS } from "@/components/icons/providers-badge";
+import { PROVIDER_BADGE_BY_NAME } from "@/components/icons/providers-badge";
 import { initializeChartColors } from "@/lib/charts/colors";
 import { PROVIDER_DISPLAY_NAMES } from "@/types/providers";
 import { SEVERITY_FILTER_MAP } from "@/types/severities";
@@ -209,7 +209,7 @@ const CustomNode = ({
     }
   };
 
-  const IconComponent = PROVIDER_ICONS[nodeName];
+  const IconComponent = PROVIDER_BADGE_BY_NAME[nodeName];
   const hasIcon = IconComponent !== undefined;
   const iconSize = 24;
   const iconGap = 8;
@@ -620,7 +620,8 @@ export function SankeyChart({
           </p>
           <div className="flex flex-wrap gap-4">
             {zeroDataProviders.map((provider) => {
-              const IconComponent = PROVIDER_ICONS[provider.displayName];
+              const IconComponent =
+                PROVIDER_BADGE_BY_NAME[provider.displayName];
               return (
                 <div
                   key={provider.id}
diff --git a/ui/components/icons/providers-badge/index.ts b/ui/components/icons/providers-badge/index.ts
index 50b7652bac..395d193feb 100644
--- a/ui/components/icons/providers-badge/index.ts
+++ b/ui/components/icons/providers-badge/index.ts
@@ -29,7 +29,7 @@ export {
 };
 
 // Map provider display names to their icon components
-export const PROVIDER_ICONS: Record<string, FC<IconSvgProps>> = {
+export const PROVIDER_BADGE_BY_NAME: Record<string, FC<IconSvgProps>> = {
   AWS: AWSProviderBadge,
   Azure: AzureProviderBadge,
   "Google Cloud": GCPProviderBadge,
diff --git a/ui/types/formSchemas.ts b/ui/types/formSchemas.ts
index e476e3ce7b..a5716b2206 100644
--- a/ui/types/formSchemas.ts
+++ b/ui/types/formSchemas.ts
@@ -344,6 +344,18 @@ export const addCredentialsFormSchema = (
           }
         }
       }
+
+      if (providerType === "image") {
+        const password = data[ProviderCredentialFields.REGISTRY_PASSWORD];
+        const username = data[ProviderCredentialFields.REGISTRY_USERNAME];
+        if (password && (!username || username.trim() === "")) {
+          ctx.addIssue({
+            code: "custom",
+            message: "Registry Username is required when providing a password",
+            path: [ProviderCredentialFields.REGISTRY_USERNAME],
+          });
+        }
+      }
     });
 
 export const addCredentialsRoleFormSchema = (providerType: string) =>