feat: database GUI to create connections (#3737)

Schema-driven UI for creating databases. On create, these will be added
as a cell in the top. Will also let user's pick their ORM/query-engine
of choice.

<img width="1048" alt="Screenshot 2025-02-10 at 8 02 57 PM"
src="https://github.com/user-attachments/assets/851a8f2a-6978-4d89-bb71-d168679ff8df"
/>

<img width="1007" alt="Screenshot 2025-02-10 at 8 03 12 PM"
src="https://github.com/user-attachments/assets/bdefbce7-3c56-42e1-9cce-16490ffc2eb3"
/>


<img width="1442" alt="Screenshot 2025-02-09 at 5 03 53 PM"
src="https://github.com/user-attachments/assets/7d9b1736-a790-4e9e-8cc8-a2ac716de53e"
/>

frontend/src/components/databases/icon.tsx

@@ -7,7 +7,7 @@ import MySQLIcon from "./icons/mysql.svg";
 import SnowflakeIcon from "./icons/snowflake.svg";
 import DatabricksIcon from "./icons/databricks.svg";
 import ClickhouseIcon from "./icons/clickhouse.svg";
-
+import GoogleBigQueryIcon from "./icons/googlebigquery.svg";
 import { cn } from "@/utils/cn";
 
 /**
@@ -31,6 +31,7 @@ export const DatabaseLogo: FC<DatabaseLogoProps> = ({ name, className }) => {
     snowflake: SnowflakeIcon,
     databricks: DatabricksIcon,
     clickhouse: ClickhouseIcon,
+    googlebigquery: GoogleBigQueryIcon,
   };
 
   const url = URLS[lowerName];
@@ -43,7 +44,7 @@ export const DatabaseLogo: FC<DatabaseLogoProps> = ({ name, className }) => {
     <img
       src={url}
       alt={name}
-      className={cn(className, "invert-[.5] dark:invert-[.7]")}
+      className={cn("invert-[.5] dark:invert-[.7]", className)}
     />
   );
 };

frontend/src/components/editor/actions/useNotebookActions.tsx

@@ -30,6 +30,7 @@ import {
   XCircleIcon,
   FilePlus2Icon,
   FastForwardIcon,
+  DatabaseIcon,
 } from "lucide-react";
 import { commandPaletteAtom } from "../controls/command-palette";
 import {
@@ -71,6 +72,7 @@ import { copyToClipboard } from "@/utils/copy";
 import { newNotebookURL } from "@/utils/urls";
 import { useRunAllCells } from "../cell/useRunCells";
 import { settingDialogAtom } from "@/components/app-config/state";
+import { AddDatabaseDialogContent } from "../database/add-database-form";
 
 const NOOP_HANDLER = (event?: Event) => {
   event?.preventDefault();
@@ -376,6 +378,13 @@ export function useNotebookActions() {
         undoDeleteCell();
       },
     },
+    {
+      icon: <DatabaseIcon size={14} strokeWidth={1.5} />,
+      label: "Add database connection",
+      handle: () => {
+        openModal(<AddDatabaseDialogContent onClose={closeModal} />);
+      },
+    },
 
     {
       divider: true,

frontend/src/components/editor/chrome/panels/datasources-panel.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import {
   ChevronRightIcon,
   DatabaseIcon,
+  PlusIcon,
   PlusSquareIcon,
   XIcon,
 } from "lucide-react";
@@ -48,6 +49,7 @@ import { DatabaseLogo } from "@/components/databases/icon";
 import { EngineVariable } from "@/components/databases/engine-variable";
 import type { VariableName } from "@/core/variables/types";
 import { dbDisplayName } from "@/components/databases/display";
+import { AddDatabaseDialog } from "../../database/add-database-form";
 
 const sortedTablesAtom = atom((get) => {
   const tables = get(datasetTablesAtom);
@@ -90,6 +92,14 @@ export const DataSourcesPanel: React.FC = () => {
       <PanelEmptyState
         title="No tables found"
         description="Any datasets/dataframes in the global scope will be shown here."
+        action={
+          <AddDatabaseDialog>
+            <Button variant="outline" size="sm">
+              Add database
+              <PlusIcon className="h-4 w-4 ml-2" />
+            </Button>
+          </AddDatabaseDialog>
+        }
         icon={<DatabaseIcon />}
       />
     );
@@ -158,6 +168,12 @@ export const DataSourcesPanel: React.FC = () => {
               <XIcon className="h-4 w-4" />
             </button>
           )}
+
+          <AddDatabaseDialog>
+            <button className="float-right border-b px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground">
+              <PlusIcon className="h-4 w-4" />
+            </button>
+          </AddDatabaseDialog>
         </div>
 
         <TableList

frontend/src/components/editor/chrome/panels/empty-state.tsx

@@ -4,11 +4,16 @@ import React from "react";
 interface Props {
   title: string;
   description?: React.ReactNode;
-  color?: string;
   icon?: React.ReactElement;
+  action?: React.ReactNode;
 }
 
-export const PanelEmptyState = ({ title, description, color, icon }: Props) => {
+export const PanelEmptyState = ({
+  title,
+  description,
+  icon,
+  action,
+}: Props) => {
   return (
     <div className="mx-6 my-6 flex flex-col gap-2">
       <div className="flex flex-row gap-2 items-center">
@@ -17,6 +22,7 @@ export const PanelEmptyState = ({ title, description, color, icon }: Props) => {
         <span className="mt-1 text-accent-foreground">{title}</span>
       </div>
       <span className="text-muted-foreground text-sm">{description}</span>
+      {action && <div className="mt-2">{action}</div>}
     </div>
   );
 };