Editor stack app bar, expired components enter readonly state

app/assets/javascripts/app/controllers/editor.js

@@ -674,9 +674,14 @@ angular.module('app')
       }
     }});
 
+
     this.reloadComponentContext = function() {
       // componentStack is used by the template to ng-repeat
-      this.componentStack = componentManager.componentsForArea("editor-stack");
+      this.componentStack = componentManager.componentsForArea("editor-stack").sort((a, b) => {
+        // Careful here. For some reason, sorting by updated_at (or any other property that may always be changing)
+        // causes weird problems with ext communication when changing notes or activating/deactivating in quick succession
+        return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
+      });
       /*
       In the past, we were doing this looping code even if the note wasn't currently defined.
       The problem is if an editor stack item loaded first, requested to stream items, and the note was undefined,

app/assets/javascripts/app/directives/views/componentView.js

@@ -149,7 +149,7 @@ class ComponentView {
       $scope.reloading = true;
       let previouslyValid = $scope.componentValid;
 
-      var expired, offlineRestricted, urlError;
+      var offlineRestricted, urlError;
 
       offlineRestricted = component.offlineOnly && !isDesktopApplication();
 
@@ -158,13 +158,19 @@ class ComponentView {
         ||
         (isDesktopApplication() && (!component.local_url && !component.hasValidHostedUrl()))
 
-      expired = component.valid_until && component.valid_until <= new Date();
+      $scope.expired = component.valid_until && component.valid_until <= new Date();
 
-      $scope.componentValid = !offlineRestricted && !urlError && !expired;
+      component.readonly = $scope.expired;
+
+      $scope.componentValid = !offlineRestricted && !urlError;
+
+      if(!$scope.componentValid) {
+        // required to disable overlay
+        $scope.loading = false;
+      }
 
       if(offlineRestricted) $scope.error = 'offline-restricted';
       else if(urlError) $scope.error = 'url-missing';
-      else if(expired) $scope.error = 'expired';
       else $scope.error = null;
 
       if($scope.componentValid !== previouslyValid) {
@@ -174,7 +180,7 @@ class ComponentView {
         }
       }
 
-      if(expired && doManualReload) {
+      if($scope.expired && doManualReload) {
         // Try reloading, handled by footer, which will open Extensions window momentarily to pull in latest data
         // Upon completion, this method, reloadStatus, will be called, upon where doManualReload will be false to prevent recursion.
         $rootScope.$broadcast("reload-ext-data");

app/assets/javascripts/app/directives/views/editorMenu.js

@@ -19,10 +19,6 @@ class EditorMenu {
       return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
     });
 
-    $scope.stack = componentManager.componentsForArea("editor-stack").sort((a, b) => {
-      return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
-    });
-
     $scope.isDesktop = isDesktopApplication();
 
     $scope.defaultEditor = $scope.editors.filter((e) => {return e.isDefaultEditor()})[0];
@@ -77,17 +73,10 @@ class EditorMenu {
 
       if(component == $scope.selectedEditor) {
         return true;
-      } else if(component.area == "editor-stack") {
-        return $scope.stackComponentEnabled(component);
       } else {
         return false;
       }
     }
-
-    $scope.stackComponentEnabled = function(component) {
-      return component.active && !component.isExplicitlyDisabledForItem($scope.currentItem);
-    }
-
   }
 
 }

app/assets/javascripts/app/services/componentManager.js

@@ -313,6 +313,24 @@ class ComponentManager {
       return;
     }
 
+    // Actions that won't succeeed with readonly mode
+    let readwriteActions = [
+      "save-items",
+      "associate-item",
+      "deassociate-item",
+      "create-item",
+      "create-items",
+      "delete-items",
+      "set-component-data"
+    ];
+
+    if(component.readonly && readwriteActions.includes(message.action)) {
+      // A component can be marked readonly if changes should not be saved.
+      // Particullary used for revision preview windows where the notes should not be savable.
+      alert(`The extension ${component.name} is trying to save, but it is in a locked state and cannot accept changes.`);
+      return;
+    }
+
     /**
     Possible Messages:
       set-size
@@ -473,13 +491,6 @@ class ComponentManager {
   }
 
   handleSaveItemsMessage(component, message) {
-    if(component.readonly) {
-      // A component can be marked readonly if changes should not be saved.
-      // Particullary used for revision preview windows where the notes should not be savable.
-      alert(`The extension ${component.name} is trying to save, but it is in a locked state and cannot accept changes.`);
-      return;
-    }
-
     var responseItems = message.data.items;
     var requiredPermissions;