feat(github-source): Enhance GitHub App configuration with manual and private key support

- Add support for manual GitHub App configuration
- Introduce private key selection for GitHub Apps
- Enable editing of previously disabled GitHub App fields
- Add error handling for permission checks
- Implement a manual GitHub App creation method
This commit is contained in:
Andras Bacsai
2025-03-11 14:15:22 +01:00
parent 1160b3312e
commit f73c74bd44
2 changed files with 162 additions and 129 deletions

View File

@@ -37,6 +37,8 @@ class Change extends Component
public $applications; public $applications;
public $privateKeys;
protected $rules = [ protected $rules = [
'github_app.name' => 'required|string', 'github_app.name' => 'required|string',
'github_app.organization' => 'nullable|string', 'github_app.organization' => 'nullable|string',
@@ -54,6 +56,7 @@ class Change extends Component
'github_app.metadata' => 'nullable|string', 'github_app.metadata' => 'nullable|string',
'github_app.pull_requests' => 'nullable|string', 'github_app.pull_requests' => 'nullable|string',
'github_app.administration' => 'nullable|string', 'github_app.administration' => 'nullable|string',
'github_app.private_key_id' => 'required|int',
]; ];
public function boot() public function boot()
@@ -65,9 +68,13 @@ class Change extends Component
public function checkPermissions() public function checkPermissions()
{ {
GithubAppPermissionJob::dispatchSync($this->github_app); try {
$this->github_app->refresh()->makeVisible('client_secret')->makeVisible('webhook_secret'); GithubAppPermissionJob::dispatchSync($this->github_app);
$this->dispatch('success', 'Github App permissions updated.'); $this->github_app->refresh()->makeVisible('client_secret')->makeVisible('webhook_secret');
$this->dispatch('success', 'Github App permissions updated.');
} catch (\Throwable $e) {
return handleError($e, $this);
}
} }
// public function check() // public function check()
@@ -109,6 +116,7 @@ class Change extends Component
$github_app_uuid = request()->github_app_uuid; $github_app_uuid = request()->github_app_uuid;
$this->github_app = GithubApp::ownedByCurrentTeam()->whereUuid($github_app_uuid)->firstOrFail(); $this->github_app = GithubApp::ownedByCurrentTeam()->whereUuid($github_app_uuid)->firstOrFail();
$this->github_app->makeVisible(['client_secret', 'webhook_secret']); $this->github_app->makeVisible(['client_secret', 'webhook_secret']);
$this->privateKeys = PrivateKey::ownedByCurrentTeam()->get();
$this->applications = $this->github_app->applications; $this->applications = $this->github_app->applications;
$settings = instanceSettings(); $settings = instanceSettings();
@@ -243,6 +251,7 @@ class Change extends Component
'github_app.client_secret' => 'required|string', 'github_app.client_secret' => 'required|string',
'github_app.webhook_secret' => 'required|string', 'github_app.webhook_secret' => 'required|string',
'github_app.is_system_wide' => 'required|bool', 'github_app.is_system_wide' => 'required|bool',
'github_app.private_key_id' => 'required|int',
]); ]);
$this->github_app->save(); $this->github_app->save();
$this->dispatch('success', 'Github App updated.'); $this->dispatch('success', 'Github App updated.');
@@ -251,6 +260,15 @@ class Change extends Component
} }
} }
public function createGithubAppManually()
{
$this->github_app->makeVisible('client_secret')->makeVisible('webhook_secret');
$this->github_app->app_id = '1234567890';
$this->github_app->installation_id = '1234567890';
$this->github_app->save();
$this->dispatch('success', 'Github App updated.');
}
public function instantSave() public function instantSave()
{ {
try { try {

View File

@@ -27,6 +27,7 @@
confirmationText="{{ data_get($github_app, 'name') }}" :confirmWithPassword="false" confirmationText="{{ data_get($github_app, 'name') }}" :confirmWithPassword="false"
step2ButtonText="Permanently Delete" /> step2ButtonText="Permanently Delete" />
@endif @endif
</div> </div>
</div> </div>
<div class="subtitle">Your Private GitHub App for private repositories.</div> <div class="subtitle">Your Private GitHub App for private repositories.</div>
@@ -46,7 +47,7 @@
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<div class="flex gap-2"> <div class="flex gap-2">
<div class="flex items-end gap-2 w-full"> <div class="flex items-end gap-2 w-full">
<x-forms.input id="github_app.name" label="App Name" disabled /> <x-forms.input id="github_app.name" label="App Name" />
<x-forms.button wire:click.prevent="updateGithubAppName" class="bg-coollabs"> <x-forms.button wire:click.prevent="updateGithubAppName" class="bg-coollabs">
Sync Name Sync Name
</x-forms.button> </x-forms.button>
@@ -57,7 +58,7 @@
</x-forms.button> </x-forms.button>
</a> </a>
</div> </div>
<x-forms.input id="github_app.organization" label="Organization" disabled <x-forms.input id="github_app.organization" label="Organization"
placeholder="If empty, personal user will be used" /> placeholder="If empty, personal user will be used" />
</div> </div>
@if (!isCloud()) @if (!isCloud())
@@ -68,27 +69,32 @@
</div> </div>
@endif @endif
<div class="flex gap-2"> <div class="flex gap-2">
<x-forms.input id="github_app.html_url" label="HTML Url" disabled /> <x-forms.input id="github_app.html_url" label="HTML Url" />
<x-forms.input id="github_app.api_url" label="API Url" disabled /> <x-forms.input id="github_app.api_url" label="API Url" />
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
@if ($github_app->html_url === 'https://github.com') <x-forms.input id="github_app.custom_user" label="User" required />
<x-forms.input id="github_app.custom_user" label="User" disabled /> <x-forms.input type="number" id="github_app.custom_port" label="Port" required />
<x-forms.input type="number" id="github_app.custom_port" label="Port" disabled />
@else
<x-forms.input id="github_app.custom_user" label="User" required />
<x-forms.input type="number" id="github_app.custom_port" label="Port" required />
@endif
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<x-forms.input type="number" id="github_app.app_id" label="App Id" disabled /> <x-forms.input type="number" id="github_app.app_id" label="App Id" required />
<x-forms.input type="number" id="github_app.installation_id" label="Installation Id" <x-forms.input type="number" id="github_app.installation_id" label="Installation Id"
disabled /> required />
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<x-forms.input id="github_app.client_id" label="Client Id" type="password" disabled /> <x-forms.input id="github_app.client_id" label="Client Id" type="password" required />
<x-forms.input id="github_app.client_secret" label="Client Secret" type="password" /> <x-forms.input id="github_app.client_secret" label="Client Secret" type="password" required />
<x-forms.input id="github_app.webhook_secret" label="Webhook Secret" type="password" /> <x-forms.input id="github_app.webhook_secret" label="Webhook Secret" type="password" required />
</div>
<div class="flex gap-2">
<x-forms.select id="github_app.private_key_id" label="Private Key" required>
@if (blank($github_app->private_key_id))
<option value="0" selected>Select a private key</option>
@endif
@foreach ($privateKeys as $privateKey)
<option value="{{ $privateKey->id }}">{{ $privateKey->name }}</option>
@endforeach
</x-forms.select>
</div> </div>
<div class="flex items-end gap-2 "> <div class="flex items-end gap-2 ">
<h2 class="pt-4">Permissions</h2> <h2 class="pt-4">Permissions</h2>
@@ -182,120 +188,129 @@
shortConfirmationLabel="GitHub App Name" :confirmWithPassword="false" step2ButtonText="Permanently Delete" /> shortConfirmationLabel="GitHub App Name" :confirmWithPassword="false" step2ButtonText="Permanently Delete" />
</div> </div>
</div> </div>
<div class=" pb-5 rounded alert-error"> <div class="flex flex-col gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none" <h3>Manual Installation</h3>
viewBox="0 0 24 24"> <div class="flex gap-2 items-center">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" If you want to fill the form manually, you can continue below. Only for advanced users.
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> <x-forms.button wire:click.prevent="createGithubAppManually">
</svg> Continue
<span>You must complete this step before you can use this source!</span> </x-forms.button>
</div> </div>
<div class="flex flex-col"> <h3>Automated Installation</h3>
<div class="pb-10"> <div class=" pb-5 rounded alert-error">
@if (!isCloud() || isDev()) <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
<div class="flex items-end gap-2"> viewBox="0 0 24 24">
<x-forms.select wire:model.live='webhook_endpoint' label="Webhook Endpoint" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
helper="All Git webhooks will be sent to this endpoint. <br><br>If you would like to use domain instead of IP address, set your Coolify instance's FQDN in the Settings menu."> d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
@if ($ipv4) </svg>
<option value="{{ $ipv4 }}">Use {{ $ipv4 }}</option> <span>You must complete this step before you can use this source!</span>
@endif </div>
@if ($ipv6) <div class="flex flex-col">
<option value="{{ $ipv6 }}">Use {{ $ipv6 }}</option> <div class="pb-10">
@endif @if (!isCloud() || isDev())
@if ($fqdn) <div class="flex items-end gap-2">
<option value="{{ $fqdn }}">Use {{ $fqdn }}</option> <x-forms.select wire:model.live='webhook_endpoint' label="Webhook Endpoint"
@endif helper="All Git webhooks will be sent to this endpoint. <br><br>If you would like to use domain instead of IP address, set your Coolify instance's FQDN in the Settings menu.">
@if (config('app.url')) @if ($ipv4)
<option value="{{ config('app.url') }}">Use {{ config('app.url') }}</option> <option value="{{ $ipv4 }}">Use {{ $ipv4 }}</option>
@endif @endif
</x-forms.select> @if ($ipv6)
<x-forms.button isHighlighted <option value="{{ $ipv6 }}">Use {{ $ipv6 }}</option>
x-on:click.prevent="createGithubApp('{{ $webhook_endpoint }}','{{ $preview_deployment_permissions }}',{{ $administration }})"> @endif
Register Now @if ($fqdn)
</x-forms.button> <option value="{{ $fqdn }}">Use {{ $fqdn }}</option>
</div> @endif
@else @if (config('app.url'))
<div class="flex gap-2"> <option value="{{ config('app.url') }}">Use {{ config('app.url') }}</option>
<h2>Register a GitHub App</h2> @endif
<x-forms.button isHighlighted </x-forms.select>
x-on:click.prevent="createGithubApp('{{ $webhook_endpoint }}','{{ $preview_deployment_permissions }}',{{ $administration }})"> <x-forms.button isHighlighted
Register Now x-on:click.prevent="createGithubApp('{{ $webhook_endpoint }}','{{ $preview_deployment_permissions }}',{{ $administration }})">
</x-forms.button> Register Now
</div> </x-forms.button>
<div>You need to register a GitHub App before using this source.</div> </div>
@endif @else
<div class="flex gap-2">
<h2>Register a GitHub App</h2>
<x-forms.button isHighlighted
x-on:click.prevent="createGithubApp('{{ $webhook_endpoint }}','{{ $preview_deployment_permissions }}',{{ $administration }})">
Register Now
</x-forms.button>
</div>
<div>You need to register a GitHub App before using this source.</div>
@endif
<div class="flex flex-col gap-2 pt-4 w-96"> <div class="flex flex-col gap-2 pt-4 w-96">
<x-forms.checkbox disabled instantSave id="default_permissions" label="Mandatory" <x-forms.checkbox disabled instantSave id="default_permissions" label="Mandatory"
helper="Contents: read<br>Metadata: read<br>Email: read" /> helper="Contents: read<br>Metadata: read<br>Email: read" />
<x-forms.checkbox instantSave id="preview_deployment_permissions" label="Preview Deployments " <x-forms.checkbox instantSave id="preview_deployment_permissions" label="Preview Deployments "
helper="Necessary for updating pull requests with useful comments (deployment status, links, etc.)<br><br>Pull Request: read & write" /> helper="Necessary for updating pull requests with useful comments (deployment status, links, etc.)<br><br>Pull Request: read & write" />
{{-- <x-forms.checkbox instantSave id="administration" label="Administration (for Github Runners)" {{-- <x-forms.checkbox instantSave id="administration" label="Administration (for Github Runners)"
helper="Necessary for adding Github Runners to repositories.<br><br>Administration: read & write" /> --}} helper="Necessary for adding Github Runners to repositories.<br><br>Administration: read & write" /> --}}
</div>
</div> </div>
</div> </div>
</div> <script>
<script> function createGithubApp(webhook_endpoint, preview_deployment_permissions, administration) {
function createGithubApp(webhook_endpoint, preview_deployment_permissions, administration) { const {
const { organization,
organization, uuid,
uuid, html_url
html_url } = @json($github_app);
} = @json($github_app); if (!webhook_endpoint) {
if (!webhook_endpoint) { alert('Please select a webhook endpoint.');
alert('Please select a webhook endpoint.'); return;
return; }
let baseUrl = webhook_endpoint;
const name = @js($name);
const isDev = @js(config('app.env')) ===
'local';
const devWebhook = @js(config('constants.webhooks.dev_webhook'));
if (isDev && devWebhook) {
baseUrl = devWebhook;
}
const webhookBaseUrl = `${baseUrl}/webhooks`;
const path = organization ? `organizations/${organization}/settings/apps/new` : 'settings/apps/new';
const default_permissions = {
contents: 'read',
metadata: 'read',
emails: 'read',
administration: 'read'
};
if (preview_deployment_permissions) {
default_permissions.pull_requests = 'write';
}
if (administration) {
default_permissions.administration = 'write';
}
const data = {
name,
url: baseUrl,
hook_attributes: {
url: `${webhookBaseUrl}/source/github/events`,
active: true,
},
redirect_url: `${webhookBaseUrl}/source/github/redirect`,
callback_urls: [`${baseUrl}/login/github/app`],
public: false,
request_oauth_on_install: false,
setup_url: `${webhookBaseUrl}/source/github/install?source=${uuid}`,
setup_on_update: true,
default_permissions,
default_events: ['pull_request', 'push']
};
const form = document.createElement('form');
form.setAttribute('method', 'post');
form.setAttribute('action', `${html_url}/${path}?state=${uuid}`);
const input = document.createElement('input');
input.setAttribute('id', 'manifest');
input.setAttribute('name', 'manifest');
input.setAttribute('type', 'hidden');
input.setAttribute('value', JSON.stringify(data));
form.appendChild(input);
document.getElementsByTagName('body')[0].appendChild(form);
form.submit();
} }
let baseUrl = webhook_endpoint; </script>
const name = @js($name);
const isDev = @js(config('app.env')) ===
'local';
const devWebhook = @js(config('constants.webhooks.dev_webhook'));
if (isDev && devWebhook) {
baseUrl = devWebhook;
}
const webhookBaseUrl = `${baseUrl}/webhooks`;
const path = organization ? `organizations/${organization}/settings/apps/new` : 'settings/apps/new';
const default_permissions = {
contents: 'read',
metadata: 'read',
emails: 'read',
administration: 'read'
};
if (preview_deployment_permissions) {
default_permissions.pull_requests = 'write';
}
if (administration) {
default_permissions.administration = 'write';
}
const data = {
name,
url: baseUrl,
hook_attributes: {
url: `${webhookBaseUrl}/source/github/events`,
active: true,
},
redirect_url: `${webhookBaseUrl}/source/github/redirect`,
callback_urls: [`${baseUrl}/login/github/app`],
public: false,
request_oauth_on_install: false,
setup_url: `${webhookBaseUrl}/source/github/install?source=${uuid}`,
setup_on_update: true,
default_permissions,
default_events: ['pull_request', 'push']
};
const form = document.createElement('form');
form.setAttribute('method', 'post');
form.setAttribute('action', `${html_url}/${path}?state=${uuid}`);
const input = document.createElement('input');
input.setAttribute('id', 'manifest');
input.setAttribute('name', 'manifest');
input.setAttribute('type', 'hidden');
input.setAttribute('value', JSON.stringify(data));
form.appendChild(input);
document.getElementsByTagName('body')[0].appendChild(form);
form.submit();
}
</script>
@endif @endif
</div> </div>