From 677ed24cd885d8971d6927ec17634a87c7b7f839 Mon Sep 17 00:00:00 2001
From: Dilan Induwara <153802063+Induwara04@users.noreply.github.com>
Date: Fri, 12 Dec 2025 12:36:23 +0530
Subject: [PATCH 1/5] Add API name, Identifier and version validation

---
 .../src/context/validationContext.tsx         | 190 +++++++++--
 .../management-portal/src/hooks/validation.ts |  92 +++++-
 .../src/pages/apis/ApiOverview.tsx            | 189 ++++++++---
 .../GithubCreationFlow.tsx                    |  75 ++---
 .../ContractCreationFlows/URLCreationFlow.tsx |  11 +-
 .../UploadCreationFlow.tsx                    | 164 +++++++---
 .../apis/CreationFlows/CreationMetaData.tsx   | 306 ++++++++++++++++--
 .../CreationFlows/EndPointCreationFlow.tsx    |  47 ++-
 8 files changed, 863 insertions(+), 211 deletions(-)

diff --git a/portals/management-portal/src/context/validationContext.tsx b/portals/management-portal/src/context/validationContext.tsx
index d8936ae9d..b99540736 100644
--- a/portals/management-portal/src/context/validationContext.tsx
+++ b/portals/management-portal/src/context/validationContext.tsx
@@ -10,8 +10,11 @@ import React, {
 } from "react";
 import {
   useGithubProjectValidation,
+  useApiUniquenessValidation,
   type GithubProjectValidationRequest,
   type GithubProjectValidationResponse,
+  type ApiNameVersionValidationRequest,
+  type ApiUniquenessValidationResponse,
 } from "../hooks/validation";
 
 /** Keep the name “githubprojectvalidation” semantic in value keys & exports */
@@ -27,21 +30,39 @@ type GithubProjectValidationContextValue = {
   setBranch: (b: string | null) => void;
   setPath: (p: string | null) => void;
 
-  // state
+  // state (github project validation)
   loading: boolean;
   error: string | null;
   result: GithubProjectValidationResponse | null;
 
-  // actions
+  // actions (github project validation)
   validate: (
     override?: Partial<GithubProjectValidationRequest>
   ) => Promise<GithubProjectValidationResponse>;
 
-  // convenience
+  // convenience (github project validation)
   isValid: boolean | null; // null when no result yet
   errors: string[]; // [] when valid or no result
 
-  // NEW: allow consumers to clear error/result/loading
+  // name+version uniqueness validation
+  nameVersionLoading: boolean;
+  nameVersionError: string | null;
+  nameVersionResult: ApiUniquenessValidationResponse | null;
+  validateNameVersion: (
+    payload: ApiNameVersionValidationRequest
+  ) => Promise<ApiUniquenessValidationResponse>;
+  isNameVersionUnique: boolean | null;
+
+  // identifier uniqueness validation
+  identifierLoading: boolean;
+  identifierError: string | null;
+  identifierResult: ApiUniquenessValidationResponse | null;
+  validateIdentifier: (
+    identifier: string
+  ) => Promise<ApiUniquenessValidationResponse>;
+  isIdentifierUnique: boolean | null;
+
+  // reset
   reset: () => void;
 };
 
@@ -51,8 +72,20 @@ const Ctx = createContext<GithubProjectValidationContextValue | undefined>(
 
 type Props = { children: ReactNode };
 
-export const GithubProjectValidationProvider: React.FC<Props> = ({ children }) => {
+/** --- Type guards (avoid any / avoid TS2367) --- */
+const isGithubValidationErr = (
+  r: GithubProjectValidationResponse
+): r is Extract<
+  GithubProjectValidationResponse,
+  { isAPIProjectValid: false }
+> => r.isAPIProjectValid === false;
+
+export const GithubProjectValidationProvider: React.FC<Props> = ({
+  children,
+}) => {
   const { validateGithubApiProject } = useGithubProjectValidation();
+  const { validateApiNameVersion, validateApiIdentifier } =
+    useApiUniquenessValidation();
 
   // inputs
   const [repoUrl, setRepoUrl] = useState<string>("");
@@ -60,22 +93,39 @@ export const GithubProjectValidationProvider: React.FC<Props> = ({ children }) =
   const [branch, setBranch] = useState<string | null>(null);
   const [path, setPath] = useState<string | null>(null);
 
-  // state
+  // state (github project)
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [result, setResult] = useState<GithubProjectValidationResponse | null>(null);
+  const [result, setResult] = useState<GithubProjectValidationResponse | null>(
+    null
+  );
+
+  // state (name+version)
+  const [nameVersionLoading, setNameVersionLoading] = useState(false);
+  const [nameVersionError, setNameVersionError] = useState<string | null>(null);
+  const [nameVersionResult, setNameVersionResult] =
+    useState<ApiUniquenessValidationResponse | null>(null);
+
+  // state (identifier)
+  const [identifierLoading, setIdentifierLoading] = useState(false);
+  const [identifierError, setIdentifierError] = useState<string | null>(null);
+  const [identifierResult, setIdentifierResult] =
+    useState<ApiUniquenessValidationResponse | null>(null);
 
   // lifecycle guards
   const mountedRef = useRef(true);
   const pendingRef = useRef(0);
+
   const begin = () => {
     pendingRef.current += 1;
     setLoading(true);
   };
+
   const end = () => {
     pendingRef.current = Math.max(0, pendingRef.current - 1);
     if (pendingRef.current === 0 && mountedRef.current) setLoading(false);
   };
+
   useEffect(() => {
     mountedRef.current = true;
     return () => {
@@ -101,7 +151,9 @@ export const GithubProjectValidationProvider: React.FC<Props> = ({ children }) =
       setError(null);
 
       try {
-        const res = await validateGithubApiProject(effective, { signal: ac.signal });
+        const res = await validateGithubApiProject(effective, {
+          signal: ac.signal,
+        });
         if (mountedRef.current) setResult(res);
         return res;
       } catch (e) {
@@ -119,27 +171,96 @@ export const GithubProjectValidationProvider: React.FC<Props> = ({ children }) =
     [repoUrl, provider, branch, path, validateGithubApiProject]
   );
 
+  const validateNameVersion = useCallback(
+    async (payload: ApiNameVersionValidationRequest) => {
+      setNameVersionLoading(true);
+      setNameVersionError(null);
+
+      try {
+        const res = await validateApiNameVersion(payload);
+        if (mountedRef.current) setNameVersionResult(res);
+        return res;
+      } catch (e) {
+        const msg =
+          e instanceof Error
+            ? e.message
+            : "Failed to validate API name & version";
+        if (mountedRef.current) {
+          setNameVersionError(msg);
+          setNameVersionResult(null);
+        }
+        throw e;
+      } finally {
+        if (mountedRef.current) setNameVersionLoading(false);
+      }
+    },
+    [validateApiNameVersion]
+  );
+
+  const validateIdentifier = useCallback(
+    async (identifier: string) => {
+      setIdentifierLoading(true);
+      setIdentifierError(null);
+
+      try {
+        const res = await validateApiIdentifier(identifier);
+        if (mountedRef.current) setIdentifierResult(res);
+        return res;
+      } catch (e) {
+        const msg =
+          e instanceof Error ? e.message : "Failed to validate API identifier";
+        if (mountedRef.current) {
+          setIdentifierError(msg);
+          setIdentifierResult(null);
+        }
+        throw e;
+      } finally {
+        if (mountedRef.current) setIdentifierLoading(false);
+      }
+    },
+    [validateApiIdentifier]
+  );
+
+  /** ✅ FIX: no impossible comparisons; use discriminant narrowing */
   const isValid = useMemo(() => {
     if (!result) return null;
-    return (
-      !!(result as any).isAPIProjectValid &&
-      !!(result as any).isAPIConfigValid &&
-      !!(result as any).isAPIDefinitionValid
-    );
+    return !isGithubValidationErr(result);
   }, [result]);
 
+  /** ✅ Type-safe errors extraction */
   const errors = useMemo<string[]>(() => {
     if (!result) return [];
-    return Array.isArray((result as any).errors) ? (result as any).errors : [];
+    return isGithubValidationErr(result) ? result.errors : [];
   }, [result]);
 
-  // NEW: reset helper
+  const isNameVersionUnique = useMemo(() => {
+    if (!nameVersionResult) return null;
+    return nameVersionResult.valid;
+  }, [nameVersionResult]);
+
+  const isIdentifierUnique = useMemo(() => {
+    if (!identifierResult) return null;
+    return identifierResult.valid;
+  }, [identifierResult]);
+
   const reset = useCallback(() => {
     pendingRef.current = 0;
     if (!mountedRef.current) return;
+
+    // github project
     setLoading(false);
     setError(null);
     setResult(null);
+
+    // name+version
+    setNameVersionLoading(false);
+    setNameVersionError(null);
+    setNameVersionResult(null);
+
+    // identifier
+    setIdentifierLoading(false);
+    setIdentifierError(null);
+    setIdentifierResult(null);
   }, []);
 
   const value = useMemo<GithubProjectValidationContextValue>(
@@ -153,16 +274,34 @@ export const GithubProjectValidationProvider: React.FC<Props> = ({ children }) =
       setProvider,
       setBranch,
       setPath,
-      // state
+
+      // github project state
       loading,
       error,
       result,
-      // actions
+
+      // github project actions
       validate,
-      // convenience
+
+      // github project convenience
       isValid,
       errors,
-      // new
+
+      // name+version uniqueness
+      nameVersionLoading,
+      nameVersionError,
+      nameVersionResult,
+      validateNameVersion,
+      isNameVersionUnique,
+
+      // identifier uniqueness
+      identifierLoading,
+      identifierError,
+      identifierResult,
+      validateIdentifier,
+      isIdentifierUnique,
+
+      // reset
       reset,
     }),
     [
@@ -176,6 +315,16 @@ export const GithubProjectValidationProvider: React.FC<Props> = ({ children }) =
       validate,
       isValid,
       errors,
+      nameVersionLoading,
+      nameVersionError,
+      nameVersionResult,
+      validateNameVersion,
+      isNameVersionUnique,
+      identifierLoading,
+      identifierError,
+      identifierResult,
+      validateIdentifier,
+      isIdentifierUnique,
       reset,
     ]
   );
@@ -185,9 +334,10 @@ export const GithubProjectValidationProvider: React.FC<Props> = ({ children }) =
 
 export const useGithubProjectValidationContext = () => {
   const ctx = useContext(Ctx);
-  if (!ctx)
+  if (!ctx) {
     throw new Error(
       "useGithubProjectValidationContext must be used within GithubProjectValidationProvider"
     );
+  }
   return ctx;
 };
diff --git a/portals/management-portal/src/hooks/validation.ts b/portals/management-portal/src/hooks/validation.ts
index 0ed052595..6015f5ba7 100644
--- a/portals/management-portal/src/hooks/validation.ts
+++ b/portals/management-portal/src/hooks/validation.ts
@@ -30,7 +30,7 @@ export type GithubProjectValidationResponse =
   | GithubProjectValidationOK
   | GithubProjectValidationErr;
 
-  export type OpenApiValidationOK = {
+export type OpenApiValidationOK = {
   isAPIDefinitionValid: true;
   api: Record<string, unknown>;
 };
@@ -44,6 +44,23 @@ export type OpenApiValidationResponse =
   | OpenApiValidationOK
   | OpenApiValidationErr;
 
+/** NEW: Uniqueness validation (name+version / identifier) */
+
+export type ApiValidateError = {
+  code: string;
+  message: string;
+};
+
+export type ApiUniquenessValidationResponse = {
+  valid: boolean;
+  error: ApiValidateError | null;
+};
+
+export type ApiNameVersionValidationRequest = {
+  name: string;
+  version: string;
+};
+
 /** ----- Helpers ----- */
 
 const parseError = async (res: Response) => {
@@ -99,8 +116,7 @@ export const useGithubProjectValidation = () => {
         );
       }
 
-      const data = (await res.json()) as GithubProjectValidationResponse;
-      return data;
+      return (await res.json()) as GithubProjectValidationResponse;
     },
     []
   );
@@ -121,9 +137,7 @@ export const useOpenApiValidation = () => {
 
       const res = await fetch(`${baseUrl}/api/v1/validate/open-api`, {
         method: "POST",
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
+        headers: { Authorization: `Bearer ${token}` },
         body: formData,
         signal: opts?.signal,
       });
@@ -134,8 +148,7 @@ export const useOpenApiValidation = () => {
         );
       }
 
-      const data = (await res.json()) as OpenApiValidationResponse;
-      return data;
+      return (await res.json()) as OpenApiValidationResponse;
     },
     []
   );
@@ -152,9 +165,7 @@ export const useOpenApiValidation = () => {
 
       const res = await fetch(`${baseUrl}/api/v1/validate/open-api`, {
         method: "POST",
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
+        headers: { Authorization: `Bearer ${token}` },
         body: formData,
         signal: opts?.signal,
       });
@@ -165,11 +176,66 @@ export const useOpenApiValidation = () => {
         );
       }
 
-      const data = (await res.json()) as OpenApiValidationResponse;
-      return data;
+      return (await res.json()) as OpenApiValidationResponse;
     },
     []
   );
 
   return { validateOpenApiUrl, validateOpenApiFile };
 };
+
+/** NEW: API uniqueness validation hook */
+export const useApiUniquenessValidation = () => {
+  /** GET: /api/v1/apis/validate?name=...&version=... */
+  const validateApiNameVersion = useCallback(
+    async (
+      payload: ApiNameVersionValidationRequest,
+      opts?: { signal?: AbortSignal }
+    ): Promise<ApiUniquenessValidationResponse> => {
+      const qs = new URLSearchParams({
+        name: payload.name,
+        version: payload.version,
+      }).toString();
+
+      const res = await authedFetch(`/api/v1/apis/validate?${qs}`, {
+        method: "GET",
+        signal: opts?.signal,
+      });
+
+      if (!res.ok) {
+        throw new Error(
+          `Failed to validate API name & version: ${await parseError(res)}`
+        );
+      }
+
+      return (await res.json()) as ApiUniquenessValidationResponse;
+    },
+    []
+  );
+
+  /** GET: /api/v1/apis/validate?identifier=... */
+  const validateApiIdentifier = useCallback(
+    async (
+      identifier: string,
+      opts?: { signal?: AbortSignal }
+    ): Promise<ApiUniquenessValidationResponse> => {
+      const qs = new URLSearchParams({ identifier }).toString();
+
+      const res = await authedFetch(`/api/v1/apis/validate?${qs}`, {
+        method: "GET",
+        signal: opts?.signal,
+      });
+
+      if (!res.ok) {
+        throw new Error(
+          `Failed to validate API identifier: ${await parseError(res)}`
+        );
+      }
+
+      return (await res.json()) as ApiUniquenessValidationResponse;
+    },
+    []
+  );
+
+  return { validateApiNameVersion, validateApiIdentifier };
+};
diff --git a/portals/management-portal/src/pages/apis/ApiOverview.tsx b/portals/management-portal/src/pages/apis/ApiOverview.tsx
index 56c7fd368..6b8aa1031 100644
--- a/portals/management-portal/src/pages/apis/ApiOverview.tsx
+++ b/portals/management-portal/src/pages/apis/ApiOverview.tsx
@@ -51,11 +51,13 @@ const GatewayListItem: React.FC<GatewayListItemProps> = ({ gateway, api }) => {
 
   const isDeployed = gateway.isDeployed === true;
   const vhost = gateway.vhost || "";
-  
+
   // Construct URLs
-  const httpUrl = vhost && api ? `http://${vhost}:8080${api.context}/${api.version}` : null;
-  const httpsUrl = vhost && api ? `https://${vhost}:5443${api.context}/${api.version}` : null;
-  
+  const httpUrl =
+    vhost && api ? `http://${vhost}:8080${api.context}/${api.version}` : null;
+  const httpsUrl =
+    vhost && api ? `https://${vhost}:5443${api.context}/${api.version}` : null;
+
   // Get upstream URL (first default backend endpoint)
   const upstreamUrl =
     api?.backendServices?.find((s) => s.isDefault)?.endpoints?.[0]?.url ??
@@ -63,10 +65,13 @@ const GatewayListItem: React.FC<GatewayListItemProps> = ({ gateway, api }) => {
     "";
 
   const handleCopyUrl = (url: string) => {
-    navigator.clipboard?.writeText(url).then(() => {
-      setCopiedUrl(url);
-      setTimeout(() => setCopiedUrl(null), 2000);
-    }).catch(() => {});
+    navigator.clipboard
+      ?.writeText(url)
+      .then(() => {
+        setCopiedUrl(url);
+        setTimeout(() => setCopiedUrl(null), 2000);
+      })
+      .catch(() => {});
   };
 
   return (
@@ -87,7 +92,10 @@ const GatewayListItem: React.FC<GatewayListItemProps> = ({ gateway, api }) => {
           gap: 2,
           cursor: "pointer",
           "&:hover": {
-            bgcolor: (t) => t.palette.mode === "dark" ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.02)",
+            bgcolor: (t) =>
+              t.palette.mode === "dark"
+                ? "rgba(255,255,255,0.03)"
+                : "rgba(0,0,0,0.02)",
           },
         }}
         onClick={() => setExpanded(!expanded)}
@@ -100,12 +108,22 @@ const GatewayListItem: React.FC<GatewayListItemProps> = ({ gateway, api }) => {
             variant={isDeployed ? "filled" : "outlined"}
             sx={{ minWidth: 85 }}
           />
-          
-          <Box sx={{ display: "flex", alignItems: "center", gap: 1, minWidth: 250 }}>
-            <Typography variant="caption" sx={{ fontWeight: 600, color: "text.secondary" }}>
+
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              minWidth: 250,
+            }}
+          >
+            <Typography
+              variant="caption"
+              sx={{ fontWeight: 600, color: "text.secondary" }}
+            >
               Gateway:
             </Typography>
