VSCODE-163: Add resources/help panel (#166)

Anemy · web-flow · commit caa364301826 · 2020-09-10T10:33:11.000+02:00
diff --git a/images/dark/help/atlas.svg b/images/dark/help/atlas.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 64 (93537) - https://sketch.com -->
+    <title>Icons 16 / VS Code /AtlasDark</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Icons-16-/-VS-Code-/AtlasDark" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Atlas/_Icon/Small/Gray" transform="translate(2.000000, 2.000000)" fill="#D4D4D4">
+            <path d="M11.6834885,7.10185588 L11.9104478,7.10447761 C11.4029851,9.76119403 9.1641791,11.8208955 6.41791045,12 L6.41791045,12 L6.41791045,10.6268657 C6.74626866,9.85074627 7.34328358,8.8358209 8.47761194,8.05970149 C9.6119403,7.28358209 10.8656716,7.07462687 11.9104478,7.10447761 Z M0.0895522388,7.10447761 C1.13432836,7.07462687 2.3880597,7.28358209 3.52238806,8.05970149 C4.65671642,8.8358209 5.25373134,9.88059701 5.58208955,10.6268657 L5.58208955,10.6268657 L5.58208955,12 C2.8358209,11.7910448 0.597014925,9.76119403 0.0895522388,7.10447761 Z M11.1343284,2.86567164 C11.6716418,3.79104478 12,4.86567164 12,6 L12,6 L12,6.26865672 C10.8059701,6.23880597 9.37313433,6.44776119 8,7.37313433 C7.31343284,7.82089552 6.80597015,8.3880597 6.41791045,8.92537313 L6.41791045,8.92537313 L6.41791045,6.35820896 C6.74626866,5.58208955 7.34328358,4.56716418 8.47761194,3.79104478 C9.34328358,3.19402985 10.2985075,2.95522388 11.1343284,2.86567164 Z M0.865671642,2.86567164 C1.73134328,2.92537313 2.65671642,3.19402985 3.52238806,3.79104478 C4.65671642,4.56716418 5.25373134,5.6119403 5.58208955,6.35820896 L5.58208955,6.35820896 L5.58208955,8.92537313 C5.19402985,8.3880597 4.68656716,7.85074627 4,7.37313433 C2.65671642,6.44776119 1.19402985,6.20895522 4.4408921e-16,6.26865672 L4.4408921e-16,6.26865672 L4.4408921e-16,6 C4.4408921e-16,4.8358209 0.298507463,3.79104478 0.865671642,2.86567164 Z M5.58208955,-2.93098879e-14 L5.58208955,4.65671642 C5.19402985,4.11940299 4.68656716,3.58208955 4,3.10447761 C3.1641791,2.53731343 2.26865672,2.23880597 1.46268657,2.08955224 C2.47761194,0.895522388 3.94029851,0.119402985 5.58208955,-2.93098879e-14 L5.58208955,-2.93098879e-14 Z M6.44776119,-2.93098879e-14 C8.08955224,0.119402985 9.55223881,0.895522388 10.5671642,2.08955224 C9.73134328,2.23880597 8.8358209,2.53731343 8,3.10447761 C7.31343284,3.58208955 6.80597015,4.11940299 6.41791045,4.65671642 L6.447,4.616 Z" id="Logo-Color"></path>
+        </g>
+    </g>
+</svg>
diff --git a/images/dark/help/book.svg b/images/dark/help/book.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#d4d4d4">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 2H9l-.35.15-.65.64-.65-.64L7 2H1.5l-.5.5v10l.5.5h5.29l.86.85h.7l.86-.85h5.29l.5-.5v-10l-.5-.5zm-7 10.32l-.18-.17L7 12H2V3h4.79l.74.74-.03 8.58zM14 12H9l-.35.15-.14.13V3.7l.7-.7H14v9zM6 5H3v1h3V5zm0 4H3v1h3V9zM3 7h3v1H3V7zm10-2h-3v1h3V5zm-3 2h3v1h-3V7zm0 2h3v1h-3V9z"/>
+</svg>
diff --git a/images/dark/help/leaf.svg b/images/dark/help/leaf.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <g id="Icon-/-Connection-ON-00" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path
+            d="M8.51111448,1.03251142 C8.51841485,1.04931507 8.52462017,1.06684932 8.52863538,1.07671233 C8.52863538,1.07671233 8.76480245,1.66118721 8.99914443,1.98995434 C9.21268034,2.45570776 11.1969218,3.67506849 12.0364647,7.38319635 C12.1203225,7.87022806 12.1640286,8.36333486 12.1671414,8.85753425 C12.1824722,11.8208219 10.6198273,13.6794521 9.75071785,14.483105 L9.75071785,14.483105 L9.73210189,14.4999087 C9.56733773,14.6533026 9.39299375,14.7960564 9.21012521,14.9273059 L9.21012521,14.9273059 L9.18530394,14.9441096 C9.03547295,15.6174795 8.92263461,16.2985619 8.84729666,16.9842922 L8.84729666,16.9842922 L8.5271753,16.9842922 C8.43774573,16.0140639 8.31071924,15.0986301 8.30816411,15.0789041 L8.30816411,15.0818265 L8.26180674,15.0489498 C7.85189078,14.7505023 4.82844123,12.4089498 5.0156958,8.47981735 C5.21645606,4.26684932 7.68325216,2.19561644 8.16398174,1.81936073 C8.47461261,1.48803653 8.48702325,1.36127854 8.51111448,1.03251142 Z M8.67500786,7.32073059 C8.52101561,7.31980594 8.49695432,11.2429256 8.49319475,12.468923 L8.49249853,12.8305023 C8.49249853,13.2593607 8.74728155,14.3987215 9.00023948,14.4290411 C9.00023948,14.4290411 8.8166351,7.32073059 8.67500786,7.32073059 Z"
+            id="Combined-Shape"
+            fill="#d4d4d4"
+            fill-rule="nonzero"
+        ></path>
+    </g>
+</svg>
diff --git a/images/dark/help/lightbulb.svg b/images/dark/help/lightbulb.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#d4d4d4">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.67 8.658a3.661 3.661 0 0 0-.781 1.114 3.28 3.28 0 0 0-.268 1.329v1.6a1.304 1.304 0 0 1-.794 1.197 1.282 1.282 0 0 1-.509.102H7.712a1.285 1.285 0 0 1-.922-.379 1.303 1.303 0 0 1-.38-.92v-1.6c0-.479-.092-.921-.274-1.329a3.556 3.556 0 0 0-.776-1.114 4.689 4.689 0 0 1-1.006-1.437A4.187 4.187 0 0 1 4 5.5a4.432 4.432 0 0 1 .616-2.27c.197-.336.432-.64.705-.914a4.6 4.6 0 0 1 .911-.702c.338-.196.7-.348 1.084-.454a4.45 4.45 0 0 1 1.2-.16 4.476 4.476 0 0 1 2.276.614 4.475 4.475 0 0 1 1.622 1.616 4.438 4.438 0 0 1 .616 2.27c0 .617-.117 1.191-.353 1.721a4.69 4.69 0 0 1-1.006 1.437zM9.623 10.5H7.409v2.201c0 .081.028.15.09.212a.29.29 0 0 0 .213.09h1.606a.289.289 0 0 0 .213-.09.286.286 0 0 0 .09-.212V10.5z"/>
+</svg>
diff --git a/images/dark/help/megaphone.svg b/images/dark/help/megaphone.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#d4d4d4">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 6.77l12.33-3.43.67.53v8.6l-.67.53-6.089-1.595a2.16 2.16 0 1 1-4.178-1.095L2 9.77l-.42-.53V7.3L2 6.77zm3.006 3.787a1.13 1.13 0 0 0-.04.242 1.17 1.17 0 0 0 2.288.347l-2.248-.589zM2.58 8.82L14 11.83V4.5L2.58 7.72v1.1z"/>
+</svg>
diff --git a/images/dark/help/report.svg b/images/dark/help/report.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#d4d4d4">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 1h13l.5.5v10l-.5.5H7.707l-2.853 2.854L4 14.5V12H1.5l-.5-.5v-10l.5-.5zm6 10H14V2H2v9h2.5l.5.5v1.793l2.146-2.147L7.5 11zm0-8h1v5h-1V3zm0 7h1V9h-1v1z"/>
+</svg>
diff --git a/images/light/help/atlas.svg b/images/light/help/atlas.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 64 (93537) - https://sketch.com -->
+    <title>Icons 16 / VS Code /AtlasLight</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Icons-16-/-VS-Code-/AtlasLight" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Atlas/_Icon/Small/Gray" transform="translate(2.000000, 2.000000)" fill="#000000">
+            <path d="M11.6834885,7.10185588 L11.9104478,7.10447761 C11.4029851,9.76119403 9.1641791,11.8208955 6.41791045,12 L6.41791045,12 L6.41791045,10.6268657 C6.74626866,9.85074627 7.34328358,8.8358209 8.47761194,8.05970149 C9.6119403,7.28358209 10.8656716,7.07462687 11.9104478,7.10447761 Z M0.0895522388,7.10447761 C1.13432836,7.07462687 2.3880597,7.28358209 3.52238806,8.05970149 C4.65671642,8.8358209 5.25373134,9.88059701 5.58208955,10.6268657 L5.58208955,10.6268657 L5.58208955,12 C2.8358209,11.7910448 0.597014925,9.76119403 0.0895522388,7.10447761 Z M11.1343284,2.86567164 C11.6716418,3.79104478 12,4.86567164 12,6 L12,6 L12,6.26865672 C10.8059701,6.23880597 9.37313433,6.44776119 8,7.37313433 C7.31343284,7.82089552 6.80597015,8.3880597 6.41791045,8.92537313 L6.41791045,8.92537313 L6.41791045,6.35820896 C6.74626866,5.58208955 7.34328358,4.56716418 8.47761194,3.79104478 C9.34328358,3.19402985 10.2985075,2.95522388 11.1343284,2.86567164 Z M0.865671642,2.86567164 C1.73134328,2.92537313 2.65671642,3.19402985 3.52238806,3.79104478 C4.65671642,4.56716418 5.25373134,5.6119403 5.58208955,6.35820896 L5.58208955,6.35820896 L5.58208955,8.92537313 C5.19402985,8.3880597 4.68656716,7.85074627 4,7.37313433 C2.65671642,6.44776119 1.19402985,6.20895522 4.4408921e-16,6.26865672 L4.4408921e-16,6.26865672 L4.4408921e-16,6 C4.4408921e-16,4.8358209 0.298507463,3.79104478 0.865671642,2.86567164 Z M5.58208955,-2.93098879e-14 L5.58208955,4.65671642 C5.19402985,4.11940299 4.68656716,3.58208955 4,3.10447761 C3.1641791,2.53731343 2.26865672,2.23880597 1.46268657,2.08955224 C2.47761194,0.895522388 3.94029851,0.119402985 5.58208955,-2.93098879e-14 L5.58208955,-2.93098879e-14 Z M6.44776119,-2.93098879e-14 C8.08955224,0.119402985 9.55223881,0.895522388 10.5671642,2.08955224 C9.73134328,2.23880597 8.8358209,2.53731343 8,3.10447761 C7.31343284,3.58208955 6.80597015,4.11940299 6.41791045,4.65671642 L6.447,4.616 Z" id="Logo-Color"></path>
+        </g>
+    </g>
+</svg>
diff --git a/images/light/help/book.svg b/images/light/help/book.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#061621">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 2H9l-.35.15-.65.64-.65-.64L7 2H1.5l-.5.5v10l.5.5h5.29l.86.85h.7l.86-.85h5.29l.5-.5v-10l-.5-.5zm-7 10.32l-.18-.17L7 12H2V3h4.79l.74.74-.03 8.58zM14 12H9l-.35.15-.14.13V3.7l.7-.7H14v9zM6 5H3v1h3V5zm0 4H3v1h3V9zM3 7h3v1H3V7zm10-2h-3v1h3V5zm-3 2h3v1h-3V7zm0 2h3v1h-3V9z"/>
+</svg>
diff --git a/images/light/help/leaf.svg b/images/light/help/leaf.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <g id="Icon-/-Connection-ON-00" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path
+            d="M8.51111448,1.03251142 C8.51841485,1.04931507 8.52462017,1.06684932 8.52863538,1.07671233 C8.52863538,1.07671233 8.76480245,1.66118721 8.99914443,1.98995434 C9.21268034,2.45570776 11.1969218,3.67506849 12.0364647,7.38319635 C12.1203225,7.87022806 12.1640286,8.36333486 12.1671414,8.85753425 C12.1824722,11.8208219 10.6198273,13.6794521 9.75071785,14.483105 L9.75071785,14.483105 L9.73210189,14.4999087 C9.56733773,14.6533026 9.39299375,14.7960564 9.21012521,14.9273059 L9.21012521,14.9273059 L9.18530394,14.9441096 C9.03547295,15.6174795 8.92263461,16.2985619 8.84729666,16.9842922 L8.84729666,16.9842922 L8.5271753,16.9842922 C8.43774573,16.0140639 8.31071924,15.0986301 8.30816411,15.0789041 L8.30816411,15.0818265 L8.26180674,15.0489498 C7.85189078,14.7505023 4.82844123,12.4089498 5.0156958,8.47981735 C5.21645606,4.26684932 7.68325216,2.19561644 8.16398174,1.81936073 C8.47461261,1.48803653 8.48702325,1.36127854 8.51111448,1.03251142 Z M8.67500786,7.32073059 C8.52101561,7.31980594 8.49695432,11.2429256 8.49319475,12.468923 L8.49249853,12.8305023 C8.49249853,13.2593607 8.74728155,14.3987215 9.00023948,14.4290411 C9.00023948,14.4290411 8.8166351,7.32073059 8.67500786,7.32073059 Z"
+            id="Combined-Shape"
+            fill="#061621"
+            fill-rule="nonzero"
+        ></path>
+    </g>
+</svg>
diff --git a/images/light/help/lightbulb.svg b/images/light/help/lightbulb.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#061621">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.67 8.658a3.661 3.661 0 0 0-.781 1.114 3.28 3.28 0 0 0-.268 1.329v1.6a1.304 1.304 0 0 1-.794 1.197 1.282 1.282 0 0 1-.509.102H7.712a1.285 1.285 0 0 1-.922-.379 1.303 1.303 0 0 1-.38-.92v-1.6c0-.479-.092-.921-.274-1.329a3.556 3.556 0 0 0-.776-1.114 4.689 4.689 0 0 1-1.006-1.437A4.187 4.187 0 0 1 4 5.5a4.432 4.432 0 0 1 .616-2.27c.197-.336.432-.64.705-.914a4.6 4.6 0 0 1 .911-.702c.338-.196.7-.348 1.084-.454a4.45 4.45 0 0 1 1.2-.16 4.476 4.476 0 0 1 2.276.614 4.475 4.475 0 0 1 1.622 1.616 4.438 4.438 0 0 1 .616 2.27c0 .617-.117 1.191-.353 1.721a4.69 4.69 0 0 1-1.006 1.437zM9.623 10.5H7.409v2.201c0 .081.028.15.09.212a.29.29 0 0 0 .213.09h1.606a.289.289 0 0 0 .213-.09.286.286 0 0 0 .09-.212V10.5z"/>
+</svg>
diff --git a/images/light/help/megaphone.svg b/images/light/help/megaphone.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#061621">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 6.77l12.33-3.43.67.53v8.6l-.67.53-6.089-1.595a2.16 2.16 0 1 1-4.178-1.095L2 9.77l-.42-.53V7.3L2 6.77zm3.006 3.787a1.13 1.13 0 0 0-.04.242 1.17 1.17 0 0 0 2.288.347l-2.248-.589zM2.58 8.82L14 11.83V4.5L2.58 7.72v1.1z"/>
+</svg>
diff --git a/images/light/help/report.svg b/images/light/help/report.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#061621">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 1h13l.5.5v10l-.5.5H7.707l-2.853 2.854L4 14.5V12H1.5l-.5-.5v-10l.5-.5zm6 10H14V2H2v9h2.5l.5.5v1.793l2.146-2.147L7.5 11zm0-8h1v5h-1V3zm0 7h1V9h-1v1z"/>
+</svg>
diff --git a/package.json b/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": {
diff --git a/src/explorer/helpExplorer.ts b/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;
+    }
+  }
+}
diff --git a/src/explorer/helpTree.ts b/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)
+      );
+    }
+  }
+}
diff --git a/src/explorer/index.ts b/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
 };
diff --git a/src/explorer/playgroundsExplorer.ts b/src/explorer/playgroundsExplorer.ts
@@ -25,7 +25,7 @@ export default class PlaygroundsExplorer {
     }
   };
 
-  public async activatePlaygroundsTreeView(): Promise<void> {
+  public activatePlaygroundsTreeView(): void {
     this.createPlaygroundsTreeView();
   }
 
diff --git a/src/explorer/playgroundsTree.ts b/src/explorer/playgroundsTree.ts
diff --git a/src/mdbExtensionController.ts b/src/mdbExtensionController.ts
diff --git a/src/test/suite/explorer/explorerController.test.ts b/src/test/suite/explorer/explorerController.test.ts
diff --git a/src/test/suite/explorer/helpExplorer.test.ts b/src/test/suite/explorer/helpExplorer.test.ts
diff --git a/src/test/suite/extension.test.ts b/src/test/suite/extension.test.ts
