refactor: enhance app input handling and modal state management

- Improved the useAppInputsFormSchema hook to handle workflow apps by ensuring workflow data is available before proceeding.
- Added guards in useCommonModalState to prevent errors from uninitialized state and ensure proper error notifications.
- Enhanced useOAuthClientState to validate the presence of schema and handle missing form values more robustly.
- Cleaned up code for better readability and maintainability.

web/app/components/plugins/plugin-detail-panel/app-selector/hooks/use-app-inputs-form-schema.ts

@@ -205,7 +205,12 @@ export function useAppInputsFormSchema({
     if (!currentApp)
       return []
 
+    // For workflow apps, wait until workflow data is available
+    if (!isBasicApp && !currentWorkflow)
+      return []
+
     // Build base schema based on app type
+    // Note: currentWorkflow is guaranteed to be defined here due to the early return above
     const baseSchema = isBasicApp
       ? buildBasicAppSchema(currentApp, fileUploadConfig)
       : buildWorkflowSchema(currentWorkflow!, fileUploadConfig)

web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-common-modal-state.ts

@@ -237,6 +237,15 @@ export const useCommonModalState = ({
 
   // Handle verify
   const handleVerify = useCallback(() => {
+    // Guard against uninitialized state
+    if (!detail?.provider || !subscriptionBuilder?.id) {
+      Toast.notify({
+        type: 'error',
+        message: 'Subscription builder not initialized',
+      })
+      return
+    }
+
     const apiKeyCredentialsFormValues = apiKeyCredentialsFormRef.current?.getFormValues({}) || DEFAULT_FORM_VALUES
     const credentials = apiKeyCredentialsFormValues.values
 
@@ -255,8 +264,8 @@ export const useCommonModalState = ({
 
     verifyCredentials(
       {
-        provider: detail?.provider || '',
+        provider: detail.provider,
-        subscriptionBuilderId: subscriptionBuilder?.id || '',
+        subscriptionBuilderId: subscriptionBuilder.id,
         credentials,
       },
       {

web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-oauth-client-state.ts

@@ -164,11 +164,18 @@ export const useOAuthClientState = ({
     }
 
     if (isCustom) {
+      // Short-circuit if no schema to validate
+      if (!oauthClientSchema?.length) {
+        return
+      }
+
       const clientFormValues = clientFormRef.current?.getFormValues({}) as {
         values: TriggerOAuthClientParams
         isCheckValidated: boolean
-      }
+      } | undefined
-      if (!clientFormValues.isCheckValidated)
+
+      // Handle missing ref or form values
+      if (!clientFormValues || !clientFormValues.isCheckValidated)
         return
 
       const clientParams = { ...clientFormValues.values }
@@ -194,7 +201,7 @@ export const useOAuthClientState = ({
         })
       },
     })
-  }, [clientType, providerName, oauthConfig?.params, configureOAuth, handleAuthorization, onClose, t])
+  }, [clientType, providerName, oauthClientSchema, oauthConfig?.params, configureOAuth, handleAuthorization, onClose, t])
 
   // Polling effect for authorization verification
   useEffect(() => {