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

@@ -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}

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,

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) =>