[ML] Fix Create a data view option not working in Transforms (#168263)

(cherry picked from commit 6213e41)
elastic · Oct 10, 2023 · 44464ef · 44464ef
1 parent abb04cd
commit 44464ef
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 39 deletions.
diff --git a/...public/app/sections/transform_management/components/search_selection/search_selection.tsx b/...public/app/sections/transform_management/components/search_selection/search_selection.tsx
@@ -8,46 +8,25 @@
 import { EuiButton, EuiModalBody, EuiModalHeader, EuiModalHeaderTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import React, { type FC, Fragment, useCallback, useEffect, useRef } from 'react';
+import React, { type FC, Fragment } from 'react';
 
 import { SavedObjectFinder } from '@kbn/saved-objects-finder-plugin/public';
 import { useAppDependencies } from '../../../../app_dependencies';
 
 interface SearchSelectionProps {
   onSearchSelected: (searchId: string, searchType: string) => void;
-  onCloseModal: () => void;
+  createNewDataView: () => void;
+  canEditDataView: boolean;
 }
 
 const fixedPageSize: number = 8;
 
-export const SearchSelection: FC<SearchSelectionProps> = ({ onSearchSelected, onCloseModal }) => {
-  const { contentManagement, uiSettings, dataViewEditor } = useAppDependencies();
-
-  const canEditDataView = Boolean(dataViewEditor?.userPermissions.editDataView());
-
-  const closeDataViewEditor = useRef<() => void | undefined>();
-
-  const createNewDataView = useCallback(() => {
-    onCloseModal();
-    closeDataViewEditor.current = dataViewEditor?.openEditor({
-      onSave: async (dataView) => {
-        if (dataView.id) {
-          onSearchSelected(dataView.id, 'index-pattern');
-        }
-      },
-
-      allowAdHocDataView: true,
-    });
-  }, [dataViewEditor, onCloseModal, onSearchSelected]);
-
-  useEffect(function cleanUpFlyout() {
-    return () => {
-      // Close the editor when unmounting
-      if (closeDataViewEditor.current) {
-        closeDataViewEditor.current();
-      }
-    };
-  }, []);
+export const SearchSelection: FC<SearchSelectionProps> = ({
+  onSearchSelected,
+  createNewDataView,
+  canEditDataView,
+}) => {
+  const { contentManagement, uiSettings } = useAppDependencies();
 
   return (
     <>
@@ -103,7 +82,6 @@ export const SearchSelection: FC<SearchSelectionProps> = ({ onSearchSelected, on
           {canEditDataView ? (
             <EuiButton
               onClick={createNewDataView}
-              fill
               iconType="plusInCircle"
               data-test-subj="newDataViewButton"
               disabled={!canEditDataView}

diff --git a/...ugins/transform/public/app/sections/transform_management/transform_management_section.tsx b/...ugins/transform/public/app/sections/transform_management/transform_management_section.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { type FC, useEffect, useMemo, useState } from 'react';
+import React, { type FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import {
   EuiButton,
@@ -21,6 +21,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { IHttpFetchError } from '@kbn/core-http-browser';
 
+import { useAppDependencies } from '../../app_dependencies';
 import type { TransformListRow } from '../../common';
 import { isTransformStats } from '../../../../common/types/transform_stats';
 import { useGetTransformsStats } from '../../hooks/use_get_transform_stats';
@@ -76,6 +77,7 @@ const ErrorMessageCallout: FC<{
 export const TransformManagement: FC = () => {
   const { esTransform } = useDocumentationLinks();
   const { showNodeInfo } = useEnabledFeatures();
+  const { dataViewEditor } = useAppDependencies();
 
   const deleteTransforms = useDeleteTransforms();
 
@@ -167,16 +169,43 @@ export const TransformManagement: FC = () => {
   const [isSearchSelectionVisible, setIsSearchSelectionVisible] = useState(false);
   const [savedObjectId, setSavedObjectId] = useState<string | null>(null);
 
+  const onCloseModal = useCallback(() => setIsSearchSelectionVisible(false), []);
+  const onOpenModal = () => setIsSearchSelectionVisible(true);
+
+  const onSearchSelected = useCallback((id: string, type: string) => {
+    setSavedObjectId(id);
+  }, []);
+
+  const canEditDataView = Boolean(dataViewEditor?.userPermissions.editDataView());
+
+  const closeDataViewEditorRef = useRef<() => void | undefined>();
+
+  const createNewDataView = useCallback(() => {
+    onCloseModal();
+    closeDataViewEditorRef.current = dataViewEditor?.openEditor({
+      onSave: async (dataView) => {
+        if (dataView.id) {
+          onSearchSelected(dataView.id, 'index-pattern');
+        }
+      },
+
+      allowAdHocDataView: true,
+    });
+  }, [dataViewEditor, onCloseModal, onSearchSelected]);
+
+  useEffect(function cleanUpDataViewEditorFlyout() {
+    return () => {
+      // Close the editor when unmounting
+      if (closeDataViewEditorRef.current) {
+        closeDataViewEditorRef.current();
+      }
+    };
+  }, []);
+
   if (savedObjectId !== null) {
     return <RedirectToCreateTransform savedObjectId={savedObjectId} />;
   }
 
-  const onCloseModal = () => setIsSearchSelectionVisible(false);
-  const onOpenModal = () => setIsSearchSelectionVisible(true);
-  const onSearchSelected = (id: string, type: string) => {
-    setSavedObjectId(id);
-  };
-
   const docsLink = (
     <EuiButtonEmpty
       href={esTransform}
@@ -330,7 +359,11 @@ export const TransformManagement: FC = () => {
           className="transformCreateTransformSearchDialog"
           data-test-subj="transformSelectSourceModal"
         >
-          <SearchSelection onSearchSelected={onSearchSelected} onCloseModal={onCloseModal} />
+          <SearchSelection
+            onSearchSelected={onSearchSelected}
+            canEditDataView={canEditDataView}
+            createNewDataView={createNewDataView}
+          />
         </EuiModal>
       )}
     </>