Bulk component add view should use tabs

netbox/netbox/views/generic.py

@@ -1305,7 +1305,7 @@ class BulkComponentCreateView(GetReturnURLMixin, ObjectPermissionRequiredMixin,
         if not selected_objects:
             messages.warning(request, "No {} were selected.".format(self.parent_model._meta.verbose_name_plural))
             return redirect(self.get_return_url(request))
-        table = self.table(selected_objects)
+        table = self.table(selected_objects, orderable=False)
 
         if '_create' in request.POST:
             form = self.form(request.POST)

netbox/templates/generic/object_bulk_add_component.html

@@ -1,12 +1,34 @@
 {% extends 'base/layout.html' %}
+{% load helpers %}
 {% load form_helpers %}
 {% load render_table from django_tables2 %}
 
 {% block title %}Add {{ model_name|title }}{% endblock %}
 
+{% block tabs %}
+  <ul class="nav nav-tabs px-3">
+    <li class="nav-item" role="presentation">
+      <button class="nav-link active" id="component-form-tab" data-bs-toggle="tab" data-bs-target="#component-form" type="button" role="tab" aria-controls="component-form" aria-selected="true">
+        Bulk Creation
+      </button>
+    </li>
+    <li class="nav-item" role="presentation">
+      <button class="nav-link" id="object-list-tab" data-bs-toggle="tab" data-bs-target="#object-list" type="button" role="tab" aria-controls="object-list" aria-selected="false">
+        Selected Objects
+        {% badge table.rows|length %}
+      </button>
+    </li>
+  </ul>
+{% endblock %}
+
+{% block content-wrapper %}
+  <div class="tab-content">
     {% block content %}
-<p>{{ table.rows|length }} {{ parent_model_name }} selected</p>
+
-<form action="." method="post" class="form form-horizontal">
+      {# Component creation form #}
+      <div class="tab-pane show active" id="component-form" role="tabpanel" aria-labelledby="component-form-tab">
+        <form action="" method="post" class="form form-horizontal">
+
           {% csrf_token %}
           {% if request.POST.return_url %}
             <input type="hidden" name="return_url" value="{{ request.POST.return_url }}" />
@@ -14,13 +36,9 @@
           {% for field in form.hidden_fields %}
             {{ field }}
           {% endfor %}
+
           <div class="row">
-        <div class="col col-md-7">
+            <div class="col col-md-12 col-lg-10 offset-lg-1">
-            <div class="table-responsive">
-              {% render_table table 'inc/table.html' %}
-            </div>
-        </div>
-        <div class="col col-md-5">
               <div class="card">
                   <h5 class="card-header">{{ model_name|title }} to Add</h5>
                   <div class="card-body">
@@ -37,5 +55,19 @@
               </div>
             </div>
           </div>
+
         </form>
-{% endblock content %}
+      </div>
+
+      {# Selected objects list #}
+      <div class="tab-pane" id="object-list" role="tabpanel" aria-labelledby="object-list-tab">
+        <div class="card">
+          <div class="card-body table-responsive">
+            {% render_table table 'inc/table.html' %}
+          </div>
+        </div>
+      </div>
+
+    {% endblock %}
+  </div>
+{% endblock %}

netbox/templates/generic/object_bulk_edit.html

@@ -39,6 +39,8 @@
 
           <div class="row">
             <div class="col col-md-12 col-lg-10 offset-lg-1">
+              <div class="card">
+                <div class="card-body">
                   {% for field in form.visible_fields %}
                     {% if field.name in form.nullable_fields %}
                       {% render_field field bulk_nullable=True %}
@@ -46,7 +48,8 @@
                       {% render_field field %}
                     {% endif %}
                   {% endfor %}
-
+                </div>
+              </div>
 
               <div class="text-end">
                 <a href="{{ return_url }}" class="btn btn-sm btn-outline-danger">Cancel</a>
@@ -60,10 +63,12 @@
 
       {# Selected objects list #}
       <div class="tab-pane" id="object-list" role="tabpanel" aria-labelledby="object-list-tab">
-        <div class="table-responsive">
+        <div class="card">
+          <div class="card-body table-responsive">
             {% render_table table 'inc/table.html' %}
           </div>
         </div>
+      </div>
 
     {% endblock %}
   </div>