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