Pinia Task 7 - product-brokers

[n-lark]

Task 7 — product-brokers (PR 8)

Gate: Phase 0 merged
Vuex module: frontend/src/store/modules/product/index.js (the product root module)
New file: frontend/src/stores/product-brokers.js
Persistence: brokers.expandedTopics → localStorage (cleared on logout)
Cross-store dependency: all API actions read account.team.id via _account-bridge.js

7.1 — Create the Pinia store

// frontend/src/stores/product-brokers.js
import { defineStore } from 'pinia'
import brokerApi from '../api/broker.js'
import { useAccountBridge } from './_account-bridge.js'

export const useProductBrokersStore = defineStore('product-brokers', {
    state: () => ({
        flags: null,
        interview: null,
        UNS: { clients: [], brokers: [] },
        brokers: { expandedTopics: {} }
    }),
    getters: {
        hasFfUnsClients: (state) => state.UNS.clients.length > 0,
        hasBrokers: (state) => state.UNS.brokers.length > 0,
        brokerExpandedTopics: (state) => (brokerId) => {
            const { team } = useAccountBridge()
            if (!team || !brokerId) return {}
            return state.brokers.expandedTopics?.[team.slug]?.[brokerId] ?? {}
        }
    },
    actions: {
        checkFlags () {
            try {
                window.posthog?.onFeatureFlags((flags, values) => {
                    const storeFlags = {}
                    for (const flagName of flags) {
                        const payload = window.posthog?.getFeatureFlagPayload(flagName)
                        storeFlags[flagName] = { value: values[flagName], payload }
                        const flagStartsWithKeyword = flagName.startsWith('interview-')
                        const flagEnabled = window.posthog?.isFeatureEnabled(flagName, { send_event: false })
                        const flagNotShownBefore = !localStorage.getItem('ph-$interview-popup-seen')
                        if (flagStartsWithKeyword && flagEnabled && flagNotShownBefore) {
                            this.interview = { flag: flagName, enabled: flagEnabled, payload }
                        }
                    }
                    this.flags = storeFlags
                })
            } catch (err) {
                console.error('posthog error logging feature flags')
            }
        },
        async fetchUnsClients () {
            const { team } = useAccountBridge()
            const response = await brokerApi.getClients(team.id)
            this.UNS.clients = response.clients
        },
        async getBrokers () {
            const { team } = useAccountBridge()
            const response = await brokerApi.getBrokers(team.id)
            this.UNS.brokers = response.brokers
            this.addFfBroker()
        },
        async createBroker (payload) {
            const { team } = useAccountBridge()
            const broker = await brokerApi.createBroker(team.id, payload).catch(e => e)
            this.UNS.brokers.push(broker)
            return broker
        },
        async updateBroker ({ payload, brokerId }) {
            const { team } = useAccountBridge()
            const broker = await brokerApi.updateBroker(team.id, brokerId, payload).catch(e => e)
            const i = this.UNS.brokers.findIndex(b => b.id === broker.id)
            if (i !== -1) this.UNS.brokers[i] = { ...this.UNS.brokers[i], ...broker }
            return broker
        },
        deleteBroker (brokerId) {
            const { team } = useAccountBridge()
            return brokerApi.deleteBroker(team.id, brokerId).then(() => {
                const i = this.UNS.brokers.findIndex(b => b.id === brokerId)
                if (i !== -1) this.UNS.brokers.splice(i, 1)
            })
        },
        addFfBroker () {
            if (!this.UNS.brokers.find(b => b.local) && this.UNS.clients.length > 0) {
                this.UNS.brokers.push({ local: true, id: 'team-broker', name: 'FlowFuse Broker', clientId: 'team-broker', host: '??', port: 0, protocol: '', ssl: false, verifySSL: true })
            }
        },
        removeFfBroker () { this.UNS.brokers = this.UNS.brokers.filter(b => !b.local) },
        clearUns () { this.UNS.brokers = []; this.UNS.clients = [] },
        handleBrokerTopicState ({ topic, brokerId }) {
            const { team } = useAccountBridge()
            if (!this.brokers.expandedTopics[team.slug]) this.brokers.expandedTopics[team.slug] = {}
            if (!this.brokers.expandedTopics[team.slug][brokerId]) {
                this.brokers.expandedTopics[team.slug][brokerId] = {}
                this.brokers.expandedTopics[team.slug][brokerId][topic] = ''
                return
            }
            if (Object.prototype.hasOwnProperty.call(this.brokers.expandedTopics[team.slug][brokerId], topic)) {
                delete this.brokers.expandedTopics[team.slug][brokerId][topic]
            } else {
                this.brokers.expandedTopics[team.slug][brokerId][topic] = ''
            }
        }
    },
    persist: {
        pick: ['brokers'],
        storage: localStorage
    }
})

