Merge "Send email notification if combined check state is updated"
diff --git a/gr-checks/gr-checkers-list.html b/gr-checks/gr-checkers-list.html
index 6c62e4d..5eb5a76 100644
--- a/gr-checks/gr-checkers-list.html
+++ b/gr-checks/gr-checkers-list.html
@@ -57,107 +57,108 @@
       }
     </style>
 
-
-    <div id="topContainer">
-      <div>
-        <label>Filter:</label>
-        <iron-input
-            type="text"
-            bind-value="{{_filter}}">
-          <input
-              is="iron-input"
+    <gr-overlay on-fullscreen-overlay-closed="_handleOverlayClosed" id="listOverlay" with-backdrop>
+      <div id="topContainer">
+        <div>
+          <label>Filter:</label>
+          <iron-input
               type="text"
-              id="filter"
               bind-value="{{_filter}}">
-        </iron-input>
+            <input
+                is="iron-input"
+                type="text"
+                id="filter"
+                bind-value="{{_filter}}">
+          </iron-input>
+        </div>
+        <div id="createNewContainer"
+            class$="[[_computeCreateClass(_createNewCapability)]]">
+          <gr-button primary link id="createNew" on-tap="_handleCreateClicked">
+            Create New
+          </gr-button>
+        </div>
       </div>
-      <div id="createNewContainer"
-          class$="[[_computeCreateClass(_createNewCapability)]]">
-        <gr-button primary link id="createNew" on-tap="_handleCreateClicked">
-          Create New
-        </gr-button>
-      </div>
-    </div>
 
-    <table id="list" class="genericList">
-      <tr class="headerRow">
-        <th class="name topHeader">Checker Name</th>
-        <th class="name topHeader">Repository</th>
-        <th class="name topHeader">Status</th>
-        <th class="name topHeader">Required</th>
-        <th class="topHeader description">Checker Description</th>
-        <th class="name topHeader"> Edit </th>
-      </tr>
-      <tbody class$="[[computeLoadingClass(_loading)]]">
-        <template is="dom-repeat" items="[[_visibleCheckers]]">
-          <tr class="table">
-            <td class="name">
-              <a>[[item.name]]</a>
-            </td>
-            <td class="name">[[item.repository]]</td>
-            <td class="name">[[item.status]]</td>
-            <td class="name">[[_computeBlocking(item)]]</td>
-            <td class="description">[[item.description]]</td>
-            <td on-tap="_handleEditIconClicked">
-              <iron-icon icon="gr-icons:edit"></iron-icon>
-            </td>
-          </tr>
+      <table id="list" class="genericList">
+        <tr class="headerRow">
+          <th class="name topHeader">Checker Name</th>
+          <th class="name topHeader">Repository</th>
+          <th class="name topHeader">Status</th>
+          <th class="name topHeader">Required</th>
+          <th class="topHeader description">Checker Description</th>
+          <th class="name topHeader"> Edit </th>
+        </tr>
+        <tbody id="listBody" class$="[[computeLoadingClass(_loading)]]">
+          <template is="dom-repeat" items="[[_visibleCheckers]]">
+            <tr class="table">
+              <td class="name">
+                <a>[[item.name]]</a>
+              </td>
+              <td class="name">[[item.repository]]</td>
+              <td class="name">[[item.status]]</td>
+              <td class="name">[[_computeBlocking(item)]]</td>
+              <td class="description">[[item.description]]</td>
+              <td on-tap="_handleEditIconClicked">
+                <iron-icon icon="gr-icons:edit"></iron-icon>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+
+      <nav>
+        <template is="dom-if" if="[[_showPrevButton]]">
+          <a class="nav-buttons" id="prevArrow"
+            on-tap="_handlePrevClicked">
+            <iron-icon class="nav-iron-icon" icon="gr-icons:chevron-left"></iron-icon>
+          </a>
         </template>
-      </tbody>
-    </table>
+        <template is="dom-if" if="[[_showNextButton]]">
+          <a class="nav-buttons" id="nextArrow"
+            on-tap="_handleNextClicked">
+            <iron-icon icon="gr-icons:chevron-right"></iron-icon>
+          </a>
+        </template>
+      </nav>
 
-    <nav>
-      <template is="dom-if" if="[[_showPrevButton]]">
-        <a class="nav-buttons" id="prevArrow"
-          on-tap="_handlePrevClicked">
-          <iron-icon class="nav-iron-icon" icon="gr-icons:chevron-left"></iron-icon>
-        </a>
-      </template>
-      <template is="dom-if" if="[[_showNextButton]]">
-        <a class="nav-buttons" id="nextArrow"
-          on-tap="_handleNextClicked">
-          <iron-icon icon="gr-icons:chevron-right"></iron-icon>
-        </a>
-      </template>
-    </nav>
-
-    <gr-overlay id="createOverlay">
-      <gr-dialog
-          id="createDialog"
-          confirm-label="Create"
-          on-confirm="_handleCreateConfirm"
-          on-cancel="_handleCreateCancel">
-        <div class="header" slot="header">
-          Create Checkers
-        </div>
-        <div slot="main">
-          <gr-create-checkers-dialog
-            id="createNewModal"
-            plugin-rest-api="[[pluginRestApi]]">
-          </gr-create-checkers-dialog>
-        </div>
-      </gr-dialog>
+      <gr-overlay id="createOverlay">
+        <gr-dialog
+            id="createDialog"
+            confirm-label="Create"
+            on-confirm="_handleCreateConfirm"
+            on-cancel="_handleCreateCancel">
+          <div class="header" slot="header">
+            Create Checkers
+          </div>
+          <div slot="main">
+            <gr-create-checkers-dialog
+              id="createNewModal"
+              plugin-rest-api="[[pluginRestApi]]">
+            </gr-create-checkers-dialog>
+          </div>
+        </gr-dialog>
+      </gr-overlay>
+      <gr-overlay id="editOverlay">
+        <gr-dialog
+            id="editDialog"
+            confirm-label="Save"
+            on-confirm="_handleEditConfirm"
+            on-cancel="_handleEditCancel">
+          <div class="header" slot="header">
+            Edit Checker
+          </div>
+          <div slot="main">
+            <gr-create-checkers-dialog
+                checker="[[checker]]"
+                plugin-rest-api="[[pluginRestApi]]"
+                on-cancel="_handleEditCancel"
+                id="editModal">
+            </gr-create-checkers-dialog>
+          </div>
+        </gr-dialog>
+      </gr-overlay>
     </gr-overlay>
