allowed_groups fetched from db JSONified - fixes #526

[mawumag]

TLDR

• The UI in the admin section for selecting allowed groups is broken, see Broken UI when defining a group who may use the app #526
• The allowed_groups fetched from the database are in a different format compared to the one expected by the UI logic. This commit fixes this by reconstructing a JSON object with the appropriate attributes for each fetched allowed group.

Problem

• When groups are fetched from the server (cloud/groups/details), a JSON object is returned, of the form

[
  {
    id: "group1",
    displayname: "group1",
    ...
  },
  {
    id: "group2",
    displayname: "group2",
    ...
  },
  ...
]

This is also how the groups are represented in the initial Vue state, both for the variables groups and allowedGroups.

• When a group selection is saved, only the id is saved in the database. If we select group1 and group2, the database entry for the key allowed_groups will be ["group1","group2"].

• Upon loading the page with a non-empty allowed_groups database entry, the loadState function loads ["group1","group2"] in the Vue variable allowedGroups.

• The UI however expects the richer JSON object structure as above (see in particular the sorting function called on mounted and, crucially, saveChanges()).

• This leads to a broken UI and potentially a broken database state (e.g. [null,null,....]).

Proposed solution

For backwards compatibility, we need to work assuming that the database only contains the ids of the allowed groups. Changing how these groups are saved in the database is a nonstarter.

In order to keep changes minimal, I propose to transform the group ids into structured JSON objects (as above) directly when the state is initially loaded:

loadState('end_to_end_encryption', 'allowed_groups').map(group => {
  return {
    id: group,
    displayname: group,
  }}).sort(function(a, b) {
    return a.displayname.localeCompare(b.displayname)
})

I also changed the order of assignment of the values: allowedGroups is now populated first (before it was groups), it seems the more logical choice since loadState loads the allowed_groups data.

When the Vue component is mounted, the selectable groups are initially set to the allowedGroups, until the server query is completed and all the selectable groups are available (other places in the web interface behave exactly like that).

TODO

As mentioned in my previous pull request, the NcMultiselect component has been deprecated and should be replaced by NcSelect. The nextcloud-vue module should also be bumped to 8.x.x in order to keep the UI consistent with Nextcloud 28 and above.

[artonge]

Looks good, thanks :)

[github-actions]

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!