From 139e258664224a9cde0c554d4411e4265a30173d Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Thu, 2 May 2024 09:49:10 +0200
Subject: [PATCH] ui: update resource operations view

---
 .../shared/resource-operations.blade.php      | 77 +++++++++----------
 1 file changed, 36 insertions(+), 41 deletions(-)

diff --git a/resources/views/livewire/project/shared/resource-operations.blade.php b/resources/views/livewire/project/shared/resource-operations.blade.php
index 6419da632..380b5ba91 100644
--- a/resources/views/livewire/project/shared/resource-operations.blade.php
+++ b/resources/views/livewire/project/shared/resource-operations.blade.php
@@ -1,58 +1,53 @@
 <div>
     <h2>Resource Operations</h2>
     <div class="pb-4">You can easily make different kind of operations on this resource.</div>
-    <h4>Clone</h4>
-    <div class="pb-8">
-        <div class="pb-2">
-            Clone this resource to another project / environment.
-        </div>
-        <div class="flex flex-col">
+    <h3>Clone</h3>
+    <div class="pb-4">To another project / environment on a different server.</div>
+    <div class="pb-4">
+        <div class="flex flex-col flex-wrap gap-2">
             @foreach ($servers->sortBy('id') as $server)
-                <div>
-                    <div class="grid grid-cols-1 gap-2 pb-4 lg:grid-cols-4">
-                        @foreach ($server->destinations() as $destination)
-                            <x-modal-confirmation action="cloneTo({{ data_get($destination, 'id') }})">
-                                <x:slot name="content">
-                                    <div class="box">
-                                        <div class="flex flex-col">
-                                            <div class="box-title">{{ $server->name }}</div>
-                                            <div class="box-description">{{ $destination->name }}</div>
-                                        </div>
-                                    </div>
-                                </x:slot>
-                                <div>You are about to clone this resource.</div>
-                            </x-modal-confirmation>
-                        @endforeach
-                    </div>
-                </div>
+                <h5>Server: <span class="font-bold text-white">{{ $server->name }}</span></h5>
+                @foreach ($server->destinations() as $destination)
+                    <x-modal-confirmation action="cloneTo({{ data_get($destination, 'id') }})">
+                        <x:slot name="content">
+                            <div class="box group">
+                                <div class="flex flex-col">
+                                    <div class="box-title">Network</div>
+                                    <div class="box-description">{{ $destination->name }}</div>
+                                </div>
+                            </div>
+                        </x:slot>
+                        <div>You are about to clone this resource.</div>
+                    </x-modal-confirmation>
+                @endforeach
             @endforeach
         </div>
     </div>
-    <h4>Move</h4>
+    <h3>Move</h3>
+    <div class="pb-4">Between projects / environments.</div>
     <div>
-        <div class="pb-8">
+        <div class="pb-2">
             This resource is currently in the <span
                 class="font-bold dark:text-warning">{{ $resource->environment->project->name }} /
                 {{ $resource->environment->name }}</span> environment.
         </div>
-        <div class="flex flex-wrap gap-2">
+        <div class="flex flex-col flex-wrap gap-2">
             @forelse ($projects as $project)
-                <div class="flex flex-wrap gap-2">
-                    @foreach ($project->environments as $environment)
-                        <x-modal-confirmation action="moveTo({{ data_get($environment, 'id') }})">
-                            <x:slot name="content">
-                                <div class="box">
-                                    <div class="flex flex-col">
-                                        <div class="box-title">{{ $project->name }}</div>
-                                        <div class="box-description">environment: {{ $environment->name }}
-                                        </div>
-                                    </div>
+                <h5>Project: <span class="font-bold text-white">{{ $project->name }}</span></h5>
+
+                @foreach ($project->environments as $environment)
+                    <x-modal-confirmation action="moveTo({{ data_get($environment, 'id') }})">
+                        <x:slot name="content">
+                            <div class="box group">
+                                <div class="flex flex-col">
+                                    <div class="box-title">Environment</div>
+                                    <div class="box-description">{{ $environment->name }}</div>
                                 </div>
-                            </x:slot>
-                            <div>You are about to move this resource.</div>
-                        </x-modal-confirmation>
-                    @endforeach
-                </div>
+                            </div>
+                        </x:slot>
+                        <div>You are about to move this resource.</div>
+                    </x-modal-confirmation>
+                @endforeach
             @empty
                 <div>No projects found to move to</div>
             @endforelse