[6822] Pinia Task 5 - context

frontend/src/App.vue

@@ -62,8 +62,8 @@
 </template>
 
 <script>
-import { mapState } from 'pinia'
-import { mapActions, mapState as mapVuexState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import Loading from './components/Loading.vue'
 import Offline from './components/Offline.vue'
@@ -78,6 +78,7 @@ import PasswordExpired from './pages/PasswordExpired.vue'
 import TermsAndConditions from './pages/TermsAndConditions.vue'
 import UnverifiedEmail from './pages/UnverifiedEmail.vue'
 
+import { useContextStore } from '@/stores/context.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default {
@@ -144,7 +145,7 @@ export default {
         this.$store.dispatch('product/checkFlags')
     },
     methods: {
-        ...mapActions('context', ['updateRoute'])
+        ...mapActions(useContextStore, ['updateRoute'])
     }
 }
 </script>

frontend/src/pages/device/Editor/index.vue

@@ -68,7 +68,9 @@
 <script>
 
 import { CogIcon, HomeIcon, XIcon } from '@heroicons/vue/solid/index.js'
-import { mapActions, mapGetters, mapState } from 'vuex'
+
+import { mapActions } from 'pinia'
+import { mapGetters, mapState } from 'vuex'
 
 import DropdownMenu from '../../../components/DropdownMenu.vue'
 import ResizeBar from '../../../components/ResizeBar.vue'
@@ -81,6 +83,8 @@ import usePermissions from '../../../composables/Permissions.js'
 import { useResizingHelper } from '../../../composables/ResizingHelper.js'
 import Alerts from '../../../services/alerts.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 const DRAWER_DEFAULT_WIDTH = 550 // Default drawer width in pixels
 const DRAWER_MAX_VIEWPORT_MARGIN = 200 // Space to preserve when drawer is at max width
 const DRAWER_MAX_WIDTH_RATIO = 0.9 // Maximum drawer width as percentage of viewport (desktop)
