This commit is contained in:
Andras Bacsai 2023-06-05 13:50:34 +02:00
parent 6b82a9ef11
commit 6a599c53d7
10 changed files with 162 additions and 101 deletions

View File

@ -22,6 +22,7 @@ class GithubPrivateRepository extends Component
public $type; public $type;
public int $selected_repository_id; public int $selected_repository_id;
public int $selected_github_app_id;
public string $selected_repository_owner; public string $selected_repository_owner;
public string $selected_repository_repo; public string $selected_repository_repo;
@ -37,6 +38,10 @@ class GithubPrivateRepository extends Component
public $branches; public $branches;
public int $total_branches_count = 0; public int $total_branches_count = 0;
public int $port = 3000;
public bool $is_static = false;
public string|null $publish_directory = null;
protected function loadRepositoryByPage() protected function loadRepositoryByPage()
{ {
$response = Http::withToken($this->token)->get("{$this->github_app->api_url}/installation/repositories?per_page=100&page={$this->page}"); $response = Http::withToken($this->token)->get("{$this->github_app->api_url}/installation/repositories?per_page=100&page={$this->page}");
@ -67,6 +72,7 @@ public function loadRepositories($github_app_id)
{ {
$this->repositories = collect(); $this->repositories = collect();
$this->page = 1; $this->page = 1;
$this->selected_github_app_id = $github_app_id;
$this->github_app = GithubApp::where('id', $github_app_id)->first(); $this->github_app = GithubApp::where('id', $github_app_id)->first();
$this->token = generate_github_installation_token($this->github_app); $this->token = generate_github_installation_token($this->github_app);
$this->loadRepositoryByPage(); $this->loadRepositoryByPage();
@ -110,28 +116,42 @@ public function submit()
$environment = $project->load(['environments'])->environments->where('name', $this->parameters['environment_name'])->first(); $environment = $project->load(['environments'])->environments->where('name', $this->parameters['environment_name'])->first();
$application = Application::create([ $application = Application::create([
'name' => generate_random_name(), 'name' => generate_application_name($this->selected_repository_owner . '/' . $this->selected_repository_repo, $this->selected_branch_name),
'repository_project_id' => $this->selected_repository_id, 'repository_project_id' => $this->selected_repository_id,
'git_repository' => "{$this->selected_repository_owner}/{$this->selected_repository_repo}", 'git_repository' => "{$this->selected_repository_owner}/{$this->selected_repository_repo}",
'git_branch' => $this->selected_branch_name, 'git_branch' => $this->selected_branch_name,
'build_pack' => 'nixpacks', 'build_pack' => 'nixpacks',
'ports_exposes' => '3000', 'ports_exposes' => $this->port,
'publish_directory' => $this->publish_directory,
'environment_id' => $environment->id, 'environment_id' => $environment->id,
'destination_id' => $destination->id, 'destination_id' => $destination->id,
'destination_type' => $destination_class, 'destination_type' => $destination_class,
'source_id' => $this->github_app->id, 'source_id' => $this->github_app->id,
'source_type' => GithubApp::class, 'source_type' => $this->github_app->getMorphClass()
]); ]);
$application->settings->is_static = $this->is_static;
$application->settings->save();
redirect()->route('project.application.configuration', [ redirect()->route('project.application.configuration', [
'application_uuid' => $application->uuid, 'application_uuid' => $application->uuid,
'environment_name' => $environment->name,
'project_uuid' => $project->uuid, 'project_uuid' => $project->uuid,
'environment_name' => $environment->name
]); ]);
} catch (\Exception $e) { } catch (\Exception $e) {
return general_error_handler($e, $this); return general_error_handler($e, $this);
} }
} }
public function instantSave()
{
if ($this->is_static) {
$this->port = 80;
$this->publish_directory = '/dist';
} else {
$this->port = 3000;
$this->publish_directory = null;
}
$this->emit('saved', 'Application settings updated!');
}
public function mount() public function mount()
{ {
$this->parameters = get_parameters(); $this->parameters = get_parameters();

View File

@ -19,5 +19,6 @@
"input.password.again": "Password again", "input.password.again": "Password again",
"input.code": "One-time code", "input.code": "One-time code",
"input.recovery_code": "Recovery code", "input.recovery_code": "Recovery code",
"button.save": "Save" "button.save": "Save",
"repository.url": "<span class='text-helper'>Examples</span><br>https://github.com/coollabsio/coolify-examples <span class='text-helper'>main</span> branch will be selected<br><br>https://github.com/coollabsio/coolify-examples/tree/nodejs-fastify <span class='text-helper'>nodejs-fastify</span> branch will be selected"
} }

