fix: upon extension error, loading spinner should be removed (#461)

* fix: upon extension error, loading spinner should be removed

* feat: show a message when an extension fails to load actions

* fix: extension state data structure

* fix: initialize extensions state

Co-authored-by: Johnny Almonte <johnny243@users.noreply.github.com>

app/assets/javascripts/directives/views/actionsMenu.ts

@@ -24,10 +24,15 @@ type UpdateActionParams = {
   subrows?: ActionSubRow[]
 }
 
+type ExtensionState = {
+  hidden: boolean
+  loading: boolean
+  error: boolean
+}
+
 type ActionsMenuState = {
-  extensions: SNActionsExtension[],
+  extensions: SNActionsExtension[]
-  hiddenState: Record<UuidString, Boolean>
+  extensionsState: Record<UuidString, ExtensionState>
-  loadingState: Record<UuidString, Boolean>
 }
 
 class ActionsMenuCtrl extends PureViewCtrl<{}, ActionsMenuState> implements ActionsMenuScope {
@@ -54,10 +59,17 @@ class ActionsMenuCtrl extends PureViewCtrl<{}, ActionsMenuState> implements Acti
     const extensions = this.application.actionsManager!.getExtensions().sort((a, b) => {
       return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
     });
+    let extensionsState: Record<UuidString, ExtensionState> = {};
+    extensions.map((extension) => {
+      extensionsState[extension.uuid] = {
+        loading: false,
+        error: false,
+        hidden: false
+      };
+    });
     return {
       extensions,
-      loadingState: {},
+      extensionsState
-      hiddenState: {}
     };
   }
 
@@ -68,7 +80,11 @@ class ActionsMenuCtrl extends PureViewCtrl<{}, ActionsMenuState> implements Acti
         extension,
         this.item
       );
-      await this.updateExtension(updatedExtension!);
+      if (updatedExtension) {
+        await this.updateExtension(updatedExtension!);
+      } else {
+        await this.setErrorExtension(extension.uuid, true);
+      }
       await this.setLoadingExtension(extension.uuid, false);
     }));
   }
@@ -178,29 +194,42 @@ class ActionsMenuCtrl extends PureViewCtrl<{}, ActionsMenuState> implements Acti
   }
 
   private async toggleExtensionVisibility(extensionUuid: UuidString) {
-    const { hiddenState } = this.state;
+    const { extensionsState } = this.state;
-    hiddenState[extensionUuid] = !hiddenState[extensionUuid] ?? false;
+    extensionsState[extensionUuid].hidden = !extensionsState[extensionUuid].hidden;
     await this.setState({
-      hiddenState
+      extensionsState
     });
   }
 
   private isExtensionVisible(extensionUuid: UuidString) {
-    const { hiddenState } = this.state;
+    const { extensionsState } = this.state;
-    return hiddenState[extensionUuid] ?? false;
+    return extensionsState[extensionUuid].hidden;
   }
 
   private async setLoadingExtension(extensionUuid: UuidString, value = false) {
-    const { loadingState } = this.state;
+    const { extensionsState } = this.state;
-    loadingState[extensionUuid] = value;
+    extensionsState[extensionUuid].loading = value;
     await this.setState({
-      loadingState
+      extensionsState
     });
   }
 
   private isExtensionLoading(extensionUuid: UuidString) {
-    const { loadingState } = this.state;
+    const { extensionsState } = this.state;
-    return loadingState[extensionUuid] ?? false;
+    return extensionsState[extensionUuid].loading;
+  }
+
+  private async setErrorExtension(extensionUuid: UuidString, value = false) {
+    const { extensionsState } = this.state;
+    extensionsState[extensionUuid].error = value;
+    await this.setState({
+      extensionsState
+    });
+  }
+
+  private extensionHasError(extensionUuid: UuidString) {
+    const { extensionsState } = this.state;
+    return extensionsState[extensionUuid].error;
   }
 }
 

app/assets/templates/directives/actions-menu.pug

@@ -19,7 +19,7 @@
       menu-row(
         action='self.executeAction(action, extension)', 
         label='action.label', 
-        ng-if='!self.isExtensionVisible(extension.uuid) && !self.isExtensionLoading(extension.uuid)', 
+        ng-if='!self.isExtensionVisible(extension.uuid) && !self.isExtensionLoading(extension.uuid) && !self.extensionHasError(extension.uuid)', 
         ng-repeat='action in extension.actionsWithContextForItem(self.item) track by $index', 
         disabled='action.running'
         spinner-class="action.running ? 'info' : null", 
@@ -35,3 +35,9 @@
         label="'No Actions Available'", 
         ng-if='extension.actionsWithContextForItem(self.item).length == 0'
         )
+      menu-row(
+        faded='true', 
+        label="'Error loading actions'", 
+        subtitle="'Please try again later.'"
+        ng-if='self.extensionHasError(extension.uuid)'
+        )