Implement the ability to show a Git diff for files listed in the Stage Files Modal

Author: robertpiosik

packages/ui/src/components/editor/panel/modals/StageFilesModal/StageFilesModal.module.scss

@@ -20,13 +20,7 @@
     }
 
     &--select-all {
-      &:hover {
-        background-color: transparent;
-      }
-
-      strong:hover {
-        text-decoration: underline;
-      }
+      font-weight: 500;
     }
 
     &__details {

packages/ui/src/components/editor/panel/modals/StageFilesModal/StageFilesModal.stories.tsx

@@ -29,12 +29,17 @@ export const Default = () => {
     alert(`Go to file: ${file}`)
   }
 
+  const handle_show_diff = (file: string) => {
+    alert(`Show diff for file: ${file}`)
+  }
+
   return visible ? (
     <StageFilesModal
       files={mock_files}
       on_stage={handle_stage}
       on_cancel={handle_cancel}
       on_go_to_file={handle_go_to_file}
+      on_show_diff={handle_show_diff}
     />
   ) : null
 }

packages/ui/src/components/editor/panel/modals/StageFilesModal/StageFilesModal.tsx

@@ -11,6 +11,7 @@ type Props = {
   on_stage: (files_to_stage: string[]) => void
   on_cancel: () => void
   on_go_to_file: (file: string) => void
+  on_show_diff: (file: string) => void
 }
 
 export const StageFilesModal: React.FC<Props> = (props) => {
@@ -56,9 +57,7 @@ export const StageFilesModal: React.FC<Props> = (props) => {
               checked={all_selected}
               on_change={handle_toggle_select_all}
             />
-            <div className={styles.files__item__details}>
-              <strong>Select all</strong>
-            </div>
+            <div className={styles.files__item__details}>Select all</div>
           </label>
           {props.files.map((file) => {
             const last_slash_index = file.lastIndexOf('/')
@@ -84,6 +83,14 @@ export const StageFilesModal: React.FC<Props> = (props) => {
                   )}
                 </div>
                 <div className={styles.files__item__actions}>
+                  <IconButton
+                    codicon_icon="diff-single"
+                    title="Show Diff"
+                    on_click={(e) => {
+                      e.stopPropagation()
+                      props.on_show_diff(file)
+                    }}
+                  />
                   <IconButton
                     codicon_icon="go-to-file"
                     title="Go To File"

packages/vscode/src/views/panel/backend/message-handlers/handle-show-diff.ts

@@ -0,0 +1,75 @@
+import * as vscode from 'vscode'
+import * as path from 'path'
+import { ShowDiffMessage } from '@/views/panel/types/messages'
+import { Logger } from '@shared/utils/logger'
+import { dictionary } from '@shared/constants/dictionary'
+
+export const handle_show_diff = async (
+  message: ShowDiffMessage
+): Promise<void> => {
+  const { file_path } = message
+  const workspace_folders = vscode.workspace.workspaceFolders
+  if (!workspace_folders) {
+    Logger.warn({
+      function_name: 'handle_show_diff',
+      message: 'No workspace folders open'
+    })
+    vscode.window.showWarningMessage(
+      dictionary.error_message.NO_WORKSPACE_FOLDERS_FOUND
+    )
+    return
+  }
+
+  let target_workspace: vscode.WorkspaceFolder | undefined
+
+  if (workspace_folders.length == 1) {
+    target_workspace = workspace_folders[0]
+  } else {
+    for (const folder of workspace_folders) {
+      const potential_uri = vscode.Uri.joinPath(folder.uri, file_path)
+      try {
+        await vscode.workspace.fs.stat(potential_uri)
+        target_workspace = folder
+        break
+      } catch {}
+    }
+  }
+
+  if (!target_workspace) {
+    const error_message =
+      dictionary.error_message.WORKSPACE_NOT_FOUND_FOR_FILE(file_path)
+    Logger.error({
+      function_name: 'handle_show_diff',
+      message: error_message,
+      data: { file_path }
+    })
+    vscode.window.showErrorMessage(error_message)
+    return
+  }
+
+  const rightUri = vscode.Uri.joinPath(target_workspace.uri, file_path)
+
+  try {
+    const leftUri = rightUri.with({
+      scheme: 'git',
+      query: JSON.stringify({ path: rightUri.fsPath, ref: 'HEAD' })
+    })
+    const file_name = path.basename(file_path)
+    const title = `${file_name} (HEAD ↔ Working Tree)`
+
+    await vscode.commands.executeCommand(
+      'vscode.diff',
+      leftUri,
+      rightUri,
+      title
+    )
+  } catch (error) {
+    const error_message = `Could not show diff for file: ${file_path}`
+    Logger.error({
+      function_name: 'handle_show_diff',
+      message: error_message,
+      data: { error, file_path }
+    })
+    vscode.window.showErrorMessage(`${error_message}. See logs for details.`)
+  }
+}

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

@@ -47,3 +47,4 @@ export * from './handle-get-collapsed-states'
 export * from './handle-manage-configurations'
 export * from './handle-save-component-collapsed-state'
 export * from './handle-undo'
+export * from './handle-show-diff'

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

@@ -47,6 +47,7 @@ import {
   handle_save_donations_visibility,
   handle_focus_on_file_in_preview,
   handle_go_to_file,
+  handle_show_diff,
   handle_toggle_file_in_preview,
   handle_intelligent_update_file_in_preview,
   handle_commit_changes,
@@ -513,6 +514,8 @@ export class PanelProvider implements vscode.WebviewViewProvider {
             await handle_save_donations_visibility(this, message)
           } else if (message.command == 'GO_TO_FILE') {
             handle_go_to_file(message)
+          } else if (message.command == 'SHOW_DIFF') {
+            await handle_show_diff(message)
           } else if (message.command == 'FOCUS_ON_FILE_IN_PREVIEW') {
             handle_focus_on_file_in_preview(message)
           } else if (message.command == 'TOGGLE_FILE_IN_REVIEW') {

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

@@ -442,6 +442,12 @@ export const Panel = () => {
                   file_path: file
                 })
               }}
+              on_show_diff={(file) => {
+                post_message(vscode, {
+                  command: 'SHOW_DIFF',
+                  file_path: file
+                })
+              }}
             />
           </div>
         )}

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

@@ -265,6 +265,11 @@ export interface GoToFileMessage extends BaseMessage {
   workspace_name?: string
 }
 
+export interface ShowDiffMessage extends BaseMessage {
+  command: 'SHOW_DIFF'
+  file_path: string
+}
+
 export interface GetWorkspaceStateMessage extends BaseMessage {
   command: 'GET_WORKSPACE_STATE'
 }
@@ -387,6 +392,7 @@ export type FrontendMessage =
   | ToggleFileInReviewMessage
   | FocusOnFileInPreviewMessage
   | GoToFileMessage
+  | ShowDiffMessage
   | GetWorkspaceStateMessage
   | RequestGitStateMessage
   | IntelligentUpdateFileInPreviewMessage