[Bug]: Unclear UX when editing account groups

[Ivansss]

Admins aren't guided on how to search for groups or view all available groups

Steps to Reproduce:
As an administrator, tap the edit button for an account and open the group selector.

Current Behavior:
The groups the account is already part of are shown as suggestions.

Expected Behavior:
An indicator should guide the admin to start typing to search for groups. Alternatively, we could display all available groups by default, and in cases where the total number is high, show only a limited subset (up to the selector’s limit), along with a prompt to search for additional groups.

@nextcloud/designers

[Ivansss]

Quick POC patch from @Antreesy

diff --git a/apps/settings/src/components/Users/UserRow.vue b/apps/settings/src/components/Users/UserRow.vue
index d065702afa..f0bb1cdc93 100644
--- a/apps/settings/src/components/Users/UserRow.vue
+++ b/apps/settings/src/components/Users/UserRow.vue
@@ -110,7 +110,7 @@
                                        :loading="loading.groups"
                                        :multiple="true"
                                        :append-to-body="false"
-                                       :options="availableGroups"
+                                       :options="userGroupsMapped"
                                        :placeholder="t('settings', 'Add account to group')"
                                        :taggable="settings.isAdmin || settings.isDelegatedAdmin"
                                        :value="userGroups"
@@ -295,6 +295,10 @@ import { isObfuscated, unlimitedQuota } from '../../utils/userUtils.ts'
 import { searchGroups, loadUserGroups, loadUserSubAdminGroups } from '../../service/groups.ts'
 import logger from '../../logger.ts'
 
+import { useFormatGroups } from '../../composables/useGroupsNavigation.ts'
+import { computed } from 'vue'
+import { useStore } from '../../store'
+
 export default {
        name: 'UserRow',
 
@@ -346,6 +350,18 @@ export default {
                },
        },
 
+       setup() {
+               const store = useStore()
+               /** All available groups */
+               const groups = computed(() => store.getters.getSortedGroups)
+               /** User groups */
+               const userGroupsMapped = useFormatGroups(groups).userGroups.value.map(group => ({ id: group.id, name: group.title }))
+
+               return {
+                       userGroupsMapped,
+               }
+       },
+
        data() {
                return {
                        selectedQuota: false,

[jancborchardt]

@Antreesy @Ivansss is that PoC patch deployed somewhere or do you have a screenshot/screencast? :)

[Ivansss]

the PoC patch just adds all available groups (event the ones the account is already part of) to the picker

@jancborchardt

[jancborchardt]

That's a great fix @Antreesy ! Let's go with that then.

[marcoambrosini]

From my perspective, this inline user editing should not be a thing. It's really confusing with these inputs, some of which have a submit button built in, others are saved separately with a global submit button on the right. The horizontal scroll adds to the complexity.
It's just all over the place, unclear, and clunky.

We should have just 1 big form in a dialog, or even better replace the whole content with a edit-user page.

[Antreesy]

We should have just 1 big form in a dialog

There is a New account dialog, maybe would be enough to switch to that for existing accounts?

[marcoambrosini]

That would be a step in the right direction. But I think that the complexity of the form and interactions warrant using the whole app-content for it.