shared variables are more visible now on the ui

app/Livewire/Project/Edit.php

@@ -12,28 +12,6 @@ class Edit extends Component
         'project.name' => 'required|min:3|max:255',
         'project.description' => 'nullable|string|max:255',
     ];
-    protected $listeners = ['refreshEnvs' => '$refresh', 'saveKey' => 'saveKey'];
-
-    public function saveKey($data)
-    {
-        try {
-            $found = $this->project->environment_variables()->where('key', $data['key'])->first();
-            if ($found) {
-                throw new \Exception('Variable already exists.');
-            }
-            $this->project->environment_variables()->create([
-                'key' => $data['key'],
-                'value' => $data['value'],
-                'is_multiline' => $data['is_multiline'],
-                'is_literal' => $data['is_literal'],
-                'type' => 'project',
-                'team_id' => currentTeam()->id,
-            ]);
-            $this->project->refresh();
-        } catch (\Throwable $e) {
-            return handleError($e, $this);
-        }
-    }
     public function mount()
     {
         $projectUuid = request()->route('project_uuid');

app/Livewire/Project/EnvironmentEdit.php

@@ -16,29 +16,6 @@ class EnvironmentEdit extends Component
         'environment.name' => 'required|min:3|max:255',
         'environment.description' => 'nullable|min:3|max:255',
     ];
