Fix issues in the MI Extension

workspaces/mi/mi-core/src/state-machine-types.ts

@@ -270,6 +270,7 @@ export interface VisualizerLocation {
     previousContext?: any;
     env?: { [key: string]: string | undefined };
     isLoading?: boolean;
+    isLegacyRuntime?: boolean;
 }
 
 export interface PopupVisualizerLocation extends VisualizerLocation {

workspaces/mi/mi-diagram/src/components/sidePanel/mediators/ModuleSuggestions.tsx

@@ -56,13 +56,16 @@ export function ModuleSuggestions(props: ModuleSuggestionProps) {
             setIsSearching(true);
             if (value) {
                 try {
+                    let data: any[] = [];
                     const runtimeVersion = await rpcClient.getMiDiagramRpcClient().getMIVersionFromPom();
                     const response = await fetch(`${process.env.MI_CONNECTOR_STORE_BACKEND_SEARCH.replace('${searchValue}', value).replace('${version}', runtimeVersion.version)}`);
-                    const data = await response.json();
+                    if (response.ok) {
+                        data = await response.json();
+                    }
                     setFilteredModules(data);
                 } catch (e) {
                     console.error("Error fetching modules", e);
-                    setFilteredModules(undefined);
+                    setFilteredModules([]);
                 }
             } else {
                 setFilteredModules([]);

workspaces/mi/mi-diagram/src/components/sidePanel/modules/ModulesList.tsx

@@ -161,8 +161,7 @@ export function Modules(props: ModuleProps) {
             .filter(([_, values]: [string, any]) =>
                 !localConnectors ||
                 !localConnectors.some((c: any) =>
-                    ((c.displayName ? c.displayName === values.connectorName : c.name.toLowerCase() === values.connectorName.toLowerCase())) &&
-                    (c.version === values.version.tagName)
+                    ((c.displayName ? c.displayName === values.connectorName : c.name.toLowerCase() === values.connectorName.toLowerCase()))
                 )
             )
             .sort(([, a], [, b]) => a.connectorRank - b.connectorRank);

workspaces/mi/mi-diagram/src/components/sidePanel/tryout/SetPayloads.tsx

@@ -49,9 +49,11 @@ export function SetPayloads(props: SetPayloadsProps) {
     const [requestsNames, setRequestsNames] = React.useState<string[]>([]);
     const [isAPI, setIsAPI] = React.useState(false);
     const [supportPayload, setSupportPayload] = React.useState(false);
+    const [showLegacyRuntimeError, setShowLegacyRuntimeError] = React.useState(false);
+    const showNotSupportedError = artifactModel?.tag === 'query';
 
     useEffect(() => {
-        rpcClient.getMiDiagramRpcClient().getInputPayloads({ documentUri, artifactModel }).then((res) => {
+        rpcClient.getMiDiagramRpcClient().getInputPayloads({ documentUri, artifactModel }).then(async (res) => {
             const requests = Array.isArray(res.payloads)
                 ? res.payloads.map(payload => ({
                     name: payload.name,
@@ -77,6 +79,7 @@ export function SetPayloads(props: SetPayloadsProps) {
             setIsLoading(false);
             setIsAPI(artifactModel.tag === 'resource');
             setSupportPayload(supportsRequestBody('methods' in artifactModel ? artifactModel.methods as string[] : ["POST"]));
+            setShowLegacyRuntimeError((await rpcClient.getVisualizerState()).isLegacyRuntime);
         });
     }, []);
 
@@ -252,33 +255,45 @@ export function SetPayloads(props: SetPayloadsProps) {
 
     return (
         <TryoutContainer>
-            <Typography
-                sx={{ padding: "10px", marginBottom: "10px", borderBottom: "1px solid var(--vscode-editorWidget-border)" }}
-                variant="body3">
-                {`Save Payload for Expression Completions and Mediator Tryouts`}
-            </Typography>
-            <AutoComplete
-                name="defaultPayload"
-                label="Default Payload"
-                items={requestsNames}
-                value={defaultPayload}
-                onValueChange={setDefaultPayload}
-                required={true}
-                allowItemCreate={false}
-            />
-            <ParameterManager
-                formData={parameterManagerConfig}
-                parameters={requests}
-                setParameters={setRequests}
-            />
+            {showNotSupportedError ? (
+                <Typography variant="body2" sx={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+                            <Icon name="warning" isCodicon /> Try-Out feature is not supported for this artifact type.
+                        </Typography>
+            ) : showLegacyRuntimeError ? (
+                <Typography variant="body2" sx={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+                            <Icon name="warning" isCodicon /> Please update your MI runtime to the latest version to use the tryout feature.
+                        </Typography>
+            ) : (
+                <>
+                    <Typography
+                    sx={{ padding: "10px", marginBottom: "10px", borderBottom: "1px solid var(--vscode-editorWidget-border)" }}
+                    variant="body3">
+                        {`Save Payload for Expression Completions and Mediator Tryouts`}
+                    </Typography>
+                    <AutoComplete
+                        name="defaultPayload"
+                        label="Default Payload"
+                        items={requestsNames}
+                        value={defaultPayload}
+                        onValueChange={setDefaultPayload}
+                        required={true}
+                        allowItemCreate={false}
+                    />
+                    <ParameterManager
+                        formData={parameterManagerConfig}
+                        parameters={requests}
+                        setParameters={setRequests}
+                    />
 
-            <FormActions>
-                <Button onClick={closeSidePanel} appearance="secondary">
-                    Cancel
-                </Button>
-                <Button onClick={onSavePayload} sx={{ marginRight: "10px" }}>
-                    Save
-                </Button>
-            </FormActions>
+                    <FormActions>
+                        <Button onClick={closeSidePanel} appearance="secondary">
+                            Cancel
+                        </Button>
+                        <Button onClick={onSavePayload} sx={{ marginRight: "10px" }}>
+                            Save
+                        </Button>
+                    </FormActions>
+                </>
+            )}
         </TryoutContainer>);
 };

workspaces/mi/mi-extension/README.md

@@ -2,19 +2,6 @@
 
 WSO2 Integrator: MI Visual Studio Code extension (MI for VSCode) is a comprehensive integration solution that simplifies your digital transformation journey. It streamlines connectivity among applications, services, data, and the cloud using a user-friendly low-code graphical designing experience and revolutionizes your integration development workflow. As an integration developer, you can execute all the development lifecycle phases using this tool. When your integration solutions are production-ready, you can easily push the artifacts to your continuous integration/continuous deployment pipeline.
 
-## Prerequisites
-
-You need the following to work with the MI for VS Code extension.
-
-- Java Development Kit (JDK)
-- WSO2 Integrator: MI runtime
-
-If these are not installed on your local machine, the WSO2 Integrator: MI for VS Code extension will automatically prompt you to download and configure them during the project creation step, depending on the project runtime version.
-
-If a different JDK or WSO2 MI version is installed on your local machine, you'll be prompted to download the required versions.
-
-If the required JDK and WSO2 MI versions are already installed, you can directly configure the Java Home and MI Home paths in this step.
-
 ## Get Started
 
 1. Launch VS Code with the WSO2 Integrator: MI for Visual Studio Code (MI for VS Code) extension installed. When the extension is installed properly, you can see the WSO2 Integrator: MI icon in the Activity Bar of the VS Code editor.

workspaces/mi/mi-extension/src/RPCLayer.ts

@@ -100,6 +100,7 @@ async function getContext(projectUri: string): Promise<VisualizerLocation> {
             dataMapperProps: context.dataMapperProps,
             errors: context.errors,
             isLoading: context.isLoading,
+            isLegacyRuntime: context.isLegacyRuntime,
             env: {
                 MI_AUTH_ORG: process.env.MI_AUTH_ORG || '',
                 MI_AUTH_CLIENT_ID: process.env.MI_AUTH_CLIENT_ID || '',

workspaces/mi/mi-extension/src/debugger/debugHelper.ts

@@ -154,26 +154,28 @@ export async function executeCopyTask(task: vscode.Task) {
 export async function executeBuildTask(projectUri: string, serverPath: string, shouldCopyTarget: boolean = true, postBuildTask?: Function) {
     return new Promise<void>(async (resolve, reject) => {
 
-        const isEqual = await compareFilesByMD5(path.join(serverPath, "conf", "deployment.toml"),
-            path.join(projectUri, "deployment", "deployment.toml"));
-        if (!isEqual) {
-            const copyConf = await vscode.window.showWarningMessage(
-                'Deployment configurations in the runtime is different from the project. How do you want to proceed?',
-                { modal: true },
-                "Use Project Configurations", "Use Server Configurations"
-            );
-            if (copyConf === 'Use Project Configurations') {
-                fs.copyFileSync(path.join(serverPath, "conf", "deployment.toml"), path.join(serverPath, "conf", "deployment-backup.toml"));
-                fs.copyFileSync(path.join(projectUri, "deployment", "deployment.toml"), path.join(serverPath, "conf", "deployment.toml"));
-                vscode.window.showInformationMessage("A backup of the server configuration is stored at conf/deployment-backup.toml.");
-            } else if (copyConf === 'Use Server Configurations') {
-                fs.copyFileSync(path.join(serverPath, "conf", "deployment.toml"), path.join(projectUri, "deployment", "deployment.toml"));
-                DebuggerConfig.setConfigPortOffset(projectUri);
-            } else {
-                reject('Deployment configurations in the project should be as the same as the runtime.');
-                return;
+        if (shouldCopyTarget) {
+            const isEqual = await compareFilesByMD5(path.join(serverPath, "conf", "deployment.toml"),
+                path.join(projectUri, "deployment", "deployment.toml"));
+            if (!isEqual) {
+                const copyConf = await vscode.window.showWarningMessage(
+                    'Deployment configurations in the runtime is different from the project. How do you want to proceed?',
+                    { modal: true },
+                    "Use Project Configurations", "Use Server Configurations"
+                );
+                if (copyConf === 'Use Project Configurations') {
+                    fs.copyFileSync(path.join(serverPath, "conf", "deployment.toml"), path.join(serverPath, "conf", "deployment-backup.toml"));
+                    fs.copyFileSync(path.join(projectUri, "deployment", "deployment.toml"), path.join(serverPath, "conf", "deployment.toml"));
+                    vscode.window.showInformationMessage("A backup of the server configuration is stored at conf/deployment-backup.toml.");
+                } else if (copyConf === 'Use Server Configurations') {
+                    fs.copyFileSync(path.join(serverPath, "conf", "deployment.toml"), path.join(projectUri, "deployment", "deployment.toml"));
+                    DebuggerConfig.setConfigPortOffset(projectUri);
+                } else {
+                    reject('Deployment configurations in the project should be as the same as the runtime.');
+                    return;
+                }
             }
-        }
+      }
 
         const buildCommand = getBuildCommand(projectUri);
         const envVariables = {
@@ -187,6 +189,16 @@ export async function executeBuildTask(projectUri: string, serverPath: string, s
             serverLog(data.toString('utf8'));
         });
 
+        if (shouldCopyTarget) {
+            buildProcess.on('close', async (code) => {
+                if (code === 0) {
+                    vscode.window.showInformationMessage('Project build was successful');
+                } else {
+                    vscode.window.showErrorMessage('Failed to build integration project.');
+                }
+            });
+        }
+
         buildProcess.stderr.on('data', (data) => {
             serverLog(`Build error:\n${data.toString('utf8')}`);
         });

workspaces/mi/mi-extension/src/debugger/debugger.ts

@@ -620,18 +620,24 @@ export class Debugger extends EventEmitter {
     }
 
     public async sendPropertiesCommand(): Promise<JSON[]> {
-        const contextList = ["axis2", "axis2-client", "transport", "operation", "synapse"];
+        const contextList = ["axis2", "axis2-client", "transport", "operation", "synapse", "variable"];
         const variables: JSON[] = [];
         const propertyMapping = {
             "axis2Transport-properties": "Transport Scope Properties",
             "axis2Operation-properties": "Operation Scope Properties",
             "axis2Client-properties": "Axis2-Client Scope Properties",
             "axis2-properties": "Axis2 Scope Properties",
-            "synapse-properties": "Synapse Scope Properties"
+            "synapse-properties": "Synapse Scope Properties",
+            "message-variables": "Variables"
         };
 
         for (const context of contextList) {
-            let propertiesCommand: any = { "command": "get", "command-argument": "properties", "context": context };
+            let propertiesCommand: any;
+            if (context === "variable") {
+                propertiesCommand = { "command": "get", "command-argument": "variables", "context": context};
+            } else {
+                propertiesCommand = { "command": "get", "command-argument": "properties", "context": context };
+            }
             try {
                 const response = await this.sendRequest(JSON.stringify(propertiesCommand));
                 const jsonResponse = JSON.parse(response);

workspaces/mi/mi-extension/src/rpc-managers/mi-diagram/rpc-handler.ts

@@ -319,7 +319,7 @@ import {
     updatePropertiesInArtifactXML,
     getPropertiesFromArtifactXML,
     formatPomFile
-    // getBackendRootUrl - REMOVED: Backend URLs deprecated, all AI features use local LLM
+    // getBackendRootUrl - REMOVED: Backend URLs deprecated, all AI features use local LLM,
 } from "@wso2/mi-core";
 import { Messenger } from "vscode-messenger";
 import { MiDiagramRpcManager } from "./rpc-manager";

workspaces/mi/mi-extension/src/rpc-managers/mi-diagram/rpc-manager.ts

@@ -5420,7 +5420,7 @@ ${keyValuesXML}`;
         const langClient = getStateMachine(this.projectUri).context().langClient!;
         let response;
         if (params.isRuntimeService) {
-            const versionedUrl = exposeVersionedServices(this.projectUri);
+            const versionedUrl = await exposeVersionedServices(this.projectUri);
             response = await langClient.swaggerFromAPI({ apiPath: params.apiPath, port: DebuggerConfig.getServerPort(), projectPath: versionedUrl ? this.projectUri : "", ...(fs.existsSync(swaggerPath) && { swaggerPath: swaggerPath }) });
         } else {
             response = await langClient.swaggerFromAPI({ apiPath: params.apiPath, ...(fs.existsSync(swaggerPath) && { swaggerPath: swaggerPath }) });
@@ -6121,7 +6121,13 @@ ${keyValuesXML}`;
     }
 }
 
-function exposeVersionedServices(projectUri: string): boolean {
+async function exposeVersionedServices(projectUri: string): Promise<boolean> {
+    const langClient = getStateMachine(projectUri).context().langClient!;
+    const projectDetailsRes = await langClient?.getProjectDetails();
+    const isVersionedDeploymentEnabled = projectDetailsRes?.buildDetails?.versionedDeployment?.value;
+    if (!isVersionedDeploymentEnabled) {
+        return false;
+    }
     const config = vscode.workspace.getConfiguration('MI', vscode.Uri.file(projectUri));
     const serverPath = config.get<string>('SERVER_PATH') || undefined;
     const configPath = serverPath ? path.join(serverPath, 'conf', 'deployment.toml') : '';

workspaces/mi/mi-extension/src/stateMachine.ts

@@ -18,7 +18,7 @@ import { ExtendedLanguageClient } from './lang-client/ExtendedLanguageClient';
 import { VisualizerWebview, webviews } from './visualizer/webview';
 import { RPCLayer } from './RPCLayer';
 import { history } from './history/activator';
-import { COMMANDS, MI_PROJECT_EXPLORER_VIEW_ID, WI_EXTENSION_ID, WI_PROJECT_EXPLORER_VIEW_ID } from './constants';
+import { COMMANDS, MI_PROJECT_EXPLORER_VIEW_ID, WI_EXTENSION_ID, WI_PROJECT_EXPLORER_VIEW_ID, RUNTIME_VERSION_440 } from './constants';
 import { activateProjectExplorer } from './project-explorer/activate';
 import { MockService, STNode, UnitTest, Task, InboundEndpoint } from '../../syntax-tree/lib/src';
 import { log, logDebug } from './util/logger';
@@ -27,7 +27,7 @@ import { fileURLToPath } from 'url';
 import path = require('path');
 import { activateTestExplorer } from './test-explorer/activator';
 import { DMProject } from './datamapper/DMProject';
-import { setupEnvironment } from './util/onboardingUtils';
+import { setupEnvironment, getMIVersionFromPom, compareVersions } from './util/onboardingUtils';
 import { getPopupStateMachine } from './stateMachinePopup';
 import { askForProject } from './util/workspace';
 import { containsMultiModuleNatureInProjectFile, containsMultiModuleNatureInPomFile, findMultiModuleProjectsInWorkspaceDir } from './util/migrationUtils';
@@ -37,6 +37,7 @@ interface MachineContext extends VisualizerLocation {
     langClient: ExtendedLanguageClient | null;
     dependenciesResolved?: boolean;
     isInWI: boolean;
+    isLegacyRuntime?: boolean;
 }
 
 const stateMachine = createMachine<MachineContext>({
@@ -96,7 +97,10 @@ const stateMachine = createMachine<MachineContext>({
                             view: (context, event) => event.data.view,
                             customProps: (context, event) => event.data.customProps,
                             projectUri: (context, event) => event.data.projectUri,
-                            displayOverview: (context, event) => event.data.displayOverview
+                            isOldProject: (context, event) => event.data.isOldProject,
+                            displayOverview: (context, event) => event.data.displayOverview,
+                            isLegacyRuntime: (context, event) => event.data.isLegacyRuntime
+
                         })
                     },
                     {
@@ -907,6 +911,9 @@ async function checkIfMiProject(projectUri: string, view: MACHINE_VIEW = MACHINE
         console.log(`Current workspace path: ${projectUri}`);
     }
 
+    const runtimeVersion = await getMIVersionFromPom(projectUri);
+    const isLegacyRuntime = runtimeVersion ? compareVersions(runtimeVersion, RUNTIME_VERSION_440) < 0 : true;
+
     console.log(`Project detection completed for path: ${projectUri} at ${new Date().toLocaleTimeString()}`);
     return {
         isProject,
@@ -916,7 +923,8 @@ async function checkIfMiProject(projectUri: string, view: MACHINE_VIEW = MACHINE
         projectUri, // Return the path of the detected project
         view,
         customProps,
-        isEnvironmentSetUp
+        isEnvironmentSetUp,
+        isLegacyRuntime
     };
 }
 

workspaces/mi/mi-extension/src/util/index.ts

@@ -178,6 +178,7 @@ export function createGitignoreFile(targetPath: string): Promise<void> {
 		// Common .gitignore patterns
 		const gitignoreContent = `
 .wso2mi/
+.env
 ##############################
 ## Java
 ##############################
@@ -204,6 +205,8 @@ dependency-reduced-pom.xml
 buildNumber.properties
 .mvn/timing.properties
 .mvn/wrapper/maven-wrapper.jar
+mvnw
+mvnw.cmd
 
 ##############################
 ## Visual Studio Code

workspaces/mi/mi-visualizer/src/views/Forms/AddressEndpointForm.tsx

@@ -240,7 +240,8 @@ export function AddressEndpointWizard(props: AddressEndpointWizardProps) {
                 id: 0,
                 type: "TextField",
                 label: "Parameter",
-                defaultValue: "parameter_value",
+                placeholder: "parameter_value",
+                defaultValue: "",
                 isRequired: true
             }]
     }

workspaces/mi/mi-visualizer/src/views/Forms/ConnectionForm/index.tsx

@@ -235,6 +235,7 @@ export function ConnectionWizard(props: ConnectionStoreProps) {
         } catch (e) {
             setStoreConnectors(null);
             console.error("Error fetching connectors", e);
+            rpcClient.getMiVisualizerRpcClient().showNotification({message: "Error occurred while fetching connectors", type: "error"});
         }
         setIsFetchingStoreConnectors(false);
     };