[Fix] utf8mb4 for MariaDB missing (#1156)

* closes #1155

* charset fixes

* fix

Author: RichardAnderson

app/Http/Controllers/DatabaseController.php

@@ -68,7 +68,10 @@ public function collations(Server $server, ?string $charset = null): JsonRespons
 
         $charsets = $server->database()->type_data['charsets'] ?? [];
 
-        return response()->json(data_get($charsets, $charset.'.list', data_get($charsets, $charset.'.default', [])));
+        return response()->json([
+            'default' => data_get($charsets, $charset.'.default'),
+            'list' => data_get($charsets, $charset.'.list', []),
+        ]);
     }
 
     #[Post('/', name: 'databases.store')]

app/Services/Database/AbstractDatabase.php

@@ -269,34 +269,27 @@ public function getCharsets(): array
         $charsets = $this->tableToArray($data);
 
         $results = [];
-        $charsetCollations = [];
 
-        foreach ($charsets as $key => $charset) {
-            if (empty($charsetCollations[$charset[1]])) {
-                $charsetCollations[$charset[1]] = [];
-            }
-
-            $charsetCollations[$charset[1]][] = $charset[0];
-
-            if ($charset[3] === 'Yes') {
-                $results[$charset[1]] = [
-                    'default' => $charset[0],
-                    'list' => [],
-                ];
+        foreach ($charsets as $charset) {
+            $collation = $charset[0];
+            $charsetName = $charset[1];
 
+            if (empty($charsetName) || $charsetName === 'NULL') {
                 continue;
             }
 
-            if ($key == count($charsets) - 1) {
-                $results[$charset[1]] = [
+            if (! isset($results[$charsetName])) {
+                $results[$charsetName] = [
                     'default' => null,
                     'list' => [],
                 ];
             }
-        }
 
-        foreach (array_keys($results) as $charset) {
-            $results[$charset]['list'] = $charsetCollations[$charset];
+            $results[$charsetName]['list'][] = $collation;
+
+            if (($charset[3] ?? null) === 'Yes') {
+                $results[$charsetName]['default'] = $collation;
+            }
         }
 
         ksort($results);

resources/js/pages/databases/components/create-database.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, ReactNode, useEffect, useState } from 'react';
+import { FormEvent, ReactNode, useRef, useState } from 'react';
 import {
   Dialog,
   DialogClose,
@@ -47,12 +47,8 @@ export default function CreateDatabase({
   const [open, setOpen] = useState(false);
   const [charsets, setCharsets] = useState<string[]>([]);
   const [collations, setCollations] = useState<string[]>([]);
-
-  const fetchCharsets = async () => {
-    axios.get(route('databases.charsets', server)).then((response) => {
-      setCharsets(response.data);
-    });
-  };
+  const fetchedServer = useRef<number | null>(null);
+  const latestCollationRequest = useRef(0);
 
   const form = useForm<CreateForm>({
     name: '',
@@ -62,14 +58,44 @@ export default function CreateDatabase({
     existing_user_id: '',
   });
 
-  // Auto-load collations when modal opens with a default charset
-  useEffect(() => {
-    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);
-      });
+  const resolveCollation = (list: string[], defaultCollation: string | null, current: string): string => {
+    if (current && list.includes(current)) {
+      return current;
     }
-  }, [open, charsets, form.data.charset, server, collations]);
+    if (defaultCollation && list.includes(defaultCollation)) {
+      return defaultCollation;
+    }
+    return list[0] ?? '';
+  };
+
+  const fetchCollations = async (charset: string, current: string): Promise<void> => {
+    const requestId = ++latestCollationRequest.current;
+    try {
+      const response = await axios.get(route('databases.collations', { server: server, charset }));
+      if (requestId !== latestCollationRequest.current) {
+        return;
+      }
+      setCollations(response.data.list);
+      form.setData('collation', resolveCollation(response.data.list, response.data.default, current));
+    } catch {
+      if (requestId !== latestCollationRequest.current) {
+        return;
+      }
+      setCollations([]);
+      form.setData('collation', '');
+    }
+  };
+
+  const fetchCharsets = async () => {
+    setCollations([]);
+    const response = await axios.get(route('databases.charsets', server));
+    fetchedServer.current = server;
+    setCharsets(response.data);
+
+    if (form.data.charset && response.data.includes(form.data.charset)) {
+      await fetchCollations(form.data.charset, form.data.collation);
+    }
+  };
 
   const submit = (e: FormEvent) => {
     e.preventDefault();
@@ -89,17 +115,14 @@ export default function CreateDatabase({
 
   const handleOpenChange = (open: boolean) => {
     setOpen(open);
-    if (open && charsets.length === 0) {
+    if (open && fetchedServer.current !== server) {
       fetchCharsets();
     }
   };
 
   const handleCharsetChange = (value: string) => {
-    form.setData('collation', '');
     form.setData('charset', value);
-    axios.get(route('databases.collations', { server: server, charset: value })).then((response) => {
-      setCollations(response.data);
-    });
+    void fetchCollations(value, '');
   };
 
   return (

tests/Unit/SSH/Services/Database/GetCharsetsTest.php

@@ -40,7 +40,7 @@ class GetCharsetsTest extends TestCase
     ];
 
     /**
-     * @param  array<string, string|array<string>>  $expected
+     * @param  array<string, array{default: string|null, list: array<int, string>}>  $expected
      */
     #[DataProvider('data')]
     public function test_update_charsets(string $name, string $version, string $output, array $expected): void
@@ -107,6 +107,35 @@ public static function data(): array
                 EOD,
                 static::$mysqlCharsets,
             ],
+            [
+                'mariadb',
+                '11.4',
+                <<<'EOD'
+                Collation	Charset	Id	Default	Compiled	Sortlen
+                big5_chinese_ci	big5	1	Yes	Yes	1
+                big5_bin	big5	84		Yes	1
+                utf8mb4_general_ci	utf8mb4	45		Yes	1
+                utf8mb4_bin	utf8mb4	46		Yes	1
+                uca1400_ai_ci	NULL	NULL	NULL	Yes	8
+                uca1400_ai_cs	NULL	NULL	NULL	Yes	8
+                EOD,
+                [
+                    'big5' => [
+                        'default' => 'big5_chinese_ci',
+                        'list' => [
+                            'big5_chinese_ci',
+                            'big5_bin',
+                        ],
+                    ],
+                    'utf8mb4' => [
+                        'default' => null,
+                        'list' => [
+                            'utf8mb4_general_ci',
+                            'utf8mb4_bin',
+                        ],
+                    ],
+                ],
+            ],
             [
                 'postgresql',
                 '16',