alert-manager - Reflect some state to the URL.

Bug: skia:
Change-Id: Ifd1d01f1f5c1c9999ecb10fa4e301a7e5c3de9b7
Reviewed-on: https://skia-review.googlesource.com/c/179855
Reviewed-by: Ravi Mistry <rmistry@google.com>
diff --git a/am/modules/alert-manager-sk/alert-manager-sk.js b/am/modules/alert-manager-sk/alert-manager-sk.js
index 4b3aaab..2fc1282 100644
--- a/am/modules/alert-manager-sk/alert-manager-sk.js
+++ b/am/modules/alert-manager-sk/alert-manager-sk.js
@@ -26,6 +26,7 @@
 import { errorMessage } from 'elements-sk/errorMessage'
 import { html, render } from 'lit-html'
 import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow'
+import { stateReflector} from 'common-sk/modules/stateReflector'
 
 import * as paramset from '../paramset'
 import { abbr, displaySilence, expiresIn } from '../am'
@@ -81,7 +82,7 @@
 }
 
 function rightHandSide(ele) {
-  switch (ele._state) {
+  switch (ele._rhs_state) {
     case START:
       return ``
     case INCIDENT:
@@ -155,7 +156,7 @@
 const template = (ele) => html`
 <header>${trooper(ele)}<login-sk></login-sk></header>
 <section class=nav>
-  <tabs-sk @tab-selected-sk=${ele._tabSwitch}>
+  <tabs-sk @tab-selected-sk=${ele._tabSwitch} selected=${ele._state.tab}>
     <button>Mine</button>
     <button>Alerts</button>
     <button>Silences</button>
@@ -211,7 +212,7 @@
     this._stats = []; // Last requested stats.
     this._stats_range = '1w';
     this._incident_stats = []; // The incidents for a given stat.
-    this._state = START; // One of START, INCIDENT, or EDIT_SILENCE.
+    this._rhs_state = START; // One of START, INCIDENT, or EDIT_SILENCE.
     this._selected = null; // The selected incident, i.e. you clicked on the name.
     this._checked = new Set();    // Checked incidents, i.e. you clicked the checkbox.
     this._current_silence = null; // A silence under construction.
@@ -220,6 +221,9 @@
     this._last_checked_incident = null; // Keeps track of the last checked incident. Used for multi-selecting incidents with shift.
     this._user = 'barney@example.org';
     this._trooper = '';
+    this._state = {
+      tab: 0, // The selected tab.
+    };
     fetch('https://skia-tree-status.appspot.com/current-trooper?format=json', {mode: 'cors'}).then(jsonOrThrow).then(json => {
       this._trooper = json.username;
       this._render();
@@ -243,6 +247,14 @@
     this.addEventListener('assign', e => this._assign(e));
     this.addEventListener('assign-to-owner', e => this._assignToOwner(e));
 
+    this._stateHasChanged = stateReflector(
+      () => this._state,
+      (state) => {
+        this._state = state;
+        this._render();
+      }
+    );
+
     this._render();
     this._busy = $$('#busy', this);
     this._favicon = $$('#favicon');
@@ -285,11 +297,14 @@
   }
 
   _tabSwitch(e) {
+    this._state.tab = e.detail.index;
+    this._stateHasChanged();
+
     // If tab is stats then load stats.
     if (e.detail.index === 3) {
       this._getStats();
     }
-    this._state = START;
+    this._rhs_state = START;
     this._render();
   }
 
@@ -301,14 +316,14 @@
   _silenceClick(silence) {
     this._current_silence = JSON.parse(JSON.stringify(silence));
     this._selected = silence;
-    this._state = EDIT_SILENCE;
+    this._rhs_state = EDIT_SILENCE;
     this._render();
   }
 
   _statsClick(incident) {
     this._selected = incident;
     this._incidentStats();
-    this._state = VIEW_STATS;
+    this._rhs_state = VIEW_STATS;
   }
 
   // Update the paramset for a silence as Incidents are checked and unchecked.
@@ -333,7 +348,7 @@
       });
     }
 
-    this._state = EDIT_SILENCE;
+    this._rhs_state = EDIT_SILENCE;
     this._render();
   }
 
@@ -389,7 +404,7 @@
   }
 
   _select(incident) {
-    this._state = INCIDENT;
+    this._rhs_state = INCIDENT;
     this._checked = new Set();
     this._selected = incident;
     this._current_silence = null;
@@ -512,7 +527,7 @@
       this._silences.push(json);
     }
     if (clear) {
-      this._state = START;
+      this._rhs_state = START;
     }
   }
 
diff --git a/am/package.json b/am/package.json
index eb48f21..9fb5cd9 100644
--- a/am/package.json
+++ b/am/package.json
@@ -11,14 +11,14 @@
   "dependencies": {
     "@webcomponents/custom-elements": "~1.2.1",
     "common-sk": "~3.1.0",
-    "infra-sk": "~0.8.0",
-    "elements-sk": "~2.6.0",
+    "infra-sk": "~0.8.1",
+    "elements-sk": "~2.7.0",
     "lit-html": "~0.14.0"
   },
   "devDependencies": {
     "chai": "~4.2.0",
     "copy-webpack-plugin": "~4.6.0",
-    "karma": "~3.1.3",
+    "karma": "~3.1.4",
     "karma-chai": "~0.1.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-firefox-launcher": "~1.1.0",
@@ -27,9 +27,9 @@
     "karma-webpack": "~3.0.5",
     "mocha": "~5.2.0",
     "pulito": "~4.1.1",
-    "sinon": "~7.2.0",
-    "webpack": "~4.27.1",
+    "sinon": "~7.2.2",
+    "webpack": "~4.28.1",
     "webpack-cli": "~3.1.2",
-    "webpack-dev-server": "~3.1.10"
+    "webpack-dev-server": "~3.1.11"
   }
 }