[data view editor] Form state refactor - create service, replace useEffect with observables

src/plugins/data_view_editor/public/components/data_view_editor_lazy.tsx

@@ -11,12 +11,10 @@ import { EuiLoadingSpinner } from '@elastic/eui';
 
 import { DataViewEditorProps } from '../types';
 
-const IndexPatternFlyoutContentContainer = lazy(
-  () => import('./data_view_flyout_content_container')
-);
+const DataViewFlyoutContentContainer = lazy(() => import('./data_view_flyout_content_container'));
 
 export const DataViewEditorLazy = (props: DataViewEditorProps) => (
   <Suspense fallback={<EuiLoadingSpinner size="xl" />}>
-    <IndexPatternFlyoutContentContainer {...props} />
+    <DataViewFlyoutContentContainer {...props} />
   </Suspense>
 );

src/plugins/data_view_editor/public/components/data_view_flyout_content_container.tsx

@@ -12,8 +12,14 @@ import { i18n } from '@kbn/i18n';
 import { DataViewSpec, useKibana } from '../shared_imports';
 import { IndexPatternEditorFlyoutContent } from './data_view_editor_flyout_content';
 import { DataViewEditorContext, DataViewEditorProps } from '../types';
+import { DataViewEditorService } from '../data_view_editor_service';
 
