import React from 'react' ; import { Capabilities , Events , i18n } from '@kui-shell/core' ; import { TagWidget } from '@kui-shell/plugin-client-common' ; import ProxyConfig from '@kui-shell/client/config.d/proxy.json' ; const strings = i18n ( 'plugin-proxy-support' ) ; /** class designation for our offline indicator */ const buttonDesignation = 'kui--plugin-bash-like--pty-offline-indicator' ; type Props = { } ; interface State { proxyEnabled : boolean ; offline : boolean ; } export default class ProxyOfflineIndicator extends React . PureComponent < Props , State > { /** To help maintain state across unmounts */ private static rememberedOffline = true ; /** Cleanups for event listener registrations */ private cleaners : ( ( ) => void ) [ ] = [ ] ; public constructor ( props ) { super ( props ) ; const { proxyServer } = ProxyConfig ; const proxyEnabled = proxyServer [ 'enabled' ] === undefined || proxyServer [ 'enabled' ] !== false ; this . state = { proxyEnabled , offline : ProxyOfflineIndicator . rememberedOffline } ; const onOnline = ( ) => { this . setState ( { offline : false } ) ; } ; Events . eventChannelUnsafe . on ( '/proxy/online' , onOnline ) ; this . cleaners . push ( ( ) => Events . eventChannelUnsafe . off ( '/proxy/online' , onOnline ) ) ; const onOffline = ( ) => this . setState ( { offline : true } ) ; Events . eventChannelUnsafe . on ( '/proxy/offline' , onOffline ) ; this . cleaners . push ( ( ) => Events . eventChannelUnsafe . off ( '/proxy/offline' , onOffline ) ) ; } public componentWillUnmount ( ) { ProxyOfflineIndicator . rememberedOffline = this . state . offline ; this . cleaners . forEach ( cleaner => cleaner ( ) ) ; this . cleaners = [ ] ; } /** If the proxy is enabled, and we are offline, then render a widget indicating such. */ public render ( ) { if ( ! this . state . proxyEnabled || ! this . state . offline || ! Capabilities . inBrowser ( ) ) { return < React . Fragment />; } else { return ( < TagWidget id = { buttonDesignation } type = "error" > { strings ( 'Offline' ) } < /TagWidget>); } } }