Broker Topic Hierarchy UI

frontend/src/api/broker.js

@@ -30,10 +30,16 @@ const updateClient = (teamId, username, { acls, password }) => {
     }).then(res => res.data)
 }
 
+const getTopics = (teamId) => {
+    return client.get(`/api/v1/teams/${teamId}/broker/topics`)
+        .then(res => res.data)
+}
+
 export default {
     getClients,
     getClient,
     createClient,
     updateClient,
-    deleteClient
+    deleteClient,
+    getTopics
 }

frontend/src/composables/Permissions.js

@@ -1,36 +1,44 @@
-// import { useStore } from 'vuex'
+import { useStore } from 'vuex'
 
 import { Permissions } from '../../../forge/lib/permissions.js'
 import { Roles } from '../utils/roles.js'
+
+/**
+ * Fixes reactivity issue with the useStore utility but throws a warning while in dev mode
+ * [Vue warn]: inject() can only be used inside setup() or functional components
+ * Since teamMembership is defined outside the composable function and updated conditionally in usePermissions()
+ *
+ * The initialized store returns undefined upon switching teams and looses reactivity afterward. This should
+ * warrant more investigations, as this usually happens when the entire store is re-written.
+ *
+ * @type {{role: number}}
+ */
+let teamMembership = { role: 0 }
+
 /**
  * @typedef {0 | 5 | 10 | 30 | 50 | 99} Role
  * Enum for roles with specific numeric values.
  */
