fix graphql operator forms to conditionally render type field when the ballerinaType exsists

[senithkay]

Purpose

The GraphQL operators forms were breaking at runtime due to undefined property access. Certain operator configurations attempted to access the ballerinaType field even when the corresponding property was not present, resulting in errors and a broken form experience.

Resolves: wso2/product-ballerina-integrator#2169

Goals

• Prevent runtime errors in GraphQL operators forms.
• Ensure the forms render safely even when optional properties are missing.
• Improve the robustness of operator configuration handling.

Approach

• Identified cases where the ballerinaType field was accessed without verifying the existence of the related property.
• Updated the form rendering logic to conditionally render the type field only when the ballerinaType property exists.

Summary by CodeRabbit

Release Notes

• Bug Fixes
  • Enhanced type information display in the action type editor by refining how primary input types are detected and rendered. Type blocks now appear only when a primary input type is available, ensuring users see more accurate and contextually relevant type information in the editor interface.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The ActionTypeEditor component's conditional rendering logic was updated to verify the existence of a primary input type's ballerinaType attribute instead of checking a general field.types flag. The Type block now only renders when a valid primary input type is available, with its content sourced from and sanitized by the primary type data.

Changes

Cohort / File(s)	Summary
GraphQL Operator Form Fix workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionTypeEditor.tsx	Updated conditional rendering to depend on getPrimaryInputType(field.types)?.ballerinaType presence instead of field.types flag; Type block title and content now sourced from primary input type and sanitized via sanitizeType

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A GraphQL form was crashing down,
Missing primary types all around,
Now we check before we render—
Safe and sound, a fix most tender!
No more crashes in the town! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: conditionally rendering type field when ballerinaType exists, directly addressing the GraphQL operator forms fix mentioned in the issue.
Description check	✅ Passed	The description covers Purpose (with issue reference), Goals, and Approach sections, though it omits many template sections like UI Components, Release notes, Documentation, and Testing details.
Linked Issues check	✅ Passed	The code change adds conditional rendering to prevent runtime errors when ballerinaType is undefined, directly addressing the crash issue in the linked GraphQL operator forms.
Out of Scope Changes check	✅ Passed	The changes are limited to ActionTypeEditor.tsx with conditional rendering logic specific to the ballerinaType property, remaining fully aligned with the stated objective of fixing GraphQL operator forms crashes.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionTypeEditor.tsx (1)

593-600: Fix correctly prevents the crash; consider extracting the repeated call.

The conditional check successfully addresses the runtime error by verifying ballerinaType exists before rendering. However, getPrimaryInputType(field.types) is called three times within eight lines (lines 593, 596, 598).

🔎 Proposed refactor to eliminate redundant calls

-                {getPrimaryInputType(field.types)?.ballerinaType &&
+                {(() => {
+                    const primaryType = getPrimaryInputType(field.types);
+                    const ballerinaType = primaryType?.ballerinaType;
+                    return ballerinaType && (
                     <S.Type
                         isVisible={focused}
-                        title={getPrimaryInputType(field.types)?.ballerinaType}
+                        title={ballerinaType}
                     >
-                        {sanitizeType(getPrimaryInputType(field.types)?.ballerinaType)}
+                        {sanitizeType(ballerinaType)}
                     </S.Type>
-                }
+                    );
+                })()}

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6a0d95a and ff25f2d.

📒 Files selected for processing (1)

• workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionTypeEditor.tsx

🧰 Additional context used

🧠 Learnings (7)

📓 Common learnings

Learnt from: dan-niles
Repo: wso2/vscode-extensions PR: 980
File: workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/RichTextTemplateEditor/RichTextTemplateEditor.tsx:384-412
Timestamp: 2025-11-24T22:16:28.380Z
Learning: In the RichTextTemplateEditor component (workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/RichTextTemplateEditor/RichTextTemplateEditor.tsx), token fetching on external `value` prop changes is intentionally disabled. Users cannot edit both the minimized and expanded editors simultaneously, so tokens only need to be generated based on user typing in the expanded editor view, not on external prop updates.

