#9 - Show missing/additional files

.vscodeignore

@@ -3,7 +3,6 @@
 out/test/**
 src/**
 .gitignore
-vsc-extension-quickstart.md
 **/tsconfig.json
 **/tslint.json
 **/*.map

README.md

@@ -27,14 +27,20 @@ You can find the series of the posts about how this extension developed step by
 
 ## Change log
 
+**0.4.0**
+
+Show missing/additional files [#9](https://github.com/moshfeu/vscode-compare-folders/issues/9) (Thanks to [@fbaligand](https://github.com/fbaligand))
+
+<img width="334" alt="missing/additional files screenshot" src="https://user-images.githubusercontent.com/3723951/71563330-90bd2f80-2a96-11ea-91b3-e2f531f2f74d.png">
+
 **0.3.0**
 
 Support multiple workspaces
 
-<img width="496" alt="Screen Shot 2019-12-19 at 0 15 50" src="https://user-images.githubusercontent.com/3723951/71128162-44036a00-21f5-11ea-88fe-9c2519b8a2e8.png">
+<img width="496" alt="Multiple workspaces screenshot" src="https://user-images.githubusercontent.com/3723951/71128162-44036a00-21f5-11ea-88fe-9c2519b8a2e8.png">
 
 **0.2.0**
-- Improve UI: #5, #6, #7
+- Improve UI: [#5](https://github.com/moshfeu/vscode-compare-folders/issues/5), [#6](https://github.com/moshfeu/vscode-compare-folders/issues/6), [#7](https://github.com/moshfeu/vscode-compare-folders/issues/7) thanks to [@gjsjohnmurray](https://github.com/gjsjohnmurray)
 - Supports dark mode!
 
 

package.json

@@ -2,7 +2,7 @@
   "name": "compare-folders",
   "displayName": "Compare Folders",
   "description": "Compare folders by contents, present the files that have differences and display the diffs side by side",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/moshfeu/vscode-compare-folders"
@@ -53,7 +53,8 @@
       "view/title": [
         {
           "command": "foldersCompare.refresh",
-          "group": "navigation"
+          "group": "navigation",
+          "when": "view == foldersCompareAppService"
         }
       ],
       "view/item/context": [
@@ -101,7 +102,17 @@
       "foldersCompare": [
         {
           "id": "foldersCompareAppService",
-          "name": "Compare",
+          "name": "Differences",
+          "when": "workspaceFolderCount != 0"
+        },
+        {
+          "id": "foldersCompareAppServiceOnlyA",
+          "name": "Only in my folder",
+          "when": "workspaceFolderCount != 0"
+        },
+        {
+          "id": "foldersCompareAppServiceOnlyB",
+          "name": "Only in compared folder",
           "when": "workspaceFolderCount != 0"
         }
       ]

src/extension.ts

@@ -2,14 +2,19 @@ import { ExtensionContext, workspace, window, commands, Disposable, env, Uri } f
 import { CompareFoldersProvider } from './providers/foldersCompareProvider';
 import { COMPARE_FILES, CHOOSE_FOLDERS_AND_COMPARE, REFRESH, GO_TO_NOTICE } from './constants/commands';
 import { NOTICE_URL } from './constants/constants';
+import { ViewOnlyProvider } from './providers/viewOnlyProvider';
 
 const disposables: Disposable[] = [];
 export function activate() {
-  const foldersCompareProvider = new CompareFoldersProvider();
+  const onlyInA = new ViewOnlyProvider();
+  const onlyInB = new ViewOnlyProvider();
+  const foldersCompareProvider = new CompareFoldersProvider(onlyInA, onlyInB);
 
   disposables.push(
     ...[
       window.registerTreeDataProvider('foldersCompareAppService', foldersCompareProvider),
+      window.registerTreeDataProvider('foldersCompareAppServiceOnlyA', onlyInA),
+      window.registerTreeDataProvider('foldersCompareAppServiceOnlyB', onlyInB),
       commands.registerCommand(COMPARE_FILES, foldersCompareProvider.onFileClicked),
       commands.registerCommand(GO_TO_NOTICE, () => env.openExternal(Uri.parse(NOTICE_URL))),
       commands.registerCommand(CHOOSE_FOLDERS_AND_COMPARE, foldersCompareProvider.chooseFoldersAndCompare),

src/providers/foldersCompareProvider.ts

@@ -1,23 +1,24 @@
-import { TreeItemCollapsibleState, TreeDataProvider, EventEmitter, Event, TreeItem, Command, commands, workspace, window, Uri, env, WorkspaceFolder } from 'vscode';
+import { TreeItemCollapsibleState, TreeDataProvider, EventEmitter, Event, TreeItem, commands, workspace, window, WorkspaceFolder } from 'vscode';
 import * as path from 'path';
 import { CHOOSE_FOLDERS_AND_COMPARE, GO_TO_NOTICE } from '../constants/commands';
-import { chooseFoldersAndCompare, showDiffs, compare } from '../services/comparer';
+import { chooseFoldersAndCompare, showDiffs, compare, CompareResult, showFile } from '../services/comparer';
 import { File } from '../models/file';
 import { build } from '../services/tree-builder';
 import { getComparedPath } from '../context/path';
 import { getRelativePath } from '../utils/path';
 import { MORE_INFO } from '../constants/windowInformationResult';
+import { ViewOnlyProvider } from './viewOnlyProvider';
 
 export class CompareFoldersProvider implements TreeDataProvider<File> {
   private _onDidChangeTreeData: EventEmitter<any | undefined> = new EventEmitter<any | undefined>();
   readonly onDidChangeTreeData: Event<any | undefined> = this._onDidChangeTreeData.event;
 
   private emptyState: boolean = false;
-  private _diffs: string[][] = [];
+  private _diffs: CompareResult | null = null;
 
   private workspaceRoot: string;
 
-  constructor() {
+  constructor(private onlyInA: ViewOnlyProvider, private onlyInB: ViewOnlyProvider) {
     this.workspaceRoot = workspace.workspaceFolders ? workspace.workspaceFolders[0].uri.path : '';
   }
 
@@ -27,16 +28,7 @@ export class CompareFoldersProvider implements TreeDataProvider<File> {
       return;
     }
     this._diffs = diffs;
-    if (this._diffs.length) {
-      this.emptyState = false;
-      this._onDidChangeTreeData.fire();
-    } else {
-      this.showEmptyState();
-      const result = await window.showInformationMessage('[Compare Folders] There are no differences in any file at the same path.', MORE_INFO);
-      if (result === MORE_INFO) {
-        commands.executeCommand(GO_TO_NOTICE);
-      }
-    }
+    this.updateUI();
   }
 
   getWorkspaceFolder = async () => {
@@ -65,21 +57,44 @@ export class CompareFoldersProvider implements TreeDataProvider<File> {
     }
   }
 
-  async onFileClicked([path1, path2]: [string, string], title: string): Promise<void> {
+  onFileClicked([path1, path2]: [string, string], title: string) {
     try {
-      await showDiffs([path1, path2], title);
+      if (path2) {
+        showDiffs([path1, path2], title);
+      } else {
+        showFile(path1, title);
+      }
     } catch (error) {
       console.error(error);
     }
   }
 
+  async updateUI() {
+    if (!this._diffs) {
+      return;
+    }
+    if (this._diffs.hasResult()) {
+      this.emptyState = false;
+      this._onDidChangeTreeData.fire();
+
+      this.onlyInA.update(this._diffs.left, this._diffs.leftPath);
+      this.onlyInB.update(this._diffs.right, this._diffs.rightPath);
+    } else {
+      this.showEmptyState();
+      const result = await window.showInformationMessage('[Compare Folders] There are no differences in any file at the same path.', MORE_INFO);
+      if (result === MORE_INFO) {
+        commands.executeCommand(GO_TO_NOTICE);
+      }
+    }
+  }
+
 	refresh = (): void => {
     try {
       this._diffs = compare(this.workspaceRoot, getComparedPath());
-      this._onDidChangeTreeData.fire();
-      if (this._diffs.length) {
+      if (this._diffs.hasResult()) {
         window.showInformationMessage('Source refreshed', 'Dismiss');
       }
+      this.updateUI();
     } catch (error) {
       console.log(error);
     }
@@ -108,8 +123,8 @@ export class CompareFoldersProvider implements TreeDataProvider<File> {
 
     if (this.emptyState) {
       children.push(emptyStateChild);
-    } else {
-      const tree = build(this._diffs, this.workspaceRoot);
+    } else if (this._diffs) {
+      const tree = build(this._diffs.distinct, this.workspaceRoot);
       children.push(...tree.treeItems);
     }
 

src/providers/viewOnlyProvider.ts

@@ -0,0 +1,31 @@
+import { TreeDataProvider, TreeItem, EventEmitter, Event } from 'vscode';
+import { File } from '../models/file';
+import { build } from '../services/tree-builder';
+
+export class ViewOnlyProvider implements TreeDataProvider<File> {
+  private _onDidChangeTreeData: EventEmitter<any | undefined> = new EventEmitter<any | undefined>();
+  readonly onDidChangeTreeData: Event<any | undefined> = this._onDidChangeTreeData.event;
+  private diffs: string[][] = [];
+  private workspaceRoot: string = '';
+
+  update(diffs: string[][], workspaceRoot: string) {
+    this.diffs = diffs;
+    this.workspaceRoot = workspaceRoot;
+    this._onDidChangeTreeData.fire();
+  }
+
+  getTreeItem(element: File): TreeItem {
+		return element;
+  }
+
+  getChildren(element?: File): File[] {
+    if (element && element.children) {
+      return element.children;
+    }
+    const children = [];
+    const tree = build(this.diffs, this.workspaceRoot);
+    children.push(...tree.treeItems);
+
+    return children;
+	}
+}

src/services/comparer.ts

@@ -4,9 +4,6 @@ import { openFolder } from './open-folder';
 import { setComparedPath } from '../context/path';
 
 export async function chooseFoldersAndCompare(path?: string) {
-  if (!path) {
-    return;
-  }
   const folder1Path: string = path || await openFolder();
   const folder2Path = await openFolder();
 
@@ -15,14 +12,20 @@ export async function chooseFoldersAndCompare(path?: string) {
 }
 
 export async function showDiffs([file1, file2]: [string, string], title: string) {
-  await commands.executeCommand('vscode.diff',
+  commands.executeCommand('vscode.diff',
     Uri.file(file1),
     Uri.file(file2),
     title
   );
 }
 
-export function compare(folder1Path: string, folder2Path: string) {
+export async function showFile(file: string, title: string) {
+  commands.executeCommand('vscode.open',
+    Uri.file(file)
+  );
+}
+
+export function compare(folder1Path: string, folder2Path: string): CompareResult {
   // compare folders by contents
   const options = {compareContent: true};
   // do the compare
@@ -36,14 +39,49 @@ export function compare(folder1Path: string, folder2Path: string) {
   const { diffSet = [] } = res;
 
   // diffSet contains all the files and filter only the not equals files and map them to pairs of Uris
-  return diffSet
+  const distinct = diffSet
     .filter(diff => diff.state === 'distinct')
     .map(diff => [
       fixDoubleSlash(`${diff.path1}/${diff.name1}`),
       fixDoubleSlash(`${diff.path2}/${diff.name2}`)
     ]);
+
+  // readable 👍 performance 👎
+  const left = diffSet
+    .filter(diff => diff.state === 'left' && diff.type1 === 'file')
+    .map(diff => [fixDoubleSlash(`${diff.path1}/${diff.name1}`)]);
+
+  const right = diffSet
+    .filter(diff => diff.state === 'right' && diff.type2 === 'file')
+    .map(diff => [fixDoubleSlash(`${diff.path2}/${diff.name2}`)]);
+
+  return new CompareResult(
+    distinct,
+    left,
+    right,
+    folder1Path,
+    folder2Path,
+  );
 }
 
 function fixDoubleSlash(str: string) {
   return str.replace('//', '/');
 }
+
+export class CompareResult {
+  constructor(
+    public distinct: string[][],
+    public left: string[][],
+    public right: string[][],
+    public leftPath: string,
+    public rightPath: string,
+  ) {
+    //
+  }
+
+  hasResult() {
+    return (this.distinct.length ||
+            this.left.length ||
+            this.right.length);
+  }
+}