fix: GitHub source creation and configuration issues

Fixed multiple issues with GitHub App source creation and management:

1. **Fixed null property assignment error on component mount**
   - Changed property types to nullable in Change component (appId, installationId, clientId, etc.)
   - Updated validation rules to allow nullable values
   - Allows mounting component with newly created GitHub Apps that don't have these fields set yet

2. **Fixed Livewire morphing error on manual creation**
   - Modified createGithubAppManually() to redirect after saving
   - Prevents "Cannot read properties of null" error when view structure changes
   - Fields now properly populated after manual creation without requiring page refresh

3. **Fixed is_system_wide not being saved on creation**
   - Removed backwards logic that only saved is_system_wide on cloud instances
   - Added is_system_wide to GithubApp model casts for proper boolean handling
   - System-wide checkbox now works correctly on self-hosted instances

4. **Fixed misleading preview deployment checkbox**
   - Removed instantSave attribute from permission checkboxes in unconfigured state
   - These are configuration options for GitHub App creation, not database fields
   - Prevents "GitHub App updated" success message when nothing was actually saved

5. **Added validation for Refetch Permissions button**
   - Validates App ID and Private Key are set before attempting to fetch
   - Shows clear error messages: "Cannot fetch permissions. Please set the following required fields first: App ID, Private Key"
   - Prevents crash when private key is null or invalid

6. **Better error handling for unsupported private key formats**
   - Detects OpenSSH format keys vs RSA PEM format
   - Shows helpful message: "Please use an RSA private key in PEM format (BEGIN RSA PRIVATE KEY). OpenSSH format keys are not supported."
   - GitHub Apps require RSA PEM format, not OpenSSH format

7. **Made GitHub App view mobile responsive**
   - Updated all flex layouts to stack vertically on mobile (flex-col sm:flex-row)
   - Form fields, buttons, and sections now properly responsive
   - No more cut-off fields on small screens

Added comprehensive test coverage:
- GithubSourceChangeTest.php with 7 tests
- GithubSourceCreateTest.php with 6 tests

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andras Bacsai 2025-10-25 10:49:09 +02:00
parent d73300e387
commit 06ee7d0132
6 changed files with 383 additions and 64 deletions

View file

