resolve #7 - show empty message in the panel

README.md

@@ -27,3 +27,5 @@ You can find the series of the posts about how this extension developed step by
 
 ## Credits
 Activity bar's icon (and more) by [Stockio.com](https://www.stockio.com/free-icon/folders)
+Null icon made from <a href="http://www.onlinewebfonts.com/icon">Icon Fonts</a> is licensed by CC BY 3.0
+External link icon made by <a href="https://www.flaticon.com/authors/dave-gandy" title="Dave Gandy">Dave Gandy</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>

package.json

@@ -36,11 +36,33 @@
   "main": "./out/extension.js",
   "contributes": {
     "menus": {
+      "commandPalette": [
+        {
+          "command": "foldersCompare.goToNotice",
+          "when": "false"
+        },
+        {
+          "command": "foldersCompare.refresh",
+          "when": "false"
+        },
+        {
+          "command": "foldersCompare.chooseFoldersAndCompare",
+          "when": "false"
+        }
+      ],
       "view/title": [
         {
           "command": "foldersCompare.refresh",
           "group": "navigation"
         }
+      ],
+      "view/item/context": [
+        {
+          "command": "foldersCompare.goToNotice",
+          "alt": "More info",
+          "group": "inline",
+          "when": "viewItem == empty"
+        }
       ]
     },
     "commands": [
@@ -56,6 +78,14 @@
           "light": "resources/light/refresh.svg",
           "dark": "resources/dark/refresh.svg"
         }
+      },
+      {
+        "title": "More Info",
+        "command": "foldersCompare.goToNotice",
+        "icon": {
+          "light": "resources/light/external-link-symbol.svg",
+          "dark": "resources/dark/external-link-symbol.svg"
+        }
       }
     ],
     "viewsContainers": {

src/constants/commands.ts

@@ -1,3 +1,4 @@
 export const COMPARE_FILES = 'foldersCompare.compareFiles';
 export const CHOOSE_FOLDERS_AND_COMPARE = 'foldersCompare.chooseFoldersAndCompare';
-export const REFRESH = 'foldersCompare.refresh';
+export const REFRESH = 'foldersCompare.refresh';
+export const GO_TO_NOTICE = 'foldersCompare.goToNotice';

src/constants/constants.ts

@@ -0,0 +1 @@
+export const NOTICE_URL = 'https://github.com/moshfeu/vscode-compare-folders#notice';

src/extension.ts

@@ -1,14 +1,15 @@
-import { ExtensionContext, workspace, window, commands, Disposable } from 'vscode';
+import { ExtensionContext, workspace, window, commands, Disposable, env, Uri } from 'vscode';
 import { CompareFoldersProvider } from './providers/foldersCompareProvider';
-import { COMPARE_FILES, CHOOSE_FOLDERS_AND_COMPARE, REFRESH } from './constants/commands';
+import { COMPARE_FILES, CHOOSE_FOLDERS_AND_COMPARE, REFRESH, GO_TO_NOTICE } from './constants/commands';
+import { NOTICE_URL } from './constants/constants';
 
 const disposables: Disposable[] = [];
 export function activate(context: ExtensionContext) {
-  const workspaceUrl = workspace.workspaceFolders ? workspace.workspaceFolders[0].uri.path : '';
-  const foldersCompareProvider = new CompareFoldersProvider(workspaceUrl);
+  const foldersCompareProvider = new CompareFoldersProvider();
 
   window.registerTreeDataProvider('foldersCompareAppService', foldersCompareProvider);
   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);
   commands.registerCommand(REFRESH, foldersCompareProvider.refresh);
 }

src/models/file.ts

@@ -1,14 +1,14 @@
 import { TreeItem, TreeItemCollapsibleState, Command } from 'vscode';
 import { join } from 'path';
 