-            
+
             <Typography variant="body1" sx={{ fontWeight: 600 }}>
               {gateway.name}
             </Typography>
@@ -141,7 +159,9 @@ const GatewayListItem: React.FC<GatewayListItemProps> = ({ gateway, api }) => {
                 {httpsUrl}
               </Typography>
             </Tooltip>
-            <Tooltip title={copiedUrl === httpsUrl ? "Copied!" : "Copy HTTPS URL"}>
+            <Tooltip
+              title={copiedUrl === httpsUrl ? "Copied!" : "Copy HTTPS URL"}
+            >
               <IconButton
                 size="small"
                 onClick={(e) => {
@@ -169,12 +189,30 @@ const GatewayListItem: React.FC<GatewayListItemProps> = ({ gateway, api }) => {
       </Box>
 
       <Collapse in={expanded}>
-        <Box sx={{ px: 2, pb: 2, pt: 1, bgcolor: (t) => t.palette.mode === "dark" ? "rgba(255,255,255,0.02)" : "rgba(0,0,0,0.01)" }}>
+        <Box
+          sx={{
+            px: 2,
+            pb: 2,
+            pt: 1,
+            bgcolor: (t) =>
+              t.palette.mode === "dark"
+                ? "rgba(255,255,255,0.02)"
+                : "rgba(0,0,0,0.01)",
+          }}
+        >
           <Stack spacing={1.5}>
             {/* Main URLs header + HTTP/HTTPS rows (prefix label + url + copy) */}
             {(httpUrl || httpsUrl) && (
               <Box>
-                <Typography variant="caption" sx={{ fontWeight: 600, color: "text.secondary", mb: 0.5, display: "block" }}>
+                <Typography
+                  variant="caption"
+                  sx={{
+                    fontWeight: 600,
+                    color: "text.secondary",
+                    mb: 0.5,
+                    display: "block",
+                  }}
+                >
                   Main URLs
                 </Typography>
 
@@ -186,12 +224,22 @@ const GatewayListItem: React.FC<GatewayListItemProps> = ({ gateway, api }) => {
                         alignItems: "center",
                         gap: 1,
                         p: 1.25,
-                        bgcolor: (t) => (t.palette.mode === "dark" ? "rgba(255,255,255,0.03)" : "#F9FAFB"),
+                        bgcolor: (t) =>
+                          t.palette.mode === "dark"
+                            ? "rgba(255,255,255,0.03)"
+                            : "#F9FAFB",
                         borderRadius: 1,
                         border: (t) => `1px solid ${t.palette.divider}`,
                       }}
                     >
-                      <Typography variant="caption" sx={{ fontWeight: 600, color: "text.secondary", minWidth: 90 }}>
+                      <Typography
+                        variant="caption"
+                        sx={{
+                          fontWeight: 600,
+                          color: "text.secondary",
+                          minWidth: 90,
+                        }}
+                      >
                         HTTP URL
                       </Typography>
 
@@ -211,8 +259,15 @@ const GatewayListItem: React.FC<GatewayListItemProps> = ({ gateway, api }) => {
                         </Typography>
                       </Tooltip>
 
-                      <Tooltip title={copiedUrl === httpUrl ? "Copied!" : "Copy HTTP URL"}>
-                        <IconButton size="small" onClick={() => handleCopyUrl(httpUrl)}>
+                      <Tooltip
+                        title={
+                          copiedUrl === httpUrl ? "Copied!" : "Copy HTTP URL"
+                        }
+                      >
+                        <IconButton
+                          size="small"
+                          onClick={() => handleCopyUrl(httpUrl)}
+                        >
                           <ContentCopyIcon sx={{ fontSize: 16 }} />
                         </IconButton>
                       </Tooltip>
@@ -228,12 +283,22 @@ const GatewayListItem: React.FC<GatewayListItemProps> = ({ gateway, api }) => {
                         alignItems: "center",
                         gap: 1,
                         p: 1.25,
-                        bgcolor: (t) => (t.palette.mode === "dark" ? "rgba(255,255,255,0.03)" : "#F9FAFB"),
+                        bgcolor: (t) =>
+                          t.palette.mode === "dark"
+                            ? "rgba(255,255,255,0.03)"
+                            : "#F9FAFB",
                         borderRadius: 1,
                         border: (t) => `1px solid ${t.palette.divider}`,
                       }}
                     >
-                      <Typography variant="caption" sx={{ fontWeight: 600, color: "text.secondary", minWidth: 90 }}>
+                      <Typography
+                        variant="caption"
+                        sx={{
+                          fontWeight: 600,
+                          color: "text.secondary",
+                          minWidth: 90,
+                        }}
+                      >
                         HTTPS URL
                       </Typography>
 
@@ -253,8 +318,15 @@ const GatewayListItem: React.FC<GatewayListItemProps> = ({ gateway, api }) => {
                         </Typography>
                       </Tooltip>
 
-                      <Tooltip title={copiedUrl === httpsUrl ? "Copied!" : "Copy HTTPS URL"}>
-                        <IconButton size="small" onClick={() => handleCopyUrl(httpsUrl)}>
+                      <Tooltip
+                        title={
+                          copiedUrl === httpsUrl ? "Copied!" : "Copy HTTPS URL"
+                        }
+                      >
+                        <IconButton
+                          size="small"
+                          onClick={() => handleCopyUrl(httpsUrl)}
+                        >
                           <ContentCopyIcon sx={{ fontSize: 16 }} />
                         </IconButton>
                       </Tooltip>
@@ -267,10 +339,20 @@ const GatewayListItem: React.FC<GatewayListItemProps> = ({ gateway, api }) => {
             {upstreamUrl && (
               <>
                 <Box sx={{ px: 2 }}>
-                  <Divider sx={{ my: 1, borderColor: (t) => t.palette.divider }} />
+                  <Divider
+                    sx={{ my: 1, borderColor: (t) => t.palette.divider }}
+                  />
                 </Box>
                 <Box>
-                  <Typography variant="caption" sx={{ fontWeight: 600, color: "text.secondary", mb: 0.5, display: "block" }}>
+                  <Typography
+                    variant="caption"
+                    sx={{
+                      fontWeight: 600,
+                      color: "text.secondary",
+                      mb: 0.5,
+                      display: "block",
+                    }}
+                  >
                     Upstream URL
                   </Typography>
                   <Box
@@ -279,7 +361,10 @@ const GatewayListItem: React.FC<GatewayListItemProps> = ({ gateway, api }) => {
                       alignItems: "center",
                       gap: 1,
                       p: 1.5,
-                      bgcolor: (t) => t.palette.mode === "dark" ? "rgba(255,255,255,0.05)" : "#F9FAFB",
+                      bgcolor: (t) =>
+                        t.palette.mode === "dark"
+                          ? "rgba(255,255,255,0.05)"
+                          : "#F9FAFB",
                       borderRadius: 1,
                       border: (t) => `1px solid ${t.palette.divider}`,
                     }}
@@ -299,8 +384,17 @@ const GatewayListItem: React.FC<GatewayListItemProps> = ({ gateway, api }) => {
                         {upstreamUrl}
                       </Typography>
                     </Tooltip>
-                    <Tooltip title={copiedUrl === upstreamUrl ? "Copied!" : "Copy Upstream URL"}>
-                      <IconButton size="small" onClick={() => handleCopyUrl(upstreamUrl)}>
+                    <Tooltip
+                      title={
+                        copiedUrl === upstreamUrl
+                          ? "Copied!"
+                          : "Copy Upstream URL"
+                      }
+                    >
+                      <IconButton
+                        size="small"
+                        onClick={() => handleCopyUrl(upstreamUrl)}
+                      >
                         <ContentCopyIcon sx={{ fontSize: 16 }} />
                       </IconButton>
                     </Tooltip>
@@ -329,20 +423,23 @@ const ApiOverviewContent: React.FC = () => {
   }>();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
-  const { apis, fetchApiById, fetchGatewaysForApi, loading, selectApi } = useApisContext();
+  const { apis, fetchApiById, fetchGatewaysForApi, loading, selectApi } =
+    useApisContext();
 
   const [apiId, setApiId] = React.useState<string | null>(
     searchParams.get("apiId") ?? legacyApiId ?? null
   );
   const [api, setApi] = React.useState<ApiSummary | null>(null);
-  const [associatedGateways, setAssociatedGateways] = React.useState<ApiGatewaySummary[]>([]);
+  const [associatedGateways, setAssociatedGateways] = React.useState<
+    ApiGatewaySummary[]
+  >([]);
   const [gatewaysLoading, setGatewaysLoading] = React.useState(false);
   const [detailsLoading, setDetailsLoading] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
 
   const sortedGateways = React.useMemo(() => {
-    return [...associatedGateways].sort((a, b) =>
-      +(b.isDeployed === true) - +(a.isDeployed === true)
+    return [...associatedGateways].sort(
+      (a, b) => +(b.isDeployed === true) - +(a.isDeployed === true)
     );
   }, [associatedGateways]);
 
@@ -470,6 +567,12 @@ const ApiOverviewContent: React.FC = () => {
     return `${day} day${day > 1 ? "s" : ""} ago`;
   };
 
+  const initials = (name: string) => {
+    const letters = name.replace(/[^A-Za-z]/g, "");
+    if (!letters) return "API";
+    return (letters[0] + (letters[1] || "")).toUpperCase();
+  };
+
   const ProtocolBadge = ({ label }: { label: string }) => (
     <Chip
       label={label}
@@ -502,7 +605,6 @@ const ApiOverviewContent: React.FC = () => {
     }
   }, [navigate, orgHandle, projectHandle]);
 
-
   if (loading || detailsLoading) {
     return (
       <Box display="flex" alignItems="center" justifyContent="center" mt={6}>
@@ -572,7 +674,7 @@ const ApiOverviewContent: React.FC = () => {
                 lineHeight: 1,
               }}
             >
-              {api.displayName || api.name}
+              {initials(api.name)}
             </Typography>
           </Box>
 
@@ -708,7 +810,11 @@ const ApiOverviewContent: React.FC = () => {
           p: 2.25,
         }}
       >
-        <Stack direction="row" alignItems="center" justifyContent="space-between">
+        <Stack
+          direction="row"
+          alignItems="center"
+          justifyContent="space-between"
+        >
           <Typography
             variant="subtitle1"
             sx={{ fontWeight: 600, color: "text.primary" }}
@@ -756,7 +862,12 @@ const ApiOverviewContent: React.FC = () => {
         <Box sx={{ mt: 2, mb: 2, height: 1, bgcolor: "divider" }} />
 
         {gatewaysLoading ? (
-          <Box display="flex" alignItems="center" justifyContent="center" py={4}>
+          <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            py={4}
+          >
             <CircularProgress size={24} />
           </Box>
         ) : associatedGateways.length === 0 ? (
@@ -892,8 +1003,6 @@ const ApiOverviewContent: React.FC = () => {
   );
 };
 
-const ApiOverview: React.FC = () => (
-  <ApiOverviewContent />
-);
+const ApiOverview: React.FC = () => <ApiOverviewContent />;
 
 export default ApiOverview;
diff --git a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/GithubCreationFlow.tsx b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/GithubCreationFlow.tsx
index 224baba07..b9b95f062 100644
--- a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/GithubCreationFlow.tsx
+++ b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/GithubCreationFlow.tsx
@@ -19,10 +19,11 @@ import Refresh from "../../../../components/src/Icons/generated/Refresh";
 import { IconButton } from "../../../../components/src/components/IconButton";
 import Edit from "../../../../components/src/Icons/generated/Edit";
 import CreationMetaData from "../CreationMetaData";
-import { isValidMajorMinorVersion, formatVersionToMajorMinor } from "../../../../helpers/openApiHelpers";
+import {
+  isValidMajorMinorVersion,
+  formatVersionToMajorMinor,
+} from "../../../../helpers/openApiHelpers";
 import type { ApiSummary } from "../../../../hooks/apis";
-
-// Contexts
 import { useGithubAPICreationContext } from "../../../../context/GithubAPICreationContext";
 import { useCreateComponentBuildpackContext } from "../../../../context/CreateComponentBuildpackContext";
 import { useGithubProjectValidationContext } from "../../../../context/validationContext";
@@ -31,18 +32,16 @@ import { ApiOperationsList } from "../../../../components/src/components/Common/
 import { useGithubAPICreation } from "../../../../hooks/GithubAPICreation";
 import { useNotifications } from "../../../../context/NotificationContext";
 
-/* ---------- Types ---------- */
 type Props = {
   open: boolean;
   onClose: () => void;
-  selectedProjectId?: string; // must be provided to enable Create
+  selectedProjectId?: string;
   refreshApis: (projectId?: string) => Promise<ApiSummary[]>;
 };
 
 type BranchOption = { label: string; value: string };
 type Step = "form" | "details";
 
-/* ---------- Utils ---------- */
 const isLikelyGithubRepo = (url: string) =>
   /^https:\/\/github\.com\/[^\/\s]+\/[^\/\s#]+$/i.test(url.trim());
 
@@ -78,11 +77,8 @@ const GithubCreationFlow: React.FC<Props> = ({
     reset: resetValidation,
   } = useGithubProjectValidationContext();
 
-  // 👇 We will read meta (name, context, version, target, description) for the POST
   const { contractMeta, setContractMeta } =
     useCreateComponentBuildpackContext();
-
-  // 👇 POST /api/v1/import/api-project
   const { importApiProject } = useGithubAPICreation();
   const { showNotification } = useNotifications();
 
@@ -92,6 +88,7 @@ const GithubCreationFlow: React.FC<Props> = ({
 
   const [dirError, setDirError] = React.useState<string | null>(null);
   const [isDirValid, setIsDirValid] = React.useState(false);
+  const [metaHasErrors, setMetaHasErrors] = React.useState(false);
 
   const [validatedOps, setValidatedOps] = React.useState<
     Array<{
@@ -136,7 +133,6 @@ const GithubCreationFlow: React.FC<Props> = ({
     [selectedBranch]
   );
 
-  // Debounced fetch-branches on repoUrl change
   React.useEffect(() => {
     if (!repoUrl || !isLikelyGithubRepo(repoUrl)) return;
     const t = setTimeout(() => {
@@ -146,7 +142,6 @@ const GithubCreationFlow: React.FC<Props> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [repoUrl]);
 
-  // Auto-select default branch (or first) once branches are available
   React.useEffect(() => {
     if (!branches.length || selectedBranch) return;
     const def =
@@ -155,7 +150,6 @@ const GithubCreationFlow: React.FC<Props> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [branches, selectedBranch]);
 
-  // Fetch content when branch changes and clear selections
   React.useEffect(() => {
     if (!selectedBranch) return;
     setApiDir("/");
@@ -202,7 +196,6 @@ const GithubCreationFlow: React.FC<Props> = ({
     setSelectedBranch(opt ? opt.value : null);
   };
 
-  // ----- Local directory validation for config.yaml presence -----
   const normalizePath = (p: string) =>
     p.replace(/^\/+/, "").replace(/\/+$/, "");
 
@@ -249,7 +242,9 @@ const GithubCreationFlow: React.FC<Props> = ({
         }
       }
       setIsDirValid(found);
-      setDirError(found ? null : 'Selected directory must contain a "config.yaml".');
+      setDirError(
+        found ? null : 'Selected directory must contain a "config.yaml".'
+      );
       return;
     }
 
@@ -264,14 +259,8 @@ const GithubCreationFlow: React.FC<Props> = ({
     setDirError(ok ? null : 'Selected directory must contain a "config.yaml".');
   }, [apiDir, content, findNodeByPath, nodeHasConfigYaml]);
 
-  // ----- Validate on Next, prefill meta, move to details -----
   const onNext = async () => {
-    if (
-      !repoUrl.trim() ||
-      !selectedBranch ||
-      !apiDir ||
-      !isDirValid
-    ) {
+    if (!repoUrl.trim() || !selectedBranch || !apiDir || !isDirValid) {
       return;
     }
 
@@ -293,7 +282,9 @@ const GithubCreationFlow: React.FC<Props> = ({
           ...prev,
           name: api.name || prev?.name || "",
           context: api.context || prev?.context || "",
-          version: formatVersionToMajorMinor(api.version ?? prev?.version ?? "1.0.0"),
+          version: formatVersionToMajorMinor(
+            api.version ?? prev?.version ?? "1.0.0"
+          ),
           description: api.description || prev?.description || "",
           target: target || prev?.target || "",
         }));
@@ -309,11 +300,8 @@ const GithubCreationFlow: React.FC<Props> = ({
     }
   };
 
-  // ----- Create: POST /api/v1/import/api-project -----
   const onCreate = async () => {
     setCreateError(null);
-
-    // Guard required fields
     const name = (contractMeta?.name || "").trim();
     const context = (contractMeta?.context || "").trim();
     const version = (contractMeta?.version || "").trim();
@@ -338,16 +326,14 @@ const GithubCreationFlow: React.FC<Props> = ({
       setCreateError("Project is required (missing projectId).");
       return;
     }
-
-    // build payload
     const payload = {
       repoUrl: repoUrl.trim(),
       provider: "github" as const,
       branch: selectedBranch,
-      path: apiDir === "/" ? "/" : normalizePath(apiDir), // e.g., "/" or "apis/test-api"
+      path: apiDir === "/" ? "/" : normalizePath(apiDir),
       api: {
         name,
-        displayName: name, // or customize if you prefer a separate display name
+        displayName: name,
         description,
         context: context.startsWith("/") ? context : `/${context}`,
         version,
@@ -399,7 +385,6 @@ const GithubCreationFlow: React.FC<Props> = ({
 
   return (
     <Box>
-      {/* ------------ Initial card ------------ */}
       {showInitial && step === "form" && (
         <Grid container spacing={2}>
           <Grid size={{ xs: 12, md: 6 }}>
@@ -434,10 +419,8 @@ const GithubCreationFlow: React.FC<Props> = ({
         </Grid>
       )}
 
-      {/* ------------ Form (URL/Branch/Dir) ------------ */}
       {!showInitial && step === "form" && (
         <Grid container spacing={2}>
-          {/* Row 1: URL | Branch */}
           <Grid size={{ xs: 12, md: 4 }} sx={{ mt: 1 }}>
             <TextInput
               label="Public Repository URL"
@@ -519,8 +502,6 @@ const GithubCreationFlow: React.FC<Props> = ({
               }
             />
           </Grid>
-
-          {/* Row 2: API directory | Edit */}
           <Grid size={{ xs: 12 }}>
             <Grid container spacing={2} alignItems="flex-end">
               <Grid size={{ xs: 12, md: 6 }}>
@@ -553,7 +534,6 @@ const GithubCreationFlow: React.FC<Props> = ({
             )}
           </Grid>
 
-          {/* Actions row */}
           <Grid size={{ xs: 12 }}>
             <Stack direction="row" spacing={1} sx={{ mt: 2 }}>
               <Button
@@ -595,10 +575,8 @@ const GithubCreationFlow: React.FC<Props> = ({
         </Grid>
       )}
 
-      {/* ------------ Details ------------ */}
       {step === "details" && (
         <Grid container spacing={2}>
-          {/* Validation banner */}
           {validationResult && validationResult.isAPIProjectValid === false && (
             <Grid size={{ xs: 12 }}>
               <Alert severity="error" sx={{ mb: 1.5 }}>
@@ -621,21 +599,26 @@ const GithubCreationFlow: React.FC<Props> = ({
           )}
 
           <Grid size={{ xs: 12, md: 6 }}>
-            <Card testId="">
-              <CardContent sx={{ p: 3 }}>
-                <CreationMetaData scope="contract" title="API Details" />
+            {/* <Card testId=""> */}
+              {/* <CardContent sx={{ p: 3 }}> */}
+                <CreationMetaData
+                  scope="contract"
+                  title="API Details"
+                  onValidationChange={({ hasError }) =>
+                    setMetaHasErrors(hasError)
+                  }
+                />
 
                 {!!createError && (
                   <Alert severity="error" sx={{ mt: 2 }}>
                     {createError}
                   </Alert>
                 )}
-                
 
                 <Stack
                   direction="row"
                   spacing={1}
-                  justifyContent="flex-end"
+                  justifyContent="flex-start"
                   sx={{ mt: 3 }}
                 >
                   <Button
@@ -648,13 +631,13 @@ const GithubCreationFlow: React.FC<Props> = ({
                   <Button
                     variant="contained"
                     onClick={onCreate}
-                    disabled={!canCreate || creating}
+                    disabled={!canCreate || metaHasErrors || creating}
                   >
                     {creating ? "Creating..." : "Create"}
                   </Button>
                 </Stack>
-              </CardContent>
-            </Card>
+              {/* </CardContent> */}
+            {/* </Card> */}
           </Grid>
 
           <Grid size={{ xs: 12, md: 6 }}>
@@ -665,8 +648,6 @@ const GithubCreationFlow: React.FC<Props> = ({
           </Grid>
         </Grid>
       )}
-
-      {/* Directory picker modal */}
       <ApiDirectoryModal
         open={dirModalOpen}
         currentPath={apiDir}
diff --git a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/URLCreationFlow.tsx b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/URLCreationFlow.tsx
index dc1c80bfe..bbc2530fe 100644
--- a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/URLCreationFlow.tsx
+++ b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/URLCreationFlow.tsx
@@ -19,7 +19,6 @@ import {
   isValidMajorMinorVersion,
 } from "../../../../helpers/openApiHelpers";
 
-/* ---------- Types ---------- */
 type Props = {
   open: boolean;
   selectedProjectId: string;
@@ -33,8 +32,6 @@ type Props = {
 
 type Step = "url" | "details";
 
-/* ---------- component ---------- */
-
 const URLCreationFlow: React.FC<Props> = ({
   open,
   selectedProjectId,
@@ -54,6 +51,7 @@ const URLCreationFlow: React.FC<Props> = ({
     useCreateComponentBuildpackContext();
   const { validateOpenApiUrl } = useOpenApiValidation();
   const abortControllerRef = React.useRef<AbortController | null>(null);
+  const [metaHasErrors, setMetaHasErrors] = React.useState(false);
 
   React.useEffect(() => {
     return () => {
@@ -299,7 +297,11 @@ const URLCreationFlow: React.FC<Props> = ({
         <Grid container spacing={2}>
           <Grid size={{ xs: 12, md: 6 }}>
             {/* <Paper variant="outlined" sx={{ p: 3, borderRadius: 2 }}> */}
-            <CreationMetaData scope="contract" title="API Details" />
+            <CreationMetaData
+              scope="contract"
+              title="API Details"
+              onValidationChange={({ hasError }) => setMetaHasErrors(hasError)}
+            />
             <Stack
               direction="row"
               spacing={1}
@@ -317,6 +319,7 @@ const URLCreationFlow: React.FC<Props> = ({
                 variant="contained"
                 disabled={
                   creating ||
+                  metaHasErrors ||
                   !(contractMeta?.name || "").trim() ||
                   !(contractMeta?.context || "").trim() ||
                   !isValidMajorMinorVersion(
diff --git a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/UploadCreationFlow.tsx b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/UploadCreationFlow.tsx
index 86c39d057..40068ba40 100644
--- a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/UploadCreationFlow.tsx
+++ b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/UploadCreationFlow.tsx
@@ -5,19 +5,30 @@ import { Button } from "../../../../components/src/components/Button";
 import { IconButton } from "../../../../components/src/components/IconButton";
 import Delete from "../../../../components/src/Icons/generated/Delete";
 import CreationMetaData from "../CreationMetaData";
+import { useCreateComponentBuildpackContext } from "../../../../context/CreateComponentBuildpackContext";
 import {
-  useCreateComponentBuildpackContext,
-} from "../../../../context/CreateComponentBuildpackContext";
-import { useOpenApiValidation, type OpenApiValidationResponse } from "../../../../hooks/validation";
+  useOpenApiValidation,
+  type OpenApiValidationResponse,
+} from "../../../../hooks/validation";
 import { ApiOperationsList } from "../../../../components/src/components/Common/ApiOperationsList";
 import type { ImportOpenApiRequest, ApiSummary } from "../../../../hooks/apis";
-import { defaultServiceName, firstServerUrl, deriveContext, mapOperations, formatVersionToMajorMinor, isValidMajorMinorVersion } from "../../../../helpers/openApiHelpers";
+import {
+  defaultServiceName,
+  firstServerUrl,
+  deriveContext,
+  mapOperations,
+  formatVersionToMajorMinor,
+  isValidMajorMinorVersion,
+} from "../../../../helpers/openApiHelpers";
 
 /* ---------- Types ---------- */
 type Props = {
   open: boolean;
   selectedProjectId: string;
-  importOpenApi: (payload: ImportOpenApiRequest, opts?: { signal?: AbortSignal }) => Promise<ApiSummary>;
+  importOpenApi: (
+    payload: ImportOpenApiRequest,
+    opts?: { signal?: AbortSignal }
+  ) => Promise<ApiSummary>;
   refreshApis: (projectId?: string) => Promise<ApiSummary[]>;
   onClose: () => void;
 };
@@ -25,17 +36,26 @@ type Props = {
 type Step = "upload" | "details";
 
 /* ---------- component ---------- */
-const UploadCreationFlow: React.FC<Props> = ({ open, selectedProjectId, importOpenApi, refreshApis, onClose }) => {
+const UploadCreationFlow: React.FC<Props> = ({
+  open,
+  selectedProjectId,
+  importOpenApi,
+  refreshApis,
+  onClose,
+}) => {
   const [step, setStep] = React.useState<Step>("upload");
   const [uploadedFile, setUploadedFile] = React.useState<File | null>(null);
-  const [validationResult, setValidationResult] = React.useState<OpenApiValidationResponse | null>(null);
+  const [validationResult, setValidationResult] =
+    React.useState<OpenApiValidationResponse | null>(null);
   const [fileName, setFileName] = React.useState<string>("");
   const [error, setError] = React.useState<string | null>(null);
   const [validating, setValidating] = React.useState(false);
   const [creating, setCreating] = React.useState(false);
 
-  const { contractMeta, setContractMeta, resetContractMeta } = useCreateComponentBuildpackContext();
+  const { contractMeta, setContractMeta, resetContractMeta } =
+    useCreateComponentBuildpackContext();
   const { validateOpenApiFile } = useOpenApiValidation();
+  const [metaHasErrors, setMetaHasErrors] = React.useState(false);
 
   // Always-mounted input + stable id/label wiring
   const fileInputRef = React.useRef<HTMLInputElement>(null);
@@ -63,26 +83,29 @@ const UploadCreationFlow: React.FC<Props> = ({ open, selectedProjectId, importOp
     }
   }, [open, resetContractMeta]);
 
-  const autoFill = React.useCallback((api: any) => {
-    const title = api?.name?.trim() || api?.displayName?.trim() || "";
-    const version = formatVersionToMajorMinor(api?.version);
-    const description = api?.description || "";
-    const targetUrl = firstServerUrl(api);
-
-    setContractMeta((prev: any) => ({
-      ...prev,
-      name: title || prev?.name || "Sample API",
-      version,
-      description,
-      context: deriveContext(api),
-      target: prev?.target || targetUrl || "",
-    }));
-  }, [setContractMeta]);
+  const autoFill = React.useCallback(
+    (api: any) => {
+      const title = api?.name?.trim() || api?.displayName?.trim() || "";
+      const version = formatVersionToMajorMinor(api?.version);
+      const description = api?.description || "";
+      const targetUrl = firstServerUrl(api);
+
+      setContractMeta((prev: any) => ({
+        ...prev,
+        name: title || prev?.name || "Sample API",
+        version,
+        description,
+        context: deriveContext(api),
+        target: prev?.target || targetUrl || "",
+      }));
+    },
+    [setContractMeta]
+  );
 
   const handleFiles = React.useCallback(
-    async (files: FileList | null) => {  
+    async (files: FileList | null) => {
       if (!files || !files[0]) return;
-      if (validating) return;   
+      if (validating) return;
       const file = files[0];
 
       abortControllerRef.current?.abort();
@@ -97,17 +120,20 @@ const UploadCreationFlow: React.FC<Props> = ({ open, selectedProjectId, importOp
         setUploadedFile(file);
         setFileName(file.name);
 
-        const result = await validateOpenApiFile(file, { signal: abortController.signal });
+        const result = await validateOpenApiFile(file, {
+          signal: abortController.signal,
+        });
         setValidationResult(result);
 
         if (result.isAPIDefinitionValid) {
           autoFill(result.api);
         } else {
-          const errorMsg = result.errors?.join(", ") || "Invalid OpenAPI definition";
+          const errorMsg =
+            result.errors?.join(", ") || "Invalid OpenAPI definition";
           setError(errorMsg);
         }
       } catch (e: any) {
-        if (e.name === 'AbortError') return;
+        if (e.name === "AbortError") return;
         setError(e?.message || "Failed to validate OpenAPI definition");
         setValidationResult(null);
       } finally {
@@ -171,17 +197,16 @@ const UploadCreationFlow: React.FC<Props> = ({ open, selectedProjectId, importOp
     setError(null);
 
     const serviceName = defaultServiceName(name);
-    const backendServices =
-      target
-        ? [
-            {
-              name: serviceName,
-              isDefault: true,
-              retries: 2,
-              endpoints: [{ url: target, description: "Primary backend" }],
-            },
-          ]
-        : [];
+    const backendServices = target
+      ? [
+          {
+            name: serviceName,
+            isDefault: true,
+            retries: 2,
+            endpoints: [{ url: target, description: "Primary backend" }],
+          },
+        ]
+      : [];
 
     try {
       await importOpenApi({
@@ -238,7 +263,11 @@ const UploadCreationFlow: React.FC<Props> = ({ open, selectedProjectId, importOp
               htmlFor={inputId}
               onDragOver={(e) => e.preventDefault()}
               onDrop={onDrop}
-              sx={{ display: "block", cursor: validating ? "not-allowed" : "pointer", opacity: validating ? 0.6 : 1 }}
+              sx={{
+                display: "block",
+                cursor: validating ? "not-allowed" : "pointer",
+                opacity: validating ? 0.6 : 1,
+              }}
             >
               <Paper
                 variant="outlined"
@@ -268,7 +297,11 @@ const UploadCreationFlow: React.FC<Props> = ({ open, selectedProjectId, importOp
                         <Typography color="#aeacacff">
                           Drag &amp; drop your file or click to upload
                         </Typography>
-                        <Button component="label" startIcon={<UploadRoundedIcon />} htmlFor={inputId}>
+                        <Button
+                          component="label"
+                          startIcon={<UploadRoundedIcon />}
+                          htmlFor={inputId}
+                        >
                           Upload
                         </Button>
                       </>
@@ -290,7 +323,8 @@ const UploadCreationFlow: React.FC<Props> = ({ open, selectedProjectId, importOp
                           setValidationResult(null);
                           setFileName("");
                           setError(null);
-                          if (fileInputRef.current) fileInputRef.current.value = "";
+                          if (fileInputRef.current)
+                            fileInputRef.current.value = "";
                           setFileKey((k) => k + 1);
                         }}
                       >
@@ -308,7 +342,11 @@ const UploadCreationFlow: React.FC<Props> = ({ open, selectedProjectId, importOp
             </Box>
 
             <Stack direction="row" spacing={1} sx={{ mt: 2 }}>
-              <Button variant="outlined" onClick={finishAndClose} sx={{ textTransform: "none" }}>
+              <Button
+                variant="outlined"
+                onClick={finishAndClose}
+                sx={{ textTransform: "none" }}
+              >
                 Cancel
               </Button>
               <Button
@@ -329,7 +367,10 @@ const UploadCreationFlow: React.FC<Props> = ({ open, selectedProjectId, importOp
           </Grid>
 
           <Grid size={{ xs: 12, md: 6 }}>
-            <ApiOperationsList title="Fetched OAS Definition" operations={previewOps} />
+            <ApiOperationsList
+              title="Fetched OAS Definition"
+              operations={previewOps}
+            />
           </Grid>
         </Grid>
       )}
@@ -338,19 +379,37 @@ const UploadCreationFlow: React.FC<Props> = ({ open, selectedProjectId, importOp
         <Box>
           <Grid container spacing={2}>
             <Grid size={{ xs: 12, md: 6 }}>
-              <Paper variant="outlined" sx={{ p: 3, borderRadius: 2 }}>
-                <CreationMetaData scope="contract" title="API Details" />
-                <Stack direction="row" spacing={1} justifyContent="flex-end" sx={{ mt: 3 }}>
-                  <Button variant="outlined" onClick={() => setStep("upload")} sx={{ textTransform: "none" }}>
+              {/* <Paper variant="outlined" sx={{ p: 3, borderRadius: 2 }}> */}
+                <CreationMetaData
+                  scope="contract"
+                  title="API Details"
+                  onValidationChange={({ hasError }) =>
+                    setMetaHasErrors(hasError)
+                  }
+                />
+                <Stack
+                  direction="row"
+                  spacing={1}
+                  justifyContent="flex-start"
+                  sx={{ mt: 3 }}
+                >
+                  <Button
+                    variant="outlined"
+                    onClick={() => setStep("upload")}
+                    sx={{ textTransform: "none" }}
+                  >
                     Back
                   </Button>
                   <Button
                     variant="contained"
                     disabled={
                       creating ||
+                      metaHasErrors ||
                       !(contractMeta?.name || "").trim() ||
                       !(contractMeta?.context || "").trim() ||
-                      !isValidMajorMinorVersion((contractMeta?.version || "").trim())
+                      !isValidMajorMinorVersion(
+                        (contractMeta?.version || "").trim()
+                      )
                     }
                     onClick={onCreate}
                     sx={{ textTransform: "none" }}
@@ -364,11 +423,14 @@ const UploadCreationFlow: React.FC<Props> = ({ open, selectedProjectId, importOp
                     {error}
                   </Alert>
                 )}
-              </Paper>
+              {/* </Paper> */}
             </Grid>
 
             <Grid size={{ xs: 12, md: 6 }}>
-              <ApiOperationsList title="Fetched OAS Definition" operations={previewOps} />
+              <ApiOperationsList
+                title="Fetched OAS Definition"
+                operations={previewOps}
+              />
             </Grid>
           </Grid>
         </Box>
diff --git a/portals/management-portal/src/pages/apis/CreationFlows/CreationMetaData.tsx b/portals/management-portal/src/pages/apis/CreationFlows/CreationMetaData.tsx
index 0cca74319..314d9ff68 100644
--- a/portals/management-portal/src/pages/apis/CreationFlows/CreationMetaData.tsx
+++ b/portals/management-portal/src/pages/apis/CreationFlows/CreationMetaData.tsx
@@ -10,12 +10,15 @@ import VersionInput from "../../../common/VersionInput";
 import { Button } from "../../../components/src/components/Button";
 import Edit from "../../../components/src/Icons/generated/Edit";
 
+import { useGithubProjectValidationContext } from "../../../context/validationContext";
+
 const slugify = (val: string) =>
   val
     .trim()
     .toLowerCase()
     .replace(/[^a-z0-9]+/g, "-")
-    .replace(/^-+|-+$/g, "");
+    .replace(/^-+|-+$/g, "")
+    .trim();
 
 const buildIdentifierFromName = (name: string) => slugify(name);
 
@@ -27,16 +30,26 @@ type Props = {
   onChange?: (next: ProxyMetadata) => void;
   readOnlyFields?: Partial<Record<keyof ProxyMetadata | "identifier", boolean>>;
   title?: string;
+  onValidationChange?: (state: {
+    nameVersionError: string | null;
+    identifierError: string | null;
+    hasError: boolean;
+  }) => void;
 };
 
+type NameVersionOverride = { name?: string; version?: string; force?: boolean };
+
 const CreationMetaData: React.FC<Props> = ({
   scope,
   value,
   onChange,
   readOnlyFields,
   title,
+  onValidationChange,
 }) => {
   const ctx = useCreateComponentBuildpackContext();
+  const { validateNameVersion, validateIdentifier } =
+    useGithubProjectValidationContext();
 
   const meta: ProxyMetadata & {
     identifier?: string;
@@ -60,9 +73,29 @@ const CreationMetaData: React.FC<Props> = ({
 
   const change = (patch: Partial<ProxyMetadata>) =>
     setMeta({ ...meta, ...patch });
+
   const [isIdentifierEditing, setIsIdentifierEditing] = React.useState(
     !!meta.identifierEdited
   );
+  const [nameVersionError, setNameVersionError] = React.useState<string | null>(
+    null
+  );
+  const [identifierError, setIdentifierError] = React.useState<string | null>(
+    null
+  );
+
+  const lastCheckedNameVersionRef = React.useRef<{
+    name: string;
+    version: string;
+  } | null>(null);
+
+  const lastCheckedIdentifierRef = React.useRef<string | null>(null);
+
+  const nameVersionTimerRef = React.useRef<number | null>(null);
+  const identifierTimerRef = React.useRef<number | null>(null);
+
+  const didInitValidateRef = React.useRef(false);
+  const debounceMs = 2000;
 
   React.useEffect(() => {
     if (
@@ -78,6 +111,207 @@ const CreationMetaData: React.FC<Props> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const handleContextChange = (v: string) => {
+    change({ context: v, contextEdited: true });
+  };
+
+  const handleIdentifierChange = (v: string) => {
+    change({
+      identifier: slugify(v),
+      identifierEdited: true,
+    });
+  };
+
+  const handleIdentifierEditClick = () => {
+    setIsIdentifierEditing(true);
+    change({ identifierEdited: true });
+  };
+
+  const versionMajor = React.useMemo(() => {
+    const v = (meta.version || "").trim();
+    const m = v.match(/\d+/);
+    return m?.[0] ?? "";
+  }, [meta.version]);
+
+  const identifierDisplayValue = React.useMemo(() => {
+    const base = (meta.identifier ?? "").trim();
+    if (!base) return "";
+    if (meta.identifierEdited) {
+      return base;
+    }
+    if (!versionMajor) return base;
+    if (/-v\d+$/i.test(base)) return base;
+
+    return `${base}-v${versionMajor}`;
+  }, [meta.identifier, meta.identifierEdited, versionMajor]);
+
+  const identifierToValidate = React.useMemo(() => {
+    return identifierDisplayValue.trim();
+  }, [identifierDisplayValue]);
+
+  const identifierDisabled =
+    !!readOnlyFields?.["identifier"] || !isIdentifierEditing;
+
+  const runNameVersionValidation = React.useCallback(
+    async (override?: NameVersionOverride) => {
+      const effectiveName = (
+        override?.name ??
+        (meta.displayName || meta.name || "")
+      ).trim();
+
+      const effectiveVersion = (
+        override?.version ??
+        (meta.version || "")
+      ).trim();
+
+      if (!effectiveName || !effectiveVersion) return;
+
+      const last = lastCheckedNameVersionRef.current;
+      if (
+        !override?.force &&
+        last &&
+        last.name === effectiveName &&
+        last.version === effectiveVersion
+      ) {
+        return;
+      }
+
+      lastCheckedNameVersionRef.current = {
+        name: effectiveName,
+        version: effectiveVersion,
+      };
+
+      try {
+        const res = await validateNameVersion({
+          name: effectiveName,
+          version: effectiveVersion,
+        });
+
+        if (!res.valid) {
+          setNameVersionError(
+            `API with name ${effectiveName} and version ${effectiveVersion} already exists.`
+          );
+        } else {
+          setNameVersionError(null);
+        }
+      } catch (e) {
+        const msg =
+          e instanceof Error
+            ? e.message
+            : "Failed to validate name and version.";
+        setNameVersionError(msg);
+      }
+    },
+    [meta.displayName, meta.name, meta.version, validateNameVersion]
+  );
+
+  const scheduleNameVersionValidation = React.useCallback(
+    (override?: { name?: string; version?: string }) => {
+      if (nameVersionTimerRef.current)
+        window.clearTimeout(nameVersionTimerRef.current);
+
+      nameVersionTimerRef.current = window.setTimeout(() => {
+        void runNameVersionValidation(override);
+      }, debounceMs);
+    },
+    [runNameVersionValidation, debounceMs]
+  );
+
+  const flushNameVersionValidation = React.useCallback(
+    (override?: NameVersionOverride) => {
+      if (nameVersionTimerRef.current) {
+        window.clearTimeout(nameVersionTimerRef.current);
+        nameVersionTimerRef.current = null;
+      }
+      void runNameVersionValidation(override);
+    },
+    [runNameVersionValidation]
+  );
+
+  const runIdentifierValidation = React.useCallback(
+    async (override?: { identifier?: string }) => {
+      const effectiveIdentifier = (
+        override?.identifier ?? identifierToValidate
+      ).trim();
+
+      if (!effectiveIdentifier) return;
+
+      const last = lastCheckedIdentifierRef.current;
+      if (last === effectiveIdentifier) return;
+
+      lastCheckedIdentifierRef.current = effectiveIdentifier;
+
+      try {
+        const res = await validateIdentifier(effectiveIdentifier);
+
+        if (!res.valid) {
+          setIdentifierError(
+            `API with identifier ${effectiveIdentifier} already exists.`
+          );
+        } else {
+          setIdentifierError(null);
+        }
+      } catch (e) {
+        const msg =
+          e instanceof Error ? e.message : "Failed to validate identifier.";
+        setIdentifierError(msg);
+      }
+    },
+    [identifierToValidate, validateIdentifier]
+  );
+
+  const scheduleIdentifierValidation = React.useCallback(
+    (override?: { identifier?: string }) => {
+      if (identifierTimerRef.current)
+        window.clearTimeout(identifierTimerRef.current);
+
+      identifierTimerRef.current = window.setTimeout(() => {
+        void runIdentifierValidation(override);
+      }, debounceMs);
+    },
+    [runIdentifierValidation, debounceMs]
+  );
+
+  const flushIdentifierValidation = React.useCallback(
+    (override?: { identifier?: string }) => {
+      if (identifierTimerRef.current) {
+        window.clearTimeout(identifierTimerRef.current);
+        identifierTimerRef.current = null;
+      }
+      void runIdentifierValidation(override);
+    },
+    [runIdentifierValidation]
+  );
+
+  React.useEffect(() => {
+    return () => {
+      if (nameVersionTimerRef.current)
+        window.clearTimeout(nameVersionTimerRef.current);
+      if (identifierTimerRef.current)
+        window.clearTimeout(identifierTimerRef.current);
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (didInitValidateRef.current) return;
+    didInitValidateRef.current = true;
+
+    const effectiveName = (meta.displayName || meta.name || "").trim();
+    const effectiveVersion = (meta.version || "").trim();
+
+    if (effectiveName && effectiveVersion) {
+      void runNameVersionValidation({
+        name: effectiveName,
+        version: effectiveVersion,
+      });
+    }
+
+    if (identifierToValidate) {
+      void runIdentifierValidation({ identifier: identifierToValidate });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const handleNameChange = (v: string) => {
     const slug = slugify(v);
     const trimmed = v.trim();
@@ -97,32 +331,25 @@ const CreationMetaData: React.FC<Props> = ({
       nextPatch.identifier = buildIdentifierFromName(v);
     }
 
+    setNameVersionError(null);
     change(nextPatch);
-  };
-
-  const handleContextChange = (v: string) => {
-    change({ context: v, contextEdited: true });
-  };
 
-  const handleIdentifierChange = (v: string) => {
-    change({
-      identifier: slugify(v),
-      identifierEdited: true,
-    });
+    scheduleNameVersionValidation({ name: v });
+    scheduleIdentifierValidation();
   };
 
-  const handleIdentifierEditClick = () => {
-    setIsIdentifierEditing(true);
-    change({
-      identifierEdited: true,
+  React.useEffect(() => {
+    onValidationChange?.({
+      nameVersionError,
+      identifierError,
+      hasError: !!nameVersionError || !!identifierError,
     });
-  };
-  const identifierDisabled =
-    !!readOnlyFields?.["identifier"] || !isIdentifierEditing;
+  }, [nameVersionError, identifierError, onValidationChange]);
 
   return (
     <Stack spacing={2}>
       {title ? <Typography variant="subtitle2">{title}</Typography> : null}
+
       <Grid container spacing={2}>
         <Grid size={{ xs: 12, md: 4 }}>
           <TextInput
@@ -130,6 +357,7 @@ const CreationMetaData: React.FC<Props> = ({
             placeholder="Sample API"
             value={meta.displayName || meta.name || ""}
             onChange={(v: string) => handleNameChange(v)}
+            onBlur={(() => flushNameVersionValidation({ force: true })) as any}
             testId=""
             size="medium"
             disabled={!!readOnlyFields?.name}
@@ -140,13 +368,19 @@ const CreationMetaData: React.FC<Props> = ({
           <Stack direction="row" spacing={1} alignItems="flex-end">
             <TextInput
               label="Identifier"
-              placeholder="reading-list-api-rw"
-              value={meta.identifier ?? ""}
-              onChange={(v: string) => handleIdentifierChange(v)}
-              testId=""
+              placeholder="reading-list-api-rw-v1"
+              value={identifierDisplayValue}
+              onChange={(v: string) => {
+                handleIdentifierChange(v);
+                setIdentifierError(null);
+                scheduleIdentifierValidation({ identifier: v });
+              }}
+              onBlur={(() => flushIdentifierValidation()) as any}
+              testId="Identifier"
               size="medium"
               readonly={identifierDisabled}
             />
+
             <Button
               size="medium"
               startIcon={<Edit />}
@@ -155,6 +389,7 @@ const CreationMetaData: React.FC<Props> = ({
               onClick={handleIdentifierEditClick}
               disabled={!!readOnlyFields?.["identifier"]}
               style={{ marginBottom: 4 }}
+              aria-label="Edit identifier"
             />
           </Stack>
         </Grid>
@@ -162,12 +397,37 @@ const CreationMetaData: React.FC<Props> = ({
         <Grid size={{ xs: 12, md: 3 }}>
           <VersionInput
             value={meta.version}
-            onChange={(v: string) => change({ version: v })}
+            onChange={(v: string) => {
+              setNameVersionError(null);
+              change({ version: v });
+
+              scheduleNameVersionValidation({ version: v });
+              setIdentifierError(null);
+              scheduleIdentifierValidation();
+            }}
             disabled={!!readOnlyFields?.version}
             label="Version"
           />
         </Grid>
+
+        {nameVersionError || identifierError ? (
+          <Grid size={{ xs: 12 }}>
+            <Stack spacing={0.25} sx={{ mt: -1 }}>
+              {nameVersionError ? (
+                <Typography variant="caption" color="error">
+                  {nameVersionError}
+                </Typography>
+              ) : null}
+              {identifierError ? (
+                <Typography variant="caption" color="error">
+                  {identifierError}
+                </Typography>
+              ) : null}
+            </Stack>
+          </Grid>
+        ) : null}
       </Grid>
+
       <TextInput
         label="Target"
         placeholder="https://api.example.com/v1"
diff --git a/portals/management-portal/src/pages/apis/CreationFlows/EndPointCreationFlow.tsx b/portals/management-portal/src/pages/apis/CreationFlows/EndPointCreationFlow.tsx
index b3fe766dd..85494dad3 100644
--- a/portals/management-portal/src/pages/apis/CreationFlows/EndPointCreationFlow.tsx
+++ b/portals/management-portal/src/pages/apis/CreationFlows/EndPointCreationFlow.tsx
@@ -12,9 +12,7 @@ import { Button } from "../../../components/src/components/Button";
 import { Card } from "../../../components/src/components/Card";
 import { TextInput } from "../../../components/src/components/TextInput";
 
-import {
-  useCreateComponentBuildpackContext,
-} from "../../../context/CreateComponentBuildpackContext";
+import { useCreateComponentBuildpackContext } from "../../../context/CreateComponentBuildpackContext";
 import { type CreateApiPayload } from "../../../hooks/apis";
 import CreationMetaData from "./CreationMetaData";
 
@@ -46,14 +44,12 @@ const EndPointCreationFlow: React.FC<Props> = ({
     endpointUrl: "",
   });
 
-  const {
-    endpointMeta,
-    setEndpointMeta,
-    resetEndpointMeta,
-  } = useCreateComponentBuildpackContext();
+  const { endpointMeta, setEndpointMeta, resetEndpointMeta } =
+    useCreateComponentBuildpackContext();
 
   const [wizardError, setWizardError] = React.useState<string | null>(null);
   const [creating, setCreating] = React.useState(false);
+  const [metaHasErrors, setMetaHasErrors] = React.useState(false);
 
   // Reset this flow's slice when opened
   React.useEffect(() => {
@@ -110,13 +106,26 @@ const EndPointCreationFlow: React.FC<Props> = ({
       }
       setWizardStep(next);
     },
-    [inferNameFromEndpoint, endpointMeta, setEndpointMeta, wizardState.endpointUrl]
+    [
+      inferNameFromEndpoint,
+      endpointMeta,
+      setEndpointMeta,
+      wizardState.endpointUrl,
+    ]
   );
 
   const handleCreate = React.useCallback(async () => {
     const endpointUrl = wizardState.endpointUrl.trim();
-    const displayName = (endpointMeta?.displayName || endpointMeta?.name || "").trim();
-    const identifier = (endpointMeta?.identifier || endpointMeta?.name || "").trim();
+    const displayName = (
+      endpointMeta?.displayName ||
+      endpointMeta?.name ||
+      ""
+    ).trim();
+    const identifier = (
+      endpointMeta?.identifier ||
+      endpointMeta?.name ||
+      ""
+    ).trim();
     const context = (endpointMeta?.context || "").trim();
     const version = (endpointMeta?.version || "").trim() || "1.0.0";
 
@@ -162,7 +171,14 @@ const EndPointCreationFlow: React.FC<Props> = ({
     } finally {
       setCreating(false);
     }
-  }, [createApi, endpointMeta, onClose, resetEndpointMeta, selectedProjectId, wizardState.endpointUrl]);
+  }, [
+    createApi,
+    endpointMeta,
+    onClose,
+    resetEndpointMeta,
+    selectedProjectId,
+    wizardState.endpointUrl,
+  ]);
 
   if (!open) return null;
 
@@ -202,7 +218,11 @@ const EndPointCreationFlow: React.FC<Props> = ({
           </Stack>
         ) : (
           <Stack spacing={2}>
-            <CreationMetaData scope="endpoint" title="API Details" />
+            <CreationMetaData
+              scope="endpoint"
+              title="API Details"
+              onValidationChange={({ hasError }) => setMetaHasErrors(hasError)}
+            />
             <Box sx={{ mt: 1 }}>
               <Typography variant="body2" color="text.secondary">
                 The endpoint URL will be added as the default backend of this
@@ -239,6 +259,7 @@ const EndPointCreationFlow: React.FC<Props> = ({
               onClick={handleCreate}
               disabled={
                 creating ||
+                metaHasErrors ||
                 !(endpointMeta?.name || "").trim() ||
                 !(endpointMeta?.context || "").trim() ||
                 !(endpointMeta?.version || "").trim()

From 09a86aad73418d2a28c9cd96517d69d3f92dba2c Mon Sep 17 00:00:00 2001
From: Dilan Induwara <153802063+Induwara04@users.noreply.github.com>
Date: Fri, 12 Dec 2025 14:05:06 +0530
Subject: [PATCH 2/5] Resolve Comments

---
 .../src/pages/apis/ApiOverview.tsx            | 19 ++++++++++---------
 .../GithubCreationFlow.tsx                    |  4 +---
 .../ContractCreationFlows/URLCreationFlow.tsx |  1 +
 .../apis/CreationFlows/CreationMetaData.tsx   | 11 +++++++++--
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/portals/management-portal/src/pages/apis/ApiOverview.tsx b/portals/management-portal/src/pages/apis/ApiOverview.tsx
index 6b8aa1031..8316c9664 100644
--- a/portals/management-portal/src/pages/apis/ApiOverview.tsx
+++ b/portals/management-portal/src/pages/apis/ApiOverview.tsx
@@ -64,15 +64,16 @@ const GatewayListItem: React.FC<GatewayListItemProps> = ({ gateway, api }) => {
     api?.backendServices?.[0]?.endpoints?.[0]?.url ??
     "";
 
-  const handleCopyUrl = (url: string) => {
-    navigator.clipboard
-      ?.writeText(url)
-      .then(() => {
-        setCopiedUrl(url);
-        setTimeout(() => setCopiedUrl(null), 2000);
-      })
-      .catch(() => {});
-  };
+const handleCopyUrl = (url: string) => {
+  navigator.clipboard
+    ?.writeText?.(url)
+    ?.then(() => {
+      setCopiedUrl(url);
+      setTimeout(() => setCopiedUrl(null), 2000);
+    })
+    ?.catch(() => {});
+};
+
 
   return (
     <Box
diff --git a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/GithubCreationFlow.tsx b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/GithubCreationFlow.tsx
index b9b95f062..887b4d4d7 100644
--- a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/GithubCreationFlow.tsx
+++ b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/GithubCreationFlow.tsx
@@ -98,11 +98,9 @@ const GithubCreationFlow: React.FC<Props> = ({
     }>
   >([]);
 
-  // Create flow state
   const [creating, setCreating] = React.useState(false);
   const [createError, setCreateError] = React.useState<string | null>(null);
 
-  // Reset when closed
   React.useEffect(() => {
     if (!open) {
       setApiDir("/");
@@ -114,6 +112,7 @@ const GithubCreationFlow: React.FC<Props> = ({
       resetValidation?.();
       setCreating(false);
       setCreateError(null);
+      setMetaHasErrors(false);
     }
   }, [open, resetValidation]);
 
@@ -121,7 +120,6 @@ const GithubCreationFlow: React.FC<Props> = ({
 
   const showInitial = (repoUrl ?? "").trim().length === 0;
 
-  // options for branches
   const branchOptions: BranchOption[] = React.useMemo(
     () => branches.map((b) => ({ label: b.name, value: b.name })),
     [branches]
diff --git a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/URLCreationFlow.tsx b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/URLCreationFlow.tsx
index bbc2530fe..ec36c4400 100644
--- a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/URLCreationFlow.tsx
+++ b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/URLCreationFlow.tsx
@@ -67,6 +67,7 @@ const URLCreationFlow: React.FC<Props> = ({
       setValidationResult(null);
       setError(null);
       setValidating(false);
+      setMetaHasErrors(false);
     }
   }, [open, resetContractMeta]);
 
diff --git a/portals/management-portal/src/pages/apis/CreationFlows/CreationMetaData.tsx b/portals/management-portal/src/pages/apis/CreationFlows/CreationMetaData.tsx
index 314d9ff68..b8e297a51 100644
--- a/portals/management-portal/src/pages/apis/CreationFlows/CreationMetaData.tsx
+++ b/portals/management-portal/src/pages/apis/CreationFlows/CreationMetaData.tsx
@@ -97,6 +97,13 @@ const CreationMetaData: React.FC<Props> = ({
   const didInitValidateRef = React.useRef(false);
   const debounceMs = 2000;
 
+  const onValidationChangeRef = React.useRef<Props["onValidationChange"]>(
+    onValidationChange
+  );
+  React.useEffect(() => {
+    onValidationChangeRef.current = onValidationChange;
+  }, [onValidationChange]);
+
   React.useEffect(() => {
     if (
       meta.name &&
@@ -339,12 +346,12 @@ const CreationMetaData: React.FC<Props> = ({
   };
 
   React.useEffect(() => {
-    onValidationChange?.({
+    onValidationChangeRef.current?.({
       nameVersionError,
       identifierError,
       hasError: !!nameVersionError || !!identifierError,
     });
-  }, [nameVersionError, identifierError, onValidationChange]);
+  }, [nameVersionError, identifierError]);
 
   return (
     <Stack spacing={2}>

From d7041fe3faef1f42a0dbc001dbae9ddb98f18e37 Mon Sep 17 00:00:00 2001
From: Dilan Induwara <153802063+Induwara04@users.noreply.github.com>
Date: Fri, 12 Dec 2025 14:22:38 +0530
Subject: [PATCH 3/5] Change MataData Validation

---
 .../apis/CreationFlows/CreationMetaData.tsx   | 63 ++++++++++++-------
 1 file changed, 41 insertions(+), 22 deletions(-)

diff --git a/portals/management-portal/src/pages/apis/CreationFlows/CreationMetaData.tsx b/portals/management-portal/src/pages/apis/CreationFlows/CreationMetaData.tsx
index b8e297a51..ec2a07f3e 100644
--- a/portals/management-portal/src/pages/apis/CreationFlows/CreationMetaData.tsx
+++ b/portals/management-portal/src/pages/apis/CreationFlows/CreationMetaData.tsx
@@ -38,6 +38,7 @@ type Props = {
 };
 
 type NameVersionOverride = { name?: string; version?: string; force?: boolean };
+type IdentifierOverride = { identifier?: string; force?: boolean };
 
 const CreationMetaData: React.FC<Props> = ({
   scope,
@@ -84,6 +85,10 @@ const CreationMetaData: React.FC<Props> = ({
     null
   );
 
+  const [nameVersionValidating, setNameVersionValidating] =
+    React.useState(false);
+  const [identifierValidating, setIdentifierValidating] = React.useState(false);
+
   const lastCheckedNameVersionRef = React.useRef<{
     name: string;
     version: string;
@@ -97,9 +102,8 @@ const CreationMetaData: React.FC<Props> = ({
   const didInitValidateRef = React.useRef(false);
   const debounceMs = 2000;
 
-  const onValidationChangeRef = React.useRef<Props["onValidationChange"]>(
-    onValidationChange
-  );
+  const onValidationChangeRef =
+    React.useRef<Props["onValidationChange"]>(onValidationChange);
   React.useEffect(() => {
     onValidationChangeRef.current = onValidationChange;
   }, [onValidationChange]);
@@ -143,12 +147,9 @@ const CreationMetaData: React.FC<Props> = ({
   const identifierDisplayValue = React.useMemo(() => {
     const base = (meta.identifier ?? "").trim();
     if (!base) return "";
-    if (meta.identifierEdited) {
-      return base;
-    }
+    if (meta.identifierEdited) return base;
     if (!versionMajor) return base;
     if (/-v\d+$/i.test(base)) return base;
-
     return `${base}-v${versionMajor}`;
   }, [meta.identifier, meta.identifierEdited, versionMajor]);
 
@@ -183,16 +184,17 @@ const CreationMetaData: React.FC<Props> = ({
         return;
       }
 
-      lastCheckedNameVersionRef.current = {
-        name: effectiveName,
-        version: effectiveVersion,
-      };
-
       try {
+        setNameVersionValidating(true);
+
         const res = await validateNameVersion({
           name: effectiveName,
           version: effectiveVersion,
         });
+        lastCheckedNameVersionRef.current = {
+          name: effectiveName,
+          version: effectiveVersion,
+        };
 
         if (!res.valid) {
           setNameVersionError(
@@ -202,11 +204,15 @@ const CreationMetaData: React.FC<Props> = ({
           setNameVersionError(null);
         }
       } catch (e) {
+        lastCheckedNameVersionRef.current = null;
+
         const msg =
           e instanceof Error
             ? e.message
             : "Failed to validate name and version.";
         setNameVersionError(msg);
+      } finally {
+        setNameVersionValidating(false);
       }
     },
     [meta.displayName, meta.name, meta.version, validateNameVersion]
@@ -236,20 +242,21 @@ const CreationMetaData: React.FC<Props> = ({
   );
 
   const runIdentifierValidation = React.useCallback(
-    async (override?: { identifier?: string }) => {
-      const effectiveIdentifier = (
-        override?.identifier ?? identifierToValidate
+    async (override?: IdentifierOverride) => {
+      const effectiveIdentifier = slugify(
+        (override?.identifier ?? identifierToValidate).trim()
       ).trim();
 
       if (!effectiveIdentifier) return;
 
       const last = lastCheckedIdentifierRef.current;
-      if (last === effectiveIdentifier) return;
-
-      lastCheckedIdentifierRef.current = effectiveIdentifier;
+      if (!override?.force && last === effectiveIdentifier) return;
 
       try {
+        setIdentifierValidating(true);
+
         const res = await validateIdentifier(effectiveIdentifier);
+        lastCheckedIdentifierRef.current = effectiveIdentifier;
 
         if (!res.valid) {
           setIdentifierError(
@@ -259,9 +266,12 @@ const CreationMetaData: React.FC<Props> = ({
           setIdentifierError(null);
         }
       } catch (e) {
+        lastCheckedIdentifierRef.current = null;
         const msg =
           e instanceof Error ? e.message : "Failed to validate identifier.";
         setIdentifierError(msg);
+      } finally {
+        setIdentifierValidating(false);
       }
     },
     [identifierToValidate, validateIdentifier]
@@ -280,7 +290,7 @@ const CreationMetaData: React.FC<Props> = ({
   );
 
   const flushIdentifierValidation = React.useCallback(
-    (override?: { identifier?: string }) => {
+    (override?: IdentifierOverride) => {
       if (identifierTimerRef.current) {
         window.clearTimeout(identifierTimerRef.current);
         identifierTimerRef.current = null;
@@ -349,9 +359,18 @@ const CreationMetaData: React.FC<Props> = ({
     onValidationChangeRef.current?.({
       nameVersionError,
       identifierError,
-      hasError: !!nameVersionError || !!identifierError,
+      hasError:
+        !!nameVersionError ||
+        !!identifierError ||
+        nameVersionValidating ||
+        identifierValidating,
     });
-  }, [nameVersionError, identifierError]);
+  }, [
+    nameVersionError,
+    identifierError,
+    nameVersionValidating,
+    identifierValidating,
+  ]);
 
   return (
     <Stack spacing={2}>
@@ -382,7 +401,7 @@ const CreationMetaData: React.FC<Props> = ({
                 setIdentifierError(null);
                 scheduleIdentifierValidation({ identifier: v });
               }}
-              onBlur={(() => flushIdentifierValidation()) as any}
+              onBlur={(() => flushIdentifierValidation({ force: true })) as any}
               testId="Identifier"
               size="medium"
               readonly={identifierDisabled}

From fd4e7520aa0e3bb6ff9413dc10bdb5e07a7adcf1 Mon Sep 17 00:00:00 2001
From: Dilan Induwara <153802063+Induwara04@users.noreply.github.com>
Date: Sat, 13 Dec 2025 09:16:46 +0530
Subject: [PATCH 4/5] Change Validation logic

---
 .../GithubCreationFlow.tsx                    | 152 +++++++++------
 .../ContractCreationFlows/URLCreationFlow.tsx |  95 +++++++---
 .../UploadCreationFlow.tsx                    | 176 +++++++++++-------
 .../apis/CreationFlows/CreationMetaData.tsx   |  86 +++++----
 .../CreationFlows/EndPointCreationFlow.tsx    |  84 ++++++---
 5 files changed, 384 insertions(+), 209 deletions(-)

diff --git a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/GithubCreationFlow.tsx b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/GithubCreationFlow.tsx
index 887b4d4d7..82807cd39 100644
--- a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/GithubCreationFlow.tsx
+++ b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/GithubCreationFlow.tsx
@@ -50,6 +50,25 @@ const spin = keyframes`
   100% { transform: rotate(360deg); }
 `;
 
+const slugify = (val: string) =>
+  (val || "")
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .trim();
+
+const majorFromVersion = (v: string) => {
+  const m = (v || "").trim().match(/\d+/);
+  return m?.[0] ?? "";
+};
+
+const buildIdentifierFromNameAndVersion = (name: string, version: string) => {
+  const base = slugify(name);
+  const major = majorFromVersion(version);
+  return major ? `${base}-v${major}` : base;
+};
+
 const GithubCreationFlow: React.FC<Props> = ({
   open,
   onClose,
@@ -258,9 +277,7 @@ const GithubCreationFlow: React.FC<Props> = ({
   }, [apiDir, content, findNodeByPath, nodeHasConfigYaml]);
 
   const onNext = async () => {
-    if (!repoUrl.trim() || !selectedBranch || !apiDir || !isDirValid) {
-      return;
-    }
+    if (!repoUrl.trim() || !selectedBranch || !apiDir || !isDirValid) return;
 
     try {
       const path = apiDir === "/" ? "/" : normalizePath(apiDir);
@@ -272,20 +289,33 @@ const GithubCreationFlow: React.FC<Props> = ({
       });
 
       const api = (res as any)?.api;
+
       if (api) {
         const target =
           api["backend-services"]?.[0]?.endpoints?.[0]?.url?.trim() || "";
-        // Prefill Meta
-        setContractMeta((prev: any) => ({
-          ...prev,
-          name: api.name || prev?.name || "",
-          context: api.context || prev?.context || "",
-          version: formatVersionToMajorMinor(
-            api.version ?? prev?.version ?? "1.0.0"
-          ),
-          description: api.description || prev?.description || "",
-          target: target || prev?.target || "",
-        }));
+
+        const displayName = (api.name || "").trim();
+        const version = formatVersionToMajorMinor(api.version ?? "1.0.0");
+        const identifier = buildIdentifierFromNameAndVersion(
+          displayName,
+          version
+        );
+
+        setContractMeta((prev: any) => {
+          const base = prev || {};
+          return {
+            ...base,
+            displayName: displayName || base.displayName || "",
+            name: identifier || base.name || "",
+            identifier,
+            identifierEdited: false,
+            context: api.context || base.context || "",
+            version: version || base.version || "1.0.0",
+            description: api.description || base.description || "",
+            target: target || base.target || "",
+          };
+        });
+
         setValidatedOps(Array.isArray(api.operations) ? api.operations : []);
       } else {
         setValidatedOps([]);
@@ -300,14 +330,16 @@ const GithubCreationFlow: React.FC<Props> = ({
 
   const onCreate = async () => {
     setCreateError(null);
-    const name = (contractMeta?.name || "").trim();
+
+    const displayName = (contractMeta?.displayName || "").trim();
+    const identifier = (contractMeta?.identifier || "").trim();
     const context = (contractMeta?.context || "").trim();
     const version = (contractMeta?.version || "").trim();
     const description = (contractMeta?.description || "").trim() || undefined;
     const target = (contractMeta?.target || "").trim();
 
-    if (!name || !context || !version) {
-      setCreateError("Please complete Name, Context, and Version.");
+    if (!displayName || !identifier || !context || !version) {
+      setCreateError("Please complete Name, Identifier, Context, and Version.");
       return;
     }
     if (!repoUrl?.trim() || !selectedBranch) {
@@ -324,14 +356,15 @@ const GithubCreationFlow: React.FC<Props> = ({
       setCreateError("Project is required (missing projectId).");
       return;
     }
+
     const payload = {
       repoUrl: repoUrl.trim(),
       provider: "github" as const,
       branch: selectedBranch,
       path: apiDir === "/" ? "/" : normalizePath(apiDir),
       api: {
-        name,
-        displayName: name,
+        name: identifier,
+        displayName,
         description,
         context: context.startsWith("/") ? context : `/${context}`,
         version,
@@ -357,7 +390,10 @@ const GithubCreationFlow: React.FC<Props> = ({
         console.warn("Failed to refresh API list after import:", rErr);
       }
       try {
-        showNotification(`API "${name}" created successfully!`, "success");
+        showNotification(
+          `API "${displayName}" created successfully!`,
+          "success"
+        );
       } catch (nErr) {
         console.warn("Failed to show notification:", nErr);
       }
@@ -377,7 +413,8 @@ const GithubCreationFlow: React.FC<Props> = ({
     !!repoUrl?.trim() &&
     !!selectedBranch &&
     !!isDirValid &&
-    !!(contractMeta?.name || "").trim() &&
+    !!(contractMeta?.displayName || "").trim() &&
+    !!(contractMeta?.identifier || "").trim() &&
     !!(contractMeta?.context || "").trim() &&
     isValidMajorMinorVersion((contractMeta?.version || "").trim());
 
@@ -396,7 +433,6 @@ const GithubCreationFlow: React.FC<Props> = ({
                   testId=""
                   size="medium"
                 />
-
                 <Stack
                   direction="row"
                   justifyContent="space-between"
@@ -500,6 +536,7 @@ const GithubCreationFlow: React.FC<Props> = ({
               }
             />
           </Grid>
+
           <Grid size={{ xs: 12 }}>
             <Grid container spacing={2} alignItems="flex-end">
               <Grid size={{ xs: 12, md: 6 }}>
@@ -525,6 +562,7 @@ const GithubCreationFlow: React.FC<Props> = ({
                 </Button>
               </Grid>
             </Grid>
+
             {!!dirError && (
               <Typography variant="caption" color="error" sx={{ mt: 0.5 }}>
                 {dirError}
@@ -564,6 +602,7 @@ const GithubCreationFlow: React.FC<Props> = ({
                 {validating ? "Validating…" : "Next"}
               </Button>
             </Stack>
+
             {!!validateError && (
               <Typography variant="caption" color="error" sx={{ mt: 1 }}>
                 {validateError}
@@ -597,45 +636,39 @@ const GithubCreationFlow: React.FC<Props> = ({
           )}
 
           <Grid size={{ xs: 12, md: 6 }}>
-            {/* <Card testId=""> */}
-              {/* <CardContent sx={{ p: 3 }}> */}
-                <CreationMetaData
-                  scope="contract"
-                  title="API Details"
-                  onValidationChange={({ hasError }) =>
-                    setMetaHasErrors(hasError)
-                  }
-                />
+            <CreationMetaData
+              scope="contract"
+              title="API Details"
+              onValidationChange={({ hasError }) => setMetaHasErrors(hasError)}
+            />
 
-                {!!createError && (
-                  <Alert severity="error" sx={{ mt: 2 }}>
-                    {createError}
-                  </Alert>
-                )}
+            {!!createError && (
+              <Alert severity="error" sx={{ mt: 2 }}>
+                {createError}
+              </Alert>
+            )}
 
-                <Stack
-                  direction="row"
-                  spacing={1}
-                  justifyContent="flex-start"
-                  sx={{ mt: 3 }}
-                >
-                  <Button
-                    variant="outlined"
-                    onClick={() => setStep("form")}
-                    disabled={creating}
-                  >
-                    Back
-                  </Button>
-                  <Button
-                    variant="contained"
-                    onClick={onCreate}
-                    disabled={!canCreate || metaHasErrors || creating}
-                  >
-                    {creating ? "Creating..." : "Create"}
-                  </Button>
-                </Stack>
-              {/* </CardContent> */}
-            {/* </Card> */}
+            <Stack
+              direction="row"
+              spacing={1}
+              justifyContent="flex-start"
+              sx={{ mt: 3 }}
+            >
+              <Button
+                variant="outlined"
+                onClick={() => setStep("form")}
+                disabled={creating}
+              >
+                Back
+              </Button>
+              <Button
+                variant="contained"
+                onClick={onCreate}
+                disabled={!canCreate || metaHasErrors || creating}
+              >
+                {creating ? "Creating..." : "Create"}
+              </Button>
+            </Stack>
           </Grid>
 
           <Grid size={{ xs: 12, md: 6 }}>
@@ -646,6 +679,7 @@ const GithubCreationFlow: React.FC<Props> = ({
           </Grid>
         </Grid>
       )}
+
       <ApiDirectoryModal
         open={dirModalOpen}
         currentPath={apiDir}
diff --git a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/URLCreationFlow.tsx b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/URLCreationFlow.tsx
index ec36c4400..c12e4b399 100644
--- a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/URLCreationFlow.tsx
+++ b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/URLCreationFlow.tsx
@@ -19,6 +19,25 @@ import {
   isValidMajorMinorVersion,
 } from "../../../../helpers/openApiHelpers";
 
+const slugify = (val: string) =>
+  (val || "")
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .trim();
+
+const majorFromVersion = (v: string) => {
+  const m = (v || "").trim().match(/\d+/);
+  return m?.[0] ?? "";
+};
+
+const buildIdentifierFromNameAndVersion = (name: string, version: string) => {
+  const base = slugify(name);
+  const major = majorFromVersion(version);
+  return major ? `${base}-v${major}` : base;
+};
+
 type Props = {
   open: boolean;
   selectedProjectId: string;
@@ -78,13 +97,23 @@ const URLCreationFlow: React.FC<Props> = ({
       const description = api?.description || "";
       const targetUrl = firstServerUrl(api);
 
-      setContractMeta((prev: any) => ({
-        ...prev,
-        name: title || prev?.name || "Sample API",
+      const identifier = buildIdentifierFromNameAndVersion(title, version);
+
+      const nextMeta = {
+        name: title || "Sample API",
+        displayName: title || "Sample API",
         version,
         description,
         context: deriveContext(api),
-        target: prev?.target || targetUrl || "",
+        target: targetUrl || "",
+        identifier,
+        identifierEdited: false,
+      };
+
+      setContractMeta((prev: any) => ({
+        ...prev,
+        ...nextMeta,
+        target: prev?.target || nextMeta.target || "",
       }));
     },
     [setContractMeta]
@@ -105,6 +134,7 @@ const URLCreationFlow: React.FC<Props> = ({
       const result = await validateOpenApiUrl(specUrl.trim(), {
         signal: abortController.signal,
       });
+
       setValidationResult(result);
 
       if (result.isAPIDefinitionValid) {
@@ -142,16 +172,28 @@ const URLCreationFlow: React.FC<Props> = ({
   }, [validationResult]);
 
   const onCreate = async () => {
-    const name = (contractMeta?.name || "").trim();
+    const displayName = (
+      contractMeta?.displayName ||
+      contractMeta?.name ||
+      ""
+    ).trim();
     const context = (contractMeta?.context || "").trim();
     const version = (contractMeta?.version || "").trim();
     const description = (contractMeta?.description || "").trim() || undefined;
     const target = (contractMeta?.target || "").trim();
 
-    if (!name || !context || !version) {
+    const identifier =
+      (contractMeta as any)?.identifier?.trim() ||
+      buildIdentifierFromNameAndVersion(displayName, version);
+
+    if (!displayName || !context || !version) {
       setError("Please complete all required fields.");
       return;
     }
+    if (!identifier) {
+      setError("Identifier is required.");
+      return;
+    }
     if (target) {
       try {
         if (/^https?:\/\//i.test(target)) new URL(target);
@@ -160,7 +202,6 @@ const URLCreationFlow: React.FC<Props> = ({
         return;
       }
     }
-
     if (!validationResult?.isAPIDefinitionValid) {
       setError("Please fetch and validate the OpenAPI definition first.");
       return;
@@ -169,7 +210,7 @@ const URLCreationFlow: React.FC<Props> = ({
     setCreating(true);
     setError(null);
 
-    const serviceName = defaultServiceName(name);
+    const serviceName = defaultServiceName(displayName);
     const backendServices = target
       ? [
           {
@@ -181,19 +222,22 @@ const URLCreationFlow: React.FC<Props> = ({
         ]
       : [];
 
+    const payload: ImportOpenApiRequest = {
+      api: {
+        name: identifier,
+        displayName,
+        context,
+        version,
+        projectId: selectedProjectId,
+        target,
+        description,
+        backendServices,
+      } as any,
+      url: specUrl.trim(),
+    };
+
     try {
-      await importOpenApi({
-        api: {
-          name,
-          context,
-          version,
-          projectId: selectedProjectId,
-          target,
-          description,
-          backendServices,
-        },
-        url: specUrl.trim(),
-      });
+      await importOpenApi(payload);
     } catch (e: any) {
       setError(e?.message || "Failed to create API");
       setCreating(false);
@@ -297,12 +341,12 @@ const URLCreationFlow: React.FC<Props> = ({
       {step === "details" && (
         <Grid container spacing={2}>
           <Grid size={{ xs: 12, md: 6 }}>
-            {/* <Paper variant="outlined" sx={{ p: 3, borderRadius: 2 }}> */}
             <CreationMetaData
               scope="contract"
               title="API Details"
               onValidationChange={({ hasError }) => setMetaHasErrors(hasError)}
             />
+
             <Stack
               direction="row"
               spacing={1}
@@ -316,12 +360,18 @@ const URLCreationFlow: React.FC<Props> = ({
               >
                 Back
               </Button>
+
               <Button
                 variant="contained"
                 disabled={
                   creating ||
                   metaHasErrors ||
-                  !(contractMeta?.name || "").trim() ||
+                  !(
+                    contractMeta?.displayName ||
+                    contractMeta?.name ||
+                    ""
+                  ).trim() ||
+                  !(contractMeta as any)?.identifier?.trim() ||
                   !(contractMeta?.context || "").trim() ||
                   !isValidMajorMinorVersion(
                     (contractMeta?.version || "").trim()
@@ -339,7 +389,6 @@ const URLCreationFlow: React.FC<Props> = ({
                 {error}
               </Alert>
             )}
-            {/* </Paper> */}
           </Grid>
 
           <Grid size={{ xs: 12, md: 6 }}>
diff --git a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/UploadCreationFlow.tsx b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/UploadCreationFlow.tsx
index 40068ba40..86769d94f 100644
--- a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/UploadCreationFlow.tsx
+++ b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/UploadCreationFlow.tsx
@@ -21,7 +21,25 @@ import {
   isValidMajorMinorVersion,
 } from "../../../../helpers/openApiHelpers";
 
-/* ---------- Types ---------- */
+const slugify = (val: string) =>
+  (val || "")
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .trim();
+
+const majorFromVersion = (v: string) => {
+  const m = (v || "").trim().match(/\d+/);
+  return m?.[0] ?? "";
+};
+
+const buildIdentifierFromNameAndVersion = (name: string, version: string) => {
+  const base = slugify(name);
+  const major = majorFromVersion(version);
+  return major ? `${base}-v${major}` : base;
+};
+
 type Props = {
   open: boolean;
   selectedProjectId: string;
@@ -35,7 +53,6 @@ type Props = {
 
 type Step = "upload" | "details";
 
-/* ---------- component ---------- */
 const UploadCreationFlow: React.FC<Props> = ({
   open,
   selectedProjectId,
@@ -57,7 +74,6 @@ const UploadCreationFlow: React.FC<Props> = ({
   const { validateOpenApiFile } = useOpenApiValidation();
   const [metaHasErrors, setMetaHasErrors] = React.useState(false);
 
-  // Always-mounted input + stable id/label wiring
   const fileInputRef = React.useRef<HTMLInputElement>(null);
   const inputId = React.useId();
   const [fileKey, setFileKey] = React.useState(0);
@@ -78,6 +94,7 @@ const UploadCreationFlow: React.FC<Props> = ({
       setFileName("");
       setError(null);
       setValidating(false);
+      setMetaHasErrors(false);
       if (fileInputRef.current) fileInputRef.current.value = "";
       setFileKey((k) => k + 1);
     }
@@ -90,13 +107,23 @@ const UploadCreationFlow: React.FC<Props> = ({
       const description = api?.description || "";
       const targetUrl = firstServerUrl(api);
 
-      setContractMeta((prev: any) => ({
-        ...prev,
-        name: title || prev?.name || "Sample API",
+      const identifier = buildIdentifierFromNameAndVersion(title, version);
+
+      const nextMeta = {
+        name: title || "Sample API",
+        displayName: title || "Sample API",
         version,
         description,
         context: deriveContext(api),
-        target: prev?.target || targetUrl || "",
+        target: targetUrl || "",
+        identifier,
+        identifierEdited: false,
+      };
+
+      setContractMeta((prev: any) => ({
+        ...prev,
+        ...nextMeta,
+        target: prev?.target || nextMeta.target || "",
       }));
     },
     [setContractMeta]
@@ -106,6 +133,7 @@ const UploadCreationFlow: React.FC<Props> = ({
     async (files: FileList | null) => {
       if (!files || !files[0]) return;
       if (validating) return;
+
       const file = files[0];
 
       abortControllerRef.current?.abort();
@@ -123,6 +151,7 @@ const UploadCreationFlow: React.FC<Props> = ({
         const result = await validateOpenApiFile(file, {
           signal: abortController.signal,
         });
+
         setValidationResult(result);
 
         if (result.isAPIDefinitionValid) {
@@ -169,16 +198,31 @@ const UploadCreationFlow: React.FC<Props> = ({
   }, [validationResult]);
 
   const onCreate = async () => {
-    const name = (contractMeta?.name || "").trim();
+    const displayName = (
+      contractMeta?.displayName ||
+      contractMeta?.name ||
+      ""
+    ).trim();
+
     const context = (contractMeta?.context || "").trim();
     const version = (contractMeta?.version || "").trim();
     const description = (contractMeta?.description || "").trim() || undefined;
     const target = (contractMeta?.target || "").trim();
 
-    if (!name || !context || !version) {
+    // ✅ this is the important fix:
+    // send name as identifier (with -v{major}), not the display name
+    const identifier =
+      (contractMeta as any)?.identifier?.trim() ||
+      buildIdentifierFromNameAndVersion(displayName, version);
+
+    if (!displayName || !context || !version) {
       setError("Please complete all required fields.");
       return;
     }
+    if (!identifier) {
+      setError("Identifier is required.");
+      return;
+    }
     if (target) {
       try {
         if (/^https?:\/\//i.test(target)) new URL(target);
@@ -187,7 +231,6 @@ const UploadCreationFlow: React.FC<Props> = ({
         return;
       }
     }
-
     if (!validationResult?.isAPIDefinitionValid || !uploadedFile) {
       setError("Please upload a valid OpenAPI definition.");
       return;
@@ -196,7 +239,7 @@ const UploadCreationFlow: React.FC<Props> = ({
     setCreating(true);
     setError(null);
 
-    const serviceName = defaultServiceName(name);
+    const serviceName = defaultServiceName(displayName);
     const backendServices = target
       ? [
           {
@@ -208,19 +251,22 @@ const UploadCreationFlow: React.FC<Props> = ({
         ]
       : [];
 
+    const payload: ImportOpenApiRequest = {
+      api: {
+        name: identifier, // ✅ now: dilan-api-v1
+        displayName, // ✅ now: Dilan API
+        context,
+        version,
+        projectId: selectedProjectId,
+        target,
+        description,
+        backendServices,
+      } as any,
+      definition: uploadedFile,
+    };
+
     try {
-      await importOpenApi({
-        api: {
-          name,
-          context,
-          version,
-          projectId: selectedProjectId,
-          target,
-          description,
-          backendServices,
-        },
-        definition: uploadedFile,
-      });
+      await importOpenApi(payload);
     } catch (e: any) {
       setError(e?.message || "Failed to create API");
       setCreating(false);
@@ -240,7 +286,6 @@ const UploadCreationFlow: React.FC<Props> = ({
 
   return (
     <Box>
-      {/* Hidden, always-mounted input controlled by labels */}
       <input
         id={inputId}
         ref={fileInputRef}
@@ -379,51 +424,48 @@ const UploadCreationFlow: React.FC<Props> = ({
         <Box>
           <Grid container spacing={2}>
             <Grid size={{ xs: 12, md: 6 }}>
-              {/* <Paper variant="outlined" sx={{ p: 3, borderRadius: 2 }}> */}
-                <CreationMetaData
-                  scope="contract"
-                  title="API Details"
-                  onValidationChange={({ hasError }) =>
-                    setMetaHasErrors(hasError)
+              <CreationMetaData
+                scope="contract"
+                title="API Details"
+                onValidationChange={({ hasError }) => setMetaHasErrors(hasError)}
+              />
+
+              <Stack
+                direction="row"
+                spacing={1}
+                justifyContent="flex-start"
+                sx={{ mt: 3 }}
+              >
+                <Button
+                  variant="outlined"
+                  onClick={() => setStep("upload")}
+                  sx={{ textTransform: "none" }}
+                >
+                  Back
+                </Button>
+                <Button
+                  variant="contained"
+                  disabled={
+                    creating ||
+                    metaHasErrors ||
+                    !(contractMeta?.name || "").trim() ||
+                    !(contractMeta?.context || "").trim() ||
+                    !isValidMajorMinorVersion(
+                      (contractMeta?.version || "").trim()
+                    )
                   }
-                />
-                <Stack
-                  direction="row"
-                  spacing={1}
-                  justifyContent="flex-start"
-                  sx={{ mt: 3 }}
+                  onClick={onCreate}
+                  sx={{ textTransform: "none" }}
                 >
-                  <Button
-                    variant="outlined"
-                    onClick={() => setStep("upload")}
-                    sx={{ textTransform: "none" }}
-                  >
-                    Back
-                  </Button>
-                  <Button
-                    variant="contained"
-                    disabled={
-                      creating ||
-                      metaHasErrors ||
-                      !(contractMeta?.name || "").trim() ||
-                      !(contractMeta?.context || "").trim() ||
-                      !isValidMajorMinorVersion(
-                        (contractMeta?.version || "").trim()
-                      )
-                    }
-                    onClick={onCreate}
-                    sx={{ textTransform: "none" }}
-                  >
-                    {creating ? "Creating..." : "Create"}
-                  </Button>
-                </Stack>
-
-                {error && (
-                  <Alert severity="error" sx={{ mt: 2 }}>
-                    {error}
-                  </Alert>
-                )}
-              {/* </Paper> */}
+                  {creating ? "Creating..." : "Create"}
+                </Button>
+              </Stack>
+
+              {error && (
+                <Alert severity="error" sx={{ mt: 2 }}>
+                  {error}
+                </Alert>
+              )}
             </Grid>
 
             <Grid size={{ xs: 12, md: 6 }}>
diff --git a/portals/management-portal/src/pages/apis/CreationFlows/CreationMetaData.tsx b/portals/management-portal/src/pages/apis/CreationFlows/CreationMetaData.tsx
index ec2a07f3e..80f4527bd 100644
--- a/portals/management-portal/src/pages/apis/CreationFlows/CreationMetaData.tsx
+++ b/portals/management-portal/src/pages/apis/CreationFlows/CreationMetaData.tsx
@@ -13,14 +13,23 @@ import Edit from "../../../components/src/Icons/generated/Edit";
 import { useGithubProjectValidationContext } from "../../../context/validationContext";
 
 const slugify = (val: string) =>
-  val
+  (val || "")
     .trim()
     .toLowerCase()
     .replace(/[^a-z0-9]+/g, "-")
     .replace(/^-+|-+$/g, "")
     .trim();
 
-const buildIdentifierFromName = (name: string) => slugify(name);
+const majorFromVersion = (v: string) => {
+  const m = (v || "").trim().match(/\d+/);
+  return m?.[0] ?? "";
+};
+
+const buildIdentifierFromNameAndVersion = (name: string, version: string) => {
+  const base = slugify(name);
+  const major = majorFromVersion(version);
+  return major ? `${base}-v${major}` : base;
+};
 
 type Scope = "contract" | "endpoint";
 
@@ -95,7 +104,6 @@ const CreationMetaData: React.FC<Props> = ({
   } | null>(null);
 
   const lastCheckedIdentifierRef = React.useRef<string | null>(null);
-
   const nameVersionTimerRef = React.useRef<number | null>(null);
   const identifierTimerRef = React.useRef<number | null>(null);
 
@@ -108,20 +116,6 @@ const CreationMetaData: React.FC<Props> = ({
     onValidationChangeRef.current = onValidationChange;
   }, [onValidationChange]);
 
-  React.useEffect(() => {
-    if (
-      meta.name &&
-      !meta.identifier &&
-      !meta.identifierEdited &&
-      !isIdentifierEditing
-    ) {
-      change({
-        identifier: buildIdentifierFromName(meta.name),
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const handleContextChange = (v: string) => {
     change({ context: v, contextEdited: true });
   };
@@ -138,20 +132,9 @@ const CreationMetaData: React.FC<Props> = ({
     change({ identifierEdited: true });
   };
 
-  const versionMajor = React.useMemo(() => {
-    const v = (meta.version || "").trim();
-    const m = v.match(/\d+/);
-    return m?.[0] ?? "";
-  }, [meta.version]);
-
   const identifierDisplayValue = React.useMemo(() => {
-    const base = (meta.identifier ?? "").trim();
-    if (!base) return "";
-    if (meta.identifierEdited) return base;
-    if (!versionMajor) return base;
-    if (/-v\d+$/i.test(base)) return base;
-    return `${base}-v${versionMajor}`;
-  }, [meta.identifier, meta.identifierEdited, versionMajor]);
+    return (meta.identifier ?? "").trim();
+  }, [meta.identifier]);
 
   const identifierToValidate = React.useMemo(() => {
     return identifierDisplayValue.trim();
@@ -205,7 +188,6 @@ const CreationMetaData: React.FC<Props> = ({
         }
       } catch (e) {
         lastCheckedNameVersionRef.current = null;
-
         const msg =
           e instanceof Error
             ? e.message
@@ -330,8 +312,8 @@ const CreationMetaData: React.FC<Props> = ({
   }, []);
 
   const handleNameChange = (v: string) => {
-    const slug = slugify(v);
     const trimmed = v.trim();
+    const slug = slugify(v);
 
     const nextPatch: Partial<ProxyMetadata> & {
       identifier?: string;
@@ -344,8 +326,12 @@ const CreationMetaData: React.FC<Props> = ({
     if (!meta.contextEdited) {
       nextPatch.context = slug ? `/${slug}` : "";
     }
+
     if (!meta.identifierEdited && !isIdentifierEditing) {
-      nextPatch.identifier = buildIdentifierFromName(v);
+      nextPatch.identifier = buildIdentifierFromNameAndVersion(
+        v,
+        meta.version || ""
+      );
     }
 
     setNameVersionError(null);
@@ -372,6 +358,28 @@ const CreationMetaData: React.FC<Props> = ({
     identifierValidating,
   ]);
 
+  React.useEffect(() => {
+    if (meta.identifierEdited || isIdentifierEditing) return;
+
+    const nameForId = (meta.displayName || meta.name || "").trim();
+    const verForId = (meta.version || "").trim();
+
+    if (!nameForId || !verForId) return;
+
+    const expected = buildIdentifierFromNameAndVersion(nameForId, verForId);
+
+    if ((meta.identifier || "").trim() !== expected) {
+      change({ identifier: expected });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    meta.displayName,
+    meta.name,
+    meta.version,
+    meta.identifierEdited,
+    isIdentifierEditing,
+  ]);
+
   return (
     <Stack spacing={2}>
       {title ? <Typography variant="subtitle2">{title}</Typography> : null}
@@ -414,7 +422,6 @@ const CreationMetaData: React.FC<Props> = ({
               variant="link"
               onClick={handleIdentifierEditClick}
               disabled={!!readOnlyFields?.["identifier"]}
-              style={{ marginBottom: 4 }}
               aria-label="Edit identifier"
             />
           </Stack>
@@ -425,7 +432,16 @@ const CreationMetaData: React.FC<Props> = ({
             value={meta.version}
             onChange={(v: string) => {
               setNameVersionError(null);
-              change({ version: v });
+
+              const shouldAuto = !meta.identifierEdited && !isIdentifierEditing;
+              const nextIdentifier = shouldAuto
+                ? buildIdentifierFromNameAndVersion(
+                    meta.displayName || meta.name || "",
+                    v
+                  )
+                : meta.identifier;
+
+              change({ version: v, identifier: nextIdentifier });
 
               scheduleNameVersionValidation({ version: v });
               setIdentifierError(null);
diff --git a/portals/management-portal/src/pages/apis/CreationFlows/EndPointCreationFlow.tsx b/portals/management-portal/src/pages/apis/CreationFlows/EndPointCreationFlow.tsx
index 85494dad3..497326975 100644
--- a/portals/management-portal/src/pages/apis/CreationFlows/EndPointCreationFlow.tsx
+++ b/portals/management-portal/src/pages/apis/CreationFlows/EndPointCreationFlow.tsx
@@ -16,6 +16,25 @@ import { useCreateComponentBuildpackContext } from "../../../context/CreateCompo
 import { type CreateApiPayload } from "../../../hooks/apis";
 import CreationMetaData from "./CreationMetaData";
 
+const slugify = (val: string) =>
+  (val || "")
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .trim();
+
+const majorFromVersion = (v: string) => {
+  const m = (v || "").trim().match(/\d+/);
+  return m?.[0] ?? "";
+};
+
+const buildIdentifierFromNameAndVersion = (name: string, version: string) => {
+  const base = slugify(name);
+  const major = majorFromVersion(version);
+  return major ? `${base}-v${major}` : base;
+};
+
 type EndpointWizardStep = "endpoint" | "details";
 
 type EndpointCreationState = {
@@ -51,13 +70,13 @@ const EndPointCreationFlow: React.FC<Props> = ({
   const [creating, setCreating] = React.useState(false);
   const [metaHasErrors, setMetaHasErrors] = React.useState(false);
 
-  // Reset this flow's slice when opened
   React.useEffect(() => {
     if (open) {
       resetEndpointMeta();
       setWizardStep("endpoint");
       setWizardState({ endpointUrl: "" });
       setWizardError(null);
+      setMetaHasErrors(false);
     }
   }, [open, resetEndpointMeta]);
 
@@ -87,31 +106,46 @@ const EndPointCreationFlow: React.FC<Props> = ({
   const handleStepChange = React.useCallback(
     (next: EndpointWizardStep) => {
       if (next === "details") {
-        const inferred = inferNameFromEndpoint(wizardState.endpointUrl);
-        const needsName = !(endpointMeta?.name || "").trim();
-        const needsContext = !(endpointMeta?.context || "").trim();
+        const inferredDisplayName = inferNameFromEndpoint(
+          wizardState.endpointUrl
+        );
+
         setEndpointMeta((prev: any) => {
           const base = prev || {};
           const nextMeta = { ...base };
-          if (needsName) nextMeta.name = inferred;
-          if (needsContext && !base?.contextEdited) {
-            const slug = inferred
-              .toLowerCase()
-              .replace(/[^a-z0-9]+/g, "-")
-              .replace(/^-+|-+$/g, "");
+
+          const hasName = !!(base?.name || "").trim();
+          const hasDisplayName = !!(base?.displayName || "").trim();
+          const hasContext = !!(base?.context || "").trim();
+          const hasVersion = !!(base?.version || "").trim();
+
+          const version = hasVersion ? base.version : "1.0.0";
+
+          if (!hasDisplayName) nextMeta.displayName = inferredDisplayName;
+          if (!hasName) nextMeta.name = inferredDisplayName;
+
+          if (!hasContext && !base?.contextEdited) {
+            const slug = slugify(inferredDisplayName);
             nextMeta.context = slug ? `/${slug}` : "";
           }
+
+          if (!hasVersion) nextMeta.version = version;
+
+          if (!base?.identifierEdited) {
+            nextMeta.identifier = buildIdentifierFromNameAndVersion(
+              inferredDisplayName,
+              version
+            );
+            nextMeta.identifierEdited = false;
+          }
+
           return nextMeta;
         });
       }
+
       setWizardStep(next);
     },
-    [
-      inferNameFromEndpoint,
-      endpointMeta,
-      setEndpointMeta,
-      wizardState.endpointUrl,
-    ]
+    [inferNameFromEndpoint, setEndpointMeta, wizardState.endpointUrl]
   );
 
   const handleCreate = React.useCallback(async () => {
@@ -121,11 +155,8 @@ const EndPointCreationFlow: React.FC<Props> = ({
       endpointMeta?.name ||
       ""
     ).trim();
-    const identifier = (
-      endpointMeta?.identifier ||
-      endpointMeta?.name ||
-      ""
-    ).trim();
+
+    const identifier = (endpointMeta?.identifier || "").trim();
     const context = (endpointMeta?.context || "").trim();
     const version = (endpointMeta?.version || "").trim() || "1.0.0";
 
@@ -137,11 +168,12 @@ const EndPointCreationFlow: React.FC<Props> = ({
     try {
       setWizardError(null);
       setCreating(true);
+
       const uniqueBackendName = `default-backend-${Date.now().toString(
         36
       )}${Math.random().toString(36).slice(2, 8)}`;
 
-      await createApi({
+      const payload: CreateApiPayload = {
         name: identifier,
         displayName,
         context: context.startsWith("/") ? context : `/${context}`,
@@ -158,9 +190,10 @@ const EndPointCreationFlow: React.FC<Props> = ({
             retries: 0,
           },
         ],
-      });
+      };
+
+      await createApi(payload);
 
-      // fresh state for the next time it's opened
       resetEndpointMeta();
       setWizardState({ endpointUrl: "" });
       onClose();
@@ -260,7 +293,8 @@ const EndPointCreationFlow: React.FC<Props> = ({
               disabled={
                 creating ||
                 metaHasErrors ||
-                !(endpointMeta?.name || "").trim() ||
+                !(endpointMeta?.displayName || endpointMeta?.name || "").trim() ||
+                !(endpointMeta?.identifier || "").trim() ||
                 !(endpointMeta?.context || "").trim() ||
                 !(endpointMeta?.version || "").trim()
               }

From 6308636884cd970e61ed3cd320c4d35e4a3b1430 Mon Sep 17 00:00:00 2001
From: Dilan Induwara <153802063+Induwara04@users.noreply.github.com>
Date: Sat, 13 Dec 2025 09:37:05 +0530
Subject: [PATCH 5/5] Resolve Comments

---
 portals/management-portal/src/hooks/apis.ts   |  1 +
 .../ContractCreationFlows/URLCreationFlow.tsx | 14 ++--
 .../UploadCreationFlow.tsx                    | 14 ++--
 .../CreationFlows/EndPointCreationFlow.tsx    | 65 ++++++++++++-------
 4 files changed, 54 insertions(+), 40 deletions(-)

diff --git a/portals/management-portal/src/hooks/apis.ts b/portals/management-portal/src/hooks/apis.ts
index c60b76666..4937c170d 100644
--- a/portals/management-portal/src/hooks/apis.ts
+++ b/portals/management-portal/src/hooks/apis.ts
@@ -75,6 +75,7 @@ export type ImportOpenApiRequest = {
     context: string;
     version: string;
     projectId: string;
+    displayName?: string;
     target?: string;
     description?: string;
     backendServices?: ApiBackendService[];
diff --git a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/URLCreationFlow.tsx b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/URLCreationFlow.tsx
index c12e4b399..fc0afdc51 100644
--- a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/URLCreationFlow.tsx
+++ b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/URLCreationFlow.tsx
@@ -177,6 +177,7 @@ const URLCreationFlow: React.FC<Props> = ({
       contractMeta?.name ||
       ""
     ).trim();
+
     const context = (contractMeta?.context || "").trim();
     const version = (contractMeta?.version || "").trim();
     const description = (contractMeta?.description || "").trim() || undefined;
@@ -232,7 +233,7 @@ const URLCreationFlow: React.FC<Props> = ({
         target,
         description,
         backendServices,
-      } as any,
+      },
       url: specUrl.trim(),
     };
 
@@ -357,6 +358,7 @@ const URLCreationFlow: React.FC<Props> = ({
                 variant="outlined"
                 onClick={() => setStep("url")}
                 sx={{ textTransform: "none" }}
+                disabled={creating}
               >
                 Back
               </Button>
@@ -366,16 +368,10 @@ const URLCreationFlow: React.FC<Props> = ({
                 disabled={
                   creating ||
                   metaHasErrors ||
-                  !(
-                    contractMeta?.displayName ||
-                    contractMeta?.name ||
-                    ""
-                  ).trim() ||
+                  !(contractMeta?.displayName || contractMeta?.name || "").trim() ||
                   !(contractMeta as any)?.identifier?.trim() ||
                   !(contractMeta?.context || "").trim() ||
-                  !isValidMajorMinorVersion(
-                    (contractMeta?.version || "").trim()
-                  )
+                  !isValidMajorMinorVersion((contractMeta?.version || "").trim())
                 }
                 onClick={onCreate}
                 sx={{ textTransform: "none" }}
diff --git a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/UploadCreationFlow.tsx b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/UploadCreationFlow.tsx
index 86769d94f..fdc6a085c 100644
--- a/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/UploadCreationFlow.tsx
+++ b/portals/management-portal/src/pages/apis/CreationFlows/ContractCreationFlows/UploadCreationFlow.tsx
@@ -209,10 +209,8 @@ const UploadCreationFlow: React.FC<Props> = ({
     const description = (contractMeta?.description || "").trim() || undefined;
     const target = (contractMeta?.target || "").trim();
 
-    // ✅ this is the important fix:
-    // send name as identifier (with -v{major}), not the display name
     const identifier =
-      (contractMeta as any)?.identifier?.trim() ||
+      ((contractMeta as any)?.identifier || "").trim() ||
       buildIdentifierFromNameAndVersion(displayName, version);
 
     if (!displayName || !context || !version) {
@@ -253,15 +251,15 @@ const UploadCreationFlow: React.FC<Props> = ({
 
     const payload: ImportOpenApiRequest = {
       api: {
-        name: identifier, // ✅ now: dilan-api-v1
-        displayName, // ✅ now: Dilan API
+        name: identifier,
+        displayName,
         context,
         version,
         projectId: selectedProjectId,
         target,
         description,
         backendServices,
-      } as any,
+      },
       definition: uploadedFile,
     };
 
@@ -427,7 +425,9 @@ const UploadCreationFlow: React.FC<Props> = ({
               <CreationMetaData
                 scope="contract"
                 title="API Details"
-                onValidationChange={({ hasError }) => setMetaHasErrors(hasError)}
+                onValidationChange={({ hasError }) =>
+                  setMetaHasErrors(hasError)
+                }
               />
 
               <Stack
diff --git a/portals/management-portal/src/pages/apis/CreationFlows/EndPointCreationFlow.tsx b/portals/management-portal/src/pages/apis/CreationFlows/EndPointCreationFlow.tsx
index 497326975..012b86f8e 100644
--- a/portals/management-portal/src/pages/apis/CreationFlows/EndPointCreationFlow.tsx
+++ b/portals/management-portal/src/pages/apis/CreationFlows/EndPointCreationFlow.tsx
@@ -12,7 +12,10 @@ import { Button } from "../../../components/src/components/Button";
 import { Card } from "../../../components/src/components/Card";
 import { TextInput } from "../../../components/src/components/TextInput";
 
-import { useCreateComponentBuildpackContext } from "../../../context/CreateComponentBuildpackContext";
+import {
+  useCreateComponentBuildpackContext,
+  type ProxyMetadata,
+} from "../../../context/CreateComponentBuildpackContext";
 import { type CreateApiPayload } from "../../../hooks/apis";
 import CreationMetaData from "./CreationMetaData";
 
@@ -50,6 +53,11 @@ type Props = {
   onClose: () => void;
 };
 
+type EndpointMeta = ProxyMetadata & {
+  identifier?: string;
+  identifierEdited?: boolean;
+};
+
 const EndPointCreationFlow: React.FC<Props> = ({
   open,
   selectedProjectId,
@@ -110,28 +118,29 @@ const EndPointCreationFlow: React.FC<Props> = ({
           wizardState.endpointUrl
         );
 
-        setEndpointMeta((prev: any) => {
-          const base = prev || {};
-          const nextMeta = { ...base };
+        setEndpointMeta((prev) => {
+          const base: EndpointMeta =
+            (prev as EndpointMeta) || ({} as EndpointMeta);
+          const nextMeta: EndpointMeta = { ...base };
 
-          const hasName = !!(base?.name || "").trim();
-          const hasDisplayName = !!(base?.displayName || "").trim();
-          const hasContext = !!(base?.context || "").trim();
-          const hasVersion = !!(base?.version || "").trim();
+          const hasName = !!(base.name || "").trim();
+          const hasDisplayName = !!(base.displayName || "").trim();
+          const hasContext = !!(base.context || "").trim();
+          const hasVersion = !!(base.version || "").trim();
 
           const version = hasVersion ? base.version : "1.0.0";
 
           if (!hasDisplayName) nextMeta.displayName = inferredDisplayName;
           if (!hasName) nextMeta.name = inferredDisplayName;
 
-          if (!hasContext && !base?.contextEdited) {
+          if (!hasContext && !base.contextEdited) {
             const slug = slugify(inferredDisplayName);
             nextMeta.context = slug ? `/${slug}` : "";
           }
 
           if (!hasVersion) nextMeta.version = version;
 
-          if (!base?.identifierEdited) {
+          if (!base.identifierEdited) {
             nextMeta.identifier = buildIdentifierFromNameAndVersion(
               inferredDisplayName,
               version
@@ -139,7 +148,7 @@ const EndPointCreationFlow: React.FC<Props> = ({
             nextMeta.identifierEdited = false;
           }
 
-          return nextMeta;
+          return nextMeta as any; // <-- if your context setter expects ProxyMetadata only, see note below
         });
       }
 
@@ -150,15 +159,13 @@ const EndPointCreationFlow: React.FC<Props> = ({
 
   const handleCreate = React.useCallback(async () => {
     const endpointUrl = wizardState.endpointUrl.trim();
-    const displayName = (
-      endpointMeta?.displayName ||
-      endpointMeta?.name ||
-      ""
-    ).trim();
 
-    const identifier = (endpointMeta?.identifier || "").trim();
-    const context = (endpointMeta?.context || "").trim();
-    const version = (endpointMeta?.version || "").trim() || "1.0.0";
+    const meta = endpointMeta as EndpointMeta | undefined;
+
+    const displayName = (meta?.displayName || meta?.name || "").trim();
+    const identifier = (meta?.identifier || "").trim();
+    const context = (meta?.context || "").trim();
+    const version = (meta?.version || "").trim() || "1.0.0";
 
     if (!endpointUrl || !displayName || !identifier || !context) {
       setWizardError("Please complete all required fields.");
@@ -178,7 +185,7 @@ const EndPointCreationFlow: React.FC<Props> = ({
         displayName,
         context: context.startsWith("/") ? context : `/${context}`,
         version,
-        description: endpointMeta?.description?.trim() || undefined,
+        description: meta?.description?.trim() || undefined,
         projectId: selectedProjectId,
         backendServices: [
           {
@@ -293,10 +300,20 @@ const EndPointCreationFlow: React.FC<Props> = ({
               disabled={
                 creating ||
                 metaHasErrors ||
-                !(endpointMeta?.displayName || endpointMeta?.name || "").trim() ||
-                !(endpointMeta?.identifier || "").trim() ||
-                !(endpointMeta?.context || "").trim() ||
-                !(endpointMeta?.version || "").trim()
+                !(
+                  (endpointMeta as EndpointMeta | undefined)?.displayName ||
+                  (endpointMeta as EndpointMeta | undefined)?.name ||
+                  ""
+                ).trim() ||
+                !(
+                  (endpointMeta as EndpointMeta | undefined)?.identifier || ""
+                ).trim() ||
+                !(
+                  (endpointMeta as EndpointMeta | undefined)?.context || ""
+                ).trim() ||
+                !(
+                  (endpointMeta as EndpointMeta | undefined)?.version || ""
+                ).trim()
               }
               sx={{ textTransform: "none" }}
             >