rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update globalsearch

Browse source
This commit is contained in:
Andras Bacsai 2025-10-08 13:38:38 +02:00
parent e8b2ef0e0c
commit afd10048bd
2 changed files with 274 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

134
app/Livewire/GlobalSearch.php
View file

@ -22,6 +22,8 @@ class GlobalSearch extends Component
{
public $searchQuery = '';
private $previousTrimmedQuery = '';
public $isModalOpen = false;
public $searchResults = [];
@ -86,6 +88,7 @@ public function closeSearchModal()
{
$this->isModalOpen = false;
$this->searchQuery = '';
$this->previousTrimmedQuery = '';
$this->searchResults = [];
}
@ -101,25 +104,49 @@ public static function clearTeamCache($teamId)
public function updatedSearchQuery()
{
$query = strtolower(trim($this->searchQuery));
$trimmedQuery = trim($this->searchQuery);
// If only spaces were added/removed, don't trigger a search
if ($trimmedQuery === $this->previousTrimmedQuery) {
return;
}
$this->previousTrimmedQuery = $trimmedQuery;
// If search query is empty, just clear results without processing
if (empty($trimmedQuery)) {
$this->searchResults = [];
$this->isCreateMode = false;
$this->creatableItems = [];
$this->autoOpenResource = null;
$this->isSelectingResource = false;
$this->cancelResourceSelection();
return;
}
$query = strtolower($trimmedQuery);
// Reset keyboard navigation index
$this->dispatch('reset-selected-index');
if (str_starts_with($query, 'new')) {
// Only enter create mode if query is exactly "new" or starts with "new " (space after)
if ($query === 'new' || str_starts_with($query, 'new ')) {
$this->isCreateMode = true;
$this->loadCreatableItems();
$this->searchResults = [];
// Check for sub-commands like "new project", "new server", etc.
// Use original query (not trimmed) to ensure exact match without trailing spaces
$detectedType = $this->detectSpecificResource(strtolower($this->searchQuery));
$detectedType = $this->detectSpecificResource($query);
if ($detectedType) {
$this->navigateToResource($detectedType);
} else {
// If no specific resource detected, reset selection state
$this->cancelResourceSelection();
}
// Also search for existing resources that match the query
// This allows users to find resources with "new" in their name
$this->search();
} else {
$this->isCreateMode = false;
$this->creatableItems = [];
@ -624,6 +651,8 @@ private function search()
// Search for matching creatable resources to show as suggestions (if no priority item)
if (! $priorityCreatableItem) {
$this->loadCreatableItems();
// Search in regular creatable items (apps, databases, quick actions)
$creatableSuggestions = collect($this->creatableItems)
->filter(function ($item) use ($query) {
$searchText = strtolower($item['name'].' '.$item['description'].' '.($item['type'] ?? ''));
@ -648,7 +677,37 @@ private function search()
$item['is_creatable_suggestion'] = true;
return $item;
});
// Also search in services (loaded on-demand)
$serviceSuggestions = collect($this->services)
->filter(function ($item) use ($query) {
$searchText = strtolower($item['name'].' '.$item['description'].' '.($item['type'] ?? ''));
return preg_match('/\b'.preg_quote($query, '/').'/i', $searchText);
})
->map(function ($item) use ($query) {
// Calculate match priority: name > type > description
$name = strtolower($item['name']);
$type = strtolower($item['type'] ?? '');
$description = strtolower($item['description']);
if (preg_match('/\b'.preg_quote($query, '/').'/i', $name)) {
$item['match_priority'] = 1;
} elseif (preg_match('/\b'.preg_quote($query, '/').'/i', $type)) {
$item['match_priority'] = 2;
} else {
$item['match_priority'] = 3;
}
$item['is_creatable_suggestion'] = true;
return $item;
});
// Merge and sort all suggestions
$creatableSuggestions = $creatableSuggestions
->merge($serviceSuggestions)
->sortBy('match_priority')
->take(10)
->values()
@ -914,31 +973,18 @@ private function loadCreatableItems()
]);
}
// === Services Category ===
if ($user->can('createAnyResource')) {
// Load all services
$allServices = get_service_templates();
foreach ($allServices as $serviceKey => $service) {
$items->push([
'name' => str($serviceKey)->headline()->toString(),
'description' => data_get($service, 'slogan', 'Deploy '.str($serviceKey)->headline()),
'type' => 'one-click-service-'.$serviceKey,
'category' => 'Services',
'resourceType' => 'service',
]);
}
}
$this->creatableItems = $items->toArray();
}
public function navigateToResource($type)
{
// Find the item by type
// Find the item by type - check regular items first, then services
$item = collect($this->creatableItems)->firstWhere('type', $type);
if (! $item) {
$item = collect($this->services)->firstWhere('type', $type);
}
if (! $item) {
return;
}
@ -1227,12 +1273,52 @@ public function getSelectedResourceNameProperty()
$this->loadCreatableItems();
}
// Find the item by type
// Find the item by type - check regular items first, then services
$item = collect($this->creatableItems)->firstWhere('type', $this->selectedResourceType);
if (! $item) {
$item = collect($this->services)->firstWhere('type', $this->selectedResourceType);
}
return $item ? $item['name'] : null;
}
public function getServicesProperty()
{
// Cache services in a static property to avoid reloading on every access
static $cachedServices = null;
if ($cachedServices !== null) {
return $cachedServices;
}
$user = auth()->user();
if (! $user->can('createAnyResource')) {
$cachedServices = [];
return $cachedServices;
}
// Load all services
$allServices = get_service_templates();
$items = collect();
foreach ($allServices as $serviceKey => $service) {
$items->push([
'name' => str($serviceKey)->headline()->toString(),
'description' => data_get($service, 'slogan', 'Deploy '.str($serviceKey)->headline()),
'type' => 'one-click-service-'.$serviceKey,
'category' => 'Services',
'resourceType' => 'service',
]);
}
$cachedServices = $items->toArray();
return $cachedServices;
}
public function render()
{
return view('livewire.global-search');

206
resources/views/livewire/global-search.blade.php
View file

@ -1,14 +1,20 @@
<div x-data="{
modalOpen: false,
selectedIndex: -1,
isSearching: false,
isLoadingInitialData: false,
openModal() {
this.modalOpen = true;
this.selectedIndex = -1;
@this.openSearchModal();
this.isLoadingInitialData = true;
// Dispatch event to load initial data
$wire.dispatch('loadInitialData');
},
closeModal() {
this.modalOpen = false;
this.selectedIndex = -1;
this.isSearching = false;
this.isLoadingInitialData = false;
// Ensure scroll is restored
document.body.style.overflow = '';
@this.closeSearchModal();
@ -36,6 +42,46 @@
this.selectedIndex = -1;
});
// Listen for loading state changes
$wire.on('loadInitialData', () => {
this.isLoadingInitialData = true;
$wire.openSearchModal().finally(() => {
this.isLoadingInitialData = false;
// Focus input after data is loaded
setTimeout(() => this.$refs.searchInput?.focus(), 50);
});
});
// Use Livewire lifecycle hooks for accurate loading state
const componentId = $wire.__instance.id;
Livewire.hook('message.sent', (message, component) => {
// Only handle messages for this component instance
if (component.id !== componentId) return;
// Check if this is a searchQuery update
if (message.updateQueue && message.updateQueue.some(update => update.payload.name === 'searchQuery')) {
this.isSearching = true;
}
});
Livewire.hook('message.processed', (message, component) => {
// Only handle messages for this component instance
if (component.id !== componentId) return;
// Check if this was a searchQuery update
if (message.updateQueue && message.updateQueue.some(update => update.payload.name === 'searchQuery')) {
this.isSearching = false;
}
});
// Also clear loading state when search is emptied
this.$watch('$wire.searchQuery', (value) => {
if (!value || value.length === 0) {
this.isSearching = false;
}
});
// Create named handlers for proper cleanup
const openGlobalSearchHandler = () => this.openModal();
const slashKeyHandler = (e) => {
@ -62,19 +108,13 @@
}
}
};
const escapeKeyHandler = async (e) => {
const escapeKeyHandler = (e) => {
if (e.key === 'Escape' && this.modalOpen) {
// If search query is empty, close the modal
const searchQuery = await @this.get('searchQuery');
if (searchQuery === '') {
// Check if we're in a selection state - go back to main menu first
const selectingServer = await @this.get('selectingServer');
const selectingProject = await @this.get('selectingProject');
const selectingEnvironment = await @this.get('selectingEnvironment');
const selectingDestination = await @this.get('selectingDestination');
if (selectingServer || selectingProject || selectingEnvironment || selectingDestination) {
@this.call('cancelResourceSelection');
if (!$wire.searchQuery || $wire.searchQuery === '') {
// Check if we're in a selection state using Alpine-accessible Livewire state
if ($wire.isSelectingResource) {
$wire.cancelResourceSelection();
setTimeout(() => this.$refs.searchInput?.focus(), 100);
} else {
// Close the modal if in main menu
@ -82,7 +122,7 @@
}
} else {
// If search query has text, just clear it
@this.set('searchQuery', '');
$wire.searchQuery = '';
setTimeout(() => this.$refs.searchInput?.focus(), 100);
}
}
@ -159,8 +199,8 @@ class="fixed top-0 left-0 z-99 flex items-start justify-center w-screen h-screen
</div>
<input type="text" wire:model.live.debounce.200ms="searchQuery"
placeholder="Search resources (type new for create things)..." x-ref="searchInput"
x-init="$watch('modalOpen', value => { if (value) setTimeout(() => $refs.searchInput.focus(), 100) })"
class="w-full pl-12 pr-32 py-4 text-base bg-white dark:bg-coolgray-100 border-none rounded-lg shadow-xl ring-1 ring-neutral-200 dark:ring-coolgray-300 focus:ring-2 focus:ring-neutral-400 dark:focus:ring-coolgray-300 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500" />
x-init="$watch('modalOpen', value => { if (value) setTimeout(() => $refs.searchInput.focus(), 100) })" :disabled="isLoadingInitialData"
class="w-full pl-12 pr-32 py-4 text-base bg-white dark:bg-coolgray-100 border-none rounded-lg shadow-xl ring-1 ring-neutral-200 dark:ring-coolgray-300 focus:ring-2 focus:ring-neutral-400 dark:focus:ring-coolgray-300 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 disabled:opacity-50 disabled:cursor-not-allowed" />
<div class="absolute inset-y-0 right-2 flex items-center gap-2 pointer-events-none">
<span class="text-xs font-medium text-neutral-400 dark:text-neutral-500">
/ or ⌘K to focus
@ -172,31 +212,53 @@ class="pointer-events-auto px-2 py-1 text-xs font-medium text-neutral-500 dark:t
</div>
</div>
<!-- Initial Loading State when opening modal -->
<div x-show="isLoadingInitialData && !$wire.searchQuery" x-cloak
class="mt-2 bg-white dark:bg-coolgray-100 rounded-lg shadow-xl ring-1 ring-neutral-200 dark:ring-coolgray-300 overflow-hidden">
<div class="flex items-center justify-center min-h-[200px] p-8">
<div class="text-center">
<svg class="animate-spin mx-auto h-8 w-8 text-neutral-400 mb-3"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
<p class="text-xs text-neutral-500 dark:text-neutral-500 mt-1">
Please wait while we fetch your data
</p>
</div>
</div>
</div>
<!-- Search results (with background) -->
@if (strlen($searchQuery) >= 1)
<div
class="mt-2 bg-white dark:bg-coolgray-100 rounded-lg shadow-xl ring-1 ring-neutral-200 dark:ring-coolgray-300 overflow-hidden">
<!-- Loading indicator -->
<div wire:loading.flex wire:target="searchQuery"
class="min-h-[200px] items-center justify-center p-8">
<div class="text-center">
<svg class="animate-spin mx-auto h-8 w-8 text-neutral-400"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10"
stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
Searching...
</p>
<!-- Loading indicator with skeleton loaders -->
<div x-show="isSearching" x-cloak class="min-h-[200px] flex flex-col p-4">
<!-- Show skeleton loaders instead of just spinner -->
<div class="animate-pulse">
@for ($i = 0; $i < 3; $i++)
<div
class="px-4 py-3 {{ $i > 0 ? 'border-t border-neutral-100 dark:border-coolgray-200' : '' }}">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-neutral-200 dark:bg-coolgray-300 rounded-lg"></div>
<div class="flex-1">
<div class="h-4 bg-neutral-200 dark:bg-coolgray-300 rounded w-32 mb-2">
</div>
<div class="h-3 bg-neutral-100 dark:bg-coolgray-400 rounded w-48"></div>
</div>
<div class="w-4 h-4 bg-neutral-100 dark:bg-coolgray-400 rounded"></div>
</div>
</div>
@endfor
</div>
</div>
<!-- Results content - hidden while loading -->
<div wire:loading.remove wire:target="searchQuery"
class="max-h-[60vh] overflow-y-auto scrollbar">
<!-- Results content - show when not searching -->
<div x-show="!isSearching" x-cloak class="max-h-[60vh] overflow-y-auto scrollbar">
@if ($isSelectingResource)
<!-- Resource Selection Flow -->
<div class="p-6">
@ -516,15 +578,71 @@ class="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:bo
@elseif ($isCreateMode && count($this->filteredCreatableItems) > 0 && !$autoOpenResource)
<!-- Create new resources section -->
<div class="py-2">
{{-- <div
class="px-4 py-2 bg-yellow-50 dark:bg-yellow-900/20 border-b border-yellow-100 dark:border-yellow-800">
<h3 class="text-sm font-semibold text-yellow-900 dark:text-yellow-100">
Create New Resources
</h3>
<p class="text-xs text-yellow-700 dark:text-yellow-300 mt-0.5">
Click on any item below to create a new resource
</p>
</div> --}}
{{-- Show existing resources first if any match --}}
@php
$existingResources = collect($searchResults)->filter(fn($r) => !isset($r['is_creatable_suggestion']))->count();
@endphp
@if ($existingResources > 0)
<!-- Existing Resources Section -->
<div class="px-4 pt-3 pb-1">
<h4
class="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
Existing Resources
</h4>
</div>
@foreach ($searchResults as $result)
@if (!isset($result['is_creatable_suggestion']))
<a href="{{ $result['link'] ?? '#' }}"
class="search-result-item block px-4 py-3 hover:bg-neutral-50 dark:hover:bg-coolgray-200 transition-colors focus:outline-none focus:bg-yellow-50 dark:focus:bg-yellow-900/20 border-transparent hover:border-coollabs focus:border-yellow-500 dark:focus:border-yellow-400">
<div class="flex items-center justify-between gap-3">
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-1">
<span
class="font-medium text-neutral-900 dark:text-white truncate">
{{ $result['name'] }}
</span>
<span
class="px-2 py-0.5 text-xs rounded-full bg-neutral-100 dark:bg-coolgray-300 text-neutral-700 dark:text-neutral-300 shrink-0">
@if ($result['type'] === 'application')
Application
@elseif ($result['type'] === 'service')
Service
@elseif ($result['type'] === 'database')
{{ ucfirst($result['subtype'] ?? 'Database') }}
@elseif ($result['type'] === 'server')
Server
@elseif ($result['type'] === 'project')
Project
@elseif ($result['type'] === 'environment')
Environment
@endif
</span>
</div>
@if (!empty($result['project']) && !empty($result['environment']))
<div
class="text-xs text-neutral-500 dark:text-neutral-400 mb-1">
{{ $result['project'] }} /
{{ $result['environment'] }}
</div>
@endif
@if (!empty($result['description']))
<div
class="text-sm text-neutral-600 dark:text-neutral-400">
{{ Str::limit($result['description'], 80) }}
</div>
@endif
</div>
<svg xmlns="http://www.w3.org/2000/svg"
class="shrink-0 h-5 w-5 text-neutral-300 dark:text-neutral-600 self-center"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</div>
</a>
@endif
@endforeach
@endif
@php
$grouped = collect($this->filteredCreatableItems)->groupBy('category');
@ -695,6 +813,9 @@ class="shrink-0 h-5 w-5 text-neutral-300 dark:text-neutral-600 self-center"
<p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
Try different keywords or check the spelling
</p>
<p class="mt-2 text-xs text-neutral-400 dark:text-neutral-500">
💡 Tip: Search for service names like "wordpress", "postgres", or "redis"
</p>
</div>
</div>
@endif
@ -957,4 +1078,5 @@ class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5
</div>
</template>
</div>
</div>