fix(settings): use proper component structure to make navigation work

apps/settings/src/main-settings.ts

@@ -5,9 +5,9 @@
 
 import { getCSPNonce } from '@nextcloud/auth'
 import Vue from 'vue'
-import SettingsNavigation from './views/SettingsNavigation.vue'
+import SettingsApp from './views/SettingsApp.vue'
 
 __webpack_nonce__ = getCSPNonce()
 
-const app = new Vue(SettingsNavigation)
-app.$mount('#app-navigation')
+const app = new Vue(SettingsApp)
+app.$mount('#settings-app')

apps/settings/src/main-users-management.ts

@@ -12,7 +12,7 @@ import VTooltipPlugin from 'v-tooltip'
 import Vue from 'vue'
 import Vuex from 'vuex'
 import { sync } from 'vuex-router-sync'
-import SettingsApp from './views/SettingsApp.vue'
+import UserManagement from './views/UserManagement.vue'
 import router from './router/index.ts'
 import { useStore } from './store/index.js'
 
@@ -37,10 +37,10 @@ const pinia = createPinia()
 // Migrate legacy local storage settings to the database
 store.dispatch('migrateLocalStorage')
 
-export default new Vue({
+const App = Vue.extend(UserManagement)
+const app = new App({
 	router,
 	store,
 	pinia,
-	render: (h) => h(SettingsApp),
-	el: '#content',
 })
+app.$mount('#content')

apps/settings/src/router/routes.ts

@@ -1,21 +1,14 @@
-/**
+/*
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
 import type { RouteConfig } from 'vue-router'
 
-const UserManagement = () => import(/* webpackChunkName: 'settings-users' */'../views/UserManagement.vue')
-const UserManagementNavigation = () => import(/* webpackChunkName: 'settings-users' */'../views/UserManagementNavigation.vue')
-
 const routes: RouteConfig[] = [
 	{
  name: 'users',
  path: '/:index(index.php/)?settings/users',
- components: {
- default: UserManagement,
- navigation: UserManagementNavigation,
- },
  props: true,
  children: [
  {

apps/settings/src/views/SettingsApp.vue

@@ -4,13 +4,22 @@
 -->
 
 <template>
-	<NcContent app-name="settings">
- <router-view name="navigation" />
- <router-view />
- <router-view name="sidebar" />
+	<NcContent :class="$style.settingsApp" appName="settings">
+ <SettingsNavigation />
+ <SettingsContentWrapper />
 	</NcContent>
 </template>
 
 <script setup lang="ts">
 import NcContent from '@nextcloud/vue/components/NcContent'
+import SettingsContentWrapper from './SettingsContentWrapper.vue'
+import SettingsNavigation from './SettingsNavigation.vue'
 </script>
+
+<style module>
+:global(#content):has(.settingsApp) {
+	margin: 0;
+	width: 100%;
+	height: 100%;
+}
+</style>

apps/settings/src/views/SettingsContentWrapper.vue

@@ -0,0 +1,22 @@
+<!--
+ - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<NcAppContent>
+ <div ref="contentMain" />
+	</NcAppContent>
+</template>
+
+<script setup lang="ts">
+import { NcAppContent } from '@nextcloud/vue'
+import { onMounted, ref } from 'vue'
+
+const contentMain = ref<HTMLDivElement>()
+onMounted(() => {
+	const realElement = document.getElementById('original-settings-content')!
+	contentMain.value!.replaceChildren(...realElement.childNodes)
+	realElement.parentNode!.removeChild(realElement)
+})
+</script>

apps/settings/src/views/UserManagement.vue

@@ -4,26 +4,33 @@
 -->
 
 <template>
-	<NcAppContent :page-heading="pageHeading">
- <UserList
- :selected-group="selectedGroupDecoded"
- :external-actions="externalActions" />
-	</NcAppContent>
+	<NcContent app-name="settings">
+ <UserManagementNavigation />
+ <NcAppContent :page-heading="pageHeading">
+ <UserList
+ :selected-group="selectedGroupDecoded"
+ :external-actions="externalActions" />
+ </NcAppContent>
+	</NcContent>
 </template>
 
 <script>
 import { emit } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
 import { defineComponent } from 'vue'
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
+import NcContent from '@nextcloud/vue/components/NcContent'
 import UserList from '../components/UserList.vue'
+import UserManagementNavigation from './UserManagementNavigation.vue'
 
 export default defineComponent({
 	name: 'UserManagement',
 
 	components: {
+ NcContent,
  NcAppContent,
  UserList,
+ UserManagementNavigation,
 	},
 
 	data() {

apps/settings/templates/settings/frame.php

@@ -7,7 +7,7 @@
 style('settings', 'settings');
 ?>
 
-<div id="app-navigation"></div>
-<main id="app-content" <?php if (!empty($_['activeSectionId'])) { ?> data-active-section-id="<?php print_unescaped($_['activeSectionId']) ?>" <?php } if (!empty($_['activeSectionType'])) { ?> data-active-section-type="<?php print_unescaped($_['activeSectionType']) ?>" <?php } ?>>
+<div id="settings-app"></div>
+<div class="hidden-visually" id="original-settings-content" <?php if (!empty($_['activeSectionId'])) { ?> data-active-section-id="<?php print_unescaped($_['activeSectionId']) ?>" <?php } if (!empty($_['activeSectionType'])) { ?> data-active-section-type="<?php print_unescaped($_['activeSectionType']) ?>" <?php } ?>>
 	<?php print_unescaped($_['content']); ?>
-</main>
+</div>

cypress.config.ts

@@ -8,7 +8,7 @@ import { configureNextcloud, docker, getContainer, getContainerName, runExec, ru
 import { defineConfig } from 'cypress'
 import cypressSplit from 'cypress-split'
 import vitePreprocessor from 'cypress-vite'
-import { existsSync, rmdirSync } from 'node:fs'
+import { existsSync, rmSync } from 'node:fs'
 import { dirname, join, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { nodePolyfills } from 'vite-plugin-node-polyfills'
@@ -27,7 +27,7 @@ export default defineConfig({
 
 	// Tries again when in run mode (cypress run) e.g. on CI
 	retries: {
- runMode: 3,
+ runMode: 5,
  // do not retry in `cypress open`
  openMode: 0,
 	},
@@ -82,11 +82,11 @@ export default defineConfig({
  deleteFolder(path: string) {
  try {
  if (existsSync(path)) {
-rmdirSync(path, { maxRetries: 10, recursive: true })
+rmSync(path, { maxRetries: 10, recursive: true })
  }
  return null
  } catch (error) {
- throw Error(`Error while deleting ${path}. Original error: ${error}`)
+ throw Error(`Error while deleting ${path}. Original error: ${error}`, { cause: error })
  }
  },
  })