Opt-Click on framework name expand/collapse everything (#428)

closes rdar://94150776

Co-authored-by: Dobromir Hristov <[email protected]>

Author: marinaaisa

src/components/Navigator/NavigatorCard.vue

@@ -23,7 +23,12 @@
             >
               <SidenavIcon class="icon-inline close-icon" />
             </button>
-            <Reference :url="technologyPath" class="navigator-head" :id="INDEX_ROOT_KEY">
+            <Reference
+              class="navigator-head"
+              :url="technologyPath"
+              :id="INDEX_ROOT_KEY"
+              @click.alt.native.prevent="toggleAllNodes"
+            >
               <h2 class="card-link">
                 {{ technology }}
               </h2>
@@ -281,6 +286,7 @@ export default {
       NO_CHILDREN,
       ERROR_FETCHING,
       ITEMS_FOUND,
+      allNodesToggled: false,
     };
   },
   computed: {
@@ -506,6 +512,20 @@ export default {
     },
   },
   methods: {
+    toggleAllNodes() {
+      const parentNodes = this.children.filter(child => child.parent === INDEX_ROOT_KEY
+        && child.type !== TopicTypes.groupMarker && child.childUIDs.length);
+      // make sure all nodes get either open or close
+      this.allNodesToggled = !this.allNodesToggled;
+      if (this.allNodesToggled) {
+        this.openNodes = {};
+        this.generateNodesToRender();
+      }
+
+      parentNodes.forEach((node) => {
+        this.toggleFullTree(node);
+      });
+    },
     clearFilters() {
       this.filter = '';
       this.debouncedFilter = '';

tests/unit/components/Navigator/NavigatorCard.spec.js

@@ -364,6 +364,30 @@ describe('NavigatorCard', () => {
     expect(wrapper.vm.focusedIndex).toBe(wrapper.findAll(NavigatorCardItem).length - 1);
   });
 
+  it('allows expand/collapse all symbols when clicking on framework name + while pressing alt', async () => {
+    const wrapper = createWrapper();
+    await flushPromises();
+    // assert initial items are rendered
+    expect(wrapper.findAll(NavigatorCardItem)).toHaveLength(4);
+
+    const navHead = wrapper.find('.navigator-head');
+
+    // open all children symbols
+    navHead.trigger('click', { altKey: true });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.findAll(NavigatorCardItem)).toHaveLength(children.length);
+
+    // close all children symbols
+    navHead.trigger('click', { altKey: true });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.findAll(NavigatorCardItem)).toHaveLength(2);
+
+    // open all children symbols
+    navHead.trigger('click', { altKey: true });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.findAll(NavigatorCardItem)).toHaveLength(children.length);
+  });
+
   it('allows the user to navigate to the first item on the list when pressing alt + up key', async () => {
     const wrapper = createWrapper();
     await flushPromises();