feature: improve process to add new component related node in frontend

[wvandeun]

Component

No response

Describe the Feature Request

When you need to add a new related node to a relationship of kind component, then today have to select the parent node multiple times. We should improve this process.

We typically add new component related nodes, form the detail view of the parent node.

When we add the new related node, the first form asks us to select an existing node, which is typically not what you want to do. A new component related node needs to have a parent relationship and therefor cannot exist on it's own. So the more typical scenario is that you have to create a new node. This option is now hidden behind the dropdown, which is not obvious.

On top of that, due to the way the form is build, people will already select the parent node in that form, since it is not really clear how they should create a new node.

When you click the "Add new " button that is hidden in the dropdown, you get a new form. In that form the first value you have to provide is again the parent to which this node needs to be associated. This is cumbersome, since we started the whole process from the parent node in the first place, so the UI should understand that this is the parent node to which we want to add the new component related node.

Describe the Use Case

When you want add a new interface to a device (given the demo schema and data loaded in the demo instance of Infrahub) then this is the current workflow:

• Navigate to the detail page of the device to which you want to add a new interface
• Open the interfaces tab in the detailed view
• Click Add interfaces
• Select the kind (it's a relationship to a generic)
• You are given 2 dropdowns, to select the parent device and an interface. It's not obvious here how to create a new interface
• Click the Add new Interface button in the interface dropdown
• Select the device to which you want to add the interface, this can likely already be prefilled, because we started the whole workflow from the device in the first place.

A video where you can see this flow in action:
https://www.loom.com/share/1b3a0f6bfd1946689fa45897b8d577a0?sid=fc021234-7dcf-4c0f-b929-3ddfa090eb18

A better workflow could be:

• Navigate to the detail page of the device to which you want to add a new interface
• Open the interfaces tab in the detailed view
• Click Add interfaces
• Select the type if it is a generic relationship
• Immediately have the ability to create a new interface, or to select an existing interface
• When you create a new interface, the device relationship is pre-populated, or not even a value that you have to provide.

Additional Information

No response