From 17d72089cec6adf291a75a1c9b3309cf44935d5e Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Tue, 6 Jun 2023 11:35:50 +0200
Subject: [PATCH] magic bar updates

---
 resources/js/components/MagicBar.vue          | 205 ++++++++++++++----
 .../new/standalone-docker.blade.php           |   2 +-
 .../new/github-private-repository.blade.php   |   2 +-
 .../new/public-git-repository.blade.php       |   2 +-
 routes/web.php                                | 185 +++++++++-------
 5 files changed, 270 insertions(+), 126 deletions(-)

diff --git a/resources/js/components/MagicBar.vue b/resources/js/components/MagicBar.vue
index d574561e5..ea55cb1d0 100644
--- a/resources/js/components/MagicBar.vue
+++ b/resources/js/components/MagicBar.vue
@@ -11,16 +11,17 @@
                                 d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
                                 clip-rule="evenodd" />
                         </svg>
-                        <input type="text" v-model="search"
+                        <input type="text"
                             class="w-full h-10 pr-4 text-white bg-transparent border-0 pl-11 placeholder:text-neutral-700 focus:ring-0 sm:text-sm"
-                            placeholder=" Search..." role="combobox" aria-expanded="false" aria-controls="options">
+                            placeholder="Search, jump or create... magically... 🪄" role="combobox" aria-expanded="false"
+                            aria-controls="options">
                     </div>
                 </div>
             </div>
-            <div class="relative" role="dialog" aria-modal="true" v-if="showCommandPalette"
-                @keyup.esc="showCommandPalette = false">
+            <div class="relative" role="dialog" aria-modal="true" v-if="showCommandPalette" @keyup.esc="resetState">
                 <div class="fixed inset-0 transition-opacity bg-opacity-75 bg-coolgray-100"></div>
-                <div class="fixed inset-0 p-4 overflow-y-auto sm:p-6 md:px-20">
+                <div class="fixed inset-0 w-3/5 p-4 mx-auto overflow-y-auto sm:p-6 md:px-20 min-w-fit"
+                    @click.self="resetState">
                     <div class="overflow-hidden transition-all transform bg-coolgray-200 ring-1 ring-black ring-opacity-5 ">
                         <div class="relative">
                             <svg class="absolute w-5 h-5 text-gray-400 pointer-events-none left-3 top-2.5"
@@ -29,20 +30,55 @@
                                     d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
                                     clip-rule="evenodd" />
                             </svg>
-                            <input type="text" v-model="search"
-                                class="w-full h-10 pr-4 text-white bg-transparent border-0 pl-11 placeholder:text-neutral-700 focus:ring-0 sm:text-sm"
-                                autofocus placeholder=" Search..." role="combobox" aria-expanded="false"
-                                aria-controls="options">
+                            <input type="text" v-model="search" ref="searchInput"
+                                class="w-full h-10 pr-4 text-white rounded outline-none bg-coolgray-400 pl-11 placeholder:text-neutral-700 sm:text-sm focus:outline-none"
+                                autofocus placeholder="Search, jump or create... magically... 🪄" role="combobox"
+                                aria-expanded="false" aria-controls="options">
                         </div>
-                        <ul class="p-4 pb-2 space-y-4 overflow-y-auto max-h-80 scroll-py-10 scroll-pb-2 scrollbar"
-                            id="options" role="listbox">
+
+                        <ul class="px-4 pb-2 overflow-y-auto max-h-80 scroll-py-10 scroll-pb-2 scrollbar" id="options"
+                            role="listbox">
+                            <li v-if="state.new">
+                                <ul class="mt-2 -mx-4 text-sm text-white ">
+                                    <li class="flex items-center px-4 py-2 cursor-pointer select-none group hover:bg-coolgray-400"
+                                        id="option-1" role="option" tabindex="-1" @click="next('redirect', -1, state.icon)">
+                                        <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="M12 5l0 14" />
+                                            <path d="M5 12l14 0" />
+                                        </svg>
+                                        <span class="flex-auto ml-3 truncate">Add new {{ state.icon }}: <span
+                                                class="text-xs text-warning" v-if="search">{{ search }}</span>
+                                            <span v-else class="text-xs text-warning">with random name (or type
+                                                in one)</span></span>
+                                    </li>
+                                </ul>
+                            </li>
                             <li>
