From feff801cfdf4b26312de6072e1623dd694d39652 Mon Sep 17 00:00:00 2001
From: Farber98 <juan.farber@smartcontract.com>
Date: Mon, 24 Jun 2024 14:00:58 -0300
Subject: [PATCH 1/3] Add button to drop 'unstarted' txs

---
 @types/core/store/models.d.ts               |  2 +
 src/api/v2/evmKeys.ts                       |  7 +++
 src/screens/KeyManagement/EVMAccountRow.tsx | 54 +++++++++++++++++++--
 3 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/@types/core/store/models.d.ts b/@types/core/store/models.d.ts
index 5840b584..35da4268 100644
--- a/@types/core/store/models.d.ts
+++ b/@types/core/store/models.d.ts
@@ -62,6 +62,8 @@ declare module 'core/store/models' {
     nextNonce: ?integer
     abandon: ?boolean
     enabled: ?boolean
+    abandonUnstarted: ?boolean
+    subject: ?string
   }
 
   export interface BuildInfo {
diff --git a/src/api/v2/evmKeys.ts b/src/api/v2/evmKeys.ts
index a5ea62c7..0843a2ec 100644
--- a/src/api/v2/evmKeys.ts
+++ b/src/api/v2/evmKeys.ts
@@ -22,6 +22,13 @@ export class EVMKeys {
     if (request.enabled !== null) {
       query.append('enabled', String(request.enabled))
     }
+    if (request.abandonUnstarted !== null) {
+      query.append('abandonUnstarted', String(request.abandonUnstarted))
+      
+      if (request.subject !== null) {
+        query.append('subject', request.subject)
+      }
+    }
 
     const endpoint = ENDPOINT + '?' + query.toString()
 
diff --git a/src/screens/KeyManagement/EVMAccountRow.tsx b/src/screens/KeyManagement/EVMAccountRow.tsx
index 1bab0e41..8c1cf85d 100644
--- a/src/screens/KeyManagement/EVMAccountRow.tsx
+++ b/src/screens/KeyManagement/EVMAccountRow.tsx
@@ -50,8 +50,8 @@ const styles = (theme: Theme) =>
       lineHeight: '1rem',
     },
     dialogPaper: {
-      minHeight: '360px',
-      maxHeight: '360px',
+      minHeight: '450px',
+      maxHeight: '450px',
       minWidth: '670px',
       maxWidth: '670px',
       overflow: 'hidden',
@@ -98,12 +98,16 @@ function apiCall({
   nextNonce,
   abandon,
   enabled,
+  abandonUnstarted,
+  subject
 }: {
   evmChainID: string
   address: string
   nextNonce: bigint | null
   abandon: boolean
   enabled: boolean
+  abandonUnstarted: boolean
+  subject: string
 }): Promise<ApiResponse<EVMKey>> {
   const definition: EVMKeysChainRequest = {
     evmChainID,
@@ -111,6 +115,8 @@ function apiCall({
     nextNonce,
     abandon,
     enabled,
+    abandonUnstarted,
+    subject,
   }
   return api.v2.evmKeys.chain(definition)
 }
@@ -128,10 +134,12 @@ const UnstyledEVMAccountRow: React.FC<Props> = ({
   const [enabled, setEnabled] = useState(!ethKey.isDisabled)
   const [nextNonce, setNextNonce] = useState<bigint | null>(null)
   const [abandon, setAbandon] = useState(false)
+  const [abandonUnstarted, setAbandonUnstarted] = useState(false)
+  const [subject, setSubject] = useState('')
 
   const onSubmit = (event: React.SyntheticEvent) => {
     event.preventDefault()
-    handleUpdate(nextNonce, abandon, enabled)
+    handleUpdate(nextNonce, abandon, enabled, abandonUnstarted, subject)
   }
 
   const handleEnabledCheckboxChange = () => {
@@ -146,18 +154,30 @@ const UnstyledEVMAccountRow: React.FC<Props> = ({
     setAbandon(!abandon)
   }
 
+  const handleAbandonUnstartedCheckboxChange = () => {
+    setAbandonUnstarted(!abandonUnstarted)
+  }
+
+  const handleSubjectFieldChange = (event: any) => {
+    setSubject(event.target.value)
+  }
+
   const closeModal = () => {
     setModalOpen(false)
     // reset state
     setAbandon(false)
     setNextNonce(null)
     setEnabled(!ethKey.isDisabled)
+    setAbandonUnstarted(false)
+    setSubject('')
   }
 
   async function handleUpdate(
     nextNonce: bigint | null,
     abandon: boolean,
     enabled: boolean,
+    abandonUnstarted: boolean,
+    subject: string,
   ) {
     apiCall({
       evmChainID: ethKey.chain.id,
@@ -165,6 +185,8 @@ const UnstyledEVMAccountRow: React.FC<Props> = ({
       nextNonce,
       abandon,
       enabled,
+      abandonUnstarted,
+      subject,
     })
       .then(({ data }) => {
         refetch && refetch()
@@ -254,6 +276,32 @@ const UnstyledEVMAccountRow: React.FC<Props> = ({
                     label="Abandon all current transactions (use with caution!)"
                   />
                 </FormGroup>
+                <FormGroup>
+                  <FormControlLabel
+                    className={classes.infoText}
+                    color="secondary"
+                    control={
+                      <Checkbox
+                        name="abandonUnstartedCheckbox"
+                        checked={abandonUnstarted}
+                        onChange={handleAbandonUnstartedCheckboxChange}
+                      />
+                    }
+                    label="Abandon unstarted transactions"
+                  />
+                </FormGroup>
+                {abandonUnstarted && (
+                  <FormGroup>
+                    <TextField
+                      className={classes.infoText}
+                      name="subjectField"
+                      type="text"
+                      label="Subject (optional)"
+                      value={subject}
+                      onChange={handleSubjectFieldChange}
+                    />
+                  </FormGroup>
+                )}
                 <Grid
                   container
                   spacing={0}

From 3f7c7e760a7a8aa8ac8dc9b38b65ce0649d881dd Mon Sep 17 00:00:00 2001
From: Farber98 <juan.farber@smartcontract.com>
Date: Wed, 26 Jun 2024 09:46:42 -0300
Subject: [PATCH 2/3] fix text field out of modal borders

---
 src/screens/KeyManagement/EVMAccountRow.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/screens/KeyManagement/EVMAccountRow.tsx b/src/screens/KeyManagement/EVMAccountRow.tsx
index 8c1cf85d..982ccef9 100644
--- a/src/screens/KeyManagement/EVMAccountRow.tsx
+++ b/src/screens/KeyManagement/EVMAccountRow.tsx
@@ -84,6 +84,12 @@ const styles = (theme: Theme) =>
     runJobModalContent: {
       overflow: 'hidden',
     },
+    // Adjusts the text field to fit within the modal padding
+    textField: {
+      marginLeft: theme.spacing.unit * 6,
+      marginRight: theme.spacing.unit * 6,
+      width: 'calc(100% - 96px)', 
+    },
   })
 
 interface Props {
@@ -293,7 +299,7 @@ const UnstyledEVMAccountRow: React.FC<Props> = ({
                 {abandonUnstarted && (
                   <FormGroup>
                     <TextField
-                      className={classes.infoText}
+                      className={classes.textField}
                       name="subjectField"
                       type="text"
                       label="Subject (optional)"

From 3401d0aa9cf6c0a8993ad95219d28b66ff07bb98 Mon Sep 17 00:00:00 2001
From: Farber98 <juan.farber@smartcontract.com>
Date: Wed, 26 Jun 2024 10:23:41 -0300
Subject: [PATCH 3/3] add changeset

---
 .changeset/pretty-gifts-complain.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/pretty-gifts-complain.md

diff --git a/.changeset/pretty-gifts-complain.md b/.changeset/pretty-gifts-complain.md
new file mode 100644
index 00000000..5a9d4dc4
--- /dev/null
+++ b/.changeset/pretty-gifts-complain.md
@@ -0,0 +1,5 @@
+---
+'@smartcontractkit/operator-ui': minor
+---
+
+add button to drop 'unstarted' txs