import './visualize_editor.scss' ; import React , { RefObject , useCallback , useEffect } from 'react' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { i18n } from '@kbn/i18n' ; import { EuiScreenReaderOnly } from '@elastic/eui' ; import { AppMountParameters } from 'kibana/public' ; import { VisualizeTopNav } from './visualize_top_nav' ; import { ExperimentalVisInfo } from './experimental_vis_info' ; import { useKibana } from '../../../../kibana_react/public' ; import { urlFor } from '../../../../visualizations/public' ; import { getUISettings } from '../../services' ; import { SplitChartWarning , NEW_HEATMAP_CHARTS_LIBRARY } from './split_chart_warning' ; import { SavedVisInstance , VisualizeAppState , VisualizeServices , VisualizeAppStateContainer , VisualizeEditorVisInstance , } from '../types' ; interface VisualizeEditorCommonProps { visInstance ? : VisualizeEditorVisInstance ; appState : VisualizeAppStateContainer | null ; currentAppState ? : VisualizeAppState ; isChromeVisible ? : boolean ; hasUnsavedChanges : boolean ; setHasUnsavedChanges : ( value : boolean ) => void ; hasUnappliedChanges : boolean ; isEmbeddableRendered : boolean ; onAppLeave : AppMountParameters [ 'onAppLeave' ] ; visEditorRef : RefObject < HTMLDivElement > ; originatingApp ? : string ; setOriginatingApp ? : ( originatingApp : string | undefined ) => void ; originatingPath ? : string ; visualizationIdFromUrl ? : string ; embeddableId ? : string ; } export const VisualizeEditorCommon = ( { visInstance , appState , currentAppState , isChromeVisible , hasUnsavedChanges , setHasUnsavedChanges , hasUnappliedChanges , isEmbeddableRendered , onAppLeave , originatingApp , originatingPath , setOriginatingApp , visualizationIdFromUrl , embeddableId , visEditorRef , } ) => { const { services } = useKibana < VisualizeServices > ( ) ; useEffect ( ( ) => { async function aliasMatchRedirect ( ) { const sharingSavedObjectProps = visInstance ?. savedVis . sharingSavedObjectProps ; if ( services . spaces && sharingSavedObjectProps ?. outcome === 'aliasMatch' ) { const newObjectId = sharingSavedObjectProps ?. aliasTargetId ; const newPath = `${ urlFor ( newObjectId ! ) }${ services . history . location . search }` ; await services . spaces . ui . redirectLegacyUrl ( newPath , i18n . translate ( 'visualizations.legacyUrlConflict.objectNoun' , { defaultMessage : '{visName} visualization' , values : { visName : visInstance ?. vis ?. type . title , } , } ) ) ; return ; } } aliasMatchRedirect ( ) ; } , [ visInstance ?. savedVis . sharingSavedObjectProps , visInstance ?. vis ?. type . title , services ] ) ; const getLegacyUrlConflictCallout = useCallback ( ( ) => { const currentObjectId = visInstance ?. savedVis . id ; const sharingSavedObjectProps = visInstance ?. savedVis . sharingSavedObjectProps ; if ( services . spaces && sharingSavedObjectProps ?. outcome === 'conflict' && currentObjectId ) { const otherObjectId = sharingSavedObjectProps ?. aliasTargetId ! ; const otherObjectPath = `${ urlFor ( otherObjectId ) }${ services . history . location . search }` ; return services . spaces . ui . components . getLegacyUrlConflict ( { objectNoun : i18n . translate ( 'visualizations.legacyUrlConflict.objectNoun' , { defaultMessage : '{visName} visualization' , values : { visName : visInstance ?. vis ?. type . title , } , } ) , currentObjectId , otherObjectId , otherObjectPath , } ) ; } return null ; } , [ visInstance ?. savedVis , services , visInstance ?. vis ?. type . title ] ) ; const isSplitChart = visInstance ?. vis ?. data ?. aggs ?. aggs . some ( ( agg ) => agg . schema === 'split' ) ; const hasHeatmapLegacyhartsEnabled = getUISettings ( ) . get ( NEW_HEATMAP_CHARTS_LIBRARY ) ; return ( < div className = { `app-container visEditor visEditor--${ visInstance ?. vis . type . name }` } > { visInstance && appState && currentAppState && ( < VisualizeTopNav currentAppState = { currentAppState } hasUnsavedChanges = { hasUnsavedChanges } setHasUnsavedChanges = { setHasUnsavedChanges } isChromeVisible = { isChromeVisible } isEmbeddableRendered = { isEmbeddableRendered } hasUnappliedChanges = { hasUnappliedChanges } originatingApp = { originatingApp } originatingPath = { originatingPath } setOriginatingApp = { setOriginatingApp } visInstance = { visInstance } stateContainer = { appState } visualizationIdFromUrl = { visualizationIdFromUrl } embeddableId = { embeddableId } onAppLeave = { onAppLeave } / > ) } { visInstance ?. vis ?. type ?. stage === 'experimental' && < ExperimentalVisInfo />} { ! hasHeatmapLegacyhartsEnabled && isSplitChart && visInstance ?. vis . type . name === 'heatmap' && < SplitChartWarning />} { visInstance ?. vis ?. type ?. getInfoMessage ?. ( visInstance . vis ) } { getLegacyUrlConflictCallout ( ) } { visInstance && ( < EuiScreenReaderOnly > < h1 > { 'savedVis' in visInstance && visInstance . savedVis . id ? ( < FormattedMessage id = "visualizations.pageHeading" defaultMessage = "{chartName} {chartType} visualization" values = { { chartName : ( visInstance as SavedVisInstance ) . savedVis . title , chartType : ( visInstance as SavedVisInstance ) . vis . type . title , } } />) : (<FormattedMessage id="visualizations.byValue_pageHeading" defaultMessage="Visualization of type {chartType} embedded into {originatingApp} app" values={{ chartType : visInstance . vis . type . title , originatingApp : originatingApp || 'dashboards' , } } />)} < /h1> < /EuiScreenReaderOnly>)} < div className = { isChromeVisible ? 'visEditor__content' : 'visualize' } ref = { visEditorRef } / > < /div>); } ;