Add query execution history tab#41883
Conversation
WalkthroughThis PR adds action execution history tracking to plugin actions and queries. It captures execution metadata (status, duration, environment, request/response previews) in a bounded Redux store, records entries via saga dispatch on success/failure/cancellation, and displays them in a new "History" tab within plugin action and query debugger interfaces. ChangesAction Execution History Tracking
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx (1)
223-230: ⚡ Quick winKeep History tab adjacent to Response for consistent debugger ordering.
With current
pushat Line [223], History lands after Logs/Errors in fullscreen mode. Consider inserting it next to Response to match the plugin action debugger ordering.Proposed adjustment
- responseTabs.push({ + responseTabs.splice(1, 0, { key: ACTION_EXECUTION_HISTORY_TAB, title: "History", count: actionExecutionHistory.length, panelComponent: ( <ActionExecutionHistoryTab history={actionExecutionHistory} /> ), });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx` around lines 223 - 230, The History tab is currently appended via responseTabs.push which places it after Logs/Errors; instead insert it immediately after the Response tab so ordering matches the plugin debugger. Locate the responseTabs array and replace the push for ACTION_EXECUTION_HISTORY_TAB by determining the index of the Response tab (e.g., find where key === RESPONSE_TAB or title === "Response") and use splice(index + 1, 0, { key: ACTION_EXECUTION_HISTORY_TAB, title: "History", count: actionExecutionHistory.length, panelComponent: <ActionExecutionHistoryTab history={actionExecutionHistory} /> }) so the History tab appears adjacent to Response.app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx (1)
43-43: ⚡ Quick winCentralize the History tab key/title in shared debugger constants/messages.
Line [43] introduces a local key and Lines [106]/[170] hardcode the title; the same pattern is repeated in
QueryDebuggerTabs. Please move these to shared constants/messages to avoid drift and keep both debuggers aligned.Also applies to: 105-107, 169-171
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx` at line 43, There’s a locally defined ACTION_EXECUTION_HISTORY_TAB and hardcoded tab titles in usePluginActionResponseTabs (and duplicated in QueryDebuggerTabs); move the tab key and displayed title into the shared debugger constants/messages module and import them instead of redefining/inline strings. Specifically: remove the local ACTION_EXECUTION_HISTORY_TAB in usePluginActionResponseTabs, replace the title strings used inside the tab definitions with the shared message constant, export a single ACTION_EXECUTION_HISTORY_TAB and corresponding title/message from the shared debugger constants/messages file, and update QueryDebuggerTabs to import and use those same symbols so both debuggers remain aligned.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@app/client/src/PluginActionEditor/components/PluginActionResponse/components/ActionExecutionHistoryTab.tsx`:
- Line 112: The current empty-state copy in ActionExecutionHistoryTab.tsx is
context-specific ("Run this query…"); update the Text element (the node
rendering Text with kind="body-m" inside the ActionExecutionHistoryTab
component) to use neutral wording such as "Run this action to see execution
history." so it applies both in query and action debugger contexts.
In `@app/client/src/sagas/ActionExecution/PluginActionSaga.ts`:
- Around line 742-753: The preview generation is using JSON.stringify(value,
null, 2) which pretty-prints and is expensive on the hot path; update the logic
that sets preview (the branch using isString and JSON.stringify) to use a
compact JSON.stringify(value) (no spacing) or another non-pretty fast serializer
instead, so large responses don't incur extra CPU/memory before truncation; keep
the existing fallback (String(value)) and preserve the later truncation logic
that uses ACTION_EXECUTION_HISTORY_PREVIEW_LIMIT and the preview variable.
---
Nitpick comments:
In
`@app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx`:
- Line 43: There’s a locally defined ACTION_EXECUTION_HISTORY_TAB and hardcoded
tab titles in usePluginActionResponseTabs (and duplicated in QueryDebuggerTabs);
move the tab key and displayed title into the shared debugger constants/messages
module and import them instead of redefining/inline strings. Specifically:
remove the local ACTION_EXECUTION_HISTORY_TAB in usePluginActionResponseTabs,
replace the title strings used inside the tab definitions with the shared
message constant, export a single ACTION_EXECUTION_HISTORY_TAB and corresponding
title/message from the shared debugger constants/messages file, and update
QueryDebuggerTabs to import and use those same symbols so both debuggers remain
aligned.
In `@app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx`:
- Around line 223-230: The History tab is currently appended via
responseTabs.push which places it after Logs/Errors; instead insert it
immediately after the Response tab so ordering matches the plugin debugger.
Locate the responseTabs array and replace the push for
ACTION_EXECUTION_HISTORY_TAB by determining the index of the Response tab (e.g.,
find where key === RESPONSE_TAB or title === "Response") and use splice(index +
1, 0, { key: ACTION_EXECUTION_HISTORY_TAB, title: "History", count:
actionExecutionHistory.length, panelComponent: <ActionExecutionHistoryTab
history={actionExecutionHistory} /> }) so the History tab appears adjacent to
Response.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: be35e7d8-1689-44e3-a626-d8f10545ef2e
📒 Files selected for processing (8)
app/client/src/PluginActionEditor/components/PluginActionResponse/components/ActionExecutionHistoryTab.tsxapp/client/src/PluginActionEditor/store/pluginActionEditorActions.tsapp/client/src/PluginActionEditor/store/pluginActionEditorSelectors.tsapp/client/src/PluginActionEditor/store/pluginEditorReducer.tsapp/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsxapp/client/src/ce/constants/ReduxActionConstants.tsxapp/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsxapp/client/src/sagas/ActionExecution/PluginActionSaga.ts
| if (!selectedRun) { | ||
| return ( | ||
| <EmptyState> | ||
| <Text kind="body-m">Run this query to see execution history.</Text> |
There was a problem hiding this comment.
Use context-neutral empty-state copy.
Line [112] says “Run this query…”, but this component is also used in action debugger contexts. Please switch to neutral wording (for example, “Run this action to see execution history.”).
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In
`@app/client/src/PluginActionEditor/components/PluginActionResponse/components/ActionExecutionHistoryTab.tsx`
at line 112, The current empty-state copy in ActionExecutionHistoryTab.tsx is
context-specific ("Run this query…"); update the Text element (the node
rendering Text with kind="body-m" inside the ActionExecutionHistoryTab
component) to use neutral wording such as "Run this action to see execution
history." so it applies both in query and action debugger contexts.
| try { | ||
| preview = isString(value) ? value : JSON.stringify(value, null, 2); | ||
| } catch (e) { | ||
| preview = String(value); | ||
| } | ||
|
|
||
| if (!preview) return String(value); | ||
|
|
||
| if (preview.length <= ACTION_EXECUTION_HISTORY_PREVIEW_LIMIT) return preview; | ||
|
|
||
| return `${preview.slice(0, ACTION_EXECUTION_HISTORY_PREVIEW_LIMIT)}...`; | ||
| } |
There was a problem hiding this comment.
Avoid pretty-printed JSON in execution-history preview generation on the hot path.
Line [743] uses JSON.stringify(value, null, 2) for every non-string preview before truncation, which adds avoidable CPU/memory work for large responses and can hurt editor responsiveness during runs.
Suggested low-cost improvement
function getActionExecutionHistoryPreview(value: unknown) {
if (isNil(value)) return "";
- let preview = "";
+ if (isString(value)) {
+ return value.length <= ACTION_EXECUTION_HISTORY_PREVIEW_LIMIT
+ ? value
+ : `${value.slice(0, ACTION_EXECUTION_HISTORY_PREVIEW_LIMIT)}...`;
+ }
+
+ let preview = "";
try {
- preview = isString(value) ? value : JSON.stringify(value, null, 2);
+ preview = JSON.stringify(value);
} catch (e) {
preview = String(value);
}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/client/src/sagas/ActionExecution/PluginActionSaga.ts` around lines 742 -
753, The preview generation is using JSON.stringify(value, null, 2) which
pretty-prints and is expensive on the hot path; update the logic that sets
preview (the branch using isString and JSON.stringify) to use a compact
JSON.stringify(value) (no spacing) or another non-pretty fast serializer
instead, so large responses don't incur extra CPU/memory before truncation; keep
the existing fallback (String(value)) and preserve the later truncation logic
that uses ACTION_EXECUTION_HISTORY_PREVIEW_LIMIT and the preview variable.
|
This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected. |
Description
Tip
Add a TL;DR when the description is longer than 500 words or extremely technical (helps the content, marketing, and DevRel team).
Please also include relevant motivation and context. List any dependencies that are required for this change. Add links to Notion, Figma or any other documents that might be relevant to the PR.
Fixes #
Issue Numberor
Fixes
Issue URLWarning
If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.
Automation
/ok-to-test tags=""
🔍 Cypress test results
Caution
If you modify the content in this section, you are likely to disrupt the CI result for your PR.
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit