plum-e2e 2.1.0 → 2.3.0

package/frontend/src/routes/scheduled-tests/+page.svelte

@@ -25,6 +25,7 @@
 		toggleCronJob
 	} from '$lib/api/schedules';
 	import { fetchRunners } from '$lib/api/runners';
+	import { fetchIntegrations } from '$lib/api/settings';
 	import { activeCronJobs } from '$lib/stores/runner';
 	import { BROWSERS, TOAST_TIMEOUT_MS } from '$lib/constants';
 	import { stagger } from '$lib/utils/format';
@@ -50,6 +51,7 @@
 
 	let cronJobs = [];
 	let availableRunners = [];
+	let integrations = { discordWebhookUrl: '', slackWebhookUrl: '', notifyPublicUrl: '' };
 	let toast = null;
 
 	let modalOpen = false;
@@ -64,7 +66,9 @@
 		tags: '',
 		workers: 1,
 		browser: 'chromium',
-		runnerIds: ['built-in']
+		runnerIds: ['built-in'],
+		notifyDiscord: false,
+		notifySlack: false
 	};
 	let selectedSchedule = '';
 	let useCustomCron = false;
@@ -137,7 +141,9 @@
 			tags: '',
 			workers: 1,
 			browser: 'chromium',
-			runnerIds: ['built-in']
+			runnerIds: ['built-in'],
+			notifyDiscord: false,
+			notifySlack: false
 		};
 		selectedSchedule = '';
 		useCustomCron = false;
@@ -157,7 +163,9 @@
 			tags: job.tags,
 			workers: job.workers ?? 1,
 			browser: job.browser ?? 'chromium',
-			runnerIds: prunedIds.length > 0 ? prunedIds : ['built-in']
+			runnerIds: prunedIds.length > 0 ? prunedIds : ['built-in'],
+			notifyDiscord: job.notifyDiscord ?? false,
+			notifySlack: job.notifySlack ?? false
 		};
 		const isPreset = scheduleOptions.some((o) => o.value === job.cronExpression);
 		useCustomCron = !isPreset;
@@ -231,10 +239,15 @@
 	}
 
 	onMount(async () => {
-		cronJobs = await fetchCronJobs();
-		try {
-			availableRunners = await fetchRunners();
-		} catch {}
+		[cronJobs, availableRunners, integrations] = await Promise.all([
+			fetchCronJobs(),
+			fetchRunners().catch(() => []),
+			fetchIntegrations().catch(() => ({
+				discordWebhookUrl: '',
+				slackWebhookUrl: '',
+				notifyPublicUrl: ''
+			}))
+		]);
 	});
 </script>
 
@@ -373,6 +386,26 @@
 			</div>
 		</div>
 
