Shell 73 fallback tab

package.json

@@ -77,6 +77,7 @@
 		"jest-environment-jsdom": "^29.5.0",
 		"jest-fail-on-console": "^3.1.1",
 		"jest-junit": "^15.0.0",
+		"jest-styled-components": "^7.1.1",
 		"mini-css-extract-plugin": "^2.7.5",
 		"moment": "^2.29.4",
 		"msw": "^1.2.1",

src/mocks/handlers.ts

@@ -10,7 +10,8 @@ import { getInfoRequest } from './handlers/getInfoRequest';
 
 const handlers: RequestHandler[] = [
 	rest.get('/static/iris/components.json', getComponentsJson),
-	rest.post('/service/soap/GetInfoRequest', getInfoRequest)
+	rest.post('/service/soap/GetInfoRequest', getInfoRequest),
+	rest.get('/i18n/en.json', (request, response, context) => response(context.json({})))
 ];
 
 export default handlers;

src/shell/boards/board-tab-list.test.tsx

@@ -0,0 +1,150 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React from 'react';
+import { screen, within } from '@testing-library/react';
+import { setup } from '../../test/utils';
+import { TabsList } from './board-tab-list';
+import { useBoardStore } from '../../store/boards';
+import { Board } from '../../../types';
+import 'jest-styled-components';
+import { PALETTE } from '../../test/constants';
+
+describe('Shell boards', () => {
+	const boards: Record<string, Board> = {
+		'board-1': { id: 'board-1', url: 'url', app: 'app', title: 'title1', icon: 'CubeOutline' },
+		'board-2': { id: 'board-2', url: 'url', app: 'app', title: 'title2', icon: 'CubeOutline' },
+		'board-3': { id: 'board-3', url: 'url', app: 'app', title: 'title3', icon: 'CubeOutline' }
+	};
+
+	function setupState(current: string, boardState?: Record<string, Board>): void {
+		useBoardStore.setState(() => ({
+			boards: boardState || boards,
+			orderedBoards: ['board-1', 'board-2', 'board-3'],
+			current
+		}));
+	}
+
+	test('If I close the first tab that is open, the tab on its right should be seen correctly', async () => {
+		setupState('board-1');
+		const { user } = setup(<TabsList />);
+		const title1 = screen.getByText('title1');
+		const title2 = screen.getByText('title2');
+		const title3 = screen.getByText('title3');
+		expect(title1).toHaveStyleRule('color', PALETTE.text.regular);
+		expect(title2).toHaveStyleRule('color', PALETTE.secondary.regular);
+		expect(title3).toHaveStyleRule('color', PALETTE.secondary.regular);
+
+		const tab1 = screen.getByTestId(`board-tab-board-1`);
+		const board1closeIcon = within(tab1).getByTestId('icon: Close');
+		await user.click(board1closeIcon);
+		expect(tab1).not.toBeInTheDocument();
+		expect(title1).not.toBeInTheDocument();
+		expect(title2).toHaveStyleRule('color', PALETTE.text.regular);
+		expect(title3).toHaveStyleRule('color', PALETTE.secondary.regular);
+		expect(useBoardStore.getState().current).toBe('board-2');
+	});
+
+	test('If I close the first tab that is not open, the one that is already open must remain correctly visible', async () => {
+		setupState('board-2');
+		const { user } = setup(<TabsList />);
+		const title1 = screen.getByText('title1');
+		const title2 = screen.getByText('title2');
+		const title3 = screen.getByText('title3');
+		expect(title1).toHaveStyleRule('color', PALETTE.secondary.regular);
+		expect(title2).toHaveStyleRule('color', PALETTE.text.regular);
+		expect(title3).toHaveStyleRule('color', PALETTE.secondary.regular);
+
+		const tab1 = screen.getByTestId(`board-tab-board-1`);
+		const board1closeIcon = within(tab1).getByTestId('icon: Close');
+		await user.click(board1closeIcon);
+		expect(tab1).not.toBeInTheDocument();
+		expect(title1).not.toBeInTheDocument();
+		expect(title2).toHaveStyleRule('color', PALETTE.text.regular);
+		expect(title3).toHaveStyleRule('color', PALETTE.secondary.regular);
+		expect(useBoardStore.getState().current).toBe('board-2');
+	});
+
+	test('If I close the last tab that is open (tab on the far right) the tab on its left must be correctly visible', async () => {
+		setupState('board-3');
+		const { user } = setup(<TabsList />);
+		const title1 = screen.getByText('title1');
+		const title2 = screen.getByText('title2');
+		const title3 = screen.getByText('title3');
+		expect(title1).toHaveStyleRule('color', PALETTE.secondary.regular);
+		expect(title2).toHaveStyleRule('color', PALETTE.secondary.regular);
+		expect(title3).toHaveStyleRule('color', PALETTE.text.regular);
+
+		const tab3 = screen.getByTestId(`board-tab-board-3`);
+		const board3closeIcon = within(tab3).getByTestId('icon: Close');
+		await user.click(board3closeIcon);
+		expect(tab3).not.toBeInTheDocument();
+		expect(title3).not.toBeInTheDocument();
+		expect(title1).toHaveStyleRule('color', PALETTE.secondary.regular);
+		expect(title2).toHaveStyleRule('color', PALETTE.text.regular);
+		expect(useBoardStore.getState().current).toBe('board-2');
+	});
+
+	test('If I close the last tab that is not open (tab on the far right) the one that is already open must remain correctly visible', async () => {
+		setupState('board-2');
+		const { user } = setup(<TabsList />);
+		const title1 = screen.getByText('title1');
+		const title2 = screen.getByText('title2');
+		const title3 = screen.getByText('title3');
+		expect(title1).toHaveStyleRule('color', PALETTE.secondary.regular);
+		expect(title2).toHaveStyleRule('color', PALETTE.text.regular);
+		expect(title3).toHaveStyleRule('color', PALETTE.secondary.regular);
+
+		const tab3 = screen.getByTestId(`board-tab-board-3`);
+		const board3closeIcon = within(tab3).getByTestId('icon: Close');
+		await user.click(board3closeIcon);
+		expect(tab3).not.toBeInTheDocument();
+		expect(title3).not.toBeInTheDocument();
+		expect(title1).toHaveStyleRule('color', PALETTE.secondary.regular);
+		expect(title2).toHaveStyleRule('color', PALETTE.text.regular);
+		expect(useBoardStore.getState().current).toBe('board-2');
+	});
+
+	test('If i close a middle tab that is open, the tab on its right must be correctly visible', async () => {
+		setupState('board-2');
+		const { user } = setup(<TabsList />);
+		const title1 = screen.getByText('title1');
+		const title2 = screen.getByText('title2');
+		const title3 = screen.getByText('title3');
+		expect(title1).toHaveStyleRule('color', PALETTE.secondary.regular);
+		expect(title2).toHaveStyleRule('color', PALETTE.text.regular);
+		expect(title3).toHaveStyleRule('color', PALETTE.secondary.regular);
+
+		const tab2 = screen.getByTestId(`board-tab-board-2`);
+		const board2closeIcon = within(tab2).getByTestId('icon: Close');
+		await user.click(board2closeIcon);
+		expect(tab2).not.toBeInTheDocument();
+		expect(title2).not.toBeInTheDocument();
+		expect(title1).toHaveStyleRule('color', PALETTE.secondary.regular);
+		expect(title3).toHaveStyleRule('color', PALETTE.text.regular);
+		expect(useBoardStore.getState().current).toBe('board-3');
+	});
+
+	test('If I close a middle tab that is not open, the one that is already open must remain correctly visible', async () => {
+		setupState('board-1');
+		const { user } = setup(<TabsList />);
+		const title1 = screen.getByText('title1');
+		const title2 = screen.getByText('title2');
+		const title3 = screen.getByText('title3');
+		expect(title1).toHaveStyleRule('color', PALETTE.text.regular);
+		expect(title2).toHaveStyleRule('color', PALETTE.secondary.regular);
+		expect(title3).toHaveStyleRule('color', PALETTE.secondary.regular);
+
+		const tab2 = screen.getByTestId(`board-tab-board-2`);
+		const board2closeIcon = within(tab2).getByTestId('icon: Close');
+		await user.click(board2closeIcon);
+		expect(tab2).not.toBeInTheDocument();
+		expect(title2).not.toBeInTheDocument();
+		expect(title1).toHaveStyleRule('color', PALETTE.text.regular);
+		expect(title3).toHaveStyleRule('color', PALETTE.secondary.regular);
+		expect(useBoardStore.getState().current).toBe('board-1');
+	});
+});

