UI: Add central project store and watch functionality (#7900)

Added a new getter 'allProjects' and mutation 'RELOAD_ALL_PROJECTS' to centralize the tracking of available projects in the state.
This eliminates direct manipulation of the Project list in separate components and improves data consistency across the application.
A watcher in ProjectMenu.vue has been implemented to handle changes to the 'allProjects' getter.
The 'RELOAD_ALL_PROJECTS' mutation was also added where necessary to ensure projects list is updated in the state whenever changes occur.

Author: Charles Queiroz

ui/src/components/header/ProjectMenu.vue

@@ -102,9 +102,8 @@ export default {
             getNextPage()
           }
         }).finally(() => {
-          this.projects = _.orderBy(projects, ['displaytext'], ['asc'])
-          this.projects.unshift({ name: this.$t('label.default.view') })
           this.loading = false
+          this.$store.commit('RELOAD_ALL_PROJECTS', projects)
         })
       }
       getNextPage()
@@ -125,6 +124,17 @@ export default {
     filterProject (input, option) {
       return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
     }
+  },
+  mounted () {
+    this.$store.watch(
+      (state, getters) => getters.allProjects,
+      (newValue, oldValue) => {
+        if (oldValue !== newValue && newValue !== undefined) {
+          this.projects = _.orderBy(newValue, ['displaytext'], ['asc'])
+          this.projects.unshift({ name: this.$t('label.default.view') })
+        }
+      }
+    )
   }
 }
 </script>

ui/src/store/getters.js

@@ -47,7 +47,8 @@ const getters = {
   twoFaEnabled: state => state.user.twoFaEnabled,
   twoFaProvider: state => state.user.twoFaProvider,
   twoFaIssuer: state => state.user.twoFaIssuer,
-  loginFlag: state => state.user.loginFlag
+  loginFlag: state => state.user.loginFlag,
+  allProjects: (state) => state.app.allProjects
 }
 
 export default getters

ui/src/store/modules/app.js

@@ -30,7 +30,8 @@ import {
   USE_BROWSER_TIMEZONE,
   SERVER_MANAGER,
   VUE_VERSION,
-  CUSTOM_COLUMNS
+  CUSTOM_COLUMNS,
+  RELOAD_ALL_PROJECTS
 } from '@/store/mutation-types'
 
 const app = {
@@ -50,7 +51,8 @@ const app = {
     metrics: false,
     listAllProjects: false,
     server: '',
-    vueVersion: ''
+    vueVersion: '',
+    allProjects: []
   },
   mutations: {
     SET_SIDEBAR_TYPE: (state, type) => {
@@ -121,6 +123,10 @@ const app = {
     SET_CUSTOM_COLUMNS: (state, customColumns) => {
       vueProps.$localStorage.set(CUSTOM_COLUMNS, customColumns)
       state.customColumns = customColumns
+    },
+    RELOAD_ALL_PROJECTS: (state, allProjects = []) => {
+      vueProps.$localStorage.set(RELOAD_ALL_PROJECTS, allProjects)
+      state.allProjects = allProjects
     }
   },
   actions: {
@@ -177,6 +183,9 @@ const app = {
     },
     SetCustomColumns ({ commit }, bool) {
       commit('SET_CUSTOM_COLUMNS', bool)
+    },
+    ReloadAllProjects ({ commit, allProjects }) {
+      commit('RELOAD_ALL_PROJECTS', allProjects)
     }
   }
 }

ui/src/views/AutogenView.vue

@@ -693,8 +693,10 @@ export default {
       }
       api('listProjects', { id: projectId, listall: true, details: 'min' }).then(json => {
         if (!json || !json.listprojectsresponse || !json.listprojectsresponse.project) return
+        const projects = json.listprojectsresponse.project
         const project = json.listprojectsresponse.project[0]
         this.$store.dispatch('SetProject', project)
+        this.$store.commit('RELOAD_ALL_PROJECTS', projects)
         this.$store.dispatch('ToggleTheme', project.id === undefined ? 'light' : 'dark')
         this.$message.success(`${this.$t('message.switch.to')} "${project.name}"`)
         const query = Object.assign({}, this.$route.query)
@@ -937,6 +939,7 @@ export default {
         }
 
         if (this.apiName === 'listProjects' && this.items.length > 0) {
+          this.$store.commit('RELOAD_ALL_PROJECTS', this.items)
           this.columns.map(col => {
             if (col.title === 'Account') {
               col.title = this.$t('label.project.owner')
@@ -1808,7 +1811,6 @@ export default {
           this.rules[field.name].push(rule)
           break
         default:
-          console.log('hererere')
           rule.required = field.required
           rule.message = this.$t('message.error.required.input')
           this.rules[field.name].push(rule)