search

matrix-org / matrix-appservice-irc

Node.js IRC bridge for Matrix
Apache License 2.0
461 stars 149 forks source link

Add new setup widget UI #1656

Closed justinbot closed 1 year ago

justinbot commented 1 year ago

Following #1655 which added support for widgets authenticating with the Provisioning API, this PR adds a new UI for configuring bridged rooms from within a widget:

Screenshot 2023-02-06 at 8 44 10 PM

Screenshot 2023-02-06 at 8 58 54 PM

This is an optional feature, enabled with the Provisioning API: https://github.com/matrix-org/matrix-appservice-irc/blob/bb915f8ecfd4187ceb8ebd94c4b1a1cc4360d200/config.sample.yaml#L526-L528

Implementation

At a high level, the widget is just a static webpage which interacts with the Provisioning API to perform configuration.

More specifically, this takes the same approach as the setup widgets in matrix-hookshot, but implemented with the consideration that much of it is generic and could be refactored out into a package for reuse in other bridges.

Provisioning API

This part of the implementation is relevant for any API using the ProvisioningApi class from matrix-appservice-bridge. Includes:

Frontend

The same approach for building a frontend with Vite could be taken for other bridges, as well as the handful of reusable UI components which have been implemented with Tailwindcss.

IRC Bridge

The IRC Provisioning API client and the actual configuration UI are specific to this IRC Bridge.

Half-Shot commented 1 year ago

One final thought @justinbot, can you write some documentation on this feature in the hosted docs. It can probably be similar to the hookshot ones. Thanks!

justinbot commented 1 year ago

Sorry about the force push (had to rebase after changes to #1655). New changes start with fe0fabb.

I realized the widget frontend was not actually being linted (and the existing .eslintrc didn't make sense for a frontend app) so I added a separate .eslintrc and fixed a handful of issues it revealed.

And then I took a second pass at the frontend style (see updated screenshot).

justinbot commented 1 year ago

Rebased one last time following 5f77a704c59afa9917947799c4112fc82487159e -- this should be good to go