UI for Database Connection Add and Delete

[poundifdef]

The goal of this ticket is to add a basic UI to add and delete new database destinations. This will be done purely in SvelteKit. The backend endpoints are already implemented in Go, though you may need to make small changes or fixes.

How to Run

1. Run the backend: go run .
2. Run the frontend in a separate terminal: cd frontend; npm run dev
3. Go to http://localhost:8080/login to log into the dashboard
4. Then you should be able to go to http://localhost:5173/dashboard to run the sveltekit app

Requirements

• Everything should be implemented using plain HTML. There is no need to implement any CSS or styling.
• The UI is a single-page-app which makes ajax calls to our backend in Go.
• The pull request will be against the svelte-2 branch, not main

Part 1: Delete

1. If you go to this page, there is a delete button: http://localhost:5173/dashboard/connections/
2. When the user clicks delete, we should show a confirmation asking if they are sure. The dialog should use this UI element: https://shoelace.style/components/dialog
3. If the user clicks OK, then make a DELETE fetch request to /api/destinations/{id}.
4. If the deletion is successful, then show a success alert, otherwise show the error. Use this component for showing alerts: https://shoelace.style/components/alert

Part 2: Add

The user should be able to add new connections.

Show Form

1. Navigate to this page: http://localhost:5173/dashboard/connections/new/duckdb/
2. This should make an ajax request to /api/destinations/params/[type] where type is a SvelteKit url parameter
3. That ajax endpoint will return a list of form fields:
   • name: the name of the field
   • type: the type of form field. It could be text, textarea, password, number, or bool (checkbox)
   • label: the label for the field
   • default: a default value

Here is an example:

{
    "form_fields": [
        {
            "name": "database",
            "type": "text",
            "label": "Database Name",
            "default": ""
        },
        {
            "name": "token",
            "type": "password",
            "label": "MotherDuck Token",
            "default": ""
        }
    ],
    "type": "DuckDB"
}

4. Using this data, show a form on the page with all of these fields.
5. Additionally, have a form field for the "Name" of the destination
6. Finally, there should be a "save" button

Save Data

1. When the user clicks the save button, make an ajax POST /destinations
2. The payload should look like this:

{
  "type": [type from URL],
  "name": "user-entered name",
  "settings": {
    "database": "user-entered-db-value",
    "token": "user-entered-token-value"
  }
}

3. If the POST is successful, then redirect the user to /dashboard/connections
4. If the POST fails, then show an alert with the error returned from the API.

Testing

This should work with the following four URLs:

1. http://localhost:5173/dashboard/connections/new/duckdb/
2. http://localhost:5173/dashboard/connections/new/clickhouse/
3. http://localhost:5173/dashboard/connections/new/bigquery/
4. http://localhost:5173/dashboard/connections/new/postgres/
5. http://localhost:5173/dashboard/connections/new/redshift/

Show a video of your solution working when making your pull request

[algora-pbc]

💎 $150 bounty • Scratch Data (YC S21)

Steps to solve:

1. Start working: Comment /attempt #170 with your implementation plan
2. Submit work: Create a pull request including /claim #170 in the PR body to claim the bounty
3. Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

Thank you for contributing to scratchdata/scratchdata!

Add a bounty • Share on socials

Attempt	Started (GMT+0)	Solution
🟢 @CodeMan99	May 8, 2024, 2:54:34 PM	#173
🟢 @mehulmathur16		#172

[CodeMan99]

Hello 👋

Maybe I'm blind, but I don't see a frontend folder in the main branch?

[poundifdef]

Hi! @CodeMan99 it is in a branch called svelte-2

[CodeMan99]

@poundifdef Awesome. Have it up and running.

/attempt #170

Seems straight forward enough. It might take me a moment to spin up on everything.

Would you be interested in adding a devcontainer for this project (vscode docs)? I currently have a docker-compose configuration with a clickhouse sidecar container.

Options

• Cancel my attempt

[CodeMan99]

@poundifdef I am currently working on part 2 (Add connection) and I think you'll be very pleased with the result.

[CodeMan99]

Almost there!

[algora-pbc]

💡 @CodeMan99 submitted a pull request that claims the bounty. You can visit your bounty board to reward.

[CodeMan99]

@poundifdef Anything else needed here?

[poundifdef]

@CodeMan99 Nope, will get the payment processed shortly (hopefully today - there was a bug on the payment screen but I emailed the algora folks and they're fixing!) Will also have new similar bounties coming up soon so stay tuned.

[algora-pbc]

🎉🎈 @CodeMan99 has been awarded $150! 🎈🎊

• Share on socials
• Give feedback