Merge pull request #480 from apache/478-report-issue

Add report an issue
apache · Jul 22, 2024 · ee2389f · ee2389f
2 parents 3484936 + 8a97292
commit ee2389f
Show file tree

Hide file tree

Showing 20 changed files with 2,392 additions and 3,209 deletions.
diff --git a/build/UserALEWebExtension/background.js b/build/UserALEWebExtension/background.js
@@ -67,10 +67,13 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const prefix = "USERALE_";
-const CONFIG_CHANGE = prefix + "CONFIG_CHANGE";
-const ADD_LOG = prefix + "ADD_LOG";
-const HTTP_SESSION = prefix + "HTTP_SESSION";
+var messageTypes;
+(function (messageTypes) {
+    messageTypes["CONFIG_CHANGE"] = "USERALE_CONFIG_CHANGE";
+    messageTypes["ADD_LOG"] = "USERALE_ADD_LOG";
+    messageTypes["HTTP_SESSION"] = "USERALE_HTTP_SESSION";
+    messageTypes["ISSUE_REPORT"] = "USERALE_ISSUE_REPORT";
+})(messageTypes || (messageTypes = {}));
 
 var version$1 = "2.4.0";
 
@@ -1313,7 +1316,7 @@ function updateConfig(payload) {
     options(payload.useraleConfig);
     browser.storage.local.set({ [configKey]: payload });
     dispatchTabMessage({
-        type: CONFIG_CHANGE,
+        type: messageTypes.CONFIG_CHANGE,
         payload: payload.useraleConfig,
     });
 }
@@ -1333,6 +1336,24 @@ function dispatchTabMessage(message) {
         });
     });
 }
+/**
+ * Send a message to the current tab
+ * @param {any} message The message to send
+ * @return {void}
+ */
+function messageCurrentTab(message) {
+    // @ts-expect-error Typescript is not aware that firefox's broswer is overloaded
+    // to support chromium style MV2 callbacks
+    browser.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+        if (tabs.length > 0) {
+            const activeTab = tabs[0];
+            browser.tabs.sendMessage(activeTab.id, message);
+        }
+        else {
+            console.error("No active tab found");
+        }
+    });
+}
 /**
  * Callback for filtering out logs with urls that do not match the regex defined in extension options.
  * @param {Logging.Log} log The candidate log
@@ -1379,15 +1400,18 @@ browser.storage.local.get([configKey], (res) => {
 });
 browser.runtime.onMessage.addListener(function (message, sender) {
     switch (message.type) {
-        case ADD_LOG:
+        case messageTypes.ADD_LOG:
             addLog(message);
             break;
-        case HTTP_SESSION:
+        case messageTypes.HTTP_SESSION:
             updateTabToHttpSessionMapping(message, sender);
             break;
-        case CONFIG_CHANGE:
+        case messageTypes.CONFIG_CHANGE:
             updateConfig(message.payload);
             break;
+        case messageTypes.ISSUE_REPORT:
+            messageCurrentTab(message);
+            break;
         default:
             console.log("got unknown message type ", message);
     }

diff --git a/build/UserALEWebExtension/content.js b/build/UserALEWebExtension/content.js
@@ -14,10 +14,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const prefix = "USERALE_";
-const CONFIG_CHANGE = prefix + "CONFIG_CHANGE";
-const ADD_LOG = prefix + "ADD_LOG";
-const HTTP_SESSION = prefix + "HTTP_SESSION";
+var messageTypes;
+(function (messageTypes) {
+    messageTypes["CONFIG_CHANGE"] = "USERALE_CONFIG_CHANGE";
+    messageTypes["ADD_LOG"] = "USERALE_ADD_LOG";
+    messageTypes["HTTP_SESSION"] = "USERALE_HTTP_SESSION";
+    messageTypes["ISSUE_REPORT"] = "USERALE_ISSUE_REPORT";
+})(messageTypes || (messageTypes = {}));
 
 var version = "2.4.0";
 
@@ -1174,7 +1177,7 @@ function options(newConfig) {
 var browser = window.browser || chrome;
 const configKey = "useraleConfigPayload";
 function rerouteLog(log) {
-    browser.runtime.sendMessage({ type: ADD_LOG, payload: log });
+    browser.runtime.sendMessage({ type: messageTypes.ADD_LOG, payload: log });
     return false;
 }
 /* eslint-enable */
@@ -1205,15 +1208,21 @@ browser.storage.local.get([configKey],
     const userAleHttpSessionId = window.sessionStorage.getItem("userAleHttpSessionId");
     if (userAleHttpSessionId) {
         browser.runtime.sendMessage({
-            type: HTTP_SESSION,
+            type: messageTypes.HTTP_SESSION,
             payload: JSON.parse(userAleHttpSessionId),
         });
     }
 });
 // TODO: Add types for message
