feat: Able to select different postgres database

app/Livewire/Project/New/Select.php

@@ -45,6 +45,8 @@ class Select extends Component
 
     public ?string $selectedEnvironment = null;
 
+    public string $postgresql_type = 'postgres:16-alpine';
+
     public ?string $existingPostgresqlUrl = null;
 
     public ?string $search = null;
@@ -202,6 +204,8 @@ class Select extends Component
             $docker = $this->standaloneDockers->first() ?? $this->swarmDockers->first();
             if ($docker) {
                 $this->setDestination($docker->uuid);
+
+                return $this->whatToDoNext();
             }
         }
         $this->current_step = 'destinations';
@@ -211,6 +215,28 @@ class Select extends Component
     {
         $this->destination_uuid = $destination_uuid;
 
+        return $this->whatToDoNext();
+    }
+
+    public function setPostgresqlType(string $type)
+    {
+        $this->postgresql_type = $type;
+
+        return redirect()->route('project.resource.create', [
+            'project_uuid' => $this->parameters['project_uuid'],
+            'environment_name' => $this->parameters['environment_name'],
+            'type' => $this->type,
+            'destination' => $this->destination_uuid,
+            'server_id' => $this->server_id,
+            'database_image' => $this->postgresql_type,
+        ]);
+    }
+
+    public function whatToDoNext()
+    {
+        if ($this->type === 'postgresql') {
+            $this->current_step = 'select-postgresql-type';
+        } else {
             return redirect()->route('project.resource.create', [
                 'project_uuid' => $this->parameters['project_uuid'],
                 'environment_name' => $this->parameters['environment_name'],
@@ -219,6 +245,7 @@ class Select extends Component
                 'server_id' => $this->server_id,
             ]);
         }
+    }
 
     public function loadServers()
     {

app/Livewire/Project/Resource/Create.php

@@ -18,7 +18,8 @@ class Create extends Component
         $type = str(request()->query('type'));
         $destination_uuid = request()->query('destination');
         $server_id = request()->query('server_id');
-
+        $database_image = request()->query('database_image');
+        ray($database_image);
         $project = currentTeam()->load(['projects'])->projects->where('uuid', request()->route('project_uuid'))->first();
         if (! $project) {
             return redirect()->route('dashboard');
@@ -33,7 +34,11 @@ class Create extends Component
 
             if (in_array($type, DATABASE_TYPES)) {
                 if ($type->value() === 'postgresql') {
-                    $database = create_standalone_postgresql($environment->id, $destination_uuid);
+                    $database = create_standalone_postgresql(
+                        environmentId: $environment->id,
+                        destinationUuid: $destination_uuid,
+                        databaseImage: $database_image
+                    );
                 } elseif ($type->value() === 'redis') {
                     $database = create_standalone_redis($environment->id, $destination_uuid);
                 } elseif ($type->value() === 'mongodb') {

bootstrap/helpers/databases.php

@@ -19,7 +19,7 @@ function generate_database_name(string $type): string
     return $type.'-database-'.$cuid;
 }
 
-function create_standalone_postgresql($environmentId, $destinationUuid, ?array $otherData = null): StandalonePostgresql
+function create_standalone_postgresql($environmentId, $destinationUuid, ?array $otherData = null, string $databaseImage = 'postgres:16-alpine'): StandalonePostgresql
 {
     $destination = StandaloneDocker::where('uuid', $destinationUuid)->first();
     if (! $destination) {
@@ -27,6 +27,7 @@ function create_standalone_postgresql($environmentId, $destinationUuid, ?array $
     }
     $database = new StandalonePostgresql;
     $database->name = generate_database_name('postgresql');
+    $database->image = $databaseImage;
     $database->postgres_password = \Illuminate\Support\Str::password(length: 64, symbols: false);
     $database->environment_id = $environmentId;
     $database->destination_id = $destination->id;

resources/views/livewire/project/new/select.blade.php

@@ -617,6 +617,85 @@
             @endif
         </div>
     @endif
+    @if ($current_step === 'select-postgresql-type')
+        <h2>Select a Postgresql type</h2>
+        <div>If you need extra extensions, you can select Supabase PostgreSQL (or others), otherwise select PostgreSQL
+            16 (default).</div>
+        <div class="flex flex-col gap-4">
+            <div class="flex flex-col gap-2">
+                <div class="gap-2 border border-transparent cursor-pointer box-without-bg dark:bg-coolgray-100 bg-white dark:hover:text-neutral-400 dark:hover:bg-coollabs group flex"
+                    wire:click="setPostgresqlType('postgres:16-alpine')">
+                    <div class="flex flex-col">
+                        <div class="box-title">PostgreSQL 16 (default)</div>
+                        <div class="box-description">
+                            PostgreSQL is a powerful, open-source object-relational database system (no extensions).
+                        </div>
+                    </div>
+                    <div class="flex-1"></div>
+
+                    <div class="flex items-center px-2" title="Read the documentation.">
+                        <a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-6000"
+                            onclick="event.stopPropagation()" href="https://hub.docker.com/_/postgres/"
+                            target="_blank">
+                            Documentation
+                        </a>
+                    </div>
+                </div>
+                <div class="gap-2 border border-transparent cursor-pointer box-without-bg dark:bg-coolgray-100 bg-white dark:hover:text-neutral-400 dark:hover:bg-coollabs group flex"
+                    wire:click="setPostgresqlType('supabase/postgres:15.6.1.113')">
+                    <div class="flex flex-col">
+                        <div class="box-title">Supabase PostgreSQL (with extensions)</div>
+                        <div class="box-description">
+                            Supabase is a modern, open-source alternative to PostgreSQL with lots of extensions.
+                        </div>
+                    </div>
+                    <div class="flex-1"></div>
+                    <div class="flex items-center px-2" title="Read the documentation.">
+                        <a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-600"
+                            onclick="event.stopPropagation()" href="https://github.com/supabase/postgres"
+                            target="_blank">
+                            Documentation
+                        </a>
+                    </div>
+                </div>
+                <div class="gap-2 border border-transparent cursor-pointer box-without-bg dark:bg-coolgray-100 bg-white dark:hover:text-neutral-400 dark:hover:bg-coollabs group flex"
+                    wire:click="setPostgresqlType('postgis/postgis')">
+                    <div class="flex flex-col">
+                        <div class="box-title">PostGIS</div>
+                        <div class="box-description">
+                            PostGIS is a PostgreSQL extension for geographic objects.
+                        </div>
+                    </div>
+                    <div class="flex-1"></div>
+                    <div class="flex items-center px-2" title="Read the documentation.">
+                        <a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-600"
+                            onclick="event.stopPropagation()" href="https://github.com/postgis/docker-postgis"
+                            target="_blank">
+                            Documentation
+                        </a>
+                    </div>
+                </div>
+                <div class="gap-2 border border-transparent cursor-pointer box-without-bg dark:bg-coolgray-100 bg-white dark:hover:text-neutral-400 dark:hover:bg-coollabs group flex"
+                    wire:click="setPostgresqlType('pgvector/pgvector:pg16')">
+                    <div class="flex flex-col">
+                        <div class="box-title">PGVector (16)</div>
+                        <div class="box-description">
+                            PGVector is a PostgreSQL extension for vector data types.
+                        </div>
+                    </div>
+                    <div class="flex-1"></div>
+
+                    <div class="flex items-center px-2" title="Read the documentation.">
+                        <a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-600"
+                            onclick="event.stopPropagation()" href="https://github.com/pgvector/pgvector"
+                            target="_blank">
+                            Documentation
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    @endif
     @if ($current_step === 'existing-postgresql')
         <form wire:submit='addExistingPostgresql' class="flex items-end gap-4">
             <x-forms.input placeholder="postgres://username:password@database:5432" label="Database URL"