From 25b2b8f8e41b2746dfaf70467b3178cbe2c08fdc Mon Sep 17 00:00:00 2001
From: Don Walizer <12420708+dwalizer@users.noreply.github.com>
Date: Fri, 10 Jan 2025 15:12:44 -0500
Subject: [PATCH] #2218 Change group expand component

---
 .../progress/SkillsProgressList.vue           | 34 +++++++++++++++++--
 .../e2e/client-display/client-display_spec.js | 12 ++++---
 2 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/dashboard/src/skills-display/components/progress/SkillsProgressList.vue b/dashboard/src/skills-display/components/progress/SkillsProgressList.vue
index e0f9e0355..cfaa070ae 100644
--- a/dashboard/src/skills-display/components/progress/SkillsProgressList.vue
+++ b/dashboard/src/skills-display/components/progress/SkillsProgressList.vue
@@ -229,6 +229,24 @@ const collapseAllGroups = (() => {
 const resetGroupExpansion = (() => {
   expandGroups.value = null
 })
+
+const items = [
+  {
+    label: 'Collapse All',
+    icon: 'fas fa-minus',
+    command: collapseAllGroups
+  },
+  {
+    label: 'Expand All',
+    icon: 'fas fa-plus',
+    command: expandAllGroups
+  },
+]
+
+const menu = ref()
+const toggle = (event) => {
+  menu.value.toggle(event)
+}
 </script>
 
 <template>
@@ -285,8 +303,20 @@ const resetGroupExpansion = (() => {
           <div class="" data-cy="skillDetailsToggle">
             <div class="flex flex-row flex-wrap align-content-center">
               <div class="flex flex-wrap mr-3 gap-2" v-if="!route.params.badgeId && hasGroups">
-                <SkillsButton label="Expand Groups" icon="fas fa-plus" size="small" data-cy="expandGroupsButton" @click="expandAllGroups"></SkillsButton>
-                <SkillsButton label="Collapse Groups" icon="fas fa-minus" size="small" data-cy="collapseGroupsButton" @click="collapseAllGroups"></SkillsButton>
+                <Button
+                    outlined
+                    raised
+                    size="small"
+                    @click="toggle"
+                    aria-label="Group Controls"
+                    aria-haspopup="true"
+                    data-cy="groupToggle"
+                    aria-controls="group_control_menu">
+                  <i class="fas fa-list mr-1" aria-hidden="true"></i>
+                  <span>Groups</span>
+                  <i class="fas fa-caret-down ml-2"></i>
+                </Button>
+                <Menu ref="menu" :model="items" :popup="true"></Menu>
               </div>
               <div class="flex">
                 <span class="text-muted pr-1 align-content-center">{{ attributes.skillDisplayName }} Details:</span>
diff --git a/e2e-tests/cypress/e2e/client-display/client-display_spec.js b/e2e-tests/cypress/e2e/client-display/client-display_spec.js
index f7d58083a..140612df5 100644
--- a/e2e-tests/cypress/e2e/client-display/client-display_spec.js
+++ b/e2e-tests/cypress/e2e/client-display/client-display_spec.js
@@ -408,10 +408,12 @@ describe('Client Display Tests', () => {
 
         checkGroupSkillExistence(true)
 
-        cy.get('[data-cy=collapseGroupsButton]').click()
+        cy.get('[data-cy=groupToggle]').click()
+        cy.get('[data-pc-name="menu"] [aria-label="Collapse All"]').contains('Collapse All').click();
         checkGroupSkillExistence(false)
 
-        cy.get('[data-cy=expandGroupsButton]').click()
+        cy.get('[data-cy=groupToggle]').click()
+        cy.get('[data-pc-name="menu"] [aria-label="Expand All"]').contains('Expand All').click();
         checkGroupSkillExistence(true)
 
         cy.get('[data-cy="toggleGroup-group1Subj2"]').click()
@@ -450,13 +452,15 @@ describe('Client Display Tests', () => {
 
         checkGroupSkillExistence(true)
 
-        cy.get('[data-cy=collapseGroupsButton]').click()
+        cy.get('[data-cy=groupToggle]').click()
+        cy.get('[data-pc-name="menu"] [aria-label="Collapse All"]').contains('Collapse All').click();
         checkGroupSkillExistence(false)
 
         cy.cdVisit('/subjects/subj2');
         checkGroupSkillExistence(false)
 
-        cy.get('[data-cy=expandGroupsButton]').click()
+        cy.get('[data-cy=groupToggle]').click()
+        cy.get('[data-pc-name="menu"] [aria-label="Expand All"]').contains('Expand All').click();
 
         cy.cdVisit('/subjects/subj2');
         checkGroupSkillExistence(true)