Improve file integration funcitonality

workspaces/ballerina/ballerina-core/src/interfaces/service.ts

@@ -124,7 +124,12 @@ export interface MessageQueuePayloadContext {
     messageDocumentation?: string;
 }
 
-export type PayloadContext = HttpPayloadContext | MessageQueuePayloadContext;
+export interface GeneralPayloadContext {
+    protocol: string;
+    filterType?: string;
+}
+
+export type PayloadContext = HttpPayloadContext | MessageQueuePayloadContext | GeneralPayloadContext;
 
 export interface ParamDetails {
     name: string;

workspaces/ballerina/ballerina-extension/package.json

@@ -1165,7 +1165,7 @@
                 "description": "design-view",
                 "default": {
                     "fontPath": "./resources/font-wso2-vscode/dist/wso2-vscode.woff",
-                    "fontCharacter": "\\f16e"
+                    "fontCharacter": "\\f175"
                 }
             }
         },

workspaces/ballerina/ballerina-extension/src/rpc-managers/bi-diagram/rpc-manager.ts

@@ -1565,7 +1565,7 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
         if (!filePath && StateMachine.context()?.projectPath){
             const projectPath = StateMachine.context().projectPath;
             const ballerinaFiles = await getBallerinaFiles(Uri.file(projectPath).fsPath);
-            filePath = ballerinaFiles.at(0)
+            filePath = ballerinaFiles.at(0);
         }
 
         if (!filePath) {

workspaces/ballerina/ballerina-side-panel/src/components/editors/ChoiceForm.tsx

@@ -58,15 +58,16 @@ export function ChoiceForm(props: ChoiceFormProps) {
     const [selectedOption, setSelectedOption] = useState<number>(1);
 
     const [dynamicFields, setDynamicFields] = useState<FormField[]>([]);
-
+    const [dynamicRecordTypeFields, setDynamicRecordTypeFields] = useState<RecordTypeField[]>([]);
 
     // Add useEffect to set initial values
     useEffect(() => {
         const realValue = selectedOption - 1;
         const property = field.choices[realValue];
-        const choiceProperty = convertConfig(property);
-        setDynamicFields(choiceProperty);
-        if (choiceProperty.length > 0) {
+        const { formFields, recordTypeFieldsForChoice } = convertConfig(property);
+        setDynamicFields(formFields);
+        setDynamicRecordTypeFields(recordTypeFieldsForChoice);
+        if (formFields.length > 0) {
             Object.entries(property.properties).forEach(([propKey, propValue]) => {
                 if (propValue.value !== undefined) {
                     setValue(propKey, propValue.value);
@@ -75,10 +76,21 @@ export function ChoiceForm(props: ChoiceFormProps) {
         }
     }, [selectedOption]);
 
-    const convertConfig = (model: PropertyModel): FormField[] => {
+    const convertConfig = (model: PropertyModel): { formFields: FormField[], recordTypeFieldsForChoice: RecordTypeField[] } => {
         const formFields: FormField[] = [];
+        const recordTypeFieldsForChoice: RecordTypeField[] = [];
+
         for (const key in model.properties) {
             const expression = model.properties[key];
+
+            // console.log(`>>> Processing property: ${key}`, {
+            //     valueType: expression.valueType,
+            //     valueTypeConstraint: expression.valueTypeConstraint,
+            //     hasTypeMembers: !!expression.typeMembers,
+            //     typeMembersLength: expression.typeMembers?.length || 0,
+            //     typeMembers: expression.typeMembers
+            // });
+
             let items = undefined;
             if (getPrimaryInputType(expression.types)?.fieldType === "MULTIPLE_SELECT" || getPrimaryInputType(expression.types)?.fieldType === "SINGLE_SELECT") {
                 items = expression.items;
@@ -101,9 +113,27 @@ export function ChoiceForm(props: ChoiceFormProps) {
                 defaultValue: expression.defaultValue as string
             }
             formFields.push(formField);
+
+            // If this property has typeMembers, create a RecordTypeField for it
+            const primaryType = getPrimaryInputType(expression.types);
+            if (primaryType?.typeMembers && primaryType.typeMembers.length > 0) {
+                const recordTypeField: RecordTypeField = {
+                    key: key,
+                    property: {
+                        metadata: expression.metadata || { label: "", description: "" },
+                        value: expression.value || "",
+                        optional: expression.optional || false,
+                        editable: expression.editable !== undefined ? expression.editable : true,
+                        types: expression.types
+                    },
+                    recordTypeMembers: primaryType.typeMembers.filter(member => member.kind === "RECORD_TYPE")
+                };
+                recordTypeFieldsForChoice.push(recordTypeField);
+            } 
         }
-        console.log("Dynamic Form Fields:", formFields)
-        return formFields;
+        console.log(">>> Final Dynamic Form Fields:", formFields)
+        console.log(">>> Final Dynamic Record Type Fields:", recordTypeFieldsForChoice)
+        return { formFields, recordTypeFieldsForChoice };
     }
 
     return (
@@ -129,12 +159,18 @@ export function ChoiceForm(props: ChoiceFormProps) {
 
             <FormSection>
                 {dynamicFields.map((dfield, index) => {
+                    // Merge parent recordTypeFields with dynamically generated ones
+                    const mergedRecordTypeFields = [
+                        ...(recordTypeFields || []),
+                        ...dynamicRecordTypeFields
+                    ];
+
                     return (
                         <EditorFactory
                             key={dfield.key}
                             field={dfield}
                             autoFocus={index === 0 ? true : false}
-                            recordTypeFields={recordTypeFields}
+                            recordTypeFields={mergedRecordTypeFields}
                         />
                     );
                 })}

workspaces/ballerina/ballerina-visualizer/src/components/EntryPointTypeCreator/index.tsx

@@ -39,7 +39,6 @@ interface EntryPointTypeCreatorProps {
     modalWidth?: number;
     modalHeight?: number;
     payloadContext?: PayloadContext;
-
 }
 
 interface TypeEditorState {

workspaces/ballerina/ballerina-visualizer/src/views/BI/ComponentListView/FileIntegrationPanel.tsx

@@ -16,7 +16,7 @@
  * under the License.
  */
 import React, { useEffect, useState } from 'react';
-import { Codicon } from '@wso2/ui-toolkit';
+import { Icon } from '@wso2/ui-toolkit';
 import { useRpcContext } from '@wso2/ballerina-rpc-client';
 import { EVENT_TYPE, MACHINE_VIEW, SCOPE, ServiceModel, TriggerModelsResponse } from '@wso2/ballerina-core';
 
@@ -67,17 +67,7 @@ export function FileIntegrationPanel(props: FileIntegrationPanelProps) {
                                 id={`trigger-${item.moduleName}`}
                                 key={item.id}
                                 title={item.name}
-                                icon={
-                                    item.icon ? (
-                                        <img
-                                            src={item.icon}
-                                            alt={item.name}
-                                            style={{ width: "40px" }}
-                                        />
-                                    ) : (
-                                        <Codicon name="mail" />
-                                    )
-                                }
+                                icon={getFileIntegrationIcon(item)}
                                 onClick={() => {
                                     handleOnSelect(item);
                                 }}
@@ -90,3 +80,21 @@ export function FileIntegrationPanel(props: FileIntegrationPanelProps) {
         </PanelViewMore>
     );
 };
+
+// TODO: This should be removed once the new icons are added to the BE API.
+export function getFileIntegrationIcon(item: ServiceModel) {
+    return getCustomFileIntegrationIcon(item.moduleName) || <img src={item.icon} alt={item.name} style={{ width: "38px" }} />;
+}
+
+// INFO: This is a temporary function to get the custom icon for the file integration triggers.
+// TODO: This should be removed once the new icons are added to the BE API.
+export function getCustomFileIntegrationIcon(type: string) {
+    switch (type) {
+        case "ftp":
+            return <Icon name="bi-ftp" />;
+        case "file":
+            return <Icon name="bi-file" />;
+        default:
+            return null;
+    }
+}

workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGenerator/index.tsx

@@ -1455,7 +1455,12 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
                                 type={peekTypeStack()?.type}
                                 newType={peekTypeStack() ? peekTypeStack().isDirty : false}
                                 newTypeValue={typeEditorState.newTypeValue}
-                                isGraphql={isGraphql}
+                                payloadContext={
+                                    {
+                                        protocol: "GRAPHQL",
+                                        filterType: "INPUT"
+                                    }
+                                }
                                 onTypeChange={onTypeChange}
                                 onSaveType={onSaveType}
                                 onTypeCreate={() => { }}
@@ -1582,7 +1587,7 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
                             newType={peekTypeStack() ? peekTypeStack().isDirty : false}
                             newTypeValue={typeEditorState.newTypeValue}
                             isPopupTypeForm={true}
-                            isGraphql={isGraphql}
+                            payloadContext={{protocol: "GRAPHQL"}}
                             onTypeChange={onTypeChange}
                             onSaveType={onSaveType}
                             onTypeCreate={() => { }}

workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGeneratorNew/index.tsx

@@ -1021,7 +1021,7 @@ export function FormGeneratorNew(props: FormProps) {
                             newType={peekTypeStack() ? peekTypeStack().isDirty : false}
                             newTypeValue={typeEditorState.newTypeValue}
                             isPopupTypeForm={true}
-                            isGraphql={isGraphqlEditor}
+                            payloadContext={{protocol: "GRAPHQL"}}
                             onTypeChange={handleTypeChange}
                             onSaveType={onSaveType}
                             onTypeCreate={() => { }}

workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/FTPForm/FTPConfigForm.tsx

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from "react";
+import { SidePanelBody } from "@wso2/ui-toolkit";
+import ButtonCard from "../../../../../components/ButtonCard";
+import { ServiceModel } from "@wso2/ballerina-core";
+
+import { EditorContentColumn } from "../../styles";
+
+interface FunctionConfigFormProps {
+    onBack?: () => void;
+    isSaving: boolean;
+    onSubmit?: (selectedHandler: string) => void;
+    serviceModel: ServiceModel;
+}
+
+export function FunctionConfigForm(props: FunctionConfigFormProps) {
+
+    const { onBack, onSubmit, isSaving, serviceModel } = props;
+
+    const events = [
+        { name: 'onCreate', description: 'Triggered when a new file is created' },
+        { name: 'onDelete', description: 'Triggered when a file is deleted' }
+    ];
+
+    // Check if all functions with a specific metadata.label are enabled
+    const hasAvailableFunctions = (handlerType: string) => {
+        const functionsWithHandler = serviceModel.functions?.filter(fn => fn.metadata?.label === handlerType) || [];
+        if (functionsWithHandler.length === 0) return false;
+
+        // Return true if there's at least one non-enabled function
+        return functionsWithHandler.some(fn => !fn.enabled);
+    };
+
+    const handleEventClick = (handlerName: string) => {
+        // if (onBack) {
+        //     onBack();
+        // }
+
+        onSubmit && onSubmit(handlerName);
+    };
+
+    // Filter events to only show those with available functions
+    const availableEvents = events.filter(event => hasAvailableFunctions(event.name));
+
+    return (
+        <SidePanelBody>
+            <EditorContentColumn>
+                {availableEvents.map((event, index) => {
+                    const handleClick = () => handleEventClick(event.name);
+                    return (
+                        <ButtonCard
+                            key={event.name}
+                            id={`event-card-${index}`}
+                            title={event.name}
+                            tooltip={event.description}
+                            onClick={handleClick}
+                            disabled={isSaving}
+                        />
+                    );
+                })}
+            </EditorContentColumn>
+        </SidePanelBody>
+    );
+}
+
+export default FunctionConfigForm;
+