From 0524fff43b37457918f2fef66bdc64c4f6fc658e Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 16 Jan 2025 12:24:28 +0200
Subject: [PATCH] Team groups follow-up

- fix create group dialog application selector not closing after selection
- adding explicit selectors for create dialog
- fix page title and route to match nomenclature
- adding e2e tests
---
 .../src/pages/team/DeviceGroups/index.vue     |  44 +++--
 frontend/src/pages/team/routes.js             |   4 +-
 .../cypress/tests/team/groups.spec.js         | 172 ++++++++++++++++++
 3 files changed, 200 insertions(+), 20 deletions(-)
 create mode 100644 test/e2e/frontend/cypress/tests/team/groups.spec.js

diff --git a/frontend/src/pages/team/DeviceGroups/index.vue b/frontend/src/pages/team/DeviceGroups/index.vue
index 97d9deaff0..25f8a5537e 100644
--- a/frontend/src/pages/team/DeviceGroups/index.vue
+++ b/frontend/src/pages/team/DeviceGroups/index.vue
@@ -65,14 +65,16 @@
                             <p>Groups can then be set as the target in a DevOps Pipeline to update multiple devices in a single operation</p>
                         </template>
                         <template #actions>
-                            <ff-button class="center" @click="showCreateDeviceGroupDialog">Create Group</ff-button>
+                            <ff-button class="center" data-action="create-device-group" @click="showCreateDeviceGroupDialog">
+                                Create Group
+                            </ff-button>
                         </template>
                     </EmptyState>
                 </template>
             </div>
         </template>
     </ff-page>
-    <ff-dialog ref="create-dialog" class="ff-dialog-box--info" header="Create Group">
+    <ff-dialog ref="create-dialog" class="ff-dialog-box--info" header="Create Group" data-dialog="create-group">
         <template #default>
             <slot name="helptext">
                 <p>Enter the name and description of the Device Group to create.</p>
@@ -80,28 +82,34 @@
             <div class="flex gap-4">
                 <div class="flex-grow">
                     <div class="form-row max-w-sm mb-2">
-                        <label>
-                            <span class="block mb-1">
-                                Application
-                            </span>
-                            <ff-listbox
-                                v-model="input.application"
-                                :options="applicationOptions"
-                                data-el="snapshots-list"
-                                label-key="label"
-                                option-title-key="description"
-                                class="flex-grow w-full"
-                            />
-                        </label>
+                        <label class="block text-sm font-medium mb-1">Application</label>
+                        <ff-listbox
+                            v-model="input.application"
+                            :options="applicationOptions"
+                            data-el="applications-list"
+                            class="flex-grow w-full"
+                        />
                     </div>
                     <FormRow v-model="input.name" class="mb-2" :error="!input.name ? 'required' : ''" data-form="name">Name</FormRow>
-                    <FormRow v-model="input.description" data-form="name">Description</FormRow>
+                    <FormRow v-model="input.description" data-form="description">Description</FormRow>
                 </div>
             </div>
         </template>
         <template #actions>
-            <ff-button kind="secondary" @click="$refs['create-dialog'].close()">Cancel</ff-button>
-            <ff-button kind="primary" @click="createDeviceGroup">Create</ff-button>
+            <ff-button
+                kind="secondary"
+                data-action="dialog-cancel"
+                @click="$refs['create-dialog'].close()"
+            >
+                Cancel
+            </ff-button>
+            <ff-button
+                kind="primary"
+                data-action="dialog-confirm"
+                @click="createDeviceGroup"
+            >
+                Create
+            </ff-button>
         </template>
     </ff-dialog>
 </template>
diff --git a/frontend/src/pages/team/routes.js b/frontend/src/pages/team/routes.js
index 5aec06ac11..7ab0e3b5d5 100644
--- a/frontend/src/pages/team/routes.js
+++ b/frontend/src/pages/team/routes.js
@@ -219,10 +219,10 @@ export default [
                     },
                     {
                         name: 'device-groups',
-                        path: 'device-groups',
+                        path: 'groups',
                         component: DeviceGroups,
                         meta: {
-                            title: 'Team - Remote Instances Groups'
+                            title: 'Team - Groups'
                         }
                     }
                 ]
