Use selectionMode="multi" in commit files list

Author: pol-rivero

app/src/ui/history/file-list.tsx

@@ -7,8 +7,10 @@ import { CommittedFileItem } from './committed-file-item'
 
 interface IFileListProps {
   readonly files: ReadonlyArray<CommittedFileChange>
-  readonly selectedFile: CommittedFileChange | null
-  readonly onSelectedFileChanged: (file: CommittedFileChange) => void
+  readonly selectedFiles: ReadonlyArray<CommittedFileChange>
+  readonly onSelectionChanged: (
+    files: ReadonlyArray<CommittedFileChange>
+  ) => void
   readonly onRowDoubleClick: (row: number, source: ClickSource) => void
   readonly availableWidth: number
   readonly onContextMenu?: (
@@ -33,9 +35,11 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
     }
   }
 
-  private onSelectedRowChanged = (row: number) => {
-    const file = this.props.files[row]
-    this.props.onSelectedFileChanged(file)
+  private onSelectionChanged = (rows: ReadonlyArray<number>) => {
+    const files = rows
+      .map(r => this.props.files[r])
+      .filter((f): f is CommittedFileChange => f !== undefined)
+    this.props.onSelectionChanged(files)
   }
 
   private renderFile = (row: number) => {
@@ -48,10 +52,11 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
     )
   }
 
