feat: add "Feedback:" checkboxes in flag dialog

SOBotics · Jun 16, 2024 · 8aa39a1 · 8aa39a1
1 parent 46ca9aa
commit 8aa39a1
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 49 deletions.
diff --git a/src/AdvancedFlagging.ts b/src/AdvancedFlagging.ts
@@ -15,11 +15,6 @@ import { CopyPastorAPI } from './UserscriptTools/CopyPastorAPI';
 import { Buttons } from '@userscripters/stacks-helpers';
 import { Store, Cached } from './UserscriptTools/Store';
 
-// <TODO>
-// What's left for 2.0.0:
-// - Manipulate the flag popup: choose the bots to which to send feedback
-// </TODO>
-
 function setupStyles(): void {
     GM_addStyle(`
 .advanced-flagging-popover {

diff --git a/src/UserscriptTools/Post.ts b/src/UserscriptTools/Post.ts
@@ -9,6 +9,7 @@ import {
     addProgress,
     FlagTypeFeedbacks,
     BotNames,
+    appendLabelAndBoxes,
 } from '../shared';
 
 import { CopyPastorAPI } from './CopyPastorAPI';
@@ -309,6 +310,9 @@ export default class Post {
 
             if (!submit || !flagPopup || submit.textContent?.trim().startsWith('Retract')) return;
 
+            // add "Send feedback to: ..." buttons
+            appendLabelAndBoxes(submit, this);
+
             submit.addEventListener('click', async event => {
                 // get the type of flag selected
                 const checked = flagPopup.querySelector<HTMLInputElement>('input.s-radio:checked');
@@ -336,11 +340,10 @@ export default class Post {
             .filter(reporter => {
                 const { name, sanitisedName } = reporter;
 
-                // in review, the checkbox, is not a child of this.element
-                const element = Page.isLqpReviewPage ? document : this.element;
-                const input = element.querySelector<HTMLInputElement>(
-                    `[id*="-send-feedback-to-${sanitisedName.toLowerCase()}-"]`
-                );
+                const selector = `#advanced-flagging-send-feedback-to-${sanitisedName.toLowerCase()}-${this.id}`;
+                // priority to any flag/review checkboxes
+                const input = document.querySelector<HTMLInputElement>(`${selector}-flag-review`)
+                    ?? document.querySelector<HTMLInputElement>(selector);
 
                 // this may be undefined
                 // (e.g. if the parameter is not passed or the checkbox is not found)
@@ -417,7 +420,7 @@ export default class Post {
     }
 
     // returns [bot name, checkbox config]
-    public getFeedbackBoxes(): ReporterBoxes {
+    public getFeedbackBoxes(isFlagOrReview = false): ReporterBoxes {
         type ReportersEntries = [
             ['Smokey', MetaSmokeAPI],
             ['Natty', NattyAPI],
@@ -426,20 +429,27 @@ export default class Post {
         ];
 
         const newEntries = (Object.entries(this.reporters) as ReportersEntries)
-            // exclude bots that we can't send feedback to
-            .filter(([, instance]) => instance.showOnPopover())
+            .filter(([name, instance]) => {
+                // exclude bots that we can't send feedback to
+                return instance.showOnPopover()
+                    // note: in review, posts can't be reported to Smokey,
+                    //       so exclude the icon from the array that's returned
+                    && (!Page.isLqpReviewPage || (name !== 'Smokey' || instance.wasReported()));
+            })
             .map(([, instance]) => {
                 const botName = instance.sanitisedName.toLowerCase();
 
                 // need the postId in the id to make it unique
                 const botNameId = `advanced-flagging-send-feedback-to-${botName}-${this.id}`;
                 const defaultNoCheck = Store.config[instance.cacheKey];
 
+                const iconHtml = instance.getIcon().outerHTML;
                 const checkbox = {
-                    id: botNameId,
+                    // on post page, the id is not unique!
+                    id: `${botNameId}${isFlagOrReview ? '-flag-review' : ''}`,
                     labelConfig: {
-                        text: `Feedback to ${instance.getIcon().outerHTML}`,
-                        classes: [ 'fs-body1' ],
+                        text: `${isFlagOrReview ? '' : 'Feedback to'} ${iconHtml}`,
+                        classes: [ isFlagOrReview ? 'mb4' : 'fs-body1' ],
                     },
                     selected: !defaultNoCheck,
                 };

diff --git a/src/review.ts b/src/review.ts
@@ -1,4 +1,4 @@
-import { addProgress, addXHRListener, delay } from './shared';
+import { addProgress, addXHRListener, appendLabelAndBoxes, delay } from './shared';
 import { isDone } from './AdvancedFlagging';
 
 import { MetaSmokeAPI } from './UserscriptTools/MetaSmokeAPI';
@@ -7,7 +7,7 @@ import { CopyPastorAPI } from './UserscriptTools/CopyPastorAPI';
 import { Cached, Store } from './UserscriptTools/Store';
 
 import Page from './UserscriptTools/Page';
-import { Checkbox, Label } from '@userscripters/stacks-helpers';
+import { Checkbox } from '@userscripters/stacks-helpers';
 
 interface ReviewQueueResponse {
     postId: number;
@@ -110,40 +110,11 @@ export function setupReview(): void {
         );
         checkbox.classList.add('flex--item');
 
-        const label = Label.makeStacksLabel(
-            'noid',
-            {
-                text: 'Send feedback to:',
-                classes: [ 'mt2', 'fw-normal' ]
-            }
-        );
-
         // feedback boxes
         const post = new Page(true).posts[0];
-        const boxes = Object
-            .entries(post.getFeedbackBoxes())
-            .filter(([name]) => {
-                // exclude feedback to Smokey if post wasn't reported
-                // (only spam posts are reported, not non-answers)
-                return name !== 'Smokey' || post.reporters.Smokey?.wasReported();
-            })
-            .map(([, box]) => {
-                // remove 'fs-body1' class, add 'mb4' instead
-                box.labelConfig.classes = [ 'mb4' ];
-
-                const newText = box.labelConfig.text.replace('Feedback to ', '');
-                box.labelConfig.text = newText;
-
-                return box;
-            });
-        const [, ...checkboxes] = Checkbox.makeStacksCheckboxes(
-            boxes,
-            { horizontal: true }
-        );
 
-        // add flex--item to each box, so it is properly aligned
-        checkboxes.forEach(box => box.classList.add('flex--item'));
-        submit.parentElement?.append(checkbox, label, ...checkboxes);
+        submit.parentElement?.append(checkbox);
+        appendLabelAndBoxes(submit, post);
 
         submit.addEventListener('click', async event => {
             // find the "Not an answer" flag type

diff --git a/src/shared.ts b/src/shared.ts
@@ -2,6 +2,8 @@ import { CachedFlag, Store } from './UserscriptTools/Store';
 import { Flags } from './FlagTypes';
 import Page from './UserscriptTools/Page';
 import { Progress } from './UserscriptTools/Progress';
+import Post from './UserscriptTools/Post';
+import { Checkbox, Label } from '@userscripters/stacks-helpers';
 
 type BasicPlacement = 'auto' | 'top' | 'right' | 'bottom' | 'left';
 // Minimum TypeScript Version: 4.1
@@ -229,3 +231,29 @@ export async function addProgress(
         target.click();
     }
 }
+
+export function appendLabelAndBoxes(
+    element: Element,
+    post: Post
+): void {
+    const label = Label.makeStacksLabel(
+        'noid',
+        {
+            text: 'Feedback:',
+            classes: [ 'mt2', 'fw-normal' ]
+        }
+    );
+    const boxes = Object
+        .entries(post.getFeedbackBoxes(true))
+        .map(([, box]) => box);
+
+    const [, ...checkboxes] = Checkbox.makeStacksCheckboxes(
+        boxes,
+        { horizontal: true }
+    );
+
+    // add flex--item to each box, so it is properly aligned
+    checkboxes.forEach(box => box.classList.add('flex--item'));
+
+    element.parentElement?.append(label, ...checkboxes);
+}