7.2 — Bridge: clearUns called from Vuex account

Same pattern as tables — add a Pinia call in the Vuex account/clearOtherStores action alongside the existing Vuex dispatch.

7.3 — Find and update all consumers

grep -rl "product/\b\|mapState.*product\|mapGetters.*product\|mapActions.*product" frontend/src/ | grep -v "tables\|expert\|assistant"

Primary consumers: frontend/src/pages/team/Brokers/ and any component that reads UNS clients.

For each consumer, check if it's inside a mixin or rendered as <component :is="..."> inside <ff-dialog> — use Pattern C from PINIA_COMPONENT_PATTERNS.md (mapState / mapActions from Pinia) — this works correctly in all component types.

7.4 — Delete the Vuex module

Remove the product root module from store/index.js after all nested modules (assistant, tables, expert) are also migrated. Until then, remove only the broker-related state/actions and keep the module shell. Full deletion happens in PR 12 after product-expert ships.

Logout bridge: uncomment useProductBrokersStore().$reset() in the Vuex logout action (Task 0.7).

7.5 — Write store tests

// frontend/src/tests/stores/product-brokers.spec.js
import { setActivePinia, createPinia } from 'pinia'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import { useProductBrokersStore } from '@/stores/product-brokers.js'
import * as bridge from '@/stores/_account-bridge.js'

describe('product-brokers store', () => {
    beforeEach(() => {
        setActivePinia(createPinia())
        vi.spyOn(bridge, 'useAccountBridge').mockReturnValue({ team: { id: 'team-1', slug: 'my-team' } })
    })

    it('initializes with empty UNS state', () => {
        const store = useProductBrokersStore()
        expect(store.UNS.clients).toEqual([])
        expect(store.UNS.brokers).toEqual([])
    })

    it('hasFfUnsClients returns true when clients exist', () => {
        const store = useProductBrokersStore()
        store.UNS.clients = [{ id: 'client-1' }]
        expect(store.hasFfUnsClients).toBe(true)
    })

    it('handleBrokerTopicState toggles a topic off when already present', () => {
        const store = useProductBrokersStore()
        store.handleBrokerTopicState({ topic: 'sensors/#', brokerId: 'broker-1' })
        expect(store.brokers.expandedTopics['my-team']['broker-1']).toHaveProperty('sensors/#')
        // Toggle off
        store.handleBrokerTopicState({ topic: 'sensors/#', brokerId: 'broker-1' })
        expect(store.brokers.expandedTopics['my-team']['broker-1']).not.toHaveProperty('sensors/#')
    })

    it('clearUns resets UNS brokers and clients', () => {
        const store = useProductBrokersStore()
        store.UNS.brokers = [{ id: 'b1' }]
        store.UNS.clients = [{ id: 'c1' }]
        store.clearUns()
        expect(store.UNS.brokers).toEqual([])
        expect(store.UNS.clients).toEqual([])
    })
})

7.6 — Export from stores index

export { useProductBrokersStore } from './product-brokers.js'

[n-lark]

Task 7 Manual Test Plan — product-brokers Pinia Migration

Scope

Tests covering the areas affected by migrating the product Vuex root module → useProductBrokersStore Pinia store. Covers broker listing and selection, topic hierarchy, broker settings (update/delete), MQTT clients, interview popup flag, and logout reset.

Requires Brokers feature: The MQTT Broker feature must be enabled for the platform and team. If it is not, the feature-unavailable empty state will show instead of the Brokers UI.

---

1. Brokers page — initial load and redirect

Files: pages/team/Brokers/index.vue

• Navigate to the Brokers section of a team → Pinia DevTools: product-brokers store is present; UNS.brokers and UNS.clients populate after load
• If no brokers and no FF clients exist: automatically redirected to the "Add a new Broker" page (team-brokers-add)
• If only a FlowFuse Broker (clients) exists and no external brokers: redirected to team-brokers-hierarchy with brokerId: 'team-broker'; Pinia DevTools: UNS.brokers contains one entry with local: true
• If only external brokers exist: redirected to team-brokers-hierarchy with the first broker's id; Pinia DevTools: UNS.brokers contains the broker list; UNS.clients is empty
• If a brokerId in the URL does not match any loaded broker: redirected to page-not-found

