[fix] hide side panel close button when data preview is open (#2174)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com> Co-authored-by: Xun Li <lixun910@gmail.com>
keplergl · Mar 29, 2023 · afee480 · afee480
1 parent 695bccc
commit afee480
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 5 deletions.
diff --git a/src/actions/src/action-types.ts b/src/actions/src/action-types.ts
@@ -142,6 +142,7 @@ export const ActionTypes = {
   TOGGLE_MODAL: `${ACTION_PREFIX}TOGGLE_MODAL`,
   SHOW_EXPORT_DROPDOWN: `${ACTION_PREFIX}SHOW_EXPORT_DROPDOWN`,
   HIDE_EXPORT_DROPDOWN: `${ACTION_PREFIX}HIDE_EXPORT_DROPDOWN`,
+  TOGGLE_SIDE_PANEL_CLOSE_BUTTON: `${ACTION_PREFIX}TOGGLE_SIDE_PANEL_CLOSE_BUTTON`,
   OPEN_DELETE_MODAL: `${ACTION_PREFIX}OPEN_DELETE_MODAL`,
   TOGGLE_MAP_CONTROL: `${ACTION_PREFIX}TOGGLE_MAP_CONTROL`,
   SET_MAP_CONTROL_VISIBILITY: `${ACTION_PREFIX}SET_MAP_CONTROL_VISIBILITY`,

diff --git a/src/actions/src/ui-state-actions.ts b/src/actions/src/ui-state-actions.ts
@@ -94,6 +94,26 @@ export const hideExportDropdown: () => {
   type: typeof ActionTypes.HIDE_EXPORT_DROPDOWN;
 } = createAction(ActionTypes.HIDE_EXPORT_DROPDOWN);
 
+/** TOGGLE_SIDE_PANEL_CLOSE_BUTTON*/
+export type ToggleSidePanelCloseButtonUpdaterAction = {
+  payload: {
+    show: boolean;
+  };
+};
+
+/**
+ * Toggle side panel close button
+ * @memberof uiStateActions
+ * @param show - if side panel button visible
+ * @public
+ */
+export const toggleSidePanelCloseButton: (
+  show: boolean
+) => Merge<
+  ToggleSidePanelCloseButtonUpdaterAction,
+  {type: typeof ActionTypes.TOGGLE_SIDE_PANEL_CLOSE_BUTTON}
+> = createAction(ActionTypes.TOGGLE_SIDE_PANEL_CLOSE_BUTTON, show => ({payload: {show}}));
+
 /** TOGGLE_MAP_CONTROL */
 export type ToggleMapControlUpdaterAction = {
   payload: {

diff --git a/src/components/src/side-panel.tsx b/src/components/src/side-panel.tsx
@@ -194,7 +194,13 @@ export default function SidePanelFactory(
     const PanelComponent = currentPanel?.component;
 
     return (
-      <Sidebar width={width} isOpen={isOpen} minifiedWidth={0} onOpenOrClose={_onOpenOrClose}>
+      <Sidebar
+        width={width}
+        isOpen={isOpen}
+        shouldShowCollapseButton={uiState.isSidePanelCloseButtonVisible}
+        minifiedWidth={0}
+        onOpenOrClose={_onOpenOrClose}
+      >
         <PanelHeader
           appName={appName}
           version={version}

diff --git a/src/components/src/side-panel/side-bar.tsx b/src/components/src/side-panel/side-bar.tsx
@@ -32,6 +32,7 @@ type SideBarProps = {
   isOpen: boolean;
   minifiedWidth: number;
   onOpenOrClose: (arg: {isOpen: boolean}) => void;
+  shouldShowCollapseButton?: boolean | null;
 };
 
 const StyledSidePanelContainer = styled.div<{width: number}>`
@@ -108,15 +109,16 @@ function SidebarFactory(CollapseButton: ReturnType<typeof CollapseButtonFactory>
       width: 300,
       minifiedWidth: 0,
       isOpen: true,
-      onOpenOrClose: function noop() {}
+      onOpenOrClose: function noop() {},
+      shouldShowCollapseButton: true
     };
 
     _onOpenOrClose = () => {
       this.props.onOpenOrClose({isOpen: !this.props.isOpen});
     };
 
     render() {
-      const {isOpen, minifiedWidth, width} = this.props;
+      const {isOpen, minifiedWidth, width, shouldShowCollapseButton} = this.props;
       const horizontalOffset = isOpen ? 0 : minifiedWidth - width;
 
       return (
@@ -129,7 +131,9 @@ function SidebarFactory(CollapseButton: ReturnType<typeof CollapseButtonFactory>
             {isOpen ? (
               <SideBarInner className="side-bar__inner">{this.props.children}</SideBarInner>
             ) : null}
-            <CollapseButton isOpen={isOpen} onClick={this._onOpenOrClose} />
+            {shouldShowCollapseButton ? (
+              <CollapseButton isOpen={isOpen} onClick={this._onOpenOrClose} />
+            ) : null}
           </SideBarContainer>
         </StyledSidePanelContainer>
       );

diff --git a/src/reducers/src/ui-state-updaters.ts b/src/reducers/src/ui-state-updaters.ts
@@ -240,6 +240,7 @@ export const DEFAULT_EXPORT_MAP: ExportMap = {
  * @property notifications Default: `[]`
  * @property notifications Default: `[]`
  * @property loadFiles
+ * @property isSidePanelCloseButtonVisible Default: `true`
  * @public
  */
 export const INITIAL_UI_STATE: UiState = {
@@ -263,7 +264,8 @@ export const INITIAL_UI_STATE: UiState = {
   // Locale of the UI
   locale: LOCALE_CODES.en,
   layerPanelListView: 'list',
-  filterPanelListView: 'list'
+  filterPanelListView: 'list',
+  isSidePanelCloseButtonVisible: true
 };
 
 /* Updaters */
@@ -348,6 +350,19 @@ export const hideExportDropdownUpdater = (state: UiState): UiState => ({
   visibleDropdown: null
 });
 
+/**
+ * Toggle side panel close button on top left of the side panel
+ * @memberof uiStateUpdaters
+ * @public
+ */
+export const toggleSidePanelCloseButtonUpdater = (
+  state: UiState,
+  {payload: {show}}: UIStateActions.ToggleSidePanelCloseButtonUpdaterAction
+): UiState => ({
+  ...state,
+  isSidePanelCloseButtonVisible: show
+});
+
 /**
  * Toggle active map control panel
  * @memberof uiStateUpdaters

diff --git a/src/reducers/src/ui-state.ts b/src/reducers/src/ui-state.ts
@@ -32,6 +32,7 @@ const actionHandler = {
   [ActionTypes.TOGGLE_MODAL]: uiStateUpdaters.toggleModalUpdater,
   [ActionTypes.SHOW_EXPORT_DROPDOWN]: uiStateUpdaters.showExportDropdownUpdater,
   [ActionTypes.HIDE_EXPORT_DROPDOWN]: uiStateUpdaters.hideExportDropdownUpdater,
+  [ActionTypes.TOGGLE_SIDE_PANEL_CLOSE_BUTTON]: uiStateUpdaters.toggleSidePanelCloseButtonUpdater,
   [ActionTypes.OPEN_DELETE_MODAL]: uiStateUpdaters.openDeleteModalUpdater,
   [ActionTypes.TOGGLE_MAP_CONTROL]: uiStateUpdaters.toggleMapControlUpdater,
   [ActionTypes.SET_MAP_CONTROL_VISIBILITY]: uiStateUpdaters.setMapControlVisibilityUpdater,

diff --git a/src/types/reducers.d.ts b/src/types/reducers.d.ts
@@ -397,6 +397,8 @@ export type UiState = {
   layerPanelListView: PanelListView;
   // view filters by list or dataset
   filterPanelListView: PanelListView;
+  // side panel close button visibility
+  isSidePanelCloseButtonVisible: boolean | null;
 };
 
 /** Width of viewport */

diff --git a/test/browser/components/side-panel/side-panel-test.js b/test/browser/components/side-panel/side-panel-test.js
@@ -24,6 +24,7 @@ import sinon from 'sinon';
 import {
   SidePanelFactory,
   SidebarFactory,
+  CollapseButtonFactory,
   PanelHeaderFactory,
   SaveExportDropdownFactory,
   LayerManagerFactory,
@@ -43,6 +44,7 @@ import {IntlWrapper, mountWithTheme} from 'test/helpers/component-utils';
 // components
 const SidePanel = appInjector.get(SidePanelFactory);
 const Sidebar = appInjector.get(SidebarFactory);
+const SidebarCloseButton = appInjector.get(CollapseButtonFactory);
 const PanelHeader = appInjector.get(PanelHeaderFactory);
 const LayerManager = appInjector.get(LayerManagerFactory);
 const FilterManager = appInjector.get(FilterManagerFactory);
@@ -91,6 +93,36 @@ test('Components -> SidePanel.mount -> no prop', t => {
   t.ok(wrapper.find(PanelToggle).length === 1, 'should render PanelToggle');
   t.ok(wrapper.find(Sidebar).length === 1, 'should render Sidebar');
 
+  // side bar close button
+  t.ok(wrapper.find(SidebarCloseButton).length === 1, 'should render SideBarCollapseButton');
+
+  t.end();
+});
+
+test('Components -> SidePanel.mount -> hide CollapseButton', t => {
+  // mount
+  let wrapper;
+
+  const uiState = {
+    ...defaultProps.uiState,
+    isSidePanelCloseButtonVisible: false
+  };
+
+  t.doesNotThrow(() => {
+    wrapper = mountWithTheme(
+      <IntlWrapper>
+        <SidePanel {...defaultProps} uiState={uiState} />
+      </IntlWrapper>
+    );
+  }, 'SidePanel should not fail without props');
+
+  t.ok(wrapper.find(PanelHeader).length === 1, 'should render PanelHeader');
+  t.ok(wrapper.find(PanelToggle).length === 1, 'should render PanelToggle');
+  t.ok(wrapper.find(Sidebar).length === 1, 'should render Sidebar');
+
+  // side bar close button
+  t.ok(wrapper.find(SidebarCloseButton).length === 0, 'should not render SideBarCollapseButton');
+
   t.end();
 });
 

diff --git a/test/node/reducers/ui-state-test.js b/test/node/reducers/ui-state-test.js
@@ -23,6 +23,7 @@ import test from 'tape';
 import {
   toggleSidePanel,
   toggleModal,
+  toggleSidePanelCloseButton,
   openDeleteModal,
   setExportImageSetting,
   toggleMapControl,
@@ -117,6 +118,28 @@ test('#uiStateReducer -> TOGGLE_SIDE_PANEL', t => {
   t.end();
 });
 
+test('#uiStateReducer -> TOGGLE_SIDE_PANEL_CLOSE_BUTTON', t => {
+  const newReducer = reducer(INITIAL_UI_STATE, toggleSidePanelCloseButton(false));
+
+  const expectedState = {
+    ...INITIAL_UI_STATE,
+    isSidePanelCloseButtonVisible: false
+  };
+
+  t.deepEqual(newReducer, expectedState, 'should hide side panel close button');
+
+  const nextState2 = reducer(expectedState, toggleSidePanelCloseButton(true));
+
+  const expectedNextState2 = {
+    ...expectedState,
+    isSidePanelCloseButtonVisible: true
+  };
+
+  t.deepEqual(nextState2, expectedNextState2, 'should show side panel close button');
+
+  t.end();
+});
+
 test('#uiStateReducer -> OPEN_DELETE_MODAL', t => {
   const newReducer = reducer(INITIAL_UI_STATE, openDeleteModal('chai'));