Replace the 'new collective' form with a modal

[mejo-]

📝 Summary

• Allows to create a new collective (optionally using an existing circle)
• Allows to select members while creating a collective.
• Resolves: Improved dialog to create new collective #464

🖼️ Screenshots

Enter name	Select Circle	Select Members

Screencast

recording.webm

🚧 TODO

• Fix cropped bottom in member suggestions
• Fix member types in onCreate() before giving members to ADD_MEMBERS_TO_CIRCLE
• Cypress tests

🏁 Checklist

• Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
• Sign-off message is added to all commits
• Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests
• Documentation (README or documentation) has been updated or is not required

[cypress]

1 flaky tests on run #368 ↗︎

0

61

0

0

1

Details:

Replace the 'new collective' form with a modal
Project: Collectives	Commit: eca453b3b0
Status: Passed	Duration: 04:22 💡
Started: Feb 21, 2023 2:09 PM	Ended: Feb 21, 2023 2:13 PM

  cypress/e2e/collective.spec.js • 1 flaky test

View Output Video

Test
Collective > after creation > has all the ui elements		Screenshot

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[jancborchardt]

Looks very nice, very much like in Talk :) cc @marcoambrosini. 2 pieces of feedback:

• Also like in Talk, in the first step we could already list some permissions, e.g. the editing and sharing permissions, as well as the default page mode? Then it’s not so empty, and the permissions are set before anything is shared, very secure.
• The "Collective with that name already exists" could already be shown in the name input step, no? (Like how web services often check in the background if the account name is still available.)

[nimishavijay]

Super nice! Flow looks really great :) Agreed with @jancborchardt plus some points from my side:

• The icon for selecting a circle seems unclear. Maybe it could a button with a label "Choose circle" or something like that?
• "Select members" --> "Add people"? cc @jancborchardt on this one
• It also seems like it's confusing to create a personal collective. We could possibly add a secondary button on the left of "Select members" which says "Create" or something. also cc @jancborchardt
• Hover feedback for the emoji seems to be a few pixels too wide, it should be a circle (equal width and height)
• Each item in the list of users doesn't need to have a background, background shown only on hover and select would work better :)
• The checkmark could have more margin all around. Even better: Align all checkmarks to the right, similar to creating a new group conversation in Talk
  
• Also a question: what is the symbol in the search field on the right?
  

[julien-nc]

Wow that looks very nice! 🤩

• The bottom right button looks the same when you can't click it (for example "Select members" is disabled when no collective name was entered yet) and when something is loading (for example "Create" is disabled when attempting to create the collective). There could be a loading icon in the button's icon template while creating.
• There could be an empty content while choosing the collective name, there seems to be one only while choosing the members. The empty content icon could be the app icon and the title could be something like "Enter the new collective name". The icon alone without title would be fine too.

[mejo-]

• Also like in Talk, in the first step we could already list some permissions, e.g. the editing and sharing permissions, as well as the default page mode? Then it’s not so empty, and the permissions are set before anything is shared, very secure.

In the long run I thought that we could provide templates for the new collective here. That's why I kept it empty for now. Sure, we could add settings there, but I'd like to do this in a follow-up if at all, as it requires quite a bit of extra work.

* [ ]  The "Collective with that name already exists" could already be shown in the name input step, no? (Like how web services often check in the background if the account name is still available.)

Yeah, that would be a nice user experience. On the other hand, that would require an API call to check if a circle with a specifici name exists (circle names are global on the instance) and that would mean to allow enumeration. At the moment, when creating a collective, the backend tries to create the circle and errors out if it already exists. That's way harder to brute-force than an API that allows to check if a name is taken.

[mejo-]

Also a question: what is the symbol in the search field on the right?

Hehe, that's my password manager 😉

[mejo-]

@nimishavijay @jancborchardt @julien-nc I tried to address all your feedback, thanks a lot. Some ideas I didn't implement, but I commented on them instead, see above. Screenshots and screencast above are updated as well.

on holidays

[susnux]

Looks really nice!
I will look into this later, but from a quick look on the code: Is there a special reason for not using the NcSelect component for the member picker? I think it would simplify the code a lot.

[mejo-]

Looks really nice! I will look into this later, but from a quick look on the code: Is there a special reason for not using the NcSelect component for the member picker? I think it would simplify the code a lot.

Thanks for looking into it @susnux! The main reason is that the member picker dialog should look similar to how it looks in Talk when creating a new conversation and in Contacts when picking members for a circle. I agree that we should streamline this into a nextcloud-vue component at some point.

[max-nextcloud]

Just had a look at the code so far.
Looks good to me. 🎉
Just some minor comments.

[nimishavijay]

Looks great! Only point I noticed is the button for choosing a circle is a bit confusing without a label, but we can merge this now and open a follow up issue about it :)