import React , { FunctionComponent , createElement } from 'react' ; import { EUI_STYLES_GLOBAL } from '../../../utils' ; import { RenderingMetadata } from '../types' ; import { Fonts } from './fonts' ; import { Styles } from './styles' ; import { Logo } from './logo' ; interface Props { metadata : RenderingMetadata ; } export const Template = ( { metadata : { uiPublicUrl , locale , darkMode , stylesheetPaths , injectedMetadata , i18n , bootstrapScriptUrl , strictCsp , } , } ) => { return ( < html lang = { locale } > < head > < meta charSet = "utf-8" / > < meta httpEquiv = "X-UA-Compatible" content = "IE=edge,chrome=1" / > < meta name = "viewport" content = "width=device-width" / > < title > Elastic < /title> < Fonts url = { uiPublicUrl } / > { } < link rel = "alternate icon" type = "image/png" href = { `${ uiPublicUrl }/favicons/favicon.png` } /> < link rel = "icon" type = "image/svg+xml" href = { `${ uiPublicUrl }/favicons/favicon.svg` } /> < meta name = "theme-color" content = "#ffffff" / > < meta name = "color-scheme" content = "light dark" / > { } < meta name = { EUI_STYLES_GLOBAL } / > < Styles darkMode = { darkMode } stylesheetPaths = { stylesheetPaths } / > { } < meta name = "add-styles-here" / > < meta name = "add-scripts-here" / > < /head> < body > { createElement ( 'kbn-csp' , { data : JSON . stringify ( { strictCsp } ) , } ) } { createElement ( 'kbn-injected-metadata' , { data : JSON . stringify ( injectedMetadata ) } ) } < div className = "kbnWelcomeView" id = "kbn_loading_message" style = { { display : 'none' } } data - test - subj = "kbnLoadingMessage" > < div className = "kbnLoaderWrap" > < Logo /> < div className = "kbnWelcomeText" data - error - message = { i18n ( 'core.ui.welcomeErrorMessage' , { defaultMessage : 'Elastic did not load properly. Check the server output for more information.' , } ) } > { i18n ( 'core.ui.welcomeMessage' , { defaultMessage : 'Loading Elastic' } ) } < /div> < div className = "kbnProgress" / > < /div> < /div> < div className = "kbnWelcomeView" id = "kbn_legacy_browser_error" style = { { display : 'none' } } > < Logo /> < h2 className = "kbnWelcomeTitle" > { i18n ( 'core.ui.legacyBrowserTitle' , { defaultMessage : 'Please upgrade your browser' , } ) } < /h2> < div className = "kbnWelcomeText" > { i18n ( 'core.ui.legacyBrowserMessage' , { defaultMessage : 'This Elastic installation has strict security requirements enabled that your current browser does not meet.' , } ) } < /div> < /div> < script > { `
            // Since this is an unsafe inline script, this code will not run
            // in browsers that support content security policy(CSP). This is
            // intentional as we check for the existence of __kbnCspNotEnforced__ in
            // bootstrap.
            window.__kbnCspNotEnforced__ = true;
          ` } < /script> < script src = { bootstrapScriptUrl } / > < /body> < /html>); } ;