-    protected $listeners = ['refreshEnvs' => '$refresh', 'saveKey' => 'saveKey'];
-
-    public function saveKey($data)
-    {
-        try {
-            $found = $this->environment->environment_variables()->where('key', $data['key'])->first();
-            if ($found) {
-                throw new \Exception('Variable already exists.');
-            }
-            $this->environment->environment_variables()->create([
-                'key' => $data['key'],
-                'value' => $data['value'],
-                'is_multiline' => $data['is_multiline'],
-                'is_literal' => $data['is_literal'],
-                'type' => 'environment',
-                'team_id' => currentTeam()->id,
-            ]);
-            $this->environment->refresh();
-        } catch (\Throwable $e) {
-            return handleError($e, $this);
-        }
-    }
-
     public function mount()
     {
         $this->parameters = get_route_parameters();

app/Livewire/SharedVariables/Environment/Index.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Livewire\SharedVariables\Environment;
+
+use App\Models\Project;
+use Illuminate\Support\Collection;
+use Livewire\Component;
+
+class Index extends Component
+{
+    public Collection $projects;
+    public function mount() {
+        $this->projects = Project::ownedByCurrentTeam()->get();
+    }
+    public function render()
+    {
+        return view('livewire.shared-variables.environment.index');
+    }
+}

app/Livewire/SharedVariables/Environment/Show.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Livewire\SharedVariables\Environment;
+
+use App\Models\Application;
+use App\Models\Project;
+use Livewire\Component;
+
+class Show extends Component
+{
+    public Project $project;
+    public Application $application;
+    public $environment;
+    public array $parameters;
+    protected $listeners = ['refreshEnvs' => '$refresh', 'saveKey' => 'saveKey'];
+
+    public function saveKey($data)
+    {
+        try {
+            $found = $this->environment->environment_variables()->where('key', $data['key'])->first();
+            if ($found) {
+                throw new \Exception('Variable already exists.');
+            }
+            $this->environment->environment_variables()->create([
+                'key' => $data['key'],
+                'value' => $data['value'],
+                'is_multiline' => $data['is_multiline'],
+                'is_literal' => $data['is_literal'],
+                'type' => 'environment',
+                'team_id' => currentTeam()->id,
+            ]);
+            $this->environment->refresh();
+        } catch (\Throwable $e) {
+            return handleError($e, $this);
+        }
+    }
+    public function mount()
+    {
+        $this->parameters = get_route_parameters();
+        $this->project = Project::ownedByCurrentTeam()->where('uuid', request()->route('project_uuid'))->first();
+        $this->environment = $this->project->environments()->where('name', request()->route('environment_name'))->first();
+    }
+    public function render()
+    {
+        return view('livewire.shared-variables.environment.show');
+    }
+}

app/Livewire/SharedVariables/Index.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Livewire\SharedVariables;
+
+use Livewire\Component;
+
+class Index extends Component
+{
+    public function render()
+    {
+        return view('livewire.shared-variables.index');
+    }
+}

app/Livewire/SharedVariables/Project/Index.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Livewire\SharedVariables\Project;
+
+use App\Models\Project;
+use Illuminate\Support\Collection;
+use Livewire\Component;
+
+class Index extends Component
+{
+    public Collection $projects;
+    public function mount() {
+        $this->projects = Project::ownedByCurrentTeam()->get();
+    }
+    public function render()
+    {
+        return view('livewire.shared-variables.project.index');
+    }
+}

app/Livewire/SharedVariables/Project/Show.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Livewire\SharedVariables\Project;
+
+use App\Models\Project;
+use Livewire\Component;
+
+class Show extends Component
+{
+    public Project $project;
+    protected $listeners = ['refreshEnvs' => '$refresh', 'saveKey' => 'saveKey'];
+
+    public function saveKey($data)
+    {
+        try {
+            $found = $this->project->environment_variables()->where('key', $data['key'])->first();
+            if ($found) {
+                throw new \Exception('Variable already exists.');
+            }
+            $this->project->environment_variables()->create([
+                'key' => $data['key'],
+                'value' => $data['value'],
+                'is_multiline' => $data['is_multiline'],
+                'is_literal' => $data['is_literal'],
+                'type' => 'project',
+                'team_id' => currentTeam()->id,
+            ]);
+            $this->project->refresh();
+        } catch (\Throwable $e) {
+            return handleError($e, $this);
+        }
+    }
+    public function mount()
+    {
+        $projectUuid = request()->route('project_uuid');
+        $teamId = currentTeam()->id;
+        $project = Project::where('team_id', $teamId)->where('uuid', $projectUuid)->first();
+        if (!$project) {
+            return redirect()->route('dashboard');
+        }
+        $this->project = $project;
+    }
+    public function render()
+    {
+        return view('livewire.shared-variables.project.show');
+    }
+}

app/Livewire/SharedVariables/Team/Index.php

@@ -1,11 +1,11 @@
 <?php
 
-namespace App\Livewire;
+namespace App\Livewire\SharedVariables\Team;
 
 use App\Models\Team;
 use Livewire\Component;
 
-class TeamSharedVariablesIndex extends Component
+class Index extends Component
 {
     public Team $team;
     protected $listeners = ['refreshEnvs' => '$refresh', 'saveKey' => 'saveKey'];
@@ -37,6 +37,6 @@ public function mount()
     }
     public function render()
     {
-        return view('livewire.team-shared-variables-index');
+        return view('livewire.shared-variables.team.index');
     }
 }

resources/views/components/navbar.blade.php

@@ -170,6 +170,19 @@ class="{{ request()->is('storages*') ? 'menu-item-active menu-item' : 'menu-item
                             S3 Storages
                         </a>
                     </li>
+                    <li>
+                        <a title="Shared variables"
+                            class="{{ request()->is('shared-variables*') ? 'menu-item-active menu-item' : 'menu-item' }}"
+                            href="{{ route('shared-variables.index') }}">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
+                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                                    <path d="M5 4C2.5 9 2.5 14 5 20M19 4c2.5 5 2.5 10 0 16M9 9h1c1 0 1 1 2.016 3.527C13 15 13 16 14 16h1"/>
+                                    <path d="M8 16c1.5 0 3-2 4-3.5S14.5 9 16 9"/>
+                                </g>
+                            </svg>
+                            Shared Variables
+                        </a>
+                    </li>
                     <li>
                         <a title="Notifications"
                             class="{{ request()->is('notifications*') ? 'menu-item-active menu-item' : 'menu-item' }}"

resources/views/components/team/navbar.blade.php

@@ -2,7 +2,7 @@
     <div class="flex items-end gap-2">
         <h1>Team</h1>
         <x-modal-input buttonTitle="+ Add" title="New Team">
