feat: add troubleshooting side panel and advanced queue controls

- Implemented a global toggle to enable/disable background queue processing. - Added a Side Panel (Sidebar.html) to view pending edits. - Added per-item controls: 'Delete' to remove from queue, 'Push' to force update. - Updated 'onEditQueue.ts' with robust error handling for batch processing. - Updated documentation (README, ARCHITECTURE) to reflect new features. - Fixed 'clasp' deployment issues by cleaning up manifest management.
2025-12-24 21:14:19 -07:00
parent ca0ba1dc94
commit 418123d742
13 changed files with 459 additions and 5 deletions
--- a/src/Sidebar.html
+++ b/src/Sidebar.html
@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base target="_top">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+    <style>
+      body {
+        font-family: 'Roboto', sans-serif;
+        padding: 12px;
+        color: #333;
+      }
+      h2 {
+        font-size: 18px;
+        margin-bottom: 8px;
+        color: #202124;
+      }
+      .section {
+        margin-bottom: 24px;
+        border: 1px solid #e0e0e0;
+        border-radius: 8px;
+        padding: 16px;
+        background-color: #fff;
+      }
+      .stat-count {
+        font-size: 32px;
+        font-weight: 500;
+        color: #1a73e8;
+      }
+      .stat-label {
+        font-size: 14px;
+        color: #5f6368;
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-top: 12px;
+        font-size: 13px;
+      }
+      th {
+        text-align: left;
+        color: #5f6368;
+        font-weight: 500;
+        padding-bottom: 8px;
+        border-bottom: 1px solid #e0e0e0;
+      }
+      td {
+        padding: 8px 0;
+        border-bottom: 1px solid #f1f3f4;
+      }
+      button {
+        background-color: #1a73e8;
+        color: white;
+        border: none;
+        padding: 8px 16px;
+        border-radius: 4px;
+        cursor: pointer;
+        font-family: 'Roboto', sans-serif;
+        font-size: 14px;
+        font-weight: 500;
+        width: 100%;
+      }
+      button:hover {
+        background-color: #1557b0;
+      }
+      .loading {
+        color: #5f6368;
+        font-style: italic;
+        margin-top: 8px;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <h2>System Status</h2>
+
+    <div class="section">
+        <label style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
+            <span>Enable Automatic Processing</span>
+            <input type="checkbox" id="queue-toggle" onchange="toggleQueue()">
+        </label>
+    </div>
+    
+    <div class="section">
+      <div class="stat-count" id="queue-count">-</div>
+      <div class="stat-label">Pending Edits</div>
+      <div id="loading" class="loading" style="display: none;">Loading...</div>
+      
+      <table id="queue-table">
+        <thead>
+          <tr>
+            <th>SKU</th>
+            <th>Time</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody id="queue-body">
+        </tbody>
+      </table>
+    </div>
+
+    <button onclick="refreshData()">Refresh</button>
+
+    <script>
+      function refreshData() {
+        showLoading('Loading...');
+        google.script.run
+          .withSuccessHandler(updateUI)
+          .withFailureHandler(showError)
+          .getQueueStatus();
+      }
+
+      function toggleQueue() {
+          const enabled = document.getElementById('queue-toggle').checked;
+          showLoading('Updating...');
+          google.script.run
+            .withSuccessHandler(() => refreshData())
+            .withFailureHandler(showError)
+            .setQueueEnabled(enabled);
+      }
+
+      function deleteItem(sku) {
+          if(!confirm('Are you sure you want to remove ' + sku + ' from the queue?')) return;
+          showLoading('Deleting...');
+          google.script.run
+            .withSuccessHandler(() => refreshData())
+            .withFailureHandler(showError)
+            .deleteEdit(sku);
+      }
+
+      function pushItem(sku) {
+          showLoading('Pushing ' + sku + '...');
+          google.script.run
+            .withSuccessHandler(() => refreshData())
+            .withFailureHandler(showError)
+            .pushEdit(sku);
+      }
+
+      function updateUI(status) {
+        hideLoading();
+        document.getElementById('queue-toggle').checked = status.enabled;
+        
+        const items = status.items || [];
+        document.getElementById('queue-count').innerText = items.length;
+        
+        const tbody = document.getElementById('queue-body');
+        tbody.innerHTML = '';
+        
+        items.forEach(item => {
+          const row = document.createElement('tr');
+          row.innerHTML = `
+            <td>${item.sku}</td>
+            <td>${item.time}</td>
+            <td>
+                <button style="padding: 4px 8px; font-size: 11px; width: auto; background-color: #d93025; margin-right: 4px;" onclick="deleteItem('${item.sku}')">Del</button>
+                <button style="padding: 4px 8px; font-size: 11px; width: auto; background-color: #1a73e8;" onclick="pushItem('${item.sku}')">Push</button>
+            </td>
+          `;
+          tbody.appendChild(row);
+        });
+      }
+
+      function showLoading(msg) {
+          const el = document.getElementById('loading');
+          el.innerText = msg;
+          el.style.display = 'block';
+      }
+
+      function hideLoading() {
+          document.getElementById('loading').style.display = 'none';
+      }
+
+      function showError(error) {
+        document.getElementById('loading').innerText = 'Error: ' + error.message;
+        document.getElementById('loading').style.display = 'block';
+      }
+
+      // Load on start
+      refreshData();
+    </script>
+  </body>
+</html>
--- a/src/appsscript.json
+++ b/src/appsscript.json
@ -0,0 +1,12 @@
+{
+  "timeZone": "America/Denver",
+  "dependencies": {
+  },
+  "exceptionLogging": "STACKDRIVER",
+  "runtimeVersion": "V8",
+  "oauthScopes": [
+    "https://www.googleapis.com/auth/spreadsheets",
+    "https://www.googleapis.com/auth/script.external_request",
+    "https://www.googleapis.com/auth/script.container.ui"
+  ]
+}
--- a/src/global.ts
+++ b/src/global.ts
@ -10,6 +10,7 @@ import {
  updateShopifyProductHandler,
  reauthorizeScript,
 } from "./initMenu"
+
 import { createMissingPhotoFolders } from "./createMissingPhotoFolders"
 import { reinstallTriggers } from "./triggers"
 import { newSkuHandler } from "./newSku"
@ -19,6 +20,7 @@ import {
  processBatchedEdits
 } from "./onEditQueue"
 import { fillProductFromTemplate } from "./fillProductFromTemplate"
+import { showSidebar, getQueueStatus, setQueueEnabled, deleteEdit, pushEdit } from "./sidebar"

 // prettier-ignore
 ;(global as any).onOpen = onOpen
@ -36,3 +38,8 @@ import { fillProductFromTemplate } from "./fillProductFromTemplate"
 ;(global as any).newSkuHandler = newSkuHandler
 ;(global as any).fillProductFromTemplate = fillProductFromTemplate
 ;(global as any).createMissingPhotoFolders = createMissingPhotoFolders
+;(global as any).showSidebar = showSidebar
+;(global as any).getQueueStatus = getQueueStatus
+;(global as any).setQueueEnabled = setQueueEnabled
+;(global as any).deleteEdit = deleteEdit
+;(global as any).pushEdit = pushEdit
--- a/src/initMenu.ts
+++ b/src/initMenu.ts
@ -4,6 +4,7 @@ import { createMissingPhotoFolders } from "./createMissingPhotoFolders"
 import { matchProductToShopify, updateProductToShopify } from "./match"
 import { reinstallTriggers } from "./triggers"
 import { toastAndLog } from "./sheetUtils"
+import { showSidebar } from "./sidebar"

 export function initMenu() {
  let ui = SpreadsheetApp.getUi()
@ -29,6 +30,7 @@ export function initMenu() {
        .createMenu("Utilities...")
        .addItem("Reauthorize script", reauthorizeScript.name)
        .addItem("Reinstall triggers", reinstallTriggers.name)
+        .addItem("Troubleshoot", showSidebar.name)
    )
    .addToUi()
 }
--- a/src/onEditQueue.ts
+++ b/src/onEditQueue.ts
@ -8,6 +8,7 @@ const LOCK_TIMEOUT_MS = 10 * 1000 // 10 seconds for lock acquisition
 const CACHE_KEY_EDITS = "pendingEdits"
 const CACHE_KEY_LAST_EDIT_TIME = "lastEditTime"
 const SCRIPT_PROPERTY_TRIGGER_SCHEDULED = "batchTriggerScheduled"
+export const SCRIPT_PROPERTY_QUEUE_ENABLED = "queueEnabled"

 export function onEditQueue(e) {
  const sheet = e.source.getActiveSheet()
@ -79,6 +80,13 @@ export function processBatchedEdits() {
    }

    console.log(`Total SKUs in queue: ${pendingEdits.length}`)
+
+    const queueEnabled = scriptProperties.getProperty(SCRIPT_PROPERTY_QUEUE_ENABLED) !== "false"
+    if (!queueEnabled) {
+      console.log("Queue disabled, skipping processing.")
+      return
+    }
+
    const now = Date.now()
    const toProcess = pendingEdits.filter(
      (edit) => now - edit.timestamp > BATCH_INTERVAL_MS
@ -96,7 +104,11 @@ export function processBatchedEdits() {
          return
        }
        let p = new Product(edit.sku)
-        p.UpdateShopifyProduct(shop)
+        try {
+          p.UpdateShopifyProduct(shop)
+        } catch (err) {
+          console.error(`Failed to update SKU ${edit.sku}: ${err.message}`)
+        }
      })

      pendingEdits = pendingEdits.filter(
--- a/src/sidebar.ts
+++ b/src/sidebar.ts
@ -0,0 +1,83 @@
+import { SCRIPT_PROPERTY_QUEUE_ENABLED } from "./onEditQueue";
+import { Product } from "./Product";
+import { Shop } from "./shopifyApi";
+
+const CACHE_KEY_EDITS = "pendingEdits"
+const LOCK_TIMEOUT_MS = 10000;
+
+export function showSidebar() {
+  const html = HtmlService.createHtmlOutputFromFile('Sidebar')
+      .setTitle('Troubleshooting')
+      .setWidth(300);
+  SpreadsheetApp.getUi().showSidebar(html);
+}
+
+export function getQueueStatus() {
+   const scriptProperties = PropertiesService.getScriptProperties();
+    let pendingEdits = [];
+    try {
+      const pendingEditsStr = scriptProperties.getProperty(CACHE_KEY_EDITS);
+      pendingEdits = pendingEditsStr ? JSON.parse(pendingEditsStr) : [];
+    } catch (e) {
+      console.log("Cache corruption: " + e.message);
+    }
+
+    const queueEnabled = scriptProperties.getProperty(SCRIPT_PROPERTY_QUEUE_ENABLED) !== "false";
+
+    // Convert timestamps to readable strings
+    return {
+        enabled: queueEnabled,
+        items: pendingEdits.map(edit => ({
+            sku: edit.sku,
+            time: new Date(edit.timestamp).toLocaleString()
+        }))
+    };
+}
+
+export function setQueueEnabled(enabled: boolean) {
+    const scriptProperties = PropertiesService.getScriptProperties();
+    scriptProperties.setProperty(SCRIPT_PROPERTY_QUEUE_ENABLED, enabled.toString());
+}
+
+export function deleteEdit(sku: string) {
+    const lock = LockService.getScriptLock();
+    try {
+        lock.waitLock(LOCK_TIMEOUT_MS);
+        const scriptProperties = PropertiesService.getScriptProperties();
+        const pendingEditsStr = scriptProperties.getProperty(CACHE_KEY_EDITS);
+        let pendingEdits = pendingEditsStr ? JSON.parse(pendingEditsStr) : [];
+
+        pendingEdits = pendingEdits.filter(edit => edit.sku !== sku);
+
+        scriptProperties.setProperty(CACHE_KEY_EDITS, JSON.stringify(pendingEdits));
+    } finally {
+        lock.releaseLock();
+    }
+}
+
+export function pushEdit(sku: string) {
+    const lock = LockService.getScriptLock();
+    try {
+        lock.waitLock(LOCK_TIMEOUT_MS);
+        const scriptProperties = PropertiesService.getScriptProperties();
+
+        // 1. Process the edit safely (try/catch already handled in Product methods or here)
+        // We do this BEFORE removing from queue to ensure data safety if it fails.
+        let shop = new Shop();
+        let p = new Product(sku);
+        p.UpdateShopifyProduct(shop);
+
+        // 2. If successful, remove from queue
+        const pendingEditsStr = scriptProperties.getProperty(CACHE_KEY_EDITS);
+        let pendingEdits = pendingEditsStr ? JSON.parse(pendingEditsStr) : [];
+
+        pendingEdits = pendingEdits.filter(edit => edit.sku !== sku);
+        scriptProperties.setProperty(CACHE_KEY_EDITS, JSON.stringify(pendingEdits));
+
+    } catch (e) {
+        throw new Error(`Failed to push edit for SKU ${sku}: ${e.message}`);
+    } finally {
+        // Ensure lock is always released
+        lock.releaseLock();
+    }
+}