chore: Refactor terminal component and select form layout

Author: andrasbacsai

app/Livewire/Project/Shared/Terminal.php

@@ -11,6 +11,7 @@ class Terminal extends Component
     #[On('send-terminal-command')]
     public function sendTerminalCommand($isContainer, $identifier, $serverUuid)
     {
+
         $server = Server::ownedByCurrentTeam()->whereUuid($serverUuid)->firstOrFail();
 
         // if (auth()->user()) {
@@ -21,9 +22,7 @@ public function sendTerminalCommand($isContainer, $identifier, $serverUuid)
         // }
 
         if ($isContainer) {
-            ray($identifier);
             $status = getContainerStatus($server, $identifier);
-            ray($status);
             if ($status !== 'running') {
                 return handleError(new \Exception('Container is not running'), $this);
             }

app/Livewire/RunCommand.php

@@ -7,7 +7,7 @@
 
 class RunCommand extends Component
 {
-    public $selected_uuid;
+    public $selected_uuid = 'default';
 
     public $servers = [];
 
@@ -16,7 +16,6 @@ class RunCommand extends Component
     public function mount($servers)
     {
         $this->servers = $servers;
-        $this->selected_uuid = $servers[0]->uuid;
         $this->containers = $this->getAllActiveContainers();
     }
 
@@ -83,6 +82,11 @@ private function getAllActiveContainers()
         });
     }
 
+    public function updatedSelectedUuid($value)
+    {
+        $this->connectToContainer();
+    }
+
     #[On('connectToContainer')]
     public function connectToContainer()
     {

resources/views/components/forms/select.blade.php

@@ -1,6 +1,6 @@
 <div class="w-full">
     @if ($label)
-        <label class="flex items-center gap-1 mb-1 text-sm font-medium">{{ $label }}
+        <label class="flex gap-1 items-center mb-1 text-sm font-medium">{{ $label }}
             @if ($required)
                 <x-highlighted text="*" />
             @endif
@@ -9,7 +9,8 @@
             @endif
         </label>
     @endif
-    <select {{ $attributes->merge(['class' => $defaultClass]) }} @required($required) wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300'
+    <select {{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
+        wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300'
         wire:dirty.class="dark:focus:ring-warning dark:ring-warning" wire:loading.attr="disabled" name={{ $id }}
         @if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} @else wire:model={{ $id }} @endif>
         {{ $slot }}

resources/views/livewire/project/shared/terminal.blade.php

@@ -117,8 +117,8 @@ function flowControlCallback() {
                 if (data === '\x04' || (data === '\r' && stripAnsiCommands(commandBuffer).trim() === 'exit')) {
                     checkIfProcessIsRunningAndKillIt();
                     setTimeout(() => {
-                        term.reset();
                         $data.terminalActive = false;
+                        term.reset();
                     }, 500);
                     commandBuffer = '';
                 } else if (data === '\r') {

resources/views/livewire/run-command.blade.php

@@ -1,13 +1,12 @@
 <div>
-    <form class="flex flex-col justify-center gap-2 xl:items-end xl:flex-row"
+    <form class="flex flex-col gap-2 justify-center xl:items-end xl:flex-row"
         wire:submit="$dispatchSelf('connectToContainer')">
-        <x-forms.select label="Select Server or Container" id="server" required wire:model="selected_uuid">
+        <x-forms.select id="server" required wire:model.live="selected_uuid">
             @foreach ($servers as $server)
                 @if ($loop->first)
-                    <option selected value="{{ $server->uuid }}">{{ $server->name }}</option>
-                @else
-                    <option value="{{ $server->uuid }}">{{ $server->name }}</option>
+                    <option disabled value="default">Select a server or container</option>
                 @endif
+                <option value="{{ $server->uuid }}">{{ $server->name }}</option>
                 @foreach ($containers as $container)
                     @if ($container['server_uuid'] == $server->uuid)
                         <option value="{{ $container['uuid'] }}">

resources/views/livewire/terminal/index.blade.php

@@ -3,7 +3,11 @@
         Terminal | Coolify
     </x-slot>
     <h1>Terminal</h1>
-    <div class="subtitle">Execute commands on your servers without leaving the browser.</div>
+    <div class="flex gap-2 items-end subtitle">
+        <div>Execute commands on your servers and containers without leaving the browser.</div>
+        <x-helper
+            helper="If you're having trouble connecting to your server, make sure that the port is open.<br><br><a class='underline' href='https://coolify.io/docs/knowledge-base/server/firewall/#terminal' target='_blank'>Documentation</a>"></x-helper>
+    </div>
     @if ($servers->count() > 0)
         <livewire:run-command :servers="$servers" />
     @else