-type FileIconType = 'file' | 'open' | 'folder';
+type FileType = 'file' | 'open' | 'folder' | 'empty';
 
 export class File extends TreeItem {
 
 	constructor(
 		public readonly label: string,
 		public readonly collapsibleState: TreeItemCollapsibleState,
-    public readonly type: FileIconType,
+    public readonly type: FileType,
     public readonly command?: Command,
     public readonly children?: File[],
 	) {
@@ -24,5 +24,5 @@ export class File extends TreeItem {
 		dark: join(__filename, '..', '..', '..', 'resources', 'dark', `${this.type}.svg`),
 	};
 
-	contextValue = 'file';
+	contextValue = this.type;
 }

src/providers/foldersCompareProvider.ts

@@ -1,30 +1,31 @@
 import { TreeItemCollapsibleState, TreeDataProvider, EventEmitter, Event, TreeItem, Command, commands, workspace, window, Uri, env } from 'vscode';
 import * as path from 'path';
-import { CHOOSE_FOLDERS_AND_COMPARE } from '../constants/commands';
+import { CHOOSE_FOLDERS_AND_COMPARE, GO_TO_NOTICE } from '../constants/commands';
 import { chooseFoldersAndCompare, showDiffs, compare } 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';
 
+const workspaceRoot = workspace.workspaceFolders ? workspace.workspaceFolders[0].uri.path : '';
+
 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[][] = [];
 
-	constructor(private workspaceRoot: string) {
-  }
-
-  chooseFoldersAndCompare = async () => {
-    this._diffs = await chooseFoldersAndCompare(this.workspaceRoot);
+	chooseFoldersAndCompare = async () => {
+    this._diffs = await chooseFoldersAndCompare(workspaceRoot);
     if (this._diffs.length) {
       this.refresh();
     } 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) {
-        env.openExternal(Uri.parse('https://github.com/moshfeu/vscode-compare-folders#notice'));
+        commands.executeCommand(GO_TO_NOTICE);
       }
     }
   }
@@ -39,20 +40,27 @@ export class CompareFoldersProvider implements TreeDataProvider<File> {
 
 	refresh = (): void => {
     try {
-      this._diffs = compare(this.workspaceRoot, getComparedPath());
+      this._diffs = compare(workspaceRoot, getComparedPath());
       this._onDidChangeTreeData.fire();
-      window.showInformationMessage('Source refreshed', 'Dismiss');
+      if (this._diffs.length) {
+        window.showInformationMessage('Source refreshed', 'Dismiss');
+      }
     } catch (error) {
       console.log(error);
     }
   }
 
+  showEmptyState() {
+    this.emptyState = true;
+    this.refresh();
+  }
+
   getTreeItem(element: File): TreeItem {
 		return element;
   }
 
   getFolderName(filePath: string, basePath: string) {
-    const base = basePath ? `${this.workspaceRoot}/${basePath}` : this.workspaceRoot;
+    const base = basePath ? `${workspaceRoot}/${basePath}` : workspaceRoot;
     return path.basename(path.dirname(getRelativePath(filePath, base)));
   }
 
@@ -61,19 +69,36 @@ export class CompareFoldersProvider implements TreeDataProvider<File> {
       return element.children;
     }
 
-    const children: File[] = [new File(
-        'Click to select folder',
-        TreeItemCollapsibleState.None,
-        'open',
-        {
-          title: 'title',
-          command: CHOOSE_FOLDERS_AND_COMPARE,
-          arguments: [this.workspaceRoot]
-        },
-      )
-    ];
-    const tree = build(this._diffs, this.workspaceRoot);
-    children.push(...tree.treeItems);
+    const children = [openFolderChild];
+
+    if (this.emptyState) {
+      children.push(emptyStateChild);
+    } else {
+      const tree = build(this._diffs, workspaceRoot);
+      children.push(...tree.treeItems);
+    }
+
     return children;
 	}
-}
+}
+
+const openFolderChild: File = new File(
+  'Click to select folder',
+  TreeItemCollapsibleState.None,
+  'open',
+  {
+    title: 'title',
+    command: CHOOSE_FOLDERS_AND_COMPARE,
+    arguments: [workspaceRoot]
+  },
+);
+
+const emptyStateChild: File = new File(
+  'There are no files to compare',
+  TreeItemCollapsibleState.None,
+  'empty',
+  {
+    title: '',
+    command: GO_TO_NOTICE,
+  }
+);