import React , { useMemo , useState } from 'react' ; import { DataFrameAnalyticsListAction , DataFrameAnalyticsListRow } from '../analytics_list/common' ; import { editActionNameText , EditActionName } from './edit_action_name' ; export const isEditActionFlyoutVisible = ( editAction ) : editAction is Required < EditAction > => { return editAction . isFlyoutVisible === true && editAction . item !== undefined ; } ; export interface EditAction { isFlyoutVisible : boolean ; item ? : DataFrameAnalyticsListRow ; closeFlyout : ( ) => void ; openFlyout : ( newItem : DataFrameAnalyticsListRow ) => void ; } export const useEditAction = ( canStartStopDataFrameAnalytics ) => { const [ item , setItem ] = useState < DataFrameAnalyticsListRow > ( ) ; const [ isFlyoutVisible , setIsFlyoutVisible ] = useState ( false ) ; const closeFlyout = ( ) => setIsFlyoutVisible ( false ) ; const openFlyout = ( newItem ) => { setItem ( newItem ) ; setIsFlyoutVisible ( true ) ; } ; const action = useMemo ( ( ) => ( { name : ( ) => < EditActionName isDisabled = { ! canStartStopDataFrameAnalytics } />, enabled : ( ) => canStartStopDataFrameAnalytics , description : editActionNameText , icon : 'pencil' , type : 'icon' , onClick : ( i ) => openFlyout ( i ) , 'data-test-subj' : 'mlAnalyticsJobEditButton' , } ) , [ canStartStopDataFrameAnalytics ] ) ; return { action , isFlyoutVisible , item , closeFlyout , openFlyout , } ; } ;