15148 add copy button to config context (#15954)

* 15148 add copy button to config context

* Merge configcontext_format.html into configcontext_data.html

---------

Co-authored-by: Jeremy Stretch <[email protected]>

Author: arthanson

netbox/templates/extras/configcontext.html

@@ -77,15 +77,9 @@ <h5 class="card-header">{% trans "Assignment" %}</h5>
       </div>
     </div>
     <div class="col col-md-7">
+      {% include 'inc/sync_warning.html' %}
       <div class="card">
-        <h5 class="card-header d-flex justify-content-between">
-          {% trans "Data" %}
-          {% include 'extras/inc/configcontext_format.html' %}
-        </h5>
-        <div class="card-body">
-          {% include 'inc/sync_warning.html' %}
-          {% include 'extras/inc/configcontext_data.html' with data=object.data format=format %}
-        </div>
+        {% include 'extras/inc/configcontext_data.html' with title="Data" data=object.data format=format copyid="data" %}
       </div>
     </div>
   </div>

netbox/templates/extras/inc/configcontext_data.html

@@ -1,5 +1,17 @@
 {% load helpers %}
+{% load i18n %}
 
-<div class="rendered-context-data mt-1">
-    <pre class="block">{% if format == 'json' %}{{ data|json }}{% elif format == 'yaml' %}{{ data|yaml }}{% else %}{{ data }}{% endif %}</pre>
+{% if title %}
+  <h5 class="card-header d-flex justify-content-between">
+    {% trans title %}
+    <div>
+      {% if copyid %}{% copy_content copyid %}{% endif %}
+      {% include 'extras/inc/format_toggle.html' %}
+    </div>
+  </h5>
+{% endif %}
+<div class="card-body">
+  <div class="rendered-context-data mt-1">
+    <pre class="block" {% if copyid %}id="{{ copyid }}{% endif %}">{% if format == 'json' %}{{ data|json }}{% elif format == 'yaml' %}{{ data|yaml }}{% else %}{{ data }}{% endif %}</pre>
+  </div>
 </div>

netbox/templates/extras/inc/configcontext_format.html

@@ -0,0 +1,4 @@
+<div class="btn-group btn-group-sm" role="group">
+  <a href="?format=json" type="button" class="btn btn-outline-dark{% if format == 'json' %} active{% endif %}">JSON</a>
+  <a href="?format=yaml" type="button" class="btn btn-outline-dark{% if format == 'yaml' %} active{% endif %}">YAML</a>
+</div>

netbox/templates/extras/inc/format_toggle.html

@@ -6,28 +6,13 @@
 {% block content %}
     <div class="row">
         <div class="col col-md-6">
-            <div class="card">
-                <h5 class="card-header d-flex justify-content-between">
-                    {% trans "Rendered Context" %}
-                    {% include 'extras/inc/configcontext_format.html' %}
-                </h5>
-                <div class="card-body">
-                    {% include 'extras/inc/configcontext_data.html' with data=rendered_context format=format %}
-                </div>
-            </div>
+          <div class="card">
+            {% include 'extras/inc/configcontext_data.html' with title="Rendered Context" data=rendered_context format=format copyid="rendered_context" %}
+          </div>
         </div>
         <div class="col col-md-6">
             <div class="card">
-                <h5 class="card-header">
-                    {% trans "Local Context" %}
-                </h5>
-                <div class="card-body">
-                    {% if object.local_context_data %}
-                        {% include 'extras/inc/configcontext_data.html' with data=object.local_context_data format=format %}
-                    {% else %}
-                        <span class="text-muted">{% trans "None" %}</span>
-                    {% endif %}
-                </div>
+                {% include 'extras/inc/configcontext_data.html' with title="Local Context" data=object.local_context_data format=format copyid="local_context" %}
                 <div class="card-footer">
                     <span class="help-block">
                         <i class="mdi mdi-information-outline"></i>
@@ -36,8 +21,11 @@ <h5 class="card-header">
                 </div>
             </div>
             <div class="card">
-                <h5 class="card-header">
-                    {% trans "Source Contexts" %}
+                <h5 class="card-header d-flex justify-content-between">
+                  {% trans "Source Contexts" %}
+                  <div>
+                    {% include 'extras/inc/format_toggle.html' %}
+                  </div>
                 </h5>
                 {% for context in source_contexts %}
                     <div class="card-body">