fix: focus background not applied on list (#298)

* fix: make conversation list items to have the focus background in every status

Replace the implementation of the List with the ListV2 and move the management of
the background in a single point, the CustomListItem.

Refactor the types in order to remove some any and some ts-ignore

refs: IRIS-3740

* fix: add highlight hover background for active item

refs: IRIS-3740

* build(deps): update dependencies

 - @zextras/carbonio-ui-sdk 1.5.0
 - @zextras/carbonio-design-system 1.1.0
 - @zextras/carbonio-shell-ui 1.1.0

refs: IRIS-3740

package.json

@@ -54,7 +54,7 @@
     "@types/react-router-dom": "5.3.2",
     "@types/styled-components": "^5.1.15",
     "@zextras/carbonio-ui-configs": "^0.1.11",
-    "@zextras/carbonio-ui-sdk": "1.5.0",
+    "@zextras/carbonio-ui-sdk": "^1.5.0",
     "babel-jest": "^28.1.3",
     "babel-plugin-i18next-extract": "0.8.3",
     "babel-plugin-styled-components": "2.0.1",
@@ -80,9 +80,9 @@
     "@mui/icons-material": "^5.10.6",
     "@mui/material": "^5.10.6",
     "@reduxjs/toolkit": "1.6.2",
-    "@zextras/carbonio-design-system": "1.1.0",
-    "@zextras/carbonio-shell-ui": "1.1.0",
-    "@zextras/carbonio-ui-preview": "1.0.0",
+    "@zextras/carbonio-design-system": "^1.1.0",
+    "@zextras/carbonio-shell-ui": "^1.1.0",
+    "@zextras/carbonio-ui-preview": "^1.0.0",
     "core-js": "3.19.1",
     "i18next": "^21.5.4",
     "immer": "7.0.14",

src/commons/actions-context.tsx

@@ -12,6 +12,7 @@ import {
 	useUserAccount,
 	useUserSettings
 } from '@zextras/carbonio-shell-ui';
+import { DropdownItem } from '@zextras/carbonio-design-system';
 import { getActions as conversationActions } from '../ui-actions/conversation-actions';
 import { getActions as messageActions } from '../ui-actions/message-actions';
 import { Conversation, MailMessage } from '../types';
@@ -21,11 +22,9 @@ type ACPProps = {
 	isConversation?: boolean;
 };
 
-type ActionObj = {
-	id: string;
-	label: string;
-	click: (event: MouseEvent) => void;
-	icon: string;
+type ActionObj = DropdownItem & {
+	icon: NonNullable<DropdownItem['icon']>;
+	click: NonNullable<DropdownItem['click']>;
 };
 
 type ActionList = Array<ActionObj>;

src/commons/mail-message-renderer.tsx

@@ -203,9 +203,6 @@ const _HtmlMessageRenderer: FC<_HtmlMessageRendererType> = ({
 			}
 
 			editSettings({
-				// FIXME remove the ts-ignore after the implementation of IRIS-3521
-				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-				// @ts-ignore
 				prefs: { zimbraPrefMailTrustedSenderList: [...trusteeAddress, trustee] }
 			}).then((res) => {
 				if (res.type?.includes('fulfilled')) {

src/hooks/redux.ts

@@ -0,0 +1,12 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { AppDispatch, RootState } from '../store/redux';
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+type DispatchFunc = () => AppDispatch;
+export const useAppDispatch: DispatchFunc = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

src/hooks/use-message-list.ts

@@ -17,7 +17,7 @@ type RouteParams = {
 	folderId: string;
 };
 
-export const useMessageList = (): Array<Partial<MailMessage>> => {
+export const useMessageList = (): Array<MailMessage> => {
 	const { folderId } = <RouteParams>useParams();
 	const dispatch = useDispatch();
 

src/store/redux/index.tsx

@@ -17,3 +17,8 @@ const store = configureStore({
 });
 
 export const StoreProvider: FC = ({ children }) => <Provider store={store}>{children}</Provider>;
+
+// @see https://redux.js.org/usage/usage-with-typescript#define-root-state-and-dispatch-types
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

src/types/folder/index.d.ts

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import { ContainerProps } from '@zextras/carbonio-design-system';
+import React, { ReactNode } from 'react';
 import { Conversation } from '../conversations';
 import { IncompleteMessage, MailMessage } from '../messages';
 import { TextReadValuesProps } from '../utils';
@@ -44,20 +46,20 @@ export type SenderNameProps = {
 	textValues?: TextReadValuesProps;
 };
 
-export type MessageListItemType = {
-	item: any;
+export type MessageListItemProps = {
+	item: IncompleteMessage & { isFromSearch?: boolean };
 	folderId: string;
-	active: boolean;
 	selected: boolean;
 	selecting: boolean;
-	toggle: () => null;
-	draggedIds: Array<string> | undefined;
-	setDraggedIds: (arg: any) => void;
-	setIsDragging: (arg: boolean) => void;
-	selectedItems: any;
-	dragImageRef: any;
+	toggle?: () => void;
+	draggedIds: Record<string, boolean>;
+	setDraggedIds: (ids: Record<string, boolean>) => void;
+	setIsDragging: (isDragging: boolean) => void;
+	selectedItems: Record<string, boolean>;
+	dragImageRef?: React.RefObject<HTMLElement>;
 	visible: boolean;
 	isConvChildren: boolean;
+	active?: boolean;
 };
 
 export type TextReadValuesType = {
@@ -67,23 +69,24 @@ export type TextReadValuesType = {
 };
 
 export type MsgListDraggableItemType = {
-	item: MailMessage;
+	item: Partial<MailMessage> & Pick<MailMessage, 'id'>;
 	folderId: string;
-	children: any;
+	children: React.ReactNode | React.ReactNode[];
 	isMessageView: boolean;
-	dragCheck: (e: any, id: any) => void;
+	dragCheck: (e: React.DragEvent, id: string) => void;
 	selectedIds: Array<string>;
 };
 export type ListItemActionWrapperProps = {
 	children?: ReactNode;
 	current?: boolean;
 	onClick?: ContainerProps['onClick'];
 	onDoubleClick?: ContainerProps['onDoubleClick'];
-	item: Conversation | IncompleteMessage;
-	isConversation?: boolean;
-	messagesToRender?: Array<Partial<MailMessage>>;
+	messagesToRender?: Array<IncompleteMessage>;
 	hoverTooltipLabel?: string;
-};
+} & (
+	| { isConversation: true; item: Conversation }
+	| { isConversation?: false; item: IncompleteMessage }
+);
 
 export type ItemAvatarType = {
 	item: any;
@@ -99,7 +102,7 @@ export type CustomListItem = Partial<MailMessage> & { id: string; isFromSearch?:
 export type ConversationMessagesListProps = {
 	active: string;
 	conversationStatus: string | undefined;
-	messages: Array<Partial<MailMessage>>;
+	messages: Array<IncompleteMessage>;
 	folderId: string;
 	length: number;
 	isFromSearch?: boolean;

src/types/search/index.d.ts

@@ -59,6 +59,7 @@ export type SearchPanelProps = {
 export type SearchMessageListItemProps = {
 	item: IncompleteMessage;
 	isConvChildren?: boolean;
+	active?: boolean;
 };
 
 export type SearchConversationListItemProps = {