From bcaf554896a92f43cc2245d6f7320c6292bdd91b Mon Sep 17 00:00:00 2001
From: Dharun Ashokkumar <dharuna457@gmail.com>
Date: Tue, 20 Jan 2026 21:17:58 +0530
Subject: [PATCH] fix: address code review feedback

Use HiddenInput for webhook URL, replace button with ToggleSection, inline webhook variable, and move script to constant to avoid duplication
---
 .../notification-providers/google-sheets.js   |   4 +-
 src/components/notifications/GoogleSheets.vue | 102 +++++++-----------
 2 files changed, 41 insertions(+), 65 deletions(-)

diff --git a/server/notification-providers/google-sheets.js b/server/notification-providers/google-sheets.js
index 8c8ec1581..fc74a6b55 100644
--- a/server/notification-providers/google-sheets.js
+++ b/server/notification-providers/google-sheets.js
@@ -32,8 +32,6 @@ class GoogleSheets extends NotificationProvider {
             }
 
             // Send data to Google Apps Script webhook
-            const webhookUrl = notification.googleSheetsWebhookUrl;
-            
             const config = this.getAxiosConfigWithProxy({
                 headers: {
                     "Content-Type": "application/json"
@@ -50,7 +48,7 @@ class GoogleSheets extends NotificationProvider {
                 statusCode
             };
 
-            await axios.post(webhookUrl, data, config);
+            await axios.post(notification.googleSheetsWebhookUrl, data, config);
 
             return okMsg;
         } catch (error) {
diff --git a/src/components/notifications/GoogleSheets.vue b/src/components/notifications/GoogleSheets.vue
index 2f167b3ce..f702a94b4 100644
--- a/src/components/notifications/GoogleSheets.vue
+++ b/src/components/notifications/GoogleSheets.vue
@@ -1,13 +1,12 @@
 <template>
     <div class="mb-3">
         <label for="google-sheets-webhook-url" class="form-label">{{ $t("Google Apps Script Webhook URL") }}</label>
-        <input
+        <HiddenInput
             id="google-sheets-webhook-url"
             v-model="$parent.notification.googleSheetsWebhookUrl"
-            type="text"
-            class="form-control"
-            required
+            :required="true"
             placeholder="https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec"
+            autocomplete="off"
         />
         <div class="form-text">
             <p>{{ $t("Deploy a Google Apps Script as a web app and paste the URL here") }}</p>
@@ -26,66 +25,32 @@
         </ol>
     </div>
 
-    <div class="mb-3">
-        <button 
-            type="button" 
-            class="btn btn-secondary btn-sm" 
-            @click="showScript = !showScript"
-        >
-            {{ showScript ? $t("Hide Script Code") : $t("Show Script Code") }}
-        </button>
-    </div>
-
-    <div v-if="showScript" class="mb-3">
-        <label class="form-label">{{ $t("Google Apps Script Code") }}:</label>
-        <textarea 
-            readonly 
-            class="form-control" 
-            rows="15" 
-            style="font-family: monospace; font-size: 12px;"
-        >function doPost(e) {
-  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
-  var data = JSON.parse(e.postData.contents);
-  
-  // Add header row if sheet is empty
-  if (sheet.getLastRow() === 0) {
-    sheet.appendRow(['Timestamp', 'Status', 'Monitor Name', 'URL', 'Message', 'Response Time', 'Status Code']);
-  }
-  
-  // Add data row
-  sheet.appendRow([
-    data.timestamp,
-    data.status,
-    data.monitorName,
-    data.monitorUrl,
-    data.message,
-    data.responseTime,
-    data.statusCode
-  ]);
-  
-  return ContentService.createTextOutput(JSON.stringify({result: 'success'}))
-    .setMimeType(ContentService.MimeType.JSON);
-}</textarea>
-        <button 
-            type="button" 
-            class="btn btn-outline-secondary btn-sm mt-2" 
-            @click="copyScript"
-        >
-            {{ $t("Copy to Clipboard") }}
-        </button>
-    </div>
+    <ToggleSection :heading="$t('Google Apps Script Code')">
+        <div class="mb-3">
+            <textarea 
+                readonly 
+                class="form-control" 
+                rows="15" 
+                style="font-family: monospace; font-size: 12px;"
+                :value="scriptCode"
+            />
+            <button 
+                type="button" 
+                class="btn btn-outline-secondary btn-sm mt-2" 
+                @click="copyScript"
+            >
+                {{ $t("Copy to Clipboard") }}
+            </button>
+        </div>
+    </ToggleSection>
 </template>
 
 <script>
-export default {
-    data() {
-        return {
-            showScript: false
-        };
-    },
-    methods: {
-        copyScript() {
-            const scriptCode = `function doPost(e) {
+import HiddenInput from "../HiddenInput.vue";
+import ToggleSection from "../ToggleSection.vue";
+
+// Google Apps Script code for logging to spreadsheet
+const GOOGLE_APPS_SCRIPT_CODE = `function doPost(e) {
   var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
   var data = JSON.parse(e.postData.contents);
   
@@ -108,8 +73,21 @@ export default {
   return ContentService.createTextOutput(JSON.stringify({result: 'success'}))
     .setMimeType(ContentService.MimeType.JSON);
 }`;
+
+export default {
+    components: {
+        HiddenInput,
+        ToggleSection,
+    },
+    computed: {
+        scriptCode() {
+            return GOOGLE_APPS_SCRIPT_CODE;
+        }
+    },
+    methods: {
+        copyScript() {
             try {
-                navigator.clipboard.writeText(scriptCode);
+                navigator.clipboard.writeText(GOOGLE_APPS_SCRIPT_CODE);
                 alert(this.$t("Copied to clipboard!"));
             } catch (error) {
                 alert(this.$t("Failed to copy to clipboard"));