tests(Cypress): add tests for Application navigation display

cypress/e2e/context-navigation.cy.js

@@ -0,0 +1,89 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+let localUser
+let nonLocalUser
+let contextTitlePrefix = 'test application'
+let contextTitle = contextTitlePrefix
+let testNumber = 0
+
+describe('Test context navigation', () => {
+    before(function () {
+        cy.createRandomUser().then(user => {
+            localUser = user
+        })
+
+        cy.createRandomUser().then(user => {
+            nonLocalUser = user
+        })
+    })
+
+    beforeEach(function () {
+        testNumber += 1
+        contextTitle = contextTitlePrefix + ' ' + testNumber
+        cy.login(localUser)
+        cy.visit('apps/tables')
+        cy.wait(1000)
+    })
+
+    it('Create context that is hidden in nav by default', () => {
+        cy.createContext(contextTitle, false)
+        cy.visit('apps/tables')
+
+        // Confirming that the context is not shown in the navigation for the owner
+        cy.get(`#header .app-menu-entry [title="${contextTitle}"]`).should('not.exist')
+
+        cy.loadContext(contextTitle)
+        cy.wait(1000)
+        cy.openContextEditModal(contextTitle)
+        cy.get('[data-cy="contextResourceShare"] input').clear().type(nonLocalUser.userId)
+        cy.get(`.vs__dropdown-menu [id="${nonLocalUser.userId}"]`).click()
+        cy.get('[data-cy="contextResourceShare"] span').contains(nonLocalUser.userId).should('exist')
+        cy.get('[data-cy="editContextSubmitBtn"]').click()
+
+        // Confirming that the context is still not shown by default
+        // in the navigation for the shared user
+        cy.login(nonLocalUser)
+        cy.visit('apps/tables')
+        cy.get(`#header .app-menu-entry [title="${contextTitle}"]`).should('not.exist')
+
+        // Showing the context in nav for the shared user
+        cy.loadContext(contextTitle)
+        cy.get('[data-cy="navigationContextItem"]').contains(`${contextTitle}"`).find('button').click({ force: true })
+        cy.get('[data-cy="navigationContextShowInNavSwitch"]').should('not.be.checked')
+        cy.get('[data-cy="navigationContextShowInNavSwitch"]').click()
+        cy.get('[data-cy="navigationContextShowInNavSwitch"]').should('be.checked')
+        cy.get(`#header .app-menu-entry [title="${contextTitle}"]`).should('exist')
+    })
+
+    it('Create context that shows in nav by default', () => {
+        cy.createContext(contextTitle, true)
+        cy.visit('apps/tables')
+
+        // Confirming that the context is shown in the navigation for the owner
+        cy.get(`#header .app-menu-entry [title="${contextTitle}"]`).should('exist')
+
+        cy.loadContext(contextTitle)
+        cy.wait(1000)
+        cy.openContextEditModal(contextTitle)
+        cy.get('[data-cy="contextResourceShare"] input').clear().type(nonLocalUser.userId)
+        cy.get(`.vs__dropdown-menu [id="${nonLocalUser.userId}"]`).click()
+        cy.get('[data-cy="contextResourceShare"] span').contains(nonLocalUser.userId).should('exist')
+        cy.get('[data-cy="editContextSubmitBtn"]').click()
+
+        // Hiding the context from nav for the current user
+        cy.get('[data-cy="navigationContextItem"]').contains(`${contextTitle}"`).find('button').click({ force: true })
+        cy.get('[data-cy="navigationContextShowInNavSwitch"]').should('be.checked')
+        cy.get('[data-cy="navigationContextShowInNavSwitch"]').click()
+        cy.get('[data-cy="navigationContextShowInNavSwitch"]').should('not.be.checked')
+        cy.get(`#header .app-menu-entry [title="${contextTitle}"]`).should('not.exist')
+
+        // Confirming that the context is still shown by default
+        // in the navigation for the shared user
+        cy.login(nonLocalUser)
+        cy.visit('apps/tables')
+        cy.get(`#header .app-menu-entry [title="${contextTitle}"]`).should('exist')
+    })
+})

cypress/support/commands.js

@@ -110,10 +110,13 @@ Cypress.Commands.add('openCreateColumnModal', (isFirstColumn) => {
 	}
 })
 
