Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add new setup widget UI #1656

Merged
merged 41 commits into from
Feb 8, 2023
Merged

Add new setup widget UI #1656

merged 41 commits into from
Feb 8, 2023

Conversation

justinbot
Copy link
Contributor

@justinbot justinbot commented Jan 23, 2023

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:

provisioning:
# True to enable the provisioning HTTP endpoint. Default: false.
enabled: false

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:

  • Parsing widget query parameters.
  • Widget API setup and obtaining an OpenID token.
  • Exchanging the OpenID token for a session token, storing and checking validity of the session token.
  • Instantiating a generic Provisioning API client.

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.

@justinbot justinbot requested a review from a team as a code owner January 23, 2023 17:22
@justinbot justinbot self-assigned this Jan 23, 2023
widget/src/IrcApp.tsx Outdated Show resolved Hide resolved
@justinbot justinbot force-pushed the justinbot/setup-widget branch 3 times, most recently from cbe01fc to c462da5 Compare January 26, 2023 16:30
widget/src/IrcApp.tsx Outdated Show resolved Hide resolved
widget/src/IrcApp.tsx Outdated Show resolved Hide resolved
widget/src/IrcApp.tsx Outdated Show resolved Hide resolved
widget/src/IrcApp.tsx Outdated Show resolved Hide resolved
widget/src/IrcApp.tsx Outdated Show resolved Hide resolved
Copy link
Contributor

@Half-Shot Half-Shot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is actually looking amazing, you should be very proud of this work! I have a few minor concerns, but the bulk of this is great.

widget/src/IrcApp.tsx Show resolved Hide resolved
widget/src/IrcApp.tsx Outdated Show resolved Hide resolved
widget/src/IrcApp.tsx Outdated Show resolved Hide resolved
@Half-Shot
Copy link
Contributor

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
Copy link
Contributor Author

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).

@Half-Shot Half-Shot self-requested a review February 7, 2023 08:58
Copy link
Contributor

@Half-Shot Half-Shot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Smashing, one note in the docs then this is ready to ship I feel :)

docs/setup_widget.md Show resolved Hide resolved
@justinbot
Copy link
Contributor Author

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

Base automatically changed from justinbot/provisioner-bridge-sdk to develop February 8, 2023 15:42
@justinbot justinbot merged commit f2cc06f into develop Feb 8, 2023
@justinbot justinbot deleted the justinbot/setup-widget branch February 8, 2023 16:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants