2218 Modify component behavior, update tests

dashboard/src/skills-display/components/progress/SkillProgress.vue

@@ -29,6 +29,8 @@ import CatalogImportStatus from '@/skills-display/components/progress/CatalogImp
 import PartialPointsAlert from '@/skills-display/components/skill/PartialPointsAlert.vue'
 import SkillVideo from '@/skills-display/components/progress/SkillVideo.vue';
 import dayjs from 'dayjs';
+import {useStorage} from "@vueuse/core";
+import {useSkillsAnnouncer} from "@/common-components/utilities/UseSkillsAnnouncer.js";
 
 const props = defineProps({
   skill: Object,
@@ -72,8 +74,9 @@ const props = defineProps({
     required: false
   }
 })
-const emit = defineEmits(['add-tag-filter', 'points-earned'])
+const emit = defineEmits(['add-tag-filter', 'points-earned', 'reset-group-expansion'])
 const route = useRoute()
+const announcer = useSkillsAnnouncer()
 const skillsDisplayInfo = useSkillsDisplayInfo()
 const attributes = useSkillsDisplayAttributesState()
 
@@ -125,17 +128,16 @@ const pointsEarned = (pts) => {
 }
 
 const isSkillComplete = computed(() => props.skill && props.skill.meta && props.skill.meta.complete)
-const expanded = ref(null);
+const storageKey = computed(() => props.skill.projectId + '-' + props.skill.skillId + '-expanded')
+const expanded = useStorage(storageKey.value, true)
 const toggleRow = () => {
   expanded.value = !expanded.value;
+  announcer.polite(`Group ${props.skill.skill} has been ${expanded.value ? 'expanded' : 'collapsed'}`);
+  emit('reset-group-expansion')
 }
 watch(() => props.expandGroups, (newValue) => {
-  expanded.value = newValue
-})
-
-onMounted(() => {
-  if(props.expandGroups) {
-    expanded.value = props.expandGroups
+  if(newValue !== null && props.skill.type === 'SkillsGroup') {
+    expanded.value = newValue
   }
 })
 </script>

dashboard/src/skills-display/components/progress/SkillsProgressList.vue

@@ -15,7 +15,6 @@ limitations under the License.
 */
 <script setup>
 import { computed, onMounted, ref } from 'vue'
-import {useStorage} from "@vueuse/core";
 import SkillProgress from '@/skills-display/components/progress/SkillProgress.vue'
 import { useScrollSkillsIntoViewState } from '@/skills-display/stores/UseScrollSkillsIntoViewState.js'
 import { useSkillsDisplayService } from '@/skills-display/services/UseSkillsDisplayService.js'
@@ -216,7 +215,20 @@ const isLastViewedScrollSupported = computed(() => {
   return !parentFrame.parentFrame || parentFrame.isLastViewedScrollSupported
 })
 
-const expandGroups = useStorage(`client-groups-expanded`, true)
+const expandGroups = ref(null)
+const hasGroups = computed(() => {
+  return !!skillsInternal.value.find(it => it.type === 'SkillsGroup')
+})
+
+const expandAllGroups = (() => {
+  expandGroups.value = true
+})
+const collapseAllGroups = (() => {
+  expandGroups.value = false
+})
+const resetGroupExpansion = (() => {
+  expandGroups.value = null
+})
 </script>
 
 <template>
@@ -272,12 +284,9 @@ const expandGroups = useStorage(`client-groups-expanded`, true)
 
           <div class="" data-cy="skillDetailsToggle">
             <div class="flex flex-row flex-wrap align-content-center">
-              <div class="flex mr-3">
-                <span class="text-muted pr-1 align-content-center" v-if="!route.params.badgeId">Expand Groups:</span>
-                <InputSwitch v-model="expandGroups"
-                             v-if="!route.params.badgeId"
-                             aria-label="Expand Groups"
-                             data-cy="expandGroupsSwitch" />
+              <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>
               </div>
               <div class="flex">
                 <span class="text-muted pr-1 align-content-center">{{ attributes.skillDisplayName }} Details:</span>
@@ -333,6 +342,7 @@ const expandGroups = useStorage(`client-groups-expanded`, true)
               :skill="skill"
               :type="type"
               :expand-groups="expandGroups"
+              @reset-group-expansion="resetGroupExpansion"
               :enable-drill-down="true"
               :show-description="showDescriptionsInternal"
               :data-cy="`skillProgress_index-${index}`"

dashboard/src/skills-display/components/progress/skill/SkillProgressNameRow.vue

@@ -156,8 +156,8 @@ const skillId = computed(() => {
                     v-if="skill.isSkillsGroupType"
                     outlined
                     :aria-label="!isExpanded ? 'Expand Group' : 'Collapse Group'"
-                    text
-                    class="p-1"
+                    style="padding: 0.3rem 0.3rem 0.3rem 0.1rem;"
+                    class="ml-2"
                     :data-cy="`toggleGroup-${skillId}`"
                     @click="emit('toggle-row')">
             </SkillsButton>

e2e-tests/cypress/e2e/client-display/client-display_spec.js

@@ -406,15 +406,12 @@ describe('Client Display Tests', () => {
         cy.cdVisit('/', true);
         cy.cdClickSubj(1, 'Subject 2', false);
 
-        cy.get('[data-cy=expandGroupsSwitch] input').should('be.checked')
         checkGroupSkillExistence(true)
 
-        cy.get('[data-cy=expandGroupsSwitch]').click()
-        cy.get('[data-cy=expandGroupsSwitch] input').should('not.be.checked')
+        cy.get('[data-cy=collapseGroupsButton]').click()
         checkGroupSkillExistence(false)
 
-        cy.get('[data-cy=expandGroupsSwitch]').click()
-        cy.get('[data-cy=expandGroupsSwitch] input').should('be.checked')
+        cy.get('[data-cy=expandGroupsButton]').click()
         checkGroupSkillExistence(true)
 
         cy.get('[data-cy="toggleGroup-group1Subj2"]').click()
@@ -451,26 +448,50 @@ describe('Client Display Tests', () => {
 
         cy.cdVisit('/subjects/subj2');
 
-        cy.get('[data-cy=expandGroupsSwitch] input').should('be.checked')
         checkGroupSkillExistence(true)
 
-        cy.get('[data-cy=expandGroupsSwitch]').click()
-        cy.get('[data-cy=expandGroupsSwitch] input').should('not.be.checked')
+        cy.get('[data-cy=collapseGroupsButton]').click()
         checkGroupSkillExistence(false)
 
         cy.cdVisit('/subjects/subj2');
-        cy.get('[data-cy=expandGroupsSwitch] input').should('not.be.checked')
         checkGroupSkillExistence(false)
 
-        cy.cdVisit('/subjects/subj1');
-        cy.get('[data-cy=expandGroupsSwitch] input').should('not.be.checked')
-
-        cy.get('[data-cy=expandGroupsSwitch]').click()
-        cy.get('[data-cy=expandGroupsSwitch] input').should('be.checked')
+        cy.get('[data-cy=expandGroupsButton]').click()
 
         cy.cdVisit('/subjects/subj2');
-        cy.get('[data-cy=expandGroupsSwitch] input').should('be.checked')
         checkGroupSkillExistence(true)
+
+        cy.get('[data-cy="toggleGroup-group1Subj2"]').click()
+        cy.get('#skillProgressTitleLink-skill11Subj2').should('not.exist');
+        cy.get('#skillProgressTitleLink-skill12Subj2').should('not.exist');
+        cy.get('#skillProgressTitleLink-skill13Subj2').should('not.exist');
+        cy.get('#skillProgressTitleLink-skill22Subj2').should('exist');
+        cy.get('#skillProgressTitleLink-skill23Subj2').should('exist');
+        cy.get('#skillProgressTitleLink-skill24Subj2').should('exist');
+
+        cy.cdVisit('/subjects/subj2');
+        cy.get('#skillProgressTitleLink-skill11Subj2').should('not.exist');
+        cy.get('#skillProgressTitleLink-skill12Subj2').should('not.exist');
+        cy.get('#skillProgressTitleLink-skill13Subj2').should('not.exist');
+        cy.get('#skillProgressTitleLink-skill22Subj2').should('exist');
+        cy.get('#skillProgressTitleLink-skill23Subj2').should('exist');
+        cy.get('#skillProgressTitleLink-skill24Subj2').should('exist');
+
+        cy.get('[data-cy="toggleGroup-group1Subj2"]').click()
+        cy.get('#skillProgressTitleLink-skill11Subj2').should('exist');
+        cy.get('#skillProgressTitleLink-skill12Subj2').should('exist');
+        cy.get('#skillProgressTitleLink-skill13Subj2').should('exist');
+        cy.get('#skillProgressTitleLink-skill22Subj2').should('exist');
+        cy.get('#skillProgressTitleLink-skill23Subj2').should('exist');
+        cy.get('#skillProgressTitleLink-skill24Subj2').should('exist');
+
+        cy.cdVisit('/subjects/subj2');
+        cy.get('#skillProgressTitleLink-skill11Subj2').should('exist');
+        cy.get('#skillProgressTitleLink-skill12Subj2').should('exist');
+        cy.get('#skillProgressTitleLink-skill13Subj2').should('exist');
+        cy.get('#skillProgressTitleLink-skill22Subj2').should('exist');
+        cy.get('#skillProgressTitleLink-skill23Subj2').should('exist');
+        cy.get('#skillProgressTitleLink-skill24Subj2').should('exist');
     });
 
     const checkGroupSkillExistence = (exists) => {