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

#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]>

src/plugins/data_view_editor/kibana.jsonc

@@ -13,6 +13,7 @@
     ],
     "requiredBundles": [
       "kibanaReact",
+      "kibanaUtils",
       "esUiShared"
     ]
   }

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

@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { findTestSubject } from '@elastic/eui/lib/test';
+import { mountWithIntl } from '@kbn/test-jest-helpers';
+import { TitleDocsPopover } from './title_docs_popover';
+
+describe('DataViewEditor TitleDocsPopover', () => {
+  it('should render normally', async () => {
+    const component = mountWithIntl(<TitleDocsPopover />);
+
+    expect(findTestSubject(component, 'indexPatternDocsButton').exists()).toBeTruthy();
+    expect(findTestSubject(component, 'indexPatternDocsPopoverContent').exists()).toBeFalsy();
+
+    findTestSubject(component, 'indexPatternDocsButton').simulate('click');
+
+    await component.update();
+
+    expect(findTestSubject(component, 'indexPatternDocsPopoverContent').exists()).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,114 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useState } from 'react';
+import { css } from '@emotion/react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import {
+  EuiButtonIcon,
+  EuiPanel,
+  EuiPopover,
+  EuiPopoverTitle,
+  EuiText,
+  EuiCode,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export const TitleDocsPopover: React.FC = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const helpButton = (
+    <EuiButtonIcon
+      onClick={() => setIsOpen((prev) => !prev)}
+      iconType="documentation"
+      data-test-subj="indexPatternDocsButton"
+      aria-label={i18n.translate('indexPatternEditor.titleDocsPopover.ariaLabel', {
+        defaultMessage: 'Index pattern examples',
+      })}
+    />
+  );
+
+  return (
+    <EuiPopover
+      button={helpButton}
+      isOpen={isOpen}
+      display="inlineBlock"
+      panelPaddingSize="none"
+      closePopover={() => setIsOpen(false)}
+    >
+      <EuiPopoverTitle paddingSize="s">
+        {i18n.translate('indexPatternEditor.titleDocsPopover.title', {
+          defaultMessage: 'Index pattern',
+        })}
+      </EuiPopoverTitle>
+      <EuiPanel
+        className="eui-yScroll"
+        css={css`
+          max-height: 40vh;
+          max-width: 500px;
+        `}
+        color="transparent"
+        paddingSize="m"
+      >
+        <EuiText size="s" data-test-subj="indexPatternDocsPopoverContent">
+          <p>
+            <FormattedMessage
+              id="indexPatternEditor.titleDocsPopover.indexPatternDescription"
+              defaultMessage="An index pattern is a string that you use to match one or more data streams, indices, or aliases."
+            />
+          </p>
+          <ul>
+            <li>
+              <p>
+                <FormattedMessage
+                  id="indexPatternEditor.titleDocsPopover.useWildcardDescription"
+                  defaultMessage="Match multiple sources with a wildcard (*)."
+                />
+              </p>
+              <p>
+                <EuiCode>filebeat-*</EuiCode>
+              </p>
+            </li>
+            <li>
+              <p>
+                <FormattedMessage
+                  id="indexPatternEditor.titleDocsPopover.useCommasDescription"
+                  defaultMessage="Separate multiple single sources with a comma (,)."
+                />
+              </p>
+              <p>
+                <EuiCode>filebeat-a,filebeat-b</EuiCode>
+              </p>
+            </li>
+            <li>
+              <p>
+                <FormattedMessage
+                  id="indexPatternEditor.titleDocsPopover.useMinusDescription"
+                  defaultMessage="Exclude a source by preceding it with a minus sign (-)."
+                />
+              </p>
+              <p>
+                <EuiCode>filebeat-*,-filebeat-c</EuiCode>
+              </p>
+            </li>
+            <li>
+              <p>
+                {i18n.translate(
+                  'indexPatternEditor.titleDocsPopover.dontUseSpecialCharactersDescription',
+                  {
+                    defaultMessage: 'Spaces and the characters /?"<>| are not allowed.',
+                  }
+                )}
+              </p>
+            </li>
+          </ul>
+        </EuiText>
+      </EuiPanel>
+    </EuiPopover>
+  );
+};

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

@@ -22,6 +22,7 @@ import { canAppendWildcard } from '../../lib';
 import { schema } from '../form_schema';
 import { RollupIndicesCapsResponse, IndexPatternConfig, MatchedIndicesSet } from '../../types';
 import { matchedIndiciesDefault } from '../../data_view_editor_service';
+import { TitleDocsPopover } from './title_docs_popover';
 
 interface TitleFieldProps {
   isRollup: boolean;
@@ -194,6 +195,8 @@ export const TitleField = ({
               isLoading={field.isValidating}
               fullWidth
               data-test-subj="createIndexPatternTitleInput"
+              append={<TitleDocsPopover />}
+              placeholder="example-*"
             />
           </EuiFormRow>
         );

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

@@ -28,10 +28,6 @@ export const schema = {
       defaultMessage: 'Index pattern',
     }),
     defaultValue: '',
-    helpText: i18n.translate('indexPatternEditor.validations.titleHelpText', {
-      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.',
-    }),
     validations: [
       {
         validator: fieldValidators.emptyField(
@@ -84,7 +80,7 @@ export const schema = {
   },
   isAdHoc: {
     label: i18n.translate('indexPatternEditor.editor.form.IsAdHocLabel', {
-      defaultMessage: 'Creeate AdHoc DataView',
+      defaultMessage: 'Create AdHoc DataView',
     }),
     defaultValue: false,
     type: 'hidden',