-            <livewire:team.create/>
+            <livewire:team.create />
         </x-modal-input>
     </div>
     <div class="subtitle">Team wide configurations.</div>
@@ -14,10 +14,6 @@
             href="{{ route('team.member.index') }}">
             <button>Members</button>
         </a>
-        <a class="{{ request()->routeIs('team.shared-variables.index') ? 'dark:text-white' : '' }}"
-            href="{{ route('team.shared-variables.index') }}">
-            <button>Shared Variables</button>
-        </a>
         <div class="flex-1"></div>
     </nav>
 </div>

resources/views/livewire/project/edit.blade.php

@@ -14,24 +14,4 @@
             <x-forms.input label="Description" id="project.description" />
         </div>
     </form>
-    <div class="flex gap-2">
-        <h2>Shared Variables</h2>
-        <x-modal-input buttonTitle="+ Add" title="New Shared Variable">
-            <livewire:project.shared.environment-variable.add :shared="true"  />
-        </x-modal-input>
-    </div>
-    <div class="pb-4 lg:flex lg:gap-1">
-        <div>You can use these variables anywhere with</div>
-        <div class=" dark:text-warning text-coollabs">@{{ project.VARIABLENAME }} </div>
-        <x-helper
-            helper="More info <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
-    </div>
-    <div class="flex flex-col gap-2">
-        @forelse ($project->environment_variables->sort()->sortBy('key') as $env)
-            <livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}"
-                :env="$env" type="project" />
-        @empty
-            <div>No environment variables found.</div>
-        @endforelse
-    </div>
 </div>

resources/views/livewire/project/environment-edit.blade.php

@@ -42,21 +42,4 @@
             <x-forms.input label="Description" id="environment.description" />
         </div>
     </form>
-    <div class="flex gap-2 pt-10">
-        <h2>Shared Variables</h2>
-        <x-modal-input buttonTitle="+ Add" title="New Shared Variable">
-            <livewire:project.shared.environment-variable.add :shared="true"  />
-        </x-modal-input>
-    </div>
-    <div class="flex items-center gap-2 pb-4">You can use these variables anywhere with <span class="dark:text-warning text-coollabs">@{{environment.VARIABLENAME}}</span><x-helper
-            helper="More info <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
-    </div>
-    <div class="flex flex-col gap-2">
-        @forelse ($environment->environment_variables->sort()->sortBy('key') as $env)
-            <livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}"
-                :env="$env" type="environment" />
-        @empty
-            <div>No environment variables found.</div>
-        @endforelse
-    </div>
 </div>

resources/views/livewire/shared-variables/environment/index.blade.php

@@ -0,0 +1,28 @@
+<div>
+    <div class="flex gap-2">
+        <h1>Environments</h1>
+    </div>
+    <div class="subtitle">List of your environments by projects.</div>
+    <div class="flex flex-col gap-2">
+        @forelse ($projects as $project)
+            <h2>{{ data_get($project, 'name') }}</h2>
+            <div class="pt-0 pb-3">{{ data_get($project, 'description') }}</div>
+            @forelse ($project->environments as $environment)
+                <a class="box group"
+                    href="{{ route('shared-variables.environment.show', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name]) }}">
+                    <div class="flex flex-col justify-center flex-1 mx-6 ">
+                        <div class="box-title"> {{ $environment->name }}</div>
+                        <div class="box-description">
+                            {{ $environment->description }}</div>
+                    </div>
+                </a>
+            @empty
+                <p>No environments found.</p>
+            @endforelse
+        @empty
+            <div>
+                <div>No project found.</div>
+            </div>
+        @endforelse
+    </div>
+</div>

resources/views/livewire/shared-variables/environment/show.blade.php

