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

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,112 @@
+/*
+ * 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 with the minus sign (-)."
+                />
+              </p>
+              <p>
+                <EuiCode>filebeat-*,-filebeat-c</EuiCode>
+              </p>
+            </li>
+            <li>
+              <p>
+                <FormattedMessage
+                  id="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',

src/plugins/data_view_editor/public/components/preview_panel/indices_list/indices_list.test.tsx

@@ -7,24 +7,39 @@
  */
 
 import React from 'react';
-import { IndicesList } from '.';
+import { IndicesList, IndicesListProps, PER_PAGE_STORAGE_KEY } from './indices_list';
 import { shallow } from 'enzyme';
 import { MatchedItem } from '@kbn/data-views-plugin/public';
+import { Storage } from '@kbn/kibana-utils-plugin/public';
 
 const indices = [
   { name: 'kibana', tags: [] },
   { name: 'es', tags: [] },
 ] as unknown as MatchedItem[];
 
+const similarIndices = [
+  { name: 'logstash', tags: [] },
+  { name: 'some_logs', tags: [] },
+] as unknown as MatchedItem[];
+
 describe('IndicesList', () => {
+  const commonProps: Omit<IndicesListProps, 'query'> = {
+    indices,
+    isExactMatch: jest.fn(() => false),
+  };
+
+  afterEach(() => {
+    new Storage(localStorage).remove(PER_PAGE_STORAGE_KEY);
+  });
+
   it('should render normally', () => {
-    const component = shallow(<IndicesList indices={indices} query="" />);
+    const component = shallow(<IndicesList {...commonProps} query="" />);
 
     expect(component).toMatchSnapshot();
   });
 
   it('should change pages', () => {
-    const component = shallow(<IndicesList indices={indices} query="" />);
+    const component = shallow(<IndicesList {...commonProps} query="" />);
 
     const instance = component.instance() as IndicesList;
 
@@ -36,7 +51,7 @@ describe('IndicesList', () => {
   });
 
   it('should change per page', () => {
-    const component = shallow(<IndicesList indices={indices} query="" />);
+    const component = shallow(<IndicesList {...commonProps} query="" />);
 
     const instance = component.instance() as IndicesList;
     instance.onChangePerPage(1);
@@ -46,14 +61,33 @@ describe('IndicesList', () => {
   });
 
   it('should highlight the query in the matches', () => {
-    const component = shallow(<IndicesList indices={indices} query="ki" />);
+    const component = shallow(
+      <IndicesList
+        {...commonProps}
+        query="es,ki"
+        isExactMatch={(indexName) => indexName === 'es'}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should highlight fully when an exact match', () => {
+    const component = shallow(
+      <IndicesList
+        {...commonProps}
+        indices={similarIndices}
+        query="logs*"
+        isExactMatch={(indexName) => indexName === 'some_logs'}
+      />
+    );
 
     expect(component).toMatchSnapshot();
   });
 
   describe('updating props', () => {
     it('should render all new indices', () => {
-      const component = shallow(<IndicesList indices={indices} query="" />);
+      const component = shallow(<IndicesList {...commonProps} query="" />);
 
       const moreIndices = [
         ...indices,