[OneChat] Test Tool Flyout by meghanmurphy1 · Pull Request #230484 · elastic/kibana

meghanmurphy1 · 2025-08-04T22:21:05Z

Summary

This PR adds the ability to test a tool when editing or creating it. It adds a "Save and Test" button that will save the tool before testing or just a "Test" button so if there were no changes to an existing tool, it'll open the flyout that will use the _execute API endpoint for testing.

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
Flaky Test Runner was used on any tests changed
The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines
Review the backport guidelines and apply applicable backport:* labels.

Identify risks

Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging.

See some risk examples
...

jedrazb

works nicely! couple of comments

x-pack/platform/plugins/shared/onechat/common/http_api/tools.ts

x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx

jedrazb · 2025-08-19T09:13:01Z

...k/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx

+  return fields;
+};
+
+export const OnechatTestFlyout: React.FC<OnechatTestToolFlyoutProps> = ({


this renders pretty bad on small screens, why not column??

what do you mean by why not column? 🤔 I updated the Inputs to have <EuiFlexItem grow={false} style={{ minWidth: '200px', maxWidth: '300px' }}> so it doesn't stretch and look odd. Is that what you mean?

Oh I meant that on small screens (as in my attachment) the input and response columns are squashed (maybe we should have input and response in a single column??)

...k/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx

x-pack/platform/plugins/shared/onechat/public/application/hooks/tools/use_execute_tools.ts

x-pack/platform/plugins/shared/onechat/public/services/tools/tools_service.ts

…no-cache --fix'

jedrazb · 2025-08-26T10:52:12Z

Looks great! 🔥 another thing I noticed that for larger screens the response doesn't take the full height of flyout

jedrazb · 2025-08-26T15:54:23Z

...k/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx

+                languageId="json"
+                value={response}
+                fullWidth={true}
+                height="calc(100vh - 275px)"


This part feels a bit tricky, manually calculating CSS height likely won't cover all cases? Also it probably need to have minimal height?

From what I understand, the code editor requires an explicit height. Why not set it to 100%? Could we instead use flexbox to let it stretch automatically?

Also, since the result is read-only, is there a reason we’re using the CodeEditor component (which is meant for dynamic input)? Wouldn’t a EuiCodeBlock be simpler and more lightweight approach here?

From what I've seen CodeEditor would make more sense especially as responses could be pretty long and searching through results could get confusing using just a code block. As for the explicit height, I can see why calculating the height could be flaky, and so just set it to "75vh" which would allow to scroll through responses and keep the 'Response' title at the top.

Hmm, thinking out loud right now:

The response doesn’t work too well on narrow screens (see screenshot). overflow-x is hidden, so I can’t really see the full response.

this is especially problematic when rendering tabular data output from tool (horizontal)

We also have issues with calculating height.

What if we just stacked everything in a column instead?

Params on top

Response below params (under the test button)

This would make better use of the narrow flyout

We could just use full height of response and just let flyout scroll?

would make more sense especially as responses could be pretty long and searching through results could get confusing using just a code block.

Tools return typed data, so we are likely to have custom renderers anyway for .e.g esql result. You can still use cmnd F to search through JSON right?

I pasted ^ to cursor and it suggested this (stacking in column, using EuiCodeBlock).

Screen.Recording.2025-08-27.at.13.53.37.mov

jedrazb

One more pass, spotted couple more nits :)

...k/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx

jedrazb · 2025-08-27T11:40:15Z

x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx

-  const { errors } = formState;
+  const { errors, isDirty } = formState;
+  const [showTestFlyout, setShowTestFlyout] = useState(false);
+  const [testToolData, setTestToolData] = useState<OnechatEsqlToolFormData>(form.getValues());


Why do we need this state? Can't we infer testToolData directly from const form = useEsqlToolForm();?

We are always forcing user to save before executing the tool, we could even simplify to pass just toolId to flyout test tool form , and then from within flyout form we can fetch the tool by Id using a hook useTool(toolId)

IMO this will be cleaner and we won't need to handle state propagation to child component

I ended up using the hook to get the full tool data but did need to use a current tool id state since the flyout can be either from Creating or Editing

jedrazb

few nits! last ones i hope

...k/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx

x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx

jedrazb

🚀

jedrazb · 2025-08-28T10:04:45Z

@elasticmachine merge upstream

elasticmachine · 2025-08-28T11:55:20Z

💚 Build Succeeded

Buildkite Build
Commit: a80a658

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`onechat`	451	453	+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`onechat`	807.0KB	810.9KB	+3.8KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`onechat`	12.6KB	12.7KB	+124.0B

History

💚 Build #333247 succeeded 90a022f
💚 Build #332814 succeeded 57a6f04
💚 Build #332713 succeeded ddfdbbb
💚 Build #332440 succeeded 0821a1a
💚 Build #329811 succeeded 987f75e
💔 Build #329739 failed 6e7702c

cc @meghanmurphy1

## Summary This PR adds the ability to test a tool when editing or creating it. It adds a "Save and Test" button that will save the tool before testing or just a "Test" button so if there were no changes to an existing tool, it'll open the flyout that will use the `_execute` API endpoint for testing. <img width="1916" height="867" alt="Screenshot 2025-08-25 at 5 04 52 PM" src="https://github.com/user-attachments/assets/6b45df50-c515-426c-9837-46c1ea9fd2ee" /> <img width="1917" height="860" alt="Screenshot 2025-08-27 at 12 47 19 PM" src="https://github.com/user-attachments/assets/deb309b0-e38d-4bfa-a4b8-587d09e84919" /> ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [ ] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) - [ ] ... --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

meghanmurphy1 self-assigned this Aug 4, 2025

meghanmurphy1 marked this pull request as ready for review August 13, 2025 17:45

meghanmurphy1 requested a review from a team as a code owner August 13, 2025 17:45

meghanmurphy1 added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting labels Aug 13, 2025

meghanmurphy1 added 7 commits August 14, 2025 10:18

test tool flyout

42adccc

use just list of parameters and add execute

a5ed989

use form data

5991a0a

use 'save and test' button

8bf5889

revert some fixes

d1c2463

fix

3348b52

put save and test on latest pages

64b623e

meghanmurphy1 force-pushed the onechat-test-tool-flyout branch from 064431c to 64b623e Compare August 14, 2025 15:27

rename folder

35d372e

meghanmurphy1 force-pushed the onechat-test-tool-flyout branch from 6e7702c to 35d372e Compare August 14, 2025 18:07

jedrazb reviewed Aug 19, 2025

View reviewed changes

meghanmurphy1 added 2 commits August 25, 2025 16:05

address feedback

b5d6c3b

merge main

19303c3

meghanmurphy1 force-pushed the onechat-test-tool-flyout branch from 987f75e to 19303c3 Compare August 25, 2025 20:45

[CI] Auto-commit changed files from 'node scripts/notice'

c1ce978

meghanmurphy1 requested review from jedrazb and pgayvallet August 25, 2025 21:06

[CI] Auto-commit changed files from 'node scripts/eslint_all_files --…

0821a1a

…no-cache --fix'

meghanmurphy1 added 2 commits August 26, 2025 09:53

configure height of codediter and move Response title to left

f7e49a8

move height a little

ddfdbbb

jedrazb reviewed Aug 26, 2025

View reviewed changes

add 75vh

57a6f04

jedrazb reviewed Aug 27, 2025

View reviewed changes

use code block and use useTool hook

5e29369

[CI] Auto-commit changed files from 'node scripts/notice'

fb9b791

jedrazb reviewed Aug 27, 2025

View reviewed changes

use css and watch

90a022f

meghanmurphy1 requested a review from jedrazb August 27, 2025 16:29

jedrazb approved these changes Aug 28, 2025

View reviewed changes

Merge branch 'main' into onechat-test-tool-flyout

a80a658

meghanmurphy1 merged commit f507485 into elastic:main Aug 28, 2025
12 checks passed

kibanamachine added the v9.2.0 label Aug 28, 2025

Conversation

meghanmurphy1 commented Aug 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

Identify risks

Uh oh!

jedrazb left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

jedrazb Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

meghanmurphy1 Aug 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jedrazb Aug 26, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jedrazb commented Aug 26, 2025

Uh oh!

jedrazb Aug 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

meghanmurphy1 Aug 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jedrazb Aug 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jedrazb left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jedrazb Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

jedrazb Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

meghanmurphy1 Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

jedrazb left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jedrazb left a comment

Choose a reason for hiding this comment

Uh oh!

jedrazb commented Aug 28, 2025

Uh oh!

elasticmachine commented Aug 28, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

Uh oh!

Uh oh!

Reviewers

Assignees

meghanmurphy1 commented Aug 4, 2025 •

edited

Loading

meghanmurphy1 Aug 25, 2025 •

edited

Loading

jedrazb Aug 26, 2025 •

edited

Loading

meghanmurphy1 Aug 26, 2025 •

edited

Loading

jedrazb Aug 27, 2025 •

edited

Loading