From 8d069083535e478de95b0c895f9ac2d24121b04b Mon Sep 17 00:00:00 2001
From: jeremystretch <jstretch@ns1.com>
Date: Wed, 15 Dec 2021 16:57:30 -0500
Subject: [PATCH] Bulk component add view should use tabs

---
 netbox/netbox/views/generic.py                |  2 +-
 .../generic/object_bulk_add_component.html    | 98 ++++++++++++-------
 .../templates/generic/object_bulk_edit.html   | 21 ++--
 3 files changed, 79 insertions(+), 42 deletions(-)

diff --git a/netbox/netbox/views/generic.py b/netbox/netbox/views/generic.py
index 2c63ee978..7b0d3e472 100644
--- a/netbox/netbox/views/generic.py
+++ b/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)
diff --git a/netbox/templates/generic/object_bulk_add_component.html b/netbox/templates/generic/object_bulk_add_component.html
index 191b62211..df5545ca5 100644
--- a/netbox/templates/generic/object_bulk_add_component.html
+++ b/netbox/templates/generic/object_bulk_add_component.html
@@ -1,41 +1,73 @@
 {% extends 'base/layout.html' %}
+{% load helpers %}
 {% load form_helpers %}
 {% load render_table from django_tables2 %}
 
 {% block title %}Add {{ model_name|title }}{% endblock %}
 
-{% block content %}
-<p>{{ table.rows|length }} {{ parent_model_name }} selected</p>
-<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 }}" />
-    {% endif %}
-    {% for field in form.hidden_fields %}
-        {{ field }}
-    {% endfor %}
-    <div class="row">
-        <div class="col col-md-7">
-            <div class="table-responsive">
-              {% render_table table 'inc/table.html' %}
+{% 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 %}
+
+      {# 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 }}" />
+          {% endif %}
+          {% for field in form.hidden_fields %}
+            {{ field }}
+          {% endfor %}
+
+          <div class="row">
+            <div class="col col-md-12 col-lg-10 offset-lg-1">
+              <div class="card">
+                  <h5 class="card-header">{{ model_name|title }} to Add</h5>
+                  <div class="card-body">
+                      {% for field in form.visible_fields %}
+                          {% render_field field %}
+                      {% endfor %}
+                  </div>
+              </div>
+              <div class="form-group text-end">
+                  <div class="col col-md-12">
+                      <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
+                      <button type="submit" name="_create" class="btn btn-primary">Create</button>
+                  </div>
+              </div>
             </div>
+          </div>
+
+        </form>
+      </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 class="col col-md-5">
-            <div class="card">
-                <h5 class="card-header">{{ model_name|title }} to Add</h5>
-                <div class="card-body">
-                    {% for field in form.visible_fields %}
-                        {% render_field field %}
-                    {% endfor %}
-                </div>
-            </div>
-		    <div class="form-group text-end">
-                <div class="col col-md-12">
-                    <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
-                    <button type="submit" name="_create" class="btn btn-primary">Create</button>
-                </div>
-		    </div>
-        </div>
-    </div>
-</form>
-{% endblock content %}
+      </div>
+
+    {% endblock %}
+  </div>
+{% endblock %}
diff --git a/netbox/templates/generic/object_bulk_edit.html b/netbox/templates/generic/object_bulk_edit.html
index cf5897184..31bc07ac4 100644
--- a/netbox/templates/generic/object_bulk_edit.html
+++ b/netbox/templates/generic/object_bulk_edit.html
@@ -39,14 +39,17 @@
 
           <div class="row">
             <div class="col col-md-12 col-lg-10 offset-lg-1">
-              {% for field in form.visible_fields %}
-                  {% if field.name in form.nullable_fields %}
+              <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 %}
-                  {% else %}
+                    {% else %}
                       {% render_field field %}
-                  {% endif %}
-              {% endfor %}
-
+                    {% endif %}
+                  {% endfor %}
+                </div>
+              </div>
 
               <div class="text-end">
                 <a href="{{ return_url }}" class="btn btn-sm btn-outline-danger">Cancel</a>
@@ -60,8 +63,10 @@
 
       {# Selected objects list #}
       <div class="tab-pane" id="object-list" role="tabpanel" aria-labelledby="object-list-tab">
-        <div class="table-responsive">
-          {% render_table table 'inc/table.html' %}
+        <div class="card">
+          <div class="card-body table-responsive">
+            {% render_table table 'inc/table.html' %}
+          </div>
         </div>
       </div>