fix(layout): adds workaround for layout restoration failure

package.json

@@ -56,7 +56,7 @@
     "vue-class-component": "^7.2.3",
     "vue-color": "^2.7.1",
     "vue-fragment": "^1.5.1",
-    "vue-golden-layout": "^2.0.8",
+    "vue-golden-layout": "^2.1.0",
     "vue-property-decorator": "^8.3.0",
     "vue-smooth-dnd": "^0.8.1",
     "vuex": "^3.1.2",

src/App.vue

@@ -7,6 +7,7 @@
       :showMaximiseIcon="false"
       :state.sync="layoutState"
       @state="updateLayoutState"
+      @creation-error="reset"
       :headerHeight="18"
     >
       <gl-col>
@@ -99,6 +100,8 @@ import ModuleInspector from "@/components/ModuleInspector";
 import InfoView from "@/components/InfoView";
 import Search from "@/components/Search";
 
+import getNextName from "@/application/utils/get-next-name";
+import constants from "@/application/constants";
 import * as GoldenLayout from "golden-layout";
 
 export default {
@@ -156,7 +159,18 @@ export default {
   },
 
   created() {
-    const layoutState = window.localStorage.getItem("layoutState");
+    const layoutErroredLastLoad = window.localStorage.getItem(
+      constants.LAYOUT_LOAD_ERROR_KEY
+    );
+
+    if (layoutErroredLastLoad) {
+      console.warn(
+        "Layout could not be restored. Default layout loaded and old layout was saved to a backup local storage key"
+      );
+      window.localStorage.removeItem(constants.LAYOUT_LOAD_ERROR_KEY);
+    }
+
+    const layoutState = window.localStorage.getItem(constants.LAYOUT_STATE_KEY);
     if (layoutState) {
       this.layoutState = JSON.parse(layoutState);
     }
@@ -306,7 +320,7 @@ export default {
     /**
      * @description Called when <golden-layout /> updates its state.
      * Unminifies config, purges dynamically added panels, minifies and saves to
-     * localStorage key "layoutState".
+     * localStorage key `constants.LAYOUT_STATE_KEY`.
      *
      * @param {GoldenLayout config} value
      */
@@ -315,9 +329,29 @@ export default {
       const cleanedConfig = this.purgeDynamicPanels(config);
 
       window.localStorage.setItem(
-        "layoutState",
+        constants.LAYOUT_STATE_KEY,
         JSON.stringify(GoldenLayout.minifyConfig(cleanedConfig))
       );
+    },
+
+    async reset() {
+      console.log("golden layout creation error");
+      const localStorageKeys = Object.keys(window.localStorage);
+
+      const nextKey = await getNextName(
+        constants.LAYOUT_STATE_KEY,
+        localStorageKeys
+      );
+      window.localStorage.setItem(nextKey, JSON.stringify(this.layoutState));
+
+      window.localStorage.removeItem(constants.LAYOUT_STATE_KEY);
+
+      window.localStorage.setItem(
+        constants.LAYOUT_LOAD_ERROR_KEY,
+        JSON.stringify(true)
+      );
+
+      window.location.reload();
     }
   },
 

src/application/constants.js

@@ -1,5 +1,13 @@
 export default {
   get GALLERY_GROUP_NAME() {
     return "modV internal Gallery Group";
+  },
+
+  get LAYOUT_STATE_KEY() {
+    return "layoutState";
+  },
+
+  get LAYOUT_LOAD_ERROR() {
+    return "layoutLoadError";
   }
 };

yarn.lock

@@ -12386,10 +12386,10 @@ vue-fragment@^1.5.1:
   resolved "https://registry.yarnpkg.com/vue-fragment/-/vue-fragment-1.5.1.tgz#44c070d55ed1e9a6c698ef57a5c83f64bb06feeb"
   integrity sha512-ig6eES6TcMBbANW71ylB+AJgRN+Zksb3f50AxjGpAk6hMzqmeuD80qeh4LJP0jVw2dMBMjgRUfIkrvxygoRgtQ==
 
-vue-golden-layout@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/vue-golden-layout/-/vue-golden-layout-2.0.8.tgz#3e2ca299cbc119f6e3af94d6499fa62148b6fb3f"
-  integrity sha512-kxQrX8VHtFG9rO+v4rPlpSebMzjhJX8WvuPDG0fHjjnK2wCDdDAjs7ifoSPZl0rdY0g/I7vbjnvKLSyS8RDf/w==
+vue-golden-layout@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/vue-golden-layout/-/vue-golden-layout-2.1.0.tgz#a3b8f1a976a5d3916ec95da5cdddbfdeda010246"
+  integrity sha512-bRUKSPfG/QpmWvB8wIl+ns/4G3reB1aP5qKh8rF7AkUYrqA/CJHrfL9/IE6Zd6lWWCm7rk5gHNSLVeVatQ/P4g==
   dependencies:
     jquery "^3.5.0"
     vue-resize-directive "^1.2.0"