Team Invite Notification Unclear

Pezmc commented 1 year ago

Scope (Marian)

Add an "Invitations" menu item to the User menu.
It should link directly to the invitation screens.

License

Starter Tier

Current Behavior

Today when you have a pending team invite, this shows as icon in the top right, there is a total of 5 steps to see and accept the request.

Additionally, rejecting a request is far too easy to do by accident.

Expected Behavior

We should surface this pending invitation much faster. Perhaps it arrives as a notification in a notifications section, that links straight to the invitation page. Additionally, accept/reject is hidden behind a meatball menu.

It should have a much clearer call to action, such as an accept/reject button group in the table row (See: https://github.com/FlowFuse/flowfuse/issues/3038). Ideally with a "are you sure" popup for reject as it's easy to do by accident.

Steps To Reproduce

Invite a user to a team and watch them try to find the invitation. It's unclear.

Environment

FlowForge version:
Node.js version:
npm version:
Platform/OS:
Browser:

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

sumitshinde-84 commented 12 months ago

@Pezmc @Yndira-FlowForge Instead of routing users through multiple pages, we can create a separate notification page and an option in the header, similar to what GitHub has. This would allow users to easily jump directly to corresponding notification root pages. Additionally, having a dedicated notification page would be helpful for handling other notifications as well.

Another issue arises when a user wants to keep a invitation without accepting or rejecting it, resulting in the notification symbol persisting. To address this, we can introduce functionality on the notification page. When a notification is marked as read, we will store that information in the local storage. This way, the notification icon will not persist indefinitely

Screenshot (158)

Screenshot (160)

Pezmc commented 12 months ago

@Yndira-FlowForge @joepavitt Do you have UX input here? If @sumitshinde-84 is available to work on this issue I want to be sure what is implemented matches your expectations!

joepavitt commented 12 months ago

From a UX perspective, I agree pretty much with everything @sumitshinde-84 has said. However, the complexities here actually exists in the underlying notifications infrastructure, in that, we don't have any. The (1) that appears in that corner is very hardcoded to team invites, hence no direct "notification" to click on and link directly to the origin of that ping.

Ideally, we would have:

Notifications Store/DB
- with: Title/Description/Link/User
Notifications Service (probably server-side?) that provides functionality to add and mark read/unread any notifications
API with which to get notifications for a given user, and take the relevant mark read/unread functionality

The UI/UX here is the "easy" part

joepavitt commented 12 months ago

Additionally, accept/reject is hidden behind a meatball menu.

This is a very small, quick win task that can (and should) be done in isolation

Ideally with a "are you sure" popup for reject as it's easy to do by accident.

Also this too

sumitshinde-84 commented 12 months ago

Thank you, @joepavitt and @Pezmc, for reply. I completely agree with what @joepavitt said. I am ready to work on this task. Moreover, I suggest we separate the task of creating API endpoints by raising another issue.

sumitshinde-84 commented 12 months ago

We can also display notifications for the latest updates, warnings about subscription expiry, Flowfuse announcements, etc., in that notification section

joepavitt commented 11 months ago

We can also display notifications for the latest updates, warnings about subscription expiry, Flowfuse announcements, etc., in that notification section

Agree entirely, but this is a much bigger scoped piece of work. Something that we should be doing sooner rather than later though (imo) - CC @MarianRaphael who does our scheduling