refactor: extract constants, use this.pendingChanges, simplify log messages in external-services.js

Copilot · PDowney · web-flow · commit 33cdebfd9721 · 2026-04-11T01:49:38.000Z
Agent-Logs-Url: https://github.com/EngineScript/EngineScript/sessions/6d0647df-8d96-4a24-ae31-5b2055a4fd58 Co-authored-by: PDowney <11467177+PDowney@users.noreply.github.com>
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,16 @@ Changes are organized by date, with the most recent changes listed first.
 
 ## 2026-04-11
 
+### 🧹 EXTERNAL SERVICES JS CODE QUALITY IMPROVEMENTS
+
+- Extracted the "Failed to fetch external service status" error message into a `ERROR_LOADING_EXTERNAL_SERVICES_MESSAGE` constant in `external-services.js` for easier maintenance and potential localization.
+- Extracted the settings panel instruction text into a `SETTINGS_INSTRUCTION_TEXT` constant in `external-services.js` for easier updates and potential internationalization support.
+- Refactored `pendingChanges` in `renderServiceSettings` from a local variable to an instance property (`this.pendingChanges`) to reduce deep parameter passing through nested function calls.
+- Simplified the `console.error` message in `getServiceCardElement` to focus on actionable information: `Service card not found: ${name}. Status updates will be skipped.`
+- Simplified the `console.warn` message in `getSheetRules` to: `Error accessing stylesheet rules:` followed by the error object.
+
+## 2026-04-11
+
 ### 🔧 VHOST IMPORT BUG FIXES & IMPROVEMENTS
 
 - Updated the single-zip database file detection in `scripts/functions/vhost/vhost-import.sh` to search for both `*.sql` and `*.sql.gz` patterns, so compressed database dumps are correctly found and imported instead of failing silently.
diff --git a/config/var/www/admin/control-panel/external-services/external-services.js b/config/var/www/admin/control-panel/external-services/external-services.js
@@ -18,6 +18,10 @@ const CATEGORY_ORDER = [
   'Security'
 ];
 
+const ERROR_LOADING_EXTERNAL_SERVICES_MESSAGE = "Failed to fetch external service status. Check your internet connection and refresh the page. If the problem continues, check the browser console for details or contact your administrator.";
+
+const SETTINGS_INSTRUCTION_TEXT = 'Toggle services to show/hide on the dashboard. Drag service cards to reorder them, or use the keyboard: press Enter to activate reorder mode and use arrow keys to move cards. Click "Save Changes" to apply. Services are organized by category.';
+
 const DND_MOVE_TOKEN = 'moving';
 
 const DEFAULT_ICON_SUFFIX = 'question';
@@ -245,7 +249,7 @@ export class ExternalServicesManager {
     h3.textContent = "Error Loading External Services";
     
     const p = document.createElement("p");
-    p.textContent = "Failed to fetch external service status. Check your internet connection and refresh the page. If the problem continues, check the browser console for details or contact your administrator.";
+    p.textContent = ERROR_LOADING_EXTERNAL_SERVICES_MESSAGE;
     
     errorDiv.appendChild(iconDiv);
     errorDiv.appendChild(h3);
@@ -436,8 +440,8 @@ export class ExternalServicesManager {
   renderServiceSettings(settingsContainer, services, serviceDefinitions, preferences) {
     settingsContainer.replaceChildren();
     
-    // Track pending changes (shared across components)
-    const pendingChanges = {};
+    // Track pending changes as instance state (shared across components)
+    this.pendingChanges = {};
     
     // Create main UI structure
     const { settingsToggle, settingsContent } = this.createSettingsStructure();
@@ -451,13 +455,13 @@ export class ExternalServicesManager {
     for (const category of categoryOrder) {
       if (!categories[category]) continue;
       const categorySection = this.createSettingsCategorySection(
-        category, categories[category], services, serviceDefinitions, preferences, pendingChanges
+        category, categories[category], services, serviceDefinitions, preferences, this.pendingChanges
       );
       settingsContent.appendChild(categorySection);
     }
 
     // Create and append save button
-    const saveButton = this.createSaveButton(settingsContent, services, pendingChanges);
+    const saveButton = this.createSaveButton(settingsContent, services, this.pendingChanges);
     settingsContent.appendChild(saveButton);
   }
 
@@ -489,7 +493,7 @@ export class ExternalServicesManager {
     const settingsHeader = document.createElement("div");
     settingsHeader.className = "settings-header";
     const headerP = document.createElement("p");
-    headerP.textContent = 'Toggle services to show/hide on the dashboard. Drag service cards to reorder them, or use the keyboard: press Enter to activate reorder mode and use arrow keys to move cards. Click "Save Changes" to apply. Services are organized by category.';
+    headerP.textContent = SETTINGS_INSTRUCTION_TEXT;
     settingsHeader.appendChild(headerP);
     settingsContent.appendChild(settingsHeader);
     
@@ -1095,7 +1099,7 @@ export class ExternalServicesManager {
     const serviceCard = document.querySelector(`[data-service-key="${serviceKey}"]`);
     if (!serviceCard) {
       const name = serviceDef && serviceDef.name ? serviceDef.name : serviceKey;
-      console.error(`Card not found for service: ${serviceKey} (${name}). This may occur if the service is disabled in preferences or the DOM has not finished rendering. Status updates for this service will be skipped.`);
+      console.error(`Service card not found: ${name}. Status updates will be skipped.`);
       return null;
     }
     return serviceCard;
@@ -1715,7 +1719,7 @@ export class ExternalServicesManager {
       if (e.name === 'SecurityError') {
         return null;
       }
-      console.warn('Unexpected error while accessing stylesheet rules (non-CORS related). Check for malformed stylesheets or browser compatibility issues:', e);
+      console.warn('Error accessing stylesheet rules:', e);
       return null;
     }
   }
