Add markdown support for notes field in TestCase and TestRun

tcms/core/widgets.py

@@ -36,6 +36,14 @@ class Media:
         css = {"all": ["simplemde/dist/simplemde.min.css"]}
 
 
+class SimpleMDENotes(SimpleMDE):
+    """
+    SimpleMDE widget for notes field with unique file upload ID
+    """
+
+    file_upload_id = "simplemde-notes-file-upload"
+
+
 class DurationWidget(forms.Widget):
     template_name = "widgets/duration.html"
 

tcms/static/js/index.js

@@ -80,12 +80,18 @@ $(() => {
         $('[data-toggle="tooltip"]').tooltip()
     }
 
+    window.markdownEditors = {}
+
     $('.js-simplemde-textarea').each(function () {
         const fileUploadId = $(this).data('file-upload-id')
         const uploadField = $(`#${fileUploadId}`)
 
-        // this value is only used in testcases/js/mutable.js
-        window.markdownEditor = initSimpleMDE(this, uploadField)
+        // Use textarea id/name for unique autosave ID to prevent content sharing
+        const textareaId = $(this).attr('id') || $(this).attr('name') || 'default'
+        const autoSaveId = window.location.toString() + '#' + textareaId
+
+        const editor = initSimpleMDE(this, uploadField, autoSaveId)
+        window.markdownEditors[textareaId] = editor
     })
 
     $('#logout_link').click(function () {

tcms/static/js/simplemde_security_override.js

@@ -24,6 +24,9 @@ export function initSimpleMDE (textArea, fileUploadElement, autoSaveId = window.
         return null
     }
 
+    // Capture the server-rendered value before SimpleMDE replaces it
+    const serverValue = textArea.value
+
     const simpleMDE = new SimpleMDE({
         element: textArea,
         autoDownloadFontAwesome: false,
@@ -72,6 +75,11 @@ export function initSimpleMDE (textArea, fileUploadElement, autoSaveId = window.
         }
     })
 
+    // Remove legacy shared autosave key (before per-textarea unique IDs)
+    // to prevent cross-field content leaking
+    const legacyKey = 'smde_' + window.location.toString()
+    try { localStorage.removeItem(legacyKey) } catch (e) { /* ignore */ }
+
     fileUploadElement.change(function () {
         const attachment = this.files[0]
         const reader = new FileReader()

tcms/testcases/forms.py

@@ -3,7 +3,7 @@
 from django.forms import inlineformset_factory
 
 from tcms.core.forms.fields import UserField
-from tcms.core.widgets import DurationWidget, SimpleMDE
+from tcms.core.widgets import DurationWidget, SimpleMDE, SimpleMDENotes
 from tcms.management.models import Component, Priority, Product
 from tcms.testcases.fields import MultipleEmailField
 from tcms.testcases.models import (
@@ -42,6 +42,10 @@ class Meta:
         widget=DurationWidget(),
         required=False,
     )
+    notes = forms.CharField(
+        widget=SimpleMDENotes(),
+        required=False,
+    )
     text = forms.CharField(
         widget=SimpleMDE(),
         required=False,

tcms/testcases/static/testcases/js/mutable.js

@@ -2,7 +2,10 @@ import { updateCategorySelectFromProduct } from '../../../../static/js/utils'
 
 export function pageTestcasesMutableReadyHandler () {
     $('#id_template').change(function () {
-        window.markdownEditor.codemirror.setValue($(this).val())
+        const editor = window.markdownEditors && window.markdownEditors['id_text']
+        if (editor) {
+            editor.codemirror.setValue($(this).val())
+        }
     })
 
     $('#add_id_template').click(function () {

tcms/testcases/templates/testcases/get.html

@@ -8,19 +8,54 @@
 {% block page_id %}page-testcases-get{% endblock %}
 {% block body_class %}cards-pf{% endblock %}
 
+
 {% block contents %}
 <div class="container-cards-pf">
     <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
     <h1 class="col-md-12 kiwi-margin-top-0">
         <span id="test_case_pk"
             data-pk="{{ object.pk }}"
+            data-from-plan="{{ request.GET.from_plan|default:'' }}"
             data-perm-remove-tag="{{ perms.testcases.delete_testcasetag }}"
             data-perm-remove-component="{{ perms.testcases.delete_testcasecomponent }}"
             data-perm-remove-plan="{{ perms.testcases.delete_testcaseplan }}"
             data-perm-remove-bug="{{ perms.testcases.delete_bug }}"
         >TC-{{ object.pk }}:</span> {{ object.summary }}
     </h1>
 
+    <div id="tc-navigation-bar" class="col-md-12" style="display:none;">
+        <div class="pull-left">
+            <button id="btn-prev-case" class="btn btn-default btn-sm" disabled>
+                <span class="fa fa-arrow-left"></span> {% trans 'Previous' %}
+            </button>
+            <span id="tc-position" class="text-muted"></span>
+            <button id="btn-next-case" class="btn btn-default btn-sm" disabled>
+                {% trans 'Next' %} <span class="fa fa-arrow-right"></span>
+            </button>
+        </div>
+        <div class="pull-right">
+            <button id="btn-toggle-sidebar" class="btn btn-default btn-sm">
+                <span class="fa fa-list"></span> {% trans 'Case List' %}
+            </button>
+        </div>
+        <div class="clearfix"></div>
+    </div>
+
+    <div id="tc-sidebar-panel" class="col-md-3 pull-right" style="display:none;">
+        <div class="card-pf card-pf-accented">
+            <h2 class="card-pf-title">
+                <span class="fa fa-sitemap"></span>
+                <a id="sidebar-plan-link" href="#"></a>
+                <button class="btn btn-link btn-sm pull-right" id="btn-close-sidebar">
+                    <span class="fa fa-times"></span>
+                </button>
+            </h2>
+            <div class="card-pf-body" id="tc-sidebar-body" style="max-height:70vh; overflow-y:auto;">
+                <div class="spinner spinner-lg"></div>
+            </div>
+        </div>
+    </div>
+
     <div class="row row-cards-pf">
         <div class="col-xs-12 col-sm-12 col-md-3">
             <div class="card-pf card-pf-accented card-pf-aggregate-status">
@@ -129,10 +164,10 @@ <h2 class="card-pf-title kiwi-text-align-left">
                         {{ object.text|markdown2html }}
                     </div>
 
-                    <p>
-                        <strong>{% trans 'Notes' %}:</strong>
-                        {{ object.notes }}
-                    </p>
+                    <div class="markdown-text">
+                        {{ object.notes|markdown2html }}
+                    </div>
+
                 </div>
             </div>
         </div>

tcms/testcases/templates/testcases/mutable.html

@@ -19,6 +19,9 @@
     <div class="container-fluid container-cards-pf">
         <form class="form-horizontal" action="{% if object %}{% url 'testcases-edit' object.pk %}{% else %}{% url 'testcases-new' %}{% endif %}" method="post">
             {% csrf_token %}
+            {% if request.GET.from_plan %}
+            <input type="hidden" name="from_plan" value="{{ request.GET.from_plan }}">
+            {% endif %}
             <input type="hidden" name="author" value="{{ form.author.value }}">
             <div class="form-group">
                 <label class="col-md-1 col-lg-1" for="id_summary">{% trans "Summary" %}</label>
@@ -169,7 +172,7 @@
             <div class="form-group">
                 <label for="id_notes" class="col-md-1 col-lg-1">{% trans "Notes" %}</label>
                 <div class="col-md-12 col-lg-12 {% if form.notes.errors %}has-error{% endif %}">
-                    <textarea id="id_notes" rows="4" name="notes" class="form-control">{{ form.notes.value|default:'' }}</textarea>
+                    {{ form.notes }}
                     {{ form.notes.errors }}
                 </div>
             </div>
@@ -260,7 +263,7 @@
 
             <div class="form-group">
                 <div class="col-md-12 col-lg-12">
-                    <a href="{% if object %}{% url 'testcases-get' object.pk %}{% else %}{% url 'core-views-index' %}{% endif %}"
+                    <a href="{% if object %}{% url 'testcases-get' object.pk %}{% if request.GET.from_plan %}?from_plan={{ request.GET.from_plan }}{% endif %}{% else %}{% url 'core-views-index' %}{% endif %}"
                         class="btn btn-danger btn-lg">{% trans "Cancel" %}</a>
                     <button type="submit" class="btn btn-primary btn-lg">{% trans "Save" %}</button>
                 </div>

tcms/testplans/static/testplans/js/get.js

@@ -141,7 +141,7 @@ function drawTestCases (testCases, testPlanId, permissions) {
 
     if (testCases.length > 0) {
         testCases.forEach(function (element) {
-            container.append(getTestCaseRowContent(testCaseRowDocumentFragment.cloneNode(true), element, permissions))
+            container.append(getTestCaseRowContent(testCaseRowDocumentFragment.cloneNode(true), element, permissions, testPlanId))
         })
         attachEvents(testPlanId, permissions)
     } else {
@@ -153,7 +153,7 @@ function drawTestCases (testCases, testPlanId, permissions) {
 
 function redrawSingleRow (testCaseId, testPlanId, permissions) {
     const testCaseRowDocumentFragment = $('#test_case_row')[0].content
-    const newRow = getTestCaseRowContent(testCaseRowDocumentFragment.cloneNode(true), allTestCases[testCaseId], permissions)
+    const newRow = getTestCaseRowContent(testCaseRowDocumentFragment.cloneNode(true), allTestCases[testCaseId], permissions, testPlanId)
 
     // remove from expanded list b/c the comment section may have changed
     expandedTestCaseIds.splice(expandedTestCaseIds.indexOf(testCaseId), 1)
@@ -224,7 +224,7 @@ function getTestCaseRowContent (rowContent, testCase, permissions) {
 function getTestCaseExpandArea (row, testCase, permissions) {
     markdown2HTML(testCase.text, row.find('.js-test-case-expand-text'))
     if (testCase.notes.trim().length > 0) {
-        row.find('.js-test-case-expand-notes').html(testCase.notes)
+        markdown2HTML(testCase.notes, row.find('.js-test-case-expand-notes'))
     }
 
     // draw the attachments

tcms/testruns/forms.py

@@ -4,6 +4,7 @@
 from django.utils.translation import gettext_lazy as _
 
 from tcms.core.forms.fields import UserField
+from tcms.core.widgets import SimpleMDENotes
 from tcms.management.models import Build, Product, Version
 from tcms.rpc.api.forms import DateTimeField
 from tcms.testcases.models import TestCase
@@ -23,6 +24,10 @@ class Meta:
     stop_date = DateTimeField(required=False)
     planned_start = DateTimeField(required=False)
     planned_stop = DateTimeField(required=False)
+    notes = forms.CharField(
+        widget=SimpleMDENotes(),
+        required=False,
+    )
 
     case = forms.ModelMultipleChoiceField(
         queryset=TestCase.objects.none(),

tcms/testruns/static/testruns/js/get.js

@@ -475,7 +475,7 @@ function getExpandArea (testExecution) {
         }], (data) => {
             data.forEach((entry) => {
                 markdown2HTML(entry.text, container.find('.test-execution-text')[0])
-                container.find('.test-execution-notes').append(entry.notes)
+                markdown2HTML(entry.notes, container.find('.test-execution-notes'))
             })
         })
 

tcms/testruns/templates/testruns/mutable.html

@@ -2,6 +2,10 @@
 {% load i18n %}
 {% load static %}
 
+{% block head %}
+    {{ form.media}}
+{% endblock %}
+
 {% block title %}
     {% if object %}
         {% trans "Edit TestRun" %}
@@ -201,7 +205,8 @@
         <div class="form-group">
             <label class="col-lg-12" for="id_notes">{% trans "Notes" %}</label>
             <div class="col-lg-12">
-                <textarea class="form-control" id="id_notes" name="notes">{{ form.notes.value }}</textarea>
+                {{ form.notes }}
+                {{ form.notes.errors }}
             </div>
         </div>