VSCODE-163: Add resources/help panel

package.json

@@ -97,6 +97,11 @@
           "id": "mongoDBPlaygroundsExplorer",
           "name": "Playgrounds",
           "when": "config.mdb.showMongoDBPlaygrounds == true"
+        },
+        {
+          "id": "mongoDBHelpExplorer",
+          "name": "Help and Feedback",
+          "when": "config.mdb.showMongoDBHelpExplorer == true"
         }
       ]
     },
@@ -702,6 +707,11 @@
           "default": true,
           "description": "Show or hide the MongoDB playgrounds view."
         },
+        "mdb.showMongoDBHelpExplorer": {
+          "type": "boolean",
+          "default": true,
+          "description": "Show or hide the help and feedback view."
+        },
         "mdb.excludeFromPlaygroundsSearch": {
           "type": "array",
           "items": {

src/explorer/helpExplorer.ts

@@ -0,0 +1,35 @@
+import * as vscode from 'vscode';
+import HelpTree from './helpTree';
+import { createLogger } from '../logging';
+import { TelemetryController } from '../telemetry';
+
+const log = createLogger('help and info explorer controller');
+
+export default class HelpExplorer {
+  _treeController: HelpTree;
+  _treeView?: vscode.TreeView<vscode.TreeItem>;
+
+  constructor() {
+    log.info('activate help explorer');
+    this._treeController = new HelpTree();
+  }
+
+  activateHelpTreeView(telemetryController: TelemetryController): void {
+    if (!this._treeView) {
+      this._treeView = vscode.window.createTreeView('mongoDBHelpExplorer', {
+        treeDataProvider: this._treeController
+      });
+      this._treeController.activateTreeViewEventHandlers(
+        this._treeView,
+        telemetryController
+      );
+    }
+  }
+
+  deactivate(): void {
+    if (this._treeView) {
+      this._treeView.dispose();
+      delete this._treeView;
+    }
+  }
+}

src/explorer/helpTree.ts

@@ -0,0 +1,133 @@
+import * as vscode from 'vscode';
+const path = require('path');
+
+import { getImagesPath } from '../extensionConstants';
+import { TelemetryController } from '../telemetry';
+
+const HELP_LINK_CONTEXT_VALUE = 'HELP_LINK';
+
+export class HelpLinkTreeItem extends vscode.TreeItem {
+  iconName?: string;
+  contextValue = HELP_LINK_CONTEXT_VALUE;
+  linkId: string;
+  url: string;
+
+  constructor(title: string, url: string, linkId: string, iconName?: string) {
+    super(title, vscode.TreeItemCollapsibleState.None);
+
+    this.linkId = linkId;
+    this.iconName = iconName;
+    this.url = url;
+  }
+
+  get iconPath():
+    | string
+    | vscode.Uri
+    | { light: string | vscode.Uri; dark: string | vscode.Uri } {
+    if (!this.iconName || this.iconName === '') {
+      return '';
+    }
+
+    const LIGHT = path.join(getImagesPath(), 'light');
+    const DARK = path.join(getImagesPath(), 'dark');
+
+    return {
+      light: path.join(LIGHT, 'help', `${this.iconName}.svg`),
+      dark: path.join(DARK, 'help', `${this.iconName}.svg`)
+    };
+  }
+}
+
+export default class HelpTree
+implements vscode.TreeDataProvider<vscode.TreeItem> {
+  contextValue = 'helpTree';
+
+  getTreeItem(element: vscode.TreeItem): vscode.TreeItem {
+    return element;
+  }
+
+  activateTreeViewEventHandlers = (
+    treeView: vscode.TreeView<vscode.TreeItem>,
+    telemetryController: TelemetryController
+  ): void => {
+    treeView.onDidChangeSelection(async (event: any) => {
+      if (event.selection && event.selection.length === 1) {
+        const selectedItem = event.selection[0];
+
+        await this.onClickHelpItem(selectedItem, telemetryController);
+      }
+    });
+  };
+
+  async getChildren(element?: any): Promise<any[]> {
+    // When no element is present we are at the root.
+    if (!element) {
+      const whatsNew = new HelpLinkTreeItem(
+        'What\'s New',
+        'https://github.com/mongodb-js/vscode/blob/master/CHANGELOG.md',
+        'whatsNew',
+        'megaphone'
+      );
+
+      const extensionDocs = new HelpLinkTreeItem(
+        'Extension Documentation',
+        'https://docs.mongodb.com/mongodb-vscode/',
+        'extensionDocumentation',
+        'book'
+      );
+
+      const mdbDocs = new HelpLinkTreeItem(
+        'MongoDB Documentation',
+        'https://docs.mongodb.com/manual/',
+        'mongoDBDocumentation',
+        'leaf'
+      );
+
+      const feedback = new HelpLinkTreeItem(
+        'Suggest a Feature',
+        'https://feedback.mongodb.com/forums/929236-mongodb-for-vs-code/',
+        'feedback',
+        'lightbulb'
+      );
+
+      const reportBug = new HelpLinkTreeItem(
+        'Report a Bug',
+        'https://github.com/mongodb-js/vscode/issues',
+        'reportABug',
+        'report'
+      );
+
+      const atlas = new HelpLinkTreeItem(
+        'Create Free Atlas Cluster',
+        'https://www.mongodb.com/cloud/atlas/register?utm_source=vscode&utm_medium=product&utm_campaign=VS%20code%20extension',
+        'freeClusterCTA',
+        'atlas'
+      );
+
+      return Promise.resolve([
+        whatsNew,
+        extensionDocs,
+        mdbDocs,
+        feedback,
+        reportBug,
+        atlas
+      ]);
+    }
+
+    return element.getChildren();
+  }
+
+  async onClickHelpItem(helpItem: HelpLinkTreeItem, telemetryController: TelemetryController): Promise<void> {
+    if (helpItem.contextValue === HELP_LINK_CONTEXT_VALUE) {
+      telemetryController.trackLinkClicked(
+        'helpPanel',
+        helpItem.linkId
+      );
+
+      await vscode.commands.executeCommand(
+        'vscode.open',
+        vscode.Uri.parse(helpItem.url)
+      );
+    }
+  }
+}

src/explorer/index.ts

@@ -4,6 +4,7 @@ import ConnectionTreeItem from './connectionTreeItem';
 import DatabaseTreeItem from './databaseTreeItem';
 import { CollectionTypes } from './documentListTreeItem';
 import DocumentTreeItem from './documentTreeItem';
+import HelpExplorer from './helpExplorer';
 import SchemaTreeItem from './schemaTreeItem';
 import PlaygroundsExplorer from './playgroundsExplorer';
 
@@ -12,8 +13,9 @@ export {
   CollectionTypes,
   ConnectionTreeItem,
   DatabaseTreeItem,
-  ExplorerController,
   DocumentTreeItem,
-  SchemaTreeItem,
-  PlaygroundsExplorer
+  ExplorerController,
+  HelpExplorer,
+  PlaygroundsExplorer,
+  SchemaTreeItem
 };

src/explorer/playgroundsExplorer.ts

@@ -25,7 +25,7 @@ export default class PlaygroundsExplorer {
     }
   };
 
-  public async activatePlaygroundsTreeView(): Promise<void> {
+  public activatePlaygroundsTreeView(): void {
     this.createPlaygroundsTreeView();
   }