Merge branch 'develop' into art/complaints

Author: ArtOfCode-

Gemfile.lock

@@ -281,7 +281,7 @@ GEM
     puma (5.6.9)
       nio4r (~> 2.0)
     racc (1.8.1)
-    rack (2.2.17)
+    rack (2.2.19)
     rack-mini-profiler (3.3.1)
       rack (>= 1.2.0)
     rack-protection (3.2.0)

INSTALLATION.md

@@ -233,6 +233,16 @@ Add the tags to the "Required tags" section:
 
 ![img/required-tags.png](img/required-tags.png)
 
+## Optional: Email blocklists
+
+If you want to block some known-bad actors from using the deployment, you can setup the following email blocklists:
+
+- Bad email patterns for granular control over which email addresses to block.
+  To enable it, add a file named `qpixel-email-patterns.txt` to the deployment root's parent directory.
+  Each line in the file should be a valid regular expression that a given email will be checked against.
+- Bad email domains for bulk blocks on emails from known bad domains.
+  To enable it, add a file named `qpixel-domain-blocklist.txt` to the deployment root's parent directory.
+  Each line in the file corresponds to a domain that should be blocked.
 
 ## Optional: Help Topics
 

app/assets/javascripts/error_reports.js

@@ -0,0 +1,5 @@
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.js-error-type-select').forEach((el) => {
+    $(el).select2();
+  });
+});

app/assets/javascripts/qpixel_api.js

