Fix missing unreads in left-menu after sleeping/suspending computer (conflicting realtime subscription)

Fix missing unreads in left-menu after sleeping/suspending computer

Use the existing troupe live collection(troupeCollections.troupes from public/js/collections/instances/troupes.js) and listen to events instead of trying to create another conflicting realtime subscription

Fix https://gitlab.com/gitlab-org/gitter/webapp/issues/2248

Testing strategy

Testing that unreads come through after sleeping

1. Test this MR on beta-staging or setup your Gitter instance so you can access it over your local network(you can see my config/config.user-overrides.json below)
   • If testing locally, you will also have trouble signing in because the GitHub OAuth callbacks are still pointing at localhost:5000. You can sign in by http://192.168.1.110:5000/duxxy/Lobby?access_token=xxx (get your access token from Mongo or just window.troupeContext.accessToken in your browser from a localhost:5000 intance)
2. On one computer, bring up Gitter at some room (different from where you will be sending the messages)
3. Sleep that computer and wait a bit to make sure the computer is actually asleep
4. On another computer go to a room and send some messages
5. Wake up other computer
6. Wait for the realtime websockets connection to reconnect (this may take a little bit)
   • You can enable the connection indicator locally by adding the feature toggle node ./scripts/utils/feature-toggle.js --name connectivity-indicator --enable
   • http://localhost:5000/api_web/features/connectivity-indicator/1 (http://192.168.1.110:5000/api_web/features/connectivity-indicator/1)
7. Notice the left-menu updates with the unread count

Testing the new live-context.js

1. You can run window.localStorage.debug = 'app:live-context'; in your browser devtools to better see the events coming through
2. Go into a room
3. In another tab, send some messages in the same room and notice events that update the unreadItems accordingly
4. Go to a different room
5. Send more messages and notice how those updates are ignored

---

If you want to test the roomMember: false, in your browser devtools turn on the preserve log setting. Then leave the room in another tab.

Dev notes

Some debugging/troubleshooting thoughts here, https://gitlab.com/gitlab-org/gitter/webapp/merge_requests/1564#note_205460689

---

window.localStorage.debug = 'app:live-context';

window.localStorage.debug = 'vue:data-bridge,grc:live-collection,app:unread-items-client,grc:client';

window._troupeCollections.troupes.models.filter(room => room.get('uri') === 'duxxy/Lobby')[0].get('unreadItems')

---

config/config.user-overrides.json

{
  "web": {
    "domain": "localhost",
    "baseserver": "localhost",
    "basepath": "http://localhost:5000",
    "apiBasePath": "http://localhost:5000/api",
    "badgeBaseUrl": "http://localhost:4000",

    "apiRateLimit": 1000
  },
  "errorReporting": {
    "enabled": true
  },

  "cdn": {
    "use": false,
    "hosts": ["localhost:5001"]
  },
  "ws": {
    "fayeUrl": "http://localhost:5000/bayeux"
  }
}