Merge staged 17.6 features fixes into master

untangle-vue-ui/source/package.json

@@ -19,6 +19,7 @@
     "highcharts": "^9.1.2",
     "lodash": "^4.17.21",
     "nanomatch": "^1.2.13",
+    "v-code-diff": "^1.13.1",
     "vee-validate": "^3.4.10",
     "vue": "2.7.16",
     "vue-grid-layout": "^2.3.12",
@@ -28,7 +29,7 @@
     "vuetify": "^2.7.2",
     "vuex": "^3.6.2",
     "vuex-persist": "^3.1.3",
-    "vuntangle": "git+ssh://[email protected]/untangle/vuntangle.git#ngfw-17.5-release"
+    "vuntangle": "untangle/vuntangle"
   },
   "devDependencies": {
     "@sentry/webpack-plugin": "^1.15.1",

untangle-vue-ui/source/src/App.vue

@@ -9,14 +9,16 @@
         $route.name === 'setup'
       "
     />
+    <quarantine-layout v-else-if="$route.meta.layout && $route.meta.layout.name === 'QuarantineLayout'" />
+    <user-api-layout v-else-if="$route.meta.layout && $route.meta.layout.name === 'UserApiLayout'" />
     <default-layout v-else />
   </div>
 </template>
 <script>
-  import { DynamicLayout, DefaultLayout } from '@/layouts'
+  import { DynamicLayout, DefaultLayout, QuarantineLayout, UserApiLayout } from '@/layouts'
 
   export default {
-    components: { DefaultLayout, DynamicLayout },
+    components: { DefaultLayout, DynamicLayout, QuarantineLayout, UserApiLayout },
 
     data() {
       return {
@@ -26,7 +28,7 @@
 
     created() {
       // Use browser-level events to catch iframe destruction
-      // These fire even when ExtJS destroys the iframe abruptly
+      // These fire even when parent app destroys the iframe abruptly
       window.addEventListener('beforeunload', this.handleUnload)
       window.addEventListener('pagehide', this.handleUnload)
     },