From 61dcf8b4ac1c6d95d9c11797615136731134015a Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Tue, 25 Nov 2025 09:32:12 +0100
Subject: [PATCH] refactor: replace inline note with callout component for
 consistency
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use x-callout component in developer view for env var note
- Simplify label text from "Comment (Optional)" to "Comment"
- Minor code formatting improvements via Pint

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 bootstrap/helpers/shared.php                  |  2 +-
 .../shared/environment-variable/add.blade.php |  2 +-
 .../shared/environment-variable/all.blade.php | 29 +++++++----------
 .../environment-variable/show.blade.php       | 31 +++++++++++--------
 4 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/bootstrap/helpers/shared.php b/bootstrap/helpers/shared.php
index d5b693837..dc7136275 100644
--- a/bootstrap/helpers/shared.php
+++ b/bootstrap/helpers/shared.php
@@ -446,7 +446,7 @@ function parseEnvFormatToArray($env_file_contents)
             $remainder = '';
 
             // Check if value starts with quotes
-            $firstChar = isset($value_and_comment[0]) ? $value_and_comment[0] : '';
+            $firstChar = $value_and_comment[0] ?? '';
             $isDoubleQuoted = $firstChar === '"';
             $isSingleQuoted = $firstChar === "'";
 
diff --git a/resources/views/livewire/project/shared/environment-variable/add.blade.php b/resources/views/livewire/project/shared/environment-variable/add.blade.php
index a17984d21..7d5fabcb7 100644
--- a/resources/views/livewire/project/shared/environment-variable/add.blade.php
+++ b/resources/views/livewire/project/shared/environment-variable/add.blade.php
@@ -16,7 +16,7 @@
         </div>
     @endif
 
-    <x-forms.input id="comment" label="Comment (Optional)"
+    <x-forms.input id="comment" label="Comment"
         helper="Add a note to document what this environment variable is used for." maxlength="256" />
 
     @if (!$shared)
diff --git a/resources/views/livewire/project/shared/environment-variable/all.blade.php b/resources/views/livewire/project/shared/environment-variable/all.blade.php
index a009d8d89..f1d108703 100644
--- a/resources/views/livewire/project/shared/environment-variable/all.blade.php
+++ b/resources/views/livewire/project/shared/environment-variable/all.blade.php
@@ -61,8 +61,8 @@
             <div>Environment (secrets) variables for Production.</div>
         </div>
         @forelse ($this->environmentVariables as $env)
-            <livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}"
-                :env="$env" :type="$resource->type()" />
+            <livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}" :env="$env"
+                :type="$resource->type()" />
         @empty
             <div>No environment variables found.</div>
         @endforelse
@@ -72,27 +72,23 @@
                 <div>Environment (secrets) variables for Preview Deployments.</div>
             </div>
             @foreach ($this->environmentVariablesPreview as $env)
-                <livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}"
-                    :env="$env" :type="$resource->type()" />
+                <livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}" :env="$env"
+                    :type="$resource->type()" />
             @endforeach
         @endif
     @else
         <form wire:submit.prevent='submit' class="flex flex-col gap-2">
             @can('manageEnvironment', $resource)
-                <div class="flex items-center gap-2 p-3 mb-2 text-sm border rounded bg-warning/10 border-warning/50 dark:text-warning text-coollabs">
-                    <svg class="w-5 h-5" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
-                        <path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/>
-                    </svg>
-                    <span><strong>Note:</strong> Inline comments with space before # (e.g., <code>KEY=value #comment</code>) are stripped. Values like <code>PASSWORD=pass#word</code> are preserved. Use the Comment field in Normal view to document variables.</span>
-                </div>
+                <x-callout type="info" title="Note" class="mb-2">
+                    Inline comments with space before # (e.g., <code class="font-mono">KEY=value #comment</code>) are stripped.
+                </x-callout>
 
                 <x-forms.textarea rows="10" class="whitespace-pre-wrap" id="variables" wire:model="variables"
                     label="Production Environment Variables"></x-forms.textarea>
 
                 @if ($showPreview)
-                    <x-forms.textarea rows="10" class="whitespace-pre-wrap"
-                        label="Preview Deployments Environment Variables" id="variablesPreview"
-                        wire:model="variablesPreview"></x-forms.textarea>
+                    <x-forms.textarea rows="10" class="whitespace-pre-wrap" label="Preview Deployments Environment Variables"
+                        id="variablesPreview" wire:model="variablesPreview"></x-forms.textarea>
                 @endif
 
                 <x-forms.button type="submit" class="btn btn-primary">Save All Environment Variables</x-forms.button>
@@ -101,11 +97,10 @@
                     label="Production Environment Variables" disabled></x-forms.textarea>
 
                 @if ($showPreview)
-                    <x-forms.textarea rows="10" class="whitespace-pre-wrap"
-                        label="Preview Deployments Environment Variables" id="variablesPreview"
-                        wire:model="variablesPreview" disabled></x-forms.textarea>
+                    <x-forms.textarea rows="10" class="whitespace-pre-wrap" label="Preview Deployments Environment Variables"
+                        id="variablesPreview" wire:model="variablesPreview" disabled></x-forms.textarea>
                 @endif
             @endcan
         </form>
     @endif
