From f8f3f9079f386ee1a72dcc581791d86c3fcdc27c Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Tue, 14 Jan 2025 15:08:41 +0000
Subject: [PATCH] Add Open Schema button to Topic Hierarcy view

---
 forge/ee/routes/teamBroker/schema.js            |  5 ++++-
 frontend/src/pages/team/UNS/Hierarchy/index.vue | 16 ++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/forge/ee/routes/teamBroker/schema.js b/forge/ee/routes/teamBroker/schema.js
index d2bd59f21e..d3fd05369b 100644
--- a/forge/ee/routes/teamBroker/schema.js
+++ b/forge/ee/routes/teamBroker/schema.js
@@ -24,7 +24,10 @@ module.exports = async function (app) {
             schema.servers = {
                 'team-broker': {
                     host: teamBrokerHost,
-                    protocol: 'mqtt'
+                    protocol: 'mqtt',
+                    security: [{
+                        type: 'userPassword'
+                    }]
                 }
             }
         }
diff --git a/frontend/src/pages/team/UNS/Hierarchy/index.vue b/frontend/src/pages/team/UNS/Hierarchy/index.vue
index 8b71b6d23e..3318dae578 100644
--- a/frontend/src/pages/team/UNS/Hierarchy/index.vue
+++ b/frontend/src/pages/team/UNS/Hierarchy/index.vue
@@ -2,7 +2,11 @@
     <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" data-el="subtitle">Topic Hierarchy</h3>
+            <h3 class="m-0 flex-grow" data-el="subtitle">Topic Hierarchy</h3>
+            <ff-button v-if="featuresCheck.isMqttBrokerFeatureEnabled" @click="openSchema()">
+                <template #icon-right><ExternalLinkIcon /></template>
+                Open Schema
+            </ff-button>
         </div>
 
         <EmptyState
@@ -57,16 +61,21 @@
 
 <script>
 
+import { ExternalLinkIcon } from '@heroicons/vue/solid'
 import { mapGetters, mapState } from 'vuex'
 
 import brokerClient from '../../../../api/broker.js'
 import EmptyState from '../../../../components/EmptyState.vue'
 
+import { useNavigationHelper } from '../../../../composables/NavigationHelper.js'
+
 import TopicSegment from './components/TopicSegment.vue'
 
+const { openInANewTab } = useNavigationHelper()
+
 export default {
     name: 'UNSHierarchy',
-    components: { TopicSegment, EmptyState },
+    components: { TopicSegment, EmptyState, ExternalLinkIcon },
     data () {
         return {
             loading: false,
@@ -179,6 +188,9 @@ export default {
         toggleSegmentVisibility (segment) {
             // trigger's the hierarchy setter
             this.hierarchy = segment
+        },
+        openSchema () {
+            openInANewTab(`/api/v1/teams/${this.team.id}/broker/team-broker/schema.yml`, '_blank')
         }
     }
 }