Add Reconnect UI to ConnectivityStatus when connection has been interrupted

[corinagum]

Resolves #1523
Resolves #1831

• When Web Chat connects but then loses connection, the above component will show, indicating to user that interruption has occurred.
• After 15 seconds, spinner animation will revert to "Connection taking longer than usual" warning icon.
• Similar to connecting for the first time, the Network interruption animation has a short timeout to ensure it is legible for at least 0.4 of a second.
• Web Chat users may now customize the typing indicator and spinner animation through defaultStyleSetOptions.js

[coveralls]

Coverage increased (+0.3%) to 54.503% when pulling c680b25 on corinagum:1523 into 4172154 on Microsoft:master.

[compulim]

In ConnectivityStatus.js, few things need to be modified:

• Don't put JSX outside of render() function, it makes the output very hard to read
• Don't do side-effect during render()
  • In your render(), you call connectivityStatusText()
  • Then, in your connectivityStatusText(), you setTimeout()
  • Few reasons:
    • You never know when render() will happen
    • render() is for rendering HTML, not for business logic, need a super clean cut here
• Line 85, this if statement (props !== state) always truthy
  • This is shallow comparison
  • Only change what you need
  • Why put styleSet in state?
• Don't call setState() in componentDidUpdate()
  • componentDidUpdate() is being called after the screen is rendered
  • Then you call setState(), that means you are asking the screen to render again

[compulim]

As commented.

[cwhitten]

we need to wait 17 seconds?

[corinagum]

This test is waiting for the 'slow to connect' timeout, which is the 17 seconds. I'm not sure if there's any way to circumvent the timeout during tests, but if there is please let me know and I can fix it.

[cwhitten]

Are you able to render a single React.Fragment outside the chained ternary like this?

() => {
  <React.Fragment>
    {
     connectivityStatus === 'connectingslow' ?
       <WarningNotificationIcon />
     : (connectivityStatus === 'error' || connectivityStatus === 'notconnected') ?
       <ErrorNotificationIcon />
     : connectivityStatus === 'uninitialized' ?
       <SpinnerAnimation />
       { localize('INITIAL_CONNECTION_NOTIFICATION', language) }
    }
 </React.Fragment>
}

[corinagum]

I don't think this will work because each status also has different text to be localized, and you can't return multiple children, only one.

this gives errors:

  <React.Fragment>
    {
     connectivityStatus === 'connectingslow' ?
       <WarningNotificationIcon />
       { localize('SLOW_CONNECTION_NOTIFICATION', language) }
     : (connectivityStatus === 'error' || connectivityStatus === 'notconnected') ?
       <ErrorNotificationIcon />
       { localize('FAILED_CONNECTION_NOTIFICATION', language) }
     : connectivityStatus === 'uninitialized' ?
       <SpinnerAnimation />
       { localize('INITIAL_CONNECTION_NOTIFICATION', language) }
    }
 </React.Fragment>
}

Playing around with parenthesis didn't get rid of the errors. Let me know if I should try something else. :)

[corinagum]

PR modifications have been pushed up, with an added fix:
#1831 - Typing Indicator and Spinner now have the ability to be specified by the user in defaultStyleSetOptions.js.

[corinagum]

@cwhitten could you take another pass when you have a chance? Thank you!