editing comment visibility works on the frontend, still need to figure out backend and tests

hypha/apply/activity/templates/activity/include/listing_base.html

@@ -36,7 +36,10 @@
             {% endif %}
 
             {% if editable %}
-                <div class="feed__comment js-comment" data-id="{{activity.id}}" data-comment="{{activity|display_for:request.user|to_markdown}}" data-edit-url="{% url 'api:v1:comments:edit' pk=activity.pk %}">
+                <div class="feed__comment js-comment" data-id="{{activity.id}}" data-comment="{{activity|display_for:request.user|to_markdown}}" 
+                data-visibility-options="{{activity|visibility_options:activity.user}}"
+                data-visibility="{{activity.visibility}}"
+                data-edit-url="{% url 'api:v1:comments:edit' pk=activity.pk %}">
                     {{ activity|display_for:request.user|submission_links|markdown|bleach }}
                 </div>
 

hypha/apply/activity/templatetags/activity_tags.py

@@ -49,3 +49,14 @@ def display_for(activity, user):
         return message_data[TEAM]
 
     return message_data[ALL]
+
+@register.filter
+def visibility_options(activity, user):
+    if user.is_apply_staff:
+            return 'applicant, team, reviewers, partners, all'
+    if user.is_reviewer:
+            return 'reviewers, all'
+    if user.is_partner:
+            return 'partners, all'
+
+    return 'applicant, all'

hypha/static_src/src/javascript/apply/edit-comment.js

@@ -22,6 +22,8 @@
         const editBlockWrapper = $(this).closest(feedContent).find(editBlock);
         const commentWrapper = $(this).closest(feedContent).find(comment);
         const commentContents = $(commentWrapper).attr('data-comment');
+        const visibilityOptions = $(commentWrapper).attr('data-visibility-options').split(', ');
+        const commentVisibility = $(commentWrapper).attr('data-visibility');
 
         // hide the edit link and original comment
         $(this).parent().hide();
@@ -32,6 +34,20 @@
                 <div id="wmd-button-bar-edit-comment" class="wmd-button-bar"></div>
                 <textarea id="wmd-input-edit-comment" class="wmd-input" rows="10">${commentContents}</textarea>
                 <div id="wmd-preview-edit-comment" class="wmd-preview"></div>
+                <br>
+                <div>Visible to:</div>
+        `;
+
+        let radioButtonsDiv = '<div id="edit-comment-visibility"></div>';
+        let radioButtons = '';
+
+        $.each(visibilityOptions, function (idx, value) {
+            radioButtons += `
+            <input type="radio" name='radio-visibility' value=${value} id='visible-to-${value}' />
+            <label for="visible-to-${value}">${value}</label><br>`;
+        });
+
+        const buttons = `
                 <div class="wrapper--outer-space-medium">
                     <button class="button button--primary js-submit-edit" type="submit">Update</button>
                     <button class="button button--white js-cancel-edit">Cancel</button>
@@ -40,7 +56,11 @@
         `;
 
         // add the comment to the editor
-        $(editBlockWrapper).append(markup);
+        const markupEditor = $(markup).append(radioButtonsDiv).append(buttons);
+
+        $(editBlockWrapper).append(markupEditor);
+        $('#edit-comment-visibility').html(radioButtons);
+        $(`#visible-to-${commentVisibility}`).prop('checked', true);
 
         // run the editor
         initEditor();
@@ -60,6 +80,7 @@
     $(document).on('click', submitEditButton, function () {
         const commentContainer = $(this).closest(editBlock).siblings(comment);
         const editedComment = $(this).closest(pageDown).find('.wmd-preview').html();
+        const editedVisibility = $('input[name="radio-visibility"]:checked').val();
         const commentMD = $(this).closest(editBlock).find('textarea').val();
         const editUrl = $(commentContainer).attr('data-edit-url');