-
 export default function usePermissions () {
-    // todo There's a reactivity problem I can't figure out with the useStore utility and our account store when switching
-    //  teams. The initialized store returns undefined upon switching teams and looses reactivity afterwards. This should
-    //  warrant more investigations, as this usually happens when the entire store is re-written. The teamMembership arguments
-    //  should be disposed asap
+    const store = useStore()
 
-    // const store = useStore()
-    // const teamMembership = store.state.account.teamMembership
+    if (store && store?.state?.account?.teamMembership) {
+        teamMembership = store?.state?.account?.teamMembership
+    }
 
     /**
-     * @param teamMembership
-     * @returns {boolean}
-     */
-    const isVisitingAdmin = (teamMembership) => {
-        return teamMembership === Roles.Admin
+         * @returns {boolean}
+         */
+    const isVisitingAdmin = () => {
+        return teamMembership.role === Roles.Admin
     }
 
     /**
-     *
-     * @param scope
-     * @param teamMembership
-     * @returns {boolean}
-     */
-    const hasPermission = (scope, teamMembership) => {
+         *
+         * @param scope
+         * @returns {boolean}
+         */
+    const hasPermission = (scope) => {
         if (!Permissions[scope]) {
             throw new Error(`Unrecognised scope requested: '${scope}'`)
         }
@@ -48,33 +56,31 @@ export default function usePermissions () {
     }
 
     /**
-     * Check if the user has the minimum required role.
-     * @param {Role} role - The role to check against.
-     * @param teamMembership
-     * @returns {boolean} True if the user has the minimum required role, otherwise false.
-     * @example
-     * // Check if the user has at least the 'Member' role
-     * const isMemberOrHigher = hasAMinimumTeamRoleOf(Roles.Member)
-     */
-    const hasAMinimumTeamRoleOf = (role, teamMembership) => {
-        if (isVisitingAdmin(teamMembership?.role)) {
+         * Check if the user has the minimum required role.
+         * @param {Role} role - The role to check against.
+         * @returns {boolean} True if the user has the minimum required role, otherwise false.
+         * @example
+         * // Check if the user has at least the 'Member' role
+         * const isMemberOrHigher = hasAMinimumTeamRoleOf(Roles.Member)
+         */
+    const hasAMinimumTeamRoleOf = (role) => {
+        if (isVisitingAdmin()) {
             return true
         }
 
         return teamMembership?.role >= role
     }
 
     /**
-     * Check if the user has a lower role than given role.
-     * @param {Role} role - The role to check against.
-     * @param teamMembership
-     * @returns {boolean} True if the user has a lower role than the given one, otherwise false.
-     * @example
-     * // Check if the user has role lower than 'Member' role
-     * const isMemberOrHigher = hasALowerTeamRoleThan(Roles.Member)
-     */
-    const hasALowerOrEqualTeamRoleThan = (role, teamMembership) => {
-        if (isVisitingAdmin(teamMembership?.role)) {
+         * Check if the user has a lower role than given role.
+         * @param {Role} role - The role to check against.
+         * @returns {boolean} True if the user has a lower role than the given one, otherwise false.
+         * @example
+         * // Check if the user has role lower than 'Member' role
+         * const isMemberOrHigher = hasALowerTeamRoleThan(Roles.Member)
+         */
+    const hasALowerOrEqualTeamRoleThan = (role) => {
+        if (isVisitingAdmin()) {
             return true
         }
 

frontend/src/mixins/Permissions.js

@@ -6,25 +6,20 @@ import usePermissions from '../composables/Permissions.js'
  * @typedef {0 | 5 | 10 | 30 | 50 | 99} Role
  * Enum for roles with specific numeric values.
  */
-
-/**
- * @typedef {0 | 5 | 10 | 30 | 50 | 99} Role
- * Enum for roles with specific numeric values.
- */
-
+// todo in an attempt to sunset the wide use of mixins, the permissions composable should be used instead
 export default {
     computed: {
+        // todo to be removed. A lot of components that use this mixin rely on the state imported here
         ...mapState('account', ['team', 'teamMembership']),
-
         isVisitingAdmin () {
             const { isVisitingAdmin } = usePermissions()
-            return isVisitingAdmin(this.teamMembership?.role)
+            return isVisitingAdmin()
         }
     },
     methods: {
         hasPermission (scope) {
             const { hasPermission } = usePermissions()
-            return hasPermission(scope, this.teamMembership)
+            return hasPermission(scope)
         },
 
         /**
@@ -37,7 +32,7 @@ export default {
          */
         hasAMinimumTeamRoleOf (role) {
             const { hasAMinimumTeamRoleOf } = usePermissions()
-            return hasAMinimumTeamRoleOf(role, this.teamMembership)
+            return hasAMinimumTeamRoleOf(role)
         },
 
         /**
@@ -50,7 +45,7 @@ export default {
          */
         hasALowerOrEqualTeamRoleThan (role) {
             const { hasALowerOrEqualTeamRoleThan } = usePermissions()
-            return hasALowerOrEqualTeamRoleThan(role, this.teamMembership)
+            return hasALowerOrEqualTeamRoleThan(role)
         }
     }
 }

frontend/src/pages/team/Broker/components/BrokerClient.vue → frontend/src/pages/team/UNS/Clients/components/BrokerClient.vue

@@ -47,11 +47,12 @@
 
 <script>
 import { PencilIcon, TrashIcon } from '@heroicons/vue/outline'
+import { mapState } from 'vuex'
 
-import FfAccordion from '../../../../components/Accordion.vue'
-import TextCopier from '../../../../components/TextCopier.vue'
-import permissionsMixin from '../../../../mixins/Permissions.js'
-import { Roles } from '../../../../utils/roles.js'
+import FfAccordion from '../../../../../components/Accordion.vue'
+import TextCopier from '../../../../../components/TextCopier.vue'
+import usePermissions from '../../../../../composables/Permissions.js'
+import { Roles } from '../../../../../utils/roles.js'
 
 import BrokerAclRule from './BrokerAclRule.vue'
 
@@ -64,15 +65,22 @@ export default {
         FfAccordion,
         TrashIcon
     },
-    mixins: [permissionsMixin],
     props: {
         client: {
             required: true,
             type: Object
         }
     },
     emits: ['edit-client', 'delete-client'],
+    setup () {
+        const { hasAMinimumTeamRoleOf } = usePermissions()
+
+        return {
+            hasAMinimumTeamRoleOf
+        }
+    },
     computed: {
+        ...mapState('account', ['team']),
         Roles () {
             return Roles
         }

frontend/src/pages/team/Broker/dialogs/AclItem.vue → frontend/src/pages/team/UNS/Clients/dialogs/AclItem.vue

@@ -30,8 +30,8 @@
 <script>
 import { MinusIcon } from '@heroicons/vue/solid'
 
-import FormRow from '../../../../components/FormRow.vue'
-import FfListbox from '../../../../ui-components/components/form/ListBox.vue'
+import FormRow from '../../../../../components/FormRow.vue'
+import FfListbox from '../../../../../ui-components/components/form/ListBox.vue'
 
 export default {
     name: 'AclItem',

frontend/src/pages/team/Broker/dialogs/ClientDialog.vue → frontend/src/pages/team/UNS/Clients/dialogs/ClientDialog.vue

@@ -73,9 +73,9 @@
 import { PlusIcon } from '@heroicons/vue/solid'
 import { mapState } from 'vuex'
 
-import brokerApi from '../../../../api/broker.js'
-import FormRow from '../../../../components/FormRow.vue'
-import { generateUuid } from '../../../../composables/String.js'
+import brokerApi from '../../../../../api/broker.js'
+import FormRow from '../../../../../components/FormRow.vue'
+import { generateUuid } from '../../../../../composables/String.js'
 
 import AclItem from './AclItem.vue'
 

frontend/src/pages/team/Broker/index.vue → frontend/src/pages/team/UNS/Clients/index.vue

@@ -1,29 +1,17 @@
 <template>
-    <ff-page>
-        <template #header>
-            <ff-page-header title="MQTT Broker">
-                <template #context>
-                    Central hub for managing MQTT clients and defining ACL-based topic permissions.
-                </template>
-                <template #pictogram>
-                    <img alt="info" src="../../../images/pictograms/mqtt_broker_red.png">
-                </template>
-                <template #helptext>
-                    <p>The <b>MQTT Broker</b> page offers a streamlined interface for managing your broker instance and defining client connections.</p>
-                    <p>You can create and manage MQTT clients, each with customizable Access Control List (ACL) rules to ensure secure and controlled communication. The ACL rules allow for fine-grained control over each client’s access to specific topics, supporting both publishing and subscribing actions.</p>
-                    <p>This overview provides a clear and organized view of your broker’s configuration, helping you manage client connections, security settings, and message flow efficiently.</p>
-                    <p>Documentation <a href="https://flowfuse.com/docs/user/teambroker" target="_blank">here</a></p>
-                </template>
-            </ff-page-header>
-        </template>
+    <div class="unified-namespace-clients">
+        <div class="title mb-5 flex gap-3 items-center">
+            <RssIcon class="ff-icon-sm" />
+            <h3 class="m-0" data-el="subtitle">MQTT Broker</h3>
+        </div>
 
         <EmptyState
             v-if="!isMqttBrokerFeatureEnabled"
             :featureUnavailable="!isMqttBrokerFeatureEnabledForPlatform"
             :featureUnavailableToTeam="!isMqttBrokerFeatureEnabledForTeam"
         >
             <template #img>
-                <img src="../../../images/empty-states/mqtt-forbidden.png" alt="pipelines-logo">
+                <img src="../../../../images/empty-states/mqtt-forbidden.png" alt="pipelines-logo">
             </template>
             <template #header>
                 <span>Broker Not Available</span>
@@ -82,7 +70,7 @@
                     </section>
                     <EmptyState v-else>
                         <template #img>
-                            <img src="../../../images/empty-states/mqtt-empty.png" alt="logo">
+                            <img src="../../../../images/empty-states/mqtt-empty.png" alt="logo">
                         </template>
                         <template #header>Create your first Broker Client</template>
                         <template #message>
@@ -112,32 +100,33 @@
                 @client-updated="fetchData"
             />
         </template>
-    </ff-page>
+    </div>
 </template>
 
 <script>
-import { PlusSmIcon, SearchIcon } from '@heroicons/vue/outline'
+import { PlusSmIcon, RssIcon, SearchIcon } from '@heroicons/vue/outline'
 import { mapState } from 'vuex'
 
-import brokerApi from '../../../api/broker.js'
-import EmptyState from '../../../components/EmptyState.vue'
-import clipboardMixin from '../../../mixins/Clipboard.js'
-import featuresMixin from '../../../mixins/Features.js'
-import permissionsMixin from '../../../mixins/Permissions.js'
-import Alerts from '../../../services/alerts.js'
-import Dialog from '../../../services/dialog.js'
-import { Roles } from '../../../utils/roles.js'
+import brokerApi from '../../../../api/broker.js'
+import EmptyState from '../../../../components/EmptyState.vue'
+import clipboardMixin from '../../../../mixins/Clipboard.js'
+import featuresMixin from '../../../../mixins/Features.js'
+import permissionsMixin from '../../../../mixins/Permissions.js'
+import Alerts from '../../../../services/alerts.js'
+import Dialog from '../../../../services/dialog.js'
+import { Roles } from '../../../../utils/roles.js'
 
 import BrokerClient from './components/BrokerClient.vue'
 
 import ClientDialog from './dialogs/ClientDialog.vue'
 
 export default {
-    name: 'TeamBroker',
+    name: 'UNSClients',
     components: {
         BrokerClient,
         SearchIcon,
         PlusSmIcon,
+        RssIcon,
         EmptyState,
         ClientDialog
     },
@@ -168,9 +157,6 @@ export default {
         team: 'fetchData'
     },
     mounted () {
-        if (!this.hasAMinimumTeamRoleOf(Roles.Member)) {
-            return this.$router.push({ name: 'Home' })
-        }
         this.fetchData()
     },
     methods: {