feat: nwc connection page ui

[pavanjoshi914]

ToDos

• Change permissions text when permissions are toggled

Screenshots

[bumi]

you nicely implemented the UI. this feels much easier and looks better to setup the connection. \o/

but we just have the problem with this UI that we now say "Authorise the new app to: X,Y,Z" at the top.
and those permissions can be changed in the "advanced" section.
In the list of permission I don't know that I can change it and if we change it in the "advanced" modal we now would need to update the list on the main screen - which we can not really do because we have a simple HTML page there.
So somewhat think we need to have a bit of a different UX there.

cc @stackingsaunter @reneaaron @rolznz

[bumi]

Do I read the code correctly that you have some JS event listeners on the elements in the modal that then set hidden fields within the form.

If we get all those form elements in the

then we would not need this JS?

[bumi]

I think these classes should always be the same... potentially ideally even part of the layout if possible.

when each page is different it becomes hard to maintain and it becomes hard to change

[rolznz]

which we can not really do because we have a simple HTML page there.
So somewhat think we need to have a bit of a different UX there.

@bumi can we not add/remove "hidden" class on the different permissions?

[rolznz]

@im-adithya if editable=false the warning shown in the advanced settings modal is great (and fields are correctly disabled), but we do not show that the title cannot be edited on the main page

[rolznz]

@im-adithya can you hide the budget section if the payment permission is disabled?

[im-adithya]

So somewhat think we need to have a bit of a different UX there.

I think we can add a line there saying "you can edit these permissions in advanced settings"

which we can not really do because we have a simple HTML page there

I think we can toggle "hidden" classes using JS to show the text, we just need some clever (so it makes sense even after removing/adding span tags in between) text in different scenarios

If we get all those form elements in the

In the...? 😄

I think these classes should always be the same... potentially ideally even part of the layout if possible.

Let's merge this and #107 and I'll then put up a PR to use common classes

we do not show that the title cannot be edited on the main page

The Figma designs were not specific in that regard, and I went with this because if we change the text then we should change the header as well ("Connect to Zappy") but we can use a generic text there "Create a new app connection" and change it to be editable, should I do that?

[bumi]

@bumi can we not add/remove "hidden" class on the different permissions?

I don't think this complexity is worth it. look at all that inline JS. This just gets hard to maintain and imo also the UX is not very clear - I see the permissions but have no idea that I can change those.

And I think we should have a simple form here

input fields submit

and not have JS code required that tries to sync some values from some other fields just because they are not part of the

I think we can add a line there saying "you can edit these permissions in advanced settings"

nobody will read that and also it just makes the UI more complicated (more text to read and understand) - and we want to make it simpler.

[bumi]

If we would do this modal inline then we only need to show/hide a few elements.

the inputs are in the form. an "advanced" button can be below the permissions ("Authorise the new app to").

why is this modal so much better? @stackingsaunter

[rolznz]

Linking #183

This implementation could have been simpler with a proper frontend framework.