Render agent tool on diagram when connections are missing

[kaumini]

Purpose

Describe the problems, issues, or needs driving this feature/fix and include links to related issues in the following format: Resolves issue1, issue2, etc.

Goals

Describe the solutions that this feature/fix will introduce to resolve the problems described above

Approach

Describe how you are implementing the solutions. Include an animated GIF or screenshot if the change affects the UI (email documentation@wso2.com to review all UI text). Include a link to a Markdown file or Google doc if the feature write-up is too long to paste here.

UI Component Development

Specify the reason if following are not followed.

• Added reusable UI components to the ui-toolkit. Follow the intructions when adding the componenent.
• Use ui-toolkit components wherever possible. Run npm run storybook from the root directory to view current components.
• Matches with the native VSCode look and feel.

Manage Icons

Specify the reason if following are not followed.

• Added Icons to the font-wso2-vscode. Follow the instructions.

User stories

Summary of user stories addressed by this change>

Release note

Brief description of the new feature or bug fix as it will appear in the release notes

Documentation

Link(s) to product documentation that addresses the changes of this PR. If no doc impact, enter “N/A” plus brief explanation of why there’s no doc impact

Training

Link to the PR for changes to the training content in https://github.com/wso2/WSO2-Training, if applicable

Certification

Type “Sent” when you have provided new/updated certification questions, plus four answers for each question (correct answer highlighted in bold), based on this change. Certification questions/answers should be sent to certification@wso2.com and NOT pasted in this PR. If there is no impact on certification exams, type “N/A” and explain why.

Marketing

Link to drafts of marketing content that will describe and promote this feature, including product page changes, technical articles, blog posts, videos, etc., if applicable

Automation tests

• Unit tests

  Code coverage information

• Integration tests

  Details about the test cases and coverage

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines? yes/no
• Ran FindSecurityBugs plugin and verified report? yes/no
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets? yes/no

Samples

Provide high-level details about the samples related to this feature

Related PRs

List any other related PRs

Migrations (if applicable)

Describe migration steps and platforms on which migration has been tested

Test environment

List all JDK versions, operating systems, databases, and browser/versions on which this feature/fix was tested

Learning

Describe the research phase and any blog posts, patterns, libraries, or add-ons you used to solve the problem.

Summary by CodeRabbit

• Bug Fixes

  • Prevented errors and crashes by adding guards when connector data or mediator info is missing.
  • Tools without a defined mediator are now shown in diagrams without linking.

• Improvements

  • Increased robustness with defensive null/undefined checks across diagram rendering.
  • Minor utility function hardened to safely handle empty or missing text inputs.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8f44c4d and 5cad6d2.

📒 Files selected for processing (1)

• workspaces/mi/mi-diagram/src/components/nodes/AIAgentNode/AiAgentNodeWidget.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• workspaces/mi/mi-diagram/src/components/nodes/AIAgentNode/AiAgentNodeWidget.tsx

---

📝 Walkthrough

Walkthrough

Adds defensive guards and optional chaining across diagram components and a utility; also creates connector nodes for tools missing mediators in the visitor, preventing runtime errors and unrepresented tools.

Changes

Cohort / File(s)	Summary
AI Agent & Connector Widgets workspaces/mi/mi-diagram/src/components/nodes/AIAgentNode/AiAgentNodeWidget.tsx, workspaces/mi/mi-diagram/src/components/nodes/ConnectorNode/ConnectorNodeWidget.tsx	Adds falsy checks after fetching connectorData with early returns and error logging; replaces direct mediator.connectorName access with optional chaining; introduces a hasError helper used for node styling.
Visitor: connector creation for tools without mediators workspaces/mi/mi-diagram/src/visitors/NodeFactoryVisitor.ts	Adds a branch that creates ConnectorNode instances with dontLink: true for tools that lack a mediator, ensuring such tools are represented without links.
Utility guard workspaces/mi/mi-diagram/src/utils/commons.ts	Adds an early return for falsy input in FirstCharToUpperCase to avoid operating on undefined/null values.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hop through nodes with careful eyes,
Catching empty gaps before they rise,
I stitch the tools that once were missed,
And tuck each string with a gentle twist,
Diagrams safe beneath my twitching skies. ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is entirely a template with no substantive content filled in; all sections lack actual implementation details, goals, or problem statements.	Fill in all required sections: Purpose with issue links, Goals, Approach with technical details, and relevant checklist items (mark as N/A with justification if not applicable).
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Render agent tool on diagram when connections are missing' is concise, clear, and directly summarizes the main change.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 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: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@workspaces/mi/mi-diagram/src/components/nodes/AIAgentNode/AiAgentNodeWidget.tsx`:
- Around line 302-305: The guard in AiAgentNodeWidget that checks for
connectorData exits early but never clears the loading flag, leaving the circle
icon stuck in loading; in the block that currently logs the error for missing
connectorData (the if (!connectorData) check referencing stNode.tag), call the
component's state setter to unset isLoading (e.g., setIsLoading(false)) before
returning so the UI exits loading mode, and ensure any related cleanup (timeouts
or effects watching isLoading) is also handled if present.

In
`@workspaces/mi/mi-diagram/src/components/nodes/ConnectorNode/ConnectorNodeWidget.tsx`:
- Around line 170-172: The GetConnectorIconRequest requires a non-null
connectorName but the ConnectorNodeWidget currently passes
node.stNode?.connectorName ?? (node.stNode as any).mediator?.connectorName which
can be undefined; before calling getConnectorIcon (or building the
GetConnectorIconRequest) check for a valid connectorName extracted from
node.stNode or mediator and if absent either skip the RPC call (avoid calling
getConnectorIcon) or supply a safe fallback name/icon; update the code around
ConnectorNodeWidget to guard the getConnectorIcon invocation and only
construct/send GetConnectorIconRequest when connectorName is a non-empty string.

---

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e4ce6e5 and 8f44c4d.

📒 Files selected for processing (4)

• workspaces/mi/mi-diagram/src/components/nodes/AIAgentNode/AiAgentNodeWidget.tsx
• workspaces/mi/mi-diagram/src/components/nodes/ConnectorNode/ConnectorNodeWidget.tsx
• workspaces/mi/mi-diagram/src/utils/commons.ts
• workspaces/mi/mi-diagram/src/visitors/NodeFactoryVisitor.ts