From f535ed2359f9400ded0eed439360e059bb28f41b Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Wed, 4 Dec 2024 14:00:49 +0100
Subject: [PATCH] Enhance modal input component and storage forms

- Added 'minWidth' attribute to modal input component for better responsiveness.
- Updated modal input instantiation in storage view to set a minimum width of 64rem.
- Improved layout and user guidance in the storage add forms by adding descriptive text for volume, file, and directory mounts.
- Changed button labels from 'Save' to 'Add' for clarity in storage forms.
---
 .../views/components/modal-input.blade.php    |  3 +-
 .../project/service/storage.blade.php         |  2 +-
 .../project/shared/storages/add.blade.php     | 50 ++++++++++++-------
 3 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/resources/views/components/modal-input.blade.php b/resources/views/components/modal-input.blade.php
index c090037d5..acd3b8bdf 100644
--- a/resources/views/components/modal-input.blade.php
+++ b/resources/views/components/modal-input.blade.php
@@ -7,6 +7,7 @@
     'action' => 'delete',
     'content' => null,
     'closeOutside' => true,
+    'minWidth' => '36rem',
 ])
 <div x-data="{ modalOpen: false }" :class="{ 'z-40': modalOpen }" @keydown.window.escape="modalOpen=false"
     class="relative w-auto h-auto" wire:ignore>
@@ -40,7 +41,7 @@
                 x-transition:leave="ease-in duration-100"
                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
-                class="relative w-full py-6 border rounded drop-shadow min-w-full lg:min-w-[36rem] max-w-fit bg-white border-neutral-200 dark:bg-base px-6 dark:border-coolgray-300">
+                class="relative w-full py-6 border rounded drop-shadow min-w-full lg:min-w-[{{ $minWidth }}] max-w-fit bg-white border-neutral-200 dark:bg-base px-6 dark:border-coolgray-300">
                 <div class="flex items-center justify-between pb-3">
                     <h3 class="text-2xl font-bold">{{ $title }}</h3>
                     <button @click="modalOpen=false"
diff --git a/resources/views/livewire/project/service/storage.blade.php b/resources/views/livewire/project/service/storage.blade.php
index 13a3f642d..7c1291dc5 100644
--- a/resources/views/livewire/project/service/storage.blade.php
+++ b/resources/views/livewire/project/service/storage.blade.php
@@ -15,7 +15,7 @@
                     volume
                     name, example: <span class='text-helper'>-pr-1</span>" />
             @if ($resource?->build_pack !== 'dockercompose')
-                <x-modal-input :closeOutside="false" buttonTitle="+ Add" title="New Persistent Storage">
+                <x-modal-input :closeOutside="false" buttonTitle="+ Add" title="New Persistent Storage" minWidth="64rem">
                     <livewire:project.shared.storages.add :resource="$resource" />
                 </x-modal-input>
             @endif
diff --git a/resources/views/livewire/project/shared/storages/add.blade.php b/resources/views/livewire/project/shared/storages/add.blade.php
index b4538d769..44da381c8 100644
--- a/resources/views/livewire/project/shared/storages/add.blade.php
+++ b/resources/views/livewire/project/shared/storages/add.blade.php
@@ -1,13 +1,15 @@
-<div class="flex flex-col w-full gap-2 rounded max-h-[80vh] overflow-y-auto scrollbar">
-    <div class="p-4">
-        You can add Volumes, Files and Directories to your resources here.
-        <form class="flex flex-col w-full gap-2 rounded" wire:submit='submitPersistentVolume'>
+<div class="flex flex-col w-full gap-2 max-h-[80vh] overflow-y-auto scrollbar">
+    <form class="flex flex-col w-full gap-2 rounded " wire:submit='submitPersistentVolume'>
+        <div class="flex flex-col">
             <h3>Volume Mount</h3>
-            @if ($isSwarm)
-                <h5>Swarm Mode detected: You need to set a shared volume (EFS/NFS/etc) on all the worker nodes if you
-                    would
-                    like to use a persistent volumes.</h5>
-            @endif
+            <div>Docker Volumes mounted to the container.</div>
+        </div>
+        @if ($isSwarm)
+            <h5>Swarm Mode detected: You need to set a shared volume (EFS/NFS/etc) on all the worker nodes if you
+                would
+                like to use a persistent volumes.</h5>
+        @endif
+        <div class="flex flex-col gap-2 px-2">
             <x-forms.input placeholder="pv-name" id="name" label="Name" required helper="Volume name." />
             @if ($isSwarm)
                 <x-forms.input placeholder="/root" id="host_path" label="Source Path" required
@@ -19,29 +21,39 @@
             <x-forms.input placeholder="/tmp/root" id="mount_path" label="Destination Path" required
                 helper="Directory inside the container." />
             <x-forms.button type="submit" @click="modalOpen=false">
-                Save
+                Add
             </x-forms.button>
+        </div>
 
-        </form>
-        <form class="flex flex-col w-full gap-2 rounded" wire:submit='submitFileStorage'>
+    </form>
+    <form class="flex flex-col w-full gap-2 rounded py-4" wire:submit='submitFileStorage'>
+        <div class="flex flex-col">
             <h3>File Mount</h3>
+            <div>Actual file mounted from the host system to the container.</div>
+        </div>
+        <div class="flex flex-col gap-2 px-2">
             <x-forms.input placeholder="/etc/nginx/nginx.conf" id="file_storage_path" label="Destination Path" required
-                helper="File inside the container" />
+                helper="File location inside the container" />
             <x-forms.textarea label="Content" id="file_storage_content"></x-forms.textarea>
             <x-forms.button type="submit" @click="modalOpen=false">
-                Save
+                Add
             </x-forms.button>
-        </form>
-        <form class="flex flex-col w-full gap-2 rounded" wire:submit='submitFileStorageDirectory'>
+        </div>
+    </form>
+    <form class="flex flex-col w-full gap-2 rounded" wire:submit='submitFileStorageDirectory'>
+        <div class="flex flex-col">
             <h3>Directory Mount</h3>
+            <div>Directory mounted from the host system to the container.</div>
+        </div>
+        <div class="flex flex-col gap-2 px-2">
             <x-forms.input placeholder="{{ application_configuration_dir() }}/{{ $resource->uuid }}/etc/nginx"
                 id="file_storage_directory_source" label="Source Directory" required
                 helper="Directory on the host system." />
             <x-forms.input placeholder="/etc/nginx" id="file_storage_directory_destination"
                 label="Destination Directory" required helper="Directory inside the container." />
             <x-forms.button type="submit" @click="modalOpen=false">
-                Save
+                Add
             </x-forms.button>
-        </form>
-    </div>
+        </div>
+    </form>
 </div>