diff --git a/test/e2e/frontend/cypress/tests/team/groups.spec.js b/test/e2e/frontend/cypress/tests/team/groups.spec.js
new file mode 100644
index 0000000000..e88c7f187a
--- /dev/null
+++ b/test/e2e/frontend/cypress/tests/team/groups.spec.js
@@ -0,0 +1,172 @@
+describe('FlowForge - Groups', () => {
+    describe('Teams with the groups feature disabled', () => {
+        it('should have the groups menu entry in the sidebar and display the feature banner', () => {
+            cy.login('bob', 'bbPassword')
+            cy.home()
+
+            // check for menu entry
+            cy.get('[data-el="left-drawer"] [data-nav="device-groups"]').should('exist')
+            cy.get('[data-el="left-drawer"] [data-nav="device-groups"]').should('be.visible')
+
+            // check for premium feature marking
+            cy.get('[data-el="left-drawer"] [data-nav="device-groups"] [data-el="premium-feature"]').should('exist')
+            cy.get('[data-el="left-drawer"] [data-nav="device-groups"] [data-el="premium-feature"]').should('be.visible')
+
+            cy.get('[data-el="left-drawer"] [data-nav="device-groups"]').click()
+
+            cy.url().should('include', '/groups')
+
+            cy.get('[data-cy="page-name"]').should('contain', 'Groups')
+            cy.get('[data-el="page-banner-feature-unavailable-to-team"]').should('be.visible')
+            cy.get('[data-el="empty-state"]').should('be.visible')
+            cy.get('[data-el="empty-state"]').should('contain', 'Groups Not Available')
+
+            cy.get('[data-action="create-device-group"]').should('not.exist')
+        })
+    })
+
+    describe('Teams with the groups feature enabled', () => {
+        beforeEach(() => {
+            cy.intercept('/api/*/teams/*', (req) => {
+                req.reply((response) => {
+                    response.body.type.properties.features.deviceGroups = true
+                    return response
+                })
+            }).as('enableTeamGroups')
+
+            cy.login('bob', 'bbPassword')
+            cy.home()
+            cy.wait('@enableTeamGroups')
+        })
+
+        it('should have the groups menu entry in the sidebar and display an empty state message', () => {
+            // check for menu entry
+            cy.get('[data-el="left-drawer"] [data-nav="device-groups"]').should('exist')
+            cy.get('[data-el="left-drawer"] [data-nav="device-groups"]').should('be.visible')
+
+            // check for premium feature marking
+            cy.get('[data-el="left-drawer"] [data-nav="device-groups"] [data-el="premium-feature"]').should('not.exist')
+
+            cy.get('[data-el="left-drawer"] [data-nav="device-groups"]').click()
+
+            cy.url().should('include', '/groups')
+
+            cy.get('[data-el="empty-state"]').should('be.visible')
+            cy.get('[data-el="empty-state"]').should('contain', 'Start building your Groups')
+            cy.get('[data-el="empty-state"] [data-action="create-device-group"]').should('exist')
+            cy.get('[data-el="empty-state"] [data-action="create-device-group"]').should('be.enabled')
+        })
+
+        it('should allow users to create groups when they don\'t have any', () => {
+            cy.intercept('POST', '/api/*/applications/*/device-groups', {
+                description: '',
+                name: 'A new group'
+            }).as('createGroup')
+            cy.intercept('GET', '/api/*/teams/*/device-groups', {
+                meta: {},
+                count: 0,
+                groups: []
+            })
+                .as('getGroups')
+            cy.get('[data-el="left-drawer"] [data-nav="device-groups"]').click()
+
+            cy.get('[data-dialog="create-group"]').should('exist')
+            cy.get('[data-dialog="create-group"]').should('not.be.visible')
+
+            cy.get('[data-el="empty-state"] [data-action="create-device-group"]').should('exist')
+            cy.get('[data-el="empty-state"] [data-action="create-device-group"]').should('be.enabled')
+
+            cy.get('[data-el="empty-state"] [data-action="create-device-group"]').click()
+
+            cy.get('[data-dialog="create-group"]').should('be.visible')
+            cy.get('[data-dialog="create-group"]').within(() => {
+                cy.get('[data-el="applications-list"]').click()
+                cy.get('[data-el="applications-list"]').within(() => {
+                    cy.get('[data-option="application-1"]').click()
+                })
+                cy.get('[data-form="name"] input').type('A new group')
+                cy.get('[data-action="dialog-confirm"]').click()
+            })
+
+            cy.wait('@createGroup')
+            cy.wait('@getGroups')
+        })
+
+        it('should display the groups list table when groups are present', () => {
+            cy.intercept('GET', '/api/*/teams/*/device-groups', {
+                meta: {},
+                count: 0,
+                groups: [{
+                    id: 'id',
+                    name: 'a group',
+                    description: 'group description',
+                    deviceCount: 2,
+                    targetSnapshot: null,
+                    application: {
+                        id: 'id',
+                        name: 'application-1'
+                    }
+                }]
+            }).as('getGroups')
+            cy.get('[data-el="left-drawer"] [data-nav="device-groups"]').click()
+
+            cy.wait('@getGroups')
+
+            cy.get('[data-el="empty-state"]').should('not.exist')
+            cy.get('[data-el="device-groups-table"]').should('exist')
+            cy.get('[data-el="device-groups-table"]').should('be.visible')
+
+            cy.get('[data-el="device-groups-table"] tbody tr').should('have.length', 1)
+            cy.get('[data-el="device-groups-table"] tbody tr').should('contain', 'a group')
+            cy.get('[data-el="device-groups-table"] tbody tr').should('contain', 'application-1')
+            cy.get('[data-el="device-groups-table"] tbody tr').should('contain', 'group description')
+            cy.get('[data-el="device-groups-table"] tbody tr').should('contain', '2')
+        })
+
+        it('should allow users to create groups when they already have some', () => {
+            cy.intercept('GET', '/api/*/teams/*/device-groups', {
+                meta: {},
+                count: 0,
+                groups: [{
+                    id: 'id',
+                    name: 'a group',
+                    description: 'group description',
+                    deviceCount: 2,
+                    targetSnapshot: null,
+                    application: {
+                        id: 'id',
+                        name: 'application-1'
+                    }
+                }]
+            }).as('getGroups')
+            cy.intercept('POST', '/api/*/applications/*/device-groups', {
+                description: '',
+                name: 'A new group'
+            }).as('createGroup')
+            cy.get('[data-el="left-drawer"] [data-nav="device-groups"]').click()
+
+            cy.wait('@getGroups')
+
+            cy.get('[data-dialog="create-group"]').should('exist')
+            cy.get('[data-dialog="create-group"]').should('not.be.visible')
+
+            cy.get('[data-el="device-groups-table"] [data-action="create-device-group"]').should('exist')
+            cy.get('[data-el="device-groups-table"] [data-action="create-device-group"]').should('be.enabled')
+
+            cy.get('[data-el="device-groups-table"] [data-action="create-device-group"]').click()
+
+            cy.get('[data-dialog="create-group"]').should('be.visible')
+            cy.get('[data-dialog="create-group"]').within(() => {
+                cy.get('[data-el="applications-list"]').click()
+                cy.get('[data-el="applications-list"]').within(() => {
+                    cy.get('[data-option="application-1"]').click()
+                })
+                cy.get('[data-form="name"] input').type('A new group')
+                cy.get('[data-action="dialog-confirm"]').click()
+            })
+
+            cy.wait('@createGroup')
+            cy.wait('@getGroups')
+        })
+    })
+})