chore: Update terminal button text and layout in application heading view

Author: andrasbacsai

app/Livewire/Project/Shared/ExecuteContainerCommand.php

@@ -107,6 +107,9 @@ public function loadContainers()
             } elseif (data_get($this->parameters, 'service_uuid')) {
                 $this->container = $this->containers->first();
             }
+            if ($this->containers->count() === 1) {
+                $this->dispatch('connectToContainer');
+            }
         }
     }
 

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

@@ -1,7 +1,7 @@
 <nav wire:poll.10000ms="check_status">
     <x-resources.breadcrumbs :resource="$application" :parameters="$parameters" :lastDeploymentInfo="$lastDeploymentInfo" :lastDeploymentLink="$lastDeploymentLink" />
     <div class="navbar-main">
-        <nav class="flex items-center flex-shrink-0 gap-6 scrollbar min-h-10 whitespace-nowrap">
+        <nav class="flex flex-shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
             <a href="{{ route('project.application.configuration', $parameters) }}">
                 Configuration
             </a>
@@ -13,12 +13,12 @@
             </a>
             @if (!$application->destination->server->isSwarm())
                 <a href="{{ route('project.application.command', $parameters) }}">
-                    <button>Command</button>
+                    <button>Terminal</button>
                 </a>
             @endif
             <x-applications.links :application="$application" />
         </nav>
-        <div class="flex flex-wrap items-center gap-2">
+        <div class="flex flex-wrap gap-2 items-center">
             @if ($application->build_pack === 'dockercompose' && is_null($application->docker_compose_raw))
                 <div>Please load a Compose file.</div>
             @else

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

@@ -8,19 +8,20 @@
     </x-slide-over>
     <div class="navbar-main">
         <nav
-            class="flex items-center flex-shrink-0 gap-6 overflow-x-scroll sm:overflow-x-hidden scrollbar min-h-10 whitespace-nowrap">
+            class="flex overflow-x-scroll flex-shrink-0 gap-6 items-center whitespace-nowrap sm:overflow-x-hidden scrollbar min-h-10">
             <a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.database.configuration', $parameters) }}">
                 <button>Configuration</button>
             </a>
-            <a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
-                href="{{ route('project.database.command', $parameters) }}">
-                <button>Execute Command</button>
-            </a>
+
             <a class="{{ request()->routeIs('project.database.logs') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.database.logs', $parameters) }}">
                 <button>Logs</button>
             </a>
+            <a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
+                href="{{ route('project.database.command', $parameters) }}">
+                <button>Terminal</button>
+            </a>
             @if (
                 $database->getMorphClass() === 'App\Models\StandalonePostgresql' ||
                     $database->getMorphClass() === 'App\Models\StandaloneMongodb' ||
@@ -32,7 +33,7 @@ class="flex items-center flex-shrink-0 gap-6 overflow-x-scroll sm:overflow-x-hid
                 </a>
             @endif
         </nav>
-        <div class="flex flex-wrap items-center gap-2">
+        <div class="flex flex-wrap gap-2 items-center">
             @if (!str($database->status)->startsWith('exited'))
                 <x-modal-confirmation @click="$wire.dispatch('restartEvent')">
                     <x-slot:button-title>

resources/views/livewire/project/shared/execute-container-command.blade.php

@@ -4,25 +4,21 @@
     </x-slot>
     <livewire:project.shared.configuration-checker :resource="$resource" />
     @if ($type === 'application')
-        <h1>Execute Command</h1>
+        <h1>Terminal</h1>
         <livewire:project.application.heading :application="$resource" />
-        <h2 class="pt-4">Command</h2>
-        <div class="pb-2">Run any one-shot command inside a container.</div>
     @elseif ($type === 'database')
-        <h1>Execute Command</h1>
+        <h1>Terminal</h1>
         <livewire:project.database.heading :database="$resource" />
-        <h2 class="pt-4">Command</h2>
-        <div class="pb-2">Run any one-shot command inside a container.</div>
     @elseif ($type === 'service')
-        <h2>Execute Command</h2>
+        <h2>Terminal</h2>
     @endif
     <div x-init="$wire.loadContainers">
         <div class="pt-4" wire:loading wire:target='loadContainers'>
             Loading containers...
         </div>
         <div wire:loading.remove wire:target='loadContainers'>
             @if (count($containers) > 0)
-                <form class="flex flex-col justify-center gap-2 pt-4 xl:items-end xl:flex-row"
+                <form class="flex flex-col gap-2 justify-center pt-4 xl:items-end xl:flex-row"
                     wire:submit="$dispatchSelf('connectToContainer')">
                     <x-forms.select label="Container" id="container" required>
                         <option disabled selected>Select container</option>
@@ -52,7 +48,7 @@
             @endif
         </div>
     </div>
-    <div class="w-full mx-auto">
+    <div class="mx-auto w-full">
         <livewire:project.shared.terminal />
     </div>
 </div>

routes/web.php

@@ -183,20 +183,20 @@
         Route::get('/deployment', DeploymentIndex::class)->name('project.application.deployment.index');
         Route::get('/deployment/{deployment_uuid}', DeploymentShow::class)->name('project.application.deployment.show');
         Route::get('/logs', Logs::class)->name('project.application.logs');
-        Route::get('/command', ExecuteContainerCommand::class)->name('project.application.command');
+        Route::get('/terminal', ExecuteContainerCommand::class)->name('project.application.command');
         Route::get('/tasks/{task_uuid}', ScheduledTaskShow::class)->name('project.application.scheduled-tasks');
     });
     Route::prefix('project/{project_uuid}/{environment_name}/database/{database_uuid}')->group(function () {
         Route::get('/', DatabaseConfiguration::class)->name('project.database.configuration');
         Route::get('/logs', Logs::class)->name('project.database.logs');
-        Route::get('/command', ExecuteContainerCommand::class)->name('project.database.command');
+        Route::get('/terminal', ExecuteContainerCommand::class)->name('project.database.command');
         Route::get('/backups', DatabaseBackupIndex::class)->name('project.database.backup.index');
         Route::get('/backups/{backup_uuid}', DatabaseBackupExecution::class)->name('project.database.backup.execution');
     });
     Route::prefix('project/{project_uuid}/{environment_name}/service/{service_uuid}')->group(function () {
         Route::get('/', ServiceConfiguration::class)->name('project.service.configuration');
         Route::get('/{stack_service_uuid}', ServiceIndex::class)->name('project.service.index');
-        Route::get('/command', ExecuteContainerCommand::class)->name('project.service.command');
+        Route::get('/terminal', ExecuteContainerCommand::class)->name('project.service.command');
         Route::get('/tasks/{task_uuid}', ScheduledTaskShow::class)->name('project.service.scheduled-tasks');
     });