-browser.runtime.onMessage.addListener(function (message) {
-    console.log(message);
-    if (message.type === CONFIG_CHANGE) {
+browser.runtime.onMessage.addListener(function (message, sender) {
+    if (message.type === messageTypes.CONFIG_CHANGE) {
         options(message.payload);
     }
+    else if (message.type === messageTypes.ISSUE_REPORT) {
+        if (window.top === window) {
+            packageCustomLog(message.payload, () => {
+                return {};
+            }, true);
+        }
+    }
 });
diff --git a/build/UserALEWebExtension/icons/UserALE Logo.png b/build/UserALEWebExtension/icons/UserALE Logo.png
diff --git a/build/UserALEWebExtension/icons/border-48.png b/build/UserALEWebExtension/icons/border-48.png
diff --git a/build/UserALEWebExtension/manifest.json b/build/UserALEWebExtension/manifest.json
@@ -4,7 +4,7 @@
   "version": "2.4.0",
   "description": "Injects UserALE into every page for testing & user research purposes",
   "icons": {
-    "48": "icons/border-48.png"
+    "48": "icons/UserALE Logo.png"
   },
   "permissions": ["activeTab", "storage", "tabs", "<all_urls>"],
   "background": {
@@ -19,5 +19,8 @@
   ],
   "options_ui": {
     "page": "optionsPage.html"
+  },
+  "browser_action": {
+    "default_popup": "optionsPage.html"
   }
 }
diff --git a/build/UserALEWebExtension/messageTypes.d.ts b/build/UserALEWebExtension/messageTypes.d.ts
@@ -17,6 +17,9 @@
  * under the License.
  */
 
-export declare const CONFIG_CHANGE: string;
-export declare const ADD_LOG: string;
-export declare const HTTP_SESSION: string;
+export declare enum messageTypes {
+    CONFIG_CHANGE = "USERALE_CONFIG_CHANGE",
+    ADD_LOG = "USERALE_ADD_LOG",
+    HTTP_SESSION = "USERALE_HTTP_SESSION",
+    ISSUE_REPORT = "USERALE_ISSUE_REPORT"
+}
diff --git a/build/UserALEWebExtension/options.js b/build/UserALEWebExtension/options.js
@@ -14,9 +14,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const prefix = "USERALE_";
-const CONFIG_CHANGE = prefix + "CONFIG_CHANGE";
-const ADD_LOG = prefix + "ADD_LOG";
+var messageTypes;
+(function (messageTypes) {
+    messageTypes["CONFIG_CHANGE"] = "USERALE_CONFIG_CHANGE";
+    messageTypes["ADD_LOG"] = "USERALE_ADD_LOG";
+    messageTypes["HTTP_SESSION"] = "USERALE_HTTP_SESSION";
+    messageTypes["ISSUE_REPORT"] = "USERALE_ISSUE_REPORT";
+})(messageTypes || (messageTypes = {}));
 
 var version = "2.4.0";
 
@@ -1173,7 +1177,7 @@ function options(newConfig) {
 var browser = window.browser || chrome;
 const configKey = "useraleConfigPayload";
 function rerouteLog(log) {
-    browser.runtime.sendMessage({ type: ADD_LOG, payload: log });
+    browser.runtime.sendMessage({ type: messageTypes.ADD_LOG, payload: log });
     return false;
 }
 /* eslint-enable */
@@ -1223,14 +1227,13 @@ function setConfig() {
         },
     };
     options(config);
-    browser.runtime.sendMessage({ type: CONFIG_CHANGE, payload });
+    browser.runtime.sendMessage({ type: messageTypes.CONFIG_CHANGE, payload });
 }
 function getConfig() {
     // @ts-expect-error Typescript is not aware that firefox's broswer is overloaded
     // to support chromium style MV2 callbacks
     browser.storage.local.get([configKey], (res) => {
         const payload = res[configKey];
-        console.log(payload);
         const config = payload.useraleConfig;
         options(config);
         document.getElementById("url").value = config.url;
@@ -1243,6 +1246,28 @@ function getConfig() {
         document.getElementById("filter").value =
             payload.pluginConfig.urlWhitelist;
     });
+    document.getElementById("optionsForm").addEventListener("submit", setConfig);
+    document.getElementById("issueForm").addEventListener("submit", reportIssue);
+}
+function reportIssue() {
+    browser.runtime.sendMessage({
+        type: messageTypes.ISSUE_REPORT,
+        payload: {
+            details: {
+                issueType: document.querySelector('input[name="issueType"]:checked').value,
+                issueDescription: document.getElementById("issueDescription").value,
+            },
+            type: "issue",
+        },
+    });
 }
 document.addEventListener("DOMContentLoaded", getConfig);
-document.addEventListener("submit", setConfig);
+browser.runtime.onMessage.addListener(function (message, sender) {
+    if (message.type === messageTypes.ISSUE_REPORT) {
+        if (window.top === window) {
+            packageCustomLog(message.payload, () => {
+                return {};
+            }, true);
+        }
+    }
+});
diff --git a/build/UserALEWebExtension/optionsPage.html b/build/UserALEWebExtension/optionsPage.html
@@ -23,7 +23,7 @@
     <meta charset="utf-8" />
   </head>
   <body>
-    <h1>Options</h1>
+    <h1>Logging Options</h1>
     <form name="optionsForm" id="optionsForm">
       <label>Logging Endpoint URL:</label>
       <input name="url" id="url" />
@@ -50,7 +50,39 @@ <h1>Options</h1>
       <br />
 
       <div align="right">
-        <button type="submit" id="submit">Save</button>
+        <button type="submit" id="submitOptions">Save Changes</button>
+      </div>
+    </form>
+    <h1>Report an Issue</h1>
+    <form name="issueForm" id="issueForm">
+      <label>Issue Type</label><br />
+      <label>
+        <input
+          type="radio"
+          id="bug"
+          name="issueType"
+          value="Bug"
+          checked="checked"
+        />
+        Bug </label
+      ><br />
+
+      <label>
+        <input type="radio" id="feat" name="issueType" value="Feature" />
+        Feature Request </label
+      ><br />
+      <br />
+      <textarea
+        id="issueDescription"
+        name="issueDescription"
+        rows="5"
+        cols="50"
+      >
+A detailed description of the issue.</textarea
+      >
+      <br />
+      <div align="right">
+        <button type="submit" id="submitIssue">Submit Report</button>
       </div>
     </form>
   </body>