Team broker client UI

frontend/src/api/broker.js

@@ -0,0 +1,39 @@
+import paginateUrl from '../utils/paginateUrl.js'
+
+import client from './client.js'
+
+const getClients = (teamId, params, cursor, limit) => {
+    const url = paginateUrl(`/api/v1/teams/${teamId}/broker/clients`, cursor, limit)
+    return client.get(url, { params }).then(res => res.data)
+}
+
+const getClient = (teamId, username) => {
+    return client.get(`/api/v1/teams/${teamId}/broker/client/${username}`).then(res => res.data)
+}
+
+const createClient = (teamId, username, password, acls) => {
+    return client.post(`/api/v1/teams/${teamId}/broker/client`, {
+        username,
+        password,
+        acls
+    }).then(res => res.data)
+}
+
+const deleteClient = (teamId, username) => {
+    return client.delete(`/api/v1/teams/${teamId}/broker/client/${username}`).then(res => res.data)
+}
+
+const updateClient = (teamId, username, { acls, password }) => {
+    return client.put(`/api/v1/teams/${teamId}/broker/client/${username}`, {
+        acls,
+        password
+    }).then(res => res.data)
+}
+
+export default {
+    getClients,
+    getClient,
+    createClient,
+    updateClient,
+    deleteClient
+}

frontend/src/components/Accordion.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="ff-accordion" :class="{'open': isOpen}">
+    <div class="ff-accordion" :class="{'open': isOpen}" data-el="accordion">
         <button class="ff-accordion--button" :disabled="disabled" @click="toggle()">
             <slot name="label">
                 <label>{{ label }}</label>

frontend/src/components/EmptyState.vue

@@ -1,7 +1,7 @@
 <template>
     <div data-el="empty-state">
         <FeatureUnavailable v-if="featureUnavailable" :message="featureUnavailableMessage" />
-        <FeatureUnavailableToTeam v-if="featureUnavailableToTeam" />
+        <FeatureUnavailableToTeam v-else-if="featureUnavailableToTeam" />
         <div
             class="ff-empty-state" :class="{'ff-empty-state-feature-unavailable': featureUnavailable}"
         >

frontend/src/components/SideNavigationTeamOptions.vue

@@ -40,10 +40,12 @@
 </template>
 
 <script>
-import { ChipIcon, CogIcon, CurrencyDollarIcon, DatabaseIcon, FolderIcon, TemplateIcon, UsersIcon } from '@heroicons/vue/solid'
+import { ChipIcon, CogIcon, CurrencyDollarIcon, DatabaseIcon, FolderIcon, RssIcon, TemplateIcon, UsersIcon } from '@heroicons/vue/solid'
 import { mapGetters, mapState } from 'vuex'
 
+import featuresMixin from '../mixins/Features.js'
 import permissionsMixin from '../mixins/Permissions.js'
+import { Roles } from '../utils/roles.js'
 
 import NavItem from './NavItem.vue'
 import ProjectsIcon from './icons/Projects.js'
