GH-74 - Collaborative awareness

[bosschaert]

Description

Show the currently editing other users as little icons in the top right corner:

When the editor is disconnected from da-collab, or the network in general, show this via a disconnected cloud icon.

Motivation and Context

To make the editing more robust in case of a disconnection with da-collab and also to provide awareness of other users active in the document.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

Release notes

• Adds the ability to see cloud connection status
• Adds the ability to see fellow collaborators that are actively editing the document
• Improves collaboration connection reliability

Resolves: GH-74

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• 7ae810b ✅ (latest)
• a69556f ✅
• 45576d5 ✅
• 1918b80 ✅
• 4406106 ✅
• faacea5 ✅
• eff912d ✅
• 49d1714 ✅
• 1456aaf ✅
• 67a123b ✅
• 81ac4e4 ✅
• 33cba77 ✅

[auniverseaway]

Test URL: https://awrz2--da-live--adobe.hlx.page/edit#/adobecom/da-milo-college/demo

From my commit message:

• Simplified integration between prose/index and da-title.
• prose/index only responsible for data, da-title is presentation.
• Turned user icon into clickable initial pill. Clicking shows full name popover.
• Cloud is also clickable for more detailed status

Left out of commit message:

• I changed the behavior so that if you are the only one on the doc, we do not show the user pills. It seemed like that was a little heavy given that there's already the connected cloud icon.
• Hovering over each icon will change the stacking order and provide a little visual cue that you can click on it (needs to be a button).

To do later:
These should probably be buttons, but I'm tired.

Bigger picture thoughts:

• I really liked this pattern of presenting the component with data and letting it determine the view. Especially as it relates to reactivity.
• I think we are over complicating the whole user set / delta thing, but leaving for now as it's not a big deal.

Observation:
On my local, I could not get pushing to the live preview to work. It seems to work fine on branches. If you have time, can you reproduce or find out if this was pre-existing and I can take a look?

Edit: Fixed.

[auniverseaway]

Ugh. The tests broke as a result of moving prose/index to being data based instead of DOM based. I'll try to get these updated tomorrow. I think it should be relatively simple as we now can check for properties on a daTitle DOM element.

[auniverseaway]