-</div>
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/project/shared/environment-variable/show.blade.php b/resources/views/livewire/project/shared/environment-variable/show.blade.php
index c2865ccb8..cc95939de 100644
--- a/resources/views/livewire/project/shared/environment-variable/show.blade.php
+++ b/resources/views/livewire/project/shared/environment-variable/show.blade.php
@@ -15,7 +15,8 @@
                 </svg>
                 @can('delete', $this->env)
                     <x-modal-confirmation title="Confirm Environment Variable Deletion?" isErrorButton buttonTitle="Delete"
-                        submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']" confirmationText="{{ $env->key }}"
+                        submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']"
+                        confirmationText="{{ $env->key }}"
                         confirmationLabel="Please confirm the execution of the actions by entering the Environment Variable Name below"
                         shortConfirmationLabel="Environment Variable Name" :confirmWithPassword="false"
                         step2ButtonText="Permanently Delete" />
@@ -24,7 +25,7 @@
             @can('update', $this->env)
                 <div class="flex flex-col w-full gap-2 lg:flex-row lg:items-end">
                     <div class="flex-1">
-                        <x-forms.input id="comment" label="Comment (Optional)"
+                        <x-forms.input id="comment" label="Comment"
                             helper="Add a note to document what this environment variable is used for." maxlength="256" />
                     </div>
                     <x-forms.button type="submit">Update</x-forms.button>
@@ -117,8 +118,8 @@
                     </div>
                 </div>
                 <div class="w-full">
-                    <x-forms.input disabled id="comment" label="Comment"
-                        helper="Documentation for this environment variable." maxlength="256" />
+                    <x-forms.input disabled id="comment" label="Comment" helper="Documentation for this environment variable."
+                        maxlength="256" />
                 </div>
             @endcan
         @else
@@ -132,7 +133,8 @@
                                 <x-forms.input disabled type="password" id="real_value" />
                             @endif
                         </div>
-                        <x-forms.input disabled id="comment" label="Comment (Optional)" helper="Add a note to document what this environment variable is used for." maxlength="256" />
+                        <x-forms.input disabled id="comment" label="Comment"
+                            helper="Add a note to document what this environment variable is used for." maxlength="256" />
                     </div>
                 @else
                     <div class="flex flex-col w-full gap-2">
@@ -145,10 +147,12 @@
                                 <x-forms.input :required="$is_redis_credential" type="password" id="value" />
                             @endif
                             @if ($is_shared)
-                                <x-forms.input :disabled="$is_redis_credential" :required="$is_redis_credential" disabled type="password" id="real_value" />
+                                <x-forms.input :disabled="$is_redis_credential" :required="$is_redis_credential" disabled
+                                    type="password" id="real_value" />
                             @endif
                         </div>
-                        <x-forms.input instantSave id="comment" label="Comment (Optional)" helper="Add a note to document what this environment variable is used for." maxlength="256" />
+                        <x-forms.input instantSave id="comment" label="Comment"
+                            helper="Add a note to document what this environment variable is used for." maxlength="256" />
                     </div>
                 @endif
             @else
@@ -160,7 +164,8 @@
                             <x-forms.input disabled type="password" id="real_value" />
                         @endif
                     </div>
-                    <x-forms.input disabled id="comment" label="Comment (Optional)" helper="Add a note to document what this environment variable is used for." maxlength="256" />
+                    <x-forms.input disabled id="comment" label="Comment"
+                        helper="Add a note to document what this environment variable is used for." maxlength="256" />
                 </div>
             @endcan
             @can('update', $this->env)
@@ -213,8 +218,8 @@
                         @if ($isDisabled)
                             <x-forms.button disabled type="submit">Update</x-forms.button>
                             <x-forms.button wire:click='lock'>Lock</x-forms.button>
-                            <x-modal-confirmation title="Confirm Environment Variable Deletion?" isErrorButton
-                                buttonTitle="Delete" submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']"
+                            <x-modal-confirmation title="Confirm Environment Variable Deletion?" isErrorButton buttonTitle="Delete"
+                                submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']"
                                 confirmationText="{{ $key }}" buttonFullWidth="true"
                                 confirmationLabel="Please confirm the execution of the actions by entering the Environment Variable Name below"
                                 shortConfirmationLabel="Environment Variable Name" :confirmWithPassword="false"
@@ -222,8 +227,8 @@
                         @else
                             <x-forms.button type="submit">Update</x-forms.button>
                             <x-forms.button wire:click='lock'>Lock</x-forms.button>
-                            <x-modal-confirmation title="Confirm Environment Variable Deletion?" isErrorButton
-                                buttonTitle="Delete" submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']"
+                            <x-modal-confirmation title="Confirm Environment Variable Deletion?" isErrorButton buttonTitle="Delete"
+                                submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']"
                                 confirmationText="{{ $key }}" buttonFullWidth="true"
                                 confirmationLabel="Please confirm the execution of the actions by entering the Environment Variable Name below"
                                 shortConfirmationLabel="Environment Variable Name" :confirmWithPassword="false"
@@ -277,4 +282,4 @@
         @endif
 
     </form>
-</div>
+</div>
\ No newline at end of file