@@ -53,7 +55,7 @@ export default {
     components: {
         NavItem
     },
-    mixins: [permissionsMixin],
+    mixins: [permissionsMixin, featuresMixin],
     props: {
         mobileMenuOpen: {
             type: Boolean,
@@ -75,68 +77,91 @@ export default {
         },
         navigation () {
             const result = {
-                general: [{
-                    label: 'Applications',
-                    to: '/applications',
-                    tag: 'team-applications',
-                    icon: TemplateIcon,
-                    disabled: this.noBilling
-                },
-                {},
-                {
-                    label: 'Instances',
-                    to: '/instances',
-                    tag: 'team-instances',
-                    icon: ProjectsIcon,
-                    disabled: this.noBilling
-                },
-                {
-                    label: 'Devices',
-                    to: '/devices',
-                    tag: 'team-devices',
-                    icon: ChipIcon,
-                    disabled: this.noBilling
-                },
-                {},
-                {
-                    label: 'Library',
-                    to: '/library',
-                    tag: 'shared-library',
-                    icon: FolderIcon,
-                    disabled: this.noBilling,
-                    featureUnavailable: !this.features?.['shared-library'] || this.team?.type.properties.features?.['shared-library'] === false
-                },
-                {
-                    label: 'Members',
-                    to: '/members/general',
-                    tag: 'team-members',
-                    icon: UsersIcon,
-                    disabled: this.noBilling
-                }],
-                admin: [{
-                    label: 'Audit Log',
-                    to: '/audit-log',
-                    tag: 'team-audit',
-                    icon: DatabaseIcon,
-                    disabled: this.noBilling
-                },
-                {
-                    label: 'Team Settings',
-                    to: '/settings',
-                    tag: 'team-settings',
-                    icon: CogIcon
-                }]
+                general: [
+                    {
+                        label: 'Applications',
+                        to: '/applications',
+                        tag: 'team-applications',
+                        icon: TemplateIcon,
+                        disabled: this.noBilling
+                    },
+                    {},
+                    {
+                        label: 'Instances',
+                        to: '/instances',
+                        tag: 'team-instances',
+                        icon: ProjectsIcon,
+                        disabled: this.noBilling
+                    },
+                    {
+                        label: 'Devices',
+                        to: '/devices',
+                        tag: 'team-devices',
+                        icon: ChipIcon,
+                        disabled: this.noBilling
+                    },
+                    {},
+                    {
+                        label: 'Broker',
+                        to: '/broker',
+                        tag: 'team-broker',
+                        icon: RssIcon,
+                        disabled: this.noBilling,
+                        featureUnavailable: !this.isMqttBrokerFeatureEnabled,
+                        hidden: this.hasALowerOrEqualTeamRoleThan(Roles.Member)
+                    },
+                    {
+                        label: 'Library',
+                        to: '/library',
+                        tag: 'shared-library',
+                        icon: FolderIcon,
+                        disabled: this.noBilling,
+                        featureUnavailable: !this.features?.['shared-library'] || this.team?.type.properties.features?.['shared-library'] === false
+                    },
+                    {
+                        label: 'Members',
+                        to: '/members/general',
+                        tag: 'team-members',
+                        icon: UsersIcon,
+                        disabled: this.noBilling
+                    }
+                ],
+                admin: [
+                    {
+                        label: 'Audit Log',
+                        to: '/audit-log',
+                        tag: 'team-audit',
+                        icon: DatabaseIcon,
+                        disabled: this.noBilling
+                    },
+                    {
+                        label: 'Billing',
+                        to: '/billing',
+                        tag: 'team-billing',
+                        icon: CurrencyDollarIcon,
+                        hidden: !!this.features?.billing
+                    },
+                    {
+                        label: 'Team Settings',
+                        to: '/settings',
+                        tag: 'team-settings',
+                        icon: CogIcon
+                    }
+                ]
             }
-            if (this.features?.billing) {
-                // insert billing in second slot of admin
-                result.admin.splice(1, 0, {
-                    label: 'Billing',
-                    to: '/billing',
-                    tag: 'team-billing',
-                    icon: CurrencyDollarIcon
+
+            return {
+                general: result.general.filter(entry => {
+                    if (Object.prototype.hasOwnProperty.call(entry, 'hidden')) {
+                        return entry.hidden
+                    } else return true
+                }),
+                admin: result.admin.filter(entry => {
+                    if (Object.prototype.hasOwnProperty.call(entry, 'hidden')) {
+                        return entry.hidden
+                    } else return true
                 })
             }
-            return result
         }
     },
     mounted () {

frontend/src/mixins/Features.js

@@ -62,6 +62,15 @@ export default {
         },
         isTimelineFeatureEnabled () {
             return this.isTimelineFeatureEnabledForPlatform && this.isTimelineFeatureEnabledForTeam
+        },
+        isMqttBrokerFeatureEnabledForPlatform () {
+            return !!this.features.teamBroker
+        },
+        isMqttBrokerFeatureEnabledForTeam () {
+            return !!this.team?.type?.properties?.features?.teamBroker
+        },
+        isMqttBrokerFeatureEnabled () {
+            return this.isMqttBrokerFeatureEnabledForPlatform && this.isMqttBrokerFeatureEnabledForTeam
         }
     }
 }

frontend/src/mixins/Permissions.js

@@ -46,6 +46,22 @@ export default {
             }
 
             return this.teamMembership?.role >= 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)
+         */
+        hasALowerOrEqualTeamRoleThan (role) {
+            if (this.isVisitingAdmin) {
+                return true
+            }
+
+            return role <= this.teamMembership?.role
         }
     }
 }

frontend/src/pages/instance/VersionHistory/Timeline/components/TimelineEvent.vue

@@ -82,6 +82,7 @@ import daysSince from '../../../../../utils/daysSince.js'
 
 import TimelineGraph from './TimelineGraph.vue'
 
+// eslint-disable-next-line vue/one-component-per-file
 export default {
     name: 'TimelineEvent',
     components: { TimelineGraph },
@@ -123,6 +124,7 @@ export default {
                     // we can only differentiate between a plain snapshot import and a devops deployment history event
                     // by its data payload (i.e. if the event has a data.sourceProject attr, we know it's from a devops pipeline)
 
+                    // eslint-disable-next-line vue/one-component-per-file
                     return defineComponent({
                         emits: ['preview-snapshot', 'preview-instance'],
                         methods: {
@@ -140,6 +142,7 @@ export default {
                     })
                 }
 
+                // eslint-disable-next-line vue/one-component-per-file
                 return defineComponent({
                     emits: ['preview-snapshot', 'preview-instance'],
                     methods: {
@@ -157,6 +160,7 @@ export default {
                 })
 
             case this.event.event === 'project.snapshot.rolled-back':
+                // eslint-disable-next-line vue/one-component-per-file
                 return defineComponent({
                     emits: ['preview-snapshot'],
                     methods: {
@@ -169,6 +173,7 @@ export default {
                         </span>`
                 })
             case this.event.event === 'project.snapshot.created':
+                // eslint-disable-next-line vue/one-component-per-file
                 return defineComponent({
                     emits: ['preview-snapshot'],
                     methods: {
@@ -182,18 +187,22 @@ export default {
                         </span>`
                 })
             case this.event.event === 'flows.set':
+                // eslint-disable-next-line vue/one-component-per-file
                 return defineComponent({
                     template: '<span>Flows Deployed From Editor</span>'
                 })
             case this.event.event === 'project.created':
+                // eslint-disable-next-line vue/one-component-per-file
                 return defineComponent({
                     template: '<span>Instance Created</span>'
                 })
             case this.event.event === 'project.settings.updated':
+                // eslint-disable-next-line vue/one-component-per-file
                 return defineComponent({
                     template: '<span>Instance Settings Updated</span>'
                 })
             default:
+                // eslint-disable-next-line vue/one-component-per-file
                 return defineComponent({
                     template: `<span>${this.event.event}</span>`
                 })