feat(portal): improve component creation error handling and UX (#73)

- Show clear warning when environment has no clusters
- Prevent auto-redirect on component creation errors
- Display actionable error messages with options to navigate or fix
- Add proactive validation to block component creation without clusters
- Improve empty state message when no clusters are available
- Add cluster validation alerts in component creation modals

This improves user experience by:
- Making it clear why components can't be created
- Providing guidance on how to fix the issue (add cluster)
- Not hiding errors with automatic redirects
- Showing warnings before users attempt to create components

Co-authored-by: rafaelrsantosti <11065120+rafaelrsantosti@users.noreply.github.com>

Author: rafaelrsantosti

portal/src/pages/applications/CreateApplication.tsx

@@ -27,6 +27,7 @@ function CreateApplication() {
   const [notification, setNotification] = useState<{ type: 'success' | 'error'; message: string } | null>(null)
   const [, setErrors] = useState<Record<string, string>>({})
   const [isCreating, setIsCreating] = useState(false)
+  const [partialSuccess, setPartialSuccess] = useState<{ applicationUuid: string; instanceUuid: string } | null>(null)
   const { user } = useAuth()
   const isAdmin = user?.role === 'admin'
 
@@ -55,36 +56,37 @@ function CreateApplication() {
     enabled: true,
   })
 
+  // Check if environment has any clusters
+  const environmentClusters = useMemo(() => {
+    if (!instanceData.environment_uuid || !clusters) return []
+    return clusters.filter(
+      (cluster) => cluster.environment?.uuid === instanceData.environment_uuid
+    )
+  }, [instanceData.environment_uuid, clusters])
+
+  const hasNoClusters = instanceData.environment_uuid && environmentClusters.length === 0
+
   // Check if any cluster in the selected environment has gateway_api available
   const hasGatewayApi = useMemo(() => {
     if (!instanceData.environment_uuid || !clusters) return false
-    const environmentClusters = clusters.filter(
-      (cluster) => cluster.environment?.uuid === instanceData.environment_uuid
-    )
     return environmentClusters.some((cluster) => cluster.gateway?.api?.enabled === true)
-  }, [instanceData.environment_uuid, clusters])
+  }, [instanceData.environment_uuid, clusters, environmentClusters])
 
   // Get Gateway API resources available in clusters of the selected environment
   const gatewayResources = useMemo(() => {
-    if (!instanceData.environment_uuid || !clusters) return []
-    const environmentClusters = clusters.filter(
-      (cluster) => cluster.environment?.uuid === instanceData.environment_uuid
-    )
+    if (environmentClusters.length === 0) return []
     const allResources = new Set<string>()
     environmentClusters.forEach((cluster) => {
       if (cluster.gateway?.api?.enabled && cluster.gateway.api.resources) {
         cluster.gateway.api.resources.forEach((resource) => allResources.add(resource))
       }
     })
     return Array.from(allResources)
-  }, [instanceData.environment_uuid, clusters])
+  }, [environmentClusters])
 
   // Get Gateway reference from clusters of the selected environment
   const gatewayReference = useMemo(() => {
-    if (!instanceData.environment_uuid || !clusters) return { namespace: '', name: '' }
-    const environmentClusters = clusters.filter(
-      (cluster) => cluster.environment?.uuid === instanceData.environment_uuid
-    )
+    if (environmentClusters.length === 0) return { namespace: '', name: '' }
     for (const cluster of environmentClusters) {
       if (cluster.gateway?.reference) {
         const ref = cluster.gateway.reference.private || cluster.gateway.reference.public || { namespace: '', name: '' }
@@ -96,7 +98,7 @@ function CreateApplication() {
       }
     }
     return { namespace: '', name: '' }
-  }, [instanceData.environment_uuid, clusters])
+  }, [environmentClusters])
 
   // Components
   const [components, setComponents] = useState<ComponentFormData[]>([])
@@ -228,6 +230,15 @@ function CreateApplication() {
       return
     }
 
+    // Check if environment has clusters
+    if (hasNoClusters) {
+      setNotification({
+        type: 'error',
+        message: 'The selected environment has no clusters. Please add a cluster in Settings → Clusters before creating components.',
+      })
+      return
+    }
+
     setIsCreating(true)
 
     let application: { uuid: string } | null = null
