feat(resources): show mobile action buttons

resources/views/livewire/project/application/heading.blade.php

@@ -282,33 +282,54 @@
                         <option disabled>No links available</option>
                     @endif
                 </optgroup>
-                @if (!($application->build_pack === 'dockercompose' && is_null($application->docker_compose_raw)))
-                    <optgroup label="Actions">
-                        @if (!str($application->status)->startsWith('exited'))
-                            @if (!$application->destination->server->isSwarm())
-                                <option value="action:deploy">Redeploy</option>
-                            @endif
-                            @if ($application->build_pack !== 'dockercompose')
-                                @if ($application->destination->server->isSwarm())
-                                    <option value="action:deploy">Update Service</option>
-                                @else
-                                    <option value="action:restart">Restart</option>
-                                @endif
-                            @endif
-                            <option value="action:stop">Stop</option>
-                        @else
-                            <option value="action:deploy">Deploy</option>
-                        @endif
-                        @if (!$application->destination->server->isSwarm())
-                            @if ($application->status === 'running')
-                                <option value="action:force-deploy">Force deploy (without cache)</option>
-                            @else
-                                <option value="action:deploy-force">Force deploy (without cache)</option>
-                            @endif
-                        @endif
-                    </optgroup>
-                @endif
             </select>
+            @if (!($application->build_pack === 'dockercompose' && is_null($application->docker_compose_raw)))
+                <div id="application-mobile-actions" class="mt-2 flex flex-nowrap items-center gap-2 overflow-x-auto md:hidden">
+                    @if (!str($application->status)->startsWith('exited'))
+                        @if (!$application->destination->server->isSwarm())
+                            <button type="button" class="button shrink-0"
+                                @click="document.getElementById('application-mobile-deploy-trigger')?.click()">
+                                Redeploy
+                            </button>
+                        @endif
+                        @if ($application->build_pack !== 'dockercompose')
+                            @if ($application->destination->server->isSwarm())
+                                <button type="button" class="button shrink-0"
+                                    @click="document.getElementById('application-mobile-deploy-trigger')?.click()">
+                                    Update Service
+                                </button>
+                            @else
+                                <button type="button" class="button shrink-0"
+                                    @click="document.getElementById('application-mobile-restart-trigger')?.click()">
+                                    Restart
+                                </button>
+                            @endif
+                        @endif
+                        <button type="button" class="button shrink-0 text-error"
+                            @click="document.getElementById('application-mobile-stop-trigger')?.click()">
+                            Stop
+                        </button>
+                    @else
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('application-mobile-deploy-trigger')?.click()">
+                            Deploy
+                        </button>
+                    @endif
+                    @if (!$application->destination->server->isSwarm())
+                        @if ($application->status === 'running')
+                            <button type="button" class="button shrink-0"
+                                @click="document.getElementById('application-mobile-force-deploy-trigger')?.click()">
+                                Force deploy (without cache)
+                            </button>
+                        @else
+                            <button type="button" class="button shrink-0"
+                                @click="document.getElementById('application-mobile-deploy-force-trigger')?.click()">
+                                Force deploy (without cache)
+                            </button>
+                        @endif
+                    @endif
+                </div>
+            @endif
             <x-modal-confirmation title="Confirm Application Stopping?" buttonTitle="Stop"
                 submitAction="stop" :checkboxes="$checkboxes" :actions="[
                     'This application will be stopped.',

resources/views/livewire/project/database/heading.blade.php

@@ -135,17 +135,26 @@
                         </option>
                     @endforeach
                 </optgroup>
-                @if ($database->destination->server->isFunctional())
-                    <optgroup label="Actions">
-                        @if (!str($database->status)->startsWith('exited'))
-                            <option value="action:restart">Restart</option>
-                            <option value="action:stop">Stop</option>
-                        @else
-                            <option value="action:start">Start</option>
-                        @endif
-                    </optgroup>
-                @endif
             </select>
+            @if ($database->destination->server->isFunctional())
+                <div id="database-mobile-actions" class="mt-2 flex flex-nowrap items-center gap-2 overflow-x-auto md:hidden">
+                    @if (!str($database->status)->startsWith('exited'))
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('database-restart-trigger')?.click()">
+                            Restart
+                        </button>
+                        <button type="button" class="button shrink-0 text-error"
+                            @click="document.getElementById('database-stop-trigger')?.click()">
+                            Stop
+                        </button>
+                    @else
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('database-start-trigger')?.click()">
+                            Start
+                        </button>
+                    @endif
+                </div>
+            @endif
         </div>
         <nav
             class="scrollbar hidden min-h-10 w-full flex-nowrap items-center gap-6 overflow-x-scroll overflow-y-hidden pb-1 whitespace-nowrap md:flex md:w-auto md:overflow-visible">

resources/views/livewire/project/service/heading.blade.php

@@ -176,29 +176,68 @@
                         @endif
                     @endforelse
                 </optgroup>
