Closes #9980: Use standard table controls template for device interfaces list

netbox/templates/dcim/device/inc/interface_table_controls.html

@@ -0,0 +1,11 @@
+{% extends 'inc/table_controls_htmx.html' %}
+
+{% block extra_table_controls %}
+  <button class="btn btn-sm btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    <i class="mdi mdi-eye"></i>
+  </button>
+  <ul class="dropdown-menu">
+    <button type="button" class="dropdown-item toggle-enabled" data-state="show">Hide Enabled</button>
+    <button type="button" class="dropdown-item toggle-disabled" data-state="show">Hide Disabled</button>
+  </ul>
+{% endblock extra_table_controls %}

netbox/templates/dcim/device/interfaces.html

@@ -4,34 +4,7 @@
 {% load static %}
 
 {% block content %}
-<div class="row mb-3 justify-content-between">
-  <div class="col col-12 col-lg-4 my-3 my-lg-0 d-flex noprint table-controls">
-    <div class="input-group input-group-sm quicksearch hide-last-child">
-      <input type="search" results=5 name="q" id="quicksearch" class="form-control" placeholder="Quick search"
-        hx-get="{{ request.full_path }}" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, search" />
-      <button class="btn bg-transparent" type="button" id="quicksearch_clear"><i
-          class="mdi mdi-close-circle"></i></button>
-    </div>
-  </div>
-  <div class="col col-md-3 mb-0 d-flex noprint table-controls">
-    <div class="input-group input-group-sm justify-content-end">
-      {% if request.user.is_authenticated %}
-      <button type="button" class="btn btn-sm btn-outline-dark" data-bs-toggle="modal"
-        data-bs-target="#DeviceInterfaceTable_config" title="Configure Table">
-        <i class="mdi mdi-cog"></i> Configure Table
-      </button>
-      {% endif %}
-      <button class="btn btn-sm btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown"
-        aria-expanded="false">
-        <i class="mdi mdi-eye"></i>
-      </button>
-      <ul class="dropdown-menu">
-        <button type="button" class="dropdown-item toggle-enabled" data-state="show">Hide Enabled</button>
-        <button type="button" class="dropdown-item toggle-disabled" data-state="show">Hide Disabled</button>
-      </ul>
-    </div>
-  </div>
-</div>
+  {% include 'dcim/device/inc/interface_table_controls.html' with table_modal="DeviceInterfaceTable_config" %}
 
 <form method="post">
   {% csrf_token %}

netbox/templates/inc/table_controls_htmx.html

@@ -1,22 +1,22 @@
 {% load helpers %}
 
-<div class="row mb-3 justify-content-between">
-  <div class="table-controls noprint col col-12 col-md-8 col-lg-4">
-    <div class="input-group input-group-sm quicksearch hide-last-child">
+<div class="row mb-3">
+  <div class="col-auto table-controls noprint">
+    <div class="input-group input-group-sm me-2 quicksearch hide-last-child">
       <input type="search" results=5 name="q" id="quicksearch" class="form-control" placeholder="Quick search"
         hx-get="{{ request.full_path }}" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, search" />
-      <button class="btn bg-transparent" type="button" id="quicksearch_clear"><i
-          class="mdi mdi-close-circle"></i></button>
+      <button class="btn bg-transparent" type="button" id="quicksearch_clear"><i class="mdi mdi-close-circle"></i></button>
     </div>
+    {% block extra_table_controls %}{% endblock %}
   </div>
-  <div class="table-controls noprint col col-md-3 mb-0">
+  <div class="col-auto ms-auto table-controls noprint">
     {% if request.user.is_authenticated and table_modal %}
-    <div class="table-configure input-group input-group-sm">
-      <button type="button" data-bs-toggle="modal" title="Configure Table" data-bs-target="#{{ table_modal }}"
-        class="btn btn-sm btn-outline-dark">
-        <i class="mdi mdi-cog"></i> Configure Table
-      </button>
-    </div>
+      <div class="table-configure input-group input-group-sm">
+        <button type="button" data-bs-toggle="modal" title="Configure Table" data-bs-target="#{{ table_modal }}"
+          class="btn btn-sm btn-outline-dark">
+          <i class="mdi mdi-cog"></i> Configure Table
+        </button>
+      </div>
     {% endif %}
   </div>
-</div>
+</div>