@@ -0,0 +1,20 @@
+<div>
+    <div class="flex gap-2">
+        <h1>Shared Variables for {{ $project->name }}/{{ $environment->name }}</h1>
+        <x-modal-input buttonTitle="+ Add" title="New Shared Variable">
+            <livewire:project.shared.environment-variable.add :shared="true" />
+        </x-modal-input>
+    </div>
+    <div class="flex items-center gap-1 subtitle">You can use these variables anywhere with <span
+            class="dark:text-warning text-coollabs">@{{ environment.VARIABLENAME }}</span><x-helper
+            helper="More info <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
+    </div>
+    <div class="flex flex-col gap-2">
+        @forelse ($environment->environment_variables->sort()->sortBy('key') as $env)
+            <livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}"
+                :env="$env" type="environment" />
+        @empty
+            <div>No environment variables found.</div>
+        @endforelse
+    </div>
+</div>

resources/views/livewire/shared-variables/index.blade.php

@@ -0,0 +1,28 @@
+<div>
+    <div class="flex items-start gap-2">
+        <h1>Shared Variables</h1>
+    </div>
+    <div class="subtitle">Set Team / Project / Environment wide variables.</div>
+
+    <div class="flex flex-col gap-2">
+        <a class="box group" href="{{ route('shared-variables.team.index') }}">
+            <div class="flex flex-col justify-center mx-6">
+                <div class="box-title">Team wide</div>
+                <div class="box-description">Usable for all resources in a team.</div>
+            </div>
+        </a>
+        <a class="box group" href="{{ route('shared-variables.project.index') }}">
+            <div class="flex flex-col justify-center mx-6">
+                <div class="box-title">Project wide</div>
+                <div class="box-description">Usable for all resources in a project.</div>
+            </div>
+        </a>
+        <a class="box group" href="{{ route('shared-variables.environment.index') }}">
+            <div class="flex flex-col justify-center mx-6">
+                <div class="box-title">Environment wide</div>
+                <div class="box-description">Usable for all resources in an environment.</div>
+            </div>
+        </a>
+
+    </div>
+</div>

resources/views/livewire/shared-variables/project/index.blade.php

@@ -0,0 +1,22 @@
+<div>
+    <div class="flex gap-2">
+        <h1>Projects</h1>
+    </div>
+    <div class="subtitle">List of your projects.</div>
+    <div class="flex flex-col gap-2">
+        @forelse ($projects as $project)
+            <a class="box group"
+                href="{{ route('shared-variables.project.show', ['project_uuid' => data_get($project, 'uuid')]) }}">
+                <div class="flex flex-col justify-center mx-6 ">
+                    <div class="box-title">{{ $project->name }}</div>
+                    <div class="box-description ">
+                        {{ $project->description }}</div>
+                </div>
+            </a>
+        @empty
+            <div>
+                <div>No project found.</div>
+            </div>
+        @endforelse
+    </div>
+</div>

resources/views/livewire/shared-variables/project/show.blade.php

@@ -0,0 +1,22 @@
+<div>
+    <div class="flex gap-2">
+        <h1>Shared Variables for {{data_get($project,'name')}}</h1>
+        <x-modal-input buttonTitle="+ Add" title="New Shared Variable">
+            <livewire:project.shared.environment-variable.add :shared="true" />
+        </x-modal-input>
+    </div>
+    <div class="flex flex-wrap gap-1 subtitle">
+        <div>You can use these variables anywhere with</div>
+        <div class="dark:text-warning text-coollabs">@{{ project.VARIABLENAME }} </div>
+        <x-helper
+            helper="More info <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
+    </div>
+    <div class="flex flex-col gap-2">
+        @forelse ($project->environment_variables->sort()->sortBy('key') as $env)
+            <livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}"
+                :env="$env" type="project" />
+        @empty
+            <div>No environment variables found.</div>
+        @endforelse
+    </div>
+</div>

resources/views/livewire/shared-variables/team/index.blade.php

@@ -1,12 +1,11 @@
 <div>
-    <x-team.navbar />
     <div class="flex gap-2">
-        <h2>Shared Variables</h2>
+        <h1>Team Shared Variables</h1>
         <x-modal-input buttonTitle="+ Add" title="New Shared Variable">
             <livewire:project.shared.environment-variable.add :shared="true" />
         </x-modal-input>
     </div>