-                                <h2 class="text-xs font-semibold text-white">{{ state.title }}</h2>
+
+                                <ul v-if="data.length == 0" class="mt-2 -mx-4 text-sm text-white ">
+                                    <li class="flex items-center px-4 py-2 select-none group">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon" 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="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+                                            <path d="M9 10l.01 0" />
+                                            <path d="M15 10l.01 0" />
+                                            <path d="M9 15l6 0" />
+                                        </svg>
+                                        <span class="flex-auto ml-3 truncate">Nothing found. Ooops.</span>
+                                    </li>
+                                </ul>
+                                <h2 v-if="data.length > 0 && state.title"
+                                    class="mt-4 mb-2 text-xs font-semibold text-neutral-500">{{ state.title }}
+                                </h2>
                                 <ul class="mt-2 -mx-4 text-sm text-white">
                                     <li class="flex items-center px-4 py-2 cursor-pointer select-none group hover:bg-coolgray-400"
-                                        id="option-1" role="option" tabindex="-1" v-for="action, index in state.data"
+                                        id="option-1" role="option" tabindex="-1" v-for="action, index in data"
                                         @click="next(state.next ?? action.next, index)">
-
                                         <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon" viewBox="0 0 24 24"
                                             stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
                                             stroke-linejoin="round">
@@ -108,69 +144,146 @@
     </Transition>
 </template>
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import axios from "axios";
 
 const showCommandPalette = ref(false)
-const baseUrl = '/magic2'
+const search = ref()
+const searchInput = ref()
+const baseUrl = '/magic'
 let selected = {};
 
