ui fixes

app/Http/Livewire/Project/Application/EnvironmentVariable/Add.php

@@ -15,13 +15,20 @@ class Add extends Component
     public string $value;
     public bool $is_build_time = false;
 
+    protected $rules = [
+        'key' => 'required|string',
+        'value' => 'required|string',
+        'is_build_time' => 'required|boolean',
+    ];
     public function mount()
     {
         $this->parameters = Route::current()->parameters();
     }
     public function submit()
     {
+        $this->validate();
         try {
+
             $application_id = Application::where('uuid', $this->parameters['application_uuid'])->firstOrFail()->id;
             EnvironmentVariable::create([
                 'key' => $this->key,
@@ -29,7 +36,9 @@ class Add extends Component
                 'is_build_time' => $this->is_build_time,
                 'application_id' => $application_id,
             ]);
-            $this->emit('reloadWindow');
+            $this->emit('refreshEnvs');
+            $this->key = '';
+            $this->value = '';
         } catch (mixed $e) {
             dd('asdf');
             if ($e instanceof QueryException) {

app/Http/Livewire/Project/Application/EnvironmentVariable/All.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Http\Livewire\Project\Application\EnvironmentVariable;
+
+use App\Models\Application;
+use Livewire\Component;
+
+class All extends Component
+{
+    public Application $application;
+    protected $listeners = ['refreshEnvs' => 'refreshEnvs'];
+    public function refreshEnvs()
+    {
+        $this->application->refresh();
+    }
+}

app/Http/Livewire/Project/Application/EnvironmentVariable/Show.php

@@ -30,6 +30,6 @@ class Show extends Component
     public function delete()
     {
         $this->env->delete();
-        $this->emit('reloadWindow');
+        $this->emit('refreshEnvs');
     }
 }

app/Http/Livewire/Project/Application/General.php

@@ -45,7 +45,7 @@ class General extends Component
     ];
     public function instantSave()
     {
-        // @TODO: find another way
+        // @TODO: find another way - if possible
         $this->application->settings->is_static = $this->is_static;
         $this->application->settings->is_git_submodules_allowed = $this->is_git_submodules_allowed;
         $this->application->settings->is_git_lfs_allowed = $this->is_git_lfs_allowed;

resources/views/components/inputs/input.blade.php

@@ -1,36 +1,40 @@
 @props([
     'id' => null,
     'type' => 'text',
-    'required' => false,
+    'required' => $attributes->has('required'),
     'label' => null,
     'instantSave' => false,
     'disabled' => false,
     'hidden' => false,
+    'noLabel' => false,
+    'noDirty' => false,
 ])
 
-
 <span @class([
     'flex justify-end' => $type === 'checkbox',
     'flex flex-col' => $type !== 'checkbox',
 ])>
-    <label for={{ $id }}>
+    @if (!$noLabel)
-        @if ($label)
+        <label for={{ $id }}>
-            {{ $label }}
+            @if ($label)
-        @else
+                {{ $label }}
-            {{ $id }}
+            @else
-        @endif
+                {{ $id }}
-        @if ($required)
+            @endif
-            *
+            @if ($required)
-        @endif
+                *
-    </label>
+            @endif
+        </label>
+    @endif
     @if ($type === 'textarea')
-        <textarea {{ $attributes }} type={{ $type }} id={{ $id }} wire:model.defer={{ $id }}></textarea>
+        <textarea @if (!$noDirty) wire:dirty.class="text-black bg-amber-300" @endif {{ $attributes }}
+            required={{ $required }} type={{ $type }} id={{ $id }} wire:model.defer={{ $id }}></textarea>
     @else
-        <input wire:dirty.class="text-black bg-amber-300" {{ $attributes }} type={{ $type }}
+        <input {{ $attributes }} required={{ $required }}
-            id={{ $id }}
+            @if (!$noDirty) wire:dirty.class="text-black bg-amber-300" @endif
+            type={{ $type }} id={{ $id }}
             @if ($instantSave) wire:click='instantSave' wire:model.defer={{ $id }} @else wire:model.defer={{ $value ?? $id }} @endif />
     @endif
-
     @error($id)
         <div class="text-red-500">{{ $message }}</div>
     @enderror

resources/views/livewire/project/application/environment-variable/add.blade.php

@@ -1,10 +1,10 @@
-<form wire:submit.prevent='submit' class="flex gap-2 p-4">
+<form wire:submit.prevent='submit' class="flex gap-2 px-2">
-    <input type="text" wire:model.defer="key" wire:dirty.class="text-black bg-amber-300" />
+    <x-inputs.input noLabel noDirty id="key" required />
-    <input type="text" wire:model.defer="value" wire:dirty.class="text-black bg-amber-300" />
+    <x-inputs.input noLabel noDirty id="value" required />
     <div class="flex flex-col">
         <div class="flex items-center gap-2">
             <input type="checkbox" wire:model.defer="is_build_time" />
-            <label>Used during build?</label>
+            <label>Build Variable?</label>
         </div>
     </div>
     <x-inputs.button type="submit">

resources/views/livewire/project/application/environment-variable/all.blade.php

@@ -0,0 +1,10 @@
+<div class="flex flex-col gap-2">
+    <h3>Environment Variables</h3>
+    @forelse ($application->environment_variables as $env)
+        <livewire:project.application.environment-variable.show wire:key="item-{{ $env->id }}" :env="$env" />
+    @empty
+        <p>There are no environment variables for this application.</p>
+    @endforelse
+    <h4>Add new environment variable</h4>
+    <livewire:project.application.environment-variable.add />
+</div>

resources/views/livewire/project/application/environment-variable/show.blade.php

@@ -1,11 +1,11 @@
 <div x-data="{ deleteEnvironment: false }">
-    <form wire:submit.prevent='submit' class="flex gap-2 p-4">
+    <form wire:submit.prevent='submit' class="flex gap-2 px-2">
         <input type="text" wire:model.defer="env.key" wire:dirty.class="text-black bg-amber-300" />
         <input type="text" wire:model.defer="env.value" wire:dirty.class="text-black bg-amber-300" />
         <div class="flex flex-col">
             <div class="flex items-center gap-2">
                 <input type="checkbox" wire:model.defer="env.is_build_time" />
-                <label>Used during build?</label>
+                <label wire:dirty.class="text-amber-300" wire:target="env.is_build_time">Build Variable?</label>
             </div>
         </div>
         <x-inputs.button type="submit">

resources/views/project/application/configuration.blade.php

@@ -23,15 +23,8 @@
             <h3>General Configurations</h3>
             <livewire:project.application.general :applicationId="$application->id" />
         </div>
-        <div x-cloak x-show="activeTab === 'environment-variables'" class="flex flex-col gap-2">
+        <div x-cloak x-show="activeTab === 'environment-variables'">
-            <h3>Environment Variables</h3>
+            <livewire:project.application.environment-variable.all :application="$application" />
-            @forelse ($application->environment_variables as $env)
-                <livewire:project.application.environment-variable.show :env="$env" />
-            @empty
-                <p>There are no environment variables for this application.</p>
-            @endforelse
-            <h4>Add new environment variable</h4>
-            <livewire:project.application.environment-variable.add />
         </div>
         <div x-cloak x-show="activeTab === 'source'">
             <h3>Source</h3>