Merge pull request #5100 from FlowFuse/update-broker-guards

Add externalBroker feature flag to UI
FlowFuse · Feb 11, 2025 · 3fe9f9f · 3fe9f9f
2 parents d14ce19 + cb726fb
commit 3fe9f9f
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/frontend/src/pages/team/Brokers/ChooseBroker.vue b/frontend/src/pages/team/Brokers/ChooseBroker.vue
@@ -61,10 +61,11 @@ export default {
     },
     computed: {
         ...mapGetters('product', ['hasFfUnsClients', 'hasBrokers']),
+        ...mapGetters('account', ['featuresCheck']),
         options () {
             return [
                 {
-                    ribbon: 'Recommended',
+                    ribbon: this.featuresCheck.isExternalMqttBrokerFeatureEnabled ? 'Recommended' : '',
                     title: 'FlowFuse Broker',
                     content: [
                         '20 x MQTT Clients included in your plan'
@@ -79,7 +80,8 @@ export default {
                         'Requires a third-party broker to be setup'
                     ],
                     contentType: 'dash',
-                    to: { name: 'team-brokers-new' }
+                    to: { name: 'team-brokers-new' },
+                    hidden: !this.featuresCheck.isExternalMqttBrokerFeatureEnabled
                 }
             ].filter(op => !op.hidden)
         },

diff --git a/frontend/src/pages/team/Brokers/NewBroker.vue b/frontend/src/pages/team/Brokers/NewBroker.vue
@@ -4,11 +4,21 @@
 
 <script>
 
+import { mapGetters } from 'vuex'
+
 import BrokerForm from './components/BrokerForm.vue'
 
 export default {
     name: 'NewBroker',
     components: { BrokerForm },
+    computed: {
+        ...mapGetters('account', ['featuresCheck'])
+    },
+    mounted () {
+        if (!this.featuresCheck.isExternalMqttBrokerFeatureEnabled) {
+            this.$router.push({ name: 'team-brokers' })
+        }
+    },
     methods: {
         onSubmit (payload) {
             return this.$store.dispatch('product/createBroker', payload)

diff --git a/frontend/src/pages/team/Brokers/index.vue b/frontend/src/pages/team/Brokers/index.vue
@@ -7,7 +7,7 @@
                 </template>
 
                 <template #status>
-                    <BrokerStatusBadge v-if="broker?.id !== 'team-broker'" :status="brokerState" :pendingStateChange="!brokerState" />
+                    <BrokerStatusBadge v-if="broker?.id !== 'team-broker' && !isCreationPage" :status="brokerState" :pendingStateChange="!brokerState" />
                 </template>
 
                 <template #pictogram>
@@ -23,7 +23,7 @@
                 </template>
 
                 <template #tools>
-                    <section v-if="!loading && shouldDisplayTools" class="flex gap-3 flex-wrap">
+                    <section v-if="!loading && shouldDisplayTools && featuresCheck.isExternalMqttBrokerFeatureEnabled" class="flex gap-3 flex-wrap">
                         <ff-listbox
                             v-if="brokers.length > 1"
                             v-model="activeBrokerId"

diff --git a/frontend/src/store/account.js b/frontend/src/store/account.js
@@ -184,6 +184,8 @@ const getters = {
             isMqttBrokerFeatureEnabledForPlatform: !!state.features?.teamBroker,
             isMqttBrokerFeatureEnabledForTeam: !!state.team?.type?.properties?.features?.teamBroker,
 
+            isExternalMqttBrokerFeatureEnabledForPlatform: !!state.features?.externalBroker,
+
             // DevOps Pipelines
             devOpsPipelinesFeatureEnabledForPlatform: !!state.features?.['devops-pipelines']
         }
@@ -197,6 +199,8 @@ const getters = {
             isBOMFeatureEnabled: preCheck.isBOMFeatureEnabledForPlatform && preCheck.isBOMFeatureEnabledForTeam,
             isTimelineFeatureEnabled: preCheck.isTimelineFeatureEnabledForPlatform && preCheck.isTimelineFeatureEnabledForTeam,
             isMqttBrokerFeatureEnabled: preCheck.isMqttBrokerFeatureEnabledForPlatform && preCheck.isMqttBrokerFeatureEnabledForTeam,
+            // external broker must be enabled for platform, and share the same team-level feature flag as the team broker
+            isExternalMqttBrokerFeatureEnabled: preCheck.isExternalMqttBrokerFeatureEnabledForPlatform && preCheck.isMqttBrokerFeatureEnabledForTeam,
             devOpsPipelinesFeatureEnabled: preCheck.devOpsPipelinesFeatureEnabledForPlatform,
             isDeviceGroupsFeatureEnabled: !!state.team?.type?.properties?.features?.deviceGroups
         }