[Search][Playground] Update UI #187608

yansavitski · 2024-07-04T21:44:15Z

Summary

Summarize your PR. If it involves visual changes include a screenshot or gif.

Checklist

Delete any items that are not applicable to this PR.

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
Flaky Test Runner was used on any tests changed
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release.

When forming the risk matrix, consider some of the following examples and how they may potentially impact the change:

Risk	Probability	Severity	Mitigation/Notes
Multiple Spaces—unexpected behavior in non-default Kibana Space.	Low	High	Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces.
Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks.	High	Low	Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure.
Code should gracefully handle cases when feature X or plugin Y are disabled.	Medium	High	Unit tests will verify that any feature flag or plugin combination still results in our service operational.
See more potential risk examples

For maintainers

This was checked for breaking API changes and was labeled appropriately

…pdate

joemcelroy · 2024-07-08T12:58:53Z

Hey couple things noticed testing this out:

the message dont have a white background, it inherits the body's background colour
changing the query then going to chat and then going back to query doesn't show the updated query. it seems to revert back to the normal query
Query View: the index fields menu isn't expanded by default

…pdate

yansavitski · 2024-07-08T23:11:20Z

@joemcelroy updated, could you check again?

…pdate

joemcelroy · 2024-07-09T12:44:10Z

x-pack/plugins/search_playground/public/chat_playground_overview.tsx

-        {embeddableConsole}
-      </EuiPageTemplate>
-    </PlaygroundProvider>
+    <QueryClientProvider client={queryClient}>


why not put the QueryClient as part of the PlaygroundProvider?

I moved it here to use useSourceFields hook in the playground provider, to avoid bugs when the hook is unmounted and the index is changed. This hook used queryClient so I moved it to the parent component. But then I figured out that it affected a lot more and needed extra time to fix some bugs so I returned changes. I forgot to return this one as well. I can revert these changes

I forgot that i've added a load connectors hook in playground provider, so query client provider needs to be defined in upper component

do you think it still could be incapsulated in the PlaygroundProvider still? just the PlaygroundProvider is two components, for the hook and the queryClientProvider?

if its not possible, i would just create a new provider component for QueryClient thats in our providers folder vs making the QueryClient instantiation in a util.

we can add queryClientProvide in PlaygroundProvide, but in that case need to find another place to load connector and set models

joemcelroy · 2024-07-09T12:49:49Z

x-pack/plugins/search_playground/public/components/message_list/assistant_message.tsx

@@ -96,6 +106,14 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({ message }) =
          username={username}
          timelineAvatar="dot"
          data-test-subj="retrieval-docs-comment-no-docs"
