From b49fe08bcfb56d01e27542642cc55ab905d72a01 Mon Sep 17 00:00:00 2001
From: Daniel LaCosse <3759828+daniellacosse@users.noreply.github.com>
Date: Tue, 18 Feb 2025 18:09:21 -0500
Subject: [PATCH 1/3] fix(client): electron app doesn't respect reflected
 properties

---
 .../access_key_usage_meter/index.ts           | 20 ++++++++++++++----
 .../access_key_usage_meter/stories.ts         |  2 +-
 .../server_metrics_row/bandwidth.ts           | 21 ++++++++++++++-----
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/index.ts b/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/index.ts
index b64af6f35a0..f6fa8753a0f 100644
--- a/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/index.ts
+++ b/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/index.ts
@@ -16,6 +16,7 @@
 
 import {LitElement, html, css, nothing} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
 
 import {formatBytes} from '../../../../data_formatting';
 
@@ -57,7 +58,8 @@ export class AccessKeyUsageMeter extends LitElement {
       font-family: var(--access-key-usage-meter-font-family);
     }
 
-    :host([dataLimitWarning]) > label {
+    :host([dataLimitWarning]) > label,
+    label.data-limit-warning {
       color: var(--access-key-usage-meter-warning-text-color);
     }
 
@@ -77,22 +79,32 @@ export class AccessKeyUsageMeter extends LitElement {
       background: var(--access-key-usage-meter-color);
     }
 
-    :host([dataLimitWarning]) > progress[value]::-webkit-progress-value {
+    :host([dataLimitWarning]) > progress[value]::-webkit-progress-value,
+    progress.data-limit-warning[value]::-webkit-progress-value {
       background: var(--access-key-usage-meter-warning-color);
     }
   `;
 
   render() {
+    // TODO: debug why the reflected property doesn't work in electron
     return html`<progress
+        class=${classMap({
+          'data-limit-warning': this.dataLimitWarning,
+        })}
         id="progress"
         max=${this.dataLimitBytes}
         value=${this.dataUsageBytes}
       ></progress>
-      <label for="progress">
+      <label
+        class=${classMap({
+          'data-limit-warning': this.dataLimitWarning,
+        })}
+        for="progress"
+      >
         ${formatBytes(this.dataUsageBytes, this.language)} /
         ${formatBytes(this.dataLimitBytes, this.language)}
         ${this.dataLimitWarning
-          ? this.localize('server-view-access-keys-usage-limit')
+          ? `(${this.localize('server-view-access-keys-usage-limit')})`
           : nothing}
       </label>`;
   }
diff --git a/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/stories.ts b/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/stories.ts
index 233cb6aa4e5..477e4c4383a 100644
--- a/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/stories.ts
+++ b/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/stories.ts
@@ -30,6 +30,6 @@ export const Example = {
     dataUsageBytes: 1000000,
     dataLimitBytes: 10000000,
     language: 'en',
-    localize: () => '(80%+ used)',
+    localize: () => '80%+ used',
   },
 };
diff --git a/server_manager/www/views/server_view/server_metrics_row/bandwidth.ts b/server_manager/www/views/server_view/server_metrics_row/bandwidth.ts
index fb9c47d008c..a3c105e533b 100644
--- a/server_manager/www/views/server_view/server_metrics_row/bandwidth.ts
+++ b/server_manager/www/views/server_view/server_metrics_row/bandwidth.ts
@@ -16,6 +16,7 @@
 
 import {LitElement, html, css, nothing} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map';
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 
 import type {ServerMetricsData} from './index';
@@ -158,7 +159,8 @@ export class ServerMetricsBandwidthRow extends LitElement {
       font-size: var(--server-metrics-bandwidth-row-value-font-size);
     }
 
-    :host([bandwidthLimitWarning]) .bandwidth-percentage {
+    :host([bandwidthLimitWarning]) .bandwidth-percentage,
+    .bandwidth-limit-warning .bandwidth-percentage {
       color: var(--server-metrics-bandwidth-row-meter-warning-color);
     }
 
@@ -206,15 +208,18 @@ export class ServerMetricsBandwidthRow extends LitElement {
       );
     }
 
-    :host([bandwidthLimitWarning]) progress[value]::-webkit-progress-value {
+    :host([bandwidthLimitWarning]) progress[value]::-webkit-progress-value,
+    .bandwidth-limit-warning progress[value]::-webkit-progress-value {
       background: var(--server-metrics-bandwidth-row-meter-warning-color);
     }
 
-    :host([bandwidthLimitWarning]) .bandwidth-progress-container {
+    :host([bandwidthLimitWarning]) .bandwidth-progress-container,
+    .bandwidth-limit-warning .bandwidth-progress-container {
       padding: 0;
     }
 
-    :host([bandwidthLimitWarning]) .bandwidth-progress-container icon-tooltip {
+    :host([bandwidthLimitWarning]) .bandwidth-progress-container icon-tooltip,
+    .bandwidth-limit-warning .bandwidth-progress-container icon-tooltip {
       display: block;
     }
 
@@ -296,7 +301,13 @@ export class ServerMetricsBandwidthRow extends LitElement {
           '</i>'
         )}
       >
-        <div class="main-container">
+        <!-- TODO: debug why the reflected property doesn't work in electron -->
+        <div
+          class=${classMap({
+            'bandwidth-limit-warning': this.bandwidthLimitWarning,
+            'main-container': true,
+          })}
+        >
           <div class="title-and-bandwidth-container">
             <div class="title-container">
               <mwc-icon>data_usage</mwc-icon>

From 98710488ce06eec460725d26145a2226bdee50cf Mon Sep 17 00:00:00 2001
From: Daniel LaCosse <3759828+daniellacosse@users.noreply.github.com>
Date: Wed, 19 Feb 2025 09:05:19 -0500
Subject: [PATCH 2/3] Update bandwidth.ts

---
 .../www/views/server_view/server_metrics_row/bandwidth.ts       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server_manager/www/views/server_view/server_metrics_row/bandwidth.ts b/server_manager/www/views/server_view/server_metrics_row/bandwidth.ts
index a3c105e533b..4dd0ffb0551 100644
--- a/server_manager/www/views/server_view/server_metrics_row/bandwidth.ts
+++ b/server_manager/www/views/server_view/server_metrics_row/bandwidth.ts
@@ -301,7 +301,7 @@ export class ServerMetricsBandwidthRow extends LitElement {
           '</i>'
         )}
       >
-        <!-- TODO: debug why the reflected property doesn't work in electron -->
+        <!-- TODO(#2400): debug why the reflected property doesn't work in electron -->
         <div
           class=${classMap({
             'bandwidth-limit-warning': this.bandwidthLimitWarning,

From 6f7a5d9bc031b84c7d78295bcae6e80e6b2675c7 Mon Sep 17 00:00:00 2001
From: Daniel LaCosse <3759828+daniellacosse@users.noreply.github.com>
Date: Wed, 19 Feb 2025 09:05:42 -0500
Subject: [PATCH 3/3] Update index.ts

---
 .../access_key_data_table/access_key_usage_meter/index.ts       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/index.ts b/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/index.ts
index f6fa8753a0f..5bfb0dbe22d 100644
--- a/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/index.ts
+++ b/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/index.ts
@@ -86,7 +86,7 @@ export class AccessKeyUsageMeter extends LitElement {
   `;
 
   render() {
-    // TODO: debug why the reflected property doesn't work in electron
+    // TODO (#2400): debug why the reflected property doesn't work in electron
     return html`<progress
         class=${classMap({
           'data-limit-warning': this.dataLimitWarning,