Move navItems into a store module

changelog/unreleased/dynamic-nav-items

@@ -0,0 +1,9 @@
+Enhancement: Dynamically loaded nav items
+
+We have moved the navItems from application configuration into a store module. We extended it's functionality
+by introducing statically and dynamically loaded navItems. This way navItems can be loaded based on extension
+data, as soon as the extension becomes active. Please note that at having least one static navItem (coming
+from the appInfo object of an extension) is still a requirement for the extension appearing in the app switcher.
+
+https://github.com/owncloud/phoenix/issues/3497
+https://github.com/owncloud/phoenix/pull/3570

src/Phoenix.vue

@@ -91,7 +91,9 @@ export default {
       'activeMessages',
       'capabilities',
       'apps',
-      'getSettingsValueByIdentifier'
+      'getSettingsValueByIdentifier',
+      'getNavItems',
+      'getExtensionsWithNavItems'
     ]),
     $_applicationsList() {
       const list = []
@@ -100,10 +102,9 @@ export default {
       list.push(this.configuration.applications)
 
       // Get extensions which have at least one nav item
-      const navItems = this.$root.navItems
-      for (const extensionId in navItems) {
+      this.getExtensionsWithNavItems.forEach(extensionId => {
         list.push(this.apps[extensionId])
-      }
+      })
 
       return list.flat()
     },
@@ -128,9 +129,7 @@ export default {
         return []
       }
 
-      // FIXME: use store or other ways, not $root
-      const items = this.$root.navItems[this.currentExtension]
-
+      const items = this.getNavItems(this.currentExtension)
       if (!items) {
         return []
       }

src/phoenix.js

@@ -89,7 +89,6 @@ const supportedLanguages = {
 
 function loadApps () {
   let plugins = []
-  let navItems = {}
   let translations = coreTranslations
 
   let routes = [{
@@ -127,7 +126,10 @@ function loadApps () {
       plugins.push(app.plugins)
     }
     if (app.navItems) {
-      navItems[app.appInfo.id] = app.navItems
+      store.commit('SET_NAV_ITEMS_FROM_CONFIG', {
+        extension: app.appInfo.id,
+        navItems: app.navItems
+      })
     }
     if (app.translations) {
       Object.keys(supportedLanguages).forEach((lang) => {
@@ -166,8 +168,7 @@ function loadApps () {
     el: '#owncloud',
     data: {
       config: config,
-      plugins: plugins.flat(),
-      navItems: navItems
+      plugins: plugins.flat()
     },
     store,
     router,

src/store/index.js

@@ -11,6 +11,7 @@ import user from './user'
 import router from './router'
 import settings from './settings'
 import modal from './modal'
+import navigation from './navigation'
 
 Vue.use(Vuex)
 
@@ -27,9 +28,6 @@ const vuexPersistInSession = new VuexPersistence({
 const strict = process.env.NODE_ENV === 'development'
 
 export const Store = new Vuex.Store({
-  // state: {
-  //   someModulelessState: 0
-  // },
   plugins: [vuexPersistInSession.plugin],
   modules: {
     app,
@@ -38,7 +36,8 @@ export const Store = new Vuex.Store({
     config,
     router,
     settings,
-    modal
+    modal,
+    navigation
   },
   strict
 })

src/store/navigation.js

@@ -0,0 +1,83 @@
+const state = {
+  // static nav items are set during extension loading and will not be modified later on
+  staticNavItems: {},
+  // dynamic nav items are initially empty and can be created e.g. from loaded data
+  dynamicNavItems: {}
+}
+
+const mutations = {
+  /**
+   * Sets the nav items that are statically provided through extension configuration,
+   * i.e. the appInfo json.
+   *
+   * @param state
+   * @param extension
+   * @param navItems
+   * @constructor
+   */
+  SET_NAV_ITEMS_FROM_CONFIG(state, { extension, navItems }) {
+    const staticNavItems = state.staticNavItems
+    staticNavItems[extension] = navItems
+    state.staticNavItems = staticNavItems
+  },
+  /**
+   * Use this mutation to dynamically add nav items after initialization phase, e.g. from loaded
+   * data. If there already is a nav item with the same name, that one will be replaced.
+   *
+   * @param state
+   * @param extension
+   * @param navItem
+   * @constructor
+   */
+  ADD_NAV_ITEM(state, { extension, navItem }) {
+    const dynamicNavItems = state.dynamicNavItems
+    dynamicNavItems[extension] = dynamicNavItems[extension] || []
+    const index = dynamicNavItems[extension].findIndex(item => item.name === navItem.name)
+    if (index >= 0) {
+      dynamicNavItems[extension][index] = navItem
+    } else {
+      dynamicNavItems[extension].push(navItem)
+    }
+    state.dynamicNavItems = dynamicNavItems
+  }
+}
+
+const getters = {
+  /**
+   * Get all nav items that are associated with the given extension id.
+   *
+   * @param state
+   * @returns {function(*): *[]}
+   */
+  getNavItems: state => extension => {
+    const staticNavItems = state.staticNavItems[extension] || []
+    const dynamicNavItems = state.dynamicNavItems[extension] || []
+    return [...staticNavItems, ...dynamicNavItems]
+  },
+  /**
+   * Get all extension ids that have at least one navigation item.
+   *
+   * @param state
+   * @returns {*[]}
+   */
+  getExtensionsWithNavItems: state => {
+    // get a unique list of extension ids by collecting the ids in a set and then spreading them into an array.
+    const extensions = [
+      ...new Set([...Object.keys(state.staticNavItems), ...Object.keys(state.dynamicNavItems)])
+    ]
+    // return only those extension ids that really have at least one nav item.
+    // Context: NavItems can be removed, so the map key could still exist with an empty array of nav items.
+    return extensions.filter(extension => {
+      return (
+        (state.staticNavItems[extension] || []).length > 0 ||
+        (state.dynamicNavItems[extension] || []).length > 0
+      )
+    })
+  }
+}
+
+export default {
+  state,
+  mutations,
+  getters
+}