-                @if ($service->isDeployable)
-                    <optgroup label="Actions">
-                        @if (str($service->status)->contains('running'))
-                            <option value="action:restart">Restart</option>
-                            <option value="action:stop">Stop</option>
-                            <option value="action:pullAndRestart">Pull Latest Images & Restart</option>
-                        @elseif (str($service->status)->contains('degraded'))
-                            <option value="action:restart">Restart</option>
-                            <option value="action:stop">Stop</option>
-                            <option value="action:forceDeploy">Force Restart</option>
-                        @elseif (str($service->status)->contains('exited'))
-                            <option value="action:start">Deploy</option>
-                            <option value="action:forceDeploy">Force Deploy</option>
-                            <option value="action:cleanup">Force Cleanup Containers</option>
-                        @else
-                            <option value="action:stop">Stop</option>
-                            <option value="action:start">Deploy</option>
-                            <option value="action:forceDeploy">Force Deploy</option>
-                            <option value="action:cleanup">Force Cleanup Containers</option>
-                        @endif
-                    </optgroup>
-                @endif
             </select>
+            @if ($service->isDeployable)
+                <div id="service-mobile-actions" class="mt-2 flex flex-nowrap items-center gap-2 overflow-x-auto md:hidden">
+                    @if (str($service->status)->contains('running'))
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-restart-trigger')?.click()">
+                            Restart
+                        </button>
+                        <button type="button" class="button shrink-0 text-error"
+                            @click="document.getElementById('service-stop-trigger')?.click()">
+                            Stop
+                        </button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-pullAndRestart-trigger')?.click()">
+                            Pull Latest Images & Restart
+                        </button>
+                    @elseif (str($service->status)->contains('degraded'))
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-restart-trigger')?.click()">
+                            Restart
+                        </button>
+                        <button type="button" class="button shrink-0 text-error"
+                            @click="document.getElementById('service-stop-trigger')?.click()">
+                            Stop
+                        </button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-forceDeploy-trigger')?.click()">
+                            Force Restart
+                        </button>
+                    @elseif (str($service->status)->contains('exited'))
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-start-trigger')?.click()">
+                            Deploy
+                        </button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-forceDeploy-trigger')?.click()">
+                            Force Deploy
+                        </button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-cleanup-trigger')?.click()">
+                            Force Cleanup Containers
+                        </button>
+                    @else
+                        <button type="button" class="button shrink-0 text-error"
+                            @click="document.getElementById('service-stop-trigger')?.click()">
+                            Stop
+                        </button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-start-trigger')?.click()">
+                            Deploy
+                        </button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-forceDeploy-trigger')?.click()">
+                            Force Deploy
+                        </button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-cleanup-trigger')?.click()">
+                            Force Cleanup Containers
+                        </button>
+                    @endif
+                </div>
+            @endif
         </div>
         <nav
             class="scrollbar hidden min-h-10 w-full flex-nowrap items-center gap-6 overflow-x-scroll overflow-y-hidden pb-1 whitespace-nowrap md:flex md:w-auto md:overflow-visible">

tests/Feature/MobileResourceMenuTest.php

@@ -6,16 +6,22 @@
     $serviceHeading = file_get_contents(resource_path('views/livewire/project/service/heading.blade.php'));
 
     expect($applicationHeading)
+        ->toContain('application-mobile-actions')
         ->toContain("'route' => 'project.application.command'")
         ->toContain("'navigate' => false")
         ->toContain("value.startsWith('location|')")
-        ->toContain('window.location.href = url');
+        ->toContain('window.location.href = url')
+        ->toContain('application-mobile-stop-trigger')
+        ->toContain('application-mobile-deploy-trigger')
+        ->toContain('application-mobile-restart-trigger')
+        ->toContain('application-mobile-force-deploy-trigger')
+        ->not->toContain('<optgroup label="Actions">');
 
     expect($databaseHeading)
         ->toContain('database-mobile-section')
+        ->toContain('database-mobile-actions')
         ->toContain('<optgroup label="Database">')
         ->toContain('<optgroup label="Configuration">')
-        ->toContain('<optgroup label="Actions">')
         ->toContain("'route' => 'project.database.command'")
         ->toContain("'navigate' => false")
         ->toContain("value.startsWith('location|')")
@@ -25,17 +31,19 @@
         ->toContain('x-model="selected"')
         ->toContain('database-restart-trigger')
         ->toContain('database-stop-trigger')
+        ->toContain('database-start-trigger')
         ->toContain('scrollbar hidden min-h-10')
         ->not->toContain('<optgroup label="Links">')
+        ->not->toContain('<optgroup label="Actions">')
         ->not->toContain('@selected');
 
     expect($serviceHeading)
         ->toContain('service-mobile-section')
+        ->toContain('service-mobile-actions')
         ->toContain('<optgroup label="Service">')
         ->toContain('<optgroup label="Configuration">')
         ->toContain('<optgroup label="Resource">')
         ->toContain('<optgroup label="Links">')
-        ->toContain('<optgroup label="Actions">')
         ->toContain("'route' => 'project.service.command'")
         ->toContain("'navigate' => false")
         ->toContain("value.startsWith('location|')")
@@ -50,6 +58,9 @@
         ->toContain('scrollbar hidden min-h-10')
         ->toContain('mb-4 w-full md:mb-0 md:hidden')
         ->toContain('hidden flex-wrap items-center gap-2 md:flex')
+        ->toContain('flex flex-nowrap')
+        ->toContain('overflow-x-auto')
+        ->not->toContain('<optgroup label="Actions">')
         ->not->toContain('order-first flex flex-wrap items-center gap-2 sm:order-last')
         ->not->toContain('@selected');
 });