Make create database dialog select default charset and collation (#973)

JmzTaylor · web-flow · commit f61b5c0f6e2b · 2026-01-01T13:03:39.000+01:00
diff --git a/resources/js/pages/databases/components/create-database.tsx b/resources/js/pages/databases/components/create-database.tsx
@@ -64,12 +64,12 @@ export default function CreateDatabase({
 
   // Auto-load collations when modal opens with a default charset
   useEffect(() => {
-    if (open && defaultCharset && charsets.includes(defaultCharset) && collations.length === 0) {
-      axios.get(route('databases.collations', { server: server, charset: defaultCharset })).then((response) => {
+    if (open && form.data.charset && charsets.includes(form.data.charset) && collations.length === 0) {
+      axios.get(route('databases.collations', { server: server, charset: form.data.charset })).then((response) => {
         setCollations(response.data);
       });
     }
-  }, [open, charsets, defaultCharset, server, collations]);
+  }, [open, charsets, form.data.charset, server, collations]);
 
   const submit = (e: FormEvent) => {
     e.preventDefault();
diff --git a/resources/js/pages/databases/index.tsx b/resources/js/pages/databases/index.tsx
@@ -21,6 +21,10 @@ type Page = {
 export default function Databases() {
   const page = usePage<Page>();
 
+  const dbType = page.props.server.services['database'];
+  const defaultCharset = dbType === 'postgresql' ? 'UTF8' : 'utf8mb4';
+  const defaultCollation = dbType === 'postgresql' ? 'C.utf8' : 'utf8mb4_0900_ai_ci';
+
   return (
     <ServerLayout>
       <Head title={`Databases - ${page.props.server.name}`} />
@@ -36,7 +40,7 @@ export default function Databases() {
               </Button>
             </a>
             <SyncDatabases server={page.props.server} />
-            <CreateDatabase server={page.props.server.id}>
+            <CreateDatabase server={page.props.server.id}  defaultCharset={defaultCharset} defaultCollation={defaultCollation}>
               <Button>
                 <PlusIcon />
                 <span className="hidden lg:block">Create</span>