@@ -297,34 +308,31 @@ function CreateApplication() {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
       const errorMessage = error.response?.data?.detail || error.message || 'Error creating application'
+      setIsCreating(false)
 
-      // If application and instance were created, redirect anyway (partial success)
+      // If application and instance were created, show error but allow user to decide
       if (application && instance) {
+        setPartialSuccess({ applicationUuid: application.uuid, instanceUuid: instance.uuid })
         setNotification({
           type: 'error',
-          message: `Application created but there was an error with components: ${errorMessage}. Redirecting...`,
+          message: `Application and instance created, but component failed: ${errorMessage}`,
         })
-        setTimeout(() => {
-          navigate(`/applications/${application!.uuid}/instances/${instance!.uuid}/components`)
-        }, 2000)
+        // Show a button to navigate or let user fix the issue and retry
+        // Don't auto-redirect - let user see the error and decide
       } else if (application) {
         // Application created but instance failed
         setNotification({
           type: 'error',
-          message: `Application created but instance failed: ${errorMessage}. Redirecting...`,
+          message: `Application created but instance failed: ${errorMessage}`,
         })
-        setTimeout(() => {
-          navigate(`/applications/${application!.uuid}`)
-        }, 2000)
       } else {
         // Complete failure - allow retry
-        setIsCreating(false)
         setNotification({
           type: 'error',
           message: errorMessage,
         })
-        setTimeout(() => setNotification(null), 5000)
       }
+      // Don't auto-hide error notifications - let user dismiss them
     }
   }
 
