refactor: Contacts menu to Vue

[ChristophWurst]

• Fixes Vue contacts menu #15586
• Fixes [Bug]: Contacts menu popover overflow is not visible #39772
• Enables Show status instead of email in contacts/people menu #40559

Summary

The contacts menu is still based on jQuery, Backbone and handlebars.

Changes

• The top action is inline, the rest is moved into an actions menu
• Small styling changes due to move to standardized Vue components

Screenshots

Before	After

TODO

• Migrate by moving code around
• Fix search
• Migrate code to BEM
• Replace icon classes with material icons not possible because icon URIs are provided via public API

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[ChristophWurst]

Requesting early feedback. I'll try to organize the styles into BEM. Otherwise this should be mergeable.

[skjnldsv]

Amazing!! 👑

Some rules to consider though:

• Classes are a bit messy, sometimes it looks like BEM, sometimes it doesn't. Let's be compliant ad follow BEM entirely? But maybe you just reused the old css classes and wanted to keep changes to a minimum, I don't know)
• icon-loading should be replaced with Vue NcLoadingIcon component
• emptycontent class style should be replaced with NcEmptyContent component
• Variables should have strict typing if possible (like this.loadingText)
• Maybe reset the error when searching again? (See this.error)
• contactsAppEnabled is always true
• searchTerm should reset on close maybe? Not sure :)

[ChristophWurst]

Classes are a bit messy, sometimes it looks like BEM, sometimes it doesn't. Let's be compliant ad follow BEM entirely? But maybe you just reused the old css classes and wanted to keep changes to a minimum, I don't know)

See PR description

[ChristophWurst]

searchTerm should reset on close maybe? Not sure :)

I did not reset before and unified search doesn't do that either. I'm keeping the search term.

[ChristophWurst]

@skjnldsv I can add Vue component unit tests as a replacement for the removed js specs. Would you be okay with that? I'd install and use https://www.npmjs.com/package/@vue/test-utils on top of jest.

[skjnldsv]

@ChristophWurst absolutely!
You can also do cypress component testing if you prefer, we have multiple options now :)

[ChristophWurst]

Moved a few more pixels to get close to the old appearance. This is as good as it gets with my frontend skills.

[ChristophWurst]

Branch updated to latest master and removed two accidentally added files.

@skjnldsv please double-check if I fulfilled your requested changes.

[ChristophWurst]

@skjnldsv @Pytal friendly ping. I need this to start #40559.

[skjnldsv]

Only complain I have is the vertical centering of the avatar, but all good otherwise! 🚀

EDIT: ah, and the roundness of this icon:

[Pytal]

🙌

[Pytal]

Failing CI related

[ChristophWurst]

@skjnldsv did you compile the sources? 🤭

Because those two bugs are fixed with the rework:

Avatar	Icon

[skjnldsv]

@skjnldsv did you compile the sources? 🤭

Because those two bugs are fixed with the rework:

I think I did, but maybe I did it wrong 🙈

[ChristophWurst]

Pushed a rebased, squashed and compiled version.

edit: I can reproduce the <a> styling now!
edit2: fixed

[szaimen]

CI failure related afaics

[szaimen]

@ChristophWurst how much work is still to be done here? Asking because of #40873

[ChristophWurst]

UsersSettingsContext::iCreateUserWithPassword() doesn't work anymore. There is an open modal afterwards, the user is not created. Acceptance tests that create a second user fail.

[ChristophWurst]

/compile amend /

[ChristophWurst]

Drone is about to pass. Cypress fails but I don't see the relation. Let's get this in.

[szaimen]

🎉🎉🎉🎉🎉