Merge pull request #5 from mportiz08/sidenav-feature-flag

Hide new navigator UX behind a feature flag

Author: dobromir-hristov

app/public/theme-settings.json

@@ -53,6 +53,9 @@
     "docs": {
       "summary": {
         "hide": false
+      },
+      "navigator": {
+        "enable": false
       }
     }
   }

src/components/AdjustableSidebarWidth.vue

@@ -49,7 +49,7 @@ import { waitFrames } from 'docc-render/utils/loading';
 import scrollLock from 'docc-render/utils/scroll-lock';
 import FocusTrap from 'docc-render/utils/FocusTrap';
 import changeElementVOVisibility from 'docc-render/utils/changeElementVOVisibility';
-import throttle from '@/utils/throttle';
+import throttle from 'docc-render/utils/throttle';
 
 export const STORAGE_KEY = 'sidebar';
 

src/views/DocumentationTopic.vue

@@ -26,7 +26,7 @@
         @toggle-sidenav="isSideNavOpen = !isSideNavOpen"
       />
       <component
-        :is="isTargetIDE ? 'div': 'AdjustableSidebarWidth'"
+        :is="enableNavigator ? 'AdjustableSidebarWidth' : 'div'"
         v-bind="sidebarProps"
         v-on="sidebarListeners"
       >
@@ -64,6 +64,7 @@
 
 <script>
 import { apply } from 'docc-render/utils/json-patch';
+import { getSetting } from 'docc-render/utils/theme-settings';
 import {
   clone,
   fetchDataForRouteEnter,
@@ -224,11 +225,17 @@ export default {
           && platforms.every(platform => platform.deprecatedAt)
         )
       ),
-    sidebarProps: ({ isSideNavOpen, isTargetIDE }) => (isTargetIDE ? {} : { class: 'full-width-container', openExternally: isSideNavOpen }),
+    // Always disable the navigator for IDE targets. For other targets, allow
+    // this feature to be enabled through the `features.docs.navigator.enable`
+    // setting in `theme-settings.json`
+    enableNavigator: ({ isTargetIDE }) => !isTargetIDE && (
+      getSetting(['features', 'docs', 'navigator', 'enable'], false)
+    ),
+    sidebarProps: ({ isSideNavOpen, enableNavigator }) => (enableNavigator ? { class: 'full-width-container', openExternally: isSideNavOpen } : {}),
     sidebarListeners() {
-      return this.isTargetIDE ? {} : {
+      return this.enableNavigator ? ({
         'update:openExternally': (v) => { this.isSideNavOpen = v; },
-      };
+      }) : {};
     },
   },
   methods: {

tests/unit/views/DocumentationTopic.spec.js

@@ -10,6 +10,7 @@
 
 import * as dataUtils from 'docc-render/utils/data';
 import { shallowMount } from '@vue/test-utils';
+import { getSetting } from 'docc-render/utils/theme-settings';
 import DocumentationTopic from 'docc-render/views/DocumentationTopic.vue';
 import DocumentationTopicStore from 'docc-render/stores/DocumentationTopicStore';
 import onPageLoadScrollToFragment from 'docc-render/mixins/onPageLoadScrollToFragment';
@@ -23,6 +24,14 @@ jest.mock('docc-render/mixins/onPageLoadScrollToFragment');
 jest.mock('docc-render/utils/FocusTrap');
 jest.mock('docc-render/utils/changeElementVOVisibility');
 jest.mock('docc-render/utils/scroll-lock');
+jest.mock('docc-render/utils/theme-settings');
+
+const defaultGetSetting = (_, fallback) => fallback;
+const getSettingWithNavigatorEnabled = (settingKeyPath, fallback) => (
+  (settingKeyPath.join('.') === 'features.docs.navigator.enable') || fallback
+);
+
+getSetting.mockImplementation(defaultGetSetting);
 
 const TechnologyWithChildren = {
   path: 'path/to/foo',
@@ -130,7 +139,9 @@ describe('DocumentationTopic', () => {
     expect(codeTheme.isEmpty()).toBe(true);
   });
 
-  it('renders the Navigator and AdjustableSidebarWidth', async () => {
+  it('renders the Navigator and AdjustableSidebarWidth when enabled', async () => {
+    getSetting.mockImplementation(getSettingWithNavigatorEnabled);
+
     wrapper.setData({ topicData });
     expect(wrapper.find(AdjustableSidebarWidth).props()).toEqual({
       openExternally: false,
@@ -160,6 +171,8 @@ describe('DocumentationTopic', () => {
       references: topicData.references,
       technology: TechnologyWithChildren,
     });
+
+    getSetting.mockReset();
   });
 
   it('renders a `Nav` component', () => {
@@ -186,6 +199,8 @@ describe('DocumentationTopic', () => {
   });
 
   it('handles the `@close`, on Navigator', async () => {
+    getSetting.mockImplementation(getSettingWithNavigatorEnabled);
+
     wrapper.setData({ topicData });
     await flushPromises();
     const nav = wrapper.find(Nav);
@@ -195,6 +210,8 @@ describe('DocumentationTopic', () => {
     await flushPromises();
     wrapper.find(Navigator).vm.$emit('close');
     expect(sidebar.props('openExternally')).toBe(false);
+
+    getSetting.mockReset();
   });
 
   it('renders a `Topic` with `topicData`', () => {