[6824] Pinia Task 7 - product-brokers

frontend/src/App.vue

@@ -79,6 +79,7 @@ import TermsAndConditions from './pages/TermsAndConditions.vue'
 import UnverifiedEmail from './pages/UnverifiedEmail.vue'
 
 import { useContextStore } from '@/stores/context.js'
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default {
@@ -142,7 +143,7 @@ export default {
     },
     mounted () {
         this.$store.dispatch('account/checkState')
-        this.$store.dispatch('product/checkFlags')
+        useProductBrokersStore().checkFlags()
     },
     methods: {
         ...mapActions(useContextStore, ['updateRoute'])

frontend/src/layouts/Platform.vue

@@ -63,7 +63,7 @@
 
 <script>
 import { mapActions, mapState } from 'pinia'
-import { mapGetters, mapState as mapVuexState } from 'vuex'
+import { mapGetters } from 'vuex'
 
 import InterviewPopup from '../components/InterviewPopup.vue'
 import PageHeader from '../components/PageHeader.vue'
@@ -73,8 +73,8 @@ import NoticeBanner from '../components/notices/NoticeBanner.vue'
 import AlertsMixin from '../mixins/Alerts.js'
 import dialogService from '../services/dialog.js'
 
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
 import { useUxDialogStore } from '@/stores/ux-dialog.js'
-
 import { useUxStore } from '@/stores/ux.js'
 
 export default {
@@ -90,7 +90,7 @@ export default {
     computed: {
         ...mapState(useUxDialogStore, ['dialog']),
         ...mapState(useUxStore, ['overlay']),
-        ...mapVuexState('product', ['interview']),
+        ...mapState(useProductBrokersStore, ['interview']),
         ...mapGetters('account', ['hasAvailableTeams'])
     },
     watch: {

frontend/src/pages/team/Brokers/ChooseBroker.vue

@@ -48,10 +48,13 @@
 <script>
 
 import { CheckIcon, MinusIcon } from '@heroicons/vue/outline'
+import { mapState } from 'pinia'
 import { mapGetters } from 'vuex'
 
 import MediumTile from '../../../components/tiles/MediumTile.vue'
 
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
+
 export default {
     name: 'ChooseBroker',
     components: {
@@ -60,7 +63,7 @@ export default {
         MinusIcon
     },
     computed: {
-        ...mapGetters('product', ['hasFfUnsClients', 'hasBrokers']),
+        ...mapState(useProductBrokersStore, ['hasFfUnsClients', 'hasBrokers']),
         ...mapGetters('account', ['featuresCheck']),
         options () {
             return [

frontend/src/pages/team/Brokers/Clients/dialogs/ClientDialog.vue

@@ -72,14 +72,17 @@
 
 <script>
 import { PlusIcon } from '@heroicons/vue/solid'
-import { mapActions, mapState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import brokerApi from '../../../../../api/broker.js'
 import FormRow from '../../../../../components/FormRow.vue'
 import { generateUuid } from '../../../../../composables/strings/String.js'
 
 import AclItem from './AclItem.vue'
 
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
+
 export default {
     name: 'ClientDialog',
     components: {
@@ -146,8 +149,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
-        ...mapState('product', {
+        ...mapVuexState('account', ['team']),
+        ...mapState(useProductBrokersStore, {
             clients: state => state.UNS.clients
         }),
         disableConfirm () {
@@ -180,7 +183,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions('product', ['fetchUnsClients']),
+        ...mapActions(useProductBrokersStore, ['fetchUnsClients', 'addFfBroker']),
         async confirm () {
             if (!this.validateForm()) {
                 return
@@ -210,7 +213,7 @@ export default {
                     this.input.acls
                 )
                     .then(() => this.fetchUnsClients())
-                    .then(() => this.$store.dispatch('product/addFfBroker'))
+                    .then(() => this.addFfBroker())
                     .then(() => this.$router.push({
                         name: 'team-brokers-clients',
                         params: { ...this.$route.params, brokerId: 'team-broker' }

frontend/src/pages/team/Brokers/Clients/index.vue

@@ -94,7 +94,8 @@
 
 <script>
 import { PlusSmIcon, RssIcon, SearchIcon } from '@heroicons/vue/outline'
-import { mapActions, mapState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import brokerApi from '../../../../api/broker.js'
 import EmptyState from '../../../../components/EmptyState.vue'
@@ -112,6 +113,8 @@ import BrokerClient from './components/BrokerClient.vue'
 
 import ClientDialog from './dialogs/ClientDialog.vue'
 
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
+
 export default {
     name: 'BrokerClients',
     components: {
@@ -139,8 +142,8 @@ export default {
         Roles () {
             return Roles
         },
-        ...mapState('account', ['user', 'team', 'features']),
-        ...mapState('product', {
+        ...mapVuexState('account', ['user', 'team', 'features']),
+        ...mapState(useProductBrokersStore, {
             clients: state => state.UNS.clients
         }),
         filteredClients () {
@@ -173,7 +176,7 @@ export default {
     },
     methods: {
         slugify,
-        ...mapActions('product', ['fetchUnsClients']),
+        ...mapActions(useProductBrokersStore, ['fetchUnsClients', 'removeFfBroker']),
         async createClient () {
             this.$refs.clientDialog.showCreate()
         },
@@ -188,11 +191,11 @@ export default {
                 confirmLabel: 'Delete'
             }, async () => {
                 brokerApi.deleteClient(this.team.id, client.username)
-                    .then(() => this.$store.dispatch('product/fetchUnsClients'))
+                    .then(() => this.fetchUnsClients())
                     .then(() => Alerts.emit('Successfully deleted Client.', 'confirmation'))
                     .then(async () => {
                         if (this.clients.length === 0) {
-                            await this.$store.dispatch('product/removeFfBroker')
+                            this.removeFfBroker()
                             await this.$router.push({ name: 'team-brokers' })
                         }
                     })

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

@@ -80,6 +80,7 @@
 <script>
 import { SearchIcon, StatusOnlineIcon, XIcon } from '@heroicons/vue/outline'
 import { RefreshIcon } from '@heroicons/vue/solid'
+import { mapActions, mapState } from 'pinia'
 import { mapGetters } from 'vuex'
 
 import EmptyState from '../../../../../components/EmptyState.vue'
@@ -88,6 +89,8 @@ import MainTitle from '../components/MainTitle.vue'
 
 import TopicSegment from '../components/TopicSegment.vue'
 
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
+
 export default {
     name: 'TopicHierarchy',
     components: {
@@ -125,7 +128,7 @@ export default {
     },
     computed: {
         ...mapGetters('account', ['featuresCheck', 'team']),
-        ...mapGetters('product', ['brokerExpandedTopics']),
+        ...mapState(useProductBrokersStore, ['brokerExpandedTopics']),
         brokerId () {
             return this.$route.params.brokerId
         },
@@ -217,7 +220,7 @@ export default {
             set (segment) {
                 const keys = segment.topic.split('/')
                 let current = this.hierarchy
-                this.$store.dispatch('product/handleBrokerTopicState', { topic: segment.topic, brokerId: this.brokerId })
+                this.handleBrokerTopicState({ topic: segment.topic, brokerId: this.brokerId })
 
                 for (let i = 0; i < keys.length; i++) {
                     const key = keys[i]
@@ -253,6 +256,7 @@ export default {
         }
     },
     methods: {
+        ...mapActions(useProductBrokersStore, ['handleBrokerTopicState']),
         checkIfTopicOpen (topic) {
             return Object.prototype.hasOwnProperty.call(this.expandedTopics, topic)
         },

frontend/src/pages/team/Brokers/NewBroker.vue

@@ -4,10 +4,13 @@
 
 <script>
 
+import { mapActions } from 'pinia'
 import { mapGetters } from 'vuex'
 
 import BrokerForm from './components/BrokerForm.vue'
 
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
+
 export default {
     name: 'NewBroker',
     components: { BrokerForm },
@@ -20,8 +23,9 @@ export default {
         }
     },
     methods: {
+        ...mapActions(useProductBrokersStore, ['createBroker']),
         onSubmit (payload) {
-            return this.$store.dispatch('product/createBroker', payload)
+            return this.createBroker(payload)
                 .then(res => this.$router.push({
                     name: 'team-brokers-hierarchy',
                     params: { brokerId: res.id }

frontend/src/pages/team/Brokers/Settings/index.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import Alerts from '../../../../services/alerts.js'
 
@@ -15,6 +15,8 @@ import Dialog from '../../../../services/dialog.js'
 import BrokerError from '../components/BrokerError.vue'
 import BrokerForm from '../components/BrokerForm.vue'
 
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
+
 export default {
     name: 'BrokerSettings',
     components: { BrokerForm, BrokerError },
@@ -30,8 +32,8 @@ export default {
     },
     emits: ['broker-updated'],
     computed: {
-        ...mapGetters('product', ['hasFfUnsClients']),
-        ...mapState('product', {
+        ...mapState(useProductBrokersStore, ['hasFfUnsClients']),
+        ...mapState(useProductBrokersStore, {
             brokers: state => state.UNS.brokers
         }),
         activeBroker () {
@@ -52,7 +54,7 @@ export default {
                 .catch(e => e)
         },
         deleteBroker () {
-            return this.$store.dispatch('product/deleteBroker', this.activeBroker.id)
+            return useProductBrokersStore().deleteBroker(this.activeBroker.id)
                 .then(() => {
                     let name = 'team-brokers'
 
@@ -67,7 +69,7 @@ export default {
             if (payload.credentials.username.length && payload.credentials.password.length) {
                 delete payload.credentials
             }
-            return this.$store.dispatch('product/updateBroker', { payload, brokerId: this.activeBroker.id })
+            return useProductBrokersStore().updateBroker({ payload, brokerId: this.activeBroker.id })
                 .then((res) => {
                     this.$emit('broker-updated')
                     Alerts.emit(`Broker ${res.name} updated successfully.`, 'confirmation')

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

@@ -77,7 +77,8 @@
 <script>
 
 import { PlusIcon } from '@heroicons/vue/outline'
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
+import { mapGetters } from 'vuex'
 
 import brokerAPI from '../../../api/broker.js'
 
@@ -89,6 +90,8 @@ import { Roles } from '../../../utils/roles.js'
 
 import BrokerStatusBadge from './components/BrokerStatusBadge.vue'
 
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
+
 export default {
     name: 'TeamBrokers',
     components: { BrokerStatusBadge, FfLoading, EmptyState, PlusIcon },
@@ -112,8 +115,8 @@ export default {
     },
     computed: {
         ...mapGetters('account', ['featuresCheck', 'team', 'pendingTeamChange']),
-        ...mapGetters('product', ['hasFfUnsClients', 'hasBrokers']),
-        ...mapState('product', {
+        ...mapState(useProductBrokersStore, ['hasFfUnsClients', 'hasBrokers']),
+        ...mapState(useProductBrokersStore, {
             brokers: state => state.UNS.brokers
         }),
         activeBrokerId: {
@@ -293,13 +296,13 @@ export default {
         this.clearBrokerStatusPollingInterval()
     },
     methods: {
-        ...mapActions('product', ['fetchUnsClients']),
+        ...mapActions(useProductBrokersStore, ['fetchUnsClients', 'getBrokers', 'clearUns']),
         async fetchData () {
             this.loading = true
             if (this.featuresCheck.isMqttBrokerFeatureEnabled) {
-                return this.$store.dispatch('product/fetchUnsClients')
+                return this.fetchUnsClients()
                     .catch(err => console.error(err))
-                    .then(() => this.$store.dispatch('product/getBrokers'))
+                    .then(() => this.getBrokers())
                     .then(() => {
                         if (
                             Object.prototype.hasOwnProperty.call(this.$route.params, 'brokerId') &&
@@ -348,9 +351,6 @@ export default {
                  // no redirect
             }
         },
-        clearUns () {
-            this.$store.dispatch('product/clearUns')
-        },
         getBrokerState () {
             return brokerAPI.getBrokerStatus(this.team.id, this.activeBrokerId)
                 .then(response => {

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

@@ -12,6 +12,7 @@ import product from '../../../services/product.js'
 
 import { useContextStore } from '@/stores/context.js'
 import { useProductAssistantStore } from '@/stores/product-assistant.js'
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
 import { useProductExpertInsightsAgentStore } from '@/stores/product-expert-insights-agent.js'
 import { useProductExpertOperatorAgentStore } from '@/stores/product-expert-operator-agent.js'
 import { useProductExpertStore } from '@/stores/product-expert.js'
@@ -531,7 +532,7 @@ const actions = {
                     useUxStore().$reset()
                     useContextStore().$reset()
                     useProductTablesStore().$reset()
-                    // Task 7:  useProductBrokersStore().$reset()
+                    useProductBrokersStore().$reset()
                     useProductAssistantStore().$reset()
                     useProductExpertInsightsAgentStore().$reset()
                     useProductExpertOperatorAgentStore().$reset()