@ -47,19 +47,19 @@ class Change extends Component
public int $customPort;
public int $appId;
public ?int $appId = null;
public int $installationId;
public ?int $installationId = null;
public string $clientId;
public ?string $clientId = null;
public string $clientSecret;
public ?string $clientSecret = null;
public string $webhookSecret;
public ?string $webhookSecret = null;
public bool $isSystemWide;
public int $privateKeyId;
public ?int $privateKeyId = null;
public ?string $contents = null;
@ -78,16 +78,16 @@ class Change extends Component
'htmlUrl' => 'required|string',
'customUser' => 'required|string',
'customPort' => 'required|int',
'appId' => 'required|int',
'installationId' => 'required|int',
'clientId' => 'required|string',
'clientSecret' => 'required|string',
'webhookSecret' => 'required|string',
'appId' => 'nullable|int',
'installationId' => 'nullable|int',
'clientId' => 'nullable|string',
'clientSecret' => 'nullable|string',
'webhookSecret' => 'nullable|string',
'isSystemWide' => 'required|bool',
'contents' => 'nullable|string',
'metadata' => 'nullable|string',
'pullRequests' => 'nullable|string',
'privateKeyId' => 'required|int',
'privateKeyId' => 'nullable|int',
];
public function boot()
@ -148,47 +148,48 @@ public function checkPermissions()
try {
$this->authorize('view', $this->github_app);
// Validate required fields before attempting to fetch permissions
$missingFields = [];
if (! $this->github_app->app_id) {
$missingFields[] = 'App ID';
}
if (! $this->github_app->private_key_id) {
$missingFields[] = 'Private Key';
}
if (! empty($missingFields)) {
$fieldsList = implode(', ', $missingFields);
$this->dispatch('error', "Cannot fetch permissions. Please set the following required fields first: {$fieldsList}");
return;
}
// Verify the private key exists and is accessible
if (! $this->github_app->privateKey) {
$this->dispatch('error', 'Private Key not found. Please select a valid private key.');
return;
}
GithubAppPermissionJob::dispatchSync($this->github_app);
$this->github_app->refresh()->makeVisible('client_secret')->makeVisible('webhook_secret');
$this->dispatch('success', 'Github App permissions updated.');
} catch (\Throwable $e) {
// Provide better error message for unsupported key formats
$errorMessage = $e->getMessage();
if (str_contains($errorMessage, 'DECODER routines::unsupported') ||
str_contains($errorMessage, 'parse your key')) {
$this->dispatch('error', 'The selected private key format is not supported for GitHub Apps. <br><br>Please use an RSA private key in PEM format (BEGIN RSA PRIVATE KEY). <br><br>OpenSSH format keys (BEGIN OPENSSH PRIVATE KEY) are not supported.');
return;
}
return handleError($e, $this);
}
}
// public function check()
// {
// Need administration:read:write permission
// https://docs.github.com/en/rest/actions/self-hosted-runners?apiVersion=2022-11-28#list-self-hosted-runners-for-a-repository
// $github_access_token = generateGithubInstallationToken($this->github_app);
// $repositories = Http::withToken($github_access_token)->get("{$this->github_app->api_url}/installation/repositories?per_page=100");
// $runners_by_repository = collect([]);
// $repositories = $repositories->json()['repositories'];
// foreach ($repositories as $repository) {
// $runners_downloads = Http::withToken($github_access_token)->get("{$this->github_app->api_url}/repos/{$repository['full_name']}/actions/runners/downloads");
// $runners = Http::withToken($github_access_token)->get("{$this->github_app->api_url}/repos/{$repository['full_name']}/actions/runners");
// $token = Http::withHeaders([
// 'Authorization' => "Bearer $github_access_token",
// 'Accept' => 'application/vnd.github+json'
// ])->withBody(null)->post("{$this->github_app->api_url}/repos/{$repository['full_name']}/actions/runners/registration-token");
// $token = $token->json();
// $remove_token = Http::withHeaders([
// 'Authorization' => "Bearer $github_access_token",
// 'Accept' => 'application/vnd.github+json'
// ])->withBody(null)->post("{$this->github_app->api_url}/repos/{$repository['full_name']}/actions/runners/remove-token");
// $remove_token = $remove_token->json();
// $runners_by_repository->put($repository['full_name'], [
// 'token' => $token,
// 'remove_token' => $remove_token,
// 'runners' => $runners->json(),
// 'runners_downloads' => $runners_downloads->json()
// ]);
// }
// }
public function mount()
{
try {
@ -343,7 +344,10 @@ public function createGithubAppManually()
$this->github_app->app_id = '1234567890';
$this->github_app->installation_id = '1234567890';
$this->github_app->save();
$this->dispatch('success', 'Github App updated.');
// Redirect to avoid Livewire morphing issues when view structure changes
return redirect()->route('source.github.show', ['github_app_uuid' => $this->github_app->uuid])
->with('success', 'Github App updated. You can now configure the details.');
}
public function instantSave()

View file

@ -50,11 +50,9 @@ public function createGitHubApp()
'html_url' => $this->html_url,
'custom_user' => $this->custom_user,
'custom_port' => $this->custom_port,
'is_system_wide' => $this->is_system_wide,
'team_id' => currentTeam()->id,
];
if (isCloud()) {
$payload['is_system_wide'] = $this->is_system_wide;
}
$github_app = GithubApp::create($payload);
if (session('from')) {
session(['from' => session('from') + ['source_id' => $github_app->id]]);

View file

@ -12,6 +12,7 @@ class GithubApp extends BaseModel
protected $casts = [
'is_public' => 'boolean',
'is_system_wide' => 'boolean',
'type' => 'string',
];

View file

@ -1,7 +1,7 @@
<div>
@if (data_get($github_app, 'app_id'))
<form wire:submit='submit'>
<div class="flex items-center gap-2">
<div class="flex flex-col sm:flex-row sm:items-center gap-2">
<h1>GitHub App</h1>
<div class="flex gap-2">
@if (data_get($github_app, 'installation_id'))
@ -40,8 +40,8 @@
</a>
@else
<div class="flex flex-col gap-2">
<div class="flex gap-2">
<div class="flex items-end gap-2 w-full">
<div class="flex flex-col sm:flex-row gap-2">
<div class="flex flex-col sm:flex-row items-start sm:items-end gap-2 w-full">
<x-forms.input canGate="update" :canResource="$github_app" id="name" label="App Name" />
<x-forms.button canGate="update" :canResource="$github_app" wire:click.prevent="updateGithubAppName">
Sync Name
@ -73,23 +73,23 @@ class="bg-transparent border-transparent hover:bg-transparent hover:border-trans
instantSave id="isSystemWide" />
</div>
@endif
<div class="flex gap-2">
<div class="flex flex-col sm:flex-row gap-2">
<x-forms.input canGate="update" :canResource="$github_app" id="htmlUrl" label="HTML Url" />
<x-forms.input canGate="update" :canResource="$github_app" id="apiUrl" label="API Url" />
</div>
<div class="flex gap-2">
<div class="flex flex-col sm:flex-row gap-2">
<x-forms.input canGate="update" :canResource="$github_app" id="customUser" label="User"
required />
<x-forms.input canGate="update" :canResource="$github_app" type="number" id="customPort"
label="Port" required />
</div>
<div class="flex gap-2">
<div class="flex flex-col sm:flex-row gap-2">
<x-forms.input canGate="update" :canResource="$github_app" type="number" id="appId"
label="App Id" required />
<x-forms.input canGate="update" :canResource="$github_app" type="number"
id="installationId" label="Installation Id" required />
</div>
<div class="flex gap-2">
<div class="flex flex-col sm:flex-row gap-2">
<x-forms.input canGate="update" :canResource="$github_app" id="clientId" label="Client Id"
type="password" required />
<x-forms.input canGate="update" :canResource="$github_app" id="clientSecret"
@ -108,7 +108,7 @@ class="bg-transparent border-transparent hover:bg-transparent hover:border-trans
@endforeach
</x-forms.select>
</div>
<div class="flex items-end gap-2 ">
<div class="flex flex-col sm:flex-row items-start sm:items-end gap-2">
<h2 class="pt-4">Permissions</h2>
@can('view', $github_app)
<x-forms.button wire:click.prevent="checkPermissions">Refetch</x-forms.button>
@ -120,7 +120,7 @@ class="bg-transparent border-transparent hover:bg-transparent hover:border-trans
</a>
@endcan
</div>
<div class="flex gap-2">
<div class="flex flex-col sm:flex-row gap-2">
<x-forms.input id="contents" helper="read - mandatory." label="Content" readonly
placeholder="N/A" />
<x-forms.input id="metadata" helper="read - mandatory." label="Metadata" readonly
@ -193,7 +193,7 @@ class=""
</div>
@endif
@else
<div class="flex items-center gap-2 pb-4">
<div class="flex flex-col sm:flex-row sm:items-center gap-2 pb-4">
<h1>GitHub App</h1>
<div class="flex gap-2">
@can('delete', $github_app)
@ -228,7 +228,7 @@ class=""
<div class="pb-10">
@can('create', $github_app)
@if (!isCloud() || isDev())
<div class="flex items-end gap-2">
<div class="flex flex-col sm:flex-row items-start sm:items-end gap-2">
<x-forms.select wire:model.live='webhook_endpoint' label="Webhook Endpoint"
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 ($ipv4)
@ -250,7 +250,7 @@ class=""
</x-forms.button>
</div>
@else
<div class="flex gap-2">
<div class="flex flex-col sm:flex-row gap-2">
<h2>Register a GitHub App</h2>
<x-forms.button isHighlighted
x-on:click.prevent="createGithubApp('{{ $webhook_endpoint }}','{{ $preview_deployment_permissions }}',{{ $administration }})">
@ -261,11 +261,11 @@ class=""
@endif
<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 id="default_permissions" label="Mandatory"
helper="Contents: read<br>Metadata: read<br>Email: read" />
<x-forms.checkbox instantSave id="preview_deployment_permissions" label="Preview Deployments "
<x-forms.checkbox 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" />
{{-- <x-forms.checkbox instantSave id="administration" label="Administration (for Github Runners)"
{{-- <x-forms.checkbox id="administration" label="Administration (for Github Runners)"
helper="Necessary for adding Github Runners to repositories.<br><br>Administration: read & write" /> --}}
</div>
@else

View file

@ -0,0 +1,208 @@
<?php
use App\Livewire\Source\Github\Change;
use App\Models\GithubApp;
use App\Models\PrivateKey;
use App\Models\Team;
use App\Models\User;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Livewire\Livewire;
uses(RefreshDatabase::class);
beforeEach(function () {
// Create a team with owner
$this->team = Team::factory()->create();
$this->user = User::factory()->create();
$this->team->members()->attach($this->user->id, ['role' => 'owner']);
// Set current team
$this->actingAs($this->user);
session(['currentTeam' => $this->team]);
});
describe('GitHub Source Change Component', function () {
test('can mount with newly created github app with null app_id', function () {
// Create a GitHub app without app_id (simulating a newly created source)
$githubApp = GithubApp::create([
'name' => 'Test GitHub App',
'api_url' => 'https://api.github.com',
'html_url' => 'https://github.com',
'custom_user' => 'git',
'custom_port' => 22,
'team_id' => $this->team->id,
'is_system_wide' => false,
// app_id is intentionally not set (null in database)
]);
// Test that the component can mount without errors
Livewire::withQueryParams(['github_app_uuid' => $githubApp->uuid])
->test(Change::class)
->assertSuccessful()
->assertSet('appId', null)
->assertSet('installationId', null)
->assertSet('clientId', null)
->assertSet('clientSecret', null)
->assertSet('webhookSecret', null)
->assertSet('privateKeyId', null);
});
test('can mount with fully configured github app', function () {
$privateKey = PrivateKey::create([
'name' => 'Test Key',
'private_key' => 'test-private-key-content',
'team_id' => $this->team->id,
]);
$githubApp = GithubApp::create([
'name' => 'Test GitHub App',
'api_url' => 'https://api.github.com',
'html_url' => 'https://github.com',
'custom_user' => 'git',
'custom_port' => 22,
'app_id' => 12345,
'installation_id' => 67890,
'client_id' => 'test-client-id',
'client_secret' => 'test-client-secret',
'webhook_secret' => 'test-webhook-secret',
'private_key_id' => $privateKey->id,
'team_id' => $this->team->id,
'is_system_wide' => false,
]);
Livewire::withQueryParams(['github_app_uuid' => $githubApp->uuid])
->test(Change::class)
->assertSuccessful()
->assertSet('appId', 12345)
->assertSet('installationId', 67890)
->assertSet('clientId', 'test-client-id')
->assertSet('clientSecret', 'test-client-secret')
->assertSet('webhookSecret', 'test-webhook-secret')
->assertSet('privateKeyId', $privateKey->id);
});
test('can update github app from null to valid values', function () {
$privateKey = PrivateKey::create([
'name' => 'Test Key',
'private_key' => 'test-private-key-content',
'team_id' => $this->team->id,
]);
$githubApp = GithubApp::create([
'name' => 'Test GitHub App',
'api_url' => 'https://api.github.com',
'html_url' => 'https://github.com',
'custom_user' => 'git',
'custom_port' => 22,
'team_id' => $this->team->id,
'is_system_wide' => false,
]);
Livewire::withQueryParams(['github_app_uuid' => $githubApp->uuid])
->test(Change::class)
->assertSuccessful()
->set('appId', 12345)
->set('installationId', 67890)
->set('clientId', 'new-client-id')
->set('clientSecret', 'new-client-secret')
->set('webhookSecret', 'new-webhook-secret')
->set('privateKeyId', $privateKey->id)
->call('submit')
->assertDispatched('success');
// Verify the database was updated
$githubApp->refresh();
expect($githubApp->app_id)->toBe(12345);
expect($githubApp->installation_id)->toBe(67890);
expect($githubApp->client_id)->toBe('new-client-id');
expect($githubApp->private_key_id)->toBe($privateKey->id);
});
test('validation allows nullable values for app configuration', function () {
$githubApp = GithubApp::create([
'name' => 'Test GitHub App',
'api_url' => 'https://api.github.com',
'html_url' => 'https://github.com',
'custom_user' => 'git',
'custom_port' => 22,
'team_id' => $this->team->id,
'is_system_wide' => false,
]);
// Test that validation passes with null values
Livewire::withQueryParams(['github_app_uuid' => $githubApp->uuid])
->test(Change::class)
->assertSuccessful()
->call('submit')
->assertHasNoErrors();
});
test('createGithubAppManually redirects to avoid morphing issues', function () {
$githubApp = GithubApp::create([
'name' => 'Test GitHub App',
'api_url' => 'https://api.github.com',
'html_url' => 'https://github.com',
'custom_user' => 'git',
'custom_port' => 22,
'team_id' => $this->team->id,
'is_system_wide' => false,
]);
// Test that createGithubAppManually redirects instead of updating in place
Livewire::withQueryParams(['github_app_uuid' => $githubApp->uuid])
->test(Change::class)
->assertSuccessful()
->call('createGithubAppManually')
->assertRedirect(route('source.github.show', ['github_app_uuid' => $githubApp->uuid]));
// Verify the database was updated
$githubApp->refresh();
expect($githubApp->app_id)->toBe('1234567890');
expect($githubApp->installation_id)->toBe('1234567890');
});
test('checkPermissions validates required fields', function () {
// Create a GitHub app without app_id and private_key_id
$githubApp = GithubApp::create([
'name' => 'Test GitHub App',
'api_url' => 'https://api.github.com',
'html_url' => 'https://github.com',
'custom_user' => 'git',
'custom_port' => 22,
'team_id' => $this->team->id,
'is_system_wide' => false,
]);
// Test that checkPermissions fails with appropriate error
Livewire::withQueryParams(['github_app_uuid' => $githubApp->uuid])
->test(Change::class)
->assertSuccessful()
->call('checkPermissions')
->assertDispatched('error', function ($event, $message) {
return str_contains($message, 'App ID') && str_contains($message, 'Private Key');
});
});
test('checkPermissions validates private key exists', function () {
$githubApp = GithubApp::create([
'name' => 'Test GitHub App',
'api_url' => 'https://api.github.com',
'html_url' => 'https://github.com',
'custom_user' => 'git',
'custom_port' => 22,
'app_id' => 12345,
'private_key_id' => 99999, // Non-existent private key ID
'team_id' => $this->team->id,
'is_system_wide' => false,
]);
// Test that checkPermissions fails when private key doesn't exist
Livewire::withQueryParams(['github_app_uuid' => $githubApp->uuid])
->test(Change::class)
->assertSuccessful()
->call('checkPermissions')
->assertDispatched('error', function ($event, $message) {
return str_contains($message, 'Private Key not found');
});
});
});

View file

@ -0,0 +1,108 @@
<?php
use App\Livewire\Source\Github\Create;
use App\Models\GithubApp;
use App\Models\Team;
use App\Models\User;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Livewire\Livewire;
uses(RefreshDatabase::class);
beforeEach(function () {
// Create a team with owner
$this->team = Team::factory()->create();
$this->user = User::factory()->create();
$this->team->members()->attach($this->user->id, ['role' => 'owner']);
// Set current team
$this->actingAs($this->user);
session(['currentTeam' => $this->team]);
});
describe('GitHub Source Create Component', function () {
test('creates github app with default values', function () {
Livewire::test(Create::class)
->assertSuccessful()
->set('name', 'my-test-app')
->call('createGitHubApp')
->assertRedirect();
$githubApp = GithubApp::where('name', 'my-test-app')->first();
expect($githubApp)->not->toBeNull();
expect($githubApp->name)->toBe('my-test-app');
expect($githubApp->api_url)->toBe('https://api.github.com');
expect($githubApp->html_url)->toBe('https://github.com');
expect($githubApp->custom_user)->toBe('git');
expect($githubApp->custom_port)->toBe(22);
expect($githubApp->is_system_wide)->toBeFalse();
expect($githubApp->team_id)->toBe($this->team->id);
});
test('creates github app with system wide enabled', function () {
Livewire::test(Create::class)
->assertSuccessful()
->set('name', 'system-wide-app')
->set('is_system_wide', true)
->call('createGitHubApp')
->assertRedirect();
$githubApp = GithubApp::where('name', 'system-wide-app')->first();
expect($githubApp)->not->toBeNull();
expect($githubApp->is_system_wide)->toBeTrue();
});
test('creates github app with custom organization', function () {
Livewire::test(Create::class)
->assertSuccessful()
->set('name', 'org-app')
->set('organization', 'my-org')
->call('createGitHubApp')
->assertRedirect();
$githubApp = GithubApp::where('name', 'org-app')->first();
expect($githubApp)->not->toBeNull();
expect($githubApp->organization)->toBe('my-org');
});
test('creates github app with custom git settings', function () {
Livewire::test(Create::class)
->assertSuccessful()
->set('name', 'enterprise-app')
->set('api_url', 'https://github.enterprise.com/api/v3')
->set('html_url', 'https://github.enterprise.com')
->set('custom_user', 'git-custom')
->set('custom_port', 2222)
->call('createGitHubApp')
->assertRedirect();
$githubApp = GithubApp::where('name', 'enterprise-app')->first();
expect($githubApp)->not->toBeNull();
expect($githubApp->api_url)->toBe('https://github.enterprise.com/api/v3');
expect($githubApp->html_url)->toBe('https://github.enterprise.com');
expect($githubApp->custom_user)->toBe('git-custom');
expect($githubApp->custom_port)->toBe(2222);
});
test('validates required fields', function () {
Livewire::test(Create::class)
->assertSuccessful()
->set('name', '')
->call('createGitHubApp')
->assertHasErrors(['name']);
});
test('redirects to github app show page after creation', function () {
$component = Livewire::test(Create::class)
->set('name', 'redirect-test')
->call('createGitHubApp');
$githubApp = GithubApp::where('name', 'redirect-test')->first();
$component->assertRedirect(route('source.github.show', ['github_app_uuid' => $githubApp->uuid]));
});
});