fix: multiline env variables

app/Livewire/Project/Edit.php

@@ -17,9 +17,14 @@ class Edit extends Component
     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'],
                 'type' => 'project',
                 'team_id' => currentTeam()->id,
             ]);

app/Livewire/Project/EnvironmentEdit.php

@@ -21,9 +21,14 @@ class EnvironmentEdit extends Component
     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'],
                 'type' => 'environment',
                 'team_id' => currentTeam()->id,
             ]);

app/Livewire/Project/Shared/EnvironmentVariable/Add.php

@@ -11,17 +11,20 @@ class Add extends Component
     public string $key;
     public ?string $value = null;
     public bool $is_build_time = false;
+    public bool $is_multiline = false;
 
     protected $listeners = ['clearAddEnv' => 'clear'];
     protected $rules = [
         'key' => 'required|string',
         'value' => 'nullable',
         'is_build_time' => 'required|boolean',
+        'is_multiline' => 'required|boolean',
     ];
     protected $validationAttributes = [
         'key' => 'key',
         'value' => 'value',
         'is_build_time' => 'build',
+        'is_multiline' => 'multiline',
     ];
 
     public function mount()
@@ -43,6 +46,7 @@ class Add extends Component
             'key' => $this->key,
             'value' => $this->value,
             'is_build_time' => $this->is_build_time,
+            'is_multiline' => $this->is_multiline,
             'is_preview' => $this->is_preview,
         ]);
         $this->clear();
@@ -53,5 +57,6 @@ class Add extends Component
         $this->key = '';
         $this->value = '';
         $this->is_build_time = false;
+        $this->is_multiline = false;
     }
 }

app/Livewire/Project/Shared/EnvironmentVariable/All.php

@@ -11,7 +11,7 @@ class All extends Component
 {
     public $resource;
     public bool $showPreview = false;
-    public string|null $modalId = null;
+    public ?string $modalId = null;
     public ?string $variables = null;
     public ?string $variablesPreview = null;
     public string $view = 'normal';
@@ -34,6 +34,9 @@ class All extends Component
             if ($item->is_shown_once) {
                 return "$item->key=(locked secret)";
             }
+            if ($item->is_multiline) {
+                return "$item->key=(multiline, edit in normal view)";
+            }
             return "$item->key=$item->value";
         })->sort()->join('
 ');
@@ -42,6 +45,9 @@ class All extends Component
                 if ($item->is_shown_once) {
                     return "$item->key=(locked secret)";
                 }
+                if ($item->is_multiline) {
+                    return "$item->key=(multiline, edit in normal view)";
+                }
                 return "$item->key=$item->value";
             })->sort()->join('
 ');
@@ -67,7 +73,7 @@ class All extends Component
                 $found = $this->resource->environment_variables()->where('key', $key)->first();
             }
             if ($found) {
-                if ($found->is_shown_once) {
+                if ($found->is_shown_once || $found->is_multiline) {
                     continue;
                 }
                 $found->value = $variable;
@@ -144,6 +150,7 @@ class All extends Component
             $environment->key = $data['key'];
             $environment->value = $data['value'];
             $environment->is_build_time = $data['is_build_time'];
+            $environment->is_multiline = $data['is_multiline'];
             $environment->is_preview = $data['is_preview'];
 
             switch ($this->resource->type()) {

app/Livewire/TeamSharedVariablesIndex.php

@@ -13,9 +13,14 @@ class TeamSharedVariablesIndex extends Component
     public function saveKey($data)
     {
         try {
+            $found = $this->team->environment_variables()->where('key', $data['key'])->first();
+            if ($found) {
+                throw new \Exception('Variable already exists.');
+            }
             $this->team->environment_variables()->create([
                 'key' => $data['key'],
                 'value' => $data['value'],
+                'is_multiline' => $data['is_multiline'],
                 'type' => 'team',
                 'team_id' => currentTeam()->id,
             ]);

app/Models/EnvironmentVariable.php

@@ -49,7 +49,7 @@ class EnvironmentVariable extends Model
             set: fn (?string $value = null) => $this->set_environment_variables($value),
         );
     }
-    public function realValue(): Attribute
+    public function resource()
     {
         $resource = null;
         if ($this->application_id) {
@@ -71,9 +71,19 @@ class EnvironmentVariable extends Model
                 }
             }
         }
+        return $resource;
+    }
+    public function realValue(): Attribute
+    {
+        $resource = $this->resource();
         return Attribute::make(
             get: function () use ($resource) {
-                return $this->get_real_environment_variables($this->value, $resource);
+                $env = $this->get_real_environment_variables($this->value, $resource);
+                return data_get($env, 'value', $env);
+                if (is_string($env)) {
+                    return $env;
+                }
+                return $env->value;
             }
         );
     }
@@ -89,7 +99,7 @@ class EnvironmentVariable extends Model
             }
         );
     }
