[DataView] UX improvements for index pattern input in data view flyout #152138

jughosta · 2023-02-24T18:20:37Z

Summary

This PR adds some UX improvements to how an index pattern can be entered:

Help text under the input was updated to mention that commas can be used
Added in-product docs popover to Index pattern input
Automatically show all sources again if a comma was entered
It's possible to switch between all available sources and only matching ones via new tabs
Index name will be fully highlighted if ES returns that it was an exact match for a wildcard
Persist the selected "Rows per page" value in localStorage

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

ninoslavmiskovic · 2023-02-27T10:34:52Z

Looks great @jughosta ! Much easier for the user to understand which index patterns they are selecting, and great that the user can select them via a checkbox.

Small comment: When the user selects to have "Rows per page" to e.g. 20 from 10, then it does not remember it next time I am creating a data view.

kertal · 2023-02-27T11:25:41Z

This is much more userfriedly 👍 and will be very helpful!

…fix'

…t' into improvements-for-data-view-flyout

elasticmachine · 2023-03-01T12:52:28Z

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

jughosta · 2023-03-01T12:53:48Z

Kept only minimum changes at this stage.

jughosta · 2023-03-01T17:54:17Z

src/plugins/data_view_editor/public/components/form_fields/title_docs_popover.tsx

+          </ul>
+        </EuiText>
+      </EuiPanel>
+    </EuiPopover>


Hi @gchaps,

Could you please review this new popover?
I pulled the text from docs.

I'm tempted to shorted the index pattern field description text now that there's a popover to just the first sentence.

I agree with shortening the hint text under the field description. I'll work up some text.

Found that back in v7.10 we had the following messaging: An index pattern can match a single source, for example, filebeat-4-3-22, or multiple data sources, filebeat-*.

Could it be a better hint for the input?

jughosta · 2023-03-01T17:55:29Z

src/plugins/data_view_editor/public/components/form_schema.ts

      defaultMessage:
-        'Enter an index pattern that matches one or more data sources. Use an asterisk (*) to match multiple characters. Spaces and the characters , /, ?, ", <, >, | are not allowed.',
+        'Enter an index pattern that matches one or more data sources. Use a wildcard (*) to match multiple sources. Separate with a comma (,) to match multiple single sources. Spaces and the characters /?"<>| are not allowed.',


@gchaps And this change.

mattkime

PR looks good, just awaiting final text.

kertal

Even with removing the ability to select indices by mouse (I already miss it, but it can be added in the future) this brings nice UX improvements to this area 👍

gchaps · 2023-03-02T16:49:24Z

My suggestion is to remove all hint text underneath the field and use this copy in the help popover. Also explain what an index pattern is.

An index pattern is a string that you use to match one or more data streams, indices, or aliases.

Match multiple sources with a wildcard (*).

filebeat-*
Separate multiple single sources with a comma (,).

filebeat-a,filebeat-b
Exclude a source with the minus sign (-).

-test3
Spaces and the characters /?”<> are not allowed.

jughosta · 2023-03-02T17:34:32Z

Thanks, @gchaps!

Updated:

mattkime · 2023-03-02T17:50:40Z

src/plugins/data_view_editor/public/components/form_fields/title_docs_popover.tsx

-                    pattern: <EuiCode>-test3</EuiCode>,
-                  }}
+                  id="indexPatternEditor.titleDocsPopover.dontUseSpecialCharactersDescription"
+                  defaultMessage="Spaces and the characters /?”<> are not allowed."


looks like the | char is missing, also the quote character changed. I'm comparing to the form schema change.

mattkime

one minor comment I'll trust you to resolve. Otherwise looks great!

gchaps · 2023-03-02T17:52:36Z

A couple of minor changes:

For the "Special characters" text:
- The quotation mark should be straight up and down
- The "|" is missing.
We need to say that the minus sign needs to be at the beginning:

Exclude a source by preceding it with a minus sign (-).

…t' into improvements-for-data-view-flyout

jughosta · 2023-03-02T17:56:35Z

@mattkime Good catch! Thanks!

jughosta · 2023-03-02T18:01:53Z

