Updated error modal to follow a journey format

package.json

@@ -114,6 +114,7 @@
         "typescript": "^4.5.5",
         "vue": "2.7.16",
         "vue-jest": "^3.0.0",
+        "vuex": "3.6.2",
         "wallaby-vue-compiler": "^1.0.3"
     },
     "browserslist": [

src/components/modals/ErrorModal.vue

@@ -1,28 +1,37 @@
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import R2Error from "../../model/errors/R2Error";
-
-@Component
-export default class ErrorModal extends Vue {
-    get error(): R2Error | null {
-        return this.$store.state.error.error;
-    }
+<script setup lang="ts">
+import { computed } from 'vue';
+import useStore from '../../store';
 
-    get name() {
-        return this.error ? this.error.name : '';
-    }
+const usedStore = useStore();
 
-    get message() {
-        return this.error ? this.error.message : '';
-    }
+const error = computed(() => {
+    return usedStore.state.error.error;
+});
 
-    get solution() {
-        return this.error ? this.error.solution : '';
-    }
+const stage = computed(() => {
+    return usedStore.state.error.stage;
+})
 
-    close() {
-        this.$store.commit('error/discardError');
-    }
+const name = computed(() => {
+    return error.value ? error.value.name : '';
+});
+
+const message = computed(() => {
+    return error.value ? error.value.message : '';
+});
+
+const solution = computed(() => {
+    return error.value ? error.value.solution : '';
+});
+
+function close() {
+    usedStore.commit('error/discardError');
+}
+
+function progressErrorStage(event: Event) {
+    usedStore.commit('error/progressErrorStage');
+    // Used to unfocus after clicking, otherwise next action appears highlighted.
+    (event.target! as HTMLInputElement).blur();
 }
 </script>
 
@@ -31,13 +40,26 @@ export default class ErrorModal extends Vue {
         <div class="modal-background" @click="close"></div>
         <div class="modal-content">
             <div class="notification is-danger">
-                <h3 class="title">Error</h3>
-                <h5 class="title is-5">{{name}}</h5>
-                <p>{{message}}</p>
-                <div v-if="solution">
-                    <h5 class="title is-5">Suggestion</h5>
-                    <p>{{solution}}</p>
-                </div>
+                <template v-if="stage === 'VIEW_ERROR'">
+                    <h3 class="title">Error</h3>
+                    <h5 class="title is-5">{{name}}</h5>
+                    <p class="inset">{{message}}</p>
+                    <div class="margin-top">
+                        <template v-if="solution">
+                            <button class="button" @click="progressErrorStage">View potential solution</button>
+                        </template>
+                        <template v-else>
+                            <button class="button" @click="close">Close</button>
+                        </template>
+                    </div>
+                </template>
+                <template v-if="stage === 'VIEW_SUGGESTION'">
+                    <h3 class="title">Potential solution</h3>
+                    <p class="inset">{{solution}}</p>
+                    <div class="margin-top">
+                        <button class="button" @click="progressErrorStage">Close</button>
+                    </div>
+                </template>
             </div>
         </div>
         <button class="modal-close is-large" aria-label="close" @click="close"></button>
@@ -48,4 +70,9 @@ export default class ErrorModal extends Vue {
     p + div {
         margin-top: 1.5rem;
     }
+
+    .inset {
+        border-left: 5px solid white;
+        padding: 0.5rem 0.5rem 0.5rem 1.5rem;
+    }
 </style>

src/components/settings-components/SettingsView.vue

@@ -88,7 +88,7 @@ import CdnProvider from '../../providers/generic/connection/CdnProvider';
         };
 
         get localModList(): ManifestV2[] {
-            return this.$store.state.profile.modList;
+            return this.$store.state.profile.modList || [];
         }
 
         get appName(): string {

src/store/modules/ErrorModule.ts

@@ -3,6 +3,7 @@ import LoggerProvider, { LogSeverity } from '../../providers/ror2/logging/Logger
 
 interface State {
     error: R2Error | null;
+    stage: "VIEW_ERROR" | "VIEW_SUGGESTION";
 }
 
 interface ErrorWithLogging {
@@ -16,18 +17,30 @@ export default {
 
     state: (): State => ({
         error: null,
+        stage: "VIEW_ERROR",
     }),
 
     mutations: {
         discardError: function(state: State): void {
             state.error = null;
+            state.stage = "VIEW_ERROR";
+        },
+
+        progressErrorStage: function(state: State): void {
+          if (state.stage === "VIEW_ERROR" && state.error && state.error.solution) {
+              state.stage = "VIEW_SUGGESTION";
+          } else {
+              state.error = null;
+              state.stage = "VIEW_ERROR";
+          }
         },
 
         handleError: function(
             state: State,
             error: R2Error | ErrorWithLogging
         ): void {
             state.error = error instanceof R2Error ? error : error.error;
+            state.stage = "VIEW_ERROR";
 
             if (error instanceof R2Error) {
                 LoggerProvider.instance.Log(LogSeverity.ERROR, `[${error.name}]: ${error.message}`);

yarn.lock

@@ -14549,7 +14549,7 @@ vuedraggable@^2.24.3:
   dependencies:
     sortablejs "1.10.2"
 
-vuex@^3.6.2:
+vuex@3.6.2, vuex@^3.6.2:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
   integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==