@@ -360,7 +368,23 @@ function CreateApplication() {
   )
 
   const step2Content = (
-    <InstanceForm data={instanceData} onChange={setInstanceData} showInfoCard={false} />
+    <div className="space-y-4">
+      <InstanceForm data={instanceData} onChange={setInstanceData} showInfoCard={false} />
+      {hasNoClusters && (
+        <div className="p-4 rounded-lg bg-amber-50 border border-amber-200 text-amber-800">
+          <div className="flex items-start gap-2">
+            <span className="text-amber-500 mt-0.5">⚠️</span>
+            <div>
+              <p className="font-medium">No clusters in this environment</p>
+              <p className="text-sm mt-1">
+                This environment has no clusters configured. You won't be able to deploy components until a cluster is added.
+                Go to <span className="font-medium">Settings → Clusters</span> to add one.
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
   )
 
   const step3Content = (
@@ -513,7 +537,42 @@ function CreateApplication() {
               notification.type === 'success' ? 'bg-green-50 text-green-800 border border-green-200' : 'bg-red-50 text-red-800 border border-red-200'
             }`}
           >
-            {notification.message}
+            <div className="flex flex-col gap-3">
+              <div className="flex items-start justify-between">
+                <span>{notification.message}</span>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setNotification(null)
+                    if (!partialSuccess) setPartialSuccess(null)
+                  }}
+                  className="text-slate-400 hover:text-slate-600 ml-2"
+                >
+                  ✕
+                </button>
+              </div>
+              {partialSuccess && notification.type === 'error' && (
+                <div className="flex gap-2 mt-2">
+                  <button
+                    type="button"
+                    onClick={() => navigate(`/applications/${partialSuccess.applicationUuid}/instances/${partialSuccess.instanceUuid}/components`)}
+                    className="px-3 py-1.5 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
+                  >
+                    Go to Instance (add components there)
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setNotification(null)
+                      setPartialSuccess(null)
+                    }}
+                    className="px-3 py-1.5 text-sm bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors"
+                  >
+                    Stay and fix
+                  </button>
+                </div>
+              )}
+            </div>
           </div>
         )}
 

portal/src/pages/applications/InstanceDetail.tsx

@@ -35,21 +35,24 @@ function InstanceDetail() {
     queryFn: () => clustersApi.list(),
   })
 
-  // Check if any cluster in the instance's environment has gateway_api available
-  const hasGatewayApi = useMemo(() => {
-    if (!instance || !clusters || !instance.environment) return false
-    const environmentClusters = clusters.filter(
+  // Get clusters in the instance's environment
+  const environmentClusters = useMemo(() => {
+    if (!instance || !clusters || !instance.environment) return []
+    return clusters.filter(
       (cluster) => cluster.environment?.uuid === instance.environment.uuid
     )
-    return environmentClusters.some((cluster) => cluster.gateway?.api?.enabled === true)
   }, [instance, clusters])
 
+  const hasNoClusters = instance?.environment && environmentClusters.length === 0
+
+  // Check if any cluster in the instance's environment has gateway_api available
+  const hasGatewayApi = useMemo(() => {
+    return environmentClusters.some((cluster) => cluster.gateway?.api?.enabled === true)
+  }, [environmentClusters])
+
   // Get Gateway API resources available in environment clusters
   const gatewayResources = useMemo(() => {
-    if (!instance || !clusters || !instance.environment) return []
-    const environmentClusters = clusters.filter(
-      (cluster) => cluster.environment?.uuid === instance.environment.uuid
-    )
+    if (environmentClusters.length === 0) return []
     // Get resources from all clusters that have Gateway API enabled
     const allResources = new Set<string>()
     environmentClusters.forEach((cluster) => {
@@ -58,14 +61,11 @@ function InstanceDetail() {
       }
     })
     return Array.from(allResources)
-  }, [instance, clusters])
+  }, [environmentClusters])
 
   // Get Gateway reference (namespace and name) from environment clusters
   const gatewayReference = useMemo(() => {
-    if (!instance || !clusters || !instance.environment) return { namespace: '', name: '' }
-    const environmentClusters = clusters.filter(
-      (cluster) => cluster.environment?.uuid === instance.environment.uuid
-    )
+    if (environmentClusters.length === 0) return { namespace: '', name: '' }
     // Get the first gateway reference found that has namespace and name filled
     // Use private gateway as default reference (both public and private use same auto-discovery if not configured)
     for (const cluster of environmentClusters) {
@@ -79,7 +79,7 @@ function InstanceDetail() {
       }
     }
     return { namespace: '', name: '' }
-  }, [instance, clusters])
+  }, [environmentClusters])
 
   const [editingComponentUuid, setEditingComponentUuid] = useState<string | null>(null)
   const [notification, setNotification] = useState<{ type: 'success' | 'error'; message: string } | null>(null)
@@ -916,7 +916,19 @@ function InstanceDetail() {
 
           {Object.values(componentsByType).every((components) => components.length === 0) && (
             <div className="bg-white rounded-xl shadow-soft border border-slate-200/60 p-12 text-center">
-              <p className="text-slate-500 text-lg">No components found. Click "Add Component" to get started.</p>
+              {hasNoClusters ? (
+                <div className="space-y-3">
+                  <p className="text-amber-600 text-lg font-medium">⚠️ No clusters in this environment</p>
+                  <p className="text-slate-500">
+                    You need to add a cluster to the <span className="font-medium">{instance?.environment?.name}</span> environment before you can create components.
+                  </p>
+                  <p className="text-sm text-slate-400">
+                    Go to <span className="font-medium">Settings → Clusters</span> to add one.
+                  </p>
+                </div>
+              ) : (
+                <p className="text-slate-500 text-lg">No components found. Click "Add Component" to get started.</p>
+              )}
             </div>
           )}
         </div>
@@ -964,6 +976,19 @@ function InstanceDetail() {
                     </button>
                   </div>
                 )}
+                {hasNoClusters && !editingComponentUuid && (
+                  <div className="mb-4 p-4 rounded-lg bg-amber-50 border border-amber-200 text-amber-800">
+                    <div className="flex items-start gap-2">
+                      <span className="text-amber-500 mt-0.5">⚠️</span>
+                      <div>
+                        <p className="font-medium text-sm">No clusters in this environment</p>
+                        <p className="text-sm mt-1">
+                          Components cannot be deployed without a cluster. Go to <span className="font-medium">Settings → Clusters</span> to add one.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                )}
                 {component ? (
                   <ComponentForm
                     component={component}