@@ -430,19 +430,34 @@ window.QPixel = {
   },
 
   handleJSONResponse: (data, onSuccess, onFinally) => {
-    const is_modified = data.status === 'modified';
-    const is_success = data.status === 'success';
+    const isFailed = data.status === 'failed';
 
-    if (is_modified || is_success) {
-      onSuccess(/** @type {Parameters<typeof onSuccess>[0]} */(data));
+    if(isFailed) {
+      const { errors = [], message } = data;
+
+      if (message) {
+        const fullMessage =
+          errors.length > 1
+            ? `${message}:<ul>${errors.map((e) => `<li>${e.trim()}</li>`).join('')}</ul>`
+            : errors.length === 1
+              ? `${message} (${errors[0].toLowerCase().trim()})`
+              : message;
+
+          QPixel.createNotification('danger', fullMessage);
+      }
+      else {
+        for (const error of errors) {
+          QPixel.createNotification('danger', error);
+        }
+      }
     }
     else {
-      QPixel.createNotification('danger', data.message);
+      onSuccess(/** @type {Parameters<typeof onSuccess>[0]} */(data));
     }
 
     onFinally?.(data);
 
-    return is_success;
+    return !isFailed;
   },
 
   flag: async (flag) => {

app/assets/javascripts/tags.js

@@ -1,13 +1,4 @@
-/**
- * @typedef {{
- *  id: number | string
- *  text: string
- *  desc: string
- *  synonyms?: string | QPixelTagSynonym[]
- * }} ProcessedTag
- */
-
-$(() => {
+document.addEventListener('DOMContentLoaded', () => {
   const sum = (/** @type {number[]} */ ary) => ary.reduce((a, b) => a + b, 0);
 
   /**
@@ -35,11 +26,11 @@ $(() => {
     const tagSynonyms = !!tag.synonyms ? ` <i>(${tag.synonyms})</i>` : '';
     const tagSpan = `<span>${tag.text}${tagSynonyms}</span>`;
     let desc = !!tag.desc ? splitWordsMaxLength(tag.desc, 120) : '';
-    const descSpan = !!tag.desc ?
-      `<br/><span class="has-color-tertiary-900 has-font-size-caption">${desc[0]}${desc.length > 1 ? '...' : ''}</span>` :
-      '';
+    const descSpan = !!tag.desc
+      ? `<br/><span class="has-color-tertiary-900 has-font-size-caption">${desc[0]}${desc.length > 1 ? '...' : ''}</span>`
+      : '';
     return $(tagSpan + descSpan);
-  }
+  };
 
   $('.js-tag-select').each((_i, el) => {
     const $tgt = $(el);
@@ -49,10 +40,10 @@ $(() => {
       tags: $tgt.attr('data-create') !== 'false',
       /**
        * @param {Select2.IdTextPair[]} data
-       * @param {Select2.IdTextPair & { desc?: string }} tag 
+       * @param {Select2.IdTextPair & { desc?: string }} tag
        */
       insertTag: function (data, tag) {
-        tag.desc = "(Create new tag)"
+        tag.desc = '(Create new tag)';
         // Insert the tag at the end of the results
         data.push(tag);
       },
@@ -66,7 +57,7 @@ $(() => {
           }
           return Object.assign(params, { tag_set: $this.data('tag-set') });
         },
-        headers: { 'Accept': 'application/json' },
+        headers: { Accept: 'application/json' },
         delay: 100,
         /**
          * @param {QPixelTag[]} data
@@ -80,23 +71,23 @@ $(() => {
                 { id: 1, text: 'hot-red-firebreather', desc: 'Very cute dragon' },
                 { id: 2, text: 'training', desc: 'How to train a dragon' },
                 { id: 3, text: 'behavior', desc: 'How a dragon behaves' },
-                { id: 4, text: 'sapphire-blue-waterspouter', desc: 'Other cute dragon' }
-              ]
-            }
+                { id: 4, text: 'sapphire-blue-waterspouter', desc: 'Other cute dragon' },
+              ],
+            };
           }
           return {
             results: data.map((t) => ({
               id: useIds ? t.id : t.name,
               text: t.name.replace(/</g, '&#x3C;').replace(/>/g, '&#x3E;'),
               synonyms: processSynonyms($this, t.tag_synonyms),
-              desc: t.excerpt
-            }))
+              desc: t.excerpt,
+            })),
           };
         },
       },
       placeholder: '',
       templateResult: template,
-      allowClear: true
+      allowClear: true,
     });
   });
 
@@ -112,10 +103,13 @@ $(() => {
     if (synonyms.length > 3) {
       const searchValue = $search.data('select2').selection.$search.val().toLowerCase();
       displayedSynonyms = synonyms.filter((ts) => ts.name.includes(searchValue)).slice(0, 3);
-    } else {
+    }
+    else {
       displayedSynonyms = synonyms;
     }
-    let synonymsString = displayedSynonyms.map((ts) => `${ts.name.replace(/</g, '&#x3C;').replace(/>/g, '&#x3E;')}`).join(', ');
+    let synonymsString = displayedSynonyms
+      .map((ts) => `${ts.name.replace(/</g, '&#x3C;').replace(/>/g, '&#x3E;')}`)
+      .join(', ');
     if (synonyms.length > displayedSynonyms.length) {
       synonymsString += `, ${synonyms.length - displayedSynonyms.length} more synonyms`;
     }
@@ -128,10 +122,10 @@ $(() => {
     const newId = parseInt(lastId, 10) + 1;
 
     //Duplicate the first element at the end of the wrapper
-    const newField = $wrapper.find('.tag-synonym[data-id="0"]')[0]
-                             .outerHTML
-                             .replace(/data-id="0"/g, 'data-id="' + newId + '"')
-                             .replace(/(?<connector>attributes(\]\[)|(_))0/g, '$<connector>' + newId)
+    const newField = $wrapper
+      .find('.tag-synonym[data-id="0"]')[0]
+      .outerHTML.replace(/data-id="0"/g, 'data-id="' + newId + '"')
+      .replace(/(?<connector>attributes(\]\[)|(_))0/g, '$<connector>' + newId);
     $wrapper.append(newField);
 
     //Alter the newly added tag synonym
@@ -141,10 +135,10 @@ $(() => {
     $newTagSynonym.show();
 
     //Add handler for removing an element
-    $newTagSynonym.find(`.remove-tag-synonym`).click(removeTagSynonym);
+    $newTagSynonym.find(`.remove-tag-synonym`).on('click', removeTagSynonym);
   });
 
-  $('.remove-tag-synonym').click(removeTagSynonym);
+  $('.remove-tag-synonym').on('click', removeTagSynonym);
 
   function removeTagSynonym() {
     const synonym = $(this).closest('.tag-synonym');
@@ -174,7 +168,7 @@ $(() => {
     const tagId = $tgt.attr('data-tag');
     const tagName = $tgt.attr('data-name');
 
-    const renameTo = prompt(`Rename tag ${tagName} to:`);
+    const renameTo = prompt(`Rename tag "${tagName}" to:`);
 
     if (!renameTo) {
       return;

app/assets/stylesheets/application.scss

@@ -308,5 +308,4 @@ kbd {
     left: 0.25em;
     right: 0.25em;
   };
-  vertical-align: text-bottom;
 }

app/assets/stylesheets/error_reports.scss

@@ -0,0 +1,33 @@
+@import 'variables';
+
+.error-reports-filters {
+
+  .form-group-horizontal .actions,
+  .select2-container {
+    height: 37px;
+    margin: 4px 0px;
+  }
+
+  .select2-container {
+    .selection {
+      .select2-selection {
+        border-color: $muted-graphic;
+        height: 100%;
+        padding: 4px 0;
+      }
+
+      .select2-selection__arrow {
+        top: 50%;
+        translate: 0 -50%;
+      }
+    }
+  }
+
+  .form-group-horizontal {
+    .actions {
+      .button {
+        margin: 0;
+      }
+    }
+  }
+}

app/assets/stylesheets/errors.scss

@@ -23,7 +23,8 @@
 .error-report-summary {
   display: flex;
   align-items: center;
-  gap: 0.15em;
+  gap: 1em;
+  word-break: break-word;
 
   .details {
     flex: 1;

app/assets/stylesheets/flags.scss

@@ -0,0 +1,15 @@
+.flags-list-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.header {
+  .header--menu {
+    .header--item {
+      .header--alert {
+        min-width: 2em;
+        padding: 0 0.5em;
+      }
+    }
+  }
+}

app/assets/stylesheets/forms.scss

@@ -47,7 +47,6 @@ select.form-element {
 
 .select2-container {
   width: 100% !important;
-  z-index: 8999;
 }
 
 .select2-results__option {