I like how clearer it is now! 😍 Thanks for your feedback!

kibana-ci · 2023-03-02T20:07:56Z

💚 Build Succeeded

Buildkite Build
Commit: bcdb2bd

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`dataViewEditor`	64	65	+1

Async chunks

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

id	before	after	diff
`dataViewEditor`	36.7KB	39.7KB	+3.0KB

Page load bundle

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

id	before	after	diff
`dataViewEditor`	10.5KB	10.7KB	+141.0B

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
`securitySolution`	428	430	+2

Total ESLint disabled count

id	before	after	diff
`securitySolution`	506	508	+2

History

💔 Build #111797 failed 2d0cdc1
💚 Build #111738 succeeded c02bf10
💚 Build #111324 succeeded f681b82
💚 Build #110998 succeeded 72eca96
💔 Build #110834 failed 6b8505a
💔 Build #110815 failed a5f7f3f

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @jughosta

elastic#152138) ## Summary This PR adds some UX improvements to how an index pattern can be entered: - [x] Help text under the input was updated to mention that commas can be used - [x] Added in-product docs popover to Index pattern input - [x] Automatically show all sources again if a comma was entered - [x] It's possible to switch between all available sources and only matching ones via new tabs - [x] Index name will be fully highlighted if ES returns that it was an exact match for a wildcard - [x] Persist the selected "Rows per page" value in localStorage <img width="400" alt="Screenshot 2023-03-01 at 12 02 40" src="https://user-images.githubusercontent.com/1415710/222121556-b0288fdc-8095-4a66-b781-d3d389c7f54a.png"> <img width="400" alt="Screenshot 2023-03-01 at 12 02 46" src="https://user-images.githubusercontent.com/1415710/222121559-ede0ec65-e49f-4253-afaa-7c7980f714c8.png"> <img width="400" alt="Screenshot 2023-03-01 at 11 56 59" src="https://user-images.githubusercontent.com/1415710/222120704-a0b2c974-ca03-450a-9beb-6fe72b03c929.png"> ### Checklist - [x] 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) - [x] [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 - [x] 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)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: kibanamachine <[email protected]>

jughosta added 4 commits February 24, 2023 15:17

[DataView] Show all indices when index pattern ends with ","

6ab50c3

[DataView] Allow to switch between view modes

00d4afd

[DataView] Improve interactions

ae5e3d3

[DataView] Improve the input help

e865d75

jughosta self-assigned this Feb 24, 2023

jughosta changed the title ~~[DataView] Improvements for index pattern input in data view flyout~~ [DataView] Improvements for index pattern input UX in data view flyout Feb 24, 2023

jughosta changed the title ~~[DataView] Improvements for index pattern input UX in data view flyout~~ [DataView] UX improvements for index pattern input in data view flyout Feb 24, 2023

jughosta added 4 commits February 24, 2023 19:51

[DataView] Clean up i18n

467f0f9

[DataView] Add tests

907b6cd

Merge branch 'main' into improvements-for-data-view-flyout

c77b427

[DataView] Add a fix for the warning

e359053

jughosta and others added 12 commits February 27, 2023 14:05

[DataView] Persist "indices per page" setting in localStorage

7898c9a

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

6033f31

…fix'

[DataView] Update tests

d8e6e2a

Merge remote-tracking branch 'origin/improvements-for-data-view-flyou…

b8cd0e7

…t' into improvements-for-data-view-flyout

Merge branch 'main' into improvements-for-data-view-flyout

189596c

[DataView] Add more tests. Handle partial match better.

9d02c5c

[DataView] Add in-product docs popover for the index pattern input

e116b8d

Merge branch 'main' into improvements-for-data-view-flyout

6ef4a30

Merge remote-tracking branch 'origin/improvements-for-data-view-flyou…

872f1ad

…t' into improvements-for-data-view-flyout

[DataView] Fix for checks

f961abb

[DataView] Improve matching logic when rendering

d65bfc5

Merge branch 'main' into improvements-for-data-view-flyout

6ceab6a

jughosta marked this pull request as ready for review March 1, 2023 12:52