---

2. Broker selector — switching brokers

Files: pages/team/Brokers/index.vue

• If more than one broker exists: the broker selector dropdown is visible in the page header
• Select a different broker from the dropdown → URL updates; activeBrokerId reflects the new broker; broker status polling restarts
• Navigate away from Brokers → after ~500ms, Pinia DevTools: product-brokers.UNS.brokers and UNS.clients are both [] (cleared by beforeRouteLeave)

---

3. Add a new broker (external)

Files: pages/team/Brokers/ChooseBroker.vue, pages/team/Brokers/NewBroker.vue

• On the choose-broker page, the "Bring your Own Broker" tile is visible only if isExternalMqttBrokerFeatureEnabled is true
• Select "Bring your Own Broker" → navigate to the new broker form
• Fill in broker details and submit → Pinia DevTools: product-brokers.UNS.brokers gains the new broker; redirected to team-brokers-hierarchy for the new broker; no console errors

---

4. Topic hierarchy

Files: pages/team/Brokers/Hierarchy/TopicHierarchy/index.vue

• Navigate to the Hierarchy tab of a broker → topics load; Pinia DevTools: product-brokers.brokers.expandedTopics is present (may be empty initially)
• Click to expand a topic segment → Pinia DevTools: product-brokers.brokers.expandedTopics[teamSlug][brokerId] gains the topic key
• Click the same segment again (collapse) → the topic key is removed from expandedTopics
• Type in the search box → topic list filters to matching names; clear the search → full list returns
• Refresh the page → expanded topic state is restored from localStorage (persisted via brokers key)

---

5. Broker settings — update and delete

Files: pages/team/Brokers/Settings/index.vue

• Navigate to the Settings tab of an external broker → form pre-fills with broker details
• Edit broker fields and submit → Pinia DevTools: product-brokers.UNS.brokers entry for that broker is updated; success alert shown
• Click "Delete" → confirmation dialog appears
• Confirm deletion → Pinia DevTools: product-brokers.UNS.brokers no longer contains the deleted broker; redirected to team-brokers (or team-brokers-add if no brokers remain); no console errors

---

6. MQTT Clients — list and create

Files: pages/team/Brokers/Clients/index.vue, pages/team/Brokers/Clients/dialogs/ClientDialog.vue

• Navigate to the Clients tab → Pinia DevTools: product-brokers.UNS.clients populates with the client list
• Type in the search box → client list filters by username/owner name
• Click "Create Client" → the client dialog opens
• Submit a valid client → Pinia DevTools: product-brokers.UNS.clients gains the new entry; if this is the first client, UNS.brokers gains the FlowFuse Broker entry (local: true); redirected to team-brokers-clients with brokerId: 'team-broker'
• Create a client with a duplicate username → error: "Client name already exists."

---

7. MQTT Clients — edit and delete

Files: pages/team/Brokers/Clients/index.vue, pages/team/Brokers/Clients/dialogs/ClientDialog.vue

• Click the edit button on a client → dialog opens pre-filled; edit ACL rules and confirm → client list refreshes; no console errors
• Delete a client → Pinia DevTools: product-brokers.UNS.clients loses that entry
• Delete the last client → Pinia DevTools: product-brokers.UNS.brokers FlowFuse Broker entry (local: true) is removed; redirected to team-brokers

---

8. Interview popup (PostHog flags)

Files: App.vue, layouts/Platform.vue

• On login (with PostHog active and an interview- feature flag enabled that has not been seen before): Pinia DevTools: product-brokers.interview is set; the interview popup appears in the platform layout
• Dismiss the popup → localStorage key ph-$interview-popup-seen is set; on next page load product-brokers.interview remains null
• Pinia DevTools: product-brokers.flags is populated with a map of PostHog flag names → { value, payload } objects

---

9. Logout — product-brokers store is reset

Files: store/modules/account/index.js

• Navigate to the Brokers section; expand some topics; verify product-brokers.UNS.brokers is populated and product-brokers.brokers.expandedTopics has entries in Pinia DevTools
• Log out
• Pinia DevTools (before navigating away): product-brokers.UNS.brokers is []; product-brokers.UNS.clients is []; product-brokers.flags is null; product-brokers.interview is null
• Log back in → Brokers section loads fresh with no stale data; expanded topic state is restored from localStorage (persisted state survives $reset)

---