From 68c976ab70564e4be5915f537448476cb39b220f Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Tue, 3 Oct 2023 08:48:07 +0200
Subject: [PATCH] fix: show all storages in one place for services

---
 .../Livewire/Project/Shared/Storages/All.php  |  1 +
 .../Livewire/Project/Shared/Storages/Show.php |  1 +
 .../livewire/project/service/index.blade.php  | 44 ++++++++++++++++++-
 .../livewire/project/service/show.blade.php   |  4 +-
 .../project/shared/storages/all.blade.php     | 37 +++++++++-------
 .../project/shared/storages/show.blade.php    | 31 ++++++++-----
 6 files changed, 88 insertions(+), 30 deletions(-)

diff --git a/app/Http/Livewire/Project/Shared/Storages/All.php b/app/Http/Livewire/Project/Shared/Storages/All.php
index 30fa9e9e9..8ac22d881 100644
--- a/app/Http/Livewire/Project/Shared/Storages/All.php
+++ b/app/Http/Livewire/Project/Shared/Storages/All.php
@@ -7,6 +7,7 @@ use Livewire\Component;
 
 class All extends Component
 {
+    public bool $isHeaderVisible = true;
     public $resource;
     protected $listeners = ['refreshStorages', 'submit'];
 
diff --git a/app/Http/Livewire/Project/Shared/Storages/Show.php b/app/Http/Livewire/Project/Shared/Storages/Show.php
index 84593aef3..15d16095c 100644
--- a/app/Http/Livewire/Project/Shared/Storages/Show.php
+++ b/app/Http/Livewire/Project/Shared/Storages/Show.php
@@ -11,6 +11,7 @@ class Show extends Component
     public LocalPersistentVolume $storage;
     public bool $isReadOnly = false;
     public ?string $modalId = null;
+    public bool $isFirst = true;
 
     protected $rules = [
         'storage.name' => 'required|string',
diff --git a/resources/views/livewire/project/service/index.blade.php b/resources/views/livewire/project/service/index.blade.php
index 75aa9166e..28a2deb63 100644
--- a/resources/views/livewire/project/service/index.blade.php
+++ b/resources/views/livewire/project/service/index.blade.php
@@ -7,6 +7,8 @@
             <a :class="activeTab === 'service-stack' && 'text-white'"
                 @click.prevent="activeTab = 'service-stack'; window.location.hash = 'service-stack'"
                 href="#">Service Stack</a>
+            <a :class="activeTab === 'storages' && 'text-white'"
+                @click.prevent="activeTab = 'storages'; window.location.hash = 'storages'" href="#">Storages</a>
             <a :class="activeTab === 'environment-variables' && 'text-white'"
                 @click.prevent="activeTab = 'environment-variables'; window.location.hash = 'environment-variables'"
                 href="#">Environment
@@ -34,7 +36,7 @@
                     </div>
                 </form>
                 <div class="grid grid-cols-1 gap-2 pt-4 xl:grid-cols-3">
-                    @foreach ($service->applications as $application)
+                    @foreach ($applications as $application)
                         <div @class([
                             'border-l border-dashed border-red-500' => Str::of(
                                 $application->status)->contains(['exited']),
@@ -98,6 +100,46 @@
                     @endforeach
                 </div>
 
+            </div>
+            <div x-cloak x-show="activeTab === 'storages'">
+                @foreach ($applications as $application)
+                    @if ($loop->first)
+                        <livewire:project.shared.storages.all :resource="$application" />
+                    @else
+                        <livewire:project.shared.storages.all :resource="$application" :isHeaderVisible="false" />
+                    @endif
+                    @if ($application->fileStorages()->get()->count() > 0)
+                        <h5 class="py-4">Mounted Files/Dirs (binds)</h5>
+                        <div class="flex flex-col gap-4">
+                            @foreach ($application->fileStorages()->get()->sort() as $fileStorage)
+                                <livewire:project.service.file-storage :fileStorage="$fileStorage"
+                                    wire:key="{{ $loop->index }}" />
+                            @endforeach
+                        </div>
+                    @endif
+                @endforeach
+                @foreach ($databases as $database)
+                    @if ($loop->first)
+                        <h3 class="pt-4">{{ Str::headline($database->name) }}</h3>
+                        @if ($applications->count() > 0)
+                            <livewire:project.shared.storages.all :resource="$database" :isHeaderVisible="false" />
+                        @else
+                            <livewire:project.shared.storages.all :resource="$database" />
+                        @endif
+                        @if ($database->fileStorages()->get()->count() > 0)
+                            <h5 class="py-4">Mounted Files/Dirs (binds)</h5>
+                            <div class="flex flex-col gap-4">
+                                @foreach ($database->fileStorages()->get()->sort() as $fileStorage)
+                                    <livewire:project.service.file-storage :fileStorage="$fileStorage"
+                                        wire:key="{{ $loop->index }}" />
+                                @endforeach
+                            </div>
+                        @endif
+                    @else
+                        <livewire:project.shared.storages.all :resource="$database" :isHeaderVisible="false" />
+                    @endif
+                @endforeach
+
             </div>
             <div x-cloak x-show="activeTab === 'environment-variables'">
                 <div x-cloak x-show="activeTab === 'environment-variables'">
diff --git a/resources/views/livewire/project/service/show.blade.php b/resources/views/livewire/project/service/show.blade.php
index 8fcfc008a..b789e6550 100644
--- a/resources/views/livewire/project/service/show.blade.php
+++ b/resources/views/livewire/project/service/show.blade.php
@@ -26,7 +26,7 @@
                 <div x-cloak x-show="activeTab === 'storages'">
                     <livewire:project.shared.storages.all :resource="$serviceApplication" />
                     @if ($serviceApplication->fileStorages()->get()->count() > 0)
-                        <h3 class="py-4">Mounted Files (binds)</h3>
+                        <h5 class="py-4">Mounted Files/Dirs (binds)</h5>
                         <div class="flex flex-col gap-4">
                             @foreach ($serviceApplication->fileStorages()->get()->sort() as $fileStorage)
                                 <livewire:project.service.file-storage :fileStorage="$fileStorage" wire:key="{{ $loop->index }}" />
@@ -42,7 +42,7 @@
                 <div x-cloak x-show="activeTab === 'storages'">
                     <livewire:project.shared.storages.all :resource="$serviceDatabase" />
                     @if ($serviceDatabase->fileStorages()->get()->count() > 0)
-                        <h3 class="py-4">Mounted Files (binds)</h3>
+                        <h5 class="py-4">Mounted Files/Dirs (binds)</h5>
                         <div class="flex flex-col gap-4">
                             @foreach ($serviceDatabase->fileStorages()->get()->sort() as $fileStorage)
                                 <livewire:project.service.file-storage :fileStorage="$fileStorage" wire:key="{{ $loop->index }}" />
diff --git a/resources/views/livewire/project/shared/storages/all.blade.php b/resources/views/livewire/project/shared/storages/all.blade.php
index 21f7a89ae..fbf8cd593 100644
--- a/resources/views/livewire/project/shared/storages/all.blade.php
+++ b/resources/views/livewire/project/shared/storages/all.blade.php
@@ -1,28 +1,33 @@
 <div>
-    <div>
-        <div class="flex items-center gap-2">
-            <h2>Storages</h2>
-            @if ($resource->type() !== 'service')
-                <x-helper
-                    helper="For Preview Deployments, storage has a <span class='text-helper'>-pr-#PRNumber</span> in their
+    @if ($isHeaderVisible)
+        <div>
+            <div class="flex items-center gap-2">
+                <h2>Storages</h2>
+                @if ($resource->type() !== 'service')
+                    <x-helper
+                        helper="For Preview Deployments, storage has a <span class='text-helper'>-pr-#PRNumber</span> in their
             volume
             name, example: <span class='text-helper'>-pr-1</span>" />
-                <x-forms.button class="btn" onclick="newStorage.showModal()">+ Add</x-forms.button>
-                <livewire:project.shared.storages.add :uuid="$resource->uuid" />
+                    <x-forms.button class="btn" onclick="newStorage.showModal()">+ Add</x-forms.button>
+                    <livewire:project.shared.storages.add :uuid="$resource->uuid" />
+                @endif
+            </div>
+            <div class="pb-4">Persistent storage to preserve data between deployments.</div>
+            @if ($resource->type() === 'service')
+                <span class="text-warning">Please modify storage layout in your <a class="underline"
+                        href="{{ Str::of(url()->current())->beforeLast('/') }}">Docker Compose</a> file.</span>
+                <h2 class="pt-4">{{ Str::headline($resource->name) }} </h2>
             @endif
         </div>
-        <div>Persistent storage to preserve data between deployments.</div>
-    </div>
-    <div class="flex flex-col gap-2 py-4">
-        @forelse ($resource->persistentStorages as $storage)
+    @endif
+    <div class="flex flex-col gap-4">
+        @foreach ($resource->persistentStorages as $storage)
             @if ($resource->type() === 'service')
-                <livewire:project.shared.storages.show wire:key="storage-{{ $storage->id }}" :storage="$storage"
+                <livewire:project.shared.storages.show wire:key="storage-{{ $storage->id }}" :storage="$storage" :isFirst="$loop->first"
                     isReadOnly='true' />
             @else
                 <livewire:project.shared.storages.show wire:key="storage-{{ $storage->id }}" :storage="$storage" />
             @endif
-        @empty
-            <div class="text-neutral-500">No volume storages found.</div>
-        @endforelse
+        @endforeach
     </div>
 </div>
diff --git a/resources/views/livewire/project/shared/storages/show.blade.php b/resources/views/livewire/project/shared/storages/show.blade.php
index e84ff22ea..401b03069 100644
--- a/resources/views/livewire/project/shared/storages/show.blade.php
+++ b/resources/views/livewire/project/shared/storages/show.blade.php
@@ -6,19 +6,28 @@
                 reversible. <br>Please think again.</p>
         </x-slot:modalBody>
     </x-modal>
-    @once ($isReadOnly)
-        <span class="text-warning">Please modify storage layout in your <a
-                class="underline" href="{{ Str::of(url()->current())->beforeLast('/') }}">Docker Compose</a> file.</span>
-    @endonce
-    <form wire:submit.prevent='submit' class="flex flex-col gap-2 pt-4 xl:items-end xl:flex-row">
+
+    <form wire:submit.prevent='submit' class="flex flex-col gap-2 xl:items-end xl:flex-row">
         @if ($isReadOnly)
-            <x-forms.input id="storage.name" label="Volume Name" required readonly />
-            <x-forms.input id="storage.host_path" label="Source Path" readonly />
-            <x-forms.input id="storage.mount_path" label="Destination Path" required readonly />
+            @if ($isFirst)
+                <x-forms.input id="storage.name" label="Volume Name" required readonly />
+                <x-forms.input id="storage.host_path" label="Source Path (on host)" readonly />
+                <x-forms.input id="storage.mount_path" label="Destination Path (in container)" required readonly />
+            @else
+                <x-forms.input id="storage.name" required readonly />
+                <x-forms.input id="storage.host_path" readonly />
+                <x-forms.input id="storage.mount_path" required readonly />
+            @endif
         @else
-            <x-forms.input id="storage.name" label="Name" required />
-            <x-forms.input id="storage.host_path" label="Source Path" />
-            <x-forms.input id="storage.mount_path" label="Destination Path" required />
+            @if ($isFirst)
+                <x-forms.input id="storage.name" label="Volume Name" required />
+                <x-forms.input id="storage.host_path" label="Source Path (on host)" />
+                <x-forms.input id="storage.mount_path" label="Destination Path (in container)" required />
+            @else
+                <x-forms.input id="storage.name" required />
+                <x-forms.input id="storage.host_path" />
+                <x-forms.input id="storage.mount_path" required />
+            @endif
             <div class="flex gap-2">
                 <x-forms.button type="submit">
                     Update