Open sourcing wildduck UI

[kesavkolla]

We have been using wildduck in our environment and have developed a UI for the REST APIs that wildduck exposes. We are opensourcing our work https://github.com/softwareartistry/wildduck-ui

People are welcome to use it and also welcome to submit PR for feature improvements.

[louis-lau]

Very cool! I think, haven't tried it yet. Can you create a screenshot, and add it to the third party projects page in the docs?

https://docs.wildduck.email/#/additional-software/third-party-projects

[louis-lau]

Also glad to see you use the openapi spec so effectively!

[andris9]

Sounds great! I was not able to get it running locally (see screenshot below) but from the description it sounds awesome 👍

[Lakkanna]

Sounds great! I was not able to get it running locally (see screenshot below) but from the description it sounds awesome 👍

Hey @andris9 can you provide more details on the wildduck-ui repository

[andris9]

@Lakkanna

I run the following commands (macOs Big Sur, node version is v15.0.1)

git clone https://github.com/softwareartistry/wildduck-ui.git
cd wildduck-ui/
npm run project:init
npm run dev

Then I open 127.0.0.1:3000 and enter access credentials

Access token: somesecretvalue
API Endpoint: http://127.0.0.1:8080/

Next I get a blank screen and found the following errors from developer console:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (bundle.js:87483)
    at useRef (bundle.js:87522)
    at Kea (bundle.js:65816)
    at renderWithHooks (bundle.js:36938)
    at updateFunctionComponent (bundle.js:39169)
    at mountLazyComponent (bundle.js:39483)
    at beginWork (bundle.js:40737)
    at HTMLUnknownElement.callCallback (bundle.js:22323)
    at Object.invokeGuardedCallbackDev (bundle.js:22372)
    at invokeGuardedCallback (bundle.js:22427)

react-dom.development.js:19527 The above error occurred in the <Kea> component:
    in Kea (created by App)
    in Suspense (created by App)
    in section (created by BasicLayout)
    in BasicLayout (created by Layout)
    in Layout (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
    in section (created by BasicLayout)
    in BasicLayout (created by Layout)
    in Layout (created by App)
    in QueryClientProvider (created by App)
    in App (created by PersistedApp)
    in Suspense (created by PersistedApp)
    in Provider (created by PersistedApp)
    in PersistedApp

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (bundle.js:87483)
    at useRef (bundle.js:87522)
    at Kea (bundle.js:65816)
    at renderWithHooks (bundle.js:36938)
    at updateFunctionComponent (bundle.js:39169)
    at mountLazyComponent (bundle.js:39483)
    at beginWork (bundle.js:40737)
    at HTMLUnknownElement.callCallback (bundle.js:22323)
    at Object.invokeGuardedCallbackDev (bundle.js:22372)
    at invokeGuardedCallback (bundle.js:22427)

react-dom.development.js:88 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in LoadableComponent (created by Context.Consumer)
    in Route (created by ContentArea)
    in Switch (created by ContentArea)
    in ErrorBoundary (created by ConnectFunction)
    in ConnectFunction (created by Kea)
    in Kea (created by ContentArea)
    in main (created by Basic)
    in Basic (created by Content)
    in Content (created by ContentArea)
    in ContentArea (created by App)
    in Suspense (created by App)
    in section (created by BasicLayout)
    in BasicLayout (created by Layout)
    in Layout (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
    in section (created by BasicLayout)
    in BasicLayout (created by Layout)
    in Layout (created by App)
    in QueryClientProvider (created by App)
    in App (created by PersistedApp)
    in Suspense (created by PersistedApp)
    in Provider (created by PersistedApp)
    in PersistedApp

[Lakkanna]

@andris9 I have created a new issue here will let you know once found a solution for this issue,

We had tested in macOS Big Sur and node v14.16.0, can you try by testing it on node v14.16.0

[Lakkanna]

@andris9 currently the project is not working with node version v15.0.1, I have reproduced the issue by using node version v15.0.1, and seems not working, I suggest you to use node version v14.16.0, will fix this soon

[andris9]

@Lakkanna yes, I was able to get it running with node v14. I also noticed that wildduck-ui was not able to perform actual API requests as OPTIONS queries in the WildDuck API server were failing. I added support for CORS in the latest git commit, where all origins are allowed by default. Got the UI panel successfully working after that change 👍

[Lakkanna]

@andris9 happy to hear that finally working, can you create a pull request related to CORS

[andris9]

@Lakkanna no need for PR, I added the change to Restify in WildDuck as it was rejecting every OPTIONS requests from the browser. https://github.com/nodemailer/wildduck/commit/b9b1cd849424aac4e1d4e1d711ac9cce576a2700#diff-1cbda34460db92d4ad755248356e01a93fa8afb3e78f3ae866547fddf34c163b

[kesavkolla]

@andris9 glad you've added the CORS middleware into the wildduck itself. We had to use tricks on our reverse proxy for handling OPTIONS requests. Finally we have a solution for handling CORS inside the wildduck itself.

[louis-lau]

Just tested it out! It's not the prettiest, but a very nice tool for admins to use the api more intuitively and quickly. I like it ❤️

[DuredhelFinceleb]

maybe stupid question but... cannot clone the repo doing git clone [email protected]:softwareartistry/wildduck-ui.git

I'm getting [email protected]: Permission denied (publickey)

[Lakkanna]

@DuredhelFinceleb currently we're using submodule and we configured clone through SSH so I hope you're getting clone error because you have not configured any ssh keys in your GitHub account. we're planning to remove the submodule dependency and add it into the main repo, this will take some time. for now, you can try by adding ssh key to your GitHub account. here you can find steps to setup ssh keys here

[louis-lau]

Cloning over https instead of ssh would be easier, and doesn't need any credential setup. You may want to edit your setup instructions.

[Lakkanna]

@DuredhelFinceleb @louis-lau we have removed the submodule dependency, now i hope you will not get permission denied error, let me know if you still facing the same or the other issue

[louis-lau]

Your setup instructions still say git clone [email protected]:softwareartistry/wildduck-ui.git ;)

[Lakkanna]

@louis-lau thanks for finding out, I forgot the change in instructions, now I have updated it

[DuredhelFinceleb]

@Lakkanna cloning works for me now 🙂 however still can't run it. opening a ticket on your project as this does not belong here

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 15 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 15 days with no activity.