TSVB] Replace indexpattern input text with a combobox

src/plugins/vis_type_timeseries/public/application/components/index_pattern.js

@@ -48,6 +48,7 @@ import { VisDataContext } from '../contexts/vis_data_context';
 import { getUISettings } from '../../services';
 import { AUTO_INTERVAL } from '../../../common/constants';
 import { UI_SETTINGS } from '../../../../data/common';
+import { IndexPatternSuggest } from './index_pattern_suggest';
 
 const RESTRICT_FIELDS = [KBN_FIELD_TYPES.DATE];
 const LEVEL_OF_DETAIL_STEPS = 10;
@@ -186,12 +187,12 @@ export const IndexPattern = ({
               })
             }
           >
-            <EuiFieldText
-              data-test-subj="metricsIndexPatternInput"
-              disabled={disabled}
-              placeholder={model.default_index_pattern}
-              onChange={handleTextChange(indexPatternName)}
+            <IndexPatternSuggest
               value={model[indexPatternName]}
+              indexPatternName={indexPatternName}
+              onChange={onChange}
+              defaultIndexPattern={model.default_index_pattern}
+              disabled={disabled}
             />
           </EuiFormRow>
         </EuiFlexItem>

src/plugins/vis_type_timeseries/public/application/components/index_pattern_suggest.test.tsx

@@ -0,0 +1,44 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { IndexPatternSuggest } from './index_pattern_suggest';
+
+test('render', () => {
+  const component = shallow(
+    <IndexPatternSuggest
+      value="test"
+      indexPatternName="indexPattern"
+      defaultIndexPattern="defaultIndex"
+      onChange={() => {}}
+    />
+  );
+  expect(component).toMatchInlineSnapshot(`
+    <EuiSuggest
+      data-test-subj="metricsIndexPatternInput"
+      onInputChange={[Function]}
+      onItemClick={[Function]}
+      placeholder="defaultIndex"
+      suggestions={Array []}
+      value="test"
+    />
+  `);
+});

src/plugins/vis_type_timeseries/public/application/components/index_pattern_suggest.tsx

@@ -0,0 +1,94 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useEffect, useState, useCallback } from 'react';
+import { EuiSuggest, EuiSuggestProps } from '@elastic/eui';
+import { getDataStart } from '../../services';
+import { INDEXES_SEPARATOR } from '../../../common/constants';
+
+interface IndexPatternSuggestProps {
+  value: string;
+  indexPatternName: string;
+  defaultIndexPattern: string;
+  onChange: Function;
+  disabled?: boolean;
+}
+
+const toSuggesOptions = (options: string[]) =>
+  options.map((label) => ({ type: { iconType: 'indexPatternApp', color: 'tint5' }, label }));
+
+export const IndexPatternSuggest = ({
+  value,
+  indexPatternName,
+  onChange,
+  disabled,
+  defaultIndexPattern,
+}: IndexPatternSuggestProps) => {
+  const [availableIndexes, setAvailableIndexes] = useState<string[]>([]);
+  const [inputValue, setInputValue] = useState<string>(value);
+
+  const splittedIndexes = value.split(INDEXES_SEPARATOR);
+  const prefix = splittedIndexes[Math.max(0, splittedIndexes.length - 1)];
+
+  const suggestions = availableIndexes.filter(
+    (index) =>
+      index !== prefix &&
+      index.startsWith(prefix) &&
+      !inputValue.includes(index + INDEXES_SEPARATOR)
+  );
+
+  useEffect(() => {
+    async function fetchIndexes() {
+      setAvailableIndexes(await getDataStart().indexPatterns.getTitles());
+    }
+
+    fetchIndexes();
+  }, []);
+
+  useEffect(() => {
+    if (inputValue !== value) {
+      onChange({
+        [indexPatternName]: inputValue,
+      });
+    }
+  }, [onChange, inputValue, indexPatternName, value]);
+
+  const onItemClick: EuiSuggestProps['onItemClick'] = useCallback(
+    ({ label }) => {
+      setInputValue(value.substring(0, value.lastIndexOf(prefix)) + label);
+    },
+    [value, prefix]
+  );
+
+  const onInputChange: EuiSuggestProps['onInputChange'] = useCallback((target) => {
+    setInputValue(target.value);
+  }, []);
+
+  return (
+    <EuiSuggest
+      onInputChange={onInputChange}
+      onItemClick={onItemClick}
+      // @ts-ignore
+      value={inputValue}
+      placeholder={defaultIndexPattern}
+      disabled={disabled}
+      suggestions={toSuggesOptions(suggestions)}
+      data-test-subj="metricsIndexPatternInput"
+    />
+  );
+};