Add 'Add link' modal

For each TestExecution in TestRun page. Use LinkReference form for validation.
kiwitcms · Aug 11, 2020 · ae0faf6 · ae0faf6
1 parent 5582ec6
commit ae0faf6
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 4 deletions.
diff --git a/tcms/testruns/static/testruns/js/get.js b/tcms/testruns/static/testruns/js/get.js
@@ -131,12 +131,17 @@ function renderAdditionalInformation(testExecutions, testExecutionCaseIds) {
             isAutomatedElement.addClass(isAutomatedIcon)
             isAutomatedElement.attr('title', isAutomatedAttr)
 
-            jsonRPC('TestExecution.get_links', { 'execution_id': testExecution.id, 'is_defect': true }, bugs => {
-                listGroupItem.find('.test-execution-bugs-count').html(bugs.length)
+            jsonRPC('TestExecution.get_links', { 'execution_id': testExecution.id }, links => {
+                const bugCount = links.filter(link => link.is_defect).length;
+                listGroupItem.find('.test-execution-bugs-count').html(bugCount)
+
+                listGroupItem.find('.add-link-button').on('click', () => addLinkToExecution(testExecution))
+
+                const ul = listGroupItem.find('.test-execution-hyperlinks')
+                links.forEach(link => ul.append(renderLink(link)))
             })
         })
     })
-
 }
 
 function renderTestExecutionRow(template, testExecution, testExecutionStatus) {
@@ -210,3 +215,47 @@ function fileBugFromExecution(run_id, title_container, container, case_id, execu
 
     dialog.show();
 }
+
+function addLinkToExecution(testExecution) {
+
+    // remove all previous event handlers
+    $('.add-hyperlink-form').off('submit')
+
+    // this handler must be here, because if we bind it when the page is loaded.
+    // we have no way of knowing for what execution ID the form is submitted for.
+    $('.add-hyperlink-form').submit(() => {
+        const url = $('.add-hyperlink-form #id_url').val()
+        const name = $('.add-hyperlink-form #id_name').val()
+        const isDefect = $('.add-hyperlink-form #defectCheckbox').is(':checked')
+        const updateTracker = $('.add-hyperlink-form #autoUpdateCheckbox').is(':checked')
+
+        jsonRPC('TestExecution.add_link', [{
+            execution_id: testExecution.id,
+            url: url,
+            name: name,
+            is_defect: isDefect,
+        }, updateTracker], link => {
+            const ul = $(`.test-execution-${testExecution.id} .test-execution-hyperlinks`)
+            ul.append(renderLink(link))
+
+            // clean the values
+            $('.add-hyperlink-form #id_url').val('')
+            $('.add-hyperlink-form #id_name').val('')
+            $('.add-hyperlink-form #defectCheckbox').bootstrapSwitch('state', false)
+            $('.add-hyperlink-form #autoUpdateCheckbox').bootstrapSwitch('state', false)
+
+            // close the modal
+            $('#add-link-modal button.close').click()
+        })
+
+        return false;
+    })
+
+
+    return true; // so that the modal is opened
+}
+
+function renderLink(link) {
+    const icon = link.is_defect ? `<span class="fa fa-bug"></span>` : ''
+    return `<li>${icon} <a href="${link.url}">${link.name || link.url}</a></li>`
+}
diff --git a/tcms/testruns/templates/testruns/get.html b/tcms/testruns/templates/testruns/get.html
@@ -240,8 +240,10 @@ <h5><span class="test-executions-count"></span> Results</h5>
                                                 <p class="test-execution-notes">
                                                     <strong>{% trans 'Notes' %}:</strong>
                                                 </p>
+                                                <strong>{% trans "Bugs and hyperlinks" %}: </strong>
+                                                [<a href="#" class="add-link-button" data-toggle="modal" data-target="#add-link-modal"> Add </a>]
                                                 <div>
-                                                    {% comment %} TODO: bugs come here {% endcomment %}
+                                                    <ul class="test-execution-hyperlinks"></ul>
                                                 </div>
                                             </div>
                                         </div>
@@ -262,6 +264,47 @@ <h5><span class="test-executions-count"></span> Results</h5>
     </div> <!-- /row -->
 </div>
 
+<div class="modal fade" id="add-link-modal" tabindex="-1" role="dialog" aria-labelledby="add-hyperlink-modal-title" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" aria-label="Close">
+          <span class="pficon pficon-close"></span>
+        </button>
+        <h4 class="modal-title" id="add-hyperlink-modal-title">Add hyperlink</h4>
+      </div>
+      <form class="form-horizontal add-hyperlink-form">
+        <div class="modal-body">
+          <div class="form-group">
+            <label class="col-sm-3 control-label" for="{{ link_form.url.id_for_label }}">URL</label>
+            <div class="col-sm-9">
+                <input type="url" name="{{ link_form.url.name }}" maxlength="{{ link_form.url.field.max_length }}" {% if link_form.url.field.required %}required{% endif %} id="{{ link_form.url.id_for_label }}" class="form-control">
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="col-sm-3 control-label" for="{{ link_form.name.id_for_label }}">Name</label>
+            <div class="col-sm-9">
+                <input type="text" name="{{ link_form.name.name }}" maxlength="{{ link_form.name.field.max_length }}" {% if link_form.name.field.required %}required{% endif %} id="{{ link_form.name.id_for_label }}" class="form-control">
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="col-sm-3 control-label" for="defectCheckbox">Is a defect</label>
+            <input class="col-sm-9 bootstrap-switch" type="checkbox" id="defectCheckbox"/>
+          </div>
+          <div class="form-group">
+            <label class="col-sm-3 control-label" for="autoUpdateCheckbox">Auto-update issue tracker</label>
+            <input class="col-sm-9 bootstrap-switch" type="checkbox" id="autoUpdateCheckbox"/>
+          </div>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            <button type="submit" class="btn btn-primary add-hyperlink-button">Save</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
 <script src="{% static 'typeahead.js/dist/typeahead.jquery.min.js' %}"></script>
 <script src="{% static 'bootstrap-switch/dist/js/bootstrap-switch.min.js' %}"></script>
 <script src="{% static 'moment/min/moment.min.js' %}"></script>

diff --git a/tcms/testruns/views.py b/tcms/testruns/views.py
@@ -21,6 +21,7 @@
 from tcms.testplans.models import TestPlan
 from tcms.testruns.forms import BaseRunForm, NewRunForm, SearchRunForm
 from tcms.testruns.models import TestExecutionStatus, TestRun
+from tcms.core.contrib.linkreference.forms import LinkReferenceForm
 
 User = get_user_model()  # pylint: disable=invalid-name
 
@@ -132,6 +133,7 @@ class GetTestRunView(DetailView):  # pylint: disable=missing-permission-required
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context['execution_statuses'] = TestExecutionStatus.objects.order_by('-weight', 'name')
+        context['link_form'] = LinkReferenceForm()
         return context
 
     def render_to_response(self, context, **response_kwargs):