-    private function get_real_environment_variables(?string $environment_variable = null, $resource = null): string|null
+    private function get_real_environment_variables(?string $environment_variable = null, $resource = null)
     {
         if (!$environment_variable || !$resource) {
             return null;
@@ -112,7 +122,7 @@ class EnvironmentVariable extends Model
             }
             $environment_variable_found = SharedEnvironmentVariable::where("type", $type)->where('key', $variable)->where('team_id', $resource->team()->id)->where("{$type}_id", $id)->first();
             if ($environment_variable_found) {
-                return $environment_variable_found->value;
+                return $environment_variable_found;
             }
         }
         return $environment_variable;

app/View/Components/Forms/Textarea.php

@@ -24,8 +24,9 @@ class Textarea extends Component
         public bool    $readonly = false,
         public ?string $helper = null,
         public bool    $realtimeValidation = false,
-        // public bool    $allowToPeak = true,
+        public bool    $allowToPeak = true,
-        public string  $defaultClass = "textarea leading-normal bg-coolgray-100 rounded text-white scrollbar disabled:bg-coolgray-200/50 disabled:border-none placeholder:text-coolgray-500 read-only:text-neutral-500 read-only:bg-coolgray-200/50"
+        public string  $defaultClass = "textarea leading-normal bg-coolgray-100 rounded text-white w-full scrollbar disabled:bg-coolgray-200/50 disabled:border-none placeholder:text-coolgray-500 read-only:text-neutral-500 read-only:bg-coolgray-200/50",
+        public string  $defaultClassInput = "input input-sm bg-coolgray-100 rounded text-white w-full disabled:bg-coolgray-200/50 disabled:border-none placeholder:text-coolgray-500 read-only:text-neutral-500 read-only:bg-coolgray-200/50"
     ) {
         //
     }

database/migrations/2024_03_14_214402_add_multiline_envs.php

@@ -14,6 +14,9 @@ return new class extends Migration
         Schema::table('environment_variables', function (Blueprint $table) {
             $table->boolean('is_multiline')->default(false);
         });
