import React from 'react' ; import { useRouteMatch } from 'react-router-dom' ; import { useValues } from 'kea' ; import { EuiPage , EuiPageSideBar , EuiPageBody , EuiPageContentBody , EuiCallOut , EuiSpacer , } from '@elastic/eui' ; import { FlashMessages } from '../../../../shared/flash_messages' ; import { HttpLogic } from '../../../../shared/http' ; import { SetWorkplaceSearchChrome } from '../../../../shared/kibana_chrome' ; import { BreadcrumbTrail } from '../../../../shared/kibana_chrome/generate_breadcrumbs' ; import { Loading } from '../../../../shared/loading' ; import { PRIVATE_SOURCES_PATH , PERSONAL_SETTINGS_PATH } from '../../../routes' ; import { PERSONAL_DASHBOARD_READ_ONLY_MODE_WARNING } from '../../../views/content_sources/constants' ; import { AccountHeader , AccountSettingsSidebar , PrivateSourcesSidebar } from '../index' ; import './personal_dashboard_layout.scss' ; interface LayoutProps { isLoading ? : boolean ; pageChrome ? : BreadcrumbTrail ; } export const PersonalDashboardLayout = ( { children , isLoading , pageChrome , } ) => { const { readOnlyMode } = useValues ( HttpLogic ) ; return ( < > { pageChrome && < SetWorkplaceSearchChrome trail = { pageChrome } / > } < AccountHeader /> < EuiPage className = "personalDashboardLayout" paddingSize = "none" > < EuiPageSideBar role = "navigation" className = "personalDashboardLayout__sideBar" sticky > { useRouteMatch ( PRIVATE_SOURCES_PATH ) && < PrivateSourcesSidebar />} { useRouteMatch ( PERSONAL_SETTINGS_PATH ) && < AccountSettingsSidebar />} < /EuiPageSideBar> < EuiPageBody component = "main" panelled role = "main" > < EuiPageContentBody className = "personalDashboardLayout__body" restrictWidth > { readOnlyMode && ( < > < EuiCallOut color = "warning" iconType = "lock" title = { PERSONAL_DASHBOARD_READ_ONLY_MODE_WARNING } / > < EuiSpacer /> < />)} < FlashMessages / > { isLoading ? < Loading / > : children } < /EuiPageContentBody> < /EuiPageBody> < /EuiPage> < />); } ;