From 8c0ccb10fbc21a75db52d544c6bc07e20afdae35 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 12 Nov 2024 17:37:59 +0200
Subject: [PATCH 01/21] add uns scaffolding

---
 .../Clients}/components/BrokerAclRule.vue     |  0
 .../Clients}/components/BrokerClient.vue      |  8 ++--
 .../Clients}/dialogs/AclItem.vue              |  4 +-
 .../Clients}/dialogs/ClientDialog.vue         |  6 +--
 .../team/{Broker => UNS/Clients}/index.vue    | 42 +++++++------------
 .../src/pages/team/UNS/Hierarchy/index.vue    | 16 +++++++
 frontend/src/pages/team/UNS/index.vue         | 40 ++++++++++++++++++
 frontend/src/pages/team/routes.js             | 34 +++++++++++----
 frontend/src/store/ux.js                      |  4 +-
 9 files changed, 108 insertions(+), 46 deletions(-)
 rename frontend/src/pages/team/{Broker => UNS/Clients}/components/BrokerAclRule.vue (100%)
 rename frontend/src/pages/team/{Broker => UNS/Clients}/components/BrokerClient.vue (94%)
 rename frontend/src/pages/team/{Broker => UNS/Clients}/dialogs/AclItem.vue (95%)
 rename frontend/src/pages/team/{Broker => UNS/Clients}/dialogs/ClientDialog.vue (98%)
 rename frontend/src/pages/team/{Broker => UNS/Clients}/index.vue (81%)
 create mode 100644 frontend/src/pages/team/UNS/Hierarchy/index.vue
 create mode 100644 frontend/src/pages/team/UNS/index.vue

diff --git a/frontend/src/pages/team/Broker/components/BrokerAclRule.vue b/frontend/src/pages/team/UNS/Clients/components/BrokerAclRule.vue
similarity index 100%
rename from frontend/src/pages/team/Broker/components/BrokerAclRule.vue
rename to frontend/src/pages/team/UNS/Clients/components/BrokerAclRule.vue
diff --git a/frontend/src/pages/team/Broker/components/BrokerClient.vue b/frontend/src/pages/team/UNS/Clients/components/BrokerClient.vue
similarity index 94%
rename from frontend/src/pages/team/Broker/components/BrokerClient.vue
rename to frontend/src/pages/team/UNS/Clients/components/BrokerClient.vue
index c41b264c33..a3717e4f3a 100644
--- a/frontend/src/pages/team/Broker/components/BrokerClient.vue
+++ b/frontend/src/pages/team/UNS/Clients/components/BrokerClient.vue
@@ -48,10 +48,10 @@
 <script>
 import { PencilIcon, TrashIcon } from '@heroicons/vue/outline'
 
-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 permissionsMixin from '../../../../../mixins/Permissions.js'
+import { Roles } from '../../../../../utils/roles.js'
 
 import BrokerAclRule from './BrokerAclRule.vue'
 
diff --git a/frontend/src/pages/team/Broker/dialogs/AclItem.vue b/frontend/src/pages/team/UNS/Clients/dialogs/AclItem.vue
similarity index 95%
rename from frontend/src/pages/team/Broker/dialogs/AclItem.vue
rename to frontend/src/pages/team/UNS/Clients/dialogs/AclItem.vue
index cf5c038352..a7749c4bdd 100644
--- a/frontend/src/pages/team/Broker/dialogs/AclItem.vue
+++ b/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',
diff --git a/frontend/src/pages/team/Broker/dialogs/ClientDialog.vue b/frontend/src/pages/team/UNS/Clients/dialogs/ClientDialog.vue
similarity index 98%
rename from frontend/src/pages/team/Broker/dialogs/ClientDialog.vue
rename to frontend/src/pages/team/UNS/Clients/dialogs/ClientDialog.vue
index 7dd9cf473b..fe583187a9 100644
--- a/frontend/src/pages/team/Broker/dialogs/ClientDialog.vue
+++ b/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'
 
diff --git a/frontend/src/pages/team/Broker/index.vue b/frontend/src/pages/team/UNS/Clients/index.vue
similarity index 81%
rename from frontend/src/pages/team/Broker/index.vue
rename to frontend/src/pages/team/UNS/Clients/index.vue
index 60a87fe0c3..4fdde3e963 100644
--- a/frontend/src/pages/team/Broker/index.vue
+++ b/frontend/src/pages/team/UNS/Clients/index.vue
@@ -1,20 +1,6 @@
 <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>
-                </template>
-            </ff-page-header>
-        </template>
+    <div class="unified-namespace-clients">
+        <h3>MQTT Broker</h3>
 
         <EmptyState
             v-if="!isMqttBrokerFeatureEnabled"
@@ -22,7 +8,7 @@
             :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>
@@ -81,7 +67,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>
@@ -111,28 +97,28 @@
                 @client-updated="fetchData"
             />
         </template>