+          eventColor="subdued"
+          css={{
+            '.euiAvatar': { backgroundColor: euiTheme.colors.ghost },


theres not a better way here for this?

Unfortunately not, euiComment has poor flexibility by props, so need to apply these changes
doc

x-pack/plugins/search_playground/public/components/select_indices_flyout.test.tsx

joemcelroy · 2024-07-09T12:56:38Z

x-pack/plugins/search_playground/public/hooks/use_source_indices_field.ts

      usageTracker?.count(
        AnalyticsEvents.sourceFieldsLoaded,
        Object.values(fields)?.flat()?.length
      );
-    } else {
-      setNoFieldsIndicesWarning(null);


this warning is still important to highlight. Does this move somewhere else?

We show a callout in the context panel if the index doesn't have fields.
I can use useIndicesFields as the flow of adding indices was changed and we have temporarily selected indices, before the user clicks on save button

Added new callout when index selected in flyout

joemcelroy · 2024-07-09T12:57:05Z

x-pack/plugins/search_playground/public/hooks/use_source_indices_field.ts

      onElasticsearchQueryChange(createQuery(defaultFields, defaultSourceFields, fields));
-      onSourceFieldsChange(defaultSourceFields);
+      onQueryFieldsOnChange(merge(defaultFields, queryFields));


any reason we now merge? Is it for better experience, we dont impact the user's options?

Yeah, to save previously selected items. When we add new index it seems the right thing to save previously selected fields as well

x-pack/plugins/search_playground/public/components/select_indices_flyout.test.tsx

joemcelroy

Great work Yan!

elasticmachine · 2024-07-10T11:28:06Z

💚 Build Succeeded

Buildkite Build
Commit: 0630948
Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-187608-0630948ce7bd
Observability Deployment

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`searchPlayground`	179	176	-3

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`searchPlayground`	10	9	-1

Async chunks

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

id	before	after	diff
`enterpriseSearch`	2.5MB	2.5MB	-485.0B
`searchPlayground`	169.3KB	138.1KB	-31.2KB
total			-31.7KB

Page load bundle

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

id	before	after	diff
`searchPlayground`	6.6KB	6.6KB	-78.0B

Unknown metric groups

API count

id	before	after	diff
`searchPlayground`	18	15	-3

async chunk count

id	before	after	diff
`searchPlayground`	7	6	-1

ESLint disabled line counts

id	before	after	diff
`searchPlayground`	6	5	-1

Total ESLint disabled count

id	before	after	diff
`searchPlayground`	6	5	-1

History

💚 Build #220546 succeeded 9a67631
💛 Build #220463 was flaky aa28fbb
💛 Build #220338 was flaky b441061
💚 Build #220305 succeeded d3f6008

cc @joemcelroy

## Summary Summarize your PR. If it involves visual changes include a screenshot or gif. ### Checklist Delete any items that are not applicable to this PR. - [ ] 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/packages/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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] 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 renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### Risk Matrix Delete this section if it is not applicable to this PR. Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release. When forming the risk matrix, consider some of the following examples and how they may potentially impact the change: | Risk | Probability | Severity | Mitigation/Notes | |---------------------------|-------------|----------|-------------------------| | Multiple Spaces—unexpected behavior in non-default Kibana Space. | Low | High | Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces. | | Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks. | High | Low | Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure. | | Code should gracefully handle cases when feature X or plugin Y are disabled. | Medium | High | Unit tests will verify that any feature flag or plugin combination still results in our service operational. | | [See more potential risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) | ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: Joseph McElroy <[email protected]> (cherry picked from commit 77267b2)

kibanamachine · 2024-07-10T13:12:05Z

💚 All backports created successfully

Status	Branch	Result
✅	8.15

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

# Backport This will backport the following commits from `main` to `8.15`: - [[Search][Playground] Update UI (#187608)](#187608)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Yan Savitski <[email protected]>

yansavitski added 13 commits June 19, 2024 00:48

Update setup page

3470850

Set playground template panelled and move header to plugin

a8b9cdf

Update header sizes

b02bd89

Update input actions space

bdcd5d1

Add create index button in setup page

c634ead

Update sidebar

3bf7f93

Add data action button

0e1b338

Update chat sidebar

a861d24

Update query mode and fix bugs

df9525b

Add callout for empty index

f2b2fc2

Fix add indices in query mode

6f7af76

Update query fields after adding new index

e436ca6

Merge branch 'main' of github.com:elastic/kibana into playground-ui-u…

d34b330

…pdate

yansavitski requested a review from a team as a code owner July 4, 2024 21:44

yansavitski added release_note:skip Skip the PR/issue when compiling release notes v8.15.0 v8.16.0 labels Jul 4, 2024

yansavitski added 3 commits July 5, 2024 00:12

Fix source fields update after merge

270a2ae

Update ftr for ess

5a97b53

Fix es3 ftr tests

3425998

yansavitski added 2 commits July 8, 2024 18:34

Fix pr checks

07118b7

Merge branch 'main' of github.com:elastic/kibana into playground-ui-u…

74b6ffd

…pdate

joemcelroy self-requested a review July 8, 2024 18:32

yansavitski added 3 commits July 9, 2024 00:16

Update message list color

e9dc061

Update transform function

e03e152

Use merge fields

1dbc4a1

yansavitski added 2 commits July 9, 2024 01:16

Merge branch 'main' of github.com:elastic/kibana into playground-ui-u…

5b4a3e1

…pdate

Fix check types

5dd043f

yansavitski removed request for a team July 9, 2024 09:44

fix issue with indices not existing

b441061

joemcelroy reviewed Jul 9, 2024

View reviewed changes

x-pack/plugins/search_playground/public/components/select_indices_flyout.test.tsx Outdated Show resolved Hide resolved

joemcelroy reviewed Jul 9, 2024

View reviewed changes

x-pack/plugins/search_playground/public/components/select_indices_flyout.test.tsx Outdated Show resolved Hide resolved

yansavitski added 3 commits July 9, 2024 18:47

FIx reset query after goes to chat mode

d3d65f2

Add callout for no source fields

0c6d783

Update index flyout tests

51fe5ef

joemcelroy self-assigned this Jul 9, 2024

yansavitski added 3 commits July 9, 2024 21:55

Fix using old version of addIndex function in useEffect

aa28fbb

Update page template for serverless

9a67631

Move header docs to the left

0630948

joemcelroy approved these changes Jul 10, 2024

View reviewed changes

yansavitski added Team:EnterpriseSearch and removed Team:Fleet Team label for Observability Data Collection Fleet team ci:project-deploy-observability Create an Observability project labels Jul 10, 2024

yansavitski merged commit 77267b2 into elastic:main Jul 10, 2024
23 checks passed

yansavitski deleted the playground-ui-update branch July 10, 2024 13:06

kibanamachine mentioned this pull request Jul 10, 2024

[8.15] [Search][Playground] Update UI (#187608) #187974

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Search][Playground] Update UI #187608

[Search][Playground] Update UI #187608

yansavitski commented Jul 4, 2024 •

edited by kibanamachine

Loading

joemcelroy commented Jul 8, 2024

yansavitski commented Jul 8, 2024

joemcelroy Jul 9, 2024

yansavitski Jul 9, 2024

yansavitski Jul 9, 2024

joemcelroy Jul 9, 2024

joemcelroy Jul 10, 2024

yansavitski Jul 10, 2024

joemcelroy Jul 9, 2024

yansavitski Jul 9, 2024

joemcelroy Jul 9, 2024

yansavitski Jul 9, 2024

yansavitski Jul 9, 2024 •

edited

Loading

joemcelroy Jul 9, 2024

yansavitski Jul 9, 2024

joemcelroy left a comment

elasticmachine commented Jul 10, 2024 •

edited

Loading

API count

async chunk count

ESLint disabled line counts

Total ESLint disabled count

kibanamachine commented Jul 10, 2024

[Search][Playground] Update UI #187608

[Search][Playground] Update UI #187608

Conversation

yansavitski commented Jul 4, 2024 • edited by kibanamachine Loading

Summary

Checklist

Risk Matrix

For maintainers

joemcelroy commented Jul 8, 2024

yansavitski commented Jul 8, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yansavitski Jul 9, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joemcelroy left a comment

Choose a reason for hiding this comment

elasticmachine commented Jul 10, 2024 • edited Loading

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

async chunk count

ESLint disabled line counts

Total ESLint disabled count

History

kibanamachine commented Jul 10, 2024

💚 All backports created successfully

Questions ?

yansavitski commented Jul 4, 2024 •

edited by kibanamachine

Loading

yansavitski Jul 9, 2024 •

edited

Loading

elasticmachine commented Jul 10, 2024 •

edited

Loading