-  private selectedRowsForFile(): ReadonlyArray<number> {
-    const { selectedFile: file, files } = this.props
-    const fileIndex = file ? files.findIndex(f => f.path === file.path) : -1
-    return fileIndex >= 0 ? [fileIndex] : []
+  private selectedRowsForFiles(): ReadonlyArray<number> {
+    const { selectedFiles, files } = this.props
+    return selectedFiles
+      .map(sf => files.findIndex(f => f.path === sf.path))
+      .filter(i => i >= 0)
   }
 
   private onRowContextMenu = (
@@ -75,8 +80,9 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
           rowRenderer={this.renderFile}
           rowCount={this.props.files.length}
           rowHeight={29}
-          selectedRows={this.selectedRowsForFile()}
-          onSelectedRowChanged={this.onSelectedRowChanged}
+          selectionMode="multi"
+          selectedRows={this.selectedRowsForFiles()}
+          onSelectionChanged={this.onSelectionChanged}
           onRowDoubleClick={this.props.onRowDoubleClick}
           onRowContextMenu={this.onRowContextMenu}
           onRowKeyboardFocus={this.onRowFocus}

app/src/ui/history/selected-commits.tsx

@@ -14,11 +14,14 @@ import { openFile } from '../lib/open-file'
 import {
   isSafeFileExtension,
   CopyFilePathLabel,
+  CopyRelativeFilePathLabel,
+  CopySelectedPathsLabel,
+  CopySelectedRelativePathsLabel,
   DefaultEditorLabel,
   RevealInFileManagerLabel,
   OpenWithDefaultProgramLabel,
-  CopyRelativeFilePathLabel,
 } from '../lib/context-menu'
+import { EOL } from 'os'
 import { ThrottledScheduler } from '../lib/throttled-scheduler'
 
 import { Dispatcher } from '../dispatcher'
@@ -97,6 +100,7 @@ interface ISelectedCommitsProps {
 
 interface ISelectedCommitsState {
   readonly isExpanded: boolean
+  readonly selectedFiles: ReadonlyArray<CommittedFileChange>
 }
 
 /** The History component. Contains the commit list, commit summary, and diff. */
@@ -111,11 +115,17 @@ export class SelectedCommits extends React.Component<
 
     this.state = {
       isExpanded: false,
+      selectedFiles: [],
     }
   }
 
-  private onFileSelected = (file: CommittedFileChange) => {
-    this.props.dispatcher.changeFileSelection(this.props.repository, file)
+  private onFileSelectionChanged = (
+    files: ReadonlyArray<CommittedFileChange>
+  ) => {
+    this.setState({ selectedFiles: files })
+    if (files.length === 1) {
+      this.props.dispatcher.changeFileSelection(this.props.repository, files[0])
+    }
   }
 
   private onRowDoubleClick = (row: number) => {
@@ -131,9 +141,7 @@ export class SelectedCommits extends React.Component<
     const nextValue = nextProps.selectedCommits.map(c => c.sha).join('')
 
     if (currentValue !== nextValue) {
-      if (this.state.isExpanded) {
-        this.setState({ isExpanded: false })
-      }
+      this.setState({ isExpanded: false, selectedFiles: [] })
     }
   }
 
@@ -266,8 +274,8 @@ export class SelectedCommits extends React.Component<
         {this.renderFileHeader()}
         <FileList
           files={files}
-          onSelectedFileChanged={this.onFileSelected}
-          selectedFile={this.props.selectedFile}
+          onSelectionChanged={this.onFileSelectionChanged}
+          selectedFiles={this.state.selectedFiles}
           availableWidth={availableWidth}
           onContextMenu={this.onContextMenu}
           onRowDoubleClick={this.onRowDoubleClick}
@@ -404,6 +412,42 @@ export class SelectedCommits extends React.Component<
       ? `Open in ${externalEditorLabel}`
       : DefaultEditorLabel
 
+    const { selectedFiles } = this.state
+    const isMultiSelect =
+      selectedFiles.length > 1 && selectedFiles.some(f => f.path === file.path)
+    const filesToCopy = isMultiSelect ? selectedFiles : [file]
+
+    const copyPathItems: ReadonlyArray<IMenuItem> =
+      filesToCopy.length === 1
+        ? [
+            {
+              label: CopyFilePathLabel,
+              action: () => clipboard.writeText(fullPath),
+            },
+            {
+              label: CopyRelativeFilePathLabel,
+              action: () => clipboard.writeText(Path.normalize(file.path)),
+            },
+          ]
+        : [
+            {
+              label: CopySelectedPathsLabel,
+              action: () =>
+                clipboard.writeText(
+                  filesToCopy
+                    .map(f => Path.join(repository.path, f.path))
+                    .join(EOL)
+                ),
+            },
+            {
+              label: CopySelectedRelativePathsLabel,
+              action: () =>
+                clipboard.writeText(
+                  filesToCopy.map(f => Path.normalize(f.path)).join(EOL)
+                ),
+            },
+          ]
+
     const items: IMenuItem[] = [
       {
         label: RevealInFileManagerLabel,
@@ -421,14 +465,7 @@ export class SelectedCommits extends React.Component<
         enabled: isSafeExtension && fileExistsOnDisk,
       },
       { type: 'separator' },
-      {
-        label: CopyFilePathLabel,
-        action: () => clipboard.writeText(fullPath),
-      },
-      {
-        label: CopyRelativeFilePathLabel,
-        action: () => clipboard.writeText(Path.normalize(file.path)),
-      },
+      ...copyPathItems,
       { type: 'separator' },
     ]
 

app/src/ui/open-pull-request/pull-request-files-changed.tsx

@@ -251,6 +251,14 @@ export class PullRequestFilesChanged extends React.Component<
     )
   }
 
+  private onFileSelectionChanged = (
+    files: ReadonlyArray<CommittedFileChange>
+  ) => {
+    if (files.length > 0) {
+      this.onFileSelected(files[0])
+    }
+  }
+
   private onRowDoubleClick = (row: number) => {
     const files = this.props.files
     const file = files[row]
@@ -292,8 +300,8 @@ export class PullRequestFilesChanged extends React.Component<
       >
         <FileList
           files={files}
-          onSelectedFileChanged={this.onFileSelected}
-          selectedFile={selectedFile}
+          onSelectionChanged={this.onFileSelectionChanged}
+          selectedFiles={selectedFile ? [selectedFile] : []}
           availableWidth={clamp(fileListWidth)}
           onContextMenu={this.onFileContextMenu}
           onRowDoubleClick={this.onRowDoubleClick}

app/src/ui/stashing/stash-diff-viewer.tsx

@@ -75,6 +75,14 @@ export class StashDiffViewer extends React.PureComponent<IStashDiffViewerProps>
       file
     )
 
+  private onFileSelectionChanged = (
+    files: ReadonlyArray<CommittedFileChange>
+  ) => {
+    if (files.length > 0) {
+      this.onSelectedFileChanged(files[0])
+    }
+  }
+
   private onRowDoubleClick = (row: number) => {
     const files = this.getFiles()
     const file = files[row]
@@ -150,8 +158,8 @@ export class StashDiffViewer extends React.PureComponent<IStashDiffViewerProps>
           >
             <FileList
               files={files}
-              onSelectedFileChanged={this.onSelectedFileChanged}
-              selectedFile={selectedStashedFile}
+              onSelectionChanged={this.onFileSelectionChanged}
+              selectedFiles={selectedStashedFile ? [selectedStashedFile] : []}
               availableWidth={availableWidth}
               onRowDoubleClick={this.onRowDoubleClick}
             />