-    </ff-page>
+    </div>
 </template>
 
 <script>
 import { PlusSmIcon, 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,
diff --git a/frontend/src/pages/team/UNS/Hierarchy/index.vue b/frontend/src/pages/team/UNS/Hierarchy/index.vue
new file mode 100644
index 0000000000..fa7b7b782b
--- /dev/null
+++ b/frontend/src/pages/team/UNS/Hierarchy/index.vue
@@ -0,0 +1,16 @@
+<template>
+    <div class="unified-namespace-hierarchy">
+        <h3>Topic Hierarchy</h3>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'UNSHierarchy'
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/frontend/src/pages/team/UNS/index.vue b/frontend/src/pages/team/UNS/index.vue
new file mode 100644
index 0000000000..1b10183d9c
--- /dev/null
+++ b/frontend/src/pages/team/UNS/index.vue
@@ -0,0 +1,40 @@
+<template>
+    <ff-page>
+        <template #header>
+            <ff-page-header title="Unified Namespace" :tabs="tabs">
+                <template #context>
+                    A list of all MQTT Brokers available to your team and configurable within FlowFuse.
+                </template>
+                <template #pictogram>
+                    <img alt="info" src="../../../images/pictograms/mqtt_broker_red.png">
+                </template>
+                <template #helptext>
+                    <p>The <b>Unified Namespace (UNS)</b> feature provides a centralized framework for managing and visualizing your entire data ecosystem, consolidating MQTT broker instances and topic structures within a single interface.</p>
+                    <p>Within the UNS, <b>Client</b> page enables seamless client management with customizable Access Control List (ACL) rules for secure and controlled data flow. The topic <b>Hierarchy</b> offers a clear, organized visualization of topic structures, providing fine-grained control over publishing and subscribing permissions.</p>
+                    <p>Together, these components deliver an integrated approach to managing client connections, security settings, and message flow, supporting efficient and secure data communication across your system.</p>
+                </template>
+            </ff-page-header>
+        </template>
+
+        <router-view />
+    </ff-page>
+</template>
+
+<script>
+
+export default {
+    name: 'UnifiedNameSpace',
+    computed: {
+        tabs () {
+            return [
+                { label: 'Hierarchy', to: { name: 'team-namespace-hierarchy' }, tag: 'team-namespace-hierarchy' },
+                { label: 'Clients', to: { name: 'team-namespace-clients' }, tag: 'team-namespace-clients' }
+            ]
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/frontend/src/pages/team/routes.js b/frontend/src/pages/team/routes.js
index a38971579c..5366ef5287 100644
--- a/frontend/src/pages/team/routes.js
+++ b/frontend/src/pages/team/routes.js
@@ -3,7 +3,6 @@ import ensurePermission from '../../utils/ensurePermission.js'
 import TeamApplications from './Applications/index.vue'
 import TeamAuditLog from './AuditLog.vue'
 import TeamBilling from './Billing.vue'
-import Broker from './Broker/index.vue'
 import TeamDevices from './Devices/index.vue'
 import TeamInstances from './Instances.vue'
 import Library from './Library/index.vue'
@@ -15,6 +14,9 @@ import TeamSettingsDanger from './Settings/Danger.vue'
 import TeamSettingsDevices from './Settings/Devices.vue'
 import TeamSettingsGeneral from './Settings/General.vue'
 import TeamSettings from './Settings/index.vue'
+import UNSClients from './UNS/Clients/index.vue'
+import UNSHierarchy from './UNS/Hierarchy/index.vue'
+import UnifiedNameSpace from './UNS/index.vue'
 import ChangeTeamType from './changeType.vue'
 import CreateTeam from './create.vue'
 import CreateApplication from './createApplication.vue'
@@ -84,7 +86,6 @@ export default [
                             }
                         ]
                     },
-
                     {
                         name: 'TeamDevices',
                         path: 'devices',
@@ -104,12 +105,31 @@ export default [
                         children: [...LibraryRoutes]
                     },
                     {
-                        name: 'TeamBroker',
-                        path: 'broker',
-                        component: Broker,
+                        name: 'team-unified-namespace',
+                        path: 'unified-namespace',
+                        component: UnifiedNameSpace,
+                        redirect: { name: 'team-namespace-hierarchy' },
                         meta: {
-                            title: 'Team - Broker'
-                        }
+                            title: 'Team - Unified Namespace'
+                        },
+                        children: [
+                            {
+                                name: 'team-namespace-hierarchy',
+                                path: 'hierarchy',
+                                component: UNSHierarchy,
+                                meta: {
+                                    title: 'Team - Unified Namespace Hierarchy'
+                                }
+                            },
+                            {
+                                name: 'team-namespace-clients',
+                                path: 'clients',
+                                component: UNSClients,
+                                meta: {
+                                    title: 'Team - Unified Namespace Clients'
+                                }
+                            }
+                        ]
                     },
                     {
                         name: 'team-members',
diff --git a/frontend/src/store/ux.js b/frontend/src/store/ux.js
index 833626f4ad..33eaa97ca6 100644
--- a/frontend/src/store/ux.js
+++ b/frontend/src/store/ux.js
@@ -82,8 +82,8 @@ const getters = {
                     hidden: !hasAMinimumTeamRoleOf(Roles.Viewer, teamMembership),
                     entries: [
                         {
-                            label: 'Broker',
-                            to: { name: 'TeamBroker', params: { team_slug: team.slug } },
+                            label: 'UNS',
+                            to: { name: 'team-unified-namespace', params: { team_slug: team.slug } },
                             tag: 'team-broker',
                             icon: RssIcon,
                             disabled: noBilling,

From 1159131f7edbac494779a00291828cd27a38ceb1 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Wed, 13 Nov 2024 17:06:17 +0200
Subject: [PATCH 02/21] address useStore utility reactivity in composables

---
 frontend/src/composables/Permissions.js       | 84 ++++++++++---------
 frontend/src/mixins/Permissions.js            | 17 ++--
 .../UNS/Clients/components/BrokerClient.vue   | 12 ++-
 frontend/src/store/account.js                 |  4 +-
 frontend/src/store/ux.js                      | 20 ++---
 5 files changed, 72 insertions(+), 65 deletions(-)

diff --git a/frontend/src/composables/Permissions.js b/frontend/src/composables/Permissions.js
index ea55d2f6e5..601489b793 100644
--- a/frontend/src/composables/Permissions.js
+++ b/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,16 +56,15 @@ 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
         }
 
@@ -65,16 +72,15 @@ export default function usePermissions () {
     }
 
     /**
-     * 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
         }
 
diff --git a/frontend/src/mixins/Permissions.js b/frontend/src/mixins/Permissions.js
index 5192ba4ae3..0d7357f82e 100644
--- a/frontend/src/mixins/Permissions.js
+++ b/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)
         }
     }
 }
diff --git a/frontend/src/pages/team/UNS/Clients/components/BrokerClient.vue b/frontend/src/pages/team/UNS/Clients/components/BrokerClient.vue
index a3717e4f3a..538c822edc 100644
--- a/frontend/src/pages/team/UNS/Clients/components/BrokerClient.vue
+++ b/frontend/src/pages/team/UNS/Clients/components/BrokerClient.vue
@@ -47,10 +47,11 @@
 
 <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 usePermissions from '../../../../../composables/Permissions.js'
 import { Roles } from '../../../../../utils/roles.js'
 
 import BrokerAclRule from './BrokerAclRule.vue'
@@ -64,7 +65,6 @@ export default {
         FfAccordion,
         TrashIcon
     },
-    mixins: [permissionsMixin],
     props: {
         client: {
             required: true,
@@ -72,7 +72,15 @@ export default {
         }
     },
     emits: ['edit-client', 'delete-client'],
+    setup () {
+        const { hasAMinimumTeamRoleOf } = usePermissions()
+
+        return {
+            hasAMinimumTeamRoleOf
+        }
+    },
     computed: {
+        ...mapState('account', ['team']),
         Roles () {
             return Roles
         }
diff --git a/frontend/src/store/account.js b/frontend/src/store/account.js
index fdb2a7bacc..5f36634022 100644
--- a/frontend/src/store/account.js
+++ b/frontend/src/store/account.js
@@ -137,7 +137,7 @@ const getters = {
             // Custom Catalogs
             isCustomCatalogsFeatureEnabledForPlatform: !!state.features?.customCatalogs,
             isCustomCatalogsFeatureEnabledForTeam: ((state) => {
-                const flag = state.team?.type.properties.features?.customCatalogs
+                const flag = state.team?.type?.properties.features?.customCatalogs
                 return flag === undefined || flag
             })(state),
 
@@ -147,7 +147,7 @@ const getters = {
 
             // HTTP BearerTokens
             isHTTPBearerTokensFeatureEnabledForPlatform: !!state.settings?.features.httpBearerTokens,
-            isHTTPBearerTokensFeatureEnabledForTeam: !!state.team?.type.properties.features.teamHttpSecurity,
+            isHTTPBearerTokensFeatureEnabledForTeam: !!state.team?.type?.properties.features.teamHttpSecurity,
 
             // BOM
             isBOMFeatureEnabledForPlatform: !!state.features?.bom,
diff --git a/frontend/src/store/ux.js b/frontend/src/store/ux.js
index 33eaa97ca6..cc229ca0e1 100644
--- a/frontend/src/store/ux.js
+++ b/frontend/src/store/ux.js
@@ -38,7 +38,6 @@ const getters = {
     mainNavContexts: function (state, getters, rootState, rootGetters) {
         const { hasALowerOrEqualTeamRoleThan, hasAMinimumTeamRoleOf, hasPermission } = usePermissions()
         const team = rootState.account.team
-        const teamMembership = rootState.account.teamMembership
         const accountFeatures = rootState.account.features
         const noBilling = rootGetters['account/noBilling']
         const features = rootGetters['account/featuresCheck']
@@ -46,7 +45,7 @@ const getters = {
             team: [
                 {
                     title: '',
-                    hidden: !hasAMinimumTeamRoleOf(Roles.Viewer, teamMembership),
+                    hidden: !hasAMinimumTeamRoleOf(Roles.Viewer),
                     entries: [
                         {
                             label: 'Applications',
@@ -59,7 +58,7 @@ const getters = {
                 },
                 {
                     title: 'Instances',
-                    hidden: !hasAMinimumTeamRoleOf(Roles.Viewer, teamMembership),
+                    hidden: !hasAMinimumTeamRoleOf(Roles.Viewer),
                     entries: [
                         {
                             label: 'Hosted Instances',
@@ -79,7 +78,7 @@ const getters = {
                 },
                 {
                     title: 'Operations',
-                    hidden: !hasAMinimumTeamRoleOf(Roles.Viewer, teamMembership),
+                    hidden: !hasAMinimumTeamRoleOf(Roles.Viewer),
                     entries: [
                         {
                             label: 'UNS',
@@ -88,13 +87,13 @@ const getters = {
                             icon: RssIcon,
                             disabled: noBilling,
                             featureUnavailable: !features.isMqttBrokerFeatureEnabled,
-                            hidden: hasALowerOrEqualTeamRoleThan(Roles.Member, teamMembership) && features.isMqttBrokerFeatureEnabledForPlatform
+                            hidden: hasALowerOrEqualTeamRoleThan(Roles.Member) && features.isMqttBrokerFeatureEnabledForPlatform
                         }
                     ]
                 },
                 {
                     title: 'Team Management',
-                    hidden: !hasAMinimumTeamRoleOf(Roles.Viewer, teamMembership),
+                    hidden: !hasAMinimumTeamRoleOf(Roles.Viewer),
                     entries: [
                         {
                             label: 'Library',
@@ -115,7 +114,7 @@ const getters = {
                 },
                 {
                     title: 'Team Admin',
-                    hidden: !hasAMinimumTeamRoleOf(Roles.Viewer, teamMembership),
+                    hidden: !hasAMinimumTeamRoleOf(Roles.Viewer),
                     permission: '',
                     entries: [
                         {
@@ -139,7 +138,7 @@ const getters = {
 
                                 // team members that are part of teams that have suspended/no billing setup are forcibly redirected
                                 // to the billing page (even if they don't have permissions to normally access the billing page)
-                                return !!accountFeatures?.billing && hasPermission('team:edit', teamMembership)
+                                return !!accountFeatures?.billing && hasPermission('team:edit')
                             })()
                         },
                         {
@@ -292,7 +291,6 @@ const getters = {
         }
 
         const { hasPermission } = usePermissions()
-        const teamMembership = rootState.account.teamMembership
 
         return getters.mainNavContexts[state.mainNav.context]
             .map(category => {
@@ -303,7 +301,7 @@ const getters = {
                 category.entries = category.entries.filter(entry => {
                     const hasPermissionKey = Object.prototype.hasOwnProperty.call(entry, 'permission')
                     if (hasPermissionKey && entry.permission.length > 0) {
-                        return hasPermission(entry.permission, teamMembership)
+                        return hasPermission(entry.permission)
                     } return true
                 })
 
@@ -312,7 +310,7 @@ const getters = {
             .filter(category => { // filter categories without permission
                 const hasPermissionKey = Object.prototype.hasOwnProperty.call(category, 'permission')
                 if (hasPermissionKey && category.permission.length > 0) {
-                    return hasPermission(category.permission, teamMembership)
+                    return hasPermission(category.permission)
                 } return true
             })
             .filter(category => Object.prototype.hasOwnProperty.call(category, 'hidden') ? !category.hidden : true) // filter hidden categories

From 3c0e7bccb294eb97360d2f2cfd6d4c66cc8972fc Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 15 Nov 2024 11:23:24 +0200
Subject: [PATCH 03/21] add page icons

---
 frontend/src/images/icons/tree-view.svg         | 16 ++++++++++++++++
 frontend/src/pages/team/UNS/Clients/index.vue   |  8 ++++++--
 frontend/src/pages/team/UNS/Hierarchy/index.vue |  5 ++++-
 3 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/images/icons/tree-view.svg

diff --git a/frontend/src/images/icons/tree-view.svg b/frontend/src/images/icons/tree-view.svg
new file mode 100644
index 0000000000..17ba5b10da
--- /dev/null
+++ b/frontend/src/images/icons/tree-view.svg
@@ -0,0 +1,16 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_5217_7949" fill="white">
+<rect x="1" y="1" width="8" height="5" rx="1"/>
+</mask>
+<rect x="1" y="1" width="8" height="5" rx="1" stroke="#1F2937" stroke-width="3" mask="url(#path-1-inside-1_5217_7949)"/>
+<mask id="path-2-inside-2_5217_7949" fill="white">
+<rect x="11" y="14" width="8" height="5" rx="1"/>
+</mask>
+<rect x="11" y="14" width="8" height="5" rx="1" stroke="#1F2937" stroke-width="3" mask="url(#path-2-inside-2_5217_7949)"/>
+<mask id="path-3-inside-3_5217_7949" fill="white">
+<rect x="11" y="8" width="8" height="5" rx="1"/>
+</mask>
+<rect x="11" y="8" width="8" height="5" rx="1" stroke="#1F2937" stroke-width="3" mask="url(#path-3-inside-3_5217_7949)"/>
+<path d="M5 5L5 15.5C5 16.0523 5.44772 16.5 6 16.5H12" stroke="#1F2937" stroke-width="1.5"/>
+<path d="M5 5V9.5C5 10.0523 5.44772 10.5 6 10.5H12" stroke="#1F2937" stroke-width="1.5"/>
+</svg>
diff --git a/frontend/src/pages/team/UNS/Clients/index.vue b/frontend/src/pages/team/UNS/Clients/index.vue
index 4fdde3e963..1e3d59cf0b 100644
--- a/frontend/src/pages/team/UNS/Clients/index.vue
+++ b/frontend/src/pages/team/UNS/Clients/index.vue
@@ -1,6 +1,9 @@
 <template>
     <div class="unified-namespace-clients">
-        <h3>MQTT Broker</h3>
+        <div class="title mb-5 flex gap-3 items-center">
+            <RssIcon class="ff-icon-sm" />
+            <h3 class="m-0">MQTT Broker</h3>
+        </div>
 
         <EmptyState
             v-if="!isMqttBrokerFeatureEnabled"
@@ -101,7 +104,7 @@
 </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'
@@ -123,6 +126,7 @@ export default {
         BrokerClient,
         SearchIcon,
         PlusSmIcon,
+        RssIcon,
         EmptyState,
         ClientDialog
     },
diff --git a/frontend/src/pages/team/UNS/Hierarchy/index.vue b/frontend/src/pages/team/UNS/Hierarchy/index.vue
index fa7b7b782b..771bb375d3 100644
--- a/frontend/src/pages/team/UNS/Hierarchy/index.vue
+++ b/frontend/src/pages/team/UNS/Hierarchy/index.vue
@@ -1,6 +1,9 @@
 <template>
     <div class="unified-namespace-hierarchy">
-        <h3>Topic Hierarchy</h3>
+        <div class="title mb-5 flex gap-3 items-center">
+            <img src="../../../../images/icons/tree-view.svg" alt="tree-icon" class="ff-icon-sm">
+            <h3 class="m-0">Topic Hierarchy</h3>
+        </div>
     </div>
 </template>
 

From 540a7c21b2894782b0a0bdc28f9e72e42fa6a37b Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 15 Nov 2024 11:52:01 +0200
Subject: [PATCH 04/21] add topic api client

---
 frontend/src/api/broker.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/api/broker.js b/frontend/src/api/broker.js
index 5186f99834..8f64efc8e3 100644
--- a/frontend/src/api/broker.js
+++ b/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
 }

From 811e79ca00f49287a03befd56379d691b2dd564d Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 15 Nov 2024 13:10:24 +0200
Subject: [PATCH 05/21] add hierarchy page scaffolding, get topics on page load
 and bare-bone nested topics

---
 .../pages/team/UNS/Hierarchy/TopicSegment.vue |  38 ++++++
 .../src/pages/team/UNS/Hierarchy/index.vue    | 108 +++++++++++++++++-
 2 files changed, 144 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/pages/team/UNS/Hierarchy/TopicSegment.vue

diff --git a/frontend/src/pages/team/UNS/Hierarchy/TopicSegment.vue b/frontend/src/pages/team/UNS/Hierarchy/TopicSegment.vue
new file mode 100644
index 0000000000..242e7ab81d
--- /dev/null
+++ b/frontend/src/pages/team/UNS/Hierarchy/TopicSegment.vue
@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <p>{{ segment }}</p>
+        <div v-if="hasChildren" class="ml-5">
+            <topic-segment
+                v-for="child in Object.keys(children)"
+                :key="child"
+                :segment="child"
+                :children="children[child]"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TopicSegment',
+    props: {
+        segment: {
+            required: true,
+            type: String
+        },
+        children: {
+            required: true,
+            type: Object
+        }
+    },
+    computed: {
+        hasChildren () {
+            return Object.keys(this.children).length > 0
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/frontend/src/pages/team/UNS/Hierarchy/index.vue b/frontend/src/pages/team/UNS/Hierarchy/index.vue
index 771bb375d3..68f2d4b3fb 100644
--- a/frontend/src/pages/team/UNS/Hierarchy/index.vue
+++ b/frontend/src/pages/team/UNS/Hierarchy/index.vue
@@ -4,16 +4,120 @@
             <img src="../../../../images/icons/tree-view.svg" alt="tree-icon" class="ff-icon-sm">
             <h3 class="m-0">Topic Hierarchy</h3>
         </div>
+
+        <EmptyState
+            v-if="!featuresCheck.isMqttBrokerFeatureEnabled"
+            :featureUnavailable="!featuresCheck.isMqttBrokerFeatureEnabledForPlatform"
+            :featureUnavailableToTeam="!featuresCheck.isMqttBrokerFeatureEnabledForTeam"
+        >
+            <template #img>
+                <img src="../../../../images/empty-states/mqtt-forbidden.png" alt="pipelines-logo">
+            </template>
+            <template #header>
+                <span>Topic Hierarchy Not Available</span>
+            </template>
+            <template #message>
+                <p>The <b>Topic Hierarchy</b> offers a clear, organized visualization of topic structures, providing fine-grained control over publishing and subscribing permissions.</p>
+            </template>
+        </EmptyState>
+
+        <template v-else>
+            <div class="space-y-6">
+                <ff-loading v-if="loading" message="Loading Clients..." />
+
+                <template v-else>
+                    <section v-if="topics.length > 0">
+                        <topic-segment
+                            v-for="segment in Object.keys(hierarchy)"
+                            :key="segment"
+                            :segment="segment"
+                            :children="hierarchy[segment]"
+                        />
+                    </section>
+
+                    <EmptyState v-else>
+                        <template #img>
+                            <img src="../../../../images/empty-states/mqtt-empty.png" alt="logo">
+                        </template>
+                        <template #header>Start Building Your Topic Hierarchy</template>
+                        <template #message>
+                            <p>It looks like no topics have been created yet.</p>
+                            <p>Topics are automatically generated as your MQTT clients publish events to the broker. Get started by connecting a client and publishing your first message.</p>
+                        </template>
+                    </EmptyState>
+                </template>
+            </div>
+        </template>
     </div>
 </template>
 
 <script>
 
+import { mapGetters, mapState } from 'vuex'
+
+import brokerClient from '../../../../api/broker.js'
+import EmptyState from '../../../../components/EmptyState.vue'
+
+import TopicSegment from './TopicSegment.vue'
+
 export default {
-    name: 'UNSHierarchy'
+    name: 'UNSHierarchy',
+    components: { TopicSegment, EmptyState },
+    data () {
+        return {
+            loading: false,
+            topics: []
+        }
+    },
+    computed: {
+        ...mapState('account', ['team']),
+        ...mapGetters('account', ['featuresCheck']),
+        hierarchy () {
+            const map = new Map()
+
+            if (!this.topics || !Array.isArray(this.topics)) return {}
+
+            this.topics.forEach(topic => {
+                const parts = topic.split('/')
+                let current = map
+
+                parts.forEach(part => {
+                    if (!current.has(part)) {
+                        current.set(part, new Map())
+                    }
+                    current = current.get(part)
+                })
+            })
+
+            function mapToObject (map) {
+                const obj = {}
+                for (const [key, value] of map.entries()) {
+                    obj[key] = value instanceof Map ? mapToObject(value) : value
+                }
+                return obj
+            }
+
+            return mapToObject(map)
+        }
+    },
+    async mounted () {
+        await this.getTopics()
+    },
+    methods: {
+        async getTopics () {
+            this.loading = true
+            return brokerClient.getTopics(this.team.id)
+                .then(res => {
+                    this.topics = res
+                })
+                .catch(err => err)
+                .finally(() => {
+                    this.loading = false
+                })
+        }
+    }
 }
 </script>
-
 <style scoped lang="scss">
 
 </style>

From 276817fff1a16e9cba1dccf0c9101fe7af8744e2 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 15 Nov 2024 18:45:29 +0200
Subject: [PATCH 06/21] add hierarchy styling

---
 .../pages/team/UNS/Hierarchy/TopicSegment.vue | 122 +++++++++++++++++-
 .../src/pages/team/UNS/Hierarchy/index.vue    |   5 +-
 2 files changed, 121 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/team/UNS/Hierarchy/TopicSegment.vue b/frontend/src/pages/team/UNS/Hierarchy/TopicSegment.vue
index 242e7ab81d..6b4a42b184 100644
--- a/frontend/src/pages/team/UNS/Hierarchy/TopicSegment.vue
+++ b/frontend/src/pages/team/UNS/Hierarchy/TopicSegment.vue
@@ -1,20 +1,37 @@
 <template>
-    <div>
-        <p>{{ segment }}</p>
-        <div v-if="hasChildren" class="ml-5">
+    <div class="segment-wrapper" :class="{open: visibleChildren}">
+        <div class="segment flex" @click="toggleChildren">
+            <div class="diagram">
+                <span v-if="!isRoot" class="connector-elbow" />
+                <span v-if="shouldShowTrunk" class="connector-trunk" />
+            </div>
+            <div class="content flex gap-1.5 items-center font-bold" :class="{'cursor-pointer': hasChildren, 'cursor-default': !hasChildren, 'pl-10': !isRoot}">
+                <ChevronRightIcon v-if="hasChildren" class="chevron ff-icon-sm" />
+                <p class="flex gap-2.5 items-end" :class="{'ml-2': !hasChildren}">
+                    <span class="title">{{ segmentText }}</span>
+                    <span v-if="hasChildren" class="font-normal opacity-50 text-xs">{{ topicsCounterLabel }}</span>
+                </p>
+            </div>
+        </div>
+        <div v-if="hasChildren && visibleChildren" class="children" :class="{ 'pl-10': isRoot}">
             <topic-segment
-                v-for="child in Object.keys(children)"
+                v-for="(child, key) in Object.keys(children)"
                 :key="child"
                 :segment="child"
                 :children="children[child]"
+                :has-siblings="Object.keys(children).length > 1"
+                :is-last-sibling="key === Object.keys(children).length-1"
+                :class="{'pl-10': !isRoot}"
             />
         </div>
     </div>
 </template>
 
 <script>
+import { ChevronRightIcon } from '@heroicons/vue/solid'
 export default {
     name: 'TopicSegment',
+    components: { ChevronRightIcon },
     props: {
         segment: {
             required: true,
@@ -23,16 +40,111 @@ export default {
         children: {
             required: true,
             type: Object
+        },
+        isRoot: {
+            required: false,
+            type: Boolean,
+            default: false
+        },
+        hasSiblings: {
+            required: true,
+            type: Boolean
+        },
+        isLastSibling: {
+            required: true,
+            type: Boolean
+        }
+    },
+    data () {
+        return {
+            visibleChildren: false
         }
     },
     computed: {
+        childrenCount () {
+            return Object.keys(this.children).length
+        },
         hasChildren () {
-            return Object.keys(this.children).length > 0
+            return this.childrenCount > 0
+        },
+        topicsCounterLabel () {
+            const label = 'topic' + (this.childrenCount <= 1 ? '' : 's')
+            return `(${this.childrenCount} ${label})`
+        },
+        segmentText () {
+            return this.hasChildren ? `${this.segment}/` : this.segment
+        },
+        shouldShowTrunk () {
+            return !this.isRoot && this.hasSiblings && this.isLastSibling
+        }
+    },
+    methods: {
+        toggleChildren () {
+            if (this.hasChildren) {
+                this.visibleChildren = !this.visibleChildren
+            }
         }
     }
 }
 </script>
 
 <style scoped lang="scss">
+.segment-wrapper {
+    .segment {
+        position: relative;
+        margin: 5px 0 0;
+        transition: ease .3s;
 
+        .diagram {
+            .connector-elbow {
+                border-left: 2px solid  $ff-indigo-300;
+                border-bottom: 2px solid  $ff-indigo-300;
+                border-bottom-left-radius: 7px;
+                display: inline-block;
+                position: absolute;
+                height: 50px;
+                width: 25px;
+                left: -23px;
+                top: -35px;
+            }
+            .connector-trunk {
+                width: 1px;
+                border-left: 2px solid $ff-indigo-300;
+                display: inline-block;
+                position: absolute;
+                height: 5000px;
+                left: -23px;
+                top: -5000px;
+            }
+        }
+
+        .content {
+            padding: 5px;
+
+            .chevron {
+                transition: ease .3s;
+            }
+        }
+    }
+
+    .children {
+        overflow: hidden;
+    }
+
+    &.open > {
+        .segment {
+            background: $ff-indigo-50;
+
+            .content {
+                .title {
+                    color: $ff-indigo-700;
+                }
+
+                .chevron {
+                    transform: rotate(90deg)
+                }
+            }
+        }
+    }
+}
 </style>
diff --git a/frontend/src/pages/team/UNS/Hierarchy/index.vue b/frontend/src/pages/team/UNS/Hierarchy/index.vue
index 68f2d4b3fb..9354c40a20 100644
--- a/frontend/src/pages/team/UNS/Hierarchy/index.vue
+++ b/frontend/src/pages/team/UNS/Hierarchy/index.vue
@@ -28,10 +28,13 @@
                 <template v-else>
                     <section v-if="topics.length > 0">
                         <topic-segment
-                            v-for="segment in Object.keys(hierarchy)"
+                            v-for="(segment, key) in Object.keys(hierarchy)"
                             :key="segment"
                             :segment="segment"
                             :children="hierarchy[segment]"
+                            :has-siblings="Object.keys(hierarchy).length > 1"
+                            :is-last-sibling="key === Object.keys(hierarchy).length-1"
+                            :is-root="true"
                         />
                     </section>
 

From 19eb90dfb79f9e64e3fa498707a6fe91caa873cc Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Mon, 18 Nov 2024 13:05:01 +0200
Subject: [PATCH 07/21] styling

---
 .../UNS/Hierarchy/{ => components}/TopicSegment.vue  |  0
 frontend/src/pages/team/UNS/Hierarchy/index.vue      | 12 +++++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)
 rename frontend/src/pages/team/UNS/Hierarchy/{ => components}/TopicSegment.vue (100%)

diff --git a/frontend/src/pages/team/UNS/Hierarchy/TopicSegment.vue b/frontend/src/pages/team/UNS/Hierarchy/components/TopicSegment.vue
similarity index 100%
rename from frontend/src/pages/team/UNS/Hierarchy/TopicSegment.vue
rename to frontend/src/pages/team/UNS/Hierarchy/components/TopicSegment.vue
diff --git a/frontend/src/pages/team/UNS/Hierarchy/index.vue b/frontend/src/pages/team/UNS/Hierarchy/index.vue
index 9354c40a20..2849f7725d 100644
--- a/frontend/src/pages/team/UNS/Hierarchy/index.vue
+++ b/frontend/src/pages/team/UNS/Hierarchy/index.vue
@@ -22,7 +22,7 @@
         </EmptyState>
 
         <template v-else>
-            <div class="space-y-6">
+            <div class="space-y-6 topics">
                 <ff-loading v-if="loading" message="Loading Clients..." />
 
                 <template v-else>
@@ -61,7 +61,7 @@ import { mapGetters, mapState } from 'vuex'
 import brokerClient from '../../../../api/broker.js'
 import EmptyState from '../../../../components/EmptyState.vue'
 
-import TopicSegment from './TopicSegment.vue'
+import TopicSegment from './components/TopicSegment.vue'
 
 export default {
     name: 'UNSHierarchy',
@@ -122,5 +122,11 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-
+.unified-namespace-hierarchy {
+    .topics {
+        background: $ff-white;
+        padding: 10px;
+        border-radius: 5px;
+    }
+}
 </style>

From 77826bfd834707121752006adc594e66a99f60cd Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Mon, 18 Nov 2024 13:43:59 +0200
Subject: [PATCH 08/21] fix existing e2e tests

---
 frontend/src/pages/team/UNS/Clients/index.vue |  2 +-
 .../src/pages/team/UNS/Hierarchy/index.vue    |  2 +-
 frontend/src/store/ux.js                      |  2 +-
 .../{broker.spec.js => uns/clients.spec.js}   | 42 +++++++++++--------
 .../{broker.spec.js => uns/clients.spec.js}   |  4 +-
 5 files changed, 29 insertions(+), 23 deletions(-)
 rename test/e2e/frontend/cypress/tests-ee/{broker.spec.js => uns/clients.spec.js} (90%)
 rename test/e2e/frontend/cypress/tests/{broker.spec.js => uns/clients.spec.js} (93%)

diff --git a/frontend/src/pages/team/UNS/Clients/index.vue b/frontend/src/pages/team/UNS/Clients/index.vue
index 1e3d59cf0b..8a3fd6fe13 100644
--- a/frontend/src/pages/team/UNS/Clients/index.vue
+++ b/frontend/src/pages/team/UNS/Clients/index.vue
@@ -2,7 +2,7 @@
     <div class="unified-namespace-clients">
         <div class="title mb-5 flex gap-3 items-center">
             <RssIcon class="ff-icon-sm" />
-            <h3 class="m-0">MQTT Broker</h3>
+            <h3 class="m-0" data-el="subtitle">MQTT Broker</h3>
         </div>
 
         <EmptyState
diff --git a/frontend/src/pages/team/UNS/Hierarchy/index.vue b/frontend/src/pages/team/UNS/Hierarchy/index.vue
index 2849f7725d..79b4c77984 100644
--- a/frontend/src/pages/team/UNS/Hierarchy/index.vue
+++ b/frontend/src/pages/team/UNS/Hierarchy/index.vue
@@ -2,7 +2,7 @@
     <div class="unified-namespace-hierarchy">
         <div class="title mb-5 flex gap-3 items-center">
             <img src="../../../../images/icons/tree-view.svg" alt="tree-icon" class="ff-icon-sm">
-            <h3 class="m-0">Topic Hierarchy</h3>
+            <h3 class="m-0" data-el="subtitle">Topic Hierarchy</h3>
         </div>
 
         <EmptyState
diff --git a/frontend/src/store/ux.js b/frontend/src/store/ux.js
index cc229ca0e1..d774a080f1 100644
--- a/frontend/src/store/ux.js
+++ b/frontend/src/store/ux.js
@@ -83,7 +83,7 @@ const getters = {
                         {
                             label: 'UNS',
                             to: { name: 'team-unified-namespace', params: { team_slug: team.slug } },
-                            tag: 'team-broker',
+                            tag: 'team-unified-namespace',
                             icon: RssIcon,
                             disabled: noBilling,
                             featureUnavailable: !features.isMqttBrokerFeatureEnabled,
diff --git a/test/e2e/frontend/cypress/tests-ee/broker.spec.js b/test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js
similarity index 90%
rename from test/e2e/frontend/cypress/tests-ee/broker.spec.js
rename to test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js
index 2ec8a53567..f58b522b4f 100644
--- a/test/e2e/frontend/cypress/tests-ee/broker.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js
@@ -6,13 +6,14 @@ describe('FlowForge - Broker', () => {
         })
 
         it('users have access to the broker entry in the main menu', () => {
-            cy.get('[data-nav="team-broker"]').should('exist')
-            cy.get('[data-nav="team-broker"]').should('not.be.disabled')
-            cy.get('[data-nav="team-broker"] [data-el="premium-feature"]').should('exist')
+            cy.get('[data-nav="team-unified-namespace"]').should('exist')
+            cy.get('[data-nav="team-unified-namespace"]').should('not.be.disabled')
+            cy.get('[data-nav="team-unified-namespace"] [data-el="premium-feature"]').should('exist')
         })
 
         it('should display the upgrade banner when accessing the broker with the not available logo', () => {
-            cy.get('[data-nav="team-broker"]').click()
+            cy.get('[data-nav="team-unified-namespace"]').click()
+            cy.get('[data-nav="team-namespace-clients"]').click()
             cy.get('[data-el="page-banner-feature-unavailable-to-team"]').should('exist')
             cy.contains('Broker Not Available')
             cy.contains('The MQTT Broker page offers a streamlined interface for managing your broker instance and defining client connections.')
@@ -38,9 +39,9 @@ describe('FlowForge - Broker', () => {
                 })
         })
         it('should have the broker menu entry without the missing feature icon', () => {
-            cy.get('[data-nav="team-broker"]').should('exist')
-            cy.get('[data-nav="team-broker"]').should('not.be.disabled')
-            cy.get('[data-nav="team-broker"] [data-el="premium-feature"]').should('not.exist')
+            cy.get('[data-nav="team-unified-namespace"]').should('exist')
+            cy.get('[data-nav="team-unified-namespace"]').should('not.be.disabled')
+            cy.get('[data-nav="team-unified-namespace"] [data-el="premium-feature"]').should('not.exist')
         })
 
         it('should display the empty state visible when no clients created and can create a client', () => {
@@ -51,12 +52,13 @@ describe('FlowForge - Broker', () => {
             }).as('getClients')
             cy.intercept('POST', `http://localhost:3002/api/v1/teams/${projectId}/broker/client`, { statusCode: 201 }).as('submitClient')
 
-            cy.get('[data-nav="team-broker"]').click()
+            cy.get('[data-nav="team-unified-namespace"]').click()
+            cy.get('[data-nav="team-namespace-clients"]').click()
 
             cy.wait('@getClients')
 
-            cy.get('[data-el="page-name"]').contains('MQTT Broker')
-            cy.contains('Central hub for managing MQTT clients and defining ACL-based topic permissions.')
+            cy.get('[data-el="subtitle"]').contains('MQTT Broker')
+            cy.contains('A list of all MQTT Brokers available to your team and configurable within FlowFuse.')
 
             cy.get('[data-el="empty-state"]').contains('Create your first Broker Client')
             cy.get('[data-action="create-client"]').should('exist')
@@ -117,7 +119,8 @@ describe('FlowForge - Broker', () => {
                 meta: {},
                 count: 2
             }).as('getClients')
-            cy.get('[data-nav="team-broker"]').click()
+            cy.get('[data-nav="team-unified-namespace"]').click()
+            cy.get('[data-nav="team-namespace-clients"]').click()
 
             cy.get('[data-form="search"]').should('be.visible')
             cy.get('[data-action="create-client"]').should('be.visible')
@@ -203,7 +206,8 @@ describe('FlowForge - Broker', () => {
                 count: 1
             }).as('getClients')
 
-            cy.get('[data-nav="team-broker"]').click()
+            cy.get('[data-nav="team-unified-namespace"]').click()
+            cy.get('[data-nav="team-namespace-clients"]').click()
 
             cy.get('[data-el="create-client-dialog"]').should('not.be.visible')
             cy.get('[data-action="create-client"]').should('not.be.disabled')
@@ -300,7 +304,8 @@ describe('FlowForge - Broker', () => {
                 statusCode: 200
             }).as('updateClient')
 
-            cy.get('[data-nav="team-broker"]').click()
+            cy.get('[data-nav="team-unified-namespace"]').click()
+            cy.get('[data-nav="team-namespace-clients"]').click()
 
             cy.wait('@getClients')
 
@@ -381,7 +386,8 @@ describe('FlowForge - Broker', () => {
                 count: 1
             }).as('getClients')
 
-            cy.get('[data-nav="team-broker"]').click()
+            cy.get('[data-nav="team-unified-namespace"]').click()
+            cy.get('[data-nav="team-namespace-clients"]').click()
 
             cy.get('[data-el="platform-dialog"]').should('not.be.visible')
             cy.get('[data-action="delete-client"]').click()
@@ -404,8 +410,8 @@ describe('FlowForge - Broker', () => {
             cy.login('bob', 'bbPassword')
             cy.home()
 
-            cy.get('[data-nav="team-broker"]').should('not.exist')
-            cy.visit('team/ateam/broker')
+            cy.get('[data-nav="team-unified-namespace"]').should('not.exist')
+            cy.visit('team/ateam/unified-namespace/clients')
             cy.url().should('include', 'team/ateam/applications')
         })
 
@@ -414,8 +420,8 @@ describe('FlowForge - Broker', () => {
             cy.login('bob', 'bbPassword')
             cy.visit('/')
 
-            cy.get('[data-nav="team-broker"]').should('not.exist')
-            cy.visit('team/ateam/broker')
+            cy.get('[data-nav="team-unified-namespace"]').should('not.exist')
+            cy.visit('team/ateam/unified-namespace/clients')
             cy.contains('Dashboards')
             cy.contains('A list of Node-RED instances with Dashboards belonging to this Team.')
         })
diff --git a/test/e2e/frontend/cypress/tests/broker.spec.js b/test/e2e/frontend/cypress/tests/uns/clients.spec.js
similarity index 93%
rename from test/e2e/frontend/cypress/tests/broker.spec.js
rename to test/e2e/frontend/cypress/tests/uns/clients.spec.js
index 11ebfa19ae..dd4ab9d3d0 100644
--- a/test/e2e/frontend/cypress/tests/broker.spec.js
+++ b/test/e2e/frontend/cypress/tests/uns/clients.spec.js
@@ -26,7 +26,7 @@ describe('FlowForge - Broker', () => {
             cy.home()
 
             cy.get('[data-nav="team-broker"]').should('not.exist')
-            cy.visit('team/ateam/broker')
+            cy.visit('team/ateam/unified-namespace/clients')
             cy.url().should('include', 'team/ateam/applications')
         })
 
@@ -36,7 +36,7 @@ describe('FlowForge - Broker', () => {
             cy.visit('/')
 
             cy.get('[data-nav="team-broker"]').should('not.exist')
-            cy.visit('team/ateam/broker')
+            cy.visit('team/ateam/unified-namespace/clients')
             cy.contains('There are no dashboards in this team.')
         })
     })

From 55b31769dad9eb617c0faa3e1bebfdb4444277e0 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Mon, 18 Nov 2024 13:59:18 +0200
Subject: [PATCH 09/21] fix missed nav renaming, align the hierarchy page
 redirects based on permissions with the broker client

---
 frontend/src/pages/team/UNS/Clients/index.vue |  3 ---
 frontend/src/pages/team/UNS/index.vue         | 13 +++++++++++
 .../cypress/tests/uns/clients.spec.js         | 18 +++++++--------
 .../cypress/tests/uns/hierarchy.spec.js       | 23 +++++++++++++++++++
 4 files changed, 45 insertions(+), 12 deletions(-)
 create mode 100644 test/e2e/frontend/cypress/tests/uns/hierarchy.spec.js

diff --git a/frontend/src/pages/team/UNS/Clients/index.vue b/frontend/src/pages/team/UNS/Clients/index.vue
index 8a3fd6fe13..e698fc85b9 100644
--- a/frontend/src/pages/team/UNS/Clients/index.vue
+++ b/frontend/src/pages/team/UNS/Clients/index.vue
@@ -157,9 +157,6 @@ export default {
         team: 'fetchData'
     },
     mounted () {
-        if (!this.hasAMinimumTeamRoleOf(Roles.Member)) {
-            return this.$router.push({ name: 'Home' })
-        }
         this.fetchData()
     },
     methods: {
diff --git a/frontend/src/pages/team/UNS/index.vue b/frontend/src/pages/team/UNS/index.vue
index 1b10183d9c..f0ba5e891c 100644
--- a/frontend/src/pages/team/UNS/index.vue
+++ b/frontend/src/pages/team/UNS/index.vue
@@ -22,8 +22,16 @@
 
 <script>
 
+import usePermissions from '../../../composables/Permissions.js'
+import { Roles } from '../../../utils/roles.js'
+
 export default {
     name: 'UnifiedNameSpace',
+    setup () {
+        const { hasAMinimumTeamRoleOf } = usePermissions()
+
+        return { hasAMinimumTeamRoleOf }
+    },
     computed: {
         tabs () {
             return [
@@ -31,6 +39,11 @@ export default {
                 { label: 'Clients', to: { name: 'team-namespace-clients' }, tag: 'team-namespace-clients' }
             ]
         }
+    },
+    mounted () {
+        if (!this.hasAMinimumTeamRoleOf(Roles.Member)) {
+            return this.$router.push({ name: 'Home' })
+        }
     }
 }
 </script>
diff --git a/test/e2e/frontend/cypress/tests/uns/clients.spec.js b/test/e2e/frontend/cypress/tests/uns/clients.spec.js
index dd4ab9d3d0..971af38dad 100644
--- a/test/e2e/frontend/cypress/tests/uns/clients.spec.js
+++ b/test/e2e/frontend/cypress/tests/uns/clients.spec.js
@@ -1,4 +1,4 @@
-describe('FlowForge - Broker', () => {
+describe('FlowForge - Unified Namespace Clients', () => {
     // describe('is accessible to users with correct permissions', () => {
     //     beforeEach(() => {
     //         cy.login('alice', 'aaPassword')
@@ -6,13 +6,13 @@ describe('FlowForge - Broker', () => {
     //     })
 
     //     it('users have access to the broker entry in the main menu', () => {
-    //         cy.get('[data-nav="team-broker"]').should('exist')
-    //         cy.get('[data-nav="team-broker"]').should('not.be.disabled')
-    //         cy.get('[data-nav="team-broker"] [data-el="premium-feature"]').should('exist')
+    //         cy.get('[data-nav="team-unified-namespace"]').should('exist')
+    //         cy.get('[data-nav="team-unified-namespace"]').should('not.be.disabled')
+    //         cy.get('[data-nav="team-unified-namespace"] [data-el="premium-feature"]').should('exist')
     //     })
 
     //     it('should display the upgrade banner when accessing the broker with the not available logo', () => {
-    //         cy.get('[data-nav="team-broker"]').click()
+    //         cy.get('[data-nav="team-unified-namespace"]').click()
     //         cy.get('[data-el="page-banner-feature-unavailable"]').should('exist')
     //         cy.contains('Broker Not Available')
     //         cy.contains('The MQTT Broker page offers a streamlined interface for managing your broker instance and defining client connections.')
@@ -20,22 +20,22 @@ describe('FlowForge - Broker', () => {
     // })
 
     describe('is not accessible to users with insufficient permissions', () => {
-        it('should have the broker menu entry hidden and route guard for viewer roles', () => {
+        it('should have the unified namespace menu entry hidden and route guard for viewer roles', () => {
             cy.intercept('GET', '/api/*/teams/*/user', { role: 10 })
             cy.login('bob', 'bbPassword')
             cy.home()
 
-            cy.get('[data-nav="team-broker"]').should('not.exist')
+            cy.get('[data-nav="team-unified-namespace"]').should('not.exist')
             cy.visit('team/ateam/unified-namespace/clients')
             cy.url().should('include', 'team/ateam/applications')
         })
 
-        it('should have the broker menu entry hidden and route guard for dashboard roles', () => {
+        it('should have the unified namespace menu entry hidden and route guard for dashboard roles', () => {
             cy.intercept('GET', '/api/*/teams/*/user', { role: 5 }).as('getTeamRole')
             cy.login('bob', 'bbPassword')
             cy.visit('/')
 
-            cy.get('[data-nav="team-broker"]').should('not.exist')
+            cy.get('[data-nav="team-unified-namespace"]').should('not.exist')
             cy.visit('team/ateam/unified-namespace/clients')
             cy.contains('There are no dashboards in this team.')
         })
diff --git a/test/e2e/frontend/cypress/tests/uns/hierarchy.spec.js b/test/e2e/frontend/cypress/tests/uns/hierarchy.spec.js
new file mode 100644
index 0000000000..0a7f110fbd
--- /dev/null
+++ b/test/e2e/frontend/cypress/tests/uns/hierarchy.spec.js
@@ -0,0 +1,23 @@
+describe('FlowForge - Unified Namespace Hierarchy', () => {
+    describe('is not accessible to users with insufficient permissions', () => {
+        it('should have the unified namespace menu entry hidden and route guard for viewer roles', () => {
+            cy.intercept('GET', '/api/*/teams/*/user', { role: 10 })
+            cy.login('bob', 'bbPassword')
+            cy.home()
+
+            cy.get('[data-nav="team-broker"]').should('not.exist')
+            cy.visit('team/ateam/unified-namespace/hierarchy')
+            cy.url().should('include', 'team/ateam/applications')
+        })
+
+        it('should have the unified namespace menu entry hidden and route guard for dashboard roles', () => {
+            cy.intercept('GET', '/api/*/teams/*/user', { role: 5 }).as('getTeamRole')
+            cy.login('bob', 'bbPassword')
+            cy.visit('/')
+
+            cy.get('[data-nav="team-unified-namespace"]').should('not.exist')
+            cy.visit('team/ateam/unified-namespace/hierarchy')
+            cy.contains('There are no dashboards in this team.')
+        })
+    })
+})

From 75d48a376fbf09d63500f0f5927d15a46e4544b6 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Mon, 18 Nov 2024 14:27:15 +0200
Subject: [PATCH 10/21] qf test names

---
 .../frontend/cypress/tests-ee/uns/clients.spec.js    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js b/test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js
index f58b522b4f..54bfb7313b 100644
--- a/test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js
@@ -1,17 +1,17 @@
-describe('FlowForge - Broker', () => {
+describe('FlowForge - Unified Namespace Clients', () => {
     describe('is accessible to users with correct permissions', () => {
         beforeEach(() => {
             cy.login('alice', 'aaPassword')
             cy.home()
         })
 
-        it('users have access to the broker entry in the main menu', () => {
+        it('users have access to the UNS entry in the main menu', () => {
             cy.get('[data-nav="team-unified-namespace"]').should('exist')
             cy.get('[data-nav="team-unified-namespace"]').should('not.be.disabled')
             cy.get('[data-nav="team-unified-namespace"] [data-el="premium-feature"]').should('exist')
         })
 
-        it('should display the upgrade banner when accessing the broker with the not available logo', () => {
+        it('should display the upgrade banner when accessing the clients with the not available logo', () => {
             cy.get('[data-nav="team-unified-namespace"]').click()
             cy.get('[data-nav="team-namespace-clients"]').click()
             cy.get('[data-el="page-banner-feature-unavailable-to-team"]').should('exist')
@@ -38,7 +38,7 @@ describe('FlowForge - Broker', () => {
                     projectId = response.body.teams[0].id
                 })
         })
-        it('should have the broker menu entry without the missing feature icon', () => {
+        it('should have the UNS menu entry without the missing feature icon', () => {
             cy.get('[data-nav="team-unified-namespace"]').should('exist')
             cy.get('[data-nav="team-unified-namespace"]').should('not.be.disabled')
             cy.get('[data-nav="team-unified-namespace"] [data-el="premium-feature"]').should('not.exist')
@@ -405,7 +405,7 @@ describe('FlowForge - Broker', () => {
     })
 
     describe('is not accessible to users with insufficient permissions', () => {
-        it('should have the broker menu entry hidden and route guard for viewer roles', () => {
+        it('should have the UNS menu entry hidden and route guard for viewer roles', () => {
             cy.intercept('GET', '/api/*/teams/*/user', { role: 10 })
             cy.login('bob', 'bbPassword')
             cy.home()
@@ -415,7 +415,7 @@ describe('FlowForge - Broker', () => {
             cy.url().should('include', 'team/ateam/applications')
         })
 
-        it('should have the broker menu entry hidden and route guard for dashboard roles', () => {
+        it('should have the UNS menu entry hidden and route guard for dashboard roles', () => {
             cy.intercept('GET', '/api/*/teams/*/user', { role: 5 }).as('getTeamRole')
             cy.login('bob', 'bbPassword')
             cy.visit('/')

From 3f4cd74a10bce2b1b9b6d1893a5b514085bdcfe8 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Mon, 18 Nov 2024 14:34:17 +0200
Subject: [PATCH 11/21] qf styling

---
 frontend/src/pages/team/UNS/Hierarchy/index.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/team/UNS/Hierarchy/index.vue b/frontend/src/pages/team/UNS/Hierarchy/index.vue
index 79b4c77984..413400c002 100644
--- a/frontend/src/pages/team/UNS/Hierarchy/index.vue
+++ b/frontend/src/pages/team/UNS/Hierarchy/index.vue
@@ -22,11 +22,11 @@
         </EmptyState>
 
         <template v-else>
-            <div class="space-y-6 topics">
+            <div class="space-y-6">
                 <ff-loading v-if="loading" message="Loading Clients..." />
 
                 <template v-else>
-                    <section v-if="topics.length > 0">
+                    <section v-if="topics.length > 0" class="topics">
                         <topic-segment
                             v-for="(segment, key) in Object.keys(hierarchy)"
                             :key="segment"
@@ -127,6 +127,7 @@ export default {
         background: $ff-white;
         padding: 10px;
         border-radius: 5px;
+        border: 1px solid $ff-grey-100;
     }
 }
 </style>

From 9745c9ea82a024af7925e20175027a6d5be5f1b0 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Mon, 18 Nov 2024 15:03:09 +0200
Subject: [PATCH 12/21] add e2e tests

---
 .../UNS/Hierarchy/components/TopicSegment.vue |   4 +-
 .../cypress/tests-ee/uns/hierarchy.spec.js    | 141 ++++++++++++++++++
 2 files changed, 143 insertions(+), 2 deletions(-)
 create mode 100644 test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js

diff --git a/frontend/src/pages/team/UNS/Hierarchy/components/TopicSegment.vue b/frontend/src/pages/team/UNS/Hierarchy/components/TopicSegment.vue
index 6b4a42b184..f2f2b7888c 100644
--- a/frontend/src/pages/team/UNS/Hierarchy/components/TopicSegment.vue
+++ b/frontend/src/pages/team/UNS/Hierarchy/components/TopicSegment.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="segment-wrapper" :class="{open: visibleChildren}">
+    <div class="segment-wrapper" :class="{open: visibleChildren}" data-el="segment-wrapper" :data-value="segment">
         <div class="segment flex" @click="toggleChildren">
             <div class="diagram">
                 <span v-if="!isRoot" class="connector-elbow" />
@@ -13,7 +13,7 @@
                 </p>
             </div>
         </div>
-        <div v-if="hasChildren && visibleChildren" class="children" :class="{ 'pl-10': isRoot}">
+        <div v-if="hasChildren && visibleChildren" class="children" data-el="segment-children" :class="{ 'pl-10': isRoot}">
             <topic-segment
                 v-for="(child, key) in Object.keys(children)"
                 :key="child"
diff --git a/test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js b/test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js
new file mode 100644
index 0000000000..5b710af71c
--- /dev/null
+++ b/test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js
@@ -0,0 +1,141 @@
+describe('FlowForge - Unified Namespace Hierarchy', () => {
+    describe('is accessible to users with correct permissions', () => {
+        beforeEach(() => {
+            cy.login('alice', 'aaPassword')
+            cy.home()
+        })
+
+        it('users have access to the UNS entry in the main menu', () => {
+            cy.get('[data-nav="team-unified-namespace"]').should('exist')
+            cy.get('[data-nav="team-unified-namespace"]').should('not.be.disabled')
+            cy.get('[data-nav="team-unified-namespace"] [data-el="premium-feature"]').should('exist')
+        })
+
+        it('should display the upgrade banner when accessing the broker with the not available logo', () => {
+            cy.get('[data-nav="team-unified-namespace"]').click()
+            cy.get('[data-el="page-banner-feature-unavailable-to-team"]').should('exist')
+            cy.contains('Topic Hierarchy Not Available')
+            cy.contains('The Topic Hierarchy offers a clear, organized visualization of topic structures, providing fine-grained control over publishing and subscribing permissions.')
+        })
+    })
+
+    describe('is accessible to feature enabled teams ', () => {
+        let projectId
+        beforeEach(() => {
+            cy.intercept('GET', '/api/*/teams/*', (req) => {
+                req.reply((response) => {
+                    // ensure we keep bom enabled
+                    response.body.type.properties.features.teamBroker = true
+                    return response
+                })
+            }).as('getTeam')
+            cy.login('alice', 'aaPassword')
+            cy.home()
+
+            cy.request('GET', '/api/v1/teams/')
+                .then((response) => {
+                    projectId = response.body.teams[0].id
+                })
+        })
+
+        it('should have the UNS menu entry without the missing feature icon', () => {
+            cy.get('[data-nav="team-unified-namespace"]').should('exist')
+            cy.get('[data-nav="team-unified-namespace"]').should('not.be.disabled')
+            cy.get('[data-nav="team-unified-namespace"] [data-el="premium-feature"]').should('not.exist')
+        })
+
+        it('should display the empty state visible when no topics have been created', () => {
+            cy.intercept('GET', '/api/*/teams/*/broker/topics', {
+                topics: [],
+                meta: {},
+                count: 0
+            }).as('getTopics')
+            cy.intercept('POST', `http://localhost:3002/api/v1/teams/${projectId}/broker/client`, { statusCode: 201 }).as('submitClient')
+
+            cy.get('[data-nav="team-unified-namespace"]').click()
+
+            cy.wait('@getTopics')
+
+            cy.get('[data-el="subtitle"]').contains('Topic Hierarchy')
+            cy.contains('A list of all MQTT Brokers available to your team and configurable within FlowFuse.')
+
+            cy.get('[data-el="empty-state"]').contains('Start Building Your Topic Hierarchy')
+            cy.get('[data-el="empty-state"]').contains('It looks like no topics have been created yet.')
+        })
+
+        it('should correctly display a list of topics ', () => {
+            cy.intercept('GET', '/api/*/teams/*/broker/topics', [
+                'foo/bar/baz',
+                'foo/thud',
+                'foo/flam/paz/daz',
+                'wibble/wabble/bork'
+            ]).as('getTopics')
+            cy.get('[data-nav="team-unified-namespace"]').click()
+
+            cy.wait('@getTopics')
+
+            cy.get('[data-el="segment-wrapper"]').should('have.length', 2)
+
+            cy.get('[data-el="segment-wrapper"][data-value="foo"]').contains('3 topics')
+            cy.get('[data-el="segment-wrapper"][data-value="foo"]').contains('foo/')
+            cy.get('[data-el="segment-wrapper"][data-value="wibble"]').contains('1 topic')
+            cy.get('[data-el="segment-wrapper"][data-value="wibble"]').contains('wibble/')
+
+            cy.get('[data-el="segment-wrapper"][data-value="paz"]').should('not.exist')
+            cy.get('[data-el="segment-wrapper"][data-value="bar"]').should('not.exist')
+            cy.get('[data-el="segment-wrapper"][data-value="thud"]').should('not.exist')
+            cy.get('[data-el="segment-wrapper"][data-value="baz"]').should('not.exist')
+
+            cy.get('[data-el="segment-wrapper"][data-value="foo"]').click()
+            cy.get('[data-el="segment-wrapper"][data-value="foo"]').within(() => {
+                cy.get('[data-el="segment-wrapper"][data-value="baz"]').should('not.exist')
+                cy.get('[data-el="segment-wrapper"][data-value="bar"]').contains('bar/')
+                cy.get('[data-el="segment-wrapper"][data-value="bar"]').contains('1 topic')
+                cy.get('[data-el="segment-wrapper"][data-value="bar"]').click()
+                cy.get('[data-el="segment-wrapper"][data-value="baz"]').should('exist')
+                cy.get('[data-el="segment-wrapper"][data-value="baz"]').should('contain', 'baz')
+                cy.get('[data-el="segment-wrapper"][data-value="baz"]').should('not.contain', 'baz/')
+
+                cy.get('[data-el="segment-wrapper"][data-value="thud"]').should('not.contain', '1 topic')
+                cy.get('[data-el="segment-wrapper"][data-value="thud"]').should('not.contain', 'thud/')
+
+                cy.get('[data-el="segment-wrapper"][data-value="paz"]').should('not.exist')
+                cy.get('[data-el="segment-wrapper"][data-value="flam"]').contains('flam/')
+                cy.get('[data-el="segment-wrapper"][data-value="flam"]').contains('1 topic')
+                cy.get('[data-el="segment-wrapper"][data-value="flam"]').click()
+                cy.get('[data-el="segment-wrapper"][data-value="paz"]').should('exist')
+
+                cy.get('[data-el="segment-wrapper"]').should('have.length', 5)
+
+                cy.get('[data-el="segment-wrapper"][data-value="bar"] > .segment .content').click()
+                cy.get('[data-el="segment-wrapper"][data-value="flam"] > .segment .content').click()
+            })
+
+            cy.get('[data-el="segment-wrapper"][data-value="foo"] > .segment .content').click()
+            cy.get('[data-el="segment-wrapper"]').should('have.length', 2)
+        })
+    })
+
+    describe('is not accessible to users with insufficient permissions', () => {
+        it('should have the UNS menu entry hidden and route guard for viewer roles', () => {
+            cy.intercept('GET', '/api/*/teams/*/user', { role: 10 })
+            cy.login('bob', 'bbPassword')
+            cy.home()
+
+            cy.get('[data-nav="team-unified-namespace"]').should('not.exist')
+            cy.visit('team/ateam/unified-namespace/hierarchy')
+            cy.url().should('include', 'team/ateam/applications')
+        })
+
+        it('should have the UNS menu entry hidden and route guard for dashboard roles', () => {
+            cy.intercept('GET', '/api/*/teams/*/user', { role: 5 }).as('getTeamRole')
+            cy.login('bob', 'bbPassword')
+            cy.visit('/')
+
+            cy.get('[data-nav="team-unified-namespace"]').should('not.exist')
+            cy.visit('team/ateam/unified-namespace/hierarchy')
+            cy.contains('Dashboards')
+            cy.contains('A list of Node-RED instances with Dashboards belonging to this Team.')
+        })
+    })
+})

From b3d1f471c714c290be374b621eb49774180b0da0 Mon Sep 17 00:00:00 2001
From: Costin Serban <cstn.serban@gmail.com>
Date: Mon, 18 Nov 2024 16:19:46 +0200
Subject: [PATCH 13/21] Update frontend/src/pages/team/UNS/index.vue

Co-authored-by: Ben Hardill <ben@flowforge.com>
---
 frontend/src/pages/team/UNS/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/team/UNS/index.vue b/frontend/src/pages/team/UNS/index.vue
index f0ba5e891c..a0d2fa0f34 100644
--- a/frontend/src/pages/team/UNS/index.vue
+++ b/frontend/src/pages/team/UNS/index.vue
@@ -3,7 +3,7 @@
         <template #header>
             <ff-page-header title="Unified Namespace" :tabs="tabs">
                 <template #context>
-                    A list of all MQTT Brokers available to your team and configurable within FlowFuse.
+                    A list of the recent Topicss used by your team on the FlowFuse MQTT Broker.
                 </template>
                 <template #pictogram>
                     <img alt="info" src="../../../images/pictograms/mqtt_broker_red.png">

From 4f9c59b803acf3144aa66f2f549baaf8424444c8 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Mon, 18 Nov 2024 16:42:11 +0200
Subject: [PATCH 14/21] qf e2e tests after changing the empty state message

---
 test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js   | 2 +-
 test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js b/test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js
index 54bfb7313b..58170941c9 100644
--- a/test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js
@@ -58,7 +58,7 @@ describe('FlowForge - Unified Namespace Clients', () => {
             cy.wait('@getClients')
 
             cy.get('[data-el="subtitle"]').contains('MQTT Broker')
-            cy.contains('A list of all MQTT Brokers available to your team and configurable within FlowFuse.')
+            cy.contains('A list of the recent Topicss used by your team on the FlowFuse MQTT Broker.')
 
             cy.get('[data-el="empty-state"]').contains('Create your first Broker Client')
             cy.get('[data-action="create-client"]').should('exist')
diff --git a/test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js b/test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js
index 5b710af71c..e1371e8cb2 100644
--- a/test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js
@@ -57,7 +57,7 @@ describe('FlowForge - Unified Namespace Hierarchy', () => {
             cy.wait('@getTopics')
 
             cy.get('[data-el="subtitle"]').contains('Topic Hierarchy')
-            cy.contains('A list of all MQTT Brokers available to your team and configurable within FlowFuse.')
+            cy.contains('A list of the recent Topicss used by your team on the FlowFuse MQTT Broker.')
 
             cy.get('[data-el="empty-state"]').contains('Start Building Your Topic Hierarchy')
             cy.get('[data-el="empty-state"]').contains('It looks like no topics have been created yet.')

From a7aa0bd9619e6ea3b8729a86b575492a3a42e92b Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 19 Nov 2024 12:28:43 +0200
Subject: [PATCH 15/21] revert menu entry and url

---
 frontend/src/pages/team/routes.js                        | 8 ++++----
 frontend/src/store/ux.js                                 | 2 +-
 test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js   | 4 ++--
 test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js | 4 ++--
 test/e2e/frontend/cypress/tests/uns/clients.spec.js      | 4 ++--
 test/e2e/frontend/cypress/tests/uns/hierarchy.spec.js    | 4 ++--
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontend/src/pages/team/routes.js b/frontend/src/pages/team/routes.js
index 3d74fbe250..7a9dc7a4e5 100644
--- a/frontend/src/pages/team/routes.js
+++ b/frontend/src/pages/team/routes.js
@@ -109,11 +109,11 @@ export default [
                     },
                     {
                         name: 'team-unified-namespace',
-                        path: 'unified-namespace',
+                        path: 'broker',
                         component: UnifiedNameSpace,
                         redirect: { name: 'team-namespace-hierarchy' },
                         meta: {
-                            title: 'Team - Unified Namespace'
+                            title: 'Team - MQTT Broker'
                         },
                         children: [
                             {
@@ -121,7 +121,7 @@ export default [
                                 path: 'hierarchy',
                                 component: UNSHierarchy,
                                 meta: {
-                                    title: 'Team - Unified Namespace Hierarchy'
+                                    title: 'Team - MQTT Broker Hierarchy'
                                 }
                             },
                             {
@@ -129,7 +129,7 @@ export default [
                                 path: 'clients',
                                 component: UNSClients,
                                 meta: {
-                                    title: 'Team - Unified Namespace Clients'
+                                    title: 'Team - MQTT Broker Clients'
                                 }
                             }
                         ]
diff --git a/frontend/src/store/ux.js b/frontend/src/store/ux.js
index d774a080f1..2c304d8fcd 100644
--- a/frontend/src/store/ux.js
+++ b/frontend/src/store/ux.js
@@ -81,7 +81,7 @@ const getters = {
                     hidden: !hasAMinimumTeamRoleOf(Roles.Viewer),
                     entries: [
                         {
-                            label: 'UNS',
+                            label: 'Broker',
                             to: { name: 'team-unified-namespace', params: { team_slug: team.slug } },
                             tag: 'team-unified-namespace',
                             icon: RssIcon,
diff --git a/test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js b/test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js
index 58170941c9..e29529a791 100644
--- a/test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js
@@ -411,7 +411,7 @@ describe('FlowForge - Unified Namespace Clients', () => {
             cy.home()
 
             cy.get('[data-nav="team-unified-namespace"]').should('not.exist')
-            cy.visit('team/ateam/unified-namespace/clients')
+            cy.visit('team/ateam/broker/clients')
             cy.url().should('include', 'team/ateam/applications')
         })
 
@@ -421,7 +421,7 @@ describe('FlowForge - Unified Namespace Clients', () => {
             cy.visit('/')
 
             cy.get('[data-nav="team-unified-namespace"]').should('not.exist')
-            cy.visit('team/ateam/unified-namespace/clients')
+            cy.visit('team/ateam/broker/clients')
             cy.contains('Dashboards')
             cy.contains('A list of Node-RED instances with Dashboards belonging to this Team.')
         })
diff --git a/test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js b/test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js
index e1371e8cb2..4e557b60ce 100644
--- a/test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js
@@ -123,7 +123,7 @@ describe('FlowForge - Unified Namespace Hierarchy', () => {
             cy.home()
 
             cy.get('[data-nav="team-unified-namespace"]').should('not.exist')
-            cy.visit('team/ateam/unified-namespace/hierarchy')
+            cy.visit('team/ateam/broker/hierarchy')
             cy.url().should('include', 'team/ateam/applications')
         })
 
@@ -133,7 +133,7 @@ describe('FlowForge - Unified Namespace Hierarchy', () => {
             cy.visit('/')
 
             cy.get('[data-nav="team-unified-namespace"]').should('not.exist')
-            cy.visit('team/ateam/unified-namespace/hierarchy')
+            cy.visit('team/ateam/broker/hierarchy')
             cy.contains('Dashboards')
             cy.contains('A list of Node-RED instances with Dashboards belonging to this Team.')
         })
diff --git a/test/e2e/frontend/cypress/tests/uns/clients.spec.js b/test/e2e/frontend/cypress/tests/uns/clients.spec.js
index 971af38dad..b3cc643c63 100644
--- a/test/e2e/frontend/cypress/tests/uns/clients.spec.js
+++ b/test/e2e/frontend/cypress/tests/uns/clients.spec.js
@@ -26,7 +26,7 @@ describe('FlowForge - Unified Namespace Clients', () => {
             cy.home()
 
             cy.get('[data-nav="team-unified-namespace"]').should('not.exist')
-            cy.visit('team/ateam/unified-namespace/clients')
+            cy.visit('team/ateam/broker/clients')
             cy.url().should('include', 'team/ateam/applications')
         })
 
@@ -36,7 +36,7 @@ describe('FlowForge - Unified Namespace Clients', () => {
             cy.visit('/')
 
             cy.get('[data-nav="team-unified-namespace"]').should('not.exist')
-            cy.visit('team/ateam/unified-namespace/clients')
+            cy.visit('team/ateam/broker/clients')
             cy.contains('There are no dashboards in this team.')
         })
     })
diff --git a/test/e2e/frontend/cypress/tests/uns/hierarchy.spec.js b/test/e2e/frontend/cypress/tests/uns/hierarchy.spec.js
index 0a7f110fbd..092f67357c 100644
--- a/test/e2e/frontend/cypress/tests/uns/hierarchy.spec.js
+++ b/test/e2e/frontend/cypress/tests/uns/hierarchy.spec.js
@@ -6,7 +6,7 @@ describe('FlowForge - Unified Namespace Hierarchy', () => {
             cy.home()
 
             cy.get('[data-nav="team-broker"]').should('not.exist')
-            cy.visit('team/ateam/unified-namespace/hierarchy')
+            cy.visit('team/ateam/broker/hierarchy')
             cy.url().should('include', 'team/ateam/applications')
         })
 
@@ -16,7 +16,7 @@ describe('FlowForge - Unified Namespace Hierarchy', () => {
             cy.visit('/')
 
             cy.get('[data-nav="team-unified-namespace"]').should('not.exist')
-            cy.visit('team/ateam/unified-namespace/hierarchy')
+            cy.visit('team/ateam/broker/hierarchy')
             cy.contains('There are no dashboards in this team.')
         })
     })

From 2f87828b22e7b2cc16b95b2b66284d680fcac290 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 19 Nov 2024 15:26:23 +0200
Subject: [PATCH 16/21] merge fixes

---
 frontend/src/pages/team/UNS/index.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/team/UNS/index.vue b/frontend/src/pages/team/UNS/index.vue
index a0d2fa0f34..cac30b7b3b 100644
--- a/frontend/src/pages/team/UNS/index.vue
+++ b/frontend/src/pages/team/UNS/index.vue
@@ -1,7 +1,7 @@
 <template>
     <ff-page>
         <template #header>
-            <ff-page-header title="Unified Namespace" :tabs="tabs">
+            <ff-page-header title="Broker" :tabs="tabs">
                 <template #context>
                     A list of the recent Topicss used by your team on the FlowFuse MQTT Broker.
                 </template>
@@ -9,9 +9,10 @@
                     <img alt="info" src="../../../images/pictograms/mqtt_broker_red.png">
                 </template>
                 <template #helptext>
-                    <p>The <b>Unified Namespace (UNS)</b> feature provides a centralized framework for managing and visualizing your entire data ecosystem, consolidating MQTT broker instances and topic structures within a single interface.</p>
-                    <p>Within the UNS, <b>Client</b> page enables seamless client management with customizable Access Control List (ACL) rules for secure and controlled data flow. The topic <b>Hierarchy</b> offers a clear, organized visualization of topic structures, providing fine-grained control over publishing and subscribing permissions.</p>
+                    <p>The <b>Broker</b> feature provides a centralized framework for managing and visualizing your entire data ecosystem, consolidating MQTT broker instances and topic structures within a single interface.</p>
+                    <p>Within the Broker, <b>Client</b> page enables seamless client management with customizable Access Control List (ACL) rules for secure and controlled data flow. The topic <b>Hierarchy</b> offers a clear, organized visualization of topic structures, providing fine-grained control over publishing and subscribing permissions.</p>
                     <p>Together, these components deliver an integrated approach to managing client connections, security settings, and message flow, supporting efficient and secure data communication across your system.</p>
+                    <p>Documentation <a href="https://flowfuse.com/docs/user/teambroker" target="_blank">here</a></p>
                 </template>
             </ff-page-header>
         </template>

From a83dcf81730eb066b93edc1e3822721e710c399f Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Wed, 20 Nov 2024 12:34:20 +0200
Subject: [PATCH 17/21] update uns context title

---
 frontend/src/pages/team/UNS/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/team/UNS/index.vue b/frontend/src/pages/team/UNS/index.vue
index cac30b7b3b..93db575ecc 100644
--- a/frontend/src/pages/team/UNS/index.vue
+++ b/frontend/src/pages/team/UNS/index.vue
@@ -3,7 +3,7 @@
         <template #header>
             <ff-page-header title="Broker" :tabs="tabs">
                 <template #context>
-                    A list of the recent Topicss used by your team on the FlowFuse MQTT Broker.
+                    A list of recent Topics and available MQTT Clients configurable in FlowFuse.
                 </template>
                 <template #pictogram>
                     <img alt="info" src="../../../images/pictograms/mqtt_broker_red.png">

From 947342599ee9d4652f6405030e2acc0ab49baf0d Mon Sep 17 00:00:00 2001
From: Costin Serban <cstn.serban@gmail.com>
Date: Wed, 20 Nov 2024 12:52:29 +0200
Subject: [PATCH 18/21] Update frontend/src/pages/team/routes.js

Co-authored-by: Nick O'Leary <nick.oleary@gmail.com>
---
 frontend/src/pages/team/routes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/team/routes.js b/frontend/src/pages/team/routes.js
index 7a9dc7a4e5..45ebff9e40 100644
--- a/frontend/src/pages/team/routes.js
+++ b/frontend/src/pages/team/routes.js
@@ -121,7 +121,7 @@ export default [
                                 path: 'hierarchy',
                                 component: UNSHierarchy,
                                 meta: {
-                                    title: 'Team - MQTT Broker Hierarchy'
+                                    title: 'Team - MQTT Broker Topic Hierarchy'
                                 }
                             },
                             {

From d70f1fef9c2f7a55c1f2d6b6beb7674e63f726bc Mon Sep 17 00:00:00 2001
From: Costin Serban <cstn.serban@gmail.com>
Date: Wed, 20 Nov 2024 12:52:39 +0200
Subject: [PATCH 19/21] Update frontend/src/pages/team/UNS/index.vue

Co-authored-by: Nick O'Leary <nick.oleary@gmail.com>
---
 frontend/src/pages/team/UNS/index.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/team/UNS/index.vue b/frontend/src/pages/team/UNS/index.vue
index cac30b7b3b..7496f7e224 100644
--- a/frontend/src/pages/team/UNS/index.vue
+++ b/frontend/src/pages/team/UNS/index.vue
@@ -10,7 +10,8 @@
                 </template>
                 <template #helptext>
                     <p>The <b>Broker</b> feature provides a centralized framework for managing and visualizing your entire data ecosystem, consolidating MQTT broker instances and topic structures within a single interface.</p>
-                    <p>Within the Broker, <b>Client</b> page enables seamless client management with customizable Access Control List (ACL) rules for secure and controlled data flow. The topic <b>Hierarchy</b> offers a clear, organized visualization of topic structures, providing fine-grained control over publishing and subscribing permissions.</p>
+                    <p>Within the Broker, <b>Client</b> page allows you to manage the clients that have access to the Broker, with customizable Access Control List (ACL) rules for secure and controlled data flow.</p>
+                    <p>The topic <b>Hierarchy</b> offers a clear, organized visualization of the topics being used within your broker.</p>
                     <p>Together, these components deliver an integrated approach to managing client connections, security settings, and message flow, supporting efficient and secure data communication across your system.</p>
                     <p>Documentation <a href="https://flowfuse.com/docs/user/teambroker" target="_blank">here</a></p>
                 </template>

From 7a9111abcced35a686a6e85304cb5466cd21b29c Mon Sep 17 00:00:00 2001
From: Costin Serban <cstn.serban@gmail.com>
Date: Wed, 20 Nov 2024 12:52:49 +0200
Subject: [PATCH 20/21] Update frontend/src/pages/team/UNS/index.vue

Co-authored-by: Nick O'Leary <nick.oleary@gmail.com>
---
 frontend/src/pages/team/UNS/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/team/UNS/index.vue b/frontend/src/pages/team/UNS/index.vue
index 7496f7e224..aae36c6aed 100644
--- a/frontend/src/pages/team/UNS/index.vue
+++ b/frontend/src/pages/team/UNS/index.vue
@@ -3,7 +3,7 @@
         <template #header>
             <ff-page-header title="Broker" :tabs="tabs">
                 <template #context>
-                    A list of the recent Topicss used by your team on the FlowFuse MQTT Broker.
+                    View the recently used topics and configure clients for your FlowFuse MQTT Broker.
                 </template>
                 <template #pictogram>
                     <img alt="info" src="../../../images/pictograms/mqtt_broker_red.png">

From a8170e0b18debb7a32894a72f6613479cb14c8f1 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Wed, 20 Nov 2024 14:19:37 +0200
Subject: [PATCH 21/21] qf failing tests

---
 test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js   | 2 +-
 test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js b/test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js
index e29529a791..ee004ee910 100644
--- a/test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/uns/clients.spec.js
@@ -58,7 +58,7 @@ describe('FlowForge - Unified Namespace Clients', () => {
             cy.wait('@getClients')
 
             cy.get('[data-el="subtitle"]').contains('MQTT Broker')
-            cy.contains('A list of the recent Topicss used by your team on the FlowFuse MQTT Broker.')
+            cy.contains('View the recently used topics and configure clients for your FlowFuse MQTT Broker.')
 
             cy.get('[data-el="empty-state"]').contains('Create your first Broker Client')
             cy.get('[data-action="create-client"]').should('exist')
diff --git a/test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js b/test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js
index 4e557b60ce..79614e83f7 100644
--- a/test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/uns/hierarchy.spec.js
@@ -57,7 +57,7 @@ describe('FlowForge - Unified Namespace Hierarchy', () => {
             cy.wait('@getTopics')
 
             cy.get('[data-el="subtitle"]').contains('Topic Hierarchy')
-            cy.contains('A list of the recent Topicss used by your team on the FlowFuse MQTT Broker.')
+            cy.contains('View the recently used topics and configure clients for your FlowFuse MQTT Broker.')
 
             cy.get('[data-el="empty-state"]').contains('Start Building Your Topic Hierarchy')
             cy.get('[data-el="empty-state"]').contains('It looks like no topics have been created yet.')