-const IndexPatternFlyoutContentContainer = ({
+// @ts-ignore
+export const DataViewEditorServiceContext = React.createContext<{
+  dataViewEditorService: DataViewEditorService;
+}>();
+
+const DataViewFlyoutContentContainer = ({
   onSave,
   onCancel = () => {},
   defaultTypeIsRollup,
@@ -23,7 +29,7 @@ const IndexPatternFlyoutContentContainer = ({
   showManagementLink,
 }: DataViewEditorProps) => {
   const {
-    services: { dataViews, notifications },
+    services: { dataViews, notifications, http },
   } = useKibana<DataViewEditorContext>();
 
   const onSaveClick = async (dataViewSpec: DataViewSpec, persist: boolean = true) => {
@@ -63,17 +69,21 @@ const IndexPatternFlyoutContentContainer = ({
   };
 
   return (
-    <IndexPatternEditorFlyoutContent
-      onSave={onSaveClick}
-      onCancel={onCancel}
-      defaultTypeIsRollup={defaultTypeIsRollup}
-      requireTimestampField={requireTimestampField}
-      editData={editData}
-      showManagementLink={showManagementLink}
-      allowAdHoc={allowAdHocDataView || false}
-    />
+    <DataViewEditorServiceContext.Provider
+      value={{ dataViewEditorService: new DataViewEditorService(http, dataViews) }}
+    >
+      <IndexPatternEditorFlyoutContent
+        onSave={onSaveClick}
+        onCancel={onCancel}
+        defaultTypeIsRollup={defaultTypeIsRollup}
+        requireTimestampField={requireTimestampField}
+        editData={editData}
+        showManagementLink={showManagementLink}
+        allowAdHoc={allowAdHocDataView || false}
+      />
+    </DataViewEditorServiceContext.Provider>
   );
 };
 
 /* eslint-disable import/no-default-export */
-export default IndexPatternFlyoutContentContainer;
+export default DataViewFlyoutContentContainer;

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

@@ -9,8 +9,9 @@
 import React, { ChangeEvent, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFormRow, EuiFieldText } from '@elastic/eui';
+import { BehaviorSubject } from 'rxjs';
+import useObservable from 'react-use/lib/useObservable';
 import {
-  DataView,
   UseField,
   ValidationConfig,
   FieldConfig,
@@ -20,8 +21,7 @@ import { IndexPatternConfig } from '../../types';
 import { schema } from '../form_schema';
 
 interface NameFieldProps {
-  editData?: DataView;
-  existingDataViewNames: string[];
+  existingDataViewNames$: BehaviorSubject<string[]>;
 }
 
 interface GetNameConfigArgs {
@@ -53,13 +53,14 @@ const getNameConfig = ({ namesNotAllowed }: GetNameConfigArgs): FieldConfig<stri
   };
 };
 
-export const NameField = ({ editData, existingDataViewNames }: NameFieldProps) => {
+export const NameField = ({ existingDataViewNames$ }: NameFieldProps) => {
+  const namesNotAllowed = useObservable(existingDataViewNames$, []);
   const config = useMemo(
     () =>
       getNameConfig({
-        namesNotAllowed: existingDataViewNames,
+        namesNotAllowed,
       }),
-    [existingDataViewNames]
+    [namesNotAllowed]
   );
 
   return (

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

@@ -8,8 +8,10 @@
 
 import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-
+import useObservable from 'react-use/lib/useObservable';
+import { BehaviorSubject, Subject } from 'rxjs';
 import { EuiFormRow, EuiComboBox, EuiFormHelpText, EuiComboBoxOptionOption } from '@elastic/eui';
+import { matchedIndiciesDefault } from '../data_view_editor_flyout_content';
 
 import {
   UseField,
@@ -18,17 +20,17 @@ import {
   getFieldValidityAndErrorMessage,
 } from '../../shared_imports';
 
-import { TimestampOption } from '../../types';
+import { TimestampOption, MatchedIndicesSet } from '../../types';
 import { schema } from '../form_schema';
 
 interface Props {
-  options: TimestampOption[];
-  isLoadingOptions: boolean;
-  isLoadingMatchedIndices: boolean;
-  hasMatchedIndices: boolean;
+  options$: Subject<TimestampOption[]>;
+  isLoadingOptions$: BehaviorSubject<boolean>;
+  isLoadingMatchedIndices$: BehaviorSubject<boolean>;
+  matchedIndices$: Subject<MatchedIndicesSet>;
 }
 
-const requireTimestampOptionValidator = (options: Props['options']): ValidationConfig => ({
+const requireTimestampOptionValidator = (options: TimestampOption[]): ValidationConfig => ({
   validator: async ({ value }) => {
     const isValueRequired = !!options.length;
     if (isValueRequired && !value) {
@@ -45,7 +47,7 @@ const requireTimestampOptionValidator = (options: Props['options']): ValidationC
 });
 
 const getTimestampConfig = (
-  options: Props['options']
+  options: TimestampOption[]
 ): FieldConfig<EuiComboBoxOptionOption<string>> => {
   const timestampFieldConfig = schema.timestampField;
 
@@ -70,15 +72,22 @@ const timestampFieldHelp = i18n.translate('indexPatternEditor.editor.form.timeFi
 });
 
 export const TimestampField = ({
-  options = [],
-  isLoadingOptions = false,
-  isLoadingMatchedIndices,
-  hasMatchedIndices,
+  options$,
+  isLoadingOptions$,
+  isLoadingMatchedIndices$,
+  matchedIndices$,
 }: Props) => {
+  const options = useObservable<TimestampOption[]>(options$, []);
+  const isLoadingOptions = useObservable<boolean>(isLoadingOptions$, false);
+  const isLoadingMatchedIndices = useObservable<boolean>(isLoadingMatchedIndices$, false);
+  const hasMatchedIndices = !!useObservable(matchedIndices$, matchedIndiciesDefault)
+    .exactMatchedIndices.length;
+
   const optionsAsComboBoxOptions = options.map(({ display, fieldName }) => ({
     label: display,
     value: fieldName,
   }));
+
   const timestampConfig = useMemo(() => getTimestampConfig(options), [options]);
   const selectTimestampHelp = options.length ? timestampFieldHelp : '';
 
@@ -98,8 +107,12 @@ export const TimestampField = ({
 
         const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
         const isDisabled = !optionsAsComboBoxOptions.length;
+        // if the value isn't in the list then don't use it.
+        const valueInList = !!optionsAsComboBoxOptions.find(
+          (option) => option.value === value.value
+        );
 
-        if (!value && !isDisabled) {
+        if ((!value || !valueInList) && !isDisabled) {
           const val = optionsAsComboBoxOptions.filter((el) => el.value === '@timestamp');
           if (val.length) {
             setValue(val[0]);
@@ -124,7 +137,7 @@ export const TimestampField = ({
                   )}
                   singleSelection={{ asPlainText: true }}
                   options={optionsAsComboBoxOptions}
-                  selectedOptions={value ? [value] : undefined}
+                  selectedOptions={value && valueInList ? [value] : undefined}
                   onChange={(newValue) => {
                     if (newValue.length === 0) {
                       // Don't allow clearing the type. One must always be selected

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

@@ -9,6 +9,8 @@
 import React, { ChangeEvent, useState, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFormRow, EuiFieldText } from '@elastic/eui';
+import { Subject } from 'rxjs';
+import useObservable from 'react-use/lib/useObservable';
 import { MatchedItem } from '@kbn/data-views-plugin/public';
 import {
   UseField,
@@ -19,6 +21,7 @@ import {
 import { canAppendWildcard, removeSpaces } from '../../lib';
 import { schema } from '../form_schema';
 import { RollupIndicesCapsResponse, IndexPatternConfig, MatchedIndicesSet } from '../../types';
+import { matchedIndiciesDefault } from '../data_view_editor_flyout_content';
 
 interface RefreshMatchedIndicesResult {
   matchedIndicesResult: MatchedIndicesSet;
@@ -27,7 +30,7 @@ interface RefreshMatchedIndicesResult {
 
 interface TitleFieldProps {
   isRollup: boolean;
-  matchedIndices: MatchedItem[];
+  matchedIndices$: Subject<MatchedIndicesSet>;
   rollupIndicesCapabilities: RollupIndicesCapsResponse;
   refreshMatchedIndices: (title: string) => Promise<RefreshMatchedIndicesResult>;
 }
@@ -134,11 +137,12 @@ const getTitleConfig = ({
 
 export const TitleField = ({
   isRollup,
-  matchedIndices,
+  matchedIndices$,
   rollupIndicesCapabilities,
   refreshMatchedIndices,
 }: TitleFieldProps) => {
   const [appendedWildcard, setAppendedWildcard] = useState<boolean>(false);
+  const matchedIndices = useObservable(matchedIndices$, matchedIndiciesDefault).exactMatchedIndices;
 
   const fieldConfig = useMemo(
     () =>

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

@@ -144,18 +144,35 @@ export class IndicesList extends React.Component<IndicesListProps, IndicesListSt
   }
 
   highlightIndexName(indexName: string, query: string) {
-    const queryIdx = indexName.indexOf(query);
-    if (!query || queryIdx === -1) {
+    if (!query) {
       return indexName;
     }
 
-    const preStr = indexName.substr(0, queryIdx);
-    const postStr = indexName.substr(queryIdx + query.length);
+    const queryAsArray = query.split(',').map((q) => q.trim());
+    let queryIdx = -1;
+    let queryWithoutWildcard = '';
+    for (let i = 0; i < queryAsArray.length; i++) {
+      const queryComponent = queryAsArray[i];
+      queryWithoutWildcard = queryComponent.endsWith('*')
+        ? queryComponent.substring(0, queryComponent.length - 1)
+        : queryComponent;
+      queryIdx = indexName.indexOf(queryWithoutWildcard);
+
+      if (queryIdx !== -1) {
+        break;
+      }
+    }
+    if (queryIdx === -1) {
+      return indexName;
+    }
+
+    const preStr = indexName.substring(0, queryIdx);
+    const postStr = indexName.substr(queryIdx + queryWithoutWildcard.length);
 
     return (
       <span>
         {preStr}
-        <strong>{query}</strong>
+        <strong>{queryWithoutWildcard}</strong>
         {postStr}
       </span>
     );
@@ -164,15 +181,11 @@ export class IndicesList extends React.Component<IndicesListProps, IndicesListSt
   render() {
     const { indices, query, ...rest } = this.props;
 
-    const queryWithoutWildcard = query.endsWith('*') ? query.substr(0, query.length - 1) : query;
-
     const paginatedIndices = indices.slice(this.pager.firstItemIndex, this.pager.lastItemIndex + 1);
     const rows = paginatedIndices.map((index, key) => {
       return (
         <EuiTableRow key={key}>
-          <EuiTableRowCell>
-            {this.highlightIndexName(index.name, queryWithoutWildcard)}
-          </EuiTableRowCell>
+          <EuiTableRowCell>{this.highlightIndexName(index.name, query)}</EuiTableRowCell>
           <EuiTableRowCell>
             {index.tags.map((tag: Tag) => {
               return (

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

@@ -8,20 +8,24 @@
 
 import React from 'react';
 import { EuiSpacer } from '@elastic/eui';
+import useObservable from 'react-use/lib/useObservable';
+import { Subject } from 'rxjs';
 import { INDEX_PATTERN_TYPE } from '@kbn/data-views-plugin/public';
 import { StatusMessage } from './status_message';
 import { IndicesList } from './indices_list';
+import { matchedIndiciesDefault } from '../data_view_editor_flyout_content';
 
 import { MatchedIndicesSet } from '../../types';
 
 interface Props {
   type: INDEX_PATTERN_TYPE;
   allowHidden: boolean;
   title: string;
-  matched: MatchedIndicesSet;
+  matchedIndices$: Subject<MatchedIndicesSet>;
 }
 
-export const PreviewPanel = ({ type, allowHidden, title = '', matched }: Props) => {
+export const PreviewPanel = ({ type, allowHidden, title = '', matchedIndices$ }: Props) => {
+  const matched = useObservable(matchedIndices$, matchedIndiciesDefault);
   const indicesListContent =
     matched.visibleIndices.length || matched.allIndices.length ? (
       <>