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

# Backport

This will backport the following commits from `main` to `8.11`:
- [[ML] Fix Create a data view option not working in Transforms
(#168263)](https://github.com/elastic/kibana/pull/168263)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Quynh Nguyen
(Quinn)","email":"43350163+qn895@users.noreply.github.com"},"sourceCommit":{"committedDate":"2023-10-10T18:29:51Z","message":"[ML]
Fix Create a data view option not working in Transforms
(#168263)","sha":"6213e41b6cc4915e9003999949d7c190e05ac256","branchLabelMapping":{"^v8.12.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":[":ml","release_note:skip","v8.11.0","v8.12.0","v8.11.1"],"number":168263,"url":"https://github.com/elastic/kibana/pull/168263","mergeCommit":{"message":"[ML]
Fix Create a data view option not working in Transforms
(#168263)","sha":"6213e41b6cc4915e9003999949d7c190e05ac256"}},"sourceBranch":"main","suggestedTargetBranches":["8.11"],"targetPullRequestStates":[{"branch":"8.11","label":"v8.11.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.12.0","labelRegex":"^v8.12.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/168263","number":168263,"mergeCommit":{"message":"[ML]
Fix Create a data view option not working in Transforms
(#168263)","sha":"6213e41b6cc4915e9003999949d7c190e05ac256"}}]}]
BACKPORT-->

Co-authored-by: Quynh Nguyen (Quinn) <43350163+qn895@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2023-10-10 15:41:21 -04:00 committed by GitHub
parent a88e7d2dc8
commit 07d9bacf11
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 39 deletions

View file

@ -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}

View file

@ -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>
)}
</>