@@ -312,7 +316,7 @@ export default {
         this.stopPolling()
     },
     methods: {
-        ...mapActions('context', { setContextDevice: 'setDevice' }),
+        ...mapActions(useContextStore, { setContextDevice: 'setDevice' }),
         loadDevice: async function () {
             let tries = 0
             let device = await this.fetchDevice(this.$route.params.id, false)

frontend/src/pages/instance/Editor/index.vue

@@ -70,7 +70,9 @@
 
 <script>
 import { HomeIcon, XIcon } from '@heroicons/vue/solid'
-import { mapActions, mapGetters } from 'vuex'
+
+import { mapActions } from 'pinia'
+import { mapGetters } from 'vuex'
 
 import InstanceStatusPolling from '../../../components/InstanceStatusPolling.vue'
 import ResizeBar from '../../../components/ResizeBar.vue'
@@ -89,6 +91,8 @@ import { Roles } from '../../../utils/roles.js'
 import ConfirmInstanceDeleteDialog from '../Settings/dialogs/ConfirmInstanceDeleteDialog.vue'
 import DashboardLink from '../components/DashboardLink.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 // Drawer size constraints
 const DRAWER_MIN_WIDTH = 310 // Minimum drawer width in pixels
 const DRAWER_DEFAULT_WIDTH = 550 // Default drawer width in pixels
@@ -246,7 +250,7 @@ export default {
         this.clearInstance()
     },
     methods: {
-        ...mapActions('context', ['setInstance', 'clearInstance'])
+        ...mapActions(useContextStore, ['setInstance', 'clearInstance'])
     }
 }
 </script>

frontend/src/store/index.js

@@ -3,14 +3,12 @@ import { createStore } from 'vuex'
 import commonActions from './common/actions.js'
 import commonMutations from './common/mutations.js'
 import account from './modules/account/index.js'
-import context from './modules/context/index.js'
 import product from './modules/product/index.js'
 import storagePlugin from './plugins/storage.plugin.js'
 
 export default createStore({
     modules: {
         account,
-        context,
         product
     },
     actions: {

frontend/src/store/modules/account/index.js

@@ -2,14 +2,14 @@ import { getActivePinia } from 'pinia'
 import { nextTick } from 'vue'
 
 import flowBlueprintsApi from '../../../api/flowBlueprints.js'
-
 import settingsApi from '../../../api/settings.js'
 import teamApi from '../../../api/team.js'
 import userApi from '../../../api/user.js'
 import { getTeamProperty } from '../../../composables/TeamProperties.js'
 import router from '../../../routes.js'
 import product from '../../../services/product.js'
 
+import { useContextStore } from '@/stores/context.js'
 import { useUxDialogStore } from '@/stores/ux-dialog.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 import { useUxNavigationStore } from '@/stores/ux-navigation.js'
@@ -523,7 +523,7 @@ const actions = {
                     useUxNavigationStore().$reset()
                     useUxDrawersStore().$reset()
                     useUxStore().$reset()
-                    // Task 5:  useContextStore().$reset()
+                    useContextStore().$reset()
                     // Task 6:  useProductTablesStore().$reset()
                     // Task 7:  useProductBrokersStore().$reset()
                     // Task 8:  useProductAssistantStore().$reset()

frontend/src/store/modules/product/assistant/index.js

@@ -2,6 +2,8 @@ import SemVer from 'semver'
 
 import messagingService from '../../../../services/messaging.service.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 const MAX_DEBUG_LOG_ENTRIES = 100 // maximum number of debug log entries to keep
 
 const eventsRegistry = {
@@ -159,11 +161,11 @@ const meta = {
 const state = initialState()
 
 const getters = {
-    immersiveInstance: (state, getters, rootState) => {
-        return rootState.context.instance
+    immersiveInstance: () => {
+        return useContextStore().instance
     },
-    immersiveDevice: (state, getters, rootState) => {
-        return rootState.context.device
+    immersiveDevice: () => {
+        return useContextStore().device
     },
     hasUserSelection: (state) => {
         return state.selectedNodes.length

frontend/src/store/modules/product/expert/index.js

@@ -9,8 +9,11 @@ import { useUxDrawersStore } from '../../../../stores/ux-drawers.js'
 import { FF_AGENT, OPERATOR_AGENT } from './agents.js'
 
 import FFAgent from './ff-agent/index.js'
+
 import OperatorAgent from './operator-agent/index.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 const initialState = () => ({
     shouldWakeUpAssistant: false,
     agentMode: FF_AGENT, // ff-agent or operator-agent
@@ -331,11 +334,11 @@ const actions = {
         commit('SET_ABORT_CONTROLLER', controller)
     },
 
-    sendQuery ({ commit, state, getters, rootGetters, rootState }, { query }) {
+    sendQuery ({ commit, state, getters, rootState }, { query }) {
         const payload = {
             query,
             context: {
-                ...rootGetters['context/expert'],
+                ...useContextStore().expert,
                 agent: state.agentMode
             },
             sessionId: state[state.agentMode].sessionId,

frontend/src/stores/_account-bridge.js → frontend/src/stores/_account_bridge.js

@@ -4,15 +4,22 @@
 export function useAccountBridge () {
     // Use require() instead of a top-level import to avoid a circular module dependency.
     // Static imports of store/index.js here would create a cycle:
-    // ux-drawers.js → ux-navigation.js → _account-bridge.js → store/index.js → account/index.js → ux-navigation.js
+    // ux-drawers.js → ux-navigation.js → _account_bridge.js → store/index.js → account/index.js → ux-navigation.js
     // By requiring lazily inside the function body, the Vuex store is fully initialized before this runs.
     const store = require('../store/index.js').default
+    const user = store.state.account.user
+    const team = store.state.account.team
     return {
-        team: store.state.account.team,
+        user,
+        userId: user?.id || null,
+        team,
+        teamId: team?.id || null,
+        teamSlug: team?.slug || null,
         features: store.state.account.features,
         teamMembership: store.getters['account/teamMembership'] ?? { role: 0 },
         featuresCheck: store.getters['account/featuresCheck'],
         requiresBilling: store.getters['account/requiresBilling'],
+        isTrialAccount: store.getters['account/isTrialAccount'] || false,
         isTrialAccountExpired: store.getters['account/isTrialAccountExpired']
     }
 }