jughosta requested a review from a team as a code owner March 1, 2023 12:52

jughosta commented Mar 1, 2023

View reviewed changes

mattkime requested changes Mar 1, 2023

View reviewed changes

kertal reviewed Mar 2, 2023

View reviewed changes

Merge branch 'main' into improvements-for-data-view-flyout

c02bf10

jughosta added 2 commits March 2, 2023 18:32

[DataView] Update wording

8877942

Merge branch 'main' into improvements-for-data-view-flyout

4380abe

jughosta requested a review from mattkime March 2, 2023 17:36

mattkime reviewed Mar 2, 2023

View reviewed changes

mattkime approved these changes Mar 2, 2023

View reviewed changes

jughosta added 2 commits March 2, 2023 18:55

[DataView] Fix character list

5614856

Merge remote-tracking branch 'origin/improvements-for-data-view-flyou…

f6c4003

…t' into improvements-for-data-view-flyout

[DataView] Update "minus" item

2d0cdc1

[DataView] Address build checks

bcdb2bd

jughosta enabled auto-merge (squash) March 2, 2023 19:22

jughosta merged commit 2ceaa64 into elastic:main Mar 2, 2023

gchaps mentioned this pull request Apr 25, 2023

[DOCS] Add documentation for 8.8 #155793

Closed

19 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataView] UX improvements for index pattern input in data view flyout #152138

[DataView] UX improvements for index pattern input in data view flyout #152138

jughosta commented Feb 24, 2023 •

edited

Loading

ninoslavmiskovic commented Feb 27, 2023 •

edited

Loading

kertal commented Feb 27, 2023

elasticmachine commented Mar 1, 2023

jughosta commented Mar 1, 2023

jughosta Mar 1, 2023

mattkime Mar 1, 2023

gchaps Mar 1, 2023 •

edited

Loading

jughosta Mar 2, 2023

jughosta Mar 1, 2023

mattkime left a comment •

edited

Loading

kertal left a comment

gchaps commented Mar 2, 2023 •

edited

Loading

jughosta commented Mar 2, 2023

mattkime Mar 2, 2023

mattkime left a comment

gchaps commented Mar 2, 2023

jughosta commented Mar 2, 2023

jughosta commented Mar 2, 2023 •

edited

Loading

kibana-ci commented Mar 2, 2023

ESLint disabled line counts

Total ESLint disabled count

[DataView] UX improvements for index pattern input in data view flyout #152138

[DataView] UX improvements for index pattern input in data view flyout #152138

Conversation

jughosta commented Feb 24, 2023 • edited Loading

Summary

Checklist

ninoslavmiskovic commented Feb 27, 2023 • edited Loading

kertal commented Feb 27, 2023

elasticmachine commented Mar 1, 2023

jughosta commented Mar 1, 2023

jughosta Mar 1, 2023

Choose a reason for hiding this comment

mattkime Mar 1, 2023

Choose a reason for hiding this comment

gchaps Mar 1, 2023 • edited Loading

Choose a reason for hiding this comment

jughosta Mar 2, 2023

Choose a reason for hiding this comment

jughosta Mar 1, 2023

Choose a reason for hiding this comment

mattkime left a comment • edited Loading

Choose a reason for hiding this comment

kertal left a comment

Choose a reason for hiding this comment

gchaps commented Mar 2, 2023 • edited Loading

jughosta commented Mar 2, 2023

mattkime Mar 2, 2023

Choose a reason for hiding this comment

mattkime left a comment

Choose a reason for hiding this comment

gchaps commented Mar 2, 2023

jughosta commented Mar 2, 2023

jughosta commented Mar 2, 2023 • edited Loading

kibana-ci commented Mar 2, 2023

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

ESLint disabled line counts

Total ESLint disabled count

History

jughosta commented Feb 24, 2023 •

edited

Loading

ninoslavmiskovic commented Feb 27, 2023 •

edited

Loading

gchaps Mar 1, 2023 •

edited

Loading

mattkime left a comment •

edited

Loading

gchaps commented Mar 2, 2023 •

edited

Loading

jughosta commented Mar 2, 2023 •

edited

Loading