Merge pull request #3 from tallstackui/dropdown

Feature: Dropdown of Useful Links
tallstackui · Sep 17, 2024 · c69e3a5 · c69e3a5
2 parents 4767cfb + 83f1738
commit c69e3a5
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 1 deletion.
diff --git a/config/envbar.php b/config/envbar.php
@@ -92,6 +92,16 @@
         'timeout' => env('ENVBAR_CLOSABLE_TIMEOUT'),
     ],
 
+    /*
+    |--------------------------------------------------------------------------
+    | Useful Links
+    |--------------------------------------------------------------------------
+    |
+    | Allows you to set useful links to be displayed in a dropdown on the EnvBar.
+    |
+    */
+    'links' => explode(',', (string) env('ENVBAR_LINKS')),
+
     /*
     |--------------------------------------------------------------------------
     | Environments

diff --git a/dist/app.css b/dist/app.css
diff --git a/lang/en/messages.php b/lang/en/messages.php
@@ -4,4 +4,5 @@
     'environment' => 'Environment:',
     'branch' => 'Branch:',
     'release' => 'Latest <b>:Source</b> Release:',
+    'select' => '- Useful Links:',
 ];
diff --git a/lang/pt_BR/messages.php b/lang/pt_BR/messages.php
@@ -4,4 +4,5 @@
     'environment' => 'Ambiente:',
     'branch' => 'Branch:',
     'release' => 'Última Release do <b>:Source:</b>',
+    'select' => '- Links Úteis:',
 ];
diff --git a/resources/views/components/envbar.blade.php b/resources/views/components/envbar.blade.php
@@ -41,6 +41,16 @@
         @endif
         {{-- Right Side --}}
         <div class="eb-flex eb-items-center eb-absolute eb-right-2">
+            @if ($configuration['links'] !== null)
+                <div class="eb-items-center eb-gap-1">
+                    <select id="envbar-dropdown" class="eb-w-full eb-rounded-md eb-border-0 eb-py-0.5 eb-pl-3 eb-pr-10 eb-text-gray-900 eb-ring-1 eb-ring-inset eb-ring-gray-300 focus:eb-outline-none focus:eb-ring-1 eb-ring-gray-300 focus:eb-ring-gray-300">
+                        <option value="">@lang('envbar::messages.select')</option>
+                        @foreach ($configuration['links'] as $link)
+                            <option value="{{ $link['url'] }}">{{ $link['name'] }}</option>
+                        @endforeach
+                    </select>
+                </div>
+            @endif
             @if ($configuration['tailwind_breaking_points'])
             <div class="eb-items-center eb-gap-1">
                 <x-envbar::badge :size="$configuration['size']"><span id="envbar-resolution"></span></x-envbar::badge>
@@ -61,5 +71,15 @@
 
     (function() {
         window.hide = () => window.$envbar(@js($configuration)).close();
+
+        @if ($configuration['links'] !== null)
+            const dropdown = document.getElementById('envbar-dropdown');
+
+            dropdown.addEventListener('change', () => {
+                window.open(dropdown.value, '_blank');
+
+                dropdown.value = '';
+            });
+        @endif
     })();
 </script>
diff --git a/src/Compilers/EnvBarComponentCompiler.php b/src/Compilers/EnvBarComponentCompiler.php
@@ -28,6 +28,7 @@ public function __invoke(): array
         foreach ([
             'size',
             'fixed',
+            'links',
             'closable',
             'warning_message',
             'tailwind_breaking_points',
@@ -75,4 +76,26 @@ private function tailwind_breaking_points(): bool
     {
         return file_exists(base_path('tailwind.config.js')) && config('envbar.tailwind_breaking_points');
     }
+
+    /**
+     * Format the links what will be displayed on the dropdown.
+     */
+    private function links(): ?array
+    {
+        $links = collect(config('envbar.links'))->filter();
+
+        if ($links->isEmpty()) {
+            return null;
+        }
+
+        return $links->map(function (string $link) {
+            if (str_contains($link, '|')) {
+                [$name, $url] = explode('|', $link);
+
+                return ['name' => $name, 'url' => $url];
+            }
+
+            return ['name' => $link, 'url' => $link];
+        })->toArray();
+    }
 }
diff --git a/tests/Browser/EnvBar/IndexTest.php b/tests/Browser/EnvBar/IndexTest.php
@@ -75,4 +75,18 @@ public function closable_works_successfully(): void
                 ->assertDontSee('testing');
         });
     }
+
+    #[Test]
+    public function dropdown_works_successfully(): void
+    {
+        $this->beforeServingApplication(fn ($app, Repository $config) => $config->set('envbar.links', 'https://google.com'));
+
+        $this->browse(function (Browser $browser): void {
+            $browser->visit('/')
+                ->waitForText('Environment')
+                ->assertSee('Environment')
+                ->assertSee('testing')
+                ->assertSee('- Useful Links');
+        });
+    }
 }