mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
feat: SOTA overhaul of automate pipeline page (#53)
* feat(find-duplicates): upgrade to 128-bit dHash with metadata and thumbnails * feat(find-duplicates): add custom-results display mode and duplicate store * feat(find-duplicates): add results overview grid and detail comparison view * feat(find-duplicates): overhaul settings with sensitivity presets and download actions * feat(find-duplicates): update i18n description * chore: replace jsqr with zxing-wasm for barcode reading * feat(barcode-read): rewrite backend with zxing-wasm for all barcode types * feat(barcode-read): rewrite frontend with multi-file, results table, progress, export - Multi-file sequential processing with per-file progress - Structured results table with type badges and copy per-result - Copy All and Export CSV functionality - Thorough scan toggle (maps to tryHarder in zxing-wasm) - Before/after view shows annotated image with bounding boxes - Updated tool description in constants and i18n * feat(stitch): update tool name and description for redesign * feat(stitch): add grid layout, alignment, border, radius, quality, and new resize modes * feat(stitch): redesign settings UI with grid, alignment, border, radius, quality * test(stitch): add stitch to e2e tool navigation suite * feat(vectorize): redesign with dual-engine backend and preset-driven UI - Backend: potrace for B&W, VTracer (@neplex/vectorizer) for full-color vectorization - Frontend: 5 presets (logo, illustration, photo, sketch, custom) - Settings: color precision, gradient step, detail, smoothing, corner threshold, invert - Updated OpenAPI spec and i18n description * feat(border): redesign with presets, shadow, padding color, swatches - Add 8 one-click presets (Clean White, Gallery Black, Shadow, Rounded, Polaroid, Vintage, Minimal, Cinematic) - Implement proper shadow rendering with blur, offset X/Y, color, opacity - Add padding color control (was hardcoded white) - Add color swatches for quick color selection - Wrap in form for Enter key submission - Add smart validation (requires at least one effect active) - Align frontend/backend slider ranges - Organize UI with sections and collapsible shadow toggle * feat(split): overhaul image splitting with live grid overlay and tile preview - Add interactive-split display mode with SplitCanvas component - Live SVG grid overlay on uploaded image showing split boundaries - Two split modes: Grid (NxM) and Tile Size (px dimensions) - 9 grid presets (2x1, 1x2, 2x2, 3x1, 1x3, 3x3, 2x3, 3x2, 4x4) - Output format selection (original/PNG/JPG/WebP) with quality slider - Post-split tile preview thumbnails with individual download - Download All as ZIP button - HEIC/HEIF preview with loading spinner - Backend: tile-size mode, output format conversion, quality control - Zustand store for split state management * feat(split): rewrite backend and frontend settings Backend: tile-size mode, output format conversion, quality control. Frontend: split modes, presets, format selector, tile preview grid. * feat(border): add live CSS preview and remove before/after slider - Add imageWrapperStyle prop to ImageViewer for live border preview - Add onImageStyle callback through tool-page to settings components - Change border displayMode to no-comparison (no slider) - BorderControls sends live CSS styles (border, padding, radius, shadow) - Preview updates instantly as user adjusts sliders or clicks presets * fix: repair i18n file corrupted by formatter during merge conflict resolution * feat(border): enable live CSS preview in right pane as settings change * fix(border): keep CSS preview visible after processing for WYSIWYG consistency * chore: add @dnd-kit/core and @dnd-kit/sortable for pipeline drag-and-drop * feat(pipeline): add Zustand store for pipeline step management * feat(automate): add pipeline step settings summary utility with tests * feat(automate): add POST /api/v1/pipeline/batch for multi-file pipeline execution * feat(automate): add usePipelineProcessor hook for single and batch pipeline execution * fix(automate): pass settings prop to all pipeline step controls for state restoration * feat(automate): rewrite pipeline builder with dnd-kit drag-and-drop and compact step cards * feat(automate): rewrite page with two-panel layout, image preview, and batch support * test(automate): update e2e tests for new two-panel pipeline layout --------- Co-authored-by: Siddharth Kumar Sah <siddharth123sk@gmail.com>
This commit is contained in:
stirling-image
co-authored by
Siddharth Kumar Sah
Siddharth Kumar Sah
parent
a1e11dff74
commit
fb33a46a64
+29
-171
@@ -10,7 +10,7 @@ test.describe("Automate Page", () => {
|
||||
*/
|
||||
async function gotoAutomate(page: import("@playwright/test").Page) {
|
||||
const heading = page.getByRole("heading", {
|
||||
name: /automation pipeline/i,
|
||||
name: /automate/i,
|
||||
});
|
||||
|
||||
for (let attempt = 0; attempt < 3; attempt++) {
|
||||
@@ -60,10 +60,11 @@ test.describe("Automate Page", () => {
|
||||
|
||||
const testImagePath = getTestImagePath();
|
||||
|
||||
/** Upload the test image via file chooser. */
|
||||
/** Upload the test image via the Dropzone file chooser in the right panel. */
|
||||
async function uploadTestFile(page: import("@playwright/test").Page) {
|
||||
const fileChooserPromise = page.waitForEvent("filechooser");
|
||||
await page.getByRole("button", { name: /upload image to process/i }).click();
|
||||
// The Dropzone renders a button labelled "Upload from computer"
|
||||
await page.getByRole("button", { name: /upload from computer/i }).click();
|
||||
const fileChooser = await fileChooserPromise;
|
||||
await fileChooser.setFiles(testImagePath);
|
||||
await page.waitForTimeout(500);
|
||||
@@ -73,17 +74,19 @@ test.describe("Automate Page", () => {
|
||||
|
||||
test("automate page renders pipeline builder", async ({ loggedInPage: page }) => {
|
||||
await gotoAutomate(page);
|
||||
await expect(page.getByText(/chain multiple tools/i).first()).toBeVisible();
|
||||
await expect(page.getByText(/chain tools into a pipeline/i).first()).toBeVisible();
|
||||
});
|
||||
|
||||
test("shows empty state message when no steps", async ({ loggedInPage: page }) => {
|
||||
await gotoAutomate(page);
|
||||
await expect(page.getByText(/add steps to build your automation pipeline/i)).toBeVisible();
|
||||
await expect(page.getByText(/add steps to build your pipeline/i)).toBeVisible();
|
||||
});
|
||||
|
||||
test("shows upload image button", async ({ loggedInPage: page }) => {
|
||||
test("shows dropzone when no file uploaded", async ({ loggedInPage: page }) => {
|
||||
await gotoAutomate(page);
|
||||
await expect(page.getByRole("button", { name: /upload image to process/i })).toBeVisible();
|
||||
// The Dropzone section should be visible with its upload button
|
||||
await expect(page.locator("section[aria-label='File drop zone']")).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: /upload from computer/i })).toBeVisible();
|
||||
});
|
||||
|
||||
test("has Add Step button", async ({ loggedInPage: page }) => {
|
||||
@@ -103,9 +106,12 @@ test.describe("Automate Page", () => {
|
||||
|
||||
test("has Save Pipeline button (disabled when no steps)", async ({ loggedInPage: page }) => {
|
||||
await gotoAutomate(page);
|
||||
const saveBtn = page.getByRole("button", { name: "Save Pipeline" });
|
||||
await expect(saveBtn).toBeVisible();
|
||||
await expect(saveBtn).toBeDisabled();
|
||||
// Save Pipeline button is only rendered when steps > 0, so it should not exist yet
|
||||
await expect(page.getByRole("button", { name: "Save Pipeline" })).not.toBeVisible();
|
||||
|
||||
// Add a step so the button appears
|
||||
await addToolStep(page, "Resize", 1);
|
||||
await expect(page.getByRole("button", { name: "Save Pipeline" })).toBeVisible();
|
||||
});
|
||||
|
||||
// --- Add Step ---
|
||||
@@ -116,19 +122,11 @@ test.describe("Automate Page", () => {
|
||||
await expect(page.getByText("Add a step")).toBeVisible();
|
||||
});
|
||||
|
||||
test("tool picker shows available tools", async ({ loggedInPage: page }) => {
|
||||
await gotoAutomate(page);
|
||||
await page.getByRole("button", { name: /add step/i }).click();
|
||||
const pickerArea = page.locator(".max-h-80.overflow-y-auto");
|
||||
await expect(pickerArea.getByText("Resize").first()).toBeVisible();
|
||||
await expect(pickerArea.getByText("Convert").first()).toBeVisible();
|
||||
});
|
||||
|
||||
test("selecting a tool from picker adds a step", async ({ loggedInPage: page }) => {
|
||||
await gotoAutomate(page);
|
||||
await addToolStep(page, "Resize", 1);
|
||||
// Verify empty state is gone
|
||||
await expect(page.getByText(/add steps to build your automation pipeline/i)).not.toBeVisible();
|
||||
await expect(page.getByText(/add steps to build your pipeline/i)).not.toBeVisible();
|
||||
});
|
||||
|
||||
test("can add multiple steps", async ({ loggedInPage: page }) => {
|
||||
@@ -157,56 +155,14 @@ test.describe("Automate Page", () => {
|
||||
await waitForSteps(page, 1);
|
||||
});
|
||||
|
||||
test("can expand step settings", async ({ loggedInPage: page }) => {
|
||||
await gotoAutomate(page);
|
||||
await addToolStep(page, "Resize", 1);
|
||||
// Adding a second step collapses the first (only one expanded at a time)
|
||||
await addToolStep(page, "Compress", 2);
|
||||
|
||||
// Expand the first step's settings
|
||||
await page.getByTitle("Settings").first().click();
|
||||
await expect(page.getByText("Custom Size").first()).toBeVisible();
|
||||
});
|
||||
|
||||
test("move up button disabled on first step", async ({ loggedInPage: page }) => {
|
||||
await gotoAutomate(page);
|
||||
await addToolStep(page, "Resize", 1);
|
||||
await addToolStep(page, "Compress", 2);
|
||||
|
||||
await expect(page.getByTitle("Move up").first()).toBeDisabled();
|
||||
});
|
||||
|
||||
test("move down button disabled on last step", async ({ loggedInPage: page }) => {
|
||||
await gotoAutomate(page);
|
||||
await addToolStep(page, "Resize", 1);
|
||||
await addToolStep(page, "Compress", 2);
|
||||
|
||||
await expect(page.getByTitle("Move down").last()).toBeDisabled();
|
||||
});
|
||||
|
||||
// --- File Upload ---
|
||||
|
||||
test("can upload a file via file chooser", async ({ loggedInPage: page }) => {
|
||||
test("can upload a file via dropzone", async ({ loggedInPage: page }) => {
|
||||
await gotoAutomate(page);
|
||||
await uploadTestFile(page);
|
||||
|
||||
// File name and size should be visible in the upload area
|
||||
// File name should be visible in the left panel file info section
|
||||
await expect(page.getByText("test-image.png")).toBeVisible();
|
||||
// The file size text is inside the dashed border area
|
||||
const uploadArea = page.locator("[class*='border-dashed']").first();
|
||||
await expect(uploadArea.getByText(/KB\)/)).toBeVisible();
|
||||
});
|
||||
|
||||
test("can remove uploaded file", async ({ loggedInPage: page }) => {
|
||||
await gotoAutomate(page);
|
||||
await uploadTestFile(page);
|
||||
await expect(page.getByText("test-image.png")).toBeVisible();
|
||||
|
||||
// Remove file - the X button inside the dashed upload area
|
||||
const uploadArea = page.locator("[class*='border-dashed']").first();
|
||||
await uploadArea.locator("button").click();
|
||||
|
||||
await expect(page.getByRole("button", { name: /upload image to process/i })).toBeVisible();
|
||||
});
|
||||
|
||||
// --- Save Pipeline ---
|
||||
@@ -215,7 +171,7 @@ test.describe("Automate Page", () => {
|
||||
await gotoAutomate(page);
|
||||
await addToolStep(page, "Resize", 1);
|
||||
|
||||
await expect(page.getByRole("button", { name: "Save Pipeline" })).toBeEnabled();
|
||||
await expect(page.getByRole("button", { name: "Save Pipeline" })).toBeVisible();
|
||||
});
|
||||
|
||||
test("clicking Save Pipeline shows name input form", async ({ loggedInPage: page }) => {
|
||||
@@ -226,19 +182,7 @@ test.describe("Automate Page", () => {
|
||||
await expect(page.getByPlaceholder("Pipeline name")).toBeVisible();
|
||||
});
|
||||
|
||||
test("Save button disabled when name is empty", async ({ loggedInPage: page }) => {
|
||||
await gotoAutomate(page);
|
||||
await addToolStep(page, "Resize", 1);
|
||||
|
||||
await page.getByRole("button", { name: "Save Pipeline" }).click();
|
||||
const saveSubmitBtn = page.getByRole("button", {
|
||||
name: "Save",
|
||||
exact: true,
|
||||
});
|
||||
await expect(saveSubmitBtn).toBeDisabled();
|
||||
});
|
||||
|
||||
test("can save a pipeline with name and see it in sidebar", async ({ loggedInPage: page }) => {
|
||||
test("can save a pipeline and see it as a chip", async ({ loggedInPage: page }) => {
|
||||
await gotoAutomate(page);
|
||||
await addToolStep(page, "Resize", 1);
|
||||
await addToolStep(page, "Compress", 2);
|
||||
@@ -248,26 +192,12 @@ test.describe("Automate Page", () => {
|
||||
await page.getByPlaceholder("Pipeline name").fill(uniqueName);
|
||||
await page.getByRole("button", { name: "Save", exact: true }).click();
|
||||
|
||||
// Wait for the pipeline to appear in sidebar
|
||||
// The saved pipeline should appear as a chip in the saved pipelines strip
|
||||
await expect(page.getByText(uniqueName).first()).toBeVisible({
|
||||
timeout: 5_000,
|
||||
});
|
||||
});
|
||||
|
||||
test("can close save form without saving", async ({ loggedInPage: page }) => {
|
||||
await gotoAutomate(page);
|
||||
await addToolStep(page, "Resize", 1);
|
||||
|
||||
await page.getByRole("button", { name: "Save Pipeline" }).click();
|
||||
await expect(page.getByPlaceholder("Pipeline name")).toBeVisible();
|
||||
|
||||
// Close the form - the last button in the save form row
|
||||
const formRow = page.locator(".flex.items-center.gap-2.flex-1");
|
||||
await formRow.locator("button").last().click();
|
||||
|
||||
await expect(page.getByRole("button", { name: "Save Pipeline" })).toBeVisible();
|
||||
});
|
||||
|
||||
// --- Pipeline Execution ---
|
||||
|
||||
test("Process button enables when steps and file are set", async ({ loggedInPage: page }) => {
|
||||
@@ -278,7 +208,7 @@ test.describe("Automate Page", () => {
|
||||
await expect(page.getByRole("button", { name: "Process", exact: true })).toBeEnabled();
|
||||
});
|
||||
|
||||
test("executing pipeline shows success result", async ({ loggedInPage: page }) => {
|
||||
test("executing pipeline shows before/after result", async ({ loggedInPage: page }) => {
|
||||
await gotoAutomate(page);
|
||||
await addToolStep(page, "Strip Metadata", 1);
|
||||
await addToolStep(page, "Compress", 2);
|
||||
@@ -286,84 +216,12 @@ test.describe("Automate Page", () => {
|
||||
|
||||
await page.getByRole("button", { name: "Process", exact: true }).click();
|
||||
|
||||
// Wait for result (pipeline completed text)
|
||||
await expect(page.getByText(/pipeline completed/i)).toBeVisible({ timeout: 30_000 });
|
||||
// Wait for the before/after slider to appear (indicates processing completed)
|
||||
const slider = page.locator("[aria-label='Before/after comparison slider']");
|
||||
await expect(slider).toBeVisible({ timeout: 30_000 });
|
||||
|
||||
// Should show original/processed sizes
|
||||
await expect(page.getByText(/original/i)).toBeVisible();
|
||||
await expect(page.getByText(/processed/i)).toBeVisible();
|
||||
|
||||
// Should show download button
|
||||
await expect(page.getByRole("link", { name: /download result/i })).toBeVisible();
|
||||
});
|
||||
|
||||
// --- Saved Pipeline Interactions ---
|
||||
|
||||
test("can load a saved pipeline into builder", async ({ loggedInPage: page }) => {
|
||||
await gotoAutomate(page);
|
||||
|
||||
const uniqueName = `Load Pipeline ${Date.now()}`;
|
||||
|
||||
// Build and save a 2-step pipeline
|
||||
await addToolStep(page, "Resize", 1);
|
||||
await addToolStep(page, "Compress", 2);
|
||||
|
||||
await page.getByRole("button", { name: "Save Pipeline" }).click();
|
||||
await page.getByPlaceholder("Pipeline name").fill(uniqueName);
|
||||
await page.getByRole("button", { name: "Save", exact: true }).click();
|
||||
await expect(page.getByText(uniqueName).first()).toBeVisible({
|
||||
timeout: 5_000,
|
||||
});
|
||||
|
||||
// Remove a step so we can tell loading worked
|
||||
await page.getByTitle("Remove").first().click();
|
||||
await waitForSteps(page, 1);
|
||||
|
||||
// Click on the saved pipeline to load it
|
||||
await page.getByRole("button", { name: uniqueName }).first().click();
|
||||
await waitForSteps(page, 2);
|
||||
});
|
||||
|
||||
test("can delete a saved pipeline", async ({ loggedInPage: page }) => {
|
||||
await gotoAutomate(page);
|
||||
|
||||
const uniqueName = `Delete Pipeline ${Date.now()}`;
|
||||
|
||||
// Build and save a pipeline
|
||||
await addToolStep(page, "Resize", 1);
|
||||
|
||||
await page.getByRole("button", { name: "Save Pipeline" }).click();
|
||||
await page.getByPlaceholder("Pipeline name").fill(uniqueName);
|
||||
await page.getByRole("button", { name: "Save", exact: true }).click();
|
||||
await expect(page.getByText(uniqueName).first()).toBeVisible({
|
||||
timeout: 5_000,
|
||||
});
|
||||
|
||||
// Hover to reveal delete, then click
|
||||
const pipelineEntry = page.locator(".group").filter({ hasText: uniqueName }).first();
|
||||
await pipelineEntry.hover();
|
||||
await pipelineEntry
|
||||
.locator("button")
|
||||
.filter({ has: page.locator("svg") })
|
||||
.last()
|
||||
.click();
|
||||
|
||||
await expect(pipelineEntry).not.toBeVisible({ timeout: 5_000 });
|
||||
});
|
||||
|
||||
// --- Sidebar ---
|
||||
|
||||
test("sidebar shows Saved Automations when pipelines exist", async ({ loggedInPage: page }) => {
|
||||
await gotoAutomate(page);
|
||||
await addToolStep(page, "Resize", 1);
|
||||
|
||||
const uniqueName = `Sidebar Pipeline ${Date.now()}`;
|
||||
await page.getByRole("button", { name: "Save Pipeline" }).click();
|
||||
await page.getByPlaceholder("Pipeline name").fill(uniqueName);
|
||||
await page.getByRole("button", { name: "Save", exact: true }).click();
|
||||
|
||||
await expect(page.getByText("Saved Automations")).toBeVisible({
|
||||
timeout: 5_000,
|
||||
});
|
||||
// Should show Original and Processed labels inside the slider
|
||||
await expect(page.getByText("Original").first()).toBeVisible();
|
||||
await expect(page.getByText("Processed").first()).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user