-const actions = [{
+const appActions = [{
+    id: 0,
     name: 'Public Repository',
     tags: 'application,public,repository,github,gitlab,bitbucket,git',
     icon: 'git',
     next: 'server'
 },
 {
+    id: 1,
     name: 'Private Repository (with GitHub Apps)',
     tags: 'application,private,repository,github,gitlab,bitbucket,git',
     icon: 'git',
     next: 'server'
 },
 {
+    id: 2,
     name: 'Private Repository (with Deploy Key)',
     tags: 'application,private,repository,github,gitlab,bitbucket,git',
     icon: 'git',
     next: 'server'
 }]
-const state = ref({
-    title: 'New',
+const initialState = {
+    title: null,
     icon: null,
     next: null,
     current: null,
-    data: actions
+    new: false,
+    data: appActions
+}
+const state = ref({ ...initialState })
+const data = computed(() => {
+    return state.value.data.filter(item => item.name.toLowerCase().includes(search.value?.toLowerCase() ?? ''))
 })
+function resetState() {
+    showCommandPalette.value = false
+    state.value = { ...initialState }
+    selected = {}
+}
+async function next(nextAction, index, newAction = null) {
+    if (newAction) {
+        let targetUrl = new URL(window.location.origin)
+        let newUrl = new URL(`${window.location.origin}${baseUrl}/${newAction}/new`);
+        if (search.value) newUrl.searchParams.append('name', search.value)
+        switch (newAction) {
+            case 'server':
+                targetUrl.pathname = '/server/new'
+                console.log(targetUrl.href);
+                window.location.href = targetUrl.href
+                break;
+            case 'destination':
+                targetUrl.pathname = '/destination/new'
+                window.location.href = targetUrl.href
+                break;
+            case 'project':
+                const { data: { new_project_uuid, new_project_id } } = await axios(newUrl.href)
+                selected.project = new_project_uuid
+                await getEnvironments(new_project_id)
+                state.value.title = 'Select an Environment'
+                state.value.icon = 'environment'
+                break;
+            case 'environment':
+                if (selected.project) newUrl.searchParams.append('project_uuid', selected.project)
+                const { data: { new_environment_name } } = await axios(newUrl.href)
+                selected.environment = new_environment_name
+                await redirect();
+                break;
+        }
+    } else {
+        if (state.value.current) {
+            if (state.value.current === 'environment') {
+                selected[state.value.current] = state.value.data[index].name
+            } else {
+                selected[state.value.current] = state.value.data[index].uuid
+            }
+        }
+        else selected['action'] = appActions[index].id
+        console.log(selected)
 
-async function next(nextAction, index) {
-    if (state.value.current) selected[state.value.current] = state.value.data[index].id
-    else selected['action'] = index
+        switch (nextAction) {
+            case 'server':
+                await getServers()
+                state.value.title = 'Select a server'
+                state.value.icon = 'server'
+                state.value.new = true
+                break;
+            case 'destination':
+                await getDestinations(state.value.data[index].id)
+                state.value.title = 'Select a destination'
+                state.value.icon = 'destination'
+                break;
+            case 'project':
+                await getProjects()
+                state.value.title = 'Select a project'
+                state.value.icon = 'project'
+                break;
+            case 'environment':
+                await getEnvironments(state.value.data[index].id)
+                state.value.title = 'Select an environment'
+                state.value.icon = 'environment'
+                break;
+            case 'redirect':
+                await redirect();
+                break;
+            default:
+                break;
+        }
+    }
+    search.value = ''
+    searchInput.value.focus()
+}
 
-    console.log(selected)
-
-    switch (nextAction) {
-        case 'server':
-            await getServers()
-            state.value.title = 'Select a Server'
-            state.value.icon = 'server'
+async function redirect() {
+    let targetUrl = new URL(window.location.origin)
+    switch (selected.action) {
+        case 0:
+            targetUrl.pathname = `/project/${selected.project}/${selected.environment}/new`
+            targetUrl.searchParams.append('type', 'public')
+            targetUrl.searchParams.append('destination', selected.destination)
             break;
-        case 'destination':
-            await getDestinations(state.value.data[index].id)
-            state.value.title = 'Select a Destination'
-            state.value.icon = 'destination'
+        case 1:
+            targetUrl.pathname = `/project/${selected.project}/${selected.environment}/new`
+            targetUrl.searchParams.append('type', 'private-gh-app')
+            targetUrl.searchParams.append('destination', selected.destination)
             break;
-        case 'project':
-            await getProjects()
-            state.value.title = 'Select a Project'
-            state.value.icon = 'project'
-            break;
-        case 'environment':
-            await getEnvironments(state.value.data[index].id)
-            state.value.title = 'Select an Environment'
-            state.value.icon = 'environment'
-            break;
-        default:
+        case 2:
+            targetUrl.pathname = `/project/${selected.project}/${selected.environment}/new`
+            targetUrl.searchParams.append('type', 'private-deploy-key')
+            targetUrl.searchParams.append('destination', selected.destination)
             break;
     }
+    window.location.href = targetUrl.href
 }
 async function getServers() {
     const { data } = await axios.get(`${baseUrl}/servers`);
@@ -194,6 +307,6 @@ async function getEnvironments(projectId) {
     const { data } = await axios.get(`${baseUrl}/environments?project_id=${projectId}`);
     state.value.data = data.environments
     state.value.current = 'environment'
-    state.value.next = 'server'
+    state.value.next = 'redirect'
 }
 </script>
diff --git a/resources/views/livewire/destination/new/standalone-docker.blade.php b/resources/views/livewire/destination/new/standalone-docker.blade.php
index 0a512c704..a03ad4bbd 100644
--- a/resources/views/livewire/destination/new/standalone-docker.blade.php
+++ b/resources/views/livewire/destination/new/standalone-docker.blade.php
@@ -9,8 +9,8 @@
         <x-forms.input id="name" label="Name" required />
         <x-forms.input id="network" label="Network" required />
         <x-forms.select id="server_id" label="Select a server" required>
+            <option disabled>Select a server</option>
             @foreach ($servers as $server)
-                <option disabled>Select a server</option>
                 <option value="{{ $server->id }}">{{ $server->name }}</option>
             @endforeach
         </x-forms.select>
diff --git a/resources/views/livewire/project/new/github-private-repository.blade.php b/resources/views/livewire/project/new/github-private-repository.blade.php
index 4ab59201e..6dbb37fa9 100644
--- a/resources/views/livewire/project/new/github-private-repository.blade.php
+++ b/resources/views/livewire/project/new/github-private-repository.blade.php
@@ -63,7 +63,7 @@
                     </div>
                     <x-forms.checkbox instantSave id="is_static" label="Is it a static site?"
                         helper="If your application is a static site or the final build assets should be served as a static site, enable this." />
-                    <x-forms.button class="w-full mt-8" type="submit">
+                    <x-forms.button type="submit">
                         Save New Application
                     </x-forms.button>
                 @endif
diff --git a/resources/views/livewire/project/new/public-git-repository.blade.php b/resources/views/livewire/project/new/public-git-repository.blade.php
index e257a0b86..427c01a1d 100644
--- a/resources/views/livewire/project/new/public-git-repository.blade.php
+++ b/resources/views/livewire/project/new/public-git-repository.blade.php
@@ -29,7 +29,7 @@
                     </div>
                     <x-forms.checkbox instantSave id="is_static" label="Is it a static site?"
                         helper="If your application is a static site or the final build assets should be served as a static site, enable this." />
-                    <x-forms.button class="mt-8" type="submit">
+                    <x-forms.button type="submit">
                         Save New Application
                     </x-forms.button>
                 @endif
diff --git a/routes/web.php b/routes/web.php
index 9c91e84ca..f1b51fe49 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -27,7 +27,7 @@ use Illuminate\Support\Str;
 
 
 
-Route::prefix('magic2')->middleware(['auth'])->group(function () {
+Route::prefix('magic')->middleware(['auth'])->group(function () {
     Route::get('/servers', function () {
         $id = session('currentTeam')->id;
         return response()->json([
@@ -46,6 +46,19 @@ Route::prefix('magic2')->middleware(['auth'])->group(function () {
             'projects' => Project::where('team_id', $id)->get()->sortBy('name')
         ]);
     });
+    Route::get('/project/new', function () {
+        $id = session('currentTeam')->id;
+        $name = request()->query('name') ?? generate_random_name();
+        ray($id, $name);
+        $project = Project::create([
+            'name' => $name,
+            'team_id' => $id,
+        ]);
+        return response()->json([
+            'new_project_id' => $project->id,
+            'new_project_uuid' => $project->uuid
+        ]);
+    });
     Route::get('/environments', function () {
         $id = session('currentTeam')->id;
         $project_id = request()->query('project_id');
@@ -53,88 +66,106 @@ Route::prefix('magic2')->middleware(['auth'])->group(function () {
             'environments' => Project::where('team_id', $id)->where('id', $project_id)->first()->environments
         ]);
     });
+    Route::get('/environment/new', function () {
+        $id = session('currentTeam')->id;
+        $project_uuid = request()->query('project_uuid');
+        $name = request()->query('name') ?? generate_random_name();
+        ray($project_uuid, $name);
+        $project = Project::where('team_id', $id)->where('uuid', $project_uuid)->first();
+        $environment = $project->environments->where('name', $name)->first();
+        if (!$environment) {
+            $environment = Environment::create([
+                'name' => $name,
+                'project_id' => $project->id,
+            ]);
+        }
+        return response()->json([
+            'new_environment_name' => $environment->name,
+            'project_id' => $project->id,
+        ]);
+    });
 });
 Route::middleware(['auth'])->group(function () {
 
-    Route::get('/magic', function () {
-        try {
-            $id = session('currentTeam')->id;
-            $is_new_project = request()->query('project') === 'new';
-            $is_new_environment = request()->query('environment') === 'new';
-            // Get servers
-            if (request()->query('servers') === 'true') {
-                $servers = Server::where('team_id', $id)->get();
-                return response()->json([
-                    'servers' => $servers,
-                ]);
-            }
+    // Route::get('/magic', function () {
+    //     try {
+    //         $id = session('currentTeam')->id;
+    //         $is_new_project = request()->query('project') === 'new';
+    //         $is_new_environment = request()->query('environment') === 'new';
+    //         // Get servers
+    //         if (request()->query('servers') === 'true') {
+    //             $servers = Server::where('team_id', $id)->get();
+    //             return response()->json([
+    //                 'servers' => $servers,
+    //             ]);
+    //         }
 
-            // Get destinations
-            if ((request()->query('server') && request()->query('destinations') === 'true') || request()->query('destinations') === 'true') {
-                $destinations = Server::destinations(request()->query('server'));
-                return response()->json([
-                    'destinations' => $destinations->toArray(),
-                ]);
-            }
-            // Get private Keys
-            if (request()->query('privateKeys') === 'true') {
-                $privateKeys = PrivateKey::where('team_id', $id)->get();
-                return response()->json([
-                    'privateKeys' => $privateKeys->toArray(),
-                ]);
-            }
-            // Get sources
-            if (request()->query('sources') === 'true') {
-                $github_apps = GithubApp::private();
-                $sources = $github_apps;
-                return response()->json([
-                    'sources' => $sources->toArray(),
-                ]);
-            }
-            // Get projects
-            if ((request()->query('server') && request()->query('destination') && request()->query('projects') === 'true') || request()->query('projects') === 'true') {
-                $projects = Project::where('team_id', $id)->get()->sortBy('name');
-                return response()->json([
-                    'projects' => $projects->toArray(),
-                ]);
-            }
+    //         // Get destinations
+    //         if ((request()->query('server') && request()->query('destinations') === 'true') || request()->query('destinations') === 'true') {
+    //             $destinations = Server::destinations(request()->query('server'));
+    //             return response()->json([
+    //                 'destinations' => $destinations->toArray(),
+    //             ]);
+    //         }
+    //         // Get private Keys
+    //         if (request()->query('privateKeys') === 'true') {
+    //             $privateKeys = PrivateKey::where('team_id', $id)->get();
+    //             return response()->json([
+    //                 'privateKeys' => $privateKeys->toArray(),
+    //             ]);
+    //         }
+    //         // Get sources
+    //         if (request()->query('sources') === 'true') {
+    //             $github_apps = GithubApp::private();
+    //             $sources = $github_apps;
+    //             return response()->json([
+    //                 'sources' => $sources->toArray(),
+    //             ]);
+    //         }
+    //         // Get projects
+    //         if ((request()->query('server') && request()->query('destination') && request()->query('projects') === 'true') || request()->query('projects') === 'true') {
+    //             $projects = Project::where('team_id', $id)->get()->sortBy('name');
+    //             return response()->json([
+    //                 'projects' => $projects->toArray(),
+    //             ]);
+    //         }
 
-            // Get environments
-            if (request()->query('server') && request()->query('destination') && request()->query('project') && request()->query('environments') === 'true') {
-                $environments = Project::where('team_id', $id)->where('uuid', request()->query('project'))->first()->environments;
-                return response()->json([
-                    'environments' => $environments->toArray(),
-                ]);
-            }
+    //         // Get environments
+    //         if (request()->query('server') && request()->query('destination') && request()->query('project') && request()->query('environments') === 'true') {
+    //             $environments = Project::where('team_id', $id)->where('uuid', request()->query('project'))->first()->environments;
+    //             return response()->json([
+    //                 'environments' => $environments->toArray(),
+    //             ]);
+    //         }
 
-            if ($is_new_project) {
-                $project = Project::create([
-                    'name' => request()->query('name') ?? generate_random_name(),
-                    'team_id' => $id,
-                ]);
-                return response()->json([
-                    'project_uuid' => $project->uuid
-                ]);
-            }
-            if ($is_new_environment) {
-                $environment = Project::where('uuid', request()->query('project'))->first()->environments->where('name', request()->query('name'))->first();
-                if (!$environment) {
-                    $environment = Environment::create([
-                        'name' => request()->query('name') ?? generate_random_name(),
-                        'project_id' => Project::where('uuid', request()->query('project'))->first()->id,
-                    ]);
-                }
-                return response()->json([
-                    'environment_name' => $environment->name
-                ]);
-            }
-            return response()->json([
-                'magic' => true,
-            ]);
-        } catch (\Throwable $e) {
-            return general_error_handler($e, isJson: true);
-        }
-    });
+    //         if ($is_new_project) {
+    //             $project = Project::create([
+    //                 'name' => request()->query('name') ?? generate_random_name(),
+    //                 'team_id' => $id,
+    //             ]);
+    //             return response()->json([
+    //                 'project_uuid' => $project->uuid
+    //             ]);
+    //         }
+    //         if ($is_new_environment) {
+    //             $environment = Project::where('uuid', request()->query('project'))->first()->environments->where('name', request()->query('name'))->first();
+    //             if (!$environment) {
+    //                 $environment = Environment::create([
+    //                     'name' => request()->query('name') ?? generate_random_name(),
+    //                     'project_id' => Project::where('uuid', request()->query('project'))->first()->id,
+    //                 ]);
+    //             }
+    //             return response()->json([
+    //                 'environment_name' => $environment->name
+    //             ]);
+    //         }
+    //         return response()->json([
+    //             'magic' => true,
+    //         ]);
+    //     } catch (\Throwable $e) {
+    //         return general_error_handler($e, isJson: true);
+    //     }
+    // });
     Route::get('/', function () {
         $id = session('currentTeam')->id;
         $projects = Project::where('team_id', $id)->get();