Add cancel functionality for intelligent file updates in response preview

Author: robertpiosik

packages/ui/src/components/editor/panel/ResponsePreview/ResponsePreview.tsx

@@ -14,6 +14,10 @@ type Props = {
     file_path: string
     workspace_name?: string
   }) => void
+  on_cancel_intelligent_update: (file: {
+    file_path: string
+    workspace_name?: string
+  }) => void
   on_toggle_file: (file: {
     file_path: string
     workspace_name?: string
@@ -223,6 +227,12 @@ export const ResponsePreview: FC<Props> = (props) => {
                       workspace_name: file.workspace_name
                     })
                   }
+                  on_cancel_intelligent_update={() =>
+                    props.on_cancel_intelligent_update({
+                      file_path: file.file_path,
+                      workspace_name: file.workspace_name
+                    })
+                  }
                   on_go_to_file={() =>
                     props.on_go_to_file({
                       file_path: file.file_path,

packages/ui/src/components/editor/panel/ResponsePreview/components/FileItem/FileItem.module.scss

@@ -11,6 +11,16 @@
   color: var(--vscode-descriptionForeground);
   margin-right: 4px;
   white-space: nowrap;
+
+  &__cancel {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--vscode-textLink-foreground);
+    }
+  }
 }
 
 .file {

packages/ui/src/components/editor/panel/ResponsePreview/components/FileItem/FileItem.tsx

@@ -15,6 +15,7 @@ type Props = {
   on_discard_user_changes: () => void
   on_preview_generated_code: () => void
   on_intelligent_update: () => void
+  on_cancel_intelligent_update: () => void
   on_go_to_file: () => void
 }
 
@@ -56,6 +57,7 @@ export const FileItem: FC<Props> = ({
   on_discard_user_changes,
   on_preview_generated_code,
   on_intelligent_update,
+  on_cancel_intelligent_update,
   on_go_to_file
 }) => {
   const message_obj = get_file_message(file)
@@ -82,6 +84,18 @@ export const FileItem: FC<Props> = ({
       <div className={styles.progress}>
         <span>{status_text}</span>
         <span className="codicon codicon-loading codicon-modifier-spin" />
+        {file.apply_status !== 'done' && (
+          <div
+            className={styles.progress__cancel}
+            onClick={(e) => {
+              e.stopPropagation()
+              on_cancel_intelligent_update()
+            }}
+            title="Cancel"
+          >
+            <span className="codicon codicon-close" />
+          </div>
+        )}
       </div>
     )
   }

packages/vscode/src/views/panel/backend/message-handlers/handle-cancel-intelligent-update-file-in-preview.ts

@@ -0,0 +1,29 @@
+import { PanelProvider } from '@/views/panel/backend/panel-provider'
+
+import { CancelIntelligentUpdateFileInPreviewMessage } from '@/views/panel/types/messages'
+
+export const handle_cancel_intelligent_update_file_in_preview = (
+  panel_provider: PanelProvider,
+
+  message: CancelIntelligentUpdateFileInPreviewMessage
+) => {
+  const { file_path, workspace_name } = message
+
+  const source_index =
+    panel_provider.intelligent_update_cancel_token_sources.findIndex(
+      (s) => s.file_path === file_path && s.workspace_name === workspace_name
+    )
+
+  if (source_index > -1) {
+    const { source } =
+      panel_provider.intelligent_update_cancel_token_sources[source_index]
+
+    source.cancel('User cancelled the operation')
+
+    panel_provider.intelligent_update_cancel_token_sources.splice(
+      source_index,
+
+      1
+    )
+  }
+}

packages/vscode/src/views/panel/backend/message-handlers/handle-intelligent-update-file-in-preview.ts

@@ -127,9 +127,11 @@ export const handle_intelligent_update_file_in_preview = async (
   if (!safe_path) return
 
   const cancel_token_source = axios.CancelToken.source()
-  panel_provider.intelligent_update_cancel_token_sources.push(
-    cancel_token_source
-  )
+  panel_provider.intelligent_update_cancel_token_sources.push({
+    source: cancel_token_source,
+    file_path,
+    workspace_name
+  })
 
   panel_provider.send_message({
     command: 'UPDATE_FILE_PROGRESS',
@@ -265,8 +267,8 @@ export const handle_intelligent_update_file_in_preview = async (
     }
   } finally {
     const index =
-      panel_provider.intelligent_update_cancel_token_sources.indexOf(
-        cancel_token_source
+      panel_provider.intelligent_update_cancel_token_sources.findIndex(
+        (s) => s.source === cancel_token_source
       )
     if (index > -1) {
       panel_provider.intelligent_update_cancel_token_sources.splice(index, 1)

packages/vscode/src/views/panel/backend/message-handlers/index.ts

@@ -60,3 +60,4 @@ export * from './handle-delete-task'
 export * from './handle-preview-generated-code'
 export * from './handle-fix-all-failed-files'
 export * from './handle-prune-context'
+export * from './handle-cancel-intelligent-update-file-in-preview'

packages/vscode/src/views/panel/backend/panel-provider.ts

@@ -78,7 +78,8 @@ import {
   handle_save_tasks,
   handle_delete_task,
   handle_fix_all_failed_files,
-  handle_prune_context
+  handle_prune_context,
+  handle_cancel_intelligent_update_file_in_preview
 } from './message-handlers'
 import {
   API_EDIT_FORMAT_STATE_KEY,
@@ -124,7 +125,11 @@ export class PanelProvider implements vscode.WebviewViewProvider {
   public api_edit_format: EditFormat
   public api_prompt_type: ApiPromptType
   public mode: Mode = MODE.WEB
-  public intelligent_update_cancel_token_sources: CancelTokenSource[] = []
+  public intelligent_update_cancel_token_sources: {
+    source: CancelTokenSource
+    file_path: string
+    workspace_name?: string
+  }[] = []
   public api_call_cancel_token_source: CancelTokenSource | null = null
   public api_manager!: ApiManager
   public commit_was_staged_by_script: boolean = false
@@ -406,7 +411,7 @@ export class PanelProvider implements vscode.WebviewViewProvider {
   public cancel_all_intelligent_updates() {
     const sources = [...this.intelligent_update_cancel_token_sources]
     this.intelligent_update_cancel_token_sources = []
-    sources.forEach((source) => source.cancel('Preview finished.'))
+    sources.forEach((item) => item.source.cancel('Preview finished.'))
   }
 
   public send_context_files() {
@@ -637,6 +642,10 @@ export class PanelProvider implements vscode.WebviewViewProvider {
             await handle_discard_user_changes_in_preview(message)
           } else if (message.command == 'INTELLIGENT_UPDATE_FILE_IN_PREVIEW') {
             await handle_intelligent_update_file_in_preview(this, message)
+          } else if (
+            message.command == 'CANCEL_INTELLIGENT_UPDATE_FILE_IN_PREVIEW'
+          ) {
+            handle_cancel_intelligent_update_file_in_preview(this, message)
           } else if (message.command == 'RESPONSE_PREVIEW') {
             await handle_response_preview(message)
           } else if (message.command == 'REMOVE_RESPONSE_HISTORY_ITEM') {

packages/vscode/src/views/panel/frontend/Panel.tsx

@@ -557,6 +557,13 @@ export const Panel = () => {
                     workspace_name: file.workspace_name
                   })
                 }}
+                on_cancel_intelligent_update={(file) => {
+                  post_message(vscode, {
+                    command: 'CANCEL_INTELLIGENT_UPDATE_FILE_IN_PREVIEW',
+                    file_path: file.file_path,
+                    workspace_name: file.workspace_name
+                  })
+                }}
                 on_preview_generated_code={(file) => {
                   post_message(vscode, {
                     command: 'PREVIEW_GENERATED_CODE',

packages/vscode/src/views/panel/types/messages.ts

@@ -342,6 +342,12 @@ export interface IntelligentUpdateFileInPreviewMessage extends BaseMessage {
   workspace_name?: string
 }
 
+export interface CancelIntelligentUpdateFileInPreviewMessage extends BaseMessage {
+  command: 'CANCEL_INTELLIGENT_UPDATE_FILE_IN_PREVIEW'
+  file_path: string
+  workspace_name?: string
+}
+
 export interface FixAllFailedFilesMessage extends BaseMessage {
   command: 'FIX_ALL_FAILED_FILES'
 }
@@ -520,6 +526,7 @@ export type FrontendMessage =
   | GetWorkspaceStateMessage
   | RequestGitStateMessage
   | IntelligentUpdateFileInPreviewMessage
+  | CancelIntelligentUpdateFileInPreviewMessage
   | UpdateLastUsedPresetMessage
   | FixAllFailedFilesMessage
   | CommitChangesMessage