fix: correct placeholder text for graphql action editor

[LagunaElectric]

Description

This PR replaces the placeholder text for custom graphql actions with a valid example.

Fixes #41422

Automation

/ok-to-test tags="@tag.Datasource"

🔍 Cypress test results

Tip

🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/19724407878
Commit: ac5f41c
Cypress dashboard.
Tags: @tag.Datasource
Spec:

---

Thu, 27 Nov 2025 04:22:34 UTC

Communication

Should the DevRel and Marketing teams inform users about this change?

• Yes
• No

Summary by CodeRabbit

• Documentation
  • Simplified the example payload shown in the GraphQL variables editor and updated the GraphQL query template placeholder to a clearer, concrete example for improved clarity in the configuration UI.

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

[coderabbitai]

Walkthrough

Replaced incorrect GraphQL query and variables placeholders in two UI editor components: variables example now shows a single-field JSON object, and the GraphQL body placeholder was changed from a templated/miswrapped snippet to a proper named query with variable declarations.

Changes

Cohort / File(s)	Change Summary
GraphQL editor placeholders app/client/src/components/formControls/CustomActionControls/CustomGraphQLActionsConfigControl.tsx, app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx	Replaced EXPECTED_VARIABLE.example JSON from a two-field object to a single-field {"name": ...} example; updated GraphQL body editor placeholder from an invalid/miswrapped templated snippet to a proper named query with variable declarations (e.g., query myQuery($name: String!) { ... }).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Verify placeholders align with linked bug #41422.
• Confirm variable example uses correct templating (e.g., {{inputName.text}}) and editor escaping/rendering remains correct.

Poem

Braces smoothed and placeholders bright,
Queries now read clean and right.
Variables trimmed to a simple name,
Editors sing the fixed-up frame. ✨

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 accurately summarizes the main change: correcting placeholder text for the GraphQL action editor, which directly aligns with the changeset.
Linked Issues check	✅ Passed	The PR successfully addresses issue #41422 by replacing invalid placeholder templates with valid GraphQL query and variable examples across both affected components.
Out of Scope Changes check	✅ Passed	All changes are focused on correcting placeholder text in GraphQL editor components, directly addressing the linked issue with no extraneous modifications.
Description check	✅ Passed	PR description is mostly complete with issue reference, test results, and communication decision documented. Non-critical sections like TL;DR and dependencies are not included, but the core information is present.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/graphql-actions-placeholder

---

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.}

[LagunaElectric]

This will also fix #23335

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx (1)

33-37: Clarify the widget binding example in EXPECTED_VARIABLE

The single-field JSON example looks good and matches the simplified variables pattern, but {{ inputName.property }} is a bit abstract. Using a realistic property like .text (which aligns with most Input widget usage) would make the placeholder more immediately actionable for users.

For example:

-  example: '{\n  "name": "{{ inputName.property }}"\n}',
+  example: '{\n  "name": "{{ inputName.text }}"\n}',

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ccf6ec4 and 34830c4.

📒 Files selected for processing (1)

• app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)

• GitHub Check: client-build / client-build
• GitHub Check: client-unit-tests / client-unit-tests
• GitHub Check: client-lint / client-lint
• GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
• GitHub Check: client-prettier / prettier-check

🔇 Additional comments (1)

app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx (1)

49-56: New query placeholder correctly uses a valid GraphQL operation

Switching the placeholder from a templated snippet to a concrete named query with a $name variable is a solid fix and should prevent the previous blank/invalid request behavior when users run the default content.

[tomjose92]

LGTM