Add-on manager functionality should be documented

app/js/components/manageApps/Help.jsx

@@ -7,6 +7,12 @@ import view from '../../../img/view.png';
 import start from '../../../img/start.png';
 import stop from '../../../img/stop.png';
 import startingallmodules from '../../../img/startingallmodules.png';
+import runningStatus from '../../../img/runningStatus.png';
+import searchAddon from '../../../img/searchAddon.png';
+import dragAndDrop from '../../../img/dragAndDrop.png';
+import downloadAddon from '../../../img/downloadAddon.png';
+import installAddon from '../../../img/installAddon.png';
+import deleteAddon from '../../../img/deleteAddon.png';
 
 export default class Help extends React.Component {
   constructor(props) {
@@ -94,9 +100,20 @@ export default class Help extends React.Component {
             <fieldset className="scheduler-border">
               <legend className="scheduler-border">Having trouble? We're here to help</legend>
 
+              <section>
+                <p><strong>1 How to check for running status of addons</strong></p>
+                <p> <img src={(runningStatus)} className="help-page-images" alt="Add-On manager homepage" /></p>
+                    A list of all installed addons and their running status. The green icon indicates the addon is running while the red icon indicates addon not running.
+              </section><br />
+
+              <section>
+                <p><strong>2 Search the addon index</strong></p>
+                <p> <img src={(searchAddon)} className="help-page-images" alt="Add-On manager homepage" /></p>
+                    You can search for addon by key words in name and description
+              </section><br />
 
               <section>
-                <p><strong>How do you check for updates?</strong></p>
+                <p><strong>3 How do you check for updates?</strong></p>
                 <p>To check for newer versions of installed addons click on the check for updates button
                   <img src={(checkforupdates)} className="help-page-images" alt="Add-On manager homepage" /><br />
                   If any addons have updates they'll be in the resulting list e.g
@@ -105,7 +122,32 @@ export default class Help extends React.Component {
                     A user can upgrade by clicking on the upgrade button or download the new file.
                     A user can decide to go back to the original addon list by clicking the back to all addons
                 </p>
-              </section>
+              </section><br />
+
+              <section>
+                <p><strong>4 Download an addon file </strong></p>
+                <p> <img src={(downloadAddon)} className="help-page-images" alt="Add-On manager homepage" /></p>
+                    You can download an addon to your local system by clicking the `Download` text.
+              </section><br />
+
+              <section>
+                <p><strong>5 Upload an addon file from the local system </strong></p>
+                <p> <img src={(dragAndDrop)} className="help-page-images" alt="Add-On manager homepage" /></p>
+                    You can install an addon from your local system by simply drag and drop or by clicking the `Click to Select` text.
+              </section><br />
+
+              <section>
+                <p><strong>6 Install Addon </strong></p>
+                <p> <img src={(installAddon)} className="help-page-images" alt="Add-On manager homepage" /></p>
+                    You can install an addon directly by clicking on an install button.
+              </section><br />
+
+              <section>
+                <p><strong>7 Delete Addon </strong></p>
+                <p> <img src={(deleteAddon)} className="help-page-images" alt="Add-On manager homepage" /></p>
+                    You can delete an installed addon by clicking the Delete Button.
+              </section><br />
+
               <section>
                 <p><strong>What does the view button do?</strong></p>
                 <p>In order to view the interface of a particular module, you click on the view button as shown

tests/components/Help.test.js

@@ -19,9 +19,9 @@ describe('<Help />', () => {
   it('should render its children', () => {
     expect(renderedComponent.find("div")).to.have.length(4)
     expect(renderedComponent.find("h2")).to.have.length(1)
-    expect(renderedComponent.find("img")).to.have.length(6)
+    expect(renderedComponent.find("img")).to.have.length(12)
     expect(renderedComponent.find("h2")).to.have.length(1)
-    expect(renderedComponent.find("p")).to.have.length(10)
+    expect(renderedComponent.find("p")).to.have.length(22)
     expect(renderedComponent.find("fieldset")).to.have.length(1)
     expect(renderedComponent.find("legend")).to.have.length(1)
   })