Skip to content

Commit

Permalink
fix: do not unmount boards in mobile responsive mode
Browse files Browse the repository at this point in the history
refs: SHELL-79 (#239)
CataldoMazzilli authored May 8, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent f959e19 commit 697e1e0
Showing 4 changed files with 85 additions and 13 deletions.
2 changes: 1 addition & 1 deletion src/shell/shell-secondary-bar.tsx
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ import { AppRoute } from '../../types';
import AppContextProvider from '../boot/app/app-context-provider';
import { useCurrentRoute } from '../history/hooks';
import { useAppStore } from '../store/app';
import { useUtilityBarStore } from '../utility-bar';
import { useUtilityBarStore } from '../utility-bar/store';
import { checkRoute } from '../utility-bar/utils';
import { Collapser } from './collapser';

81 changes: 81 additions & 0 deletions src/shell/shell-view.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
/*
* SPDX-FileCopyrightText: 2023 Zextras <https://www.zextras.com>
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { FC } from 'react';
import { act, screen } from '@testing-library/react';
import { useHistory } from 'react-router-dom';
import { setup } from '../test/utils';
import ShellView from './shell-view';
import { useBoardStore } from '../store/boards';
import { Board } from '../../types';
import { useAppStore } from '../store/app';
import { useBridge } from '../store/context-bridge';

const ContextBridge: FC = () => {
const history = useHistory();
useBridge({
functions: {
getHistory: () => history
}
});
return null;
};

const Dummy: FC = () => null;

jest.mock('../utility-bar/bar', () => ({
ShellUtilityBar: Dummy
}));

jest.mock('./shell-header', () => Dummy);

test('When resizing under mobile breakpoint, board does not disappear', () => {
const boards: Record<string, Board> = {
'board-1': { id: 'board-1', url: '/url', app: 'app', title: 'title1', icon: 'CubeOutline' }
};

useBoardStore.setState(() => ({
boards,
orderedBoards: ['board-1'],
current: 'board-1'
}));

useAppStore.getState().setters.addApps([
{
commit: '',
description: 'Mails module',
display: 'Mails',
icon: 'MailModOutline',
js_entrypoint: '',
name: 'carbonio-mails-ui',
priority: 1,
type: 'carbonio',
version: '0.0.1'
}
]);
useAppStore.getState().setters.addRoute({
id: 'mails',
route: 'mails',
position: 1,
visible: true,
label: 'Mails',
primaryBar: 'MailModOutline',
appView: () => <div></div>,
badge: { show: false },
app: 'carbonio-mails-ui'
});

setup(
<>
<ContextBridge /> <ShellView />
</>
);

expect(screen.getByText('title1')).toBeVisible();
act(() => {
window.resizeTo(500, 300);
});
expect(screen.getByText('title1')).toBeVisible();
});
7 changes: 3 additions & 4 deletions src/shell/shell-view.tsx
Original file line number Diff line number Diff line change
@@ -14,13 +14,14 @@ import { IS_STANDALONE } from '../constants';
import { useCurrentRoute } from '../history/hooks';
import { goToLogin } from '../network/go-to-login';
import { useAccountStore } from '../store/account';
import { ShellUtilityBar, ShellUtilityPanel } from '../utility-bar';
import { ShellUtilityBar } from '../utility-bar/bar';
import AppViewContainer from './app-view-container';
import { BoardContainer } from './boards/board-container';
import ShellContextProvider from './shell-context-provider';
import ShellHeader from './shell-header';
import ShellNavigationBar from './shell-navigation-bar';
import { useDarkReaderResultValue } from '../dark-mode/use-dark-reader-result-value';
import { ShellUtilityPanel } from '../utility-bar/panel';

const Background = styled.div`
background: ${({ theme }): string => theme.palette.gray6.regular};
@@ -82,9 +83,7 @@ const ShellComponent = ({
<AppViewContainer />
<ShellUtilityPanel />
</Row>
<Responsive mode="desktop">
<BoardContainer />
</Responsive>
<BoardContainer />
</Background>
);
};
8 changes: 0 additions & 8 deletions src/utility-bar/index.ts

This file was deleted.

0 comments on commit 697e1e0

Please sign in to comment.