Skip to content

Add a Manage Query view to Data Services #1030

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add a Manage Query view to Data Services #1030

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
57d629f
Add a manage query view to dataservices
ChinthakaJ98 Dec 2, 2025
3590818
Merge branch 'main' into revamp-dss-query
ChinthakaJ98 Dec 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions workspaces/common-libs/service-designer/src/definitions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,17 @@ export interface Resource {
additionalActions?: Item[]; // Additional actions for the resource
}

export interface Query {
name: string;
methods: any[];
isOpen?: boolean;
expandable?: boolean;
additionalInfo?: JSX.Element; // Additional information to be displayed in the resource expanded view
additionalActions?: Item[]; // Additional actions for the resource
params?: ParameterConfig[];
advancedParams?: Map<string, ParameterConfig>;
}

export interface PathConfig {
path: string;
resources: ParameterConfig[];
Expand Down
3 changes: 2 additions & 1 deletion workspaces/mi/mi-core/src/state-machine-types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,8 @@ export enum MACHINE_VIEW {
DefaultEndpointForm = "Default Endpoint Form",
DataServiceForm = "Data Service Form",
DssDataSourceForm = "DSS Data Source Form",
DSSServiceDesigner = "Data Service Designer",
DSSResourceServiceDesigner = "DSS Resource Designer",
DSSQueryServiceDesigner = "DSS Query Designer",
ProjectCreationForm = "Project Creation Form",
ImportProjectForm = "Import Project Form",
LocalEntryForm = "Local Entry Form",
Expand Down
8 changes: 5 additions & 3 deletions workspaces/mi/mi-diagram/src/components/Form/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,11 +139,13 @@ export const getParamManagerFromValues = (values: any[], keyIndex?: number, valu

if (typeof value === 'object' && value !== null) {
const paramValues = getParamValues(value);
const key = keyIndex != undefined && keyIndex >= 0 ? typeof value[keyIndex] === 'object' ? value[keyIndex].value : value[keyIndex] : index + 1;
return {
id: index,
key: keyIndex != undefined && keyIndex >= 0 ? typeof value[keyIndex] === 'object' ? value[keyIndex].value : value[keyIndex] : index + 1,
value: typeof value[valueIndex] === 'object' ? value[valueIndex].value : value[valueIndex],
icon: 'query', paramValues
key: key,
value: (key === "Query" && valueIndex == 4) ? (typeof value[1] === 'object' ? value[1].value : value[1]) :
(typeof value[valueIndex] === 'object' ? value[valueIndex].value : value[valueIndex]),
paramValues
Comment on lines +142 to +148
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Refactor special-case Query logic and extract magic values to constants.

The conditional logic at lines 146-147 introduces a hardcoded special case for "Query" with magic numbers (4 and 1) that lack explanation:

value: (key === "Query" && valueIndex == 4) ? (typeof value[1] === 'object' ? value[1].value : value[1]) : 
    (typeof value[valueIndex] === 'object' ? value[valueIndex].value : value[valueIndex])

Issues identified:

  • The string literal "Query" and numeric constants 4 and 1 are hardcoded without documentation
  • Using loose equality == instead of strict === for valueIndex comparison
  • No explanation for why Query requires different indexing logic (value[1] vs value[valueIndex])
  • This special case makes the function harder to maintain and understand

Based on learnings, constants should be defined in src/resources/constants.ts.

Consider this refactor:

Step 1: Define constants in src/resources/constants.ts:

export const QUERY_KEY = "Query";
export const QUERY_VALUE_INDEX = 4;
export const QUERY_ALTERNATIVE_INDEX = 1;

Step 2: Apply this diff:

+import { QUERY_KEY, QUERY_VALUE_INDEX, QUERY_ALTERNATIVE_INDEX } from '../../resources/constants';
+
 export const getParamManagerFromValues = (values: any[], keyIndex?: number, valueIndex: number = 1): any => {
     // ...
     const paramValues = values.map((value: any, index: number) => {
         if (typeof value === 'object' && value !== null) {
             const paramValues = getParamValues(value);
             const key = keyIndex != undefined && keyIndex >= 0 ? typeof value[keyIndex] === 'object' ? value[keyIndex].value : value[keyIndex] : index + 1;
+            // Special handling for Query key: use alternative index for value lookup
+            const shouldUseAlternativeIndex = key === QUERY_KEY && valueIndex === QUERY_VALUE_INDEX;
+            const valueIndexToUse = shouldUseAlternativeIndex ? QUERY_ALTERNATIVE_INDEX : valueIndex;
             return {
                 id: index,
                 key: key,
-                value: (key === "Query" && valueIndex == 4) ? (typeof value[1] === 'object' ? value[1].value : value[1]) : 
-                    (typeof value[valueIndex] === 'object' ? value[valueIndex].value : value[valueIndex]),
+                value: typeof value[valueIndexToUse] === 'object' ? value[valueIndexToUse].value : value[valueIndexToUse],
                 paramValues
             };
         }
     });
 }

Step 3: Add a comment or documentation explaining why Query keys require special indexing behavior.

🤖 Prompt for AI Agents 
In workspaces/mi/mi-diagram/src/components/Form/common.ts around lines 142 to
148, replace the hardcoded special-case expression that checks for "Query" and
uses magic numbers (4 and 1) with a clear, constant-driven implementation:
import QUERY_KEY, QUERY_VALUE_INDEX, and QUERY_ALTERNATIVE_INDEX from
src/resources/constants.ts, use strict equality (===) for valueIndex comparison,
and select the alternate index via those constants instead of literals; also add
a brief inline comment explaining why the Query key requires the alternate
indexing behavior so future maintainers understand the exception.

};
} else {
return { value };
Expand Down
2 changes: 1 addition & 1 deletion workspaces/mi/mi-diagram/src/components/nodes/ReferenceNode/ReferenceNodeModel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export class ReferenceNodeModel extends BaseNodeModel {
rpcClient.getMiVisualizerRpcClient().openView({
type: EVENT_TYPE.OPEN_VIEW,
location: {
view: MACHINE_VIEW.DSSServiceDesigner,
view: MACHINE_VIEW.DSSResourceServiceDesigner,
documentUri: uri
}
});
Expand Down
22 changes: 5 additions & 17 deletions workspaces/mi/mi-diagram/src/components/sidePanel/dataServices/query.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@ const QueryForm = (props: AddMediatorProps) => {
returnGeneratedKeys: sidePanelContext?.formValues?.returnGeneratedKeys || false,
keyColumns: sidePanelContext?.formValues?.keyColumns || "",
returnUpdatedRowCount: sidePanelContext?.formValues?.returnUpdatedRowCount || false,
forceStoredProc: sidePanelContext?.formValues?.forceStoredProc || false,
forceJdbcBatchRequests: sidePanelContext?.formValues?.forceJdbcBatchRequests || false,
forceStoredProc: sidePanelContext?.formValues?.forceStoredProc === "true" || false,
forceJDBCBatchRequests: sidePanelContext?.formValues?.forceJDBCBatchRequests === "true" || false,
});
setIsLoading(false);
}, []);
Expand All @@ -89,7 +89,7 @@ const QueryForm = (props: AddMediatorProps) => {
queryProperties.maxFieldSize = values.maxFieldSize;
queryProperties.maxRows = values.maxRows;
queryProperties.forceStoredProc = values.forceStoredProc;
queryProperties.forceJDBCBatchRequests = values.forceJdbcBatchRequests;
queryProperties.forceJDBCBatchRequests = values.forceJDBCBatchRequests;
queryProperties = Object.entries(queryProperties)
.filter(([_, value]) => value !== "").map(([key, value]) => ({ key, value }));
const updatedQuery = sidePanelContext?.formValues?.queryObject;
Expand Down Expand Up @@ -184,18 +184,6 @@ const QueryForm = (props: AddMediatorProps) => {
<>
<Typography sx={{ padding: "10px 20px", borderBottom: "1px solid var(--vscode-editorWidget-border)" }} variant="body3"></Typography>
<div style={{ padding: "20px" }}>

<Field>
<Controller
name="queryId"
control={control}
render={({ field }) => (
<TextField {...field} label="Query ID" size={50} placeholder="" />
)}
/>
{errors.queryId && <Error>{errors.queryId.message.toString()}</Error>}
</Field>

<Field>
<Controller
name="datasource"
Expand Down Expand Up @@ -335,13 +323,13 @@ const QueryForm = (props: AddMediatorProps) => {

<Field>
<Controller
name="forceJdbcBatchRequests"
name="forceJDBCBatchRequests"
control={control}
render={({ field }) => (
<VSCodeCheckbox {...field} type="checkbox" checked={field.value} onChange={(e: any) => { field.onChange(e.target.checked) }}>Force JDBC Batch Requests</VSCodeCheckbox>
)}
/>
{errors.forceJdbcBatchRequests && <Error>{errors.forceJdbcBatchRequests.message.toString()}</Error>}
{errors.forceJDBCBatchRequests && <Error>{errors.forceJDBCBatchRequests.message.toString()}</Error>}
</Field>

</ComponentCard>
Expand Down
2 changes: 1 addition & 1 deletion workspaces/mi/mi-extension/src/project-explorer/activate.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,7 +383,7 @@ export async function activateProjectExplorer(treeviewId: string, context: Exten
commands.registerCommand(COMMANDS.OPEN_DSS_SERVICE_DESIGNER, async (entry: ProjectExplorerEntry | Uri) => {
revealWebviewPanel(false);
const documentUri = entry instanceof ProjectExplorerEntry ? entry.info?.path : entry.fsPath;
openView(EVENT_TYPE.OPEN_VIEW, { view: MACHINE_VIEW.DSSServiceDesigner, documentUri });
openView(EVENT_TYPE.OPEN_VIEW, { view: MACHINE_VIEW.DSSResourceServiceDesigner, documentUri });
});

commands.registerCommand(COMMANDS.EDIT_K8_CONFIGURATION_COMMAND, async () => {
Expand Down
20 changes: 10 additions & 10 deletions ...aces/mi/mi-extension/src/test/e2e-playwright-tests/components/ArtifactTest/DataService.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,9 @@ export class DataService {
await projectExplorer.goToOverview("testProject");
await projectExplorer.findItem(['Project testProject', 'Data Services', prevName], true);

const webView = await switchToIFrame('Data Service Designer', this._page);
const webView = await switchToIFrame('DSS Resource Designer', this._page);
if (!webView) {
throw new Error("Failed to switch to Data Service Designer iframe");
throw new Error("Failed to switch to DSS Resource Designer iframe");
}
const frame = webView.locator('div#root');
await frame.getByTestId('edit-button').getByLabel('Icon Button').click();
Expand Down Expand Up @@ -156,9 +156,9 @@ export class DataService {
await projectExplorer.goToOverview("testProject");
await projectExplorer.findItem(['Project testProject', 'Data Services', prevName], true);

const webView = await switchToIFrame('Data Service Designer', this._page);
const webView = await switchToIFrame('DSS Resource Designer', this._page);
if (!webView) {
throw new Error("Failed to switch to Data Service Designer iframe");
throw new Error("Failed to switch to DSS Resource Designer iframe");
}
const frame = webView.locator('div#root');
await frame.waitFor();
Expand Down Expand Up @@ -292,9 +292,9 @@ export class DataService {
await projectExplorer.goToOverview("testProject");
await projectExplorer.findItem(['Project testProject', 'Data Services', prevName], true);

const webView = await switchToIFrame('Data Service Designer', this._page);
const webView = await switchToIFrame('DSS Resource Designer', this._page);
if (!webView) {
throw new Error("Failed to switch to Data Service Designer iframe");
throw new Error("Failed to switch to DSS Resource Designer iframe");
}
const frame = webView.locator('div#root');
await frame.waitFor();
Expand Down Expand Up @@ -413,9 +413,9 @@ export class DataService {
await projectExplorer.goToOverview("testProject");
await projectExplorer.findItem(['Project testProject', 'Data Services', prevName], true);

const webView = await switchToIFrame('Data Service Designer', this._page);
const webView = await switchToIFrame('DSS Resource Designer', this._page);
if (!webView) {
throw new Error("Failed to switch to Data Service Designer iframe");
throw new Error("Failed to switch to DSS Resource Designer iframe");
}
const frame = webView.locator('div#root');
await frame.waitFor();
Expand Down Expand Up @@ -514,9 +514,9 @@ export class DataService {
await projectExplorer.goToOverview("testProject");
await projectExplorer.findItem(['Project testProject', 'Data Services', prevName], true);

const webView = await switchToIFrame('Data Service Designer', this._page);
const webView = await switchToIFrame('DSS Resource Designer', this._page);
if (!webView) {
throw new Error("Failed to switch to Data Service Designer iframe");
throw new Error("Failed to switch to DSS Resource Designer iframe");
}
const frame = webView.locator('div#root');
await frame.waitFor();
Expand Down
10 changes: 7 additions & 3 deletions workspaces/mi/mi-visualizer/src/MainPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import React, { useEffect, useState, Suspense } from 'react';
import { POPUP_EVENT_TYPE, PopupMachineStateValue, MACHINE_VIEW, Platform, VisualizerLocation } from '@wso2/mi-core';
import { useVisualizerContext } from '@wso2/mi-rpc-client';
import { ServiceDesignerView } from './views/ServiceDesigner';
import { DSSServiceDesignerView } from './views/Forms/DataServiceForm/ServiceDesigner';
import { DSSResourceServiceDesignerView } from './views/Forms/DataServiceForm/ResourceServiceDesigner';
import { DSSQueryServiceDesignerView } from './views/Forms/DataServiceForm/QueryServiceDesigner';
import { APIWizard, APIWizardProps } from './views/Forms/APIform';
import { EndpointWizard } from './views/Forms/EndpointForm';
import { SequenceWizard } from './views/Forms/SequenceForm';
Expand Down Expand Up @@ -376,8 +377,11 @@ const MainPanel = (props: MainPanelProps) => {
case MACHINE_VIEW.MockService:
setViewComponent(<MockServiceForm filePath={visualizerState.documentUri} stNode={visualizerState.stNode as MockService} isWindows={isWindows} />);
break;
case MACHINE_VIEW.DSSServiceDesigner:
setViewComponent(<DSSServiceDesignerView syntaxTree={visualizerState.stNode} documentUri={visualizerState.documentUri} />);
case MACHINE_VIEW.DSSResourceServiceDesigner:
setViewComponent(<DSSResourceServiceDesignerView syntaxTree={visualizerState.stNode} documentUri={visualizerState.documentUri} />);
break;
case MACHINE_VIEW.DSSQueryServiceDesigner:
setViewComponent(<DSSQueryServiceDesignerView syntaxTree={visualizerState.stNode} documentUri={visualizerState.documentUri} />);
break;
case MACHINE_VIEW.Welcome:
setViewComponent(<WelcomeView />);
Expand Down
4 changes: 4 additions & 0 deletions workspaces/mi/mi-visualizer/src/constants/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@ export const DSS_TEMPLATES = {
EDIT_OPERATION: "edit-dss-operation",
EDIT_DESCRIPTION: "edit-dss-description",
ADD_QUERY: "add-dss-query",
ADD_FULL_QUERY: "add-full-dss-query",
UPDATE_QUERY_CONFIG: "update-query-config",
UPDATE_QUERY: "update-query",
EDIT_QUERY_REFERENCE: "edit-query-reference"
} as const;

export enum EndpointTypes {
Expand Down
Loading
Loading