Revert "Revert "Provide in-dashboard help for creating changes""

This reverts commit e5639b3e9890f593de36c21f83da2b0c1d1e50ca.

Change-Id: I37e26ead38fef16534da952b09bcd0d4beb105aa
diff --git a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html
index af320e2..84ada58 100644
--- a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html
+++ b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html
@@ -24,6 +24,8 @@
 <link rel="import" href="../../shared/gr-dialog/gr-dialog.html">
 <link rel="import" href="../../shared/gr-overlay/gr-overlay.html">
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
+<link rel="import" href="../gr-create-commands-dialog/gr-create-commands-dialog.html">
+<link rel="import" href="../gr-create-destination-dialog/gr-create-destination-dialog.html">
 <link rel="import" href="../gr-user-header/gr-user-header.html">
 
 <dom-module id="gr-dashboard-view">
@@ -59,10 +61,42 @@
       .hide {
         display: none;
       }
+      #emptyOutgoing {
+        display: block;
+      }
+      #emptyOutgoing #graphic,
+      #emptyOutgoing #help {
+        display: inline-block;
+        margin: .5em;
+      }
+      #emptyOutgoing #graphic {
+        fill: var(--deemphasized-text-color);
+        max-width: 12em;
+      }
+      #emptyOutgoing #graphic svg {
+        display: block;
+        margin: 0 auto;
+        max-width: 100px;
+      }
+      #emptyOutgoing #graphic p {
+        text-align: center;
+      }
+      #emptyOutgoing #help {
+        vertical-align: top;
+      }
+      #emptyOutgoing #help h1 {
+        font-size: var(--font-size-large);
+      }
+      #emptyOutgoing #help p {
+        max-width: 35em;
+      }
       @media only screen and (max-width: 50em) {
         .loading {
           padding: 0 var(--default-horizontal-margin);
         }
+        #emptyOutgoing #graphic {
+          display: none;
+        }
       }
     </style>
     <div class$="banner [[_computeBannerClass(_showDraftsBanner)]]">
@@ -90,7 +124,27 @@
           selected-index="{{viewState.selectedChangeIndex}}"
           sections="[[_results]]"
           on-toggle-star="_handleToggleStar"
-          on-toggle-reviewed="_handleToggleReviewed"></gr-change-list>
+          on-toggle-reviewed="_handleToggleReviewed">
+        <div id="emptyOutgoing" slot="empty-outgoing">
+          <div id="graphic">
+            <svg width="150" height="100">
+              <circle cx="50" cy="50" r="50"></circle>
+            </svg>
+            <p>
+              No outgoing changes yet
+            </p>
+          </div>
+          <div id="help">
+            <h1>Push your first changes for code review</h1>
+            <p>
+              Pushing a change for review is easy, but a little different from
+              other git code review tools. Click on the `Create Change' button
+              and follow the step by step instructions.
+            </p>
+            <gr-button on-tap="_createChangeTap">Create Change</gr-button>
+          </div>
+        </div>
+      </gr-change-list>
     </div>
     <gr-overlay id="confirmDeleteOverlay" with-backdrop>
       <gr-dialog
@@ -107,6 +161,10 @@
         </div>
       </gr-dialog>
     </gr-overlay>
+    <gr-create-destination-dialog
+        id="destinationDialog"
+        on-confirm="_handleDestinationConfirm"></gr-create-destination-dialog>
+    <gr-create-commands-dialog id="commandsDialog"></gr-create-commands-dialog>
     <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
     <gr-reporting id="reporting"></gr-reporting>
   </template>
diff --git a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.js b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.js
index 8aa7084..54fd8b3 100644
--- a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.js
+++ b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.js
@@ -187,6 +187,7 @@
               sectionName: res.sections[i].name,
               query: res.sections[i].query,
               results,
+              isOutgoing: res.sections[i].isOutgoing,
             })).filter((section, i) => !res.sections[i].hideIfEmpty ||
                 section.results.length);
           });
@@ -248,5 +249,14 @@
     _computeDraftsLink() {
       return Gerrit.Nav.getUrlForSearchQuery('has:draft -is:open');
     },
+
+    _createChangeTap() {
+      this.$.destinationDialog.open();
+    },
+
+    _handleDestinationConfirm(e) {
+      this.$.commandsDialog.branch = e.detail.branch;
+      this.$.commandsDialog.open();
+    },
   });
 })();
diff --git a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view_test.html b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view_test.html
index aebd452..83ba096 100644
--- a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view_test.html
+++ b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view_test.html
@@ -283,6 +283,22 @@
       });
     });
 
+    test('preserve isOutgoing sections', () => {
+      const sections = [
+        {name: 'test1', query: 'test1', isOutgoing: true},
+        {name: 'test2', query: 'test2'},
+      ];
+      getChangesStub.restore();
+      sandbox.stub(element.$.restAPI, 'getChanges')
+          .returns(Promise.resolve([[], []]));
+
+      return element._fetchDashboardChanges({sections}).then(() => {
+        assert.equal(element._results.length, 2);
+        assert.isTrue(element._results[0].isOutgoing);
+        assert.isNotOk(element._results[1].isOutgoing);
+      });
+    });
+
     test('_computeUserHeaderClass', () => {
       assert.equal(element._computeUserHeaderClass(undefined), '');
       assert.equal(element._computeUserHeaderClass(''), '');