Learnt from: KCSAbeywickrama
Repo: wso2/vscode-extensions PR: 998
File: workspaces/ballerina/data-mapper/src/components/DataMapper/Header/ExpressionBar.tsx:113-132
Timestamp: 2025-11-24T14:51:49.267Z
Learning: In workspaces/ballerina/data-mapper/src/components/DataMapper/Header/ExpressionBar.tsx, if `textFieldRef.current` is not undefined, `textFieldRef.current.inputElement` is guaranteed to exist. If `inputElement` doesn't exist when `current` exists, it's a fatal error that should reach the error boundary rather than being handled with defensive null checks.

📚 Learning: 2025-11-24T22:16:28.380Z

Learnt from: dan-niles
Repo: wso2/vscode-extensions PR: 980
File: workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/RichTextTemplateEditor/RichTextTemplateEditor.tsx:384-412
Timestamp: 2025-11-24T22:16:28.380Z
Learning: In the RichTextTemplateEditor component (workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/RichTextTemplateEditor/RichTextTemplateEditor.tsx), token fetching on external `value` prop changes is intentionally disabled. Users cannot edit both the minimized and expanded editors simultaneously, so tokens only need to be generated based on user typing in the expanded editor view, not on external prop updates.

Applied to files:

• workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionTypeEditor.tsx

📚 Learning: 2025-11-25T06:34:10.812Z

Learnt from: CR
Repo: wso2/vscode-extensions PR: 0
File: workspaces/ballerina/component-diagram/AGENTS.md:0-0
Timestamp: 2025-11-25T06:34:10.812Z
Learning: Applies to workspaces/ballerina/component-diagram/src/**/*.{ts,tsx} : Use TypeScript 5.8.3 with strict type checking enabled for all source files

Applied to files:

• workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionTypeEditor.tsx

📚 Learning: 2025-12-16T13:47:11.133Z

Learnt from: kanushka
Repo: wso2/vscode-extensions PR: 1117
File: workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGenerator/index.tsx:1183-1184
Timestamp: 2025-12-16T13:47:11.133Z
Learning: In workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGenerator/index.tsx, the findMatchedType function intentionally uses module?.split('.').pop() to handle simple cases where the last segment of the module name is used for matching. Wildcard imports should be used for collision cases (when different modules have the same last segment), but this is not currently implemented as the code only handles the simple case for now.

Applied to files:

• workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionTypeEditor.tsx

📚 Learning: 2025-11-25T06:34:10.812Z

Learnt from: CR
Repo: wso2/vscode-extensions PR: 0
File: workspaces/ballerina/component-diagram/AGENTS.md:0-0
Timestamp: 2025-11-25T06:34:10.812Z
Learning: Applies to workspaces/ballerina/component-diagram/src/components/**/*.tsx : Use React 18.2.0 features including concurrent rendering and automatic batching; avoid class components in favor of functional components with hooks

Applied to files:

• workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionTypeEditor.tsx

📚 Learning: 2025-11-24T14:51:49.267Z

Learnt from: KCSAbeywickrama
Repo: wso2/vscode-extensions PR: 998
File: workspaces/ballerina/data-mapper/src/components/DataMapper/Header/ExpressionBar.tsx:113-132
Timestamp: 2025-11-24T14:51:49.267Z
Learning: In workspaces/ballerina/data-mapper/src/components/DataMapper/Header/ExpressionBar.tsx, if `textFieldRef.current` is not undefined, `textFieldRef.current.inputElement` is guaranteed to exist. If `inputElement` doesn't exist when `current` exists, it's a fatal error that should reach the error boundary rather than being handled with defensive null checks.

Applied to files:

• workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionTypeEditor.tsx

📚 Learning: 2025-12-12T13:11:41.252Z

Learnt from: madushajg
Repo: wso2/vscode-extensions PR: 1096
File: workspaces/ballerina/ballerina-extension/src/views/ai-panel/activate.ts:27-28
Timestamp: 2025-12-12T13:11:41.252Z
Learning: In workspaces/ballerina/ballerina-extension/src/views/ai-panel/activate.ts, when processing projectInfo.children in handleWorkspaceLevelAIPanel, the projectPath field is always available for child projects in the workspace, so additional filtering or type guards are not necessary.

Applied to files:

• workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionTypeEditor.tsx

🧬 Code graph analysis (1)

workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionTypeEditor.tsx (1)

workspaces/ballerina/ballerina-core/src/utils/form-property-utils.ts (1)

• getPrimaryInputType (21-24)