Simplify mark connected/installed implementation

Fixes: #13712 and #13806.

netbox/project-static/src/buttons/connectionToggle.ts

@@ -7,10 +7,10 @@ import { isTruthy, apiPatch, hasError, getElements } from '../util';
  *
  * @param element Connection Toggle Button Element
  */
-function toggleConnection(element: HTMLButtonElement): void {
+function setConnectionStatus(element: HTMLButtonElement, status: string): void {
+  // Get the button's row to change its data-cable-status attribute
+  const row = element.parentElement?.parentElement as HTMLTableRowElement;
   const url = element.getAttribute('data-url');
-  const connected = element.classList.contains('connected');
-  const status = connected ? 'planned' : 'connected';
 
   if (isTruthy(url)) {
     apiPatch(url, { status }).then(res => {
@@ -19,34 +19,18 @@ 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';
-          icon.classList.remove('mdi-lan-connect');
-          icon.classList.add('mdi-lan-disconnect');
-        }
+        // Update cable status in DOM
+        row.setAttribute('data-cable-status', status);
       }
     });
   }
 }
 
 export function initConnectionToggle(): void {
-  for (const element of getElements<HTMLButtonElement>('button.cable-toggle')) {
-    element.addEventListener('click', () => toggleConnection(element));
+  for (const element of getElements<HTMLButtonElement>('button.mark-planned')) {
+    element.addEventListener('click', () => setConnectionStatus(element, 'planned'));
+  }
+  for (const element of getElements<HTMLButtonElement>('button.mark-installed')) {
+    element.addEventListener('click', () => setConnectionStatus(element, 'connected'));
   }
 }

netbox/templates/dcim/device/interfaces.html

@@ -48,5 +48,12 @@
         tr[data-enabled=disabled] {
             background-color: var(--nbx-color-danger-a15);
         }
-    </style>
+        tr[data-cable-status=connected] button.mark-installed {
+            display: none;
+        }
+        tr:not([data-cable-status=connected]) button.mark-planned {
+            display: none;
+        }
+
+</style>
 {% endblock %} 

netbox/templates/dcim/inc/cable_toggle_buttons.html

@@ -1,12 +1,9 @@
 {% load i18n %}
 {% if perms.dcim.change_cable %}
-    {% if cable.status == 'connected' %}
-        <button type="button" class="btn btn-warning btn-sm cable-toggle connected" title="{% trans "Mark Planned" %}" data-url="{% url 'dcim-api:cable-detail' pk=cable.pk %}">
-            <i class="mdi mdi-lan-disconnect" aria-hidden="true"></i>
-        </button>
-    {% else %}
-        <button type="button" class="btn btn-info btn-sm cable-toggle" title="{% trans "Mark Installed" %}" data-url="{% url 'dcim-api:cable-detail' pk=cable.pk %}">
-            <i class="mdi mdi-lan-connect" aria-hidden="true"></i>
-        </button>
-    {% endif %}
+    <button type="button" class="btn btn-warning btn-sm mark-planned" title="{% trans "Mark Planned" %}" data-url="{% url 'dcim-api:cable-detail' pk=cable.pk %}">
+    <i class="mdi mdi-lan-disconnect" aria-hidden="true"></i>
+    </button>
+    <button type="button" class="btn btn-info btn-sm mark-installed" title="{% trans "Mark Installed" %}" data-url="{% url 'dcim-api:cable-detail' pk=cable.pk %}">
+    <i class="mdi mdi-lan-connect" aria-hidden="true"></i>
+    </button>
 {% endif %}