plum-e2e 1.0.10 → 1.1.0

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

@@ -17,347 +17,311 @@
 
 <script>
 	import { onMount } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import { fetchSchedules, fetchCronJobs, saveCronJob, deleteCronJob } from '$lib/api/schedules';
+	import Button from '$lib/components/ui/Button.svelte';
+	import Badge from '$lib/components/ui/Badge.svelte';
+	import Modal from '$lib/components/ui/Modal.svelte';
 
-	let scheduledTests = [];
-	let schedules = [];
-	let cronExpression = '';
-	let taskName = '';
-	let tags = '';
-	let successMessage = '';
-	let errorMessage = '';
-	let isModalOpen = false;
-	let isEditing = false; // To track if we are editing a cron job
-	let editTaskName = ''; // To store the task name of the cron job being edited
-	let isDeleting = false; // To track if the user is confirming deletion
-	let taskToDelete = ''; // The task name of the cron job being deleted
-
-	const cronRegex =
+	const CRON_REGEX =
 		/^(\*|([0-5]?[0-9])) (\*|([01]?[0-9]|2[0-3])) (\*|([01]?[0-9]|3[01])) (\*|([1-9]|1[0-2])) (\*|[0-6])$/;
 
-	// Fetch schedules from the settings.json through backend API
-	async function fetchSchedules() {
-		try {
-			const res = await fetch('http://localhost:3001/schedules');
-			const data = await res.json();
+	let cronJobs = [];
+	let scheduleOptions = [];
+	let toast = null; // { type: 'success' | 'error', message }
 
-			if (data.schedules) {
-				schedules = data.schedules;
-			}
-		} catch (error) {
-			errorMessage = 'Error fetching schedules.';
-			console.error('Error fetching schedules', error);
-		}
+	let modalOpen = false;
+	let deleteModalOpen = false;
+	let isEditing = false;
+	let editTaskName = '';
+	let taskToDelete = '';
+
+	let form = { taskName: '', cronExpression: '', tags: '' };
+	let formError = '';
+
+	function showToast(type, message) {
+		toast = { type, message };
+		setTimeout(() => (toast = null), 4000);
 	}
 
-	// Fetch scheduled tests (cron jobs) from the backend API
-	async function fetchScheduledTests() {
-		try {
-			const res = await fetch('http://localhost:3001/cron-jobs');
-			const data = await res.json();
-			if (data.cronJobs) {
-				scheduledTests = data.cronJobs;
-			}
-		} catch (error) {
-			errorMessage = 'Error fetching scheduled tests.';
-			console.error('Error fetching scheduled tests:', error);
-		}
+	function openAddModal() {
+		isEditing = false;
+		editTaskName = '';
+		form = { taskName: '', cronExpression: '', tags: '' };
+		formError = '';
+		modalOpen = true;
+	}
+
+	function openEditModal(job) {
+		isEditing = true;
+		editTaskName = job.taskName;
+		form = { taskName: job.taskName, cronExpression: job.cronExpression, tags: job.tags };
+		formError = '';
+		modalOpen = true;
+	}
+
+	function openDeleteModal(taskName) {
+		taskToDelete = taskName;
+		deleteModalOpen = true;
 	}
 
-	// Add or edit a cron job via the API
-	async function saveCronJob() {
-		if (!cronExpression || !taskName || !tags) {
-			errorMessage = 'Please fill in all fields';
+	async function handleSave() {
+		if (!form.taskName || !form.cronExpression || !form.tags) {
+			formError = 'All fields are required.';
 			return;
 		}
-
-		// Validate cron expression
-		if (!cronRegex.test(cronExpression)) {
-			errorMessage = 'Invalid cron expression. Please use a valid cron format.';
+		if (!CRON_REGEX.test(form.cronExpression)) {
+			formError = 'Invalid cron expression.';
 			return;
 		}
-
-		// Lowercase " OR " while keeping other tags intact
-		const formattedTags = tags.replace(/\sOR\s/gi, (match) => match.toLowerCase());
-
+		formError = '';
 		try {
-			let res;
-			if (isEditing) {
-				// Edit cron job
-				res = await fetch(`http://localhost:3001/cron-jobs/${editTaskName}`, {
-					method: 'PUT',
-					headers: {
-						'Content-Type': 'application/json'
-					},
-					body: JSON.stringify({ cronExpression, taskName, tags: formattedTags })
-				});
-			} else {
-				// Add new cron job
-				res = await fetch('http://localhost:3001/cron-jobs', {
-					method: 'POST',
-					headers: {
-						'Content-Type': 'application/json'
-					},
-					body: JSON.stringify({ cronExpression, taskName, tags: formattedTags })
-				});
-			}
-
-			const data = await res.json();
+			const data = await saveCronJob({ ...form, isEditing, editTaskName });
 			if (data.message) {
-				successMessage = `Cron job ${isEditing ? 'updated' : 'added'}: ${data.message}`;
-				fetchScheduledTests(); // Refresh the list
-				setTimeout(() => {
-					successMessage = ''; // Clear success message after 5 seconds
-				}, 5000);
-				clearModal();
+				showToast('success', `${isEditing ? 'Updated' : 'Added'}: ${form.taskName}`);
+				modalOpen = false;
+				cronJobs = await fetchCronJobs();
 			} else {
-				errorMessage = 'Failed to save cron job';
+				formError = 'Failed to save. Please try again.';
 			}
-		} catch (error) {
-			errorMessage = 'Error saving cron job.';
-			console.error('Error saving cron job:', error);
+		} catch {
+			formError = 'Network error.';
 		}
 	}
 
-	// Delete a cron job
-	async function deleteCronJob(taskName) {
+	async function handleDelete() {
 		try {
-			const res = await fetch(`http://localhost:3001/cron-jobs/${taskName}`, {
-				method: 'DELETE'
-			});
-			const data = await res.json();
+			const data = await deleteCronJob(taskToDelete);
 			if (data.message) {
-				successMessage = `Cron job deleted: ${data.message}`;
-				// Refresh the list
-				fetchScheduledTests();
-				setTimeout(() => {
-					successMessage = '';
-				}, 5000);
+				showToast('success', `Deleted: ${taskToDelete}`);
+				cronJobs = await fetchCronJobs();
 			} else {
-				errorMessage = 'Failed to delete cron job';
-				setTimeout(() => {
-					errorMessage = '';
-				}, 5000);
+				showToast('error', 'Could not delete cron job.');
 			}
-		} catch (error) {
-			errorMessage = 'Error deleting cron job.';
-			console.error('Error deleting cron job:', error);
+		} catch {
+			showToast('error', 'Network error.');
 		}
-	}
-
-	// Open modal to edit cron job
-	function openEditModal(cronJob) {
-		isEditing = true;
-		editTaskName = cronJob.taskName;
-		taskName = cronJob.taskName;
-		cronExpression = cronJob.cronExpression;
-		tags = cronJob.tags;
-		isModalOpen = true;
-	}
-
-	// Reset modal values
-	function clearModal() {
-		isEditing = false;
-		editTaskName = '';
-		taskName = '';
-		cronExpression = '';
-		tags = '';
-		isModalOpen = false;
-	}
-
-	// Open confirmation modal for deleting cron job
-	function openDeleteConfirmation(taskName) {
-		isDeleting = true;
-		taskToDelete = taskName;
-	}
-
-	// Confirm deletion
-	function confirmDelete() {
-		deleteCronJob(taskToDelete);
-		isDeleting = false;
+		deleteModalOpen = false;
 		taskToDelete = '';
 	}
 
-	// Cancel deletion
-	function cancelDelete() {
-		isDeleting = false;
-		taskToDelete = '';
+	function cronLabel(expression) {
+		return scheduleOptions.find((s) => s.value === expression)?.label ?? expression;
 	}
 
-	// Get human-readable label for cron expression
-	function getCronLabel(cronExpression) {
-		const match = schedules.find((option) => option.value === cronExpression);
-		return match ? match.label : cronExpression;
-	}
-
-	onMount(() => {
-		fetchScheduledTests();
-		fetchSchedules(); // <-- also call this here
+	onMount(async () => {
+		[cronJobs, scheduleOptions] = await Promise.all([fetchCronJobs(), fetchSchedules()]);
 	});
 </script>
 
-<!-- Add/Modify modal -->
-<dialog id="my_modal_1" class="modal" class:modal-open={isModalOpen}>
-	<div class="modal-box">
-		<div class="modal-header">
-			<button class="btn btn-sm btn-circle z-10 absolute right-2 top-2" on:click={clearModal}>
-				✖
-			</button>
+<!-- Add/Edit modal -->
+<Modal bind:open={modalOpen} title={isEditing ? 'Edit Cron Job' : 'New Cron Job'}>
+	<form on:submit|preventDefault={handleSave} class="modal-form">
+		<div class="field">
+			<div class="field-label">
+				<span>Task Name</span>
+				<span class="field-hint">
+					{isEditing ? 'Name is the ID — cannot be changed' : 'Use a unique, meaningful name'}
+				</span>
+			</div>
+			<input
+				type="text"
+				class="field-input"
+				bind:value={form.taskName}
+				placeholder="nightly-login-suite"
+				disabled={isEditing}
+				required
+			/>
 		</div>
 
-		<h2 class="card-title mb-4">{isEditing ? 'Edit' : 'Add New'} Cron Job</h2>
-
-		<form on:submit|preventDefault={saveCronJob} class="space-y-4">
-			<div>
-				<div for="taskName" class="label">
-					<span class="label-text">Task Name</span>
-					<span class="label-text-alt"
-						>{isEditing
-							? 'Name is used as ID. This cannot be changed.'
-							: 'Use a meaningful name'}</span
-					>
-				</div>
-				<input
-					type="text"
-					id="taskName"
-					bind:value={taskName}
-					class="input input-bordered w-full"
-					placeholder="Task Name"
-					required
-					disabled={isEditing}
-				/>
+		<div class="field">
+			<div class="field-label">
+				<span>Schedule</span>
 			</div>
-			<div>
-				<div for="cronExpression" class="label">
-					<span class="label-text">Cron Expression</span>
-					<span class="label-text-alt">You can use AI to construct your expression.</span>
-				</div>
-				<select
-					id="cronExpression"
-					bind:value={cronExpression}
-					class="input input-bordered w-full"
-					required
-				>
-					<option value="" disabled selected>Select Cron Expression</option>
-					{#each schedules as schedule}
-						<option value={schedule.value}>{schedule.label}</option>
-					{/each}
-				</select>
-			</div>
-			<div>
-				<div for="tags" class="label">
-					<span class="label-text">Tags</span>
-					<span class="label-text-alt">If using multiple tags, "@test-1 or @test-2".</span>
-				</div>
-				<input
-					type="text"
-					id="tags"
-					bind:value={tags}
-					class="input input-bordered w-full"
-					placeholder="Tags"
-					required
-				/>
+			<select class="field-input" bind:value={form.cronExpression} required>
+				<option value="" disabled selected>Select a schedule</option>
+				{#each scheduleOptions as opt}
+					<option value={opt.value}>{opt.label}</option>
+				{/each}
+			</select>
+		</div>
+
+		<div class="field">
+			<div class="field-label">
+				<span>Tags</span>
+				<span class="field-hint">Multiple: @test-1 or @test-2</span>
 			</div>
-			<button type="submit" class="btn btn-success w-full">
-				{isEditing ? 'Edit' : 'Add'} Cron Job
-			</button>
-		</form>
-	</div>
-</dialog>
-
-<!-- Delete Confirmation Modal -->
-<dialog id="delete_confirmation_modal" class="modal" class:modal-open={isDeleting}>
-	<div class="modal-box">
-		<h2 class="card-title mb-4">Are you sure you want to delete this cron job?</h2>
-		<div class="flex justify-center gap-4">
-			<button class="btn btn-error" on:click={confirmDelete}>Yes</button>
-			<button class="btn" on:click={cancelDelete}>No</button>
+			<input
+				type="text"
+				class="field-input"
+				bind:value={form.tags}
+				placeholder="@suite-login"
+				required
+			/>
 		</div>
+
+		{#if formError}
+			<p class="form-error">{formError}</p>
+		{/if}
+
+		<Button type="submit" size="md">
+			{isEditing ? 'Save Changes' : 'Add Cron Job'}
+		</Button>
+	</form>
+</Modal>
+
+<!-- Delete confirmation modal -->
+<Modal bind:open={deleteModalOpen} title="Delete Cron Job">
+	<p class="confirm-text">
+		Are you sure you want to delete <strong>{taskToDelete}</strong>? This cannot be undone.
+	</p>
+	<div class="confirm-actions">
+		<Button variant="danger" on:click={handleDelete}>Delete</Button>
+		<Button variant="ghost" on:click={() => (deleteModalOpen = false)}>Cancel</Button>
 	</div>
-</dialog>
-
-<div class="flex justify-center items-center w-full my-4">
-	<div class="card bg-base-300 rounded-box p-4">
-		<div class="card-body text-left">
-			<h2 class="card-title sticky top-0 bg-base-300 z-10">Scheduled Tests</h2>
-			{#if successMessage}
-				<div role="alert" class="alert alert-success z-0">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-6 w-6 shrink-0 stroke-current"
-						fill="none"
-						viewBox="0 0 24 24"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-						/>
-					</svg>
-					<span>{successMessage}</span>
-				</div>
-			{/if}
-
-			{#if errorMessage}
-				<div role="alert" class="alert alert-error">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-6 w-6 shrink-0 stroke-current"
-						fill="none"
-						viewBox="0 0 24 24"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-						/>
-					</svg>
-					<span>{errorMessage}</span>
-				</div>
-			{/if}
-			<div class="mt-4">
-				{#if scheduledTests.length > 0}
-					<div class="overflow-x-auto">
-						<table class="table table-zebra">
-							<thead>
-								<tr>
-									<th>Name</th>
-									<th>Frequency</th>
-									<th>Tags</th>
-									<th>Action</th>
-								</tr>
-							</thead>
-							<tbody>
-								{#each scheduledTests as scheduledTest}
-									<tr>
-										<td>{scheduledTest.taskName}</td>
-										<td>{getCronLabel(scheduledTest.cronExpression)}</td>
-										<td>{scheduledTest.tags}</td>
-										<td>
-											<button
-												class="btn btn-warning btn-sm"
-												on:click={() => openEditModal(scheduledTest)}
-											>
-												Edit
-											</button>
-											<button
-												class="btn btn-error btn-sm"
-												on:click={() => openDeleteConfirmation(scheduledTest.taskName)}
-											>
-												Delete
-											</button>
-										</td>
-									</tr>
-								{/each}
-							</tbody>
-						</table>
-					</div>
-				{:else}
-					<p>No Scheduled Tests Available.</p>
-				{/if}
-			</div>
-			<button class="btn mt-2" on:click={() => (isModalOpen = true)}>Add New Cron Job</button>
+</Modal>
+
+<!-- Page -->
+<div class="page-header">
+	<div class="header-row">
+		<div>
+			<h1>Scheduled Tests</h1>
+			<p class="subtitle">Manage recurring test runs via cron jobs</p>
 		</div>
+		<Button on:click={openAddModal}>+ New Job</Button>
 	</div>
 </div>
+
+{#if toast}
+	<div class="toast alert alert-{toast.type}" transition:fly={{ y: -8, duration: 240 }}>
+		{toast.message}
+	</div>
+{/if}
+
+<div class="card" style="padding: 0; overflow: hidden;">
+	{#if cronJobs.length === 0}
+		<p class="empty">No scheduled tests yet. Create one to get started.</p>
+	{:else}
+		<div class="table-wrap">
+			<table class="data-table">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Schedule</th>
+						<th>Tags</th>
+						<th>Actions</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each cronJobs as job, i}
+						<tr style="animation-delay: {i * 45}ms" class="job-row">
+							<td class="job-name">{job.taskName}</td>
+							<td>
+								<Badge variant="schedule">{cronLabel(job.cronExpression)}</Badge>
+							</td>
+							<td>
+								<span class="tag-text">{job.tags}</span>
+							</td>
+							<td class="actions-cell">
+								<Button variant="ghost" size="sm" on:click={() => openEditModal(job)}>Edit</Button>
+								<Button variant="danger" size="sm" on:click={() => openDeleteModal(job.taskName)}
+									>Delete</Button
+								>
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.page-header {
+		margin-bottom: 2rem;
+		padding-bottom: 1.5rem;
+		border-bottom: 1px solid var(--border);
+	}
+
+	.header-row {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 1rem;
+	}
+
+	.page-header h1 {
+		font-size: 2.5rem;
+		margin-bottom: 0.375rem;
+	}
+
+	.subtitle {
+		color: var(--text-muted);
+		font-size: 0.9375rem;
+	}
+
+	.job-row {
+		animation: fadeUp 0.32s var(--ease-out) both;
+	}
+
+	.toast {
+		margin-bottom: 1.25rem;
+		border-radius: var(--radius-md);
+	}
+
+	.table-wrap {
+		overflow-x: auto;
+	}
+
+	.job-name {
+		font-weight: 400;
+		font-size: 0.875rem;
+	}
+
+	.tag-text {
+		font-family: 'JetBrains Mono', monospace;
+		font-size: 0.78rem;
+		color: var(--text-muted);
+	}
+
+	.actions-cell {
+		display: flex;
+		gap: 0.375rem;
+	}
+
+	.empty {
+		padding: 3rem 1.5rem;
+		color: var(--text-muted);
+		font-size: 0.9375rem;
+		text-align: center;
+	}
+
+	/* Modal form */
+	.modal-form {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.form-error {
+		font-size: 0.8125rem;
+		color: var(--fail);
+	}
+
+	.confirm-text {
+		font-size: 0.9375rem;
+		color: var(--text-muted);
+		line-height: 1.6;
+	}
+
+	.confirm-text strong {
+		color: var(--text);
+		font-weight: 500;
+	}
+
+	.confirm-actions {
+		display: flex;
+		gap: 0.625rem;
+		padding-top: 0.25rem;
+	}
+</style>

package/frontend/svelte.config.js

@@ -15,14 +15,11 @@
  * along with Plum. If not, see https://www.gnu.org/licenses/.
  */
 
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-node';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	kit: {
-		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
-		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
-		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
 		adapter: adapter()
 	}
 };

package/frontend/tailwind.config.js

@@ -18,27 +18,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
-	theme: {
-		extend: {
-			animation: {
-				'rise-quick': 'rise 0.6s ease-out' // Quick rising animation
-			},
-			keyframes: {
-				rise: {
-					'0%': { transform: 'translateY(20px)', opacity: '0' }, // Start slightly below, invisible
-					'100%': { transform: 'translateY(0)', opacity: '1' } // End in place, fully visible
-				}
-			}
-		}
-	},
-	plugins: [require('daisyui')],
-	daisyui: {
-		themes: ['emerald', 'dark'], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
-		base: true, // applies background color and foreground color for root element by default
-		styled: true, // include daisyUI colors and design decisions for all components
-		utils: true, // adds responsive and modifier utility classes
-		prefix: '', // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
-		logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
-		themeRoot: ':root' // The element that receives theme color CSS variables
-	}
+	theme: { extend: {} },
+	plugins: []
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "plum-e2e",
-	"version": "1.0.10",
+	"version": "1.1.0",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/silverlunah/plum.git"
@@ -8,7 +8,7 @@
 	"description": "A detached test automation environment that combines Playwright and Cucumber with a Svelte frontend and an Express backend. It allows users to trigger tests, monitor reports, and schedule test runs through an intuitive UI.",
 	"main": "index.js",
 	"scripts": {
-		"init": "(npm install) && (cd backend && npm install && npm run create-env && node config/scripts/create-settings.js) && (cd frontend && npm install && echo 'Frontend install complete')",
+		"init": "(npm install) && (cd backend && npm install && npm run init) && (cd frontend && npm install && echo 'Frontend install complete')",
 		"format": "prettier --write .",
 		"add-license": "npx license-check-and-add add -f license-config.json",
 		"prepare": "husky",