import './visualize_editor.scss' ; import React , { RefObject } from 'react' ; import { FormattedMessage } from '@osd/i18n/react' ; import { EuiScreenReaderOnly } from '@elastic/eui' ; import { AppMountParameters } from 'opensearch-dashboards/public' ; import { VisualizeTopNav } from './visualize_top_nav' ; import { ExperimentalVisInfo } from './experimental_vis_info' ; import { SavedVisInstance , VisualizeAppState , 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 ; visualizationIdFromUrl ? : string ; embeddableId ? : string ; } export const VisualizeEditorCommon = ( { visInstance , appState , currentAppState , isChromeVisible , hasUnsavedChanges , setHasUnsavedChanges , hasUnappliedChanges , isEmbeddableRendered , onAppLeave , originatingApp , setOriginatingApp , visualizationIdFromUrl , embeddableId , visEditorRef , } ) => { 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 } setOriginatingApp = { setOriginatingApp } visInstance = { visInstance } stateContainer = { appState } visualizationIdFromUrl = { visualizationIdFromUrl } embeddableId = { embeddableId } onAppLeave = { onAppLeave } / > ) } { visInstance ?. vis ?. type ?. stage === 'experimental' && < ExperimentalVisInfo />} { visInstance ?. vis ?. type ?. getInfoMessage ?. ( visInstance . vis ) } { visInstance && ( < EuiScreenReaderOnly > < h1 > { 'savedVis' in visInstance && visInstance . savedVis . id ? ( < FormattedMessage id = "visualize.pageHeading" defaultMessage = "{chartName} {chartType} visualization" values = { { chartName : ( visInstance as SavedVisInstance ) . savedVis . title , chartType : ( visInstance as SavedVisInstance ) . vis . type . title , } } />) : (<FormattedMessage id="visualize.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>); } ;