Allow responding to annotations in a thread

app/assets/javascripts/components/annotations/annotation_form.ts

@@ -8,7 +8,7 @@ import "components/saved_annotations/saved_annotation_input";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { getCourseId } from "state/Courses";
 import { stateMixin } from "state/StateMixin";
-import { getQuestionMode } from "state/Annotations";
+import { isQuestionMode } from "state/Annotations";
 
 // Min and max of the annotation text is defined in the annotation model.
 const maxLength = 10_000;
@@ -68,12 +68,12 @@ export class AnnotationForm extends stateMixin(watchMixin(ShadowlessLitElement))
         return getCourseId();
     }
 
-    get questionMode(): boolean {
-        return getQuestionMode();
+    get isQuestionMode(): boolean {
+        return isQuestionMode();
     }
 
     get type(): string {
-        return this.questionMode ? "user_question" : "user_annotation";
+        return this.isQuestionMode ? "user_question" : "user_annotation";
     }
 
     get rows(): number {
@@ -154,7 +154,7 @@ export class AnnotationForm extends stateMixin(watchMixin(ShadowlessLitElement))
     render(): TemplateResult {
         return html`
             <form class="annotation-submission form">
-                ${this.questionMode || /* REMOVE AFTER CLOSED BETA */ !isBetaCourse(this.courseId) ? "" : html`
+                ${this.isQuestionMode || /* REMOVE AFTER CLOSED BETA */ !isBetaCourse(this.courseId) ? "" : html`
                         <d-saved-annotation-input
                             name="saved_annotation_id"
                             class="saved-annotation-input"
@@ -164,7 +164,7 @@ export class AnnotationForm extends stateMixin(watchMixin(ShadowlessLitElement))
                         ></d-saved-annotation-input>
                     `}
                 <div class="field form-group">
-                    ${this.questionMode || /* REMOVE AFTER CLOSED BETA */ !isBetaCourse(this.courseId) ? "" : html`
+                    ${this.isQuestionMode || /* REMOVE AFTER CLOSED BETA */ !isBetaCourse(this.courseId) ? "" : html`
                         <label class="form-label" for="annotation-text">
                             ${I18n.t("js.user_annotation.fields.annotation_text")}
                         </label>
@@ -183,15 +183,15 @@ export class AnnotationForm extends stateMixin(watchMixin(ShadowlessLitElement))
                     ></textarea>
                     <div class="clearfix annotation-help-block">
                         <span class='help-block'>${unsafeHTML(I18n.t("js.user_annotation.help"))}</span>
-                        ${this.questionMode ? html`
+                        ${this.isQuestionMode ? html`
                             <span class='help-block'>${unsafeHTML(I18n.t("js.user_annotation.help_student"))}</span>
                         ` : ""}
                         <span class="help-block float-end">
                             <span class="used-characters">${I18n.formatNumber(this._annotationText.length)}</span> / ${I18n.formatNumber(maxLength)}
                         </span>
                     </div>
                 </div>
-                ${this.questionMode || /* REMOVE AFTER CLOSED BETA */ !isBetaCourse(this.courseId) ? "" : html`
+                ${this.isQuestionMode || /* REMOVE AFTER CLOSED BETA */ !isBetaCourse(this.courseId) ? "" : html`
                     <div class="field form-group">
                         <div class="form-check">
                             <input class="form-check-input" type="checkbox" @click="${() => this.toggleSaveAnnotation()}" id="check-save-annotation">

app/assets/javascripts/components/annotations/annotation_options.ts

@@ -2,7 +2,7 @@ import { customElement, property } from "lit/decorators.js";
 import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
 import { html, TemplateResult } from "lit";
 import { stateMixin } from "state/StateMixin";
-import { getQuestionMode } from "state/Annotations";
+import { isQuestionMode } from "state/Annotations";
 import "components/annotations/annotations_toggles";
 import "components/annotations/hidden_annotations_dot";
 import { i18nMixin } from "components/meta/i18n_mixin";
@@ -22,16 +22,16 @@ export class AnnotationOptions extends i18nMixin(stateMixin(ShadowlessLitElement
 
     state = ["getQuestionMode", "hasPermission"];
 
-    get questionMode(): boolean {
-        return getQuestionMode();
+    get isQuestionMode(): boolean {
+        return isQuestionMode();
     }
 
     get canCreateAnnotation(): boolean {
         return hasPermission("annotation.create");
     }
 
     get addAnnotationTitle(): string {
-        return this.questionMode ?
+        return this.isQuestionMode ?
             I18n.t("js.annotations.options.add_global_question") :
             I18n.t("js.annotations.options.add_global_annotation");
     }

app/assets/javascripts/components/annotations/annotations_cell.ts

@@ -8,7 +8,7 @@ import {
     UserAnnotationFormData
 } from "state/UserAnnotations";
 import { getEvaluationId } from "state/Evaluations";
-import { getQuestionMode, isAnnotationVisible } from "state/Annotations";
+import { isQuestionMode, isAnnotationVisible } from "state/Annotations";
 import { getSubmissionId } from "state/Submissions";
 import { getMachineAnnotationsByLine, MachineAnnotationData } from "state/MachineAnnotations";
 import "components/annotations/machine_annotation";
@@ -49,8 +49,8 @@ export class AnnotationsCell extends stateMixin(ShadowlessLitElement) {
         return getUserAnnotationsByLine(this.row);
     }
 
-    get questionMode(): boolean {
-        return getQuestionMode();
+    get isQuestionMode(): boolean {
+        return isQuestionMode();
     }
 
 
@@ -63,7 +63,7 @@ export class AnnotationsCell extends stateMixin(ShadowlessLitElement) {
         };
 
         try {
-            const mode = getQuestionMode() ? "question" : "annotation";
+            const mode = isQuestionMode() ? "question" : "annotation";
             await createUserAnnotation(annotationData, getSubmissionId(), mode, e.detail.saveAnnotation, e.detail.savedAnnotationTitle);
             this.closeForm();
         } catch (err) {
@@ -89,7 +89,7 @@ export class AnnotationsCell extends stateMixin(ShadowlessLitElement) {
         return html`
             <div class="annotation-cell">
                 ${this.showForm ? html`
-                    <div class="annotation ${this.questionMode ? "question" : "user" }">
+                    <div class="annotation ${this.isQuestionMode ? "question" : "user" }">
                         <d-annotation-form @submit=${e => this.createAnnotation(e)}
                                            @cancel=${() => this.closeForm()}
                                            ${ref(this.annotationFormRef)}

app/assets/javascripts/components/annotations/code_listing_row.ts

@@ -5,7 +5,7 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import "components/annotations/hidden_annotations_dot";
 import "components/annotations/annotations_cell";
 import { i18nMixin } from "components/meta/i18n_mixin";
-import { getQuestionMode } from "state/Annotations";
+import { isQuestionMode } from "state/Annotations";
 import { stateMixin } from "state/StateMixin";
 import { initTooltips } from "util.js";
 import { PropertyValues } from "@lit/reactive-element";
@@ -38,16 +38,16 @@ export class CodeListingRow extends stateMixin(i18nMixin(ShadowlessLitElement))
         initTooltips(this);
     }
 
-    get questionMode(): boolean {
-        return getQuestionMode();
+    get isQuestionMode(): boolean {
+        return isQuestionMode();
     }
 
     get canCreateAnnotation(): boolean {
         return hasPermission("annotation.create");
     }
 
     get addAnnotationTitle(): string {
-        return this.questionMode ? I18n.t("js.annotations.options.add_question") : I18n.t("js.annotations.options.add_annotation");
+        return this.isQuestionMode ? I18n.t("js.annotations.options.add_question") : I18n.t("js.annotations.options.add_annotation");
     }
 
     render(): TemplateResult {

app/assets/javascripts/components/annotations/thread.ts

@@ -2,13 +2,13 @@ import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
 import { customElement, property } from "lit/decorators.js";
 import {
     createUserAnnotation, invalidateUserAnnotation,
-    transition,
+    transition, transitionAll,
     UserAnnotationData,
     UserAnnotationFormData
 } from "state/UserAnnotations";
 import { html, TemplateResult } from "lit";
 import { getEvaluationId } from "state/Evaluations";
-import { getQuestionMode } from "state/Annotations";
+import { isQuestionMode } from "state/Annotations";
 import { getSubmissionId } from "state/Submissions";
 import { AnnotationForm } from "components/annotations/annotation_form";
 import { createRef, Ref, ref } from "lit/directives/ref.js";
@@ -35,18 +35,17 @@ export class Thread extends i18nMixin(stateMixin(ShadowlessLitElement)) {
 
     state = ["getUserAnnotations", "getQuestionMode"];
 
-    get questionMode(): boolean {
-        return getQuestionMode();
+    get isQuestionMode(): boolean {
+        return isQuestionMode();
     }
 
-    get openQuestion(): UserAnnotationData | undefined {
-        return this.data.question_state !== undefined && this.data.question_state !== "answered" ?
-            this.data :
-            this.data.responses.find(response => response.question_state !== undefined && response.question_state !== "answered");
+    get openQuestions(): UserAnnotationData[] | undefined {
+        return [this.data, ...this.data.responses]
+            .filter(response => response.question_state !== undefined && response.question_state !== "answered");
     }
 
     get isUnanswered(): boolean {
-        return this.openQuestion != undefined;
+        return this.openQuestions.length > 0;
     }
 
     async createAnnotation(e: CustomEvent): Promise<void> {
@@ -59,7 +58,7 @@ export class Thread extends i18nMixin(stateMixin(ShadowlessLitElement)) {
         };
 
         try {
-            const mode = getQuestionMode() ? "question" : "annotation";
+            const mode = isQuestionMode() ? "question" : "annotation";
             await createUserAnnotation(annotationData, getSubmissionId(), mode, e.detail.saveAnnotation, e.detail.savedAnnotationTitle);
 
             invalidateUserAnnotation(this.data.id);
@@ -71,21 +70,15 @@ export class Thread extends i18nMixin(stateMixin(ShadowlessLitElement)) {
     }
 
     markAsResolved(): void {
-        if (this.openQuestion !== undefined) {
-            transition(this.openQuestion, "answered");
-        }
+        transitionAll(this.openQuestions, "answered");
     }
 
     markAsInProgress(): void {
-        if (this.openQuestion?.question_state !== "in_progress") {
-            transition(this.openQuestion, "in_progress");
-        }
+        transitionAll(this.openQuestions.filter(question => question.question_state !== "in_progress"), "in_progress");
     }
 
     markAsUnanswered(): void {
-        if (this.openQuestion?.question_state !== "unanswered") {
-            transition(this.openQuestion, "unanswered");
-        }
+        transitionAll(this.openQuestions.filter(question => question.question_state !== "unanswered"), "unanswered");
     }
 
     addReply(): void {
@@ -107,7 +100,7 @@ export class Thread extends i18nMixin(stateMixin(ShadowlessLitElement)) {
                     <d-user-annotation .data=${response}></d-user-annotation>
                 `)}
                 ${this.showForm ? html`
-                    <div class="annotation ${this.questionMode ? "question" : "user" }">
+                    <div class="annotation ${this.isQuestionMode ? "question" : "user" }">
                         <d-annotation-form @submit=${e => this.createAnnotation(e)}
                                            ${ref(this.annotationFormRef)}
                                            @cancel=${() => this.cancelReply()}

app/assets/javascripts/components/annotations/user_annotation.ts

@@ -2,12 +2,12 @@ import { html, PropertyValues, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
-import { deleteUserAnnotation, updateUserAnnotation, UserAnnotationData } from "state/UserAnnotations";
+import { deleteUserAnnotation, updateUserAnnotation, UserAnnotationData, transition } from "state/UserAnnotations";
 import { i18nMixin } from "components/meta/i18n_mixin";
 import { AnnotationForm } from "components/annotations/annotation_form";
 import { createRef, Ref, ref } from "lit/directives/ref.js";
 import "components/saved_annotations/new_saved_annotation";
-import { getQuestionMode } from "state/Annotations";
+import { isQuestionMode } from "state/Annotations";
 import { initTooltips } from "util.js";
 import "components/saved_annotations/saved_annotation_icon";
 
@@ -42,7 +42,7 @@ export class UserAnnotation extends i18nMixin(ShadowlessLitElement) {
     }
 
     get type(): string {
-        return getQuestionMode() ? "user_question" : "user_annotation";
+        return isQuestionMode() ? "user_question" : "user_annotation";
     }
 
     protected get header(): TemplateResult {
@@ -83,6 +83,13 @@ export class UserAnnotation extends i18nMixin(ShadowlessLitElement) {
                    data-bs-placement="top"
                 ></i>
             ` : ""}
+            ${ this.data.question_state == "answered" ? html`
+                <i class="mdi mdi-comment-check-outline mdi-18 annotation-meta-icon"
+                   title="${I18n.t("js.user_question.is_answered")}"
+                   data-bs-toggle="tooltip"
+                   data-bs-placement="top"
+                ></i>
+            ` : ""}
         `;
     }
 
@@ -114,36 +121,67 @@ export class UserAnnotation extends i18nMixin(ShadowlessLitElement) {
         initTooltips(this);
     }
 
+    reopenQuestion(): void {
+        transition(this.data, "unanswered");
+    }
+
+    get dropdownOptions(): TemplateResult[] {
+        const options = [];
+
+        if (this.data.permission.update) {
+            options.push(html`
+                <li>
+                    <a class="dropdown-item" @click="${() => this.editing = true}">
+                        <i class="mdi mdi-pencil mdi-18"></i> ${I18n.t(`js.${this.type}.edit`)}
+                    </a>
+                </li>
+            `);
+        }
+        if (this.data.permission.save) {
+            options.push(html`
+                <d-new-saved-annotation
+                    from-annotation-id="${this.data.id}"
+                    annotation-text="${this.data.annotation_text}"
+                    .savedAnnotationId="${this.data.saved_annotation_id}">
+                </d-new-saved-annotation>
+            `);
+        }
+        if (this.data.permission.destroy) {
+            options.push(html`
+                <li>
+                    <a class="dropdown-item" @click="${() => this.deleteAnnotation()}">
+                        <i class="mdi mdi-delete mdi-18"></i> ${I18n.t(`js.user_annotation.delete`)}
+                    </a>
+                </li>
+            `);
+        }
+        if (this.data.permission.transition?.unanswered) {
+            options.push(html`
+                <li>
+                    <a class="dropdown-item" @click="${() => this.reopenQuestion()}">
+                        <i class="mdi mdi-comment-question-outline mdi-18"></i> ${I18n.t("js.user_question.unresolve")}
+                    </a>
+                </li>
+            `);
+        }
+
+        return options;
+    }
+
     render(): TemplateResult {
         return html`
             <div class="annotation ${this.data.type == "annotation" ? "user" : "question"}">
                 <div class="annotation-header">
                     <span class="annotation-meta">
                         ${this.header}
                     </span>
-                    ${this.data.permission.update ? html`
+                    ${this.dropdownOptions.length > 0 ? html`
                         <div class="dropdown actions float-end" id="kebab-menu">
                             <a class="btn btn-icon btn-icon-inverted dropdown-toggle" data-bs-toggle="dropdown">
                                 <i class="mdi mdi-dots-horizontal text-muted"></i>
                             </a>
                             <ul class="dropdown-menu dropdown-menu-end">
-                                <d-new-saved-annotation
-                                    from-annotation-id="${this.data.id}"
-                                    annotation-text="${this.data.annotation_text}"
-                                    .savedAnnotationId="${this.data.saved_annotation_id}">
-                                </d-new-saved-annotation>
-                                <li>
-                                    <a class="dropdown-item" @click="${() => this.editing = true}">
-                                        <i class="mdi mdi-pencil mdi-18"></i> ${I18n.t(`js.${this.type}.edit`)}
-                                    </a>
-                                </li>
-                                ${ this.data.permission.destroy ? html`
-                                    <li>
-                                        <a class="dropdown-item" @click="${() => this.deleteAnnotation()}">
-                                            <i class="mdi mdi-delete mdi-18"></i> ${I18n.t(`js.user_annotation.delete`)}
-                                        </a>
-                                    </li>
-                                ` : ""}
+                                ${this.dropdownOptions}
                             </ul>
                         </div>
                     ` : ""}

app/assets/javascripts/components/copy_button.ts

@@ -1,4 +1,4 @@
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
 import { html, PropertyValues, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { initTooltips, ready } from "util.js";

app/assets/javascripts/components/saved_annotations/edit_saved_annotation.ts

@@ -3,7 +3,7 @@ import { html, TemplateResult } from "lit";
 import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
 import { SavedAnnotation, updateSavedAnnotation, deleteSavedAnnotation } from "state/SavedAnnotations";
 import "./saved_annotation_form";
-import { modalMixin } from "components/meta/modal_mixin";
+import { modalMixin } from "components/modal_mixin";
 
 /**
  * This component represents an edit button for a saved annotation

app/assets/javascripts/components/saved_annotations/new_saved_annotation.ts

@@ -3,7 +3,7 @@ import { html, TemplateResult } from "lit";
 import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
 import { createSavedAnnotation, getSavedAnnotation, SavedAnnotation } from "state/SavedAnnotations";
 import "./saved_annotation_form";
-import { modalMixin } from "components/meta/modal_mixin";
+import { modalMixin } from "components/modal_mixin";
 import { isBetaCourse } from "saved_annotation_beta";
 import { getCourseId } from "state/Courses";
 import { stateMixin } from "state/StateMixin";

app/assets/javascripts/exercise.ts

@@ -4,6 +4,8 @@ import { Toast } from "./toast";
 import GLightbox from "glightbox";
 import { IFrameMessageData } from "iframe-resizer";
 import { getCode } from "state/Submissions";
+import { render } from "lit";
+import { CopyButton } from "components/copy_button";
 
 function showLightbox(content): void {
     const lightbox = new GLightbox(content);