From 61aeef26b4dbd19ef513dc5650b25f18dd3189e3 Mon Sep 17 00:00:00 2001 From: ChamodA Date: Mon, 23 Feb 2026 14:10:09 +0530 Subject: [PATCH 1/5] Update getCategoryActions calls to include title parameter for current integration actions --- .../ballerina-side-panel/src/components/NodeList/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx index dfeac94243..159d4f02a3 100644 --- a/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx +++ b/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx @@ -641,9 +641,9 @@ export function NodeList(props: NodeListProps) { // If subcategory is inside "Current Workspace", show "Current Integration" actions instead of // the subcategory title when the subcategory referes to the current integration const categoryActions = parentCategoryTitle === "Current Workspace" ? - ( group.title?.includes("(current)") ? getCategoryActions("Current Integration") : getCategoryActions(group.title)) + ( group.title?.includes("(current)") ? getCategoryActions("Current Integration", title) : getCategoryActions(group.title, title)) : - getCategoryActions(group.title); + getCategoryActions(group.title, title); const config = categoryConfig[group.title] || { hasBackground: true }; const shouldShowSeparator = config.showSeparatorBefore; From bd46697270f7da5d1edf3219b6415fbaed2230ed Mon Sep 17 00:00:00 2001 From: ChamodA Date: Mon, 23 Feb 2026 17:05:18 +0530 Subject: [PATCH 2/5] Refactor InputNode and PayloadWidget components for improved functionality and styling --- .../Diagram/Node/Input/InputNode.ts | 4 ++-- .../Diagram/Node/Input/InputNodeWidget.tsx | 5 ++--- .../Node/ObjectOutput/ObjectOutputWidget.tsx | 4 ++-- .../Diagram/Node/commons/PayloadWidget.tsx | 8 ++++---- .../components/Diagram/utils/common-utils.ts | 9 ++++++--- .../data-mapper/src/components/styles.ts | 19 +++++++++---------- 6 files changed, 25 insertions(+), 24 deletions(-) diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNode.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNode.ts index 2f224d5406..1157bc2791 100644 --- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNode.ts +++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNode.ts @@ -127,7 +127,7 @@ export class InputNode extends DataMapperNodeModel { focusedFieldFQNs }); if (!parentPort.attributes.collapsed){ - this.numberOfFields += 2; // This is for converting arrow and additional gap + this.numberOfFields += 1; // This is for converting arrow and additional gap } } else if (this.filteredInputType.fields) { const fields = this.filteredInputType.fields?.filter(f => !!f); @@ -146,7 +146,7 @@ export class InputNode extends DataMapperNodeModel { }); } } else if (!parentPort.attributes.collapsed) { - this.numberOfFields += 6; // This is for payload widget and arrow + this.numberOfFields += 5; // This is for payload widget and arrow } } else { await this.addPortsForInputField({ diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx index e84dbc667e..bb5cdb21e5 100644 --- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx +++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx @@ -167,7 +167,7 @@ export function InputNodeWidget(props: InputNodeWidgetProps) { await context.createConvertedVariable(dmType.name, true, dmType.typeName)} /> )} @@ -217,10 +217,9 @@ export function InputNodeWidget(props: InputNodeWidgetProps) { } {expanded && isConvertibleType && !dmType.convertedField && <> - await context.createConvertedVariable(headerLabel, true, undefined, dmType.typeName)} - typeName={dmType.typeName} + typeName={dmType.typeName.toUpperCase()} /> } diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx index 874f423bf8..82b2777feb 100644 --- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx +++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx @@ -166,7 +166,7 @@ export function ObjectOutputWidget(props: ObjectOutputWidgetProps) { await context.createConvertedVariable(outputType.name, false, outputType.typeName)} /> )} @@ -213,7 +213,7 @@ export function ObjectOutputWidget(props: ObjectOutputWidgetProps) { await context.createConvertedVariable(valueLabel, false, undefined, outputType.typeName)} - typeName={outputType.typeName} + typeName={outputType.typeName.toUpperCase()} /> } diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/PayloadWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/PayloadWidget.tsx index 93f7a083fe..aa7cb1b06a 100644 --- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/PayloadWidget.tsx +++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/PayloadWidget.tsx @@ -22,7 +22,7 @@ import { useIONodesStyles } from "../../../styles"; export interface PayloadWidgetProps { onClick: () => void | Promise; - typeName?: string; + typeName: string; } export function PayloadWidget(props: PayloadWidgetProps) { @@ -46,14 +46,14 @@ export function PayloadWidget(props: PayloadWidgetProps) { className={classes.payloadWidget} onClick={!inProgress ? handleOnClick : undefined} > -

{`Please provide a sample ${typeName} payload to construct the ${typeName} structure to create mappings`}

+
{`Structure is not defined. Please provide a sample ${typeName} to create the structure`}
{inProgress ? ( ) : ( - + )} -

{`Add sample ${typeName}`}

+

{`Add Sample ${typeName}`}

); diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/utils/common-utils.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/common-utils.ts index 61070964a4..5fbaacd1f0 100644 --- a/workspaces/ballerina/data-mapper/src/components/Diagram/utils/common-utils.ts +++ b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/common-utils.ts @@ -327,9 +327,12 @@ export function handleExpand(id: string, expanded: boolean) { } export function isExpandable(field: IOType): boolean { - return field?.kind === TypeKind.Record || - field?.kind === TypeKind.Array || - field?.kind === TypeKind.Enum; + const fieldKind = field?.kind; + return fieldKind === TypeKind.Record || + fieldKind === TypeKind.Array || + fieldKind === TypeKind.Json || + fieldKind === TypeKind.Xml || + fieldKind === TypeKind.Enum; } export function getTargetField(viewId: string, outputId: string){ diff --git a/workspaces/ballerina/data-mapper/src/components/styles.ts b/workspaces/ballerina/data-mapper/src/components/styles.ts index 9d4bd3fdd4..24aacf056a 100644 --- a/workspaces/ballerina/data-mapper/src/components/styles.ts +++ b/workspaces/ballerina/data-mapper/src/components/styles.ts @@ -334,6 +334,7 @@ export const useIONodesStyles = () => ({ }), payloadWidget: css({ width: `${IO_NODE_DEFAULT_WIDTH}px`, + height: `${IO_NODE_FIELD_HEIGHT * 5}px`, border: "2.5px dashed var(--vscode-dropdown-border)", borderRadius: "6px", background: "var(--vscode-sideBar-background)", @@ -347,22 +348,20 @@ export const useIONodesStyles = () => ({ borderColor: "var(--vscode-focusBorder)" } }), - payloadWidgetMessage: css({ - color: "var(--vscode-descriptionForeground)", + payloadNote: css({ fontSize: "13px", - fontFamily: "GilmerRegular", - textAlign: "left", - width: "100%", - margin: "0 0 16px 0", - borderLeft: "3px solid var(--vscode-descriptionForeground)", - paddingLeft: "10px", - lineHeight: "1.5" + color: "var(--vscode-descriptionForeground)", + padding: "8px 10px", + backgroundColor: "var(--vscode-textBlockQuote-background)", + borderLeft: "3px solid var(--vscode-textBlockQuote-border)", + borderRadius: "0 4px 4px 0" }), payloadWidgetAction: css({ display: "flex", flexDirection: "column", alignItems: "center", - gap: "6px", + gap: "20px", + marginTop: "28px", color: "var(--vscode-descriptionForeground)" }), payloadWidgetActionLabel: css({ From f5e7e6ab6953709ab23c157fc04b54f1c99689b7 Mon Sep 17 00:00:00 2001 From: ChamodA Date: Tue, 24 Feb 2026 12:07:31 +0530 Subject: [PATCH 3/5] Add SVG icons for arrow-down-right and arrow-left-up --- .../common-libs/font-wso2-vscode/src/icons/arrow-down-right.svg | 1 + .../common-libs/font-wso2-vscode/src/icons/arrow-left-up.svg | 1 + 2 files changed, 2 insertions(+) create mode 100644 workspaces/common-libs/font-wso2-vscode/src/icons/arrow-down-right.svg create mode 100644 workspaces/common-libs/font-wso2-vscode/src/icons/arrow-left-up.svg diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/arrow-down-right.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/arrow-down-right.svg new file mode 100644 index 0000000000..76b20d9a93 --- /dev/null +++ b/workspaces/common-libs/font-wso2-vscode/src/icons/arrow-down-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/arrow-left-up.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/arrow-left-up.svg new file mode 100644 index 0000000000..9f790a1785 --- /dev/null +++ b/workspaces/common-libs/font-wso2-vscode/src/icons/arrow-left-up.svg @@ -0,0 +1 @@ + \ No newline at end of file From 0a00bafaf617b4c59912f91581fcc8502f74ad08 Mon Sep 17 00:00:00 2001 From: ChamodA Date: Tue, 24 Feb 2026 12:08:55 +0530 Subject: [PATCH 4/5] Refactor InputNode and ObjectOutputWidget components to remove arrows and improve gap handling --- .../Diagram/Node/Input/InputNode.ts | 4 +- .../Diagram/Node/Input/InputNodeWidget.tsx | 54 ++++++++------- .../Node/ObjectOutput/ObjectOutputWidget.tsx | 69 ++++++++++--------- 3 files changed, 69 insertions(+), 58 deletions(-) diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNode.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNode.ts index 1157bc2791..c36d0ce31c 100644 --- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNode.ts +++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNode.ts @@ -127,7 +127,7 @@ export class InputNode extends DataMapperNodeModel { focusedFieldFQNs }); if (!parentPort.attributes.collapsed){ - this.numberOfFields += 1; // This is for converting arrow and additional gap + this.numberOfFields += 0.2; // Add additional gaps to fix the impact of 2 headers } } else if (this.filteredInputType.fields) { const fields = this.filteredInputType.fields?.filter(f => !!f); @@ -146,7 +146,7 @@ export class InputNode extends DataMapperNodeModel { }); } } else if (!parentPort.attributes.collapsed) { - this.numberOfFields += 5; // This is for payload widget and arrow + this.numberOfFields += 4.8; // This is for payload widget } } else { await this.addPortsForInputField({ diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx index bb5cdb21e5..1a4bb10b63 100644 --- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx +++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx @@ -149,15 +149,26 @@ export function InputNodeWidget(props: InputNodeWidgetProps) { onMouseLeave={onMouseLeave} > - {(fields || dmType.convertedField || isConvertibleType) && ( + {dmType.category !== InputCategory.ConvertedVariable ? ( + (fields || dmType.convertedField || isConvertibleType) && ( + + ) + ) : ( )} {label} @@ -202,26 +213,21 @@ export function InputNodeWidget(props: InputNodeWidgetProps) { )} {expanded && dmType.convertedField && - <> - - - + } {expanded && isConvertibleType && !dmType.convertedField && - <> - await context.createConvertedVariable(headerLabel, true, undefined, dmType.typeName)} - typeName={dmType.typeName.toUpperCase()} - /> - + await context.createConvertedVariable(headerLabel, true, undefined, dmType.typeName)} + typeName={dmType.typeName.toUpperCase()} + /> } ); diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx index 82b2777feb..85ecc5fd8b 100644 --- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx +++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx @@ -152,15 +152,26 @@ export function ObjectOutputWidget(props: ObjectOutputWidgetProps) { } - + {outputType.category !== InputCategory.ConvertedVariable ? ( + + ) : ( + + )} {label} {outputType.category === InputCategory.ConvertedVariable && ( {expanded && outputType.convertedField && - <> - - - - } + + } {expanded && isConvertibleType && !outputType.convertedField && - <> - - await context.createConvertedVariable(valueLabel, false, undefined, outputType.typeName)} - typeName={outputType.typeName.toUpperCase()} - /> - + await context.createConvertedVariable(valueLabel, false, undefined, outputType.typeName)} + typeName={outputType.typeName.toUpperCase()} + /> } ); From 9dca05426966d7ddf31670760620694942c09a8f Mon Sep 17 00:00:00 2001 From: ChamodA Date: Tue, 24 Feb 2026 12:47:03 +0530 Subject: [PATCH 5/5] Remove empty onClick handlers from convert icon button in InputNodeWidget and ObjectOutputWidget buttons --- .../src/components/Diagram/Node/Input/InputNodeWidget.tsx | 1 - .../components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx index 1a4bb10b63..ef85ff3a12 100644 --- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx +++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx @@ -166,7 +166,6 @@ export function InputNodeWidget(props: InputNodeWidgetProps) { id={"converted-icon-" + id} appearance="icon" tooltip="Type defined variable" - onClick={() => { }} > diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx index 85ecc5fd8b..b7e4874d12 100644 --- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx +++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx @@ -167,7 +167,6 @@ export function ObjectOutputWidget(props: ObjectOutputWidgetProps) { id={"converted-icon-" + id} appearance="icon" tooltip="Type defined variable" - onClick={() => { }} >