Add componentProps to DynamicField, Database defaults for WordPress (#936)

* Add componentProps to DynamicField and set WordPress database charset and collation defaults

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

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Saeed Vaziry <61919774+saeedvaziry@users.noreply.github.com>

Author: 3 people

app/DTOs/DynamicField.php

@@ -14,6 +14,7 @@ public function __construct(
         private ?array $options = null,
         private ?array $link = null,
         private ?string $className = null,
+        private ?array $componentProps = null,
     ) {}
 
     public static function make(string $name): self
@@ -122,6 +123,16 @@ public function className(?string $className): self
         return $this;
     }
 
+    /**
+     * @param  array<string, mixed>  $props
+     */
+    public function componentProps(array $props): self
+    {
+        $this->componentProps = $props;
+
+        return $this;
+    }
+
     /**
      * @return array<string, mixed>
      */
@@ -137,6 +148,7 @@ public function toArray(): array
             'options' => $this->options,
             'link' => $this->link,
             'className' => $this->className,
+            'componentProps' => $this->componentProps,
         ];
     }
 }

app/Providers/SiteTypeServiceProvider.php

@@ -216,7 +216,8 @@ public function wordpress(): void
                 DynamicField::make('database')
                     ->text()
                     ->label('Database Name')
-                    ->placeholder('wordpress'),
+                    ->placeholder('wordpress')
+                    ->componentProps(['defaultCharset' => 'utf8mb4', 'defaultCollation' => 'utf8mb4_0900_ai_ci']),
                 DynamicField::make('database_user')
                     ->text()
                     ->label('Database User')

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

@@ -1,4 +1,4 @@
-import { FormEvent, ReactNode, useState } from 'react';
+import { FormEvent, ReactNode, useEffect, useState } from 'react';
 import {
   Dialog,
   DialogClose,
@@ -32,11 +32,15 @@ type CreateForm = {
 export default function CreateDatabase({
   server,
   withUser = false,
+  defaultCharset,
+  defaultCollation,
   onDatabaseCreated,
   children,
 }: {
   server: number;
   withUser?: boolean;
+  defaultCharset?: string;
+  defaultCollation?: string;
   onDatabaseCreated?: () => void;
   children: ReactNode;
 }) {
@@ -52,12 +56,21 @@ export default function CreateDatabase({
 
   const form = useForm<CreateForm>({
     name: '',
-    charset: '',
-    collation: '',
+    charset: defaultCharset || '',
+    collation: defaultCollation || '',
     user: withUser,
     existing_user_id: '',
   });
 
+  // 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) => {
+        setCollations(response.data);
+      });
+    }
+  }, [open, charsets, defaultCharset, server, collations]);
+
   const submit = (e: FormEvent) => {
     e.preventDefault();
     form.post(route('databases.store', server), {
@@ -106,7 +119,7 @@ export default function CreateDatabase({
             </FormField>
             <FormField>
               <Label htmlFor="charset">Charset</Label>
-              <Select onValueChange={handleCharsetChange} defaultValue={form.data.charset}>
+              <Select onValueChange={handleCharsetChange} value={form.data.charset}>
                 <SelectTrigger id="charset">
                   <SelectValue placeholder="Select charset" />
                 </SelectTrigger>
@@ -122,7 +135,7 @@ export default function CreateDatabase({
             </FormField>
             <FormField>
               <Label htmlFor="collation">Collation</Label>
-              <Select onValueChange={(value) => form.setData('collation', value)} defaultValue={form.data.collation}>
+              <Select onValueChange={(value) => form.setData('collation', value)} value={form.data.collation}>
                 <SelectTrigger id="collation">
                   <SelectValue placeholder="Select collation" />
                 </SelectTrigger>

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

@@ -11,12 +11,16 @@ export default function DatabaseSelect({
   serverId,
   value,
   createWithUser,
+  defaultCharset,
+  defaultCollation,
   onValueChange,
   ...props
 }: {
   serverId: number;
   value: string;
   createWithUser?: boolean;
+  defaultCharset?: string;
+  defaultCollation?: string;
   onValueChange: (value: string) => void;
 } & SelectTriggerProps) {
   const query = useQuery<Database[]>({
@@ -43,7 +47,13 @@ export default function DatabaseSelect({
           </SelectGroup>
         </SelectContent>
       </Select>
-      <CreateDatabase server={serverId} withUser={createWithUser} onDatabaseCreated={() => query.refetch()}>
+      <CreateDatabase
+        server={serverId}
+        withUser={createWithUser}
+        defaultCharset={defaultCharset}
+        defaultCollation={defaultCollation}
+        onDatabaseCreated={() => query.refetch()}
+      >
         <Button variant="outline">
           <PlusIcon />
         </Button>

resources/js/pages/sites/components/create-site.tsx

@@ -169,6 +169,8 @@ export default function CreateSite({
             /*@ts-expect-error dynamic types*/
             onValueChange={(value) => form.setData('database', value)}
             createWithUser={true}
+            defaultCharset={field.componentProps?.defaultCharset as string | undefined}
+            defaultCollation={field.componentProps?.defaultCollation as string | undefined}
           />
           {/*@ts-expect-error dynamic types*/}
           <InputError message={form.errors.database} />

resources/js/types/dynamic-field-config.d.ts

@@ -12,4 +12,5 @@ export interface DynamicFieldConfig {
     url: string;
   };
   className?: string;
+  componentProps?: Record<string, unknown>;
 }