[6942] Pinia Task 13 - account-team

[n-lark]

Description

See details & test plan.

Related Issue(s)

Resolves #6942

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production
• Link to Changelog Entry PR, or note why one is not needed.

Labels

• Includes a DB migration? -> add the area:migration label

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.26%. Comparing base (a30c57f) to head (642e705).
⚠️ Report is 18 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6952   +/-   ##
=======================================
  Coverage   76.26%   76.26%           
=======================================
  Files         403      403           
  Lines       20312    20312           
  Branches     4886     4886           
=======================================
  Hits        15490    15490           
  Misses       4822     4822           

Flag	Coverage Δ
backend	76.26% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[cstns]

This was not a small feat, I appreciate the time and work that you put into this! Most of my comments are nitpicks on naming, placement of thing or praise about cleaning house on leftovers.

There was one thing that should have caught my eyes sooner, and am now worried that it might cause so subtle of side effects that we might even not notice it. That is the loss of reactivity when destructuring pinia store properties (actions are fine).

I left a comment where I noticed it, but please re-do a quick project wide scan of pinia state destructors and use the storeToRefs helper. I know it adds a bit of scope to the current task and I take full responsibility for it as I should have caught them sooner

Here's a quick reference to my findings to help out:

Destructuring from use*Store() directly

File	Line	Destructuring
store/modules/account/index.js	56	const { user } = useAccountAuthStore()
store/modules/account/index.js	57	const { team, isTrialAccount } = useContextStore()
store/modules/account/index.js	79	const { teamMembership, team } = useContextStore()
stores/_account_bridge.js	13	const { user } = useAccountAuthStore()
stores/_account_bridge.js	14	const { team, teamMembership, isTrialAccount, isTrialAccountExpired } = useContextStore()
stores/ux-navigation.js	37	const { isNewlyCreatedUser, userActions } = useUxStore()
stores/account-team.js	26	const { user } = useAccountAuthStore()
pages/account/Settings.vue	301	const { team, teams } = useAccountTeamStore()
composables/.../InstanceFormHelper.js	10	const { team } = useContextStore()
composables/.../InstanceFormHelper.js	20	const { team } = useContextStore()

Destructuring from useAccountBridge() (bridge composable)

File	Line	Destructuring
stores/product-expert-insights-agent.js	41	const { team } = useAccountBridge()
stores/product-expert.js	49	const { featuresCheck } = useAccountBridge()
stores/product-expert.js	67	const { featuresCheck } = useAccountBridge()
stores/product-expert.js	79	const { team } = useAccountBridge()
stores/product-expert.js	96	const { featuresCheck } = useAccountBridge()
stores/product-expert.js	111	const { featuresCheck } = useAccountBridge()
stores/product-tables.js	53	const { team } = useAccountBridge()
stores/product-tables.js	59	const { team } = useAccountBridge()
stores/product-tables.js	91	const { team } = useAccountBridge()
stores/ux-navigation.js	418	const { team, teamMembership } = useAccountBridge()
stores/product-brokers.js	18	const { team } = useAccountBridge()
stores/product-brokers.js	45	const { team } = useAccountBridge()
stores/product-brokers.js	50	const { team } = useAccountBridge()
stores/product-brokers.js	56	const { team } = useAccountBridge()
stores/product-brokers.js	62	const { team } = useAccountBridge()
stores/product-brokers.js	69	const { team } = useAccountBridge()
stores/product-brokers.js	83	const { team } = useAccountBridge()

