Merge pull request writer#673 from writer/fix-not-draggable-toolkit

fix: Cannot add tool when dragging by image
tedjulian · Dec 3, 2024 · 99fcb0d · 99fcb0d
2 parents a041f1a + ba1bdf0
commit 99fcb0d
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/apps/default/main.py b/apps/default/main.py
@@ -23,14 +23,14 @@ def increment(state):
     print("The counter has been incremented.")
     _update_message(state)
 
-# Initialise the state
+# Initialize the state
 
-# "_my_private_element" won't be serialised or sent to the frontend,
+# "_my_private_element" won't be serialized or sent to the frontend,
 # because it starts with an underscore
 
 initial_state = wf.init_state({
     "my_app": {
-        "title": "MY APP"
+        "title": "My app"
     },
     "_my_private_element": 1337,
     "message": None,

diff --git a/src/ui/src/builder/BuilderApp.vue b/src/ui/src/builder/BuilderApp.vue
@@ -29,9 +29,7 @@
 					:key="selectedId ?? 'noneSelected'"
 				></BuilderSettings>
 			</div>
-			<BuilderPanelSwitcher
-				class="builderPanelSwitcher"
-			></BuilderPanelSwitcher>
+			<BuilderPanelSwitcher class="panelSwitcher"></BuilderPanelSwitcher>
 		</div>
 
 		<!-- INSTANCE TRACKERS -->
@@ -375,7 +373,7 @@ onMounted(() => {
 	--notificationsDisplacement: calc(var(--builderSettingsWidth) + 24px);
 }
 
-.builderPanelSwitcher {
+.panelSwitcher {
 	grid-column: 2 / 3;
 	grid-row: 3;
 }

diff --git a/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue b/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue
@@ -26,6 +26,7 @@
 					<img
 						:alt="`(Icon for ${tool.name})`"
 						:src="`./../../../../components/${tool.type}.svg`"
+						draggable="false"
 						@error="
 							!isImageFallback[tool.type]
 								? handleImageError(

diff --git a/tests/e2e/tests/workflows.spec.ts b/tests/e2e/tests/workflows.spec.ts
@@ -28,10 +28,12 @@ test.describe("Workflows", () => {
 		}) => {
 			await page.getByPlaceholder(object).fill(color);
 			await page.locator(`[data-automation-action="toggle-panel"][data-automation-key="log"]`).click();
-			const rowLocator = page
-				.locator(".BuilderPanelSwitcher div.row")
-				.filter({ hasText: "Return value" });
+			const rowsLocator = page
+				.locator(".BuilderPanelSwitcher div.row");
+			await expect(rowsLocator).toHaveCount(3);
+			const rowLocator = rowsLocator.filter({ hasText: "Return value" });
 			await rowLocator.getByRole("button", { name: "Details" }).click();
+			await expect(page.locator(".BuilderModal")).toBeVisible();
 			const resultsLocator = page.locator(
 				`.BuilderModal [data-automation-key="result"]`,
 			);
@@ -93,10 +95,11 @@ test.describe("Workflows", () => {
 		await page.locator(`[data-automation-action="run-workflow"]`).click();
 
 		await page.locator(`[data-automation-action="toggle-panel"][data-automation-key="log"]`).click();
-		const rowLocator = page
-			.locator(".BuilderPanelSwitcher div.row")
-			.filter({ hasText: "Return value" }).first();;
+		const rowsLocator = page.locator(".BuilderPanelSwitcher div.row");
+		await expect(rowsLocator).toHaveCount(5);
+		const rowLocator = rowsLocator.filter({ hasText: "Return value" }).first();;
 		await rowLocator.getByRole("button", { name: "Details" }).click();
+		await expect(page.locator(".BuilderModal")).toBeVisible();
 		const returnValueLocator = page.locator(
 			`.BuilderModal [data-automation-key="return-value"]`,
 		);