feat(database): add official postgres 18 and pgvector 18 support (#8143)

app/Models/StandalonePostgresql.php

@@ -28,9 +28,23 @@ class StandalonePostgresql extends BaseModel
     protected static function booted()
     {
         static::created(function ($database) {
+            // This is really stupid and it took me 1h to figure out why the image was not loading properly. This is exactly the reason why we need to use the action pattern because Model events and Accessors are a fragile mess!
+            $image = (string) ($database->getAttributes()['image'] ?? '');
+            $majorVersion = 0;
+
+            if (preg_match('/:(\d+)/', $image, $matches)) {
+                $majorVersion = (int) $matches[1];
+            }
+
+            // PostgreSQL 18+ uses /var/lib/postgresql as mount path
+            // Older versions use /var/lib/postgresql/data
+            $mountPath = $majorVersion >= 18
+                ? '/var/lib/postgresql'
+                : '/var/lib/postgresql/data';
+
             LocalPersistentVolume::create([
                 'name' => 'postgres-data-'.$database->uuid,
-                'mount_path' => '/var/lib/postgresql/data',
+                'mount_path' => $mountPath,
                 'host_path' => null,
                 'resource_id' => $database->id,
                 'resource_type' => $database->getMorphClass(),

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

@@ -448,14 +448,56 @@
             <h2>Select a Postgresql type</h2>
             <div>If you need extra extensions, you can select Supabase PostgreSQL (or others), otherwise select
                 PostgreSQL
-                17 (default).</div>
+                18 (default).</div>
-            <div class="flex flex-col gap-6 pt-8">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 pt-8">
+                <div class="gap-2 coolbox group flex relative"
+                    :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
+                    x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('postgres:18-alpine'))"
+                    :disabled="selecting">
+                    <div class="flex flex-col">
+                        <div class="box-title">PostgreSQL 18 (default)</div>
+                        <div class="box-description">
+                            PostgreSQL is a powerful, open-source object-relational database system (no extensions).
+                        </div>
+                    </div>
+                    <a href="https://hub.docker.com/_/postgres/" target="_blank"
+                        @click.stop
+                        class="absolute top-2 right-2 p-1.5 rounded hover:bg-neutral-200 dark:hover:bg-coolgray-300 transition-colors"
+                        title="View documentation">
+                        <svg class="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none"
+                            stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                    </a>
+                </div>
                 <div class="gap-2 coolbox group flex relative"
                     :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
                     x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('postgres:17-alpine'))"
                     :disabled="selecting">
                     <div class="flex flex-col">
-                        <div class="box-title">PostgreSQL 17 (default)</div>
+                        <div class="box-title">PostgreSQL 17</div>
+                        <div class="box-description">
+                            PostgreSQL is a powerful, open-source object-relational database system (no extensions).
+                        </div>
+                    </div>
+                    <a href="https://hub.docker.com/_/postgres/" target="_blank"
+                        @click.stop
+                        class="absolute top-2 right-2 p-1.5 rounded hover:bg-neutral-200 dark:hover:bg-coolgray-300 transition-colors"
+                        title="View documentation">
+                        <svg class="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none"
+                            stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                    </a>
+                </div>
+                <div class="gap-2 coolbox group flex relative"
+                    :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
+                    x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('postgres:16-alpine'))"
+                    :disabled="selecting">
+                    <div class="flex flex-col">
+                        <div class="box-title">PostgreSQL 16</div>
                         <div class="box-description">
                             PostgreSQL is a powerful, open-source object-relational database system (no extensions).
                         </div>
@@ -513,6 +555,27 @@
                         </svg>
                     </a>
                 </div>
+                <div class="gap-2 coolbox group flex relative"
+                    :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
+                    x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('pgvector/pgvector:pg18'))"
+                    :disabled="selecting">
+                    <div class="flex flex-col">
+                        <div class="box-title">PGVector (18)</div>
+                        <div class="box-description">
+                            PGVector is a PostgreSQL extension for vector data types.
+                        </div>
+                    </div>
+                    <a href="https://github.com/pgvector/pgvector" target="_blank"
+                        @click.stop
+                        class="absolute top-2 right-2 p-1.5 rounded hover:bg-neutral-200 dark:hover:bg-coolgray-300 transition-colors"
+                        title="View documentation">
+                        <svg class="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none"
+                            stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                    </a>
+                </div>
                 <div class="gap-2 coolbox group flex relative"
                     :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
                     x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('pgvector/pgvector:pg17'))"