Revert "Deprecate confusing option names"

This reverts commit 7136232.

addons/options/.storybook/config.js

@@ -5,10 +5,10 @@ setOptions({
   name: 'CUSTOM-OPTIONS',
   url: 'https://github.com/storybooks/storybook',
   // goFullScreen: false,
-  // showStoriesPanel: true,
-  showAddonPanel: false,
+  // showLeftPanel: true,
+  showDownPanel: false,
   // showSearchBox: false,
-  // addonPanelInRight: false,
+  // downPanelInRight: false,
 });
 
 storybook.configure(() => require('./stories'), module);

examples/cra-kitchen-sink/.storybook/config.js

@@ -6,10 +6,10 @@ setOptions({
   name: 'CRA Kitchen Sink',
   url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink',
   goFullScreen: false,
-  showStoriesPanel: true,
-  showAddonsPanel: true,
+  showLeftPanel: true,
+  showDownPanel: true,
   showSearchBox: false,
-  addonsPanelInRight: true,
+  downPanelInRight: true,
   sortStoriesByKind: false,
   hierarchySeparator: /\/|\./,
 });

lib/ui/src/libs/key_events.js

@@ -2,14 +2,14 @@ import keycode from 'keycode';
 
 export const features = {
   FULLSCREEN: 1,
-  ADDON_PANEL: 2,
-  NAVIGATION_PANEL: 3,
+  DOWN_PANEL: 2,
+  LEFT_PANEL: 3,
   SHORTCUTS_HELP: 4,
   ESCAPE: 5,
   NEXT_STORY: 6,
   PREV_STORY: 7,
   SHOW_SEARCH: 8,
-  ADDON_PANEL_IN_RIGHT: 9,
+  DOWN_PANEL_IN_RIGHT: 9,
 };
 
 export function isModifierPressed(e) {
@@ -42,10 +42,10 @@ export default function handle(e) {
       return features.FULLSCREEN;
     case keycode('D'):
       e.preventDefault();
-      return features.ADDON_PANEL;
+      return features.DOWN_PANEL;
     case keycode('L'):
       e.preventDefault();
-      return features.NAVIGATION_PANEL;
+      return features.LEFT_PANEL;
     case keycode('right'):
       e.preventDefault();
       return features.NEXT_STORY;
@@ -57,7 +57,7 @@ export default function handle(e) {
       return features.SHOW_SEARCH;
     case keycode('J'):
       e.preventDefault();
-      return features.ADDON_PANEL_IN_RIGHT;
+      return features.DOWN_PANEL_IN_RIGHT;
     default:
       return false;
   }

lib/ui/src/modules/api/actions/api.test.js

@@ -216,7 +216,7 @@ describe('manager.api.actions.api', () => {
       expect(stateUpdates.selectedAddonPanel).toEqual('storybooks/storybook-addon-knobs');
     });
 
-    it('should keep current addonPanel and output panel IDs', () => {
+    it('should keep current downPanel and output panel IDs', () => {
       const clientStore = new MockClientStore();
       actions.setOptions({ clientStore, provider }, { selectedAddonPanel: null });
 

lib/ui/src/modules/shortcuts/actions/shortcuts.js

@@ -2,32 +2,23 @@ import pick from 'lodash.pick';
 import { features } from '../../../libs/key_events';
 import apiActions from '../../api/actions';
 
-const deprecationMessage = (oldName, newName) =>
-  `The ${oldName} prop is renamed to ${newName} and will not be available since the next major Storybook release. Please update your config.`;
-
 export function keyEventToOptions(currentOptions, event) {
   switch (event) {
     case features.FULLSCREEN:
       return { goFullScreen: !currentOptions.goFullScreen };
-    case features.ADDON_PANEL:
-      return { showAddonPanel: !currentOptions.showAddonPanel };
-    case features.NAVIGATION_PANEL:
-      return { showStoriesPanel: !currentOptions.showStoriesPanel };
+    case features.DOWN_PANEL:
+      return { showDownPanel: !currentOptions.showDownPanel };
+    case features.LEFT_PANEL:
+      return { showLeftPanel: !currentOptions.showLeftPanel };
     case features.SHOW_SEARCH:
       return { showSearchBox: true };
-    case features.ADDON_PANEL_IN_RIGHT:
-      return { addonPanelInRight: !currentOptions.addonPanelInRight };
+    case features.DOWN_PANEL_IN_RIGHT:
+      return { downPanelInRight: !currentOptions.downPanelInRight };
     default:
       return {};
   }
 }
 
-const renamedOptions = {
-  showLeftPanel: 'showStoriesPanel',
-  showDownPanel: 'showAddonPanel',
-  downPanelInRight: 'addonPanelInRight',
-};
-
 export default {
   handleEvent(context, event) {
     const { clientStore } = context;
@@ -60,24 +51,8 @@ export default {
         ...pick(options, Object.keys(state.shortcutOptions)),
       };
 
-      const withNewNames = Object.keys(renamedOptions).reduce((acc, oldName) => {
-        const newName = renamedOptions[oldName];
-
-        if (oldName in options && !(newName in options)) {
-          // eslint-disable-next-line no-console
-          console.warn(deprecationMessage(oldName, newName));
-
-          return {
-            ...acc,
-            [newName]: options[oldName],
-          };
-        }
-
-        return acc;
-      }, updatedOptions);
-
       return {
-        shortcutOptions: withNewNames,
+        shortcutOptions: updatedOptions,
       };
     });
   },

lib/ui/src/modules/shortcuts/actions/shortcuts.test.js

@@ -35,34 +35,5 @@ describe('manager.shortcuts.actions.shortcuts', () => {
         shortcutOptions: { bbc: 50, abc: 10 },
       });
     });
-
-    test('should warn about deprecated option names', () => {
-      const clientStore = new MockClientStore();
-      const spy = jest.spyOn(global.console, 'warn');
-      actions.setOptions(
-        { clientStore },
-        {
-          showLeftPanel: 1,
-          showDownPanel: 2,
-          downPanelInRight: 3,
-        }
-      );
-
-      const state = {
-        shortcutOptions: {},
-      };
-      const stateUpdates = clientStore.updateCallback(state);
-      expect(spy).toHaveBeenCalledTimes(3);
-      expect(stateUpdates).toEqual({
-        shortcutOptions: {
-          showStoriesPanel: 1,
-          showAddonPanel: 2,
-          addonPanelInRight: 3,
-        },
-      });
-
-      spy.mockReset();
-      spy.mockRestore();
-    });
   });
 });

