Remove two-way binnding for triage mode (web-platform-tests#3341)

* Remove two-way binnding for triage mode * Use downward data-binding [[]] --------- Co-authored-by: Kyle Ju <[email protected]>
LeonardYam · Jun 6, 2023 · 24f02dc · 24f02dc
1 parent b84b538
commit 24f02dc
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/webapp/components/github-login.js b/webapp/components/github-login.js
@@ -48,7 +48,7 @@ class GitHubLogin extends PolymerElement {
     <template is="dom-if" if="[[user]]">
       <div class="logged-in">
         <template is="dom-if" if="[[showTriage]]">
-          <paper-toggle-button checked="{{isTriageMode}}" aria-label="Toggle Triage Mode"></paper-toggle-button>
+          <paper-toggle-button on-click="handleTriageToggle" checked="{{isTriageMode}}" aria-label="Toggle Triage Mode"></paper-toggle-button>
           Triage Mode
         </template>
         <iron-icon class="github-icon" src="/static/github.svg"></iron-icon>
@@ -80,7 +80,6 @@ class GitHubLogin extends PolymerElement {
       },
       isTriageMode: {
         type: Boolean,
-        notify: true,
       },
       showTriage: {
         type: Boolean,
@@ -101,6 +100,19 @@ class GitHubLogin extends PolymerElement {
     window.location = url;
   }
 
+  handleTriageToggle() {
+    this._fireEvent('triagemode', { val: this.isTriageMode });
+  }
+
+  _fireEvent(eventName, detail) {
+    const event = new CustomEvent(eventName, {
+      bubbles: true,
+      composed: true,
+      detail,
+    });
+    this.dispatchEvent(event);
+  }
+
   openHelpDialog() {
     this.$.dialog.open();
   }

diff --git a/webapp/components/wpt-header.js b/webapp/components/wpt-header.js
@@ -55,7 +55,7 @@ class WPTHeader extends WPTFlags(PolymerElement) {
           <a href="/">web-platform-tests dashboard</a>
         </h1>
         <template is="dom-if" if="[[githubLogin]]">
-          <github-login user="[[user]]" is-triage-mode="{{isTriageMode}}"></github-login>
+          <github-login user="[[user]]" is-triage-mode="[[isTriageMode]]"></github-login>
         </template>
       </div>
 
@@ -91,7 +91,6 @@ class WPTHeader extends WPTFlags(PolymerElement) {
       user: String,
       isTriageMode: {
         type: Boolean,
-        notify: true,
       }
     };
   }

diff --git a/webapp/views/wpt-app.js b/webapp/views/wpt-app.js
@@ -73,7 +73,7 @@ class WPTApp extends PathInfo(WPTFlags(TestRunsUIBase)) {
       <app-location route="{{route}}" url-space-regex="^/(results)/"></app-location>
       <app-route route="{{route}}" pattern="/:page" data="{{routeData}}" tail="{{subroute}}"></app-route>
 
-      <wpt-header path="[[encodedPath]]" query="[[query]]" user="[[user]]" is-triage-mode="{{isTriageMode}}"></wpt-header>
+      <wpt-header path="[[encodedPath]]" query="[[query]]" user="[[user]]" is-triage-mode="[[isTriageMode]]"></wpt-header>
 
       <section class="search">
         <div class="path">
@@ -292,6 +292,7 @@ class WPTApp extends PathInfo(WPTFlags(TestRunsUIBase)) {
     testSearch.addEventListener('commit', this.handleSearchCommit.bind(this));
     testSearch.addEventListener('autocomplete', this.handleSearchAutocomplete.bind(this));
     document.addEventListener('keydown', this.handleKeyDown.bind(this));
+    this.addEventListener('triagemode', this.handleTriageToggle.bind(this));
   }
 
   disconnectedCallback() {
@@ -378,6 +379,10 @@ class WPTApp extends PathInfo(WPTFlags(TestRunsUIBase)) {
     this.dismissToast(e);
   }
 
+  handleTriageToggle(e) {
+    this.isTriageMode = e.detail.val;
+  }
+
   computeEditable(queryParams) {
     if (queryParams.run_id || 'max-count' in queryParams) {
       return false;