quachtridat · quachtridat · Apr 20, 2022 · Apr 19, 2022
diff --git a/src/components/CommitComparisonBox.tsx b/src/components/CommitComparisonBox.tsx
@@ -44,6 +44,7 @@ interface ICommitComparisonBoxHeaderProps {
   collapsible: boolean;
   collapsed?: boolean;
   label?: string;
+  trans: TranslationBundle;
   onCollapseExpand?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
   onClickCancel?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
@@ -61,7 +62,7 @@ const CommitComparisonBoxHeader: React.VFC<ICommitComparisonBoxHeaderProps> = (
       <span className={sectionHeaderLabelStyle}>{props.label}</span>
       {props.onClickCancel && (
         <span className={clickableSpanStyle} onClick={props.onClickCancel}>
-          Cancel
+          {props.trans.__('Cancel')}
         </span>
       )}
     </div>
@@ -213,6 +214,9 @@ const CommitComparisonBoxBody: React.VFC<ICommitComparisonBoxBodyProps> = (
   );
 };
 
+/**
+ * Interface describing ComparisonBox component properties.
+ */
 export interface ICommitComparisonBoxProps {
   collapsible: boolean;
   commands: CommandRegistry;

diff --git a/src/components/GitPanel.tsx b/src/components/GitPanel.tsx
@@ -136,12 +136,12 @@ export interface IGitPanelState {
   /**
    * The commit to compare against
    */
-  commitCompareLhs: Git.ISingleCommitInfo | null;
+  referenceCommit: Git.ISingleCommitInfo | null;
 
   /**
    * The commit to compare
    */
-  commitCompareRhs: Git.ISingleCommitInfo | null;
+  challengerCommit: Git.ISingleCommitInfo | null;
 
   /**
    * The commit comparison result
@@ -178,8 +178,8 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
       commitDescription: '',
       commitAmend: false,
       hasDirtyStagedFiles: hasDirtyStagedFiles,
-      commitCompareLhs: null,
-      commitCompareRhs: null,
+      referenceCommit: null,
+      challengerCommit: null,
       commitComparison: null
     };
   }
@@ -236,20 +236,20 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
   async componentDidUpdate(
     _: Readonly<IGitPanelProps>,
     {
-      commitCompareLhs: prevCommitCompareLhs,
-      commitCompareRhs: prevCommitCompareRhs,
+      referenceCommit: prevReferenceCommit,
+      challengerCommit: prevChallengerCommit,
       commitComparison: prevCommitComparison
     }: Readonly<IGitPanelState>
   ): Promise<void> {
     const {
-      commitCompareLhs: currCommitCompareLhs,
-      commitCompareRhs: currCommitCompareRhs
+      referenceCommit: currReferenceCommit,
+      challengerCommit: currChallengerCommit
     } = this.state;
 
-    const commitsReady = currCommitCompareLhs && currCommitCompareRhs;
+    const commitsReady = currReferenceCommit && currChallengerCommit;
     const commitChanged =
-      prevCommitCompareLhs !== currCommitCompareLhs ||
-      prevCommitCompareRhs !== currCommitCompareRhs;
+      prevReferenceCommit !== currReferenceCommit ||
+      prevChallengerCommit !== currChallengerCommit;
 
     if (commitsReady && (!!prevCommitComparison || commitChanged)) {
       await this._doCommitComparsion();
@@ -272,8 +272,8 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
 
     this.setState({
       currentBranch: currentBranch ? currentBranch.name : 'master',
-      commitCompareLhs: null,
-      commitCompareRhs: null,
+      referenceCommit: null,
+      challengerCommit: null,
       commitComparison: null
     });
   };
@@ -501,18 +501,18 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
           model={this.props.model}
           commands={this.props.commands}
           trans={this.props.trans}
-          commitCompareLhs={this.state.commitCompareLhs}
-          commitCompareRhs={this.state.commitCompareRhs}
+          referenceCommit={this.state.referenceCommit}
+          challengerCommit={this.state.challengerCommit}
           onSelectForCompare={commit => async event => {
             event.stopPropagation();
-            this._setCommitComparisonState({ lhs: commit });
+            this._setCommitComparisonState({ reference: commit });
           }}
           onCompareWithSelected={commit => async event => {
             event.stopPropagation();
-            this._setCommitComparisonState({ rhs: commit });
+            this._setCommitComparisonState({ challenger: commit });
           }}
         />
-        {(this.state.commitCompareLhs || this.state.commitCompareRhs) && (
+        {(this.state.referenceCommit || this.state.challengerCommit) && (
           <CommitComparisonBox
             model={this.props.model}
             collapsible={true}
@@ -521,31 +521,31 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
             header={`
               Compare
               ${
-                this.state.commitCompareLhs
-                  ? this.state.commitCompareLhs.commit.substring(0, 7)
+                this.state.referenceCommit
+                  ? this.state.referenceCommit.commit.substring(0, 7)
                   : '...'
               }
               and
               ${
-                this.state.commitCompareRhs
-                  ? this.state.commitCompareRhs.commit.substring(0, 7)
+                this.state.challengerCommit
+                  ? this.state.challengerCommit.commit.substring(0, 7)
                   : '...'
               }
             `}
             trans={this.props.trans}
             onCancel={event => {
               event.stopPropagation();
               this._setCommitComparisonState({
-                lhs: null,
-                rhs: null,
-                res: null
+                reference: null,
+                challenger: null,
+                comparison: null
               });
             }}
             onOpenDiff={
               this.state.commitComparison
                 ? openFileDiff(this.props.commands)(
-                    this.state.commitComparison.rhs,
-                    this.state.commitComparison.lhs
+                    this.state.commitComparison.challenger,
+                    this.state.commitComparison.reference
                   )
                 : undefined
             }
@@ -859,22 +859,22 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
   }
 
   private _setCommitComparisonState(state: {
-    lhs?: Git.ISingleCommitInfo;
-    rhs?: Git.ISingleCommitInfo;
-    res?: Git.ICommitComparison;
+    reference?: Git.ISingleCommitInfo;
+    challenger?: Git.ISingleCommitInfo;
+    comparison?: Git.ICommitComparison;
   }): void {
     this.setState(currentState => ({
-      commitCompareLhs:
-        typeof state.lhs !== 'undefined'
-          ? state.lhs
-          : currentState.commitCompareLhs,
-      commitCompareRhs:
-        typeof state.rhs !== 'undefined'
-          ? state.rhs
-          : currentState.commitCompareRhs,
+      referenceCommit:
+        typeof state.reference !== 'undefined'
+          ? state.reference
+          : currentState.referenceCommit,
+      challengerCommit:
+        typeof state.challenger !== 'undefined'
+          ? state.challenger
+          : currentState.challengerCommit,
       commitComparison:
-        typeof state.res !== 'undefined'
-          ? state.res
+        typeof state.comparison !== 'undefined'
+          ? state.comparison
           : currentState.commitComparison
     }));
   }
@@ -883,20 +883,20 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
     let diffResult: Git.IDiffResult = null;
     try {
       diffResult = await this.props.model.diff(
-        this.state.commitCompareLhs.commit,
-        this.state.commitCompareRhs.commit
+        this.state.referenceCommit.commit,
+        this.state.challengerCommit.commit
       );
       if (diffResult.code !== 0) {
         throw new Error(diffResult.message);
       }
     } catch (err) {
       console.error(
-        `Error while getting the diff for commit ${this.state.commitCompareLhs} and commit ${this.state.commitCompareRhs}!`,
+        `Error while getting the diff for commit ${this.state.referenceCommit} and commit ${this.state.challengerCommit}!`,
         err
       );
       this.props.logger.log({
         level: Level.ERROR,
-        message: `Error while getting the diff for commit ${this.state.commitCompareLhs} and commit ${this.state.commitCompareRhs}!`,
+        message: `Error while getting the diff for commit ${this.state.referenceCommit} and commit ${this.state.challengerCommit}!`,
         error: err
       });
       return;
@@ -905,8 +905,8 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
       this.setState(state => {
         return {
           commitComparison: {
-            lhs: state.commitCompareLhs,
-            rhs: state.commitCompareRhs,
+            reference: state.referenceCommit,
+            challenger: state.challengerCommit,
             changedFiles: diffResult.result.map(changedFile => {
               const pathParts = changedFile.filename.split('/');
               const fileName = pathParts[pathParts.length - 1];
@@ -927,8 +927,8 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
       });
     } else {
       this.setState({
-        commitCompareLhs: null,
-        commitCompareRhs: null,
+        referenceCommit: null,
+        challengerCommit: null,
         commitComparison: null
       });
     }

diff --git a/src/components/HistorySideBar.tsx b/src/components/HistorySideBar.tsx
@@ -48,12 +48,12 @@ export interface IHistorySideBarProps {
   /**
    * The commit to compare against.
    */
-  commitCompareLhs?: Git.ISingleCommitInfo;
+  referenceCommit?: Git.ISingleCommitInfo;
 
   /**
    * The commit to compare.
    */
-  commitCompareRhs?: Git.ISingleCommitInfo;
+  challengerCommit?: Git.ISingleCommitInfo;
 
   /**
    * Callback invoked upon clicking to select a commit for comparison.
@@ -156,11 +156,11 @@ export const HistorySideBar: React.FunctionComponent<IHistorySideBarProps> = (
             <PastCommitNode
               key={commit.commit}
               {...commonProps}
-              isCommitCompareLhs={
-                commit.commit === props.commitCompareLhs?.commit
+              isReferenceCommit={
+                commit.commit === props.referenceCommit?.commit
               }
-              isCommitCompareRhs={
-                commit.commit === props.commitCompareRhs?.commit
+              isChallengerCommit={
+                commit.commit === props.challengerCommit?.commit
               }
               onOpenDiff={onOpenDiff}
               onSelectForCompare={props.onSelectForCompare(commit)}

diff --git a/src/components/PastCommitNode.tsx b/src/components/PastCommitNode.tsx
@@ -13,8 +13,8 @@ import {
   branchClass,
   branchWrapperClass,
   commitBodyClass,
-  commitCompareLhsNodeClass,
-  commitCompareRhsNodeClass,
+  referenceCommitNodeClass,
+  challengerCommitNodeClass,
   commitExpandedClass,
   commitHeaderClass,
   commitHeaderItemClass,
@@ -60,12 +60,12 @@ export interface IPastCommitNodeProps {
   /**
    * The commit to compare against.
    */
-  isCommitCompareLhs?: boolean;
+  isReferenceCommit?: boolean;
 
   /**
    * The commit to compare.
    */
-  isCommitCompareRhs?: boolean;
+  isChallengerCommit?: boolean;
 
   /**
    * Callback invoked upon clicking to display a file diff.
@@ -138,8 +138,8 @@ export class PastCommitNode extends React.Component<
             : this.state.expanded
             ? commitExpandedClass
             : null,
-          this.props.isCommitCompareLhs && commitCompareLhsNodeClass,
-          this.props.isCommitCompareRhs && commitCompareRhsNodeClass
+          this.props.isReferenceCommit && referenceCommitNodeClass,
+          this.props.isChallengerCommit && challengerCommitNodeClass
         )}
         title={
           this.props.children

diff --git a/src/style/PastCommitNode.ts b/src/style/PastCommitNode.ts
@@ -84,10 +84,10 @@ export const singleFileCommitClass = style({
   }
 });
 
-export const commitCompareLhsNodeClass = style({
-  borderLeft: '3px solid darkred'
+export const referenceCommitNodeClass = style({
+  borderLeft: '3px solid var(--jp-git-diff-deleted-color)'
 });
 
-export const commitCompareRhsNodeClass = style({
-  borderLeft: '3px solid darkgreen'
+export const challengerCommitNodeClass = style({
+  borderLeft: '3px solid var(--jp-git-diff-added-color)'
 });
diff --git a/src/tokens.ts b/src/tokens.ts
@@ -1038,11 +1038,11 @@ export namespace Git {
     /**
      * The commit to compare against
      */
-    lhs: ISingleCommitInfo;
+    reference: ISingleCommitInfo;
     /**
      * The commit to compare
      */
-    rhs: ISingleCommitInfo;
+    challenger: ISingleCommitInfo;
     /**
      * The list of files that have been modified
      * in the compared commits

diff --git a/tests/test-components/HistorySideBar.spec.tsx b/tests/test-components/HistorySideBar.spec.tsx
@@ -32,8 +32,8 @@ describe('HistorySideBar', () => {
     } as GitExtension,
     commands: null,
     trans,
-    commitCompareLhs: null,
-    commitCompareRhs: null,
+    referenceCommit: null,
+    challengerCommit: null,
     onSelectForCompare: _ => async _ => null,
     onCompareWithSelected: _ => async _ => null
   };