[6942] Pinia Task 13 - account-team by n-lark · Pull Request #6952 · FlowFuse/flowfuse

n-lark · 2026-03-24T20:43:09Z

Description

See details & test plan.

Related Issue(s)

Resolves #6942

Checklist

Labels

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

codecov · 2026-03-24T20:57:25Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.26%. Comparing base (d2df691) to head (9bf07b4).

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.

… into 6942-pinia-task-13-account-team

…nitial notifications state

frontend/src/stores/account.js

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

frontend/src/composables/Components/multi-step-forms/instance/InstanceFormHelper.js

…3-account-team

… into 6942-pinia-task-13-account-team

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)

frontend/src/stores/account.js

frontend/src/stores/account-team.js

frontend/src/stores/account.js

cstns · 2026-04-02T06:53:08Z

frontend/src/stores/account.js

+        setTeams (teams) {
+            this.teams = teams
+        },
+        async setTeam (team) {


I feel this method should be in the context store and don't see why it shouldn't. Change my mind on why it should not be

Here are the reasons why I left it within account-team. I understand we want to merge this today so if you still disagree I vote we move it in another task to not hold this up.

It owns pendingTeamChange
pendingTeamChange state lives on account-team. setTeam is the only thing that sets it. Moving setTeam to context would mean context needs to reach back into account-team for that state.

It calls clearOtherStores()
clearOtherStores() is an account-team action (useProductTablesStore().clearState()). setTeam calls it as this.clearOtherStores().

The circular dependency 🔪

account-team.js already imports useContextStore:

account-team.js → context.js

If setTeam moved to context.js, then context.js would need to import useAccountTeamStore for pendingTeamChange and clearOtherStores():

context.js → account-team.js → context.js ❌

That's a circular import and will lead to more issues down the line. This is the main reason why I didn't want to move it.

frontend/src/App.vue

frontend/src/pages/application/DeviceGroup/devices.vue

frontend/src/pages/instance/components/EditorLink.vue

frontend/src/pages/instance/Settings/Danger.vue

frontend/src/pages/team/Brokers/Hierarchy/TopicHierarchy/index.vue

frontend/src/pages/team/Tables/Table/TableExplorer/drawers/CreateTable.vue

n-lark · 2026-04-02T14:59:48Z

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!

Convert vuex to pinia for account-team

2aac79b

n-lark self-assigned this Mar 24, 2026

n-lark linked an issue Mar 24, 2026 that may be closed by this pull request

Pinia Task 13 - account-team #6942

Open

n-lark temporarily deployed to staging March 24, 2026 20:47 — with GitHub Actions Inactive

Merge remote-tracking branch 'origin/6829-pinia-task-12-account-auth'…

8b5332f

… into 6942-pinia-task-13-account-team

n-lark temporarily deployed to staging March 25, 2026 19:16 — with GitHub Actions Inactive

Fix issues with notifications access, pinia-plugin-persistance, and i…

797afd4

…nitial notifications state

n-lark temporarily deployed to staging March 25, 2026 19:45 — with GitHub Actions Inactive

n-lark commented Mar 25, 2026

View reviewed changes

frontend/src/stores/account.js Show resolved Hide resolved

Fix missed account store access and vuex mapper

b17ce28

n-lark temporarily deployed to staging March 25, 2026 20:14 — with GitHub Actions Inactive

n-lark commented Mar 26, 2026

View reviewed changes

frontend/src/store/modules/account/index.js Outdated Show resolved Hide resolved

n-lark marked this pull request as ready for review March 26, 2026 14:48

n-lark requested a review from cstns March 26, 2026 14:49

n-lark commented Mar 26, 2026

View reviewed changes

frontend/src/composables/Components/multi-step-forms/instance/InstanceFormHelper.js Outdated Show resolved Hide resolved

Update team to be deconstructed in instanceFormHelper

739bc02

n-lark temporarily deployed to staging March 26, 2026 19:52 — with GitHub Actions Inactive

Merge branch '6829-pinia-task-12-account-auth' into 6942-pinia-task-1…

2feda2e

…3-account-team

n-lark temporarily deployed to staging March 26, 2026 20:33 — with GitHub Actions Inactive

Merge remote-tracking branch 'origin/6829-pinia-task-12-account-auth'…

1c7914a

… into 6942-pinia-task-13-account-team

n-lark temporarily deployed to staging March 30, 2026 15:48 — with GitHub Actions Inactive

Base automatically changed from 6829-pinia-task-12-account-auth to main March 31, 2026 13:18

Merge branch 'main' into 6942-pinia-task-13-account-team

65df555

n-lark temporarily deployed to staging March 31, 2026 13:25 — with GitHub Actions Inactive

Merge branch 'main' into 6942-pinia-task-13-account-team

158c655

cstns temporarily deployed to staging April 1, 2026 11:45 — with GitHub Actions Inactive

Move team and teamMembership to context store

5ffd192

n-lark temporarily deployed to staging April 1, 2026 19:16 — with GitHub Actions Inactive

Fix direct assignment to context store state from account store

94a5365

n-lark temporarily deployed to staging April 1, 2026 19:23 — with GitHub Actions Inactive

Merge branch 'main' into 6942-pinia-task-13-account-team

5b9f566

n-lark temporarily deployed to staging April 1, 2026 19:59 — with GitHub Actions Inactive

cstns requested changes Apr 2, 2026

View reviewed changes

Fix deconstructed getters/state

dba8f2c

n-lark temporarily deployed to staging April 2, 2026 14:59 — with GitHub Actions Inactive

Change name of account-team to account, update imports, usage and specs

af0b66c

n-lark temporarily deployed to staging April 2, 2026 15:16 — with GitHub Actions Inactive

n-lark requested a review from cstns April 2, 2026 15:22

Merge branch 'main' into 6942-pinia-task-13-account-team

3b5ffa8

n-lark temporarily deployed to staging April 2, 2026 15:35 — with GitHub Actions Inactive

cstns approved these changes Apr 2, 2026

View reviewed changes

Remove unused team property mapping

9bf07b4

n-lark temporarily deployed to staging April 2, 2026 21:01 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[6942] Pinia Task 13 - account-team #6952

[6942] Pinia Task 13 - account-team #6952
n-lark wants to merge 16 commits intomainfrom
6942-pinia-task-13-account-team

n-lark commented Mar 24, 2026

Uh oh!

codecov bot commented Mar 24, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cstns left a comment •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cstns Apr 2, 2026

Uh oh!

n-lark Apr 2, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

n-lark commented Apr 2, 2026 •

edited

Loading

Uh oh!

cstns left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

n-lark commented Mar 24, 2026

Description

Related Issue(s)

Checklist

Labels

Uh oh!

codecov bot commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cstns left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Destructuring from use*Store() directly

Destructuring from useAccountBridge() (bridge composable)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cstns Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

n-lark Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

n-lark commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pinia Reactivity Fix Tracking

Destructuring from use*Store() directly

Destructuring from useAccountBridge() (bridge composable)

Additional fixes not original list

Uh oh!

cstns left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

codecov bot commented Mar 24, 2026 •

edited

Loading

cstns left a comment •

edited

Loading

Destructuring from `use*Store()` directly

Destructuring from `useAccountBridge()` (bridge composable)

n-lark commented Apr 2, 2026 •

edited

Loading

Destructuring from `use*Store()` directly

Destructuring from `useAccountBridge()` (bridge composable)