ENG-6669 : Release the lock on webpack auto-reload
There is a small issue with the lock API -> during webpack hot reload we lose the reference to the lock, which means that the tab which is holding the lock is thinking that somebody else has it. The easiest way to solve this is to use the functions provided by webpack to run function during hot reload, in this case the function to release the lock.

Depends on D11113

Add this code:

const { lockStatus, releaseLock } = useWebLock('lock');
React.useEffect(() => {
   document.title = lockStatus;

   if(lockStatus === 'should-release') {
     // Add some delay to simulate closing the tunnelbroker socket
     setTimeout(releaseLock, 1000);
   }
 }, [lockStatus]);

Try switching between different tabs quickly, and changing some code in the webapp so it gets hot-reloaded. Check that at all times the only tab holding the lock is one of the tabs in the foreground (except for the 1s delay before call to releaseLock).

Try running it in production code to make sure it's not broken.