+        Schema::table('shared_environment_variables', function (Blueprint $table) {
+            $table->boolean('is_multiline')->default(false);
+        });
     }
 
     /**
@@ -24,5 +27,8 @@ return new class extends Migration
         Schema::table('environment_variables', function (Blueprint $table) {
             $table->dropColumn('is_multiline');
         });
+        Schema::table('shared_environment_variables', function (Blueprint $table) {
+            $table->dropColumn('is_multiline');
+        });
     }
 };

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

@@ -1,4 +1,4 @@
-<div class="w-full">
+<div class="flex-1">
     @if ($label)
         <label for="small-input" class="flex items-center gap-1 mb-1 text-sm font-medium">{{ $label }}
             @if ($required)
@@ -10,7 +10,7 @@
         </label>
     @endif
     @if ($type === 'password')
-        <div class="relative" x-data>
+        <div class="relative" x-data="{ type: 'password' }">
             @if ($allowToPeak)
                 <div x-on:click="changePasswordFieldType"
                     class="absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer hover:text-white">
@@ -22,7 +22,7 @@
                     </svg>
                 </div>
             @endif
-            <input value="{{ $value }}" {{ $attributes->merge(['class' => $defaultClass]) }}
+            <input x-cloak x-show="type" value="{{ $value }}" {{ $attributes->merge(['class' => $defaultClass]) }}
                 @required($required) @if ($id !== 'null') wire:model={{ $id }} @endif
                 wire:dirty.class.remove='text-white' wire:dirty.class="input-warning" wire:loading.attr="disabled"
                 type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $id }}"

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

@@ -1,4 +1,4 @@
-<div class="form-control">
+<div class="flex-1 form-control">
     @if ($label)
         <label for="small-input" class="flex items-center gap-1 mb-1 text-sm font-medium">{{ $label }}
             @if ($required)
@@ -9,13 +9,46 @@
             @endif
         </label>
     @endif
+    @if ($type === 'password')
+        <div class="relative" x-data="{ type: 'password' }">
+            @if ($allowToPeak)
+                <div x-on:click="changePasswordFieldType"
+                    class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer hover:text-white">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                        <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+                        <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
+                    </svg>
+                </div>
+            @endif
+            <input x-cloak x-show="type === 'password'" value="{{ $value }}"
+                {{ $attributes->merge(['class' => $defaultClassInput]) }} @required($required)
+                @if ($id !== 'null') wire:model={{ $id }} @endif
+                wire:dirty.class.remove='text-white' wire:dirty.class="input-warning" wire:loading.attr="disabled"
+                type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $id }}"
+                name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
+                aria-placeholder="{{ $attributes->get('placeholder') }}">
+            <textarea x-cloak x-show="type !== 'password'" placeholder="{{ $placeholder }}"
+                {{ $attributes->merge(['class' => $defaultClass]) }}
+                @if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
+                @else
+            wire:model={{ $value ?? $id }}
+            wire:dirty.class="input-warning" @endif
+                @disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}"
+                name="{{ $name }}" name={{ $id }}></textarea>
+
+        </div>
+    @else
         <textarea placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }}
             @if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
         @else
     wire:model={{ $value ?? $id }}
     wire:dirty.class="input-warning" @endif
-        @disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}" name="{{ $name }}"
+            @disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}"
-        name={{ $id }}></textarea>
+            name="{{ $name }}" name={{ $id }}></textarea>
+    @endif
+
     @error($id)
         <label class="label">
             <span class="text-red-500 label-text-alt">{{ $message }}</span>

resources/views/layouts/base.blade.php

@@ -76,11 +76,13 @@
                     element = element.parentElement;
                 }
                 element = element.children[1];
-                if (element.nodeName === 'INPUT') {
+                if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
                     if (element.type === 'password') {
                         element.type = 'text';
+                        this.type = 'text';
                     } else {
                         element.type = 'password';
+                        this.type = 'password';
                     }
                 }
             }

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

@@ -1,9 +1,11 @@
 <form class="flex flex-col gap-2 rounded" wire:submit='submit'>
     <x-forms.input placeholder="NODE_ENV" id="key" label="Name" required />
-    <x-forms.input placeholder="production" id="value" label="Value" required />
+    <x-forms.textarea x-show="$wire.is_multiline === true" x-cloak id="value" label="Value" required />
+    <x-forms.input x-show="$wire.is_multiline === false" x-cloak placeholder="production" id="value" x-bind:label="$wire.is_multiline === false && 'Value'" required />
     @if (data_get($parameters, 'application_uuid'))
         <x-forms.checkbox id="is_build_time" label="Build Variable?" />
         @endif
+        <x-forms.checkbox id="is_multiline" label="Is Multiline?" />
     <x-forms.button type="submit" @click="slideOverOpen=false">
         Save
     </x-forms.button>

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

@@ -21,17 +21,17 @@
                 @endif
             @else
                 @if ($env->is_multiline)
-                    <x-forms.input class="h-12" id="env.key" />
+                    <x-forms.input id="env.key" />
-                    <textarea wire:model.lazy="env.value" rows="1" id="env.value"
+                    <x-forms.textarea type="password" id="env.value" />
-                        class="w-full leading-normal text-white rounded textarea bg-coolgray-100 scrollbar disabled:bg-coolgray-200/50 disabled:border-none placeholder:text-coolgray-500 read-only:text-neutral-500 read-only:bg-coolgray-200/50"></textarea>
                 @else
                     <x-forms.input id="env.key" />
                     <x-forms.input type="password" id="env.value" />
                 @endif
                 @if ($env->is_shared)
                     <x-forms.input disabled type="password" id="env.real_value" />
-                @endif
+                @else
                     <x-forms.checkbox instantSave id="env.is_multiline" label="Is Multiline?" />
+                @endif
                 @if ($type !== 'service' && !$isSharedVariable)
                     <x-forms.checkbox instantSave id="env.is_build_time" label="Build Variable?" />
                 @endif