View File

@ -34,7 +34,7 @@ textarea {
@apply textarea placeholder:text-neutral-700 text-white rounded-none; @apply textarea placeholder:text-neutral-700 text-white rounded-none;
} }
select { select {
@apply select select-sm disabled:bg-coolgray-200 border-none disabled:opacity-50 font-normal placeholder:text-neutral-700 text-white rounded-none; @apply select select-sm text-sm disabled:bg-coolgray-200 border-none disabled:opacity-50 font-normal placeholder:text-neutral-700 text-white rounded-none;
} }
.breadcrumbs > ul > li::before { .breadcrumbs > ul > li::before {
@apply text-warning opacity-100; @apply text-warning opacity-100;
@ -43,9 +43,6 @@ .loading {
@apply w-4 text-warning; @apply w-4 text-warning;
} }
button[type="button"] {
@apply hover:bg-coolgray-400 btn h-7 btn-xs border-none bg-coolgray-200 no-animation normal-case text-white rounded;
}
button[type="submit"] { button[type="submit"] {
@apply hover:bg-coolgray-400 btn h-7 btn-xs border-none bg-coolgray-200 no-animation normal-case text-white rounded; @apply hover:bg-coolgray-400 btn h-7 btn-xs border-none bg-coolgray-200 no-animation normal-case text-white rounded;
} }

View File

@ -22,7 +22,9 @@
{{ $slot }} {{ $slot }}
</button> </button>
@elseif($type === 'button') @elseif($type === 'button')
<button {{ $attributes }} @if ($disabled !== null) disabled @endif type="button" <button
{{ $attributes->class(['btn btn-xs border-none no-animation normal-case text-white rounded', 'hover:bg-coolgray-400 bg-coolgray-200 h-7' => !$attributes->has('class')]) }}
@if ($disabled !== null) disabled @endif type="button"
@isset($confirm) @isset($confirm)
x-on:click="toggleConfirmModal('{{ $confirm }}', '{{ explode('(', $confirmAction)[0] }}')" x-on:click="toggleConfirmModal('{{ $confirm }}', '{{ explode('(', $confirmAction)[0] }}')"
@endisset @endisset

View File

@ -1,10 +1,11 @@
@props([ @props([
'id' => null, 'id' => null,
'label' => null, 'label' => null,
'helper' => $attributes->has('helper'),
'required' => false, 'required' => false,
]) ])
<span {{ $attributes->merge(['class' => 'flex flex-col']) }}> <div {{ $attributes->merge(['class' => 'flex flex-col']) }}>
<label class="label" for={{ $id }}> <label class="label" for={{ $id }}>
<span class="label-text"> <span class="label-text">
@if ($label) @if ($label)
@ -15,6 +16,23 @@
@if ($required) @if ($required)
<span class="text-warning">*</span> <span class="text-warning">*</span>
@endif @endif
@if ($helper)
<div class="-mb-1 dropdown dropdown-right dropdown-hover">
<label tabindex="0" class="cursor-pointer text-warning">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
class="w-4 h-4 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</label>
<div tabindex="0"
class="border rounded shadow border-coolgray-400 card compact dropdown-content bg-coolgray-200 w-96">
<div class="card-body">
{!! $helper !!}
</div>
</div>
</div>
@endif
</span> </span>
</label> </label>
<select {{ $attributes }} wire:model.defer={{ $id }}> <select {{ $attributes }} wire:model.defer={{ $id }}>
@ -24,4 +42,4 @@
@error($id) @error($id)
<div class="text-red-500">{{ $message }}</div> <div class="text-red-500">{{ $message }}</div>
@enderror @enderror
</span> </div>

View File

@ -603,7 +603,7 @@ class="magic-item">
`/project/${this.selectedProject}/${this.selectedEnvironment}/new?type=public&destination=${this.selectedDestination}` `/project/${this.selectedProject}/${this.selectedEnvironment}/new?type=public&destination=${this.selectedDestination}`
} else if (this.selectedAction === 1) { } else if (this.selectedAction === 1) {
window.location = window.location =
`/project/${this.selectedProject}/${this.selectedEnvironment}/new?type=private-gh-Apps&destination=${this.selectedDestination}` `/project/${this.selectedProject}/${this.selectedEnvironment}/new?type=private-gh-app&destination=${this.selectedDestination}`
} else if (this.selectedAction === 2) { } else if (this.selectedAction === 2) {
window.location = window.location =
`/project/${this.selectedProject}/${this.selectedEnvironment}/new?type=private-deploy-key&destination=${this.selectedDestination}` `/project/${this.selectedProject}/${this.selectedEnvironment}/new?type=private-deploy-key&destination=${this.selectedDestination}`

View File

@ -7,11 +7,12 @@
<div class="relative text-center rounded modal-box bg-coolgray-100"> <div class="relative text-center rounded modal-box bg-coolgray-100">
<div class="pb-8 text-base text-white">{{ $message }}</div> <div class="pb-8 text-base text-white">{{ $message }}</div>
<div class="flex justify-center gap-4 text-xs"> <div class="flex justify-center gap-4 text-xs">
<x-forms.button class="w-32" isWarning wire:click='{{ $action }}' <x-forms.button class="w-32 hover:bg-coolgray-400 bg-coolgray-200 h-7" isWarning
x-on:click="{{ $show }} = false"> wire:click='{{ $action }}' x-on:click="{{ $show }} = false">
Yes Yes
</x-forms.button> </x-forms.button>
<x-forms.button class="w-32" x-on:click="{{ $show }} = false">No</x-forms.button> <x-forms.button class="w-32 hover:bg-coolgray-400 bg-coolgray-200 h-7"
x-on:click="{{ $show }} = false">No</x-forms.button>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,19 +1,19 @@
<div> <div>
<div> <h1>New Application</h1>
<h1>Select a private key</h1> <div class="pb-4 text-sm">Deploy any public or private git repositories through a Deploy Key.</div>
<h3 class="py-2">Select a private key</h3>
@foreach ($private_keys as $key) @foreach ($private_keys as $key)
@if ($private_key_id == $key->id) @if ($private_key_id == $key->id)
<x-forms.button class="bg-blue-500" wire:click.defer="setPrivateKey('{{ $key->id }}')"> <x-forms.button class="bg-coollabs hover:bg-coollabs-100"
wire:click.defer="setPrivateKey('{{ $key->id }}')">
{{ $key->name }}</x-forms.button> {{ $key->name }}</x-forms.button>
@else @else
<x-forms.button wire:click.defer="setPrivateKey('{{ $key->id }}')">{{ $key->name }} <x-forms.button wire:click.defer="setPrivateKey('{{ $key->id }}')">{{ $key->name }}
</x-forms.button> </x-forms.button>
@endif @endif
@endforeach @endforeach
</div>
@isset($private_key_id) @isset($private_key_id)
<h1>Choose a repository</h1> <form class="pt-6" wire:submit.prevent='submit'>
<form wire:submit.prevent='submit'>
<div class="flex items-end gap-2 pb-2"> <div class="flex items-end gap-2 pb-2">
<x-forms.input class="w-96" id="repository_url" label="Repository URL" /> <x-forms.input class="w-96" id="repository_url" label="Repository URL" />
@if ($is_static) @if ($is_static)
@ -21,10 +21,10 @@
@else @else
<x-forms.input type="number" id="port" label="Port" :readonly="$is_static" /> <x-forms.input type="number" id="port" label="Port" :readonly="$is_static" />
@endif @endif
<x-forms.input instantSave type="checkbox" id="is_static" label="Static Site?" /> <x-forms.checkbox instantSave id="is_static" label="Static Site?" />
</div> </div>
<x-forms.button type="submit"> <x-forms.button type="submit">
Submit Add New Application
</x-forms.button> </x-forms.button>
</form> </form>
@endisset @endisset

View File

@ -1,45 +1,75 @@
<div> <div>
<h1>New Application</h1>
<div class="pb-4 text-sm">Deploy any public or private git repositories through a GitHub App.</div>
@if ($github_apps->count() > 0) @if ($github_apps->count() > 0)
<h1>Choose a GitHub App</h1> <form class="flex flex-col" wire:submit.prevent='submit'>
<h3 class="py-2">Select a GitHub App</h3>
@foreach ($github_apps as $ghapp) @foreach ($github_apps as $ghapp)
<x-forms.button wire:key="{{ $ghapp->id }}" wire:click="loadRepositories({{ $ghapp->id }})"> @if ($selected_github_app_id == $ghapp->id)
<x-forms.button class="bg-coollabs hover:bg-coollabs-100 h-7" wire:key="{{ $ghapp->id }}"
wire:click.prevent="loadRepositories({{ $ghapp->id }})">
{{ $ghapp->name }} {{ $ghapp->name }}
</x-forms.button> </x-forms.button>
@else
<x-forms.button wire:key="{{ $ghapp->id }}"
wire:click.prevent="loadRepositories({{ $ghapp->id }})">
{{ $ghapp->name }}
</x-forms.button>
@endif
@endforeach @endforeach
<div> <div class="flex flex-col">
@if ($repositories->count() > 0) @if ($repositories->count() > 0)
<h3>Choose a Repository</h3> <div class="flex items-end gap-2">
<select wire:model.defer="selected_repository_id"> <x-forms.select class="w-full" label="Repository URL" helper="{!! __('repository.url') !!}"
wire:model.defer="selected_repository_id">
@foreach ($repositories as $repo) @foreach ($repositories as $repo)
@if ($loop->first) @if ($loop->first)
<option selected value="{{ data_get($repo, 'id') }}">{{ data_get($repo, 'name') }}</option> <option selected value="{{ data_get($repo, 'id') }}">{{ data_get($repo, 'name') }}
</option>
@else @else
<option value="{{ data_get($repo, 'id') }}">{{ data_get($repo, 'name') }}</option> <option value="{{ data_get($repo, 'id') }}">{{ data_get($repo, 'name') }}</option>
@endif @endif
@endforeach @endforeach
</select> </x-forms.select>
<x-forms.button wire:click="loadBranches">Select Repository</x-forms.button> <x-forms.button class="h-8 hover:bg-coolgray-400 bg-coolgray-200"
wire:click.prevent="loadBranches"> Check
repository</x-forms.button>
</div>
@endif @endif
</div> </div>
<div> <div>
@if ($branches->count() > 0) @if ($branches->count() > 0)
<h3>Choose a Branch</h3> <div class="flex gap-2">
<select wire:model.defer="selected_branch_name"> <x-forms.select id="selected_branch_name" label="Branch">
<option disabled>Choose a branch</option> <option value="default" disabled selected>Select a branch</option>
@foreach ($branches as $branch) @foreach ($branches as $branch)
@if ($loop->first) @if ($loop->first)
<option selected value="{{ data_get($branch, 'name') }}">{{ data_get($branch, 'name') }} <option selected value="{{ data_get($branch, 'name') }}">
{{ data_get($branch, 'name') }}
</option> </option>
@else @else
<option value="{{ data_get($branch, 'name') }}">{{ data_get($branch, 'name') }}</option> <option value="{{ data_get($branch, 'name') }}">{{ data_get($branch, 'name') }}
</option>
@endif @endif
@endforeach @endforeach
</select> </x-forms.select>
<x-forms.button wire:click="submit">Save</x-forms.button> @if ($is_static)
<x-forms.input class="h-8" id="publish_directory" label="Publish Directory"
helper="If there is a build process involved (like Svelte, React, Next, etc..), please specify the output directory for the build assets." />
@else
<x-forms.input class="h-8" type="number" id="port" label="Port" :readonly="$is_static"
helper="The port your application listens on." />
@endif @endif
</div> </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">
Save New Application
</x-forms.button>
@endif
</div>
</form>
@else @else
Add new github app Add new github app
@endif @endif
</div> </div>

View File

@ -1,47 +1,39 @@
<div> <div>
<h1>Enter a public repository URL</h1> <h1>New Application</h1>
<div class="pb-4 text-sm">Deploy any public git repositories.</div>
<form class="flex flex-col gap-2" wire:submit.prevent='submit'> <form class="flex flex-col gap-2" wire:submit.prevent='submit'>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flex items-end gap-2"> <div class="flex items-end gap-2">
<x-forms.input wire:keypress.enter='load_branches' id="repository_url" label="Repository URL" <x-forms.input wire:keypress.enter='load_branches' id="repository_url" label="Repository URL"
helper="<span class='text-helper'>Example</span>https://github.com/coollabsio/coolify-examples => main branch will be selected<br>https://github.com/coollabsio/coolify-examples/tree/nodejs-fastify => nodejs-fastify branch will be selected" /> helper="{!! __('repository.url') !!}" />
<x-forms.button wire:click.prevent="load_branches"> <x-forms.button wire:click.prevent="load_branches">
Check repository Check repository
</x-forms.button> </x-forms.button>
</div> </div>
@if (count($branches) > 0) @if (count($branches) > 0)
<div class="flex gap-2">
<x-forms.select id="selected_branch" label="Branch"> <x-forms.select id="selected_branch" label="Branch">
<option value="default" disabled selected>Select a branch</option> <option value="default" disabled selected>Select a branch</option>
@foreach ($branches as $branch) @foreach ($branches as $branch)
<option value="{{ $branch }}">{{ $branch }}</option> <option value="{{ $branch }}">{{ $branch }}</option>
@endforeach @endforeach
</x-forms.select> </x-forms.select>
@else
<x-forms.select id="branch" label="Branch" disabled>
<option value="default" selected>Set a repository first</option>
</x-forms.select>
@endif
</div>
@if ($is_static) @if ($is_static)
<x-forms.input id="publish_directory" label="Publish Directory" <x-forms.input class="h-8" id="publish_directory" label="Publish Directory"
helper="If there is a build process involved (like Svelte, React, Next, etc..), please specify the output directory for the build assets." /> helper="If there is a build process involved (like Svelte, React, Next, etc..), please specify the output directory for the build assets." />
@else @else
<x-forms.input type="number" id="port" label="Port" :readonly="$is_static" <x-forms.input class="h-8" type="number" id="port" label="Port" :readonly="$is_static"
helper="The port your application listens on." /> helper="The port your application listens on." />
@endif @endif
</div> </div>
<x-forms.checkbox instantSave id="is_static" label="Is it a static site?" /> <x-forms.checkbox instantSave id="is_static" label="Is it a static site?"
@if (count($branches) > 0) 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 type="submit"> <x-forms.button class="mt-8" type="submit">
Save Save New Application
</x-forms.button>
@else
<x-forms.button disabled type="submit">
Save
</x-forms.button> </x-forms.button>
@endif @endif
</div>
</div>
</form> </form>
</div> </div>