Show 404 page for non-existent routes

openc3-cosmos-init/plugins/packages/openc3-tool-base/src/router.js

@@ -21,7 +21,7 @@
 */
 
 import { createRouter, createWebHistory } from 'vue-router'
-import { Empty } from '@openc3/vue-common/components'
+import { NotFound } from '@openc3/vue-common/components'
 import { Login } from '@openc3/vue-common/tools/base'
 
 export default createRouter({
@@ -33,10 +33,9 @@ export default createRouter({
       component: Login,
     },
     {
-      // Empty component for all other routes to avoid VueRouter warnings, since all other routes are handled by single-spa
       path: '/:pathMatch(.*)*',
       name: '',
-      component: Empty,
+      component: NotFound,
     },
   ],
 })

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/NotFound.vue

@@ -1,5 +1,5 @@
 <!--
-# Copyright 2023 OpenC3, Inc.
+# Copyright 2024 OpenC3, Inc.
 # All Rights Reserved.
 #
 # This program is free software; you can modify and/or redistribute it
@@ -17,11 +17,47 @@
 -->
 
 <template>
-  <v-card>
-    <v-card-title>404 Not Found Error</v-card-title>
-    <v-card-text
-      >The requested URL <code>{{ $route.fullPath }}</code> was not
-      routable.</v-card-text
-    >
+  <v-card v-if="show">
+    <v-card-title> 404 Not Found </v-card-title>
+    <v-card-text class="d-flex align-center mt-3">
+      The requested URL
+      <code class="mx-1"> {{ $route.fullPath }} </code>
+      was not routable.
+      <span class="text-h3 mx-1"> 🦄 </span>
+    </v-card-text>
   </v-card>
 </template>
+
+<script>
+import { getMountedApps } from 'single-spa'
+
+const SINGLE_SPA_APP_CHANGE_EVENT = 'single-spa:app-change'
+
+// This component is actually always loaded for every route other than /login
+// because of the catch-all path in tool-base's router, so we need logic to
+// hide it when a tool is loaded.
+export default {
+  data() {
+    return {
+      show: false,
+    }
+  },
+  created() {
+    window.addEventListener(SINGLE_SPA_APP_CHANGE_EVENT, this.handleAppChange)
+  },
+  mounted() {
+    // Give single-spa some time to get an app mounted to avoid flashing this
+    setTimeout(() => {
+      this.show = getMountedApps().length === 0
+    }, 150)
+  },
+  unmounted() {
+    window.removeEventListener(SINGLE_SPA_APP_CHANGE_EVENT, this.handleAppChange)
+  },
+  methods: {
+    handleAppChange: function (event) {
+      this.show = !event.detail.appsByNewStatus.MOUNTED
+    },
+  },
+}
+</script>

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/index.js

@@ -23,7 +23,6 @@ import CriticalCmdDialog from './CriticalCmdDialog.vue'
 import { DataViewerComponent, DataViewerHistoryComponent } from './dataviewer'
 import DetailsDialog from './DetailsDialog.vue'
 import EditScreenDialog from './EditScreenDialog.vue'
-import Empty from './Empty.vue'
 import EnvironmentChooser from './EnvironmentChooser.vue'
 import EnvironmentDialog from './EnvironmentDialog.vue'
 import FileOpenSaveDialog from './FileOpenSaveDialog.vue'
@@ -52,7 +51,6 @@ export {
   DataViewerHistoryComponent,
   DetailsDialog,
   EditScreenDialog,
-  Empty,
   EnvironmentChooser,
   EnvironmentDialog,
   FileOpenSaveDialog,