Showing child messages in the Thread message feed

Part of #741 (closed)

Child thread messages are showing in the thread message feed and not showing in the main message feed.

For the main message feed this can be achieved by the simple addition of parentId doesn't exist condition to the query for messages.

Creating an index on parentId attribute.

There is a separate issue for creating an index: https://gitlab.com/gitlab-com/gl-infra/infrastructure/issues/7400

New child message

1. When sending a new message, it immediately shows in the thread message feed
2. If successfully sent, the temporary message gets replaced with the model received in server response
3. If sending messaged failed, the message gets highlighted in red, same as in current main message feed

How to load child messages?

There are several options on how to get the child messages into the thread message feed.

1) New LiveCollection for threaded messages

We would create a brand new rest endpoint and bayeux channel like /rooms/{roomId}/chatMessages/{parentId} and implement change to the realtime-client to support new thread message feed collection. That's how the thread message feed would get updates

Pros

• clear separation of main and thread message feed on backend (the whole parentId could stay as backend implementation detail)

Cons

• more effort to create the bayeux channel and create a new live collection attached to it

2) Reuse updates to current chatCollection for thread message feed

We would add all messages coming to the UI (initial load, scrolling, updates from Bayeux) to messageMap in Vuex store updated from the data-bridge. We would filter out messages containing parentId from the main message feed.

The messageMap would be kept in sync similarly to what we are already doing with the troupeCollection, https://gitlab.com/gitlab-org/gitter/webapp/blob/913cb8ac85e5dd68f2fe9a24d961ffa3878d6d9b/public/js/vue/store/data-bridge.js#L15-18

For thread message feed:

• we make initial load from a REST endpoint like /rooms/{roomId}/chatMessages/{parentId}
• subsequent live updates would come to the thread message feed by chatCollection -> data-bridge -> state.messageMap -> mapState in thread message feed

Pros

• faster implementation reusing a lot of existing realtime-client implementation

Cons

• notifying clients about thread messages for threads that they don't have opened
• UI needs to understand the implementation on the server and do filtering based on parentId

Other considerations:

• notifications - how would notifications play out with each option?

UX - space for messages

Right now the width is fixed to 300px.