-    <div class="flex items-center gap-2 pb-4">You can use these variables anywhere with <span
+    <div class="flex items-center gap-1 subtitle">You can use these variables anywhere with <span
             class="dark:text-warning text-coollabs">@{{ team.VARIABLENAME }}</span> <x-helper
             helper="More info <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
     </div>

routes/web.php

@@ -32,6 +32,13 @@
 use App\Livewire\Storage\Index as StorageIndex;
 use App\Livewire\Storage\Show as StorageShow;
 
+use App\Livewire\SharedVariables\Index as SharedVariablesIndex;
+use App\Livewire\SharedVariables\Team\Index as TeamSharedVariablesIndex;
+use App\Livewire\SharedVariables\Project\Index as ProjectSharedVariablesIndex;
+use App\Livewire\SharedVariables\Project\Show as ProjectSharedVariablesShow;
+use App\Livewire\SharedVariables\Environment\Index as EnvironmentSharedVariablesIndex;
+use App\Livewire\SharedVariables\Environment\Show as EnvironmentSharedVariablesShow;
+
 use App\Livewire\CommandCenter\Index as CommandCenterIndex;
 use App\Livewire\ForcePasswordReset;
 use App\Livewire\Project\Index as ProjectIndex;
@@ -76,7 +83,6 @@
 use App\Livewire\Tags\Index as TagsIndex;
 use App\Livewire\Tags\Show as TagsShow;
 
-use App\Livewire\TeamSharedVariablesIndex;
 use App\Livewire\Waitlist\Index as WaitlistIndex;
 use App\Models\ScheduledDatabaseBackupExecution;
 use Illuminate\Support\Facades\Storage;
@@ -126,21 +132,34 @@
     Route::get('/settings/license', SettingsLicense::class)->name('settings.license');
 
     Route::get('/profile', ProfileIndex::class)->name('profile');
+
     Route::prefix('tags')->group(function () {
         Route::get('/', TagsIndex::class)->name('tags.index');
         Route::get('/{tag_name}', TagsShow::class)->name('tags.show');
     });
+
     Route::prefix('notifications')->group(function () {
         Route::get('/email', NotificationEmail::class)->name('notifications.email');
         Route::get('/telegram', NotificationTelegram::class)->name('notifications.telegram');
         Route::get('/discord', NotificationDiscord::class)->name('notifications.discord');
     });
-    Route::get('/storages', StorageIndex::class)->name('storage.index');
-    Route::get('/storages/{storage_uuid}', StorageShow::class)->name('storage.show');
+
+    Route::prefix('storages')->group(function () {
+        Route::get('/', StorageIndex::class)->name('storage.index');
+        Route::get('/{storage_uuid}', StorageShow::class)->name('storage.show');
+    });
+    Route::prefix('shared-variables')->group(function () {
+        Route::get('/', SharedVariablesIndex::class)->name('shared-variables.index');
+        Route::get('/team', TeamSharedVariablesIndex::class)->name('shared-variables.team.index');
+        Route::get('/projects', ProjectSharedVariablesIndex::class)->name('shared-variables.project.index');
+        Route::get('/project/{project_uuid}', ProjectSharedVariablesShow::class)->name('shared-variables.project.show');
+        Route::get('/environments', EnvironmentSharedVariablesIndex::class)->name('shared-variables.environment.index');
+        Route::get('/environment/{project_uuid}/{environment_name}', EnvironmentSharedVariablesShow::class)->name('shared-variables.environment.show');
+    });
+
     Route::prefix('team')->group(function () {
         Route::get('/', TeamIndex::class)->name('team.index');
         Route::get('/members', TeamMemberIndex::class)->name('team.member.index');
-        Route::get('/shared-variables', TeamSharedVariablesIndex::class)->name('team.shared-variables.index');
     });
 
     Route::get('/command-center', CommandCenterIndex::class)->name('command-center');