+		{#if integrations.discordWebhookUrl || integrations.slackWebhookUrl}
+			<div class="field">
+				<div class="field-label"><span>Notifications</span></div>
+				<div class="notify-checks">
+					{#if integrations.discordWebhookUrl}
+						<label class="notify-check-option">
+							<input type="checkbox" bind:checked={form.notifyDiscord} />
+							<span>Discord</span>
+						</label>
+					{/if}
+					{#if integrations.slackWebhookUrl}
+						<label class="notify-check-option">
+							<input type="checkbox" bind:checked={form.notifySlack} />
+							<span>Slack</span>
+						</label>
+					{/if}
+				</div>
+			</div>
+		{/if}
+
 		{#if formError}
 			<p class="form-error">{formError}</p>
 		{/if}
@@ -859,4 +892,29 @@
 		text-overflow: ellipsis;
 		max-width: 180px;
 	}
+
+	/* Notification checkboxes in modal */
+	.notify-checks {
+		display: flex;
+		flex-direction: row;
+		gap: 1rem;
+		padding: 0.375rem 0;
+	}
+
+	.notify-check-option {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.8125rem;
+		color: var(--text);
+		cursor: pointer;
+	}
+
+	.notify-check-option input[type='checkbox'] {
+		accent-color: var(--accent);
+		width: 13px;
+		height: 13px;
+		flex-shrink: 0;
+		cursor: pointer;
+	}
 </style>

package/frontend/src/routes/settings/+page.svelte

@@ -19,7 +19,18 @@
 	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import { goto } from '$app/navigation';
-	import { fetchProject, saveProject, exportBackup, importBackup } from '$lib/api/settings';
+	import {
+		fetchProject,
+		saveProject,
+		exportBackup,
+		importBackup,
+		fetchIntegrations,
+		saveIntegrations,
+		fetchBackupConfig,
+		saveBackupConfig,
+		testBackupS3,
+		runBackupNow
+	} from '$lib/api/settings';
 	import {
 		fetchRunners,
 		createRunner,
@@ -43,7 +54,7 @@
 	import Toast from '$lib/components/ui/Toast.svelte';
 	import ConfirmModal from '$lib/components/ui/ConfirmModal.svelte';
 
-	/** @type {'project' | 'runners' | 'repository' | 'account' | 'users' | 'backup'} */
+	/** @type {'project' | 'runners' | 'repository' | 'integrations' | 'account' | 'users' | 'backup'} */
 	let section =
 		(typeof sessionStorage !== 'undefined' && sessionStorage.getItem('plum:settings:section')) ||
 		'project';
@@ -84,6 +95,28 @@
 	let exporting = false;
 	let fileInput;
 
+	let integrations = { discordWebhookUrl: '', slackWebhookUrl: '', notifyPublicUrl: '' };
+	let integrationsSaving = false;
+
+	let backupConfig = {
+		backupEnabled: false,
+		backupCron: '0 2 * * *',
+		backupS3Endpoint: '',
+		backupS3Region: '',
+		backupS3Bucket: '',
+		backupS3AccessKey: '',
+		backupS3SecretKey: '',
+		backupS3Prefix: ''
+	};
+	let backupConfigSaving = false;
+	let backupS3SecretKeySet = false;
+	let backupTestingS3 = false;
+	let backupRunningNow = false;
+	let backupS3TestResult = null;
+	let backupS3TestMessage = '';
+	let backupLastRunAt = null;
+	let backupLastStatus = '';
+
 	let runners = [];
 	let runnerForm = { name: '', url: '', token: '', browser: 'chromium' };
 	let runnerFormError = '';
@@ -121,6 +154,25 @@
 				testSuitePrefix: prefixes.testSuitePrefix
 			};
 		} catch {}
+		try {
+			integrations = await fetchIntegrations();
+		} catch {}
+		try {
+			const bc = await fetchBackupConfig();
+			backupS3SecretKeySet = bc.backupS3SecretKeySet;
+			backupLastRunAt = bc.backupLastRunAt;
+			backupLastStatus = bc.backupLastStatus;
+			backupConfig = {
+				backupEnabled: bc.backupEnabled,
+				backupCron: bc.backupCron,
+				backupS3Endpoint: bc.backupS3Endpoint,
+				backupS3Region: bc.backupS3Region,
+				backupS3Bucket: bc.backupS3Bucket,
+				backupS3AccessKey: bc.backupS3AccessKey,
+				backupS3SecretKey: '',
+				backupS3Prefix: bc.backupS3Prefix
+			};
+		} catch {}
 		if ($auth.user) {
 			profileForm = { name: $auth.user.name, email: $auth.user.email };
 		}
@@ -394,10 +446,77 @@
 		goto('/login');
 	}
 
+	async function handleSaveIntegrations() {
+		integrationsSaving = true;
+		try {
+			integrations = await saveIntegrations(integrations);
+			showToast('success', 'Integration settings saved.');
+		} catch {
+			showToast('error', 'Failed to save integration settings.');
+		} finally {
+			integrationsSaving = false;
+		}
+	}
+
+	async function handleSaveBackupConfig() {
+		backupConfigSaving = true;
+		try {
+			const payload = { ...backupConfig };
+			if (!payload.backupS3SecretKey) delete payload.backupS3SecretKey;
+			const result = await saveBackupConfig(payload);
+			if (result.error) throw new Error(result.error);
+			if (backupConfig.backupS3SecretKey) backupS3SecretKeySet = true;
+			backupConfig = { ...backupConfig, backupS3SecretKey: '' };
+			showToast('success', 'Backup configuration saved.');
+		} catch (e) {
+			showToast('error', e.message || 'Failed to save backup configuration.');
+		} finally {
+			backupConfigSaving = false;
+		}
+	}
+
+	async function handleTestS3() {
+		backupTestingS3 = true;
+		backupS3TestResult = null;
+		backupS3TestMessage = '';
+		try {
+			const result = await testBackupS3(backupConfig);
+			if (result.error) throw new Error(result.error);
+			backupS3TestResult = 'success';
+			backupS3TestMessage = 'Connection successful.';
+		} catch (e) {
+			backupS3TestResult = 'error';
+			backupS3TestMessage = e.message || 'Connection failed.';
+		} finally {
+			backupTestingS3 = false;
+		}
+	}
+
+	async function handleRunBackupNow() {
+		backupRunningNow = true;
+		try {
+			const result = await runBackupNow();
+			if (result.error) throw new Error(result.error);
+			backupLastRunAt = result.lastRunAt;
+			backupLastStatus = result.lastStatus ?? '';
+			showToast('success', 'Backup uploaded to S3 successfully.');
+		} catch (e) {
+			showToast('error', e.message || 'Backup failed. Check your S3 configuration.');
+			const bc = await fetchBackupConfig().catch(() => null);
+			if (bc) {
+				backupLastRunAt = bc.backupLastRunAt;
+				backupLastStatus = bc.backupLastStatus;
+			}
+		} finally {
+			backupRunningNow = false;
+		}
+	}
+
 	$: navItems = [
 		{ id: 'project', label: 'Project' },
 		{ id: 'runners', label: 'Runners' },
 		{ id: 'repository', label: 'Repository' },
+		{ id: 'integrations', label: 'Integrations' },
 		{ id: 'account', label: 'Account' },
 		...($auth.user?.role === 'admin' ? [{ id: 'users', label: 'Users' }] : []),
 		{ id: 'backup', label: 'Backup' }
@@ -811,6 +930,70 @@
 				</div>
 			</div>
 
+			<!-- INTEGRATIONS -->
+		{:else if section === 'integrations'}
+			<div class="content-section" transition:fly={{ y: 6, duration: 180 }}>
+				<div class="content-header">
+					<h2>Integrations</h2>
+					<p class="content-desc">
+						Connect Discord and Slack to receive run notifications with pass/fail results and report
+						links.
+					</p>
+				</div>
+
+				<div class="card settings-card">
+					<p class="card-title">Webhooks</p>
+
+					<div class="field">
+						<label class="field-label" for="discord-url">
+							<span>Discord Webhook URL</span>
+							<span class="field-hint">Leave blank to disable Discord notifications</span>
+						</label>
+						<input
+							id="discord-url"
+							type="url"
+							class="field-input"
+							bind:value={integrations.discordWebhookUrl}
+							placeholder="https://discord.com/api/webhooks/…"
+						/>
+					</div>
+
+					<div class="field">
+						<label class="field-label" for="slack-url">
+							<span>Slack Webhook URL</span>
+							<span class="field-hint">Leave blank to disable Slack notifications</span>
+						</label>
+						<input
+							id="slack-url"
+							type="url"
+							class="field-input"
+							bind:value={integrations.slackWebhookUrl}
+							placeholder="https://hooks.slack.com/services/…"
+						/>
+					</div>
+
+					<div class="field">
+						<label class="field-label" for="public-url">
+							<span>Public URL</span>
+							<span class="field-hint"
+								>Base URL of this Plum instance, used to link reports in notifications</span
+							>
+						</label>
+						<input
+							id="public-url"
+							type="url"
+							class="field-input"
+							bind:value={integrations.notifyPublicUrl}
+							placeholder="https://plum.yourcompany.com"
+						/>
+					</div>
+
+					<Button on:click={handleSaveIntegrations} disabled={integrationsSaving}>
+						{integrationsSaving ? 'Saving…' : 'Save Integrations'}
+					</Button>
+				</div>
+			</div>
+
 			<!-- ACCOUNT -->
 		{:else if section === 'account'}
 			<div class="content-section" transition:fly={{ y: 6, duration: 180 }}>
@@ -1018,21 +1201,23 @@
 				<div class="content-header">
 					<h2>Backup</h2>
 					<p class="content-desc">
-						Export all scheduled tests, report history, and project settings to a JSON file. Import
-						to restore after a data loss or migration.
+						Export your test cases, schedules, users, and project settings. Automate uploads to any
+						S3-compatible storage — Cloudflare R2, Backblaze B2, AWS S3, or MinIO.
 					</p>
 				</div>
 
+				<!-- Manual export / import -->
 				<div class="card settings-card">
+					<p class="card-title">Manual Backup</p>
 					<div class="backup-row">
 						<div class="backup-block">
 							<p class="backup-block-title">Export</p>
 							<p class="backup-block-desc">
-								Downloads a <code>.json</code> file containing all cron jobs, report metadata, and project
-								settings. Report detail files are stored on disk and not included.
+								Downloads a <code>.json</code> file with all cron jobs, test cases, test runs, users,
+								runners, and project settings.
 							</p>
 							<Button on:click={handleExport} disabled={exporting}>
-								{exporting ? 'Exporting…' : 'Export Backup'}
+								{exporting ? 'Exporting…' : 'Export JSON'}
 							</Button>
 						</div>
 
@@ -1041,8 +1226,8 @@
 						<div class="backup-block">
 							<p class="backup-block-title">Import</p>
 							<p class="backup-block-desc">
-								Restores cron jobs, report metadata, and project settings from a previously exported
-								backup. Existing records with the same identifier are overwritten.
+								Restores all data from a previously exported backup. Existing records are
+								overwritten. Cron jobs are re-scheduled after import.
 							</p>
 							<div class="import-row">
 								<label class="file-label">
@@ -1061,6 +1246,194 @@
 							</div>
 						</div>
 					</div>
+					<p class="backup-disclaimer">
+						Reports are not included in backups. To back up report history, run
+						<code>pg_dump</code> directly on the PostgreSQL volume.
+					</p>
+				</div>
+
+				<!-- S3 cloud backup -->
+				<div class="card settings-card">
+					<p class="card-title">S3 Storage</p>
+					<p class="backup-block-desc" style="margin-bottom: 1.25rem;">
+						Works with any S3-compatible provider — Cloudflare R2, Backblaze B2, AWS S3, or MinIO.
+						Leave <strong>Endpoint URL</strong> empty for AWS S3.
+					</p>
+
+					<div class="field-row">
+						<div class="field">
+							<label class="field-label" for="s3-endpoint">
+								<span>Endpoint URL</span>
+								<span class="field-hint">Leave blank for AWS S3</span>
+							</label>
+							<input
+								id="s3-endpoint"
+								type="url"
+								class="field-input"
+								bind:value={backupConfig.backupS3Endpoint}
+								placeholder="https://account.r2.cloudflarestorage.com"
+							/>
+						</div>
+						<div class="field">
+							<label class="field-label" for="s3-region">
+								<span>Region</span>
+								<span class="field-hint">Use <code>auto</code> for Cloudflare R2</span>
+							</label>
+							<input
+								id="s3-region"
+								type="text"
+								class="field-input"
+								bind:value={backupConfig.backupS3Region}
+								placeholder="us-east-1"
+							/>
+						</div>
+					</div>
+
+					<div class="field-row">
+						<div class="field">
+							<label class="field-label" for="s3-bucket">
+								<span>Bucket</span>
+							</label>
+							<input
+								id="s3-bucket"
+								type="text"
+								class="field-input"
+								bind:value={backupConfig.backupS3Bucket}
+								placeholder="my-plum-backups"
+							/>
+						</div>
+						<div class="field">
+							<label class="field-label" for="s3-prefix">
+								<span>Path Prefix</span>
+								<span class="field-hint">Optional folder inside the bucket</span>
+							</label>
+							<input
+								id="s3-prefix"
+								type="text"
+								class="field-input"
+								bind:value={backupConfig.backupS3Prefix}
+								placeholder="plum/"
+							/>
+						</div>
+					</div>
+
+					<div class="field-row">
+						<div class="field">
+							<label class="field-label" for="s3-access-key">
+								<span>Access Key ID</span>
+							</label>
+							<input
+								id="s3-access-key"
+								type="text"
+								class="field-input"
+								bind:value={backupConfig.backupS3AccessKey}
+								placeholder="AKIAIOSFODNN7EXAMPLE"
+								autocomplete="off"
+							/>
+						</div>
+						<div class="field">
+							<label class="field-label" for="s3-secret-key">
+								<span>Secret Access Key</span>
+								<span class="field-hint"
+									>{backupS3SecretKeySet
+										? 'A key is already saved — leave blank to keep it'
+										: 'Required'}</span
+								>
+							</label>
+							<input
+								id="s3-secret-key"
+								type="password"
+								class="field-input"
+								bind:value={backupConfig.backupS3SecretKey}
+								placeholder={backupS3SecretKeySet ? '••••••••' : 'Enter secret key'}
+								autocomplete="new-password"
+							/>
+						</div>
+					</div>
+
+					<div class="backup-actions">
+						<Button variant="ghost" on:click={handleTestS3} disabled={backupTestingS3}>
+							{backupTestingS3 ? 'Testing…' : 'Test Connection'}
+						</Button>
+						<Button on:click={handleSaveBackupConfig} disabled={backupConfigSaving}>
+							{backupConfigSaving ? 'Saving…' : 'Save S3 Config'}
+						</Button>
+					</div>
+
+					{#if backupS3TestResult}
+						<p
+							class="s3-test-result"
+							class:s3-test-success={backupS3TestResult === 'success'}
+							class:s3-test-error={backupS3TestResult === 'error'}
+						>
+							{backupS3TestResult === 'success' ? '✓' : '✗'}
+							{backupS3TestMessage}
+						</p>
+					{/if}
+				</div>
+
+				<!-- Scheduled backup -->
+				<div class="card settings-card">
+					<p class="card-title">Scheduled Backup</p>
+
+					<div class="field">
+						<label class="field-label backup-toggle-label" for="backup-enabled">
+							<span>Enable scheduled backup</span>
+							<button
+								id="backup-enabled"
+								class="toggle-btn"
+								class:active={backupConfig.backupEnabled}
+								on:click={() => (backupConfig.backupEnabled = !backupConfig.backupEnabled)}
+								role="switch"
+								aria-checked={backupConfig.backupEnabled}
+							>
+								<span class="toggle-thumb"></span>
+							</button>
+						</label>
+					</div>
+
+					<div class="field">
+						<label class="field-label" for="backup-cron">
+							<span>Cron Expression</span>
+							<span class="field-hint">
+								5-field cron — e.g. <code>0 2 * * *</code> = daily at 2 AM.
+								<a href="https://crontab.guru" target="_blank" rel="noopener noreferrer"
+									>Test at crontab.guru ↗</a
+								>
+							</span>
+						</label>
+						<input
+							id="backup-cron"
+							type="text"
+							class="field-input field-input-mono"
+							bind:value={backupConfig.backupCron}
+							placeholder="0 2 * * *"
+						/>
+					</div>
+
+					{#if backupLastRunAt}
+						<p class="backup-last-run">
+							Last backup: {new Date(backupLastRunAt).toLocaleString()} —
+							{#if backupLastStatus?.startsWith('success:')}
+								<span class="status-success"
+									>uploaded to {backupLastStatus.replace('success:', '')}</span
+								>
+							{:else if backupLastStatus?.startsWith('error:')}
+								<span class="status-error">{backupLastStatus.replace('error:', '')}</span>
+							{:else}
+								<span>{backupLastStatus}</span>
+							{/if}
+						</p>
+					{/if}
+
+					<div class="backup-actions">
+						<Button variant="ghost" on:click={handleRunBackupNow} disabled={backupRunningNow}>
+							{backupRunningNow ? 'Uploading…' : 'Upload to S3 Now'}
+						</Button>
+						<Button on:click={handleSaveBackupConfig} disabled={backupConfigSaving}>
+							{backupConfigSaving ? 'Saving…' : 'Save Schedule'}
+						</Button>
+					</div>
 				</div>
 			</div>
 		{/if}
@@ -1430,6 +1803,96 @@
 		border-radius: 3px;
 	}
 
+	.backup-disclaimer {
+		margin-top: 1rem;
+		padding: 0.625rem 0.875rem;
+		background: var(--bg-subtle);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-sm);
+		font-size: 0.8125rem;
+		color: var(--text-muted);
+		line-height: 1.5;
+	}
+
+	.backup-actions {
+		display: flex;
+		gap: 0.625rem;
+		margin-top: 0.25rem;
+		flex-wrap: wrap;
+	}
+
+	.s3-test-result {
+		margin-top: 0.625rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+	}
+
+	.s3-test-success {
+		color: var(--pass);
+	}
+
+	.s3-test-error {
+		color: var(--fail);
+	}
+
+	.backup-last-run {
+		font-size: 0.8125rem;
+		color: var(--text-muted);
+		margin-top: 0.25rem;
+	}
+
+	.status-success {
+		color: var(--pass);
+	}
+
+	.status-error {
+		color: var(--fail);
+	}
+
+	.backup-toggle-label {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		cursor: default;
+	}
+
+	.toggle-btn {
+		flex-shrink: 0;
+		width: 40px;
+		height: 22px;
+		border-radius: 100px;
+		border: none;
+		background: var(--border);
+		cursor: pointer;
+		position: relative;
+		transition: background 0.2s var(--ease-out);
+	}
+
+	.toggle-btn.active {
+		background: var(--accent);
+	}
+
+	.toggle-btn .toggle-thumb {
+		position: absolute;
+		top: 3px;
+		left: 3px;
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		background: white;
+		transition: transform 0.2s var(--ease-out);
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+	}
+
+	.toggle-btn.active .toggle-thumb {
+		transform: translateX(18px);
+	}
+
+	.field-input-mono {
+		font-family: 'JetBrains Mono', monospace;
+		font-size: 0.8125rem;
+	}
+
 	.import-row {
 		display: flex;
 		align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "plum-e2e",
-	"version": "2.1.0",
+	"version": "2.3.0",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/silverlunah/plum.git"