Merge pull request #4417 from FlowFuse/4415_hide-the-application-kebab-menu-for-users-without-permissions

hide the application page instance kebab menu for non admin/owner users

Author: joepavitt

frontend/src/pages/team/Applications/components/compact/InstanceTile.vue

@@ -52,7 +52,7 @@
                 :show-text="showButtonLabels"
             />
 
-            <ff-kebab-menu @click.stop>
+            <ff-kebab-menu v-if="shouldDisplayKebabMenu" @click.stop>
                 <ff-list-item
                     :disabled="localInstance.pendingStateChange || instanceRunning "
                     label="Start"
@@ -82,6 +82,8 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 import InstanceStatusPolling from '../../../../../components/InstanceStatusPolling.vue'
 import AuditMixin from '../../../../../mixins/Audit.js'
 import instanceActionsMixin from '../../../../../mixins/InstanceActions.js'
@@ -121,6 +123,7 @@ export default {
         }
     },
     computed: {
+        ...mapGetters('account', ['isAdminUser']),
         isInstanceRunning () {
             return this.localInstance.meta?.state === 'running'
         },
@@ -135,6 +138,9 @@ export default {
         },
         instanceSuspended () {
             return this.localInstance.meta?.state === 'suspended'
+        },
+        shouldDisplayKebabMenu () {
+            return this.isAdminUser || this.hasPermission('project:change-status')
         }
     },
     watch: {

test/e2e/frontend/cypress/tests/applications/overview.spec.js

@@ -375,6 +375,65 @@ describe('FlowForge - Applications', () => {
                 })
         })
 
+        it('doesn\'t display the instance kebab menu for non-owner users', () => {
+            cy.intercept(
+                'GET',
+                '/api/*/teams/*/user',
+                { role: 30 }
+            ).as('getTeamRole')
+            cy.intercept(
+                'GET',
+                '/api/*/teams/*/applications/status*',
+                { count: 1, applications: [{ id: 'some-id', instances: [], devices: [] }] }
+            ).as('getAppStatuses')
+            cy.intercept('get', '/api/*/applications/*/devices*', {
+                meta: {},
+                count: 0,
+                devices: []
+            }).as('getDevices')
+            cy.intercept(
+                'GET',
+                '/api/*/teams/*/applications*',
+                req => req.reply(res => {
+                    res.send({
+                        count: 1,
+                        applications: [
+                            {
+                                id: 'some-id',
+                                name: 'My app',
+                                description: 'My empty app description',
+                                instancesSummary: {
+                                    instances: [
+                                        {
+                                            id: 1,
+                                            name: 'instance-1',
+                                            meta: {
+                                                versions: {
+                                                    launcher: '2.3.1'
+                                                },
+                                                state: 'running'
+                                            },
+                                            url: 'https://www.google.com:123/search?q=rick+astley'
+                                        }
+                                    ]
+                                },
+                                devicesSummary: {
+                                    devices: [
+                                    ]
+                                }
+                            }
+                        ]
+                    })
+                })
+            ).as('getApplication')
+
+            cy.visit('/')
+            cy.wait('@getTeamRole')
+            cy.wait('@getDevices')
+
+            cy.get('[data-el="kebab-menu"]').should('not.exist')
+        })
+
         describe('can search through', () => {
             it('applications', () => {
                 cy.intercept(