Space members and people page UI/UX enhancement

[Julien-Dubois-eXo]

Rationale

We need to unify the space member card with the organizational chart and people directory in the space member tab for UX consistency.

End-users have reported that the card is not useful in some way:

• connection CTA is not relevant in this context
• to send a kudos, we need to access the three dots or the profile
• the role management actions are listed with the interactions actions which are not the same type of actions
• Information from the profile cannot be highlighted in the card. only the full name and the position are listed
• End-users are disturbed to see the deactivated users

1. Functional Requirements

Top User Stories

In order to unify the UX between cards in organizational chart, the people page, and the space members tab we need to:

• UI review of the user card
• Remove the "Connection" CTA from the user card
• Display the interaction buttons with the user directly on the card
• Remove the "i" button
• Add the open organizational chart action
• Hide the deactivated user when filtering on the values "Members","redactors","hosts"

Precision: Below, find characteristics of the people card when listing it in the space members app

• Add a new quick filter value "Deactivated" only available for space hosts. It display only the deactivated users so the space hosts can easily manage them
• Role management action will be listed in a dedicated action menu only available for the space hosts.
• On mobile , interaction actions and role management actions will be separated in 2 different sections in the bottom drawer. The section dedicated to role management action will be only displayed for space hosts.
• Member list for mobile will be aligned with People page.

And finally, some improvements will be done to make the page to harmonize it with the latest components:

• Top bar application will be integrated into the page to replace the current first line of the page

Some improvements will be made to make the people page more readable

Remove the "Showing XX results" in the top bar application Display 21 users at first load instead of 20 presently. So we have 7 full lines of 3 in case of max width of the app.

Impacts

Gamification

Notifications

Analytics

Unified Search

2. Technical Requirements

Expected Volume & Performance

Security

Extensibility

User cards components people-list/components/usercard/PeopleCard.vue and its child-components will replace the old people-list/components/PeopleCard.vue and its child components The new card will have two extensibility points for Javascript extensions :

• Profile action extensions : this will hold all extensions registered with the name 'profile-extension' and type 'action'. Those extension actions will appear in the bottom-right of the card
• Profile navigation extension : this will hold all extensions registered with the name 'user-extension' and type 'action'. Those extension actions will appear in the bottom-left of the card
• Space member extensions : this will hold all extensions registered with the name 'space-member-extension' and type 'action'. Those actions appear when we are on the space members page. They will appear in the top-right of the card when hovering on it under the 3-dots menu.

Configurability

Upgradability

Existing Features

Feature Flags

Property Name	Default Value	Target Audience	Functional Behaviour
exo.feature.OrganizationalChart.enabled	false	All	This flag will hide the Organization chart portlet, but won't prevent the creation of the new pages/navigations. If set to true, the Organization chat portlet will be displayed.

Other Non Functional Requirements

3. Impacts

Documentation

Following this MIP, we will add tutorial to help user add action to :

• user card
• user popover

Training

4. Software Architecture

Security

Access

• GUI
• API

Services & processing

• Ex: Scheduled Jobs

Data and persistence

• The configuration of the 3 displayed fields in the user card will be done in a dedicated page in the platform administration.
• The configuration will be stored in the settings service with :
  • Scope : GLOBAL
  • Context : Global
  • 3 settings : UserCardFirstFieldSetting, UserCardSecondFieldSetting and UserCardThirdFieldSetting

Clustering

Multitenancy

Integrations

Migration strategy

5. Annexes

• Reasoning that explain the technical choices
• Impacts
• References

[Julien-Dubois-eXo]

Design will comes

[Julien-Dubois-eXo]

@srenault-meeds design added

[Julien-Dubois-eXo]

@ahamdi could you complete the technical part please?

[srenault-meeds]

Go-Func

[Julien-Dubois-eXo]

@srenault-meeds I have merged this MIP https://github.com/orgs/Meeds-io/projects/4/views/1?pane=issue&itemId=56482833 with this one as requested.

[srenault-meeds]

Ok so we close it then

[Julien-Dubois-eXo]

@srenault-meeds it's this one the good one we have to keep.

[srenault-meeds]

Ok I see. I have updated the description to better distinguish with the space members app:

Precision: Below, find characteristics of the people card when listing it in the space members app

[srenault-meeds]

Go-Fonc

[margondicco]

Hello @ahamdi technical part needed

Thank you

[Julien-Dubois-eXo]

@srenault-meeds we are currently working on it. The technical part will be added by @ahamdi quickly.

[ahamdi]

@boubaker Technical spec of MIP-127 updated, feature/mips acceptance updated and PR proposed for the MIP merge on Develop

• https://github.com/Meeds-io/social/pull/3762

[srenault-meeds]

Hello

Here are my feedbacks. I let you contact me if you want to discuss it.

I guess the following items have not been implemented:

• Remove the "Showing XX results" in the top bar application
• Display 21 users at first load instead of 20 presently. So we have 7 full lines of 3 in case of max width of the app.
• Add a new quick filter value "Deactivated" only available for space hosts. It display only the deactivated users so the space hosts can easily manage them
• Hide the deactivated user when filtering on the values "Members","redactors","hosts"

On Mobile, bottom drawer is too much high, particularly for meeds context. I recommend to make it dynamic with a min-height and a max-height

[ahamdi]

@srenault-meeds Yes some of the issues you shared are already in the board (issue with disabled users in space members + bottom drawer) They are catched on the board and I am working to fix them all. Are those issues blocker for the merge ?

[srenault-meeds]

Ok no blocker for me. Go

[srenault-meeds]

As precised in the #112 , ok so let's merge it :)