(They may not all warrant the use of pinia's helper)

[n-lark]

Hi @cstns here is the summary of the fixes I made for the deconstruction/storeToRefs issues. It they were not introduced in this PR, then I didn't fix them since the diff here is already unmanageable. I'll raise another PR for a sweep of the codebase or tackle in Task 15 Teardown.

Pinia Reactivity Fix Tracking

Destructuring from use*Store() directly

File	Line	Destructuring	Fixed?	Notes
store/modules/account/index.js	56	const { user } = useAccountAuthStore()	✅ Yes	Fixed in this PR — storeToRefs + alias pattern
store/modules/account/index.js	57	const { team, isTrialAccount } = useContextStore()	✅ Yes	Fixed in this PR — storeToRefs + alias pattern
store/modules/account/index.js	79	const { teamMembership, team } = useContextStore()	✅ Yes	Fixed in this PR — storeToRefs + alias pattern
stores/_account_bridge.js	13	const { user } = useAccountAuthStore()	✅ Yes	Fixed in this PR — storeToRefs
stores/_account_bridge.js	14	const { team, teamMembership, isTrialAccount, isTrialAccountExpired } = useContextStore()	✅ Yes	Fixed in this PR — storeToRefs
stores/ux-navigation.js	37	const { isNewlyCreatedUser, userActions } = useUxStore()	❌ No	Not introduced in this PR — needs a separate fix
stores/account-team.js	26	const { user } = useAccountAuthStore()	✅ Yes	Fixed in this PR — direct store proxy access (useAccountAuthStore().user) to preserve test mock compatibility
pages/account/Settings.vue	301	const { team, teams } = useAccountTeamStore()	✅ Yes	Fixed in this PR — storeToRefs for teams; team corrected to read from useContextStore() (was a migration bug — team does not exist on useAccountTeamStore)
composables/.../InstanceFormHelper.js	10	const { team } = useContextStore()	✅ Yes	Fixed in this PR — storeToRefs + alias pattern
composables/.../InstanceFormHelper.js	20	const { team } = useContextStore()	✅ Yes	Fixed in this PR — storeToRefs + alias pattern

---

Destructuring from useAccountBridge() (bridge composable)

Just to note - const { featuresCheck } = useAccountBridge() is still coming off of Vuex at this point in time. I will ensure this is right when I move it into Pinia in Task 14.

// in _account_bridge.js this is still Vuex. 

        featuresCheck: store.getters['account/featuresCheck'],
        requiresBilling: store.getters['account/requiresBilling'],

File	Line	Destructuring	Fixed?	Notes
stores/product-expert-insights-agent.js	41	const { team } = useAccountBridge()	➡️ N/A	In an action — one-shot call, reactivity does not apply
stores/product-expert.js	49	const { featuresCheck } = useAccountBridge()	➡️ N/A	In an action — one-shot call, reactivity does not apply. Also, featuresCheck comes from Vuex store.getters (direct property access, not destructured from Pinia)
stores/product-expert.js	67	const { featuresCheck } = useAccountBridge()	➡️ N/A	In an action — same as above
stores/product-expert.js	79	const { team } = useAccountBridge()	➡️ N/A	In an action — one-shot call, reactivity does not apply
stores/product-expert.js	96	const { featuresCheck } = useAccountBridge()	➡️ N/A	In an action — same as above
stores/product-expert.js	111	const { featuresCheck } = useAccountBridge()	➡️ N/A	In an action — same as above
stores/product-tables.js	53	const { team } = useAccountBridge()	➡️ N/A	In an action — one-shot call, reactivity does not apply
stores/product-tables.js	59	const { team } = useAccountBridge()	➡️ N/A	In an action — one-shot call, reactivity does not apply
stores/product-tables.js	91	const { team } = useAccountBridge()	➡️ N/A	In an action — one-shot call, reactivity does not apply
stores/ux-navigation.js	418	const { team, teamMembership } = useAccountBridge()	✅ Effectively fixed	In a getter — not introduced in this PR. Destructuring plain values from useAccountBridge() is safe: the getter reruns on dependency change, the bridge is called fresh each time, and reactive tracking flows through the bridge's internal storeToRefs accesses. No further change needed.
stores/product-brokers.js	18	const { team } = useAccountBridge()	✅ Effectively fixed	In a getter — same reasoning as above.
stores/product-brokers.js	45	const { team } = useAccountBridge()	➡️ N/A	In an action — one-shot call, reactivity does not apply
stores/product-brokers.js	50	const { team } = useAccountBridge()	➡️ N/A	In an action — one-shot call, reactivity does not apply
stores/product-brokers.js	56	const { team } = useAccountBridge()	➡️ N/A	In an action — one-shot call, reactivity does not apply
stores/product-brokers.js	62	const { team } = useAccountBridge()	➡️ N/A	In an action — one-shot call, reactivity does not apply
stores/product-brokers.js	69	const { team } = useAccountBridge()	➡️ N/A	In an action — one-shot call, reactivity does not apply
stores/product-brokers.js	83	const { team } = useAccountBridge()	➡️ N/A	In an action — one-shot call, reactivity does not apply

---

Additional fixes not original list

File	Issue	Fix
pages/account/Settings.vue	team was destructured from useAccountTeamStore() — team is not state on that store, so it was always undefined. The active team lives in useContextStore. This was a silent migration bug: the if (team?.id === teamId) guard never fired, meaning a deleted team would never trigger the fallback to a different team.	Changed to useContextStore().team so the check works correctly

[cstns]

Looking good! I'll approve it today but we should postpone it's release to next week as discussed on slack.

Awesome work!

[cstns]

merged, keeping an eye on sentry for the day