-Cypress.Commands.add('createContext', (title) => {
+Cypress.Commands.add('createContext', (title, showInNav = false) => {
 	cy.get('ul:nth-of-type(2) [data-cy="createContextIcon"]').click({ force: true })
 	cy.get('[data-cy="createContextModal"]').should('be.visible')
 	cy.get('[data-cy="createContextTitle"]').clear().type(title)
+	if (showInNav) {
+		cy.get('[data-cy="createContextShowInNavSwitch"]').click()
+	}
 	cy.get('[data-cy="createContextSubmitBtn"]').click()
 
 	// verify context was created properly

package.json

@@ -45,11 +45,11 @@
     "@tiptap/vue-2": "^2.11.0",
     "@vueuse/core": "^11.3.0",
     "debounce": "^2.2.0",
+    "pinia": "^2.3.0",
     "vue": "^2.7.16",
     "vue-material-design-icons": "^5.3.1",
     "vue-papa-parse": "^3.1.0",
-    "vue-router": "^3.6.5",
-    "vuex": "^3.6.2"
+    "vue-router": "^3.6.5"
   },
   "browserslist": [
     "extends @nextcloud/browserslist-config"

renovate.json

@@ -48,10 +48,6 @@
 			"matchPackageNames": ["vue"],
 			"allowedVersions": "<3"
 		},
-		{
-			"matchPackageNames": ["vuex"],
-			"allowedVersions": "<4"
-		},
 		{
 			"matchPackageNames": ["vue-router"],
 			"allowedVersions": "<4"

src/App.vue

@@ -17,10 +17,11 @@
 <script>
 import { NcContent, NcAppContent } from '@nextcloud/vue'
 import Navigation from './modules/navigation/sections/Navigation.vue'
-import { mapGetters } from 'vuex'
+import { mapState, mapActions } from 'pinia'
 import Sidebar from './modules/sidebar/sections/Sidebar.vue'
 import { useResizeObserver } from '@vueuse/core'
 import { loadState } from '@nextcloud/initial-state'
+import { useTablesStore } from './store/store.js'
 
 export default {
 	name: 'App',
@@ -43,22 +44,24 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters(['isLoadingSomething']),
+		...mapState(useTablesStore, ['isLoadingSomething']),
 	},
 	watch: {
 		'$route'(to, from) {
 			this.routing(to)
 		},
 	},
 	async created() {
-		await this.$store.dispatch('loadTablesFromBE')
-		await this.$store.dispatch('getAllContexts')
-		await this.$store.dispatch('loadViewsSharedWithMeFromBE')
-		await this.$store.dispatch('loadTemplatesFromBE')
+		const store = useTablesStore()
+		await store.loadTablesFromBE()
+		await store.getAllContexts()
+		await store.loadViewsSharedWithMeFromBE()
+		await store.loadTemplatesFromBE()
 		this.routing(this.$router.currentRoute)
 		this.observeAppContent()
 	},
 	methods: {
+		...mapActions(useTablesStore, ['loadTablesFromBE', 'getAllContexts', 'loadViewsSharedWithMeFromBE', 'loadTemplatesFromBE', 'setActiveRowId', 'setActiveTableId', 'setActiveViewId', 'setActiveContextId']),
 		routing(currentRoute) {
 			try {
 				if (loadState('tables', 'contextId', undefined)) {
@@ -74,28 +77,28 @@ export default {
 			}
 
 			if (currentRoute.name === 'tableRow' || currentRoute.name === 'viewRow') {
-				this.$store.commit('setActiveRowId', parseInt(currentRoute.params.rowId))
+				this.setActiveRowId(parseInt(currentRoute.params.rowId))
 			} else {
-				this.$store.commit('setActiveRowId', null)
+				this.setActiveRowId(null)
 			}
 			if (currentRoute.path.startsWith('/table/')) {
-				this.$store.commit('setActiveTableId', parseInt(currentRoute.params.tableId))
-				this.setPageTitle(this.$store.getters.activeTable.title)
+				this.setActiveTableId(parseInt(currentRoute.params.tableId))
+				this.setPageTitle(this.activeTable.title)
 				if (!currentRoute.path.includes('/row/')) {
 					this.switchActiveMenuEntry(document.querySelector('header .header-left .app-menu a[title="Tables"]'))
 				}
 			} else if (currentRoute.path.startsWith('/view/')) {
-				this.$store.commit('setActiveViewId', parseInt(currentRoute.params.viewId))
-				this.setPageTitle(this.$store.getters.activeView.title)
+				this.setActiveViewId(parseInt(currentRoute.params.viewId))
+				this.setPageTitle(this.activeView.title)
 				if (!currentRoute.path.includes('/row/')) {
 					this.switchActiveMenuEntry(document.querySelector('header .header-left .app-menu a[title="Tables"]'))
 				}
 			} else if (currentRoute.path.startsWith('/application/')) {
 				const contextId = parseInt(currentRoute.params.contextId)
-				this.$store.commit('setActiveContextId', contextId)
-				this.setPageTitle(this.$store.getters.activeContext.name)
+				this.setActiveContextId(contextId)
+				this.setPageTitle(this.activeContext.name)
 				// This breaks if there are multiple contexts with the same name or another app has the same name. We need a better way to identify the correct element.
-				this.switchActiveMenuEntry(document.querySelector(`header .header-left .app-menu [title="${this.$store.getters.activeContext.name}"]`))
+				this.switchActiveMenuEntry(document.querySelector(`header .header-left .app-menu [title="${this.activeContext.name}"]`))
 
 				// move the focus away from nav bar (import for app-internal switch)
 				const appContent = document.getElementById('app-content-vue')

src/main.js

@@ -3,24 +3,25 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import { generateFilePath } from '@nextcloud/router'
+import { createPinia, PiniaVuePlugin } from 'pinia'
 import Vue from 'vue'
 import App from './App.vue'
-import Vuex from 'vuex'
-import store from './store/store.js'
 import router from './router.js'
 import VuePapaParse from 'vue-papa-parse'
+import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 
 __webpack_nonce__ = btoa(OC.requestToken) // eslint-disable-line
 // eslint-disable-next-line
 __webpack_public_path__ = generateFilePath('tables', '', 'js/')
 
 Vue.mixin({ methods: { t, n } })
-Vue.use(Vuex)
+Vue.use(PiniaVuePlugin)
+const pinia = createPinia()
 Vue.use(VuePapaParse)
 
 export default new Vue({
 	el: '#content',
 	router,
-	store,
+	pinia,
 	render: h => h(App),
 })