feat: add "create new" functonality to SelectMany

[MeLlamoPablo]

Description of what you did:

This PR introduces a "Create new" link to the SelectMany component provided the following are true:

• The relation is of type "oneToMany" (that is, "Belongs to many" in the content type builder, or a bidirectional relation).
• The item has already been created and is being edited.

This enables a simpler workflow: previously, one would have to go to the ListView of the related model, create a new entry, save it, go back to the item we were editing, and associate the newly created entry to the item.

Now, the user can click the "Create new" link, create the new item, and it will be automatically associated to the source item. When the use saves it, they will be redirected back to the EditView of the source item.

This only works on "Belongs to many" relations, and not in "Has many", because the association is made from the target model's creation view, and not from the source model's edit view. Therefore, we need the relation to be bidirectional.

I'm marking this PR as a draft because it is untested, undocumented, and un-i18n'd. I wanted to receive some feedback on this feature before putting more work into it. The new link is also not styled at all, which I'm not sure if is okay for the project.

My PR is a:

• 💥 Breaking change
• 🐛 Bug fix
• 💅 Enhancement
• 🚀 New feature

Main update on the:

• Admin
• Documentation
• Framework
• Plugin

Manual testing done on the following databases:

• Not applicable
• MongoDB
• MySQL
• Postgres
• SQLite

Thanks for your time.

[Aurelsicoko]

@MeLlamoPablo Could you share a screenshot of the implementation in the UI? I would love to help you to make sure it follows the current UX/UI guidelines. Also, make sure you are using the graphical elements provided by our components library Buffet.js.

[MeLlamoPablo]

Here's a screenshot of the current UI:

As I said, it's pretty barebones, I just wanted to showcase the concept.

Here's a video of the current workflow:

https://streamable.com/araxw

[Aurelsicoko]

Wow, thank you for sharing this! I've a few questions:

• Why is it not allowed to create a relational entry while the creation of the entry itself? In your example, you've to save the new Menu first, to be able to create MenuSections on the fly.
• I'm not a big fan in terms of UX to leave the main entry (e.g the Menu) while creating the relational entry (e.g the MenuSection). A modal could easily solve that problem.

Otherwise, it's pretty dope! Well done 👏

[MeLlamoPablo]

Hello!

Why is it not allowed to create a relational entry while the creation of the entry itself? In your example, you've to save the new Menu first, to be able to create MenuSections on the fly.

The way it works is the following: in the SelectMany component the "Add new" link is added, with a route state containing the id of the source entity (diff). Then, in the SelectWrapper component, we detect if we have that route state, and if we do, we automatically select the source entry (diff).

There is no special connection between the two entities' edit views. When you click the "add new" link, you are actually leaving the source entity's edit page (meaning that any unsaved changes will be lost). That is why we don't display the link on the creation mode: because we have no id yet, and we can't automatically link it on the destination entry.

Keep in mind that my knowledge of the codebase is limited. We needed to deliver this feature to a client who requested it, and I found that to be the easiest way to do it. That's why it probably seems hacky. Which brings me to the next point:

I'm not a big fan in terms of UX to leave the main entry (e.g the Menu) while creating the relational entry (e.g the MenuSection). A modal could easily solve that problem.

I agree that this would be a better UX, but I'm not sure of how complex it is (might be just embedding another EditView inside the modal, or might be much more complex than that), so that's why I didn't attempt something like that.

In this case, the linking would be done in the inverse: instead of going to the destination entry and selecting the source entry's id, we would create the destination entry, save it, and add its id to the array of related entities in the source entry. This would have the advantage of allowing to link a new entity on creation.

We would also have to handle different cases in EditView: if the destination entry is being opened on its standalone edit view, we show all fields. If it is being opened through the source entry, we must not show the relation's SelectOne field (otherwise we could click "add new" and create an entry for a different source entry - that doesn't make sense).

Also, if you take a look at my original comment:

This only works on "Belongs to many" relations, and not in "Has many", because the association is made from the target model's creation view, and not from the source model's edit view. Therefore, we need the relation to be bidirectional.

You'll see that by switching the place where the association is made, we can overcome this limitation: by linking the destination entry in the source edit view, we can make it work for unidirectional relations too.

So, in a nutshell, I agree that your suggestion is a better way to implement this feature.

[smn-snkl]

Any update on this? This is an awesome feature!

[Aurelsicoko]

Sorry for the late reply. We've discussed it and it seems more complicated than expected. We do like the feature and we do want to implement it. However, we have to consider that it will have conflicts with the permissions system and the internationalization of the content.

Also, we have to think about UX. The modal might be a good choice, but it has to be larger than the currently available in the UI kit of Strapi. In this modal, we have to display the relational fields too. But for these, we should not allow the on-the-fly creation of relational data to avoid nested creation of new entries.

Then, we have to add functionality to the SelectOne component as well.

Due to all the identified problems, we decided to pause the feature. We will come back to you when we will have released the permissions system. I've added the card in our roadmap though.

[alexandrebodin]

Thank you for this. I'm closing this PR. If needed we will open a github discussion for this ;)

[lauriejim]

This pull request has been mentioned on Strapi Community. There might be relevant details there:

https://forum.strapi.io/t/add-category-while-in-post/367/2

[hosnas]

Is there any update for this feature?

[tonytradeblock]

Is this ever going to be implemented? This is pretty much elementary feature...

[portedison]

+1

[auduongtuan]

Any updates on this?