From 896fa97269a366c703f9af4a4daa1eab2061988d Mon Sep 17 00:00:00 2001
From: Tyler Ohlsen <ohltyler@amazon.com>
Date: Thu, 19 Oct 2023 08:48:46 -0700
Subject: [PATCH] Prevent edge deletion from triggering form validation

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>
---
 .../workspace_component/workspace_component.tsx                | 3 +--
 public/pages/workflow_detail/workspace_edge/deletable_edge.tsx | 3 +++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/pages/workflow_detail/workspace_component/workspace_component.tsx b/public/pages/workflow_detail/workspace_component/workspace_component.tsx
index 3c96d739..20d4953c 100644
--- a/public/pages/workflow_detail/workspace_component/workspace_component.tsx
+++ b/public/pages/workflow_detail/workspace_component/workspace_component.tsx
@@ -4,7 +4,6 @@
  */
 
 import React, { useContext } from 'react';
-import { useFormikContext } from 'formik';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -14,7 +13,7 @@ import {
   EuiButtonIcon,
 } from '@elastic/eui';
 import { rfContext } from '../../../store';
-import { IComponentData, WorkspaceFormValues } from '../../../component_types';
+import { IComponentData } from '../../../component_types';
 import { InputHandle } from './input_handle';
 import { OutputHandle } from './output_handle';
 
diff --git a/public/pages/workflow_detail/workspace_edge/deletable_edge.tsx b/public/pages/workflow_detail/workspace_edge/deletable_edge.tsx
index 0b46f47f..d2ebe61f 100644
--- a/public/pages/workflow_detail/workspace_edge/deletable_edge.tsx
+++ b/public/pages/workflow_detail/workspace_edge/deletable_edge.tsx
@@ -54,6 +54,9 @@ export function DeletableEdge(props: DeletableEdgeProps) {
           className="nodrag nopan"
         >
           <button
+            // We need to specify type as "button" to prevent formik from reading this as a "submit" type
+            // by default, in which case validation is triggered unexpectedly.
+            type="button"
             className="delete-edge-button"
             onClick={(event) => onEdgeClick(event, props.id)}
           >