Display diff between any two commits for a single file (#1117)

* Display any two commits diff for single file
Fixes #985

* Add integration test

Author: fcollonval

src/components/GitPanel.tsx

@@ -504,47 +504,56 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
           challengerCommit={this.state.challengerCommit}
           onSelectForCompare={commit => async event => {
             event.stopPropagation();
-            this.setState({ referenceCommit: commit });
+            this.setState({ referenceCommit: commit }, () => {
+              this._openSingleFileComparison(
+                event as React.MouseEvent<HTMLLIElement, MouseEvent>
+              );
+            });
           }}
           onCompareWithSelected={commit => async event => {
             event.stopPropagation();
-            this.setState({ challengerCommit: commit });
+            this.setState({ challengerCommit: commit }, () => {
+              this._openSingleFileComparison(
+                event as React.MouseEvent<HTMLLIElement, MouseEvent>
+              );
+            });
           }}
         />
-        {(this.state.referenceCommit || this.state.challengerCommit) && (
-          <CommitComparisonBox
-            header={this.props.trans.__(
-              'Compare %1 and %2',
-              this.state.referenceCommit
-                ? this.state.referenceCommit.commit.substring(0, 7)
-                : '...',
-              this.state.challengerCommit
-                ? this.state.challengerCommit.commit.substring(0, 7)
-                : '...'
-            )}
-            referenceCommit={this.state.referenceCommit}
-            challengerCommit={this.state.challengerCommit}
-            commands={this.props.commands}
-            model={this.props.model}
-            logger={this.props.logger}
-            trans={this.props.trans}
-            onClose={event => {
-              event.stopPropagation();
-              this.setState({
-                referenceCommit: null,
-                challengerCommit: null
-              });
-            }}
-            onOpenDiff={
-              this.state.referenceCommit && this.state.challengerCommit
-                ? openFileDiff(this.props.commands)(
-                    this.state.challengerCommit,
-                    this.state.referenceCommit
-                  )
-                : undefined
-            }
-          />
-        )}
+        {this.props.model.selectedHistoryFile === null &&
+          (this.state.referenceCommit || this.state.challengerCommit) && (
+            <CommitComparisonBox
+              header={this.props.trans.__(
+                'Compare %1 and %2',
+                this.state.referenceCommit
+                  ? this.state.referenceCommit.commit.substring(0, 7)
+                  : '...',
+                this.state.challengerCommit
+                  ? this.state.challengerCommit.commit.substring(0, 7)
+                  : '...'
+              )}
+              referenceCommit={this.state.referenceCommit}
+              challengerCommit={this.state.challengerCommit}
+              commands={this.props.commands}
+              model={this.props.model}
+              logger={this.props.logger}
+              trans={this.props.trans}
+              onClose={event => {
+                event.stopPropagation();
+                this.setState({
+                  referenceCommit: null,
+                  challengerCommit: null
+                });
+              }}
+              onOpenDiff={
+                this.state.referenceCommit && this.state.challengerCommit
+                  ? openFileDiff(this.props.commands)(
+                      this.state.challengerCommit,
+                      this.state.referenceCommit
+                    )
+                  : undefined
+              }
+            />
+          )}
       </React.Fragment>
     );
   }
@@ -851,4 +860,25 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
     }
     return <div>{elem}</div>;
   }
+
+  /**
+   *
+   */
+  private _openSingleFileComparison(
+    event: React.MouseEvent<HTMLLIElement, MouseEvent>
+  ): void {
+    if (
+      this.props.model.selectedHistoryFile &&
+      this.state.referenceCommit &&
+      this.state.challengerCommit
+    ) {
+      openFileDiff(this.props.commands)(
+        this.state.challengerCommit,
+        this.state.referenceCommit
+      )(
+        this.props.model.selectedHistoryFile.to,
+        !this.props.model.selectedHistoryFile.is_binary
+      )(event);
+    }
+  }
 }

ui-tests/tests/commit-diff.spec.ts

@@ -16,11 +16,10 @@ test.describe('Commits diff', () => {
 
     // URL for merge conflict example repository
     await page.goto(`tree/${tmpPath}/repository`);
-
-    await page.sidebar.openTab('jp-git-sessions');
   });
 
   test('should display commits diff from history', async ({ page }) => {
+    await page.sidebar.openTab('jp-git-sessions');
     await page.click('button:has-text("History")');
     const commits = page.locator('li[title="View commit details"]');
 
@@ -38,4 +37,32 @@ test.describe('Commits diff', () => {
 
     expect(await page.waitForSelector('text=Changed')).toBeTruthy();
   });
+
+  test('should display diff from single file history', async ({ page }) => {
+    await page.sidebar.openTab('filebrowser');
+    await page.pause();
+    await page.click('#filebrowser >> text=example.ipynb', {
+      button: 'right'
+    });
+    await page.hover('ul[role="menu"] >> text=Git');
+    await page.click('#jp-contextmenu-git >> text=History');
+
+    await page.waitForSelector('#jp-git-sessions >> ol >> text=example.ipynb');
+
+    const commits = page.locator('li[title="View file changes"]');
+
+    expect(await commits.count()).toBeGreaterThanOrEqual(2);
+
+    await commits.last().locator('button[title="Select for compare"]').click();
+    await commits
+      .first()
+      .locator('button[title="Compare with selected"]')
+      .click();
+
+    await expect(
+      page.locator('.nbdime-Widget >> .jp-git-diff-banner')
+    ).toHaveText(
+      /2c87684a46d49989211d666daf05ab92951ba7c4[\n\s]+b6ece342cf6eefaff3232d43345191abda10727/
+    );
+  });
 });