-    <gr-overlay id="editOverlay">
-      <gr-dialog
-          id="editDialog"
-          confirm-label="Save"
-          on-confirm="_handleEditConfirm"
-          on-cancel="_handleEditCancel">
-        <div class="header" slot="header">
-          Edit Checker
-        </div>
-        <div slot="main">
-          <gr-create-checkers-dialog
-              checker="[[checker]]"
-              plugin-rest-api="[[pluginRestApi]]"
-              on-cancel="_handleEditCancel"
-              id="editModal">
-          </gr-create-checkers-dialog>
-        </div>
-      </gr-dialog>
-    </gr-overlay>
-      <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
+    <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
   </template>
   <script src="gr-checkers-list.js"></script>
 </dom-module>
diff --git a/gr-checks/gr-checkers-list.js b/gr-checks/gr-checkers-list.js
index 4914274..b07b861 100644
--- a/gr-checks/gr-checkers-list.js
+++ b/gr-checks/gr-checkers-list.js
@@ -16,7 +16,6 @@
        */
       pluginRestApi: {
         type: Object,
-        observer: '_getCheckers'
       },
       // Checker that will be passed to the editOverlay modal
       checker: Object,
@@ -34,7 +33,6 @@
       _visibleCheckers: {
         type: Array,
         computed: '_computeVisibleCheckers(_startingIndex, _filteredCheckers)',
-        observer: '_visibleCheckersChanged'
       },
       _createNewCapability: {
         type: Boolean,
@@ -59,17 +57,40 @@
       '_showCheckers(_checkers, _filter)',
     ],
 
+    attached() {
+      /**
+       * Adding an observer to listBody element as gr-overlay does not
+       * automatically resize itself once the getCheckers response comes.
+       * Polymer 2 will deprecate use of obserNodes so replacing it
+       * with FlattenedNodesObserver
+       */
+      if (Polymer.FlattenedNodesObserver) {
+        this._checkersListObserver = new Polymer.FlattenedNodesObserver(
+          this.$.listBody, () => {
+            this.$.listOverlay.refit();
+          });
+      } else {
+        this._checkersListObserver = Polymer.dom(this.$.listBody).observeNodes(
+          () => {
+            this.$.listOverlay.refit();
+          });
+      }
+    },
+
+    detached() {
+      Polymer.dom(this.$.listBody).unobserveNodes(this._checkersListObserver);
+    },
+
     _contains(target, keyword) {
       return target.toLowerCase().includes(keyword.toLowerCase().trim());
     },
 
-    _visibleCheckersChanged(currentVisibleCheckers, previousVisibleCheckers) {
-      if (!currentVisibleCheckers || !previousVisibleCheckers) {
-        return;
-      }
-      if (currentVisibleCheckers.length !== previousVisibleCheckers.length) {
-        this.fire('resize', {bubbles: false});
-      }
+    _showConfigureOverlay() {
+      this.$.listOverlay.open().then(
+        () => {
+          this._getCheckers();
+        }
+      )
     },
 
     _showCheckers(_checkers, _filter) {
@@ -121,9 +142,9 @@
       }
     },
 
-    _getCheckers(pluginRestApi) {
-      if (!pluginRestApi) return;
-      pluginRestApi.get(GET_CHECKERS_URL).then(checkers => {
+    _getCheckers() {
+      if (!this.pluginRestApi) return;
+      this.pluginRestApi.get(GET_CHECKERS_URL).then(checkers => {
         if (!checkers) { return; }
         this._checkers = checkers;
         this._startingIndex = 0;
diff --git a/gr-checks/gr-checks-view.html b/gr-checks/gr-checks-view.html
index 40b6390..f0f7c94 100644
--- a/gr-checks/gr-checks-view.html
+++ b/gr-checks/gr-checks-view.html
@@ -166,9 +166,7 @@
       </table>
     </template>
 
-    <gr-overlay id="listOverlay" with-backdrop>
-      <gr-checkers-list on-resize="_handleCheckersListResize" plugin-rest-api="[[pluginRestApi]]"></gr-checkers-list>
-    </gr-overlay>
+    <gr-checkers-list on-resize="_handleCheckersListResize" plugin-rest-api="[[pluginRestApi]]"></gr-checkers-list>
 
   </template>
   <script src="gr-checks-view.js"></script>
diff --git a/gr-checks/gr-checks-view.js b/gr-checks/gr-checks-view.js
index 3aa88b8..81c851d 100644
--- a/gr-checks/gr-checks-view.js
+++ b/gr-checks/gr-checks-view.js
@@ -98,7 +98,7 @@
     },
 
     _handleConfigureClicked() {
-      this.$.listOverlay.open();
+      this.$$('gr-checkers-list')._showConfigureOverlay();
     },
 
     _orderChecks(a, b) {