src/shell/boards/board-tab-list.tsx

@@ -12,15 +12,15 @@ import {
 	Tooltip,
 	useHiddenCount
 } from '@zextras/carbonio-design-system';
-import { map, noop, slice } from 'lodash';
+import { isEmpty, map, noop, slice } from 'lodash';
 import React, { FC, useLayoutEffect, useRef } from 'react';
 import { setCurrentBoard, useBoardStore } from '../../store/boards';
 import { getT } from '../../store/i18n';
 import { AppBoardTab } from './board-tab';
 
 export const TabsList: FC = () => {
 	const t = getT();
-	const { boards, current, expanded } = useBoardStore();
+	const { boards, current, expanded, orderedBoards } = useBoardStore();
 	const tabContainerRef = useRef(null);
 	const [hiddenTabsCount, recalculateHiddenTabs] = useHiddenCount(tabContainerRef, expanded);
 
@@ -39,8 +39,15 @@ export const TabsList: FC = () => {
 				width="calc(100% - 0.5rem)"
 			>
 				{boards &&
-					map(boards, (tab) => (
-						<AppBoardTab key={tab.id} id={tab.id} title={tab.title} icon={tab.icon} />
+					!isEmpty(orderedBoards) &&
+					map(orderedBoards, (boardId, index, array) => (
+						<AppBoardTab
+							key={boardId}
+							id={boardId}
+							title={boards[boardId].title}
+							icon={boards[boardId].icon}
+							fallbackId={current !== boardId ? undefined : array[index + 1] || array[index - 1]}
+						/>
 					))}
 			</Row>
 			{hiddenTabsCount > 0 && (
@@ -52,12 +59,12 @@ export const TabsList: FC = () => {
 						<Dropdown
 							width="fit"
 							style={{ flexGrow: '1' }}
-							items={map(slice(Object.values(boards), -hiddenTabsCount), (tab) => ({
-								id: tab.id,
-								label: tab.title,
-								icon: tab.icon,
-								click: () => setCurrentBoard(tab.id),
-								selected: tab.id === current
+							items={map(slice(orderedBoards, -hiddenTabsCount), (boardId) => ({
+								id: boardId,
+								label: boards[boardId].title,
+								icon: boards[boardId].icon,
+								click: () => setCurrentBoard(boardId),
+								selected: boardId === current
 							}))}
 						>
 							<Button type="ghost" color="secondary" label={`+${hiddenTabsCount}`} onClick={noop} />

src/shell/boards/board-tab.tsx

@@ -37,10 +37,11 @@ const VerticalDivider = styled(Container)`
 	margin: ${({ theme }): string => theme.sizes.padding.extrasmall};
 `;
 
-export const AppBoardTab: FC<{ id: string; icon: string; title: string }> = ({
+export const AppBoardTab: FC<{ id: string; icon: string; title: string; fallbackId?: string }> = ({
 	id,
 	icon,
-	title
+	title,
+	fallbackId
 }) => {
 	const current = useBoardStore((s) => s.current);
 	const t = getT();
@@ -49,14 +50,21 @@ export const AppBoardTab: FC<{ id: string; icon: string; title: string }> = ({
 		(ev) => {
 			ev.stopPropagation();
 			closeBoard(id);
+			if (fallbackId) {
+				setCurrentBoard(fallbackId);
+			}
 		},
-		[id]
+		[fallbackId, id]
 	);
 
 	return (
 		<Container orientation="row" width="fit" maxWidth="100%">
 			{current !== id && <VerticalDivider />}
-			<TabContainer active={current === id} padding={{ all: 'extrasmall' }}>
+			<TabContainer
+				data-testid={`board-tab-${id}`}
+				active={current === id}
+				padding={{ all: 'extrasmall' }}
+			>
 				<Row
 					height="100%"
 					onClick={onClick}