Preventing storing quick navigator if the feature flag is off (#398)

* [r97377452] fix: preventing storing quick navigator if the feature flag is off

* [r97377452] fix: modify showQuickNavigation in DocumentationTopic component

Author: marinaaisa

src/components/Navigator.vue

@@ -25,6 +25,7 @@
       :error-fetching="errorFetching"
       :breakpoint="breakpoint"
       :api-changes="apiChanges"
+      :enableQuickNavigation="enableQuickNavigation"
       @close="$emit('close')"
     />
     <NavigatorCardInner v-else class="loading-placeholder">
@@ -46,6 +47,7 @@ import NavigatorCardInner from 'docc-render/components/Navigator/NavigatorCardIn
 import { INDEX_ROOT_KEY } from 'docc-render/constants/sidebar';
 import { TopicTypes } from 'docc-render/constants/TopicTypes';
 import { BreakpointName } from 'docc-render/utils/breakpoints';
+import { getSetting } from 'docc-render/utils/theme-settings';
 
 /**
  * @typedef NavigatorFlatItem
@@ -140,13 +142,20 @@ export default {
       }
       return parentTopicReferences.slice(itemsToSlice).map(r => r.url).concat(path);
     },
+    enableQuickNavigation: () => (
+      getSetting(['features', 'docs', 'quickNavigation', 'enable'], false)
+    ),
     /**
      * Recomputes the list of flat children.
      * @return NavigatorFlatItem[]
      */
-    flatChildren: ({ flattenNestedData, technology = {}, store }) => {
+    flatChildren: ({
+      enableQuickNavigation, flattenNestedData, technology = {}, store,
+    }) => {
       const flatIndex = flattenNestedData(technology.children || [], null, 0, technology.beta);
-      store.setFlattenIndex(flatIndex);
+      if (enableQuickNavigation) {
+        store.setFlattenIndex(flatIndex);
+      }
       return flatIndex;
     },
     /**

src/components/Navigator/NavigatorCard.vue

@@ -124,7 +124,6 @@ import { isEqual, last } from 'docc-render/utils/arrays';
 import { ChangeNames, ChangeNameToType } from 'docc-render/constants/Changes';
 import Badge from 'docc-render/components/Badge.vue';
 import MagnifierIcon from 'docc-render/components/Icons/MagnifierIcon.vue';
-import { getSetting } from 'docc-render/utils/theme-settings';
 import QuickNavigationStore from 'docc-render/stores/QuickNavigationStore';
 
 const STORAGE_KEY = 'navigator.state';
@@ -235,6 +234,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    enableQuickNavigation: {
+      type: Boolean,
+      default: false,
+    },
   },
   mixins: [
     keyboardNavigation,
@@ -464,9 +467,6 @@ export default {
     hasNodes: ({ nodesToRender }) => !!nodesToRender.length,
     totalItemsToNavigate: ({ nodesToRender }) => nodesToRender.length,
     lastActivePathItem: ({ activePath }) => last(activePath),
-    enableQuickNavigation: () => (
-      getSetting(['features', 'docs', 'quickNavigation', 'enable'], false)
-    ),
   },
   created() {
     this.restorePersistedState();

src/stores/QuickNavigationStore.js

@@ -10,7 +10,7 @@
 
 export default {
   state: {
-    enableQuickNavigation: false,
+    showQuickNavigation: false,
     flattenIndex: [],
   },
   reset() {
@@ -20,7 +20,7 @@ export default {
     this.state.flattenIndex = flattenIndex;
   },
   toggleShowQuickNavigationModal() {
-    this.state.enableQuickNavigation = !this.state.enableQuickNavigation;
+    this.state.showQuickNavigation = !this.state.showQuickNavigation;
   },
 
 };

src/views/DocumentationTopic.vue

@@ -9,8 +9,8 @@
 -->
 
 <template>
-  <div :class="{ 'modal-open': quickNavigationStore.state.enableQuickNavigation }">
-    <div v-show="quickNavigationStore.state.enableQuickNavigation">
+  <div :class="{ 'modal-open': quickNavigationStore.state.showQuickNavigation }">
+    <div v-show="quickNavigationStore.state.showQuickNavigation">
       <QuickNavigationModal/>
     </div>
     <CodeTheme class="doc-topic-view">

tests/unit/components/Navigator.spec.js

@@ -134,6 +134,7 @@ describe('Navigator', () => {
       activePath: [references.first.url, references.second.url, mocks.$route.path],
       // will assert in another test
       children: expect.any(Array),
+      enableQuickNavigation: false,
       type: TopicTypes.module,
       technology: technology.title,
       technologyPath: technology.path,
@@ -186,6 +187,7 @@ describe('Navigator', () => {
       activePath: [references.first.url, references.second.url, mocks.$route.path],
       // will assert in another test
       children: [],
+      enableQuickNavigation: false,
       type: TopicTypes.module,
       technology: fallbackTechnology.title,
       technologyPath: fallbackTechnology.url,

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

@@ -41,7 +41,7 @@ describe('QuickNavigationModal', () => {
     provide: {
       quickNavigationStore: {
         state: {
-          enableQuickNavigation: false,
+          showQuickNavigation: false,
           flattenIndex: symbols,
         },
       },