lib/ui/src/modules/shortcuts/index.js

@@ -5,10 +5,10 @@ export default {
   defaultState: {
     shortcutOptions: {
       goFullScreen: false,
-      showStoriesPanel: true,
-      showAddonPanel: true,
+      showLeftPanel: true,
+      showDownPanel: true,
       showSearchBox: false,
-      addonPanelInRight: false,
+      downPanelInRight: false,
     },
   },
 };

lib/ui/src/modules/ui/actions/ui.js

@@ -7,7 +7,7 @@ export default {
     clientStore.toggle('showShortcutsHelp');
   },
 
-  selectAddonPanel({ clientStore }, panelName) {
+  selectDownPanel({ clientStore }, panelName) {
     clientStore.set('selectedAddonPanel', panelName);
   },
 };

lib/ui/src/modules/ui/actions/ui.test.js

@@ -24,13 +24,13 @@ describe('manager.ui.actions.ui', () => {
     });
   });
 
-  describe('selectAddonPanel', () => {
+  describe('selectDownPanel', () => {
     it('should set the given panel name', () => {
       const clientStore = {
         set: jest.fn(),
       };
       const panelName = 'kkkind';
-      actions.selectAddonPanel({ clientStore }, panelName);
+      actions.selectDownPanel({ clientStore }, panelName);
 
       expect(clientStore.set).toHaveBeenCalledWith('selectedAddonPanel', panelName);
     });

lib/ui/src/modules/ui/components/addon_panel/index.js → lib/ui/src/modules/ui/components/down_panel/index.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import style from './style';
 
-class AddonPanel extends Component {
+class DownPanel extends Component {
   renderTab(name, panel) {
     let tabStyle = style.tablink;
     if (this.props.selectedPanel === name) {
@@ -69,16 +69,16 @@ class AddonPanel extends Component {
   }
 }
 
-AddonPanel.defaultProps = {
+DownPanel.defaultProps = {
   panels: {},
   onPanelSelect: () => {},
   selectedPanel: null,
 };
 
-AddonPanel.propTypes = {
+DownPanel.propTypes = {
   panels: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   onPanelSelect: PropTypes.func,
   selectedPanel: PropTypes.string,
 };
 
-export default AddonPanel;
+export default DownPanel;

lib/ui/src/modules/ui/components/addon_panel/index.test.js → lib/ui/src/modules/ui/components/down_panel/index.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import AddonPanel from './index';
+import DownPanel from './index';
 
-describe('manager.ui.components.addon_panel.index', () => {
+describe('manager.ui.components.down_panel.index', () => {
   test('should render only the selected panel with display set other than "none"', () => {
     const panels = {
       test1: {
@@ -20,7 +20,7 @@ describe('manager.ui.components.addon_panel.index', () => {
     const onPanelSelect = () => 'onPanelSelect';
 
     const wrapper = shallow(
-      <AddonPanel panels={panels} onPanelSelect={onPanelSelect} selectedPanel={'test2'} />
+      <DownPanel panels={panels} onPanelSelect={onPanelSelect} selectedPanel={'test2'} />
     );
 
     expect(wrapper.find('#test1').parent()).toHaveStyle('display', 'none');
@@ -38,7 +38,7 @@ describe('manager.ui.components.addon_panel.index', () => {
     const onPanelSelect = jest.fn();
     const preventDefault = jest.fn();
     const wrapper = shallow(
-      <AddonPanel panels={panels} onPanelSelect={onPanelSelect} selectedPanel={'test1'} />
+      <DownPanel panels={panels} onPanelSelect={onPanelSelect} selectedPanel={'test1'} />
     );
     wrapper.find('a').simulate('click', { preventDefault });
 
@@ -50,7 +50,7 @@ describe('manager.ui.components.addon_panel.index', () => {
     test('should render "no panels available"', () => {
       const panels = {};
       const onPanelSelect = () => 'onPanelSelect';
-      const wrapper = shallow(<AddonPanel panels={panels} onPanelSelect={onPanelSelect} />);
+      const wrapper = shallow(<DownPanel panels={panels} onPanelSelect={onPanelSelect} />);
 
       expect(wrapper.contains('no panels available')).toBe(true);
     });