[ML] Adds support for ad-hoc Data Views for testing models in Trained Models UI

x-pack/plugins/ml/public/application/components/create_data_view_button/create_data_view_button.tsx

@@ -8,13 +8,14 @@
 import { EuiButton } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import React, { useCallback, useEffect, useRef } from 'react';
+import { type DataView } from '@kbn/data-plugin/common';
 import { useMlKibana } from '../../contexts/kibana';
 
 export const CreateDataViewButton = ({
   onDataViewCreated,
   allowAdHocDataView = false,
 }: {
-  onDataViewCreated: (id: string, type: string, name?: string) => void;
+  onDataViewCreated: (dataView: DataView) => void;
   allowAdHocDataView?: boolean;
 }) => {
   const { dataViewEditor } = useMlKibana().services;
@@ -25,10 +26,9 @@ export const CreateDataViewButton = ({
     closeDataViewEditorRef.current = dataViewEditor?.openEditor({
       onSave: async (dataView) => {
         if (dataView.id && onDataViewCreated) {
-          onDataViewCreated(dataView.id, 'index-pattern', dataView.name);
+          onDataViewCreated(dataView);
         }
       },
-
       allowAdHocDataView,
     });
   }, [onDataViewCreated, dataViewEditor, allowAdHocDataView]);

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/source_selection/source_selection.tsx

@@ -160,7 +160,12 @@ export const SourceSelection: FC = () => {
               uiSettings,
             }}
           >
-            <CreateDataViewButton onDataViewCreated={onSearchSelected} allowAdHocDataView={true} />
+            <CreateDataViewButton
+              onDataViewCreated={(dataView) => {
+                onSearchSelected(dataView.id!, 'index-pattern', dataView.getIndexPattern());
+              }}
+              allowAdHocDataView={true}
+            />
           </SavedObjectFinder>
         </EuiPanel>
       </EuiPageBody>

x-pack/plugins/ml/public/application/jobs/new_job/pages/index_or_search/page.tsx

@@ -89,7 +89,9 @@ export const Page: FC<PageProps> = ({
           >
             <EuiFlexGroup direction="row" gutterSize="s">
               <CreateDataViewButton
-                onDataViewCreated={onObjectSelection}
+                onDataViewCreated={(dataView) => {
+                  onObjectSelection(dataView.id!, 'index-pattern', dataView.getIndexPattern());
+                }}
                 allowAdHocDataView={true}
               />
               {extraButtons ? extraButtons : null}

x-pack/plugins/ml/public/application/model_management/test_models/models/index_input.tsx

@@ -6,7 +6,8 @@
  */
 
 import type { FC } from 'react';
-import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
 
 import useObservable from 'react-use/lib/useObservable';
 import { firstValueFrom } from 'rxjs';
@@ -15,14 +16,17 @@ import {
   EuiAccordion,
   EuiCode,
   EuiCodeBlock,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiFormRow,
-  EuiSpacer,
   EuiSelect,
+  EuiSpacer,
   EuiText,
 } from '@elastic/eui';
 
 import { isPopulatedObject } from '@kbn/ml-is-populated-object';
 import { i18n } from '@kbn/i18n';
+import { CreateDataViewButton } from '../../../components/create_data_view_button';
 import { useMlKibana } from '../../../contexts/kibana';
 import { RUNNING_STATE } from './inference_base';
 import type { InferrerType } from '.';
@@ -45,6 +49,7 @@ export const InferenceInputFormIndexControls: FC<Props> = ({
     setSelectedDataViewId,
     selectedField,
     setSelectedField,
+    setDataViewListItems,
   } = data;
 
   const runningState = useObservable(inferrer.getRunningState$(), inferrer.getRunningState());
@@ -53,27 +58,57 @@ export const InferenceInputFormIndexControls: FC<Props> = ({
 
   return (
     <>
-      <EuiFormRow label="Index" fullWidth>
-        {disableIndexSelection ? (
-          <EuiText grow={false}>
-            <EuiCode>
-              {dataViewListItems.find((item) => item.value === selectedDataViewId)?.text}
-            </EuiCode>
-          </EuiText>
-        ) : (
-          <EuiSelect
-            options={dataViewListItems}
-            value={selectedDataViewId}
-            onChange={(e) => {
-              inferrer.setSelectedDataViewId(e.target.value);
-              setSelectedDataViewId(e.target.value);
-            }}
-            hasNoInitialSelection={true}
-            disabled={runningState === RUNNING_STATE.RUNNING}
+      <EuiFlexGroup gutterSize={'s'} justifyContent={'spaceBetween'} alignItems={'flexEnd'}>
+        <EuiFlexItem grow={true}>
+          <EuiFormRow
+            label={
+              <FormattedMessage
+                id="xpack.ml.trainedModels.testModelsFlyout.dataViewTitle"
+                defaultMessage="Data view"
+              />
+            }
             fullWidth
+          >
+            {disableIndexSelection ? (
+              <EuiText grow={false}>
+                <EuiCode>
+                  {dataViewListItems.find((item) => item.value === selectedDataViewId)?.text}
+                </EuiCode>
+              </EuiText>
+            ) : (
+              <EuiSelect
+                options={dataViewListItems}
+                value={selectedDataViewId}
+                onChange={(e) => {
+                  inferrer.setSelectedDataViewId(e.target.value);
+                  setSelectedDataViewId(e.target.value);
+                }}
+                hasNoInitialSelection={true}
+                disabled={runningState === RUNNING_STATE.RUNNING}
+                fullWidth
+              />
+            )}
+          </EuiFormRow>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <CreateDataViewButton
+            allowAdHocDataView
+            onDataViewCreated={(dataView) => {
+              setDataViewListItems((prev) => {
+                return [
+                  ...prev,
+                  {
+                    text: dataView.getIndexPattern(),
+                    value: dataView.id!,
+                  },
+                ].sort((a, b) => a.text.localeCompare(b.text));
+              });
+              setSelectedDataViewId(dataView.id!);
+            }}
           />
-        )}
-      </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
       <EuiSpacer size="m" />
       <EuiFormRow
         label={i18n.translate('xpack.ml.trainedModels.testModelsFlyout.indexInput.fieldInput', {
@@ -277,5 +312,6 @@ export function useIndexInput({
     setSelectedDataViewId,
     selectedField,
     setSelectedField,
+    setDataViewListItems,
   };
 }