From 10b577809c9acd9a89dc433b3f6ef493c48aa455 Mon Sep 17 00:00:00 2001
From: Per von Zweigbergk <pvz@pvz.pp.se>
Date: Mon, 18 Sep 2023 22:04:25 +0200
Subject: [PATCH] Bugfixes for mark installed/mark planned button

Fixes #13712 and #13806.

Not super happy with the fix here, because it doesn't address the
underlying problem, which is that the toggleConnection() typescript function hardcodes
which CSS classes should be added/removed. Probably a more permanent fix would be
to stop applying CSS classes on the table view, and instead apply attributes
for cable/interface state, and then use CSS to apply colours based on
interface state, but this is a quite involved process. But it does at least
fix things in the here and now.
---
 netbox/project-static/dist/netbox.js          | Bin 530368 -> 530542 bytes
 netbox/project-static/dist/netbox.js.map      | Bin 450659 -> 450815 bytes
 .../src/buttons/connectionToggle.ts           |  38 ++++++++++++++----
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js
index 84bfecae34920e732ecf52670208390ce6712040..62fafe1d5f64ca7a41f353337afae4737a06c8eb 100644
GIT binary patch
delta 346
zcmX@GUg6yag@zW!7N!>F7M2#)Eo|35Pu{F9I9=`wn>b_T^ohbOBGa3`umv(!K-e$7
zu!&9&`NAeNo&PJF2uwx6S2j<sfSkm<ywnsW9jMZqUxBJ%N;#xbGK-V*feMmKlr%N1
zb5ctbf{Sc5;)`r6r}J^K$xZ+HnN5%-q{udSdSVK*D6dj_QEF<QlBSLeOo&G*DW^0Q
zDB=$j;a93m&B@6xSJJc&DN<7l202lT8>S5^Ai@LJ1`~;ZY17dNDXOV)0b>6mO*J(Q
y*CJb6C8#TbKCurj(o4=sEH3uREH2SYOi9szxylMt24qV+|2MYn{NLC&DgprPwR2Jc

delta 178
zcmaF2LE*r9g@zW!7N!>F7M2#)Eo|35PcQt+X2KXed84}U^yi=1#2G85PZVYmVJ|LC
zPEIW@o^Jn@O_U=uFD+k5Q>PLvHC^}%TOeaFgl+JZje{>Gvp6|FFE2H@1gI!@djA(T
zRiH5s@3M(912uw;n11#PoA`9wZ)}{?PkmwYm>&6sjT^}fAs`#5O>%n7S2o`E1K-%T
KANa<;P7we&S3_k0

diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map
index 7f2400ed2610973ed909703e534ec9b73c19c8ae..d49f4925892a1ad6cbfc91e00c995140ad55315f 100644
GIT binary patch
delta 323
zcmaESK>Ghd>4p}@7N!>F7M3lnx86<v_KsCyy2E?coaxuzvzjrcPUri;s>N37<mg%C
zH2vZ`R=Ik2b0-~lN5@nU;i(hq=oqRK?C2N_B%Di}L4t|sGJ%fH1z?#%uuf!6p^ol3
zE;^1NlRO=r-H>$pJ39IU&2-IkLY1ix)d5QdVoE_}LLGg9n!Fty(?MDtlYva<3}+o@
zh$TShMmjo2A=v~};|a1U2ibLC!AQrzGAErxN5^82c4uQ}pw-iTKd>4z6}fD0`oQ||
FJpkLkVdDS*

delta 157
zcmex=Q2Ox!>4p}@7N!>F7M3lnx86;^_MTOg)z#cd$9?*ZcdSYpo;sn9j-fjKj*k91
z;f~HlKnX`jsGui^73k=k15*9t9cvznYM=zBYM>Ed)hX{;Ev6g1XBC^i5lFBaI63;4
TOuzYo)tSlMX}jD<)`#x_!38zw

diff --git a/netbox/project-static/src/buttons/connectionToggle.ts b/netbox/project-static/src/buttons/connectionToggle.ts
index 74b32dc3a..ccff42f1c 100644
--- a/netbox/project-static/src/buttons/connectionToggle.ts
+++ b/netbox/project-static/src/buttons/connectionToggle.ts
@@ -19,27 +19,51 @@ function toggleConnection(element: HTMLButtonElement): void {
         createToast('danger', 'Error', res.error).show();
         return;
       } else {
-        // Get the button's row to change its styles.
-        const row = element.parentElement?.parentElement as HTMLTableRowElement;
         // Get the button's icon to change its CSS class.
         const icon = element.querySelector('i.mdi, span.mdi') as HTMLSpanElement;
         if (connected) {
-          row.classList.remove('success');
-          row.classList.add('info');
           element.classList.remove('connected', 'btn-warning');
           element.classList.add('btn-info');
           element.title = 'Mark Installed';
           icon.classList.remove('mdi-lan-disconnect');
           icon.classList.add('mdi-lan-connect');
         } else {
-          row.classList.remove('info');
-          row.classList.add('success');
           element.classList.remove('btn-success');
           element.classList.add('connected', 'btn-warning');
-          element.title = 'Mark Installed';
+          element.title = 'Mark Planned';
           icon.classList.remove('mdi-lan-connect');
           icon.classList.add('mdi-lan-disconnect');
         }
+
+        // Get the button's row to change its styles.
+        const row = element.parentElement?.parentElement as HTMLTableRowElement;
+
+        // Get the previous state of the cable so we know what CSS class was there before
+        const wasConnected = row.classList.contains('green');
+        const wasPlanned = row.classList.contains('blue');
+        const wasDecommissioning = row.classList.contains('yellow');
+
+        // Remove the appropriate CSS classes
+        if (wasConnected) {
+          row.classList.remove('green');
+        }
+        if (wasPlanned) {
+          row.classList.remove('blue');
+        }
+        if (wasDecommissioning) {
+          row.classList.remove('yellow');
+        }
+
+        // Only add a new CSS class if we removed an old one! Not removing an old CSS class
+        // can happen if the interface is disabled. In that case the row colour should be
+        // red no matter what, so don't touch it to add a new one.
+        if (wasConnected || wasPlanned || wasDecommissioning) {
+          if (status == 'connected') {
+            row.classList.add('green'); // connected
+          } else {
+            row.classList.add('blue'); // planned
+          }
+        }
       }
     });
   }