From 1b42ce9ebc0dbaaad292ca97018d9a20797116e7 Mon Sep 17 00:00:00 2001
From: FrancescoGottardi <gottardifrancesco92@gmail.com>
Date: Thu, 12 Dec 2024 17:52:08 +0100
Subject: [PATCH 01/40] refator: moved inputs of filter action

---
 .../filters/parts/filter-action-rows.tsx      | 78 +++++--------------
 .../filters/parts/filter-actions/mark-as.tsx  | 28 +++++++
 .../parts/filter-actions/move-to-folder.tsx   | 45 +++++++++++
 .../parts/filter-actions/redirect-to.tsx      | 34 ++++++++
 .../filters/parts/filter-actions/show-tag.tsx | 37 +++++++++
 .../parts/tests/filter-actions-rows.test.tsx  | 35 +++++++++
 6 files changed, 200 insertions(+), 57 deletions(-)
 create mode 100644 src/views/settings/filters/parts/filter-actions/mark-as.tsx
 create mode 100644 src/views/settings/filters/parts/filter-actions/move-to-folder.tsx
 create mode 100644 src/views/settings/filters/parts/filter-actions/redirect-to.tsx
 create mode 100644 src/views/settings/filters/parts/filter-actions/show-tag.tsx

diff --git a/src/views/settings/filters/parts/filter-action-rows.tsx b/src/views/settings/filters/parts/filter-action-rows.tsx
index 4cec5c535..52a6a06c8 100644
--- a/src/views/settings/filters/parts/filter-action-rows.tsx
+++ b/src/views/settings/filters/parts/filter-action-rows.tsx
@@ -6,12 +6,9 @@
 import React, { FC, ReactElement, useCallback, useMemo, useState } from 'react';
 
 import {
-	Button,
-	ChipInput,
 	Container,
 	CustomModal,
 	IconButton,
-	Input,
 	Padding,
 	Row,
 	Text,
@@ -25,6 +22,10 @@ import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 
 import CustomSelect from './custom-select';
+import { MarkAs } from './filter-actions/mark-as';
+import { MovetoFolder } from './filter-actions/move-to-folder';
+import { RedirectTo } from './filter-actions/redirect-to';
+import { ShowTag } from './filter-actions/show-tag';
 import { getActionOptions, getMarkAsOptions } from './utils';
 import { ZIMBRA_STANDARD_COLORS } from '../../../../carbonio-ui-commons/constants';
 import { CONTACT_TYPES } from '../../../../carbonio-ui-commons/integrations/constants';
@@ -403,66 +404,29 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 						</Row>
 					)}
 				{showBrowseBtn && (
-					<>
-						{destination && Object.keys(destination).length > 0 && destination?.name !== '' && (
-							<Row padding={{ right: 'small' }}>
-								<Input
-									label={t('label.destination_folder', 'Destination Folder')}
-									backgroundColor="gray5"
-									value={destination?.name}
-									disabled
-								/>
-							</Row>
-						)}
-						<Row>
-							<Button
-								disabled={openFolderModalDisabled}
-								label={t('settings.browse', 'Browse')}
-								type="outlined"
-								onClick={openModal}
-							/>
-						</Row>
-					</>
+					<MovetoFolder
+						destination={destination}
+						onClick={openModal}
+						disabled={openFolderModalDisabled}
+					/>
 				)}
 				{showMarksAsBtn && (
-					<Row padding={{ right: 'small' }} minWidth="12.5rem">
-						<CustomSelect
-							items={markAsOptions}
-							background="gray5"
-							label=""
-							onChange={handleMarkAsOptionChange}
-							defaultSelection={defaultMarkAsOption}
-						/>
-					</Row>
+					<MarkAs
+						options={markAsOptions}
+						onChange={handleMarkAsOptionChange}
+						selected={defaultMarkAsOption}
+					/>
 				)}
 
-				{showRedirectToAddrsInput && (
-					<Row padding={{ right: 'small' }} minWidth="22rem">
-						<ContactInput
-							data-testid={'filter-action-row-contact-input'}
-							placeholder={t('settings.address', 'Address')}
-							onChange={onChange}
-							defaultValue={contacts}
-							maxChips={1}
-						/>
-					</Row>
-				)}
+				{showRedirectToAddrsInput && <RedirectTo defaultValue={contacts} onChange={onChange} />}
 
 				{showTagOptions && (
-					<Row padding={{ right: 'small' }} minWidth="12.5rem">
-						<ChipInput
-							placeholder={t('label.tag', 'Tag')}
-							background="gray4"
-							defaultValue={[]}
-							options={tagOptions}
-							value={tag}
-							singleSelection
-							onChange={onTagChange}
-							onAdd={tagChipOnAdd}
-							disableOptions={false}
-							disabled
-						/>
-					</Row>
+					<ShowTag
+						value={tag}
+						tagOptions={tagOptions}
+						onTagChange={onTagChange}
+						onAddTag={tagChipOnAdd}
+					/>
 				)}
 			</Row>
 			<Container orientation="horizontal" mainAlignment="flex-end" width="auto">
diff --git a/src/views/settings/filters/parts/filter-actions/mark-as.tsx b/src/views/settings/filters/parts/filter-actions/mark-as.tsx
new file mode 100644
index 000000000..38fcf4209
--- /dev/null
+++ b/src/views/settings/filters/parts/filter-actions/mark-as.tsx
@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react';
+
+import { Row } from '@zextras/carbonio-design-system';
+
+import CustomSelect from '../custom-select';
+
+type MarkAsProps = {
+	options: any[];
+	onChange: (option: { label: string; value: any }) => void;
+	selected: any;
+};
+
+export const MarkAs = ({ options, onChange, selected }: MarkAsProps): React.JSX.Element => (
+	<Row padding={{ right: 'small' }} minWidth="12.5rem">
+		<CustomSelect
+			items={options}
+			background="gray5"
+			label=""
+			onChange={onChange}
+			defaultSelection={selected}
+		/>
+	</Row>
+);
diff --git a/src/views/settings/filters/parts/filter-actions/move-to-folder.tsx b/src/views/settings/filters/parts/filter-actions/move-to-folder.tsx
new file mode 100644
index 000000000..3984d825a
--- /dev/null
+++ b/src/views/settings/filters/parts/filter-actions/move-to-folder.tsx
@@ -0,0 +1,45 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react';
+
+import { Button, Input, Row } from '@zextras/carbonio-design-system';
+import { useTranslation } from 'react-i18next';
+
+type MoveToFolderProps = {
+	destination: any;
+	onClick: () => void;
+	disabled: boolean;
+};
+
+export const MovetoFolder = ({
+	destination,
+	onClick,
+	disabled
+}: MoveToFolderProps): React.JSX.Element => {
+	const [t] = useTranslation();
+	return (
+		<>
+			{destination && Object.keys(destination).length > 0 && destination?.name !== '' && (
+				<Row padding={{ right: 'small' }}>
+					<Input
+						label={t('label.destination_folder', 'Destination Folder')}
+						backgroundColor="gray5"
+						value={destination?.name}
+						disabled
+					/>
+				</Row>
+			)}
+			<Row>
+				<Button
+					disabled={disabled}
+					label={t('settings.browse', 'Browse')}
+					type="outlined"
+					onClick={onClick}
+				/>
+			</Row>
+		</>
+	);
+};
diff --git a/src/views/settings/filters/parts/filter-actions/redirect-to.tsx b/src/views/settings/filters/parts/filter-actions/redirect-to.tsx
new file mode 100644
index 000000000..c8f77fcad
--- /dev/null
+++ b/src/views/settings/filters/parts/filter-actions/redirect-to.tsx
@@ -0,0 +1,34 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react';
+
+import { Row } from '@zextras/carbonio-design-system';
+import { useTranslation } from 'react-i18next';
+
+import { useContactInput } from '../../../../../carbonio-ui-commons/integrations/hooks';
+import { ContactInputItem } from '../../../../../carbonio-ui-commons/integrations/types';
+
+type RedirectToProps = {
+	defaultValue: any;
+	onChange: (chip: ContactInputItem[]) => void;
+};
+
+export const RedirectTo = ({ defaultValue, onChange }: RedirectToProps): React.JSX.Element => {
+	const ContactInput = useContactInput();
+	const [t] = useTranslation();
+
+	return (
+		<Row padding={{ right: 'small' }} minWidth="22rem">
+			<ContactInput
+				data-testid={'filter-action-row-contact-input'}
+				placeholder={t('settings.address', 'Address')}
+				onChange={onChange}
+				defaultValue={defaultValue}
+				maxChips={1}
+			/>
+		</Row>
+	);
+};
diff --git a/src/views/settings/filters/parts/filter-actions/show-tag.tsx b/src/views/settings/filters/parts/filter-actions/show-tag.tsx
new file mode 100644
index 000000000..9d6f19a66
--- /dev/null
+++ b/src/views/settings/filters/parts/filter-actions/show-tag.tsx
@@ -0,0 +1,37 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react';
+
+import { ChipInput, ChipItem, Row } from '@zextras/carbonio-design-system';
+
+type ShowTagProps = {
+	value: any;
+	tagOptions: any[] | undefined;
+	onTagChange: (chip: ChipItem[]) => void;
+	onAddTag: (value: unknown) => ChipItem<unknown>;
+};
+
+export const ShowTag = ({
+	value,
+	tagOptions,
+	onTagChange,
+	onAddTag
+}: ShowTagProps): React.JSX.Element => (
+	<Row padding={{ right: 'small' }} minWidth="12.5rem">
+		<ChipInput
+			placeholder={t('label.tag', 'Tag')}
+			background="gray4"
+			defaultValue={[]}
+			options={tagOptions}
+			value={value}
+			singleSelection
+			onChange={onTagChange}
+			onAdd={onAddTag}
+			disableOptions={false}
+			disabled
+		/>
+	</Row>
+);
diff --git a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
index 7dd745176..3195d3608 100644
--- a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
@@ -31,6 +31,27 @@ describe('FilterActionsRows', () => {
 			{}
 		);
 	});
+
+	describe('Keep In Inbox', () => {
+		it('it should render the selected action', async () => {
+			setupTest(
+				<FilterActionRows
+					tmpFilter={{
+						actionKeep: [{}]
+					}}
+					index={0}
+					compProps={compProps}
+				/>,
+				{}
+			);
+		});
+	});
+	// describe('Discard', () => {});
+	// describe('Move Into Folder', () => {});
+	// describe('Tag With', () => {});
+
+	// describe('Mark as', () => {});
+
 	describe('Redirect To Address', () => {
 		it('should not display Contact Input when dropdown option is different from "Redirect To Address"', async () => {
 			setupTest(
@@ -45,6 +66,20 @@ describe('FilterActionsRows', () => {
 			);
 			expect(screen.queryByTestId('filter-action-row-contact-input')).not.toBeInTheDocument();
 		});
+
+		it('should not display Contact Input when dropdown option is different from "Tag With"', async () => {
+			setupTest(
+				<FilterActionRows
+					tmpFilter={{
+						tagWith: [{ flagName: 'flagged' }]
+					}}
+					index={0}
+					compProps={compProps}
+				/>,
+				{}
+			);
+			expect(screen.queryByTestId('filter-action-row-contact-input')).not.toBeInTheDocument();
+		});
 		it('should display Contact Input when selecting option "Redirect To Address"', async () => {
 			setupTest(
 				<FilterActionRows

From 48be72a04e230e151ecda0509c552e8bdd80f2e4 Mon Sep 17 00:00:00 2001
From: FrancescoGottardi <gottardifrancesco92@gmail.com>
Date: Fri, 13 Dec 2024 12:13:04 +0100
Subject: [PATCH 02/40] refactor: splitting filter action row in multiple sub
 components

---
 .../filters/parts/filter-action-rows.tsx      | 52 +++----------------
 .../parts/filter-actions/move-to-folder.tsx   | 51 +++++++++++++++---
 2 files changed, 51 insertions(+), 52 deletions(-)

diff --git a/src/views/settings/filters/parts/filter-action-rows.tsx b/src/views/settings/filters/parts/filter-action-rows.tsx
index 52a6a06c8..fbcf61e5e 100644
--- a/src/views/settings/filters/parts/filter-action-rows.tsx
+++ b/src/views/settings/filters/parts/filter-action-rows.tsx
@@ -7,7 +7,6 @@ import React, { FC, ReactElement, useCallback, useMemo, useState } from 'react';
 
 import {
 	Container,
-	CustomModal,
 	IconButton,
 	Padding,
 	Row,
@@ -16,6 +15,7 @@ import {
 	getColor,
 	ChipItem
 } from '@zextras/carbonio-design-system';
+import { Folder } from '@zextras/carbonio-shell-ui';
 import { TFunction } from 'i18next';
 import { filter, omit } from 'lodash';
 import styled from 'styled-components';
@@ -29,10 +29,7 @@ import { ShowTag } from './filter-actions/show-tag';
 import { getActionOptions, getMarkAsOptions } from './utils';
 import { ZIMBRA_STANDARD_COLORS } from '../../../../carbonio-ui-commons/constants';
 import { CONTACT_TYPES } from '../../../../carbonio-ui-commons/integrations/constants';
-import { useContactInput } from '../../../../carbonio-ui-commons/integrations/hooks';
 import { ContactInputItem } from '../../../../carbonio-ui-commons/integrations/types';
-import { Folder } from '../../../../carbonio-ui-commons/types';
-import { SelectFolderModal } from '../../../../ui-actions/modals/select-folder-modal';
 
 export const StyledIconButton = styled(IconButton)`
 	border: 0.0625rem solid
@@ -88,7 +85,6 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 		setTempActions,
 		zimbraFeatureMailForwardingInFiltersEnabled
 	} = compProps;
-	const [open, setOpen] = useState(false);
 	const [activeIndex, setActiveIndex] = useState(0);
 	const [destination, setDestination] = useState<{ name?: string }>({});
 	const [isRedirectToActionRemoved, setIsRedirectToActionRemoved] = useState(false);
@@ -113,7 +109,6 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 		[activeActionOption]
 	);
 	const [contacts, setContacts] = useState<ContactInputItem[]>([]);
-	const ContactInput = useContactInput();
 
 	const onChange = useCallback(
 		(users: ContactInputItem[]): void => {
@@ -128,10 +123,6 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 		},
 		[index, setTempActions, tempActions]
 	);
-	const onModalClose = useCallback(() => {
-		setDestination({});
-		setOpen(false);
-	}, []);
 
 	const defaultValue = useMemo(() => {
 		const action = Object.keys(omit(tmpFilter, 'id'))[0];
@@ -303,10 +294,6 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 		},
 		[index, isRedirectToActionRemoved, setTempActions, tempActions]
 	);
-	const openFolderModalDisabled = useMemo(
-		() => activeActionOption !== 'moveIntoFolder',
-		[activeActionOption]
-	);
 
 	const showTagOptions = useMemo(() => activeActionOption === 'tagWith', [activeActionOption]);
 
@@ -325,10 +312,9 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 		},
 		[tagOptions]
 	);
-	const openModal = useCallback(() => {
+	const onSelectFolder = useCallback(() => {
 		setActiveIndex(index);
-		setOpen(true);
-	}, [setOpen, setActiveIndex, index]);
+	}, [setActiveIndex, index]);
 
 	const onTagChange = useCallback(
 		(chip: ChipItem[]) => {
@@ -357,11 +343,7 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 	);
 
 	const confirmAction = useCallback(
-		(
-			folderDestination: Folder | undefined,
-			setFolderDestination: (_folder: Folder | undefined) => void,
-			_onModalClose: () => void
-		) => {
+		(folderDestination: Folder | undefined) => {
 			const previous = tempActions.slice();
 			previous[activeIndex] = {
 				id: previous[activeIndex]?.id,
@@ -369,15 +351,10 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 			};
 			setTempActions(previous);
 			setDestination({ name: folderDestination?.name });
-			setOpen(false);
 		},
-		[tempActions, activeIndex, setTempActions, setDestination, setOpen]
+		[tempActions, activeIndex, setTempActions, setDestination]
 	);
 
-	const headerTitle = t('label.choose_folder', 'Choose Folder');
-	const actionLabel = t('settings.choose', 'Choose');
-	const inputLabel = t('settings.filter_folder_message', 'Select a folder to apply your filter:');
-
 	return (
 		<Container
 			mainAlignment="space-between"
@@ -406,8 +383,9 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 				{showBrowseBtn && (
 					<MovetoFolder
 						destination={destination}
-						onClick={openModal}
-						disabled={openFolderModalDisabled}
+						setDestination={setDestination}
+						onSelectFolder={onSelectFolder}
+						onConfirmDestination={confirmAction}
 					/>
 				)}
 				{showMarksAsBtn && (
@@ -444,20 +422,6 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 					</Tooltip>
 				</Padding>
 			</Container>
-			<CustomModal open={open} onClose={onModalClose} maxHeight="90vh" size="medium">
-				<SelectFolderModal
-					onClose={onModalClose}
-					headerTitle={headerTitle}
-					actionLabel={actionLabel}
-					inputLabel={inputLabel}
-					confirmAction={confirmAction}
-					showSharedAccounts={false}
-					showSpamFolder
-					showTrashFolder
-					allowFolderCreation={false}
-					allowRootSelection={false}
-				/>
-			</CustomModal>
 		</Container>
 	);
 };
diff --git a/src/views/settings/filters/parts/filter-actions/move-to-folder.tsx b/src/views/settings/filters/parts/filter-actions/move-to-folder.tsx
index 3984d825a..d8b037316 100644
--- a/src/views/settings/filters/parts/filter-actions/move-to-folder.tsx
+++ b/src/views/settings/filters/parts/filter-actions/move-to-folder.tsx
@@ -3,23 +3,44 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 
-import { Button, Input, Row } from '@zextras/carbonio-design-system';
+import { Button, CustomModal, Input, Row } from '@zextras/carbonio-design-system';
+import { Folder } from '@zextras/carbonio-shell-ui';
 import { useTranslation } from 'react-i18next';
 
+import { SelectFolderModal } from '../../../../../ui-actions/modals/select-folder-modal';
+
 type MoveToFolderProps = {
 	destination: any;
-	onClick: () => void;
-	disabled: boolean;
+	setDestination: (destination: any) => void;
+	onSelectFolder: () => void;
+	onConfirmDestination: (destination: Folder | undefined) => void;
 };
 
 export const MovetoFolder = ({
 	destination,
-	onClick,
-	disabled
+	setDestination,
+	onSelectFolder,
+	onConfirmDestination
 }: MoveToFolderProps): React.JSX.Element => {
 	const [t] = useTranslation();
+	const [open, setOpen] = useState(false);
+	const onModalClose = useCallback(() => {
+		setDestination({});
+		setOpen(false);
+	}, [setDestination]);
+
+	const onInternalSelectFolder = useCallback(() => {
+		onSelectFolder();
+		setOpen(true);
+	}, [onSelectFolder]);
+
+	const onInternalConfirm = useCallback(() => {
+		onConfirmDestination(destination);
+		setOpen(false);
+	}, [destination, onConfirmDestination]);
+
 	return (
 		<>
 			{destination && Object.keys(destination).length > 0 && destination?.name !== '' && (
@@ -34,12 +55,26 @@ export const MovetoFolder = ({
 			)}
 			<Row>
 				<Button
-					disabled={disabled}
 					label={t('settings.browse', 'Browse')}
 					type="outlined"
-					onClick={onClick}
+					onClick={onInternalSelectFolder}
 				/>
 			</Row>
+
+			<CustomModal open={open} onClose={onModalClose} maxHeight="90vh" size="medium">
+				<SelectFolderModal
+					onClose={onModalClose}
+					headerTitle={t('label.choose_folder', 'Choose Folder')}
+					actionLabel={t('settings.choose', 'Choose')}
+					inputLabel={t('settings.filter_folder_message', 'Select a folder to apply your filter:')}
+					confirmAction={onInternalConfirm}
+					showSharedAccounts={false}
+					showSpamFolder
+					showTrashFolder
+					allowFolderCreation={false}
+					allowRootSelection={false}
+				/>
+			</CustomModal>
 		</>
 	);
 };

From 2768e46a818e3c0245e2ad6470d7e470ed216c8f Mon Sep 17 00:00:00 2001
From: FrancescoGottardi <gottardifrancesco92@gmail.com>
Date: Fri, 13 Dec 2024 12:58:06 +0100
Subject: [PATCH 03/40] refactor: splitting filter action row in multiple sub
 components

---
 .../filters/parts/filter-action-rows.tsx      | 21 ++++--------
 .../parts/filter-actions/move-to-folder.tsx   | 24 ++++++++------
 .../filter-actions/move-to-folder.test.tsx    | 32 +++++++++++++++++++
 3 files changed, 53 insertions(+), 24 deletions(-)
 create mode 100644 src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx

diff --git a/src/views/settings/filters/parts/filter-action-rows.tsx b/src/views/settings/filters/parts/filter-action-rows.tsx
index fbcf61e5e..257d5ed34 100644
--- a/src/views/settings/filters/parts/filter-action-rows.tsx
+++ b/src/views/settings/filters/parts/filter-action-rows.tsx
@@ -15,7 +15,6 @@ import {
 	getColor,
 	ChipItem
 } from '@zextras/carbonio-design-system';
-import { Folder } from '@zextras/carbonio-shell-ui';
 import { TFunction } from 'i18next';
 import { filter, omit } from 'lodash';
 import styled from 'styled-components';
@@ -30,6 +29,7 @@ import { getActionOptions, getMarkAsOptions } from './utils';
 import { ZIMBRA_STANDARD_COLORS } from '../../../../carbonio-ui-commons/constants';
 import { CONTACT_TYPES } from '../../../../carbonio-ui-commons/integrations/constants';
 import { ContactInputItem } from '../../../../carbonio-ui-commons/integrations/types';
+import { Folder } from '../../../../carbonio-ui-commons/types/folder';
 
 export const StyledIconButton = styled(IconButton)`
 	border: 0.0625rem solid
@@ -41,7 +41,7 @@ export const StyledIconButton = styled(IconButton)`
 `;
 
 // FIXME: this type was introduced just to start understanding what this code is doing but it is clear it is trying to represent a code that does too many things
-type TempAction = {
+export type TempAction = {
 	id?: string;
 	a?: string;
 	label?: string;
@@ -56,6 +56,7 @@ type TempAction = {
 	flagName?: string;
 	folderPath?: string;
 };
+
 // FIXME: what is "comp" supposed to be?
 type CompProps = {
 	t: TFunction;
@@ -86,7 +87,6 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 		zimbraFeatureMailForwardingInFiltersEnabled
 	} = compProps;
 	const [activeIndex, setActiveIndex] = useState(0);
-	const [destination, setDestination] = useState<{ name?: string }>({});
 	const [isRedirectToActionRemoved, setIsRedirectToActionRemoved] = useState(false);
 
 	const actionOptions = useMemo(
@@ -142,7 +142,6 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 			}
 			case 'actionFileInto': {
 				setActiveActionOption('moveIntoFolder');
-				setDestination({ name: tmpFilter[action][0].folderPath });
 				return actionOptions[2];
 			}
 			case 'actionFlag': {
@@ -257,20 +256,13 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 				}
 				case 'moveIntoFolder': {
 					const previous = tempActions.slice();
-					let folderDetail = [{}];
 					if (!previous[index].actionFileInto) {
-						folderDetail = [
-							{
-								name: ''
-							}
-						];
 						previous[index] = {
 							id: previous[index]?.id,
 							actionFileInto: [{ folderPath: '' }]
 						};
 					}
 					setTempActions(previous);
-					setDestination(folderDetail[0]);
 					break;
 				}
 				case 'redirectToAddress': {
@@ -350,9 +342,9 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 				actionFileInto: [{ folderPath: `${folderDestination?.absFolderPath}` }]
 			};
 			setTempActions(previous);
-			setDestination({ name: folderDestination?.name });
+			// setDestination({ name: folderDestination?.name });
 		},
-		[tempActions, activeIndex, setTempActions, setDestination]
+		[tempActions, activeIndex, setTempActions]
 	);
 
 	return (
@@ -382,8 +374,7 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 					)}
 				{showBrowseBtn && (
 					<MovetoFolder
-						destination={destination}
-						setDestination={setDestination}
+						initialDestinaton={tmpFilter[activeActionOption]?.[0]}
 						onSelectFolder={onSelectFolder}
 						onConfirmDestination={confirmAction}
 					/>
diff --git a/src/views/settings/filters/parts/filter-actions/move-to-folder.tsx b/src/views/settings/filters/parts/filter-actions/move-to-folder.tsx
index d8b037316..66ed102fb 100644
--- a/src/views/settings/filters/parts/filter-actions/move-to-folder.tsx
+++ b/src/views/settings/filters/parts/filter-actions/move-to-folder.tsx
@@ -6,26 +6,28 @@
 import React, { useCallback, useState } from 'react';
 
 import { Button, CustomModal, Input, Row } from '@zextras/carbonio-design-system';
-import { Folder } from '@zextras/carbonio-shell-ui';
 import { useTranslation } from 'react-i18next';
 
+import { Folder } from '../../../../../carbonio-ui-commons/types/folder';
 import { SelectFolderModal } from '../../../../../ui-actions/modals/select-folder-modal';
+// TODO: spostare
+import { TempAction } from '../filter-action-rows';
 
 type MoveToFolderProps = {
-	destination: any;
-	setDestination: (destination: any) => void;
+	initialDestinaton: TempAction | undefined;
 	onSelectFolder: () => void;
 	onConfirmDestination: (destination: Folder | undefined) => void;
 };
 
 export const MovetoFolder = ({
-	destination,
-	setDestination,
+	initialDestinaton,
 	onSelectFolder,
 	onConfirmDestination
 }: MoveToFolderProps): React.JSX.Element => {
 	const [t] = useTranslation();
 	const [open, setOpen] = useState(false);
+	const [destination, setDestination] = useState<any>({ name: initialDestinaton?.folderPath });
+
 	const onModalClose = useCallback(() => {
 		setDestination({});
 		setOpen(false);
@@ -36,10 +38,14 @@ export const MovetoFolder = ({
 		setOpen(true);
 	}, [onSelectFolder]);
 
-	const onInternalConfirm = useCallback(() => {
-		onConfirmDestination(destination);
-		setOpen(false);
-	}, [destination, onConfirmDestination]);
+	const onInternalConfirm = useCallback(
+		(folder: Folder | undefined) => {
+			setDestination({ name: folder?.name });
+			onConfirmDestination(destination);
+			setOpen(false);
+		},
+		[destination, onConfirmDestination]
+	);
 
 	return (
 		<>
diff --git a/src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx b/src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx
new file mode 100644
index 000000000..870397e85
--- /dev/null
+++ b/src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx
@@ -0,0 +1,32 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+
+import { setupTest } from '../../../../../../carbonio-ui-commons/test/test-setup';
+import { MovetoFolder } from '../../filter-actions/move-to-folder';
+import { generateStore } from '../../../../../../tests/generators/store';
+
+describe('Move to Folder', () => {
+	it('it should render the component', async () => {
+		const store = generateStore();
+
+		setupTest(
+			<MovetoFolder
+				destination={undefined}
+				setDestination={jest.fn()}
+				onSelectFolder={jest.fn()}
+				onConfirmDestination={jest.fn()}
+			/>,
+			{
+				store
+			}
+		);
+
+		expect(screen.getByText('sdsdasd')).toBeInTheDocument();
+	});
+});

From 30b427e482e95f06f20645fa2a50071d500d5184 Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Fri, 13 Dec 2024 14:22:14 +0100
Subject: [PATCH 04/40] test: check initialvalue of move-to-folder input is set
 correctly

---
 .../tests/filter-actions/move-to-folder.test.tsx      | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx b/src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx
index 870397e85..317746226 100644
--- a/src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx
@@ -8,17 +8,16 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 
 import { setupTest } from '../../../../../../carbonio-ui-commons/test/test-setup';
-import { MovetoFolder } from '../../filter-actions/move-to-folder';
 import { generateStore } from '../../../../../../tests/generators/store';
+import { MovetoFolder } from '../../filter-actions/move-to-folder';
 
 describe('Move to Folder', () => {
-	it('it should render the component', async () => {
+	it('it should render initial folder destination in input', async () => {
 		const store = generateStore();
 
 		setupTest(
 			<MovetoFolder
-				destination={undefined}
-				setDestination={jest.fn()}
+				initialDestinaton={{ folderPath: 'test path' }}
 				onSelectFolder={jest.fn()}
 				onConfirmDestination={jest.fn()}
 			/>,
@@ -26,7 +25,7 @@ describe('Move to Folder', () => {
 				store
 			}
 		);
-
-		expect(screen.getByText('sdsdasd')).toBeInTheDocument();
+		const input = screen.getByRole('textbox', { name: 'Destination Folder' });
+		expect(input).toHaveValue('test path');
 	});
 });

From 98a414b687baba2b988cd9f676436acd1bc4c888 Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Fri, 13 Dec 2024 16:32:31 +0100
Subject: [PATCH 05/40] refactor: pass tempActions to move-to-folder.tsx

- add tests for it
- add ActionFileInto type
---
 .../filters/parts/filter-action-rows.tsx      | 11 +++-
 .../parts/filter-actions/move-to-folder.tsx   | 17 +++----
 .../filter-actions/move-to-folder.test.tsx    | 50 +++++++++++++++++--
 3 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/src/views/settings/filters/parts/filter-action-rows.tsx b/src/views/settings/filters/parts/filter-action-rows.tsx
index 257d5ed34..bb9539264 100644
--- a/src/views/settings/filters/parts/filter-action-rows.tsx
+++ b/src/views/settings/filters/parts/filter-action-rows.tsx
@@ -40,6 +40,9 @@ export const StyledIconButton = styled(IconButton)`
 	}
 `;
 
+type ActionFileInto = {
+	folderPath?: string;
+};
 // FIXME: this type was introduced just to start understanding what this code is doing but it is clear it is trying to represent a code that does too many things
 export type TempAction = {
 	id?: string;
@@ -50,7 +53,7 @@ export type TempAction = {
 	actionStop?: Array<unknown>;
 	actionRedirect?: Array<unknown>;
 	actionTag?: Array<unknown>;
-	actionFileInto?: Array<unknown>;
+	actionFileInto?: Array<ActionFileInto>;
 	actionDiscard?: Array<unknown>;
 	tagName?: string;
 	flagName?: string;
@@ -374,7 +377,11 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 					)}
 				{showBrowseBtn && (
 					<MovetoFolder
-						initialDestinaton={tmpFilter[activeActionOption]?.[0]}
+						destination={
+							tempActions[0]?.actionFileInto?.[0]
+								? { name: tempActions[0].actionFileInto[0].folderPath }
+								: undefined
+						}
 						onSelectFolder={onSelectFolder}
 						onConfirmDestination={confirmAction}
 					/>
diff --git a/src/views/settings/filters/parts/filter-actions/move-to-folder.tsx b/src/views/settings/filters/parts/filter-actions/move-to-folder.tsx
index 66ed102fb..f391270b2 100644
--- a/src/views/settings/filters/parts/filter-actions/move-to-folder.tsx
+++ b/src/views/settings/filters/parts/filter-actions/move-to-folder.tsx
@@ -10,28 +10,24 @@ import { useTranslation } from 'react-i18next';
 
 import { Folder } from '../../../../../carbonio-ui-commons/types/folder';
 import { SelectFolderModal } from '../../../../../ui-actions/modals/select-folder-modal';
-// TODO: spostare
-import { TempAction } from '../filter-action-rows';
 
 type MoveToFolderProps = {
-	initialDestinaton: TempAction | undefined;
+	destination?: { name?: string };
 	onSelectFolder: () => void;
 	onConfirmDestination: (destination: Folder | undefined) => void;
 };
 
 export const MovetoFolder = ({
-	initialDestinaton,
+	destination,
 	onSelectFolder,
 	onConfirmDestination
 }: MoveToFolderProps): React.JSX.Element => {
 	const [t] = useTranslation();
 	const [open, setOpen] = useState(false);
-	const [destination, setDestination] = useState<any>({ name: initialDestinaton?.folderPath });
 
 	const onModalClose = useCallback(() => {
-		setDestination({});
 		setOpen(false);
-	}, [setDestination]);
+	}, []);
 
 	const onInternalSelectFolder = useCallback(() => {
 		onSelectFolder();
@@ -40,16 +36,15 @@ export const MovetoFolder = ({
 
 	const onInternalConfirm = useCallback(
 		(folder: Folder | undefined) => {
-			setDestination({ name: folder?.name });
-			onConfirmDestination(destination);
+			onConfirmDestination(folder);
 			setOpen(false);
 		},
-		[destination, onConfirmDestination]
+		[onConfirmDestination]
 	);
 
 	return (
 		<>
-			{destination && Object.keys(destination).length > 0 && destination?.name !== '' && (
+			{destination?.name !== '' && (
 				<Row padding={{ right: 'small' }}>
 					<Input
 						label={t('label.destination_folder', 'Destination Folder')}
diff --git a/src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx b/src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx
index 317746226..b94b20860 100644
--- a/src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx
@@ -5,9 +5,16 @@
  */
 import React from 'react';
 
-import { screen } from '@testing-library/react';
+import { act, screen } from '@testing-library/react';
 
-import { setupTest } from '../../../../../../carbonio-ui-commons/test/test-setup';
+import { FOLDER_VIEW } from '../../../../../../carbonio-ui-commons/constants';
+import { FOLDERS } from '../../../../../../carbonio-ui-commons/constants/folders';
+import { generateFolder } from '../../../../../../carbonio-ui-commons/test/mocks/folders/folders-generator';
+import { populateFoldersStore } from '../../../../../../carbonio-ui-commons/test/mocks/store/folders';
+import {
+	makeListItemsVisible,
+	setupTest
+} from '../../../../../../carbonio-ui-commons/test/test-setup';
 import { generateStore } from '../../../../../../tests/generators/store';
 import { MovetoFolder } from '../../filter-actions/move-to-folder';
 
@@ -17,7 +24,7 @@ describe('Move to Folder', () => {
 
 		setupTest(
 			<MovetoFolder
-				initialDestinaton={{ folderPath: 'test path' }}
+				destination={{ name: 'test path' }}
 				onSelectFolder={jest.fn()}
 				onConfirmDestination={jest.fn()}
 			/>,
@@ -28,4 +35,41 @@ describe('Move to Folder', () => {
 		const input = screen.getByRole('textbox', { name: 'Destination Folder' });
 		expect(input).toHaveValue('test path');
 	});
+
+	it('it should return selected destination on confirm', async () => {
+		const store = generateStore();
+		const folder = generateFolder({
+			id: '100',
+			name: 'Test folder'
+		});
+		const rootFolder = generateFolder({ id: FOLDERS.USER_ROOT, name: 'Root', children: [folder] });
+		populateFoldersStore({
+			view: FOLDER_VIEW.message,
+			customFolders: [rootFolder]
+		});
+		const onConfirm = jest.fn();
+		const { user } = setupTest(
+			<MovetoFolder
+				destination={undefined}
+				onSelectFolder={jest.fn()}
+				onConfirmDestination={onConfirm}
+			/>,
+			{
+				store
+			}
+		);
+		const browseFolder = screen.getByRole('button', {
+			name: /browse/i
+		});
+		await user.click(browseFolder);
+		makeListItemsVisible();
+		act(() => {
+			jest.advanceTimersByTime(1000);
+		});
+		await user.click(screen.getByTestId(`folder-accordion-item-${folder.id}`));
+		const chooseFolder = screen.getByRole('button', { name: 'Choose' });
+		expect(chooseFolder).toBeEnabled();
+		await user.click(chooseFolder);
+		expect(onConfirm).toHaveBeenCalledWith({ name: folder.name });
+	});
 });

From 85b7646f2b0a06bcff7dc1cc76fc6d67f469065b Mon Sep 17 00:00:00 2001
From: FrancescoGottardi <gottardifrancesco92@gmail.com>
Date: Fri, 13 Dec 2024 17:19:40 +0100
Subject: [PATCH 06/40] test: move to folder test fix

---
 .../filters/parts/tests/filter-actions/move-to-folder.test.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx b/src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx
index b94b20860..a90254ba2 100644
--- a/src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx
@@ -70,6 +70,6 @@ describe('Move to Folder', () => {
 		const chooseFolder = screen.getByRole('button', { name: 'Choose' });
 		expect(chooseFolder).toBeEnabled();
 		await user.click(chooseFolder);
-		expect(onConfirm).toHaveBeenCalledWith({ name: folder.name });
+		expect(onConfirm).toHaveBeenCalledWith(expect.objectContaining({ name: folder.name }));
 	});
 });

From 3c6a5e859f3641f3a39d3c172329ab45cc1df67e Mon Sep 17 00:00:00 2001
From: FrancescoGottardi <gottardifrancesco92@gmail.com>
Date: Fri, 13 Dec 2024 18:06:39 +0100
Subject: [PATCH 07/40] test: added filter action tests

---
 .../filters/parts/filter-actions/mark-as.tsx  |  6 +-
 .../parts/filter-actions/redirect-to.tsx      |  2 +-
 .../tests/filter-actions/mark-as.test.tsx     | 53 ++++++++++++
 .../tests/filter-actions/redirect-to.test.tsx | 84 +++++++++++++++++++
 4 files changed, 141 insertions(+), 4 deletions(-)
 create mode 100644 src/views/settings/filters/parts/tests/filter-actions/mark-as.test.tsx
 create mode 100644 src/views/settings/filters/parts/tests/filter-actions/redirect-to.test.tsx

diff --git a/src/views/settings/filters/parts/filter-actions/mark-as.tsx b/src/views/settings/filters/parts/filter-actions/mark-as.tsx
index 38fcf4209..54f3c45d0 100644
--- a/src/views/settings/filters/parts/filter-actions/mark-as.tsx
+++ b/src/views/settings/filters/parts/filter-actions/mark-as.tsx
@@ -10,9 +10,9 @@ import { Row } from '@zextras/carbonio-design-system';
 import CustomSelect from '../custom-select';
 
 type MarkAsProps = {
-	options: any[];
-	onChange: (option: { label: string; value: any }) => void;
-	selected: any;
+	options: { label: string; value: string }[];
+	onChange: (option: { label: string; value: string }) => void;
+	selected: { label: string; value: string };
 };
 
 export const MarkAs = ({ options, onChange, selected }: MarkAsProps): React.JSX.Element => (
diff --git a/src/views/settings/filters/parts/filter-actions/redirect-to.tsx b/src/views/settings/filters/parts/filter-actions/redirect-to.tsx
index c8f77fcad..bb7ee1947 100644
--- a/src/views/settings/filters/parts/filter-actions/redirect-to.tsx
+++ b/src/views/settings/filters/parts/filter-actions/redirect-to.tsx
@@ -12,7 +12,7 @@ import { useContactInput } from '../../../../../carbonio-ui-commons/integrations
 import { ContactInputItem } from '../../../../../carbonio-ui-commons/integrations/types';
 
 type RedirectToProps = {
-	defaultValue: any;
+	defaultValue: ContactInputItem[];
 	onChange: (chip: ContactInputItem[]) => void;
 };
 
diff --git a/src/views/settings/filters/parts/tests/filter-actions/mark-as.test.tsx b/src/views/settings/filters/parts/tests/filter-actions/mark-as.test.tsx
new file mode 100644
index 000000000..efc012553
--- /dev/null
+++ b/src/views/settings/filters/parts/tests/filter-actions/mark-as.test.tsx
@@ -0,0 +1,53 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+
+import { setupTest } from '../../../../../../carbonio-ui-commons/test/test-setup';
+import { generateStore } from '../../../../../../tests/generators/store';
+import { MarkAs } from '../../filter-actions/mark-as';
+
+describe('Mark As', () => {
+	it('it should render selected option in the input', async () => {
+		const store = generateStore();
+		const options = [
+			{ label: 'label 1', value: 'value_1' },
+			{ label: 'label 2', value: 'value_2' }
+		];
+		const selectedOption = options[0];
+
+		setupTest(<MarkAs options={options} onChange={jest.fn()} selected={selectedOption} />, {
+			store
+		});
+
+		expect(screen.getByText(selectedOption.label)).toBeVisible();
+	});
+
+	it('it should call onChange with the choosen value', async () => {
+		const store = generateStore();
+		const options = [
+			{ label: 'label 1', value: 'value_1' },
+			{ label: 'label 2', value: 'value_2' }
+		];
+		const selectedOption = options[0];
+		const secondOption = options[1];
+
+		const onChangeFn = jest.fn();
+		const { user } = setupTest(
+			<MarkAs options={options} onChange={onChangeFn} selected={selectedOption} />,
+			{
+				store
+			}
+		);
+
+		await user.click(screen.getByText(selectedOption.label));
+		await user.click(screen.getByText(secondOption.label));
+
+		expect(onChangeFn).toHaveBeenCalledTimes(1);
+		expect(onChangeFn).toHaveBeenCalledWith(secondOption.value);
+	});
+});
diff --git a/src/views/settings/filters/parts/tests/filter-actions/redirect-to.test.tsx b/src/views/settings/filters/parts/tests/filter-actions/redirect-to.test.tsx
new file mode 100644
index 000000000..2ffcde1ef
--- /dev/null
+++ b/src/views/settings/filters/parts/tests/filter-actions/redirect-to.test.tsx
@@ -0,0 +1,84 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+
+import { setupTest } from '../../../../../../carbonio-ui-commons/test/test-setup';
+import { generateStore } from '../../../../../../tests/generators/store';
+import { RedirectTo } from '../../filter-actions/redirect-to';
+
+describe('Redirect To', () => {
+	it('it should render selected option in the input', async () => {
+		const store = generateStore();
+		const label = 'test label';
+		setupTest(
+			<RedirectTo
+				defaultValue={[
+					{
+						label,
+						value: {
+							id: 'id',
+							email: 'test value',
+							type: 'CONTACT'
+						}
+					}
+				]}
+				onChange={jest.fn()}
+			/>,
+			{
+				store
+			}
+		);
+
+		expect(screen.getByText('test label')).toBeVisible();
+	});
+
+	// TODO: check if we really wanna test the chipinput fallback of contact integration again here
+	it.skip('it should call onChange with the typed value', async () => {
+		const store = generateStore();
+		const onChangeFn = jest.fn();
+		const label = 'test label';
+
+		const { user } = setupTest(
+			<RedirectTo
+				defaultValue={[
+					{
+						label,
+						value: {
+							id: 'id',
+							email: 'test@email.it',
+							type: 'CONTACT'
+						}
+					}
+				]}
+				onChange={onChangeFn}
+			/>,
+			{
+				store
+			}
+		);
+
+		// const inputElement = screen.getByRole('textbox', {
+		// 	name: /address/i
+		// });
+		// const newValue = 'anothervalue@test.com';
+		// await user.type(inputElement, newValue);
+		// await user.type(inputElement, '[Enter]');
+
+		// await waitFor(() => {
+		// 	expect(onChangeFn).toHaveBeenCalledTimes(1);
+		// });
+		// expect(onChangeFn).toHaveBeenCalledWith(newValue);
+
+		const redirectToAddressInput = await screen.findByTestId('filter-action-row-contact-input');
+		await user.type(redirectToAddressInput, 'valid@email.it');
+		await user.type(redirectToAddressInput, '[Enter]');
+		expect(onChangeFn).toHaveBeenCalledWith([
+			expect.objectContaining({ actionRedirect: [{ a: 'valid@email.it' }] })
+		]);
+	});
+});

From ad3bd24b9bc1c96206c28a0ac6f3a65e82482116 Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Fri, 13 Dec 2024 18:22:14 +0100
Subject: [PATCH 08/40] test: redirect-to.test.tsx

- this input supports only one value!
---
 .../tests/filter-actions/redirect-to.test.tsx | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/views/settings/filters/parts/tests/filter-actions/redirect-to.test.tsx b/src/views/settings/filters/parts/tests/filter-actions/redirect-to.test.tsx
index 2ffcde1ef..ccc3603d8 100644
--- a/src/views/settings/filters/parts/tests/filter-actions/redirect-to.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions/redirect-to.test.tsx
@@ -36,9 +36,24 @@ describe('Redirect To', () => {
 
 		expect(screen.getByText('test label')).toBeVisible();
 	});
+	it('it should call onChange only when adding the first value', async () => {
+		const store = generateStore();
+		const onChangeFn = jest.fn();
 
-	// TODO: check if we really wanna test the chipinput fallback of contact integration again here
-	it.skip('it should call onChange with the typed value', async () => {
+		const { user } = setupTest(<RedirectTo defaultValue={[]} onChange={onChangeFn} />, {
+			store
+		});
+
+		const redirectToAddressInput = await screen.findByTestId('filter-action-row-contact-input');
+		await user.type(redirectToAddressInput, 'valid@email.it');
+		await user.type(redirectToAddressInput, '[Enter]');
+		expect(onChangeFn).toHaveBeenCalledWith([
+			expect.objectContaining({
+				label: 'valid@email.it'
+			})
+		]);
+	});
+	it('it should not call onChange if adding a second value (max 1 chip)', async () => {
 		const store = generateStore();
 		const onChangeFn = jest.fn();
 		const label = 'test label';
@@ -62,23 +77,9 @@ describe('Redirect To', () => {
 			}
 		);
 
-		// const inputElement = screen.getByRole('textbox', {
-		// 	name: /address/i
-		// });
-		// const newValue = 'anothervalue@test.com';
-		// await user.type(inputElement, newValue);
-		// await user.type(inputElement, '[Enter]');
-
-		// await waitFor(() => {
-		// 	expect(onChangeFn).toHaveBeenCalledTimes(1);
-		// });
-		// expect(onChangeFn).toHaveBeenCalledWith(newValue);
-
 		const redirectToAddressInput = await screen.findByTestId('filter-action-row-contact-input');
 		await user.type(redirectToAddressInput, 'valid@email.it');
 		await user.type(redirectToAddressInput, '[Enter]');
-		expect(onChangeFn).toHaveBeenCalledWith([
-			expect.objectContaining({ actionRedirect: [{ a: 'valid@email.it' }] })
-		]);
+		expect(onChangeFn).not.toHaveBeenCalled();
 	});
 });

From a64dd20359cbb9323772ac53e60af0ff52b4dcb8 Mon Sep 17 00:00:00 2001
From: FrancescoGottardi <gottardifrancesco92@gmail.com>
Date: Mon, 16 Dec 2024 13:06:00 +0100
Subject: [PATCH 09/40] refactor: show tag tests and tipization changes

---
 .../filters/parts/filter-action-rows.tsx      |  37 +++---
 .../filters/parts/filter-actions/show-tag.tsx | 105 +++++++++++++-----
 .../tests/filter-actions/show-tag.test.tsx    |  61 ++++++++++
 3 files changed, 153 insertions(+), 50 deletions(-)
 create mode 100644 src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx

diff --git a/src/views/settings/filters/parts/filter-action-rows.tsx b/src/views/settings/filters/parts/filter-action-rows.tsx
index bb9539264..cb17b17b9 100644
--- a/src/views/settings/filters/parts/filter-action-rows.tsx
+++ b/src/views/settings/filters/parts/filter-action-rows.tsx
@@ -40,6 +40,17 @@ export const StyledIconButton = styled(IconButton)`
 	}
 `;
 
+// TODO: move this one
+type Tag = {
+	label: string;
+	customComponent?: React.ReactNode;
+	hasAvatar: boolean;
+	avatarIcon: 'Tag';
+	background: 'gray2';
+	avatarBackground: string;
+	color?: number;
+};
+
 type ActionFileInto = {
 	folderPath?: string;
 };
@@ -97,7 +108,7 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 		[t, zimbraFeatureMailForwardingInFiltersEnabled, isIncoming]
 	);
 	const markAsOptions = useMemo(() => getMarkAsOptions(t), [t]);
-	const [tag, setTag] = useState<Array<any>>([]);
+	const [tag, setTag] = useState<Array<Tag>>([]);
 
 	const addFilterCondition = useCallback(() => {
 		const previousTempActions = tempActions.slice();
@@ -292,27 +303,12 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 
 	const showTagOptions = useMemo(() => activeActionOption === 'tagWith', [activeActionOption]);
 
-	const tagChipOnAdd = useCallback(
-		(label: unknown): ChipItem => {
-			const chipBg = filter(tagOptions, { label })[0];
-			return {
-				label: `${label}`,
-				hasAvatar: true,
-				avatarIcon: 'Tag',
-				background: 'gray2',
-				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-				// @ts-ignore
-				avatarBackground: ZIMBRA_STANDARD_COLORS[chipBg.color].hex
-			};
-		},
-		[tagOptions]
-	);
 	const onSelectFolder = useCallback(() => {
 		setActiveIndex(index);
 	}, [setActiveIndex, index]);
 
 	const onTagChange = useCallback(
-		(chip: ChipItem[]) => {
+		(chip: Tag[]) => {
 			const previous = tempActions.slice();
 			if (chip.length > 0) {
 				const requiredTag = chip.length > 1 ? chip[1] : chip[0];
@@ -397,12 +393,7 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 				{showRedirectToAddrsInput && <RedirectTo defaultValue={contacts} onChange={onChange} />}
 
 				{showTagOptions && (
-					<ShowTag
-						value={tag}
-						tagOptions={tagOptions}
-						onTagChange={onTagChange}
-						onAddTag={tagChipOnAdd}
-					/>
+					<ShowTag value={tag} tagOptions={tagOptions} onTagChange={onTagChange} />
 				)}
 			</Row>
 			<Container orientation="horizontal" mainAlignment="flex-end" width="auto">
diff --git a/src/views/settings/filters/parts/filter-actions/show-tag.tsx b/src/views/settings/filters/parts/filter-actions/show-tag.tsx
index 9d6f19a66..fb3b88901 100644
--- a/src/views/settings/filters/parts/filter-actions/show-tag.tsx
+++ b/src/views/settings/filters/parts/filter-actions/show-tag.tsx
@@ -3,35 +3,86 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import React from 'react';
+import React, { useCallback } from 'react';
 
-import { ChipInput, ChipItem, Row } from '@zextras/carbonio-design-system';
+import { ChipInput, ChipItem, DropdownItem, Row } from '@zextras/carbonio-design-system';
+import { useTranslation } from 'react-i18next';
+
+import { ZIMBRA_STANDARD_COLORS } from '../../../../../carbonio-ui-commons/constants';
+
+type Tag = {
+	label: string;
+	customComponent?: React.ReactNode;
+	hasAvatar: boolean;
+	avatarIcon: 'Tag';
+	background: 'gray2';
+	avatarBackground: string;
+	color?: number;
+};
 
 type ShowTagProps = {
-	value: any;
-	tagOptions: any[] | undefined;
-	onTagChange: (chip: ChipItem[]) => void;
-	onAddTag: (value: unknown) => ChipItem<unknown>;
+	value: Tag[];
+	tagOptions: Tag[] | undefined;
+	onTagChange: (chip: Tag[]) => void;
 };
 
-export const ShowTag = ({
-	value,
-	tagOptions,
-	onTagChange,
-	onAddTag
-}: ShowTagProps): React.JSX.Element => (
-	<Row padding={{ right: 'small' }} minWidth="12.5rem">
-		<ChipInput
-			placeholder={t('label.tag', 'Tag')}
-			background="gray4"
-			defaultValue={[]}
-			options={tagOptions}
-			value={value}
-			singleSelection
-			onChange={onTagChange}
-			onAdd={onAddTag}
-			disableOptions={false}
-			disabled
-		/>
-	</Row>
-);
+export const ShowTag = ({ value, tagOptions, onTagChange }: ShowTagProps): React.JSX.Element => {
+	const [t] = useTranslation();
+
+	const tagChipInput = value.map(
+		(tag): ChipItem<Tag> => ({
+			label: tag.label,
+			value: tag
+		})
+	);
+
+	const tagChipOptions = tagOptions?.map(
+		(
+			tag
+		): DropdownItem & {
+			value?: Tag;
+		} => ({
+			id: tag.label,
+			label: tag.label,
+			value: tag
+		})
+	);
+	const tagChipOnAdd = useCallback((tagValue: unknown): ChipItem<Tag> => {
+		const tag = tagValue as Tag;
+		return {
+			label: tag.label,
+			value: {
+				label: tag.label,
+				hasAvatar: true,
+				avatarIcon: 'Tag',
+				background: 'gray2',
+				avatarBackground: ZIMBRA_STANDARD_COLORS[tag.color ?? 0].hex
+			}
+		};
+	}, []);
+
+	const onTagInternalChange = useCallback(
+		(chips: ChipItem<Tag>[]) => {
+			const chipsValue = chips.map((chip) => chip.value) as Tag[];
+			onTagChange(chipsValue);
+		},
+		[onTagChange]
+	);
+
+	return (
+		<Row padding={{ right: 'small' }} minWidth="12.5rem">
+			<ChipInput
+				placeholder={t('label.tag', 'Tag')}
+				background="gray4"
+				defaultValue={[]}
+				options={tagChipOptions}
+				value={tagChipInput}
+				singleSelection
+				onChange={onTagInternalChange}
+				onAdd={tagChipOnAdd}
+				disableOptions={false}
+				disabled
+			/>
+		</Row>
+	);
+};
diff --git a/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx b/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
new file mode 100644
index 000000000..c012613e7
--- /dev/null
+++ b/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
@@ -0,0 +1,61 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+
+import { setupTest } from '../../../../../../carbonio-ui-commons/test/test-setup';
+import { generateStore } from '../../../../../../tests/generators/store';
+import { ShowTag } from '../../filter-actions/show-tag';
+
+describe('Show Tag', () => {
+	it('it should render selected option in the input', async () => {
+		const store = generateStore();
+
+		setupTest(<ShowTag value={[]} tagOptions={[]} onTagChange={jest.fn()} />, {
+			store
+		});
+
+		expect(screen.getByText('Tag')).toBeVisible();
+	});
+
+	it.only('it should call onChange with the choosen value', async () => {
+		const store = generateStore();
+		const onChangeFn = jest.fn();
+		const tagOptions = [
+			{
+				color: 6,
+				id: '123',
+				label: 'tag option 1',
+				n: 2,
+				name: 'tag option 1'
+			}
+		];
+
+		const { user } = setupTest(
+			<ShowTag value={[]} tagOptions={tagOptions} onTagChange={onChangeFn} />,
+			{
+				store
+			}
+		);
+
+		await user.click(screen.getByText('Tag'));
+		await screen.findByTestId('dropdown-popper-list');
+
+		await user.click(screen.getByText(tagOptions[0].label));
+
+		expect(onChangeFn).toHaveBeenCalledTimes(1);
+		expect(onChangeFn).toHaveBeenCalledWith([
+			{
+				avatarBackground: '#ffc107',
+				avatarIcon: 'Tag',
+				background: 'gray2',
+				hasAvatar: true,
+				label: 'tag option 1'
+			}
+		]);
+	});
+});

From bc665afdfcc2a1501fe7876adf38933c7371f9eb Mon Sep 17 00:00:00 2001
From: FrancescoGottardi <gottardifrancesco92@gmail.com>
Date: Mon, 16 Dec 2024 16:27:26 +0100
Subject: [PATCH 10/40] test: show tag and create filter modals tests update

---
 .../filters/parts/filter-action-rows.tsx      | 26 ++----
 .../parts/tests/create-filter-modal.test.tsx  |  6 +-
 .../parts/tests/filter-actions-rows.test.tsx  | 82 +++++++++++++++++--
 .../tests/filter-actions/show-tag.test.tsx    | 11 +--
 4 files changed, 89 insertions(+), 36 deletions(-)

diff --git a/src/views/settings/filters/parts/filter-action-rows.tsx b/src/views/settings/filters/parts/filter-action-rows.tsx
index cb17b17b9..6ceea34b9 100644
--- a/src/views/settings/filters/parts/filter-action-rows.tsx
+++ b/src/views/settings/filters/parts/filter-action-rows.tsx
@@ -12,11 +12,10 @@ import {
 	Row,
 	Text,
 	Tooltip,
-	getColor,
-	ChipItem
+	getColor
 } from '@zextras/carbonio-design-system';
-import { TFunction } from 'i18next';
 import { filter, omit } from 'lodash';
+import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -73,7 +72,6 @@ export type TempAction = {
 
 // FIXME: what is "comp" supposed to be?
 type CompProps = {
-	t: TFunction;
 	isIncoming: boolean;
 	tempActions: Array<TempAction>;
 	setTempActions: (tempActions: Array<TempAction>) => void;
@@ -93,16 +91,11 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 	compProps,
 	tagOptions
 }): ReactElement => {
-	const {
-		t,
-		isIncoming,
-		tempActions,
-		setTempActions,
-		zimbraFeatureMailForwardingInFiltersEnabled
-	} = compProps;
+	const { isIncoming, tempActions, setTempActions, zimbraFeatureMailForwardingInFiltersEnabled } =
+		compProps;
 	const [activeIndex, setActiveIndex] = useState(0);
 	const [isRedirectToActionRemoved, setIsRedirectToActionRemoved] = useState(false);
-
+	const [t] = useTranslation();
 	const actionOptions = useMemo(
 		() => getActionOptions(t, zimbraFeatureMailForwardingInFiltersEnabled, isIncoming ?? false),
 		[t, zimbraFeatureMailForwardingInFiltersEnabled, isIncoming]
@@ -250,20 +243,13 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 				}
 				case 'tagWith': {
 					const previous = tempActions.slice();
-					let tagDetails;
 					if (!previous[index].actionTag) {
-						tagDetails = [
-							{
-								id: previous[index]?.id,
-								actionTag: [{ tagName: '' }]
-							}
-						];
 						previous[index] = {
 							id: previous[index]?.id,
 							actionTag: [{ tagName: '' }]
 						};
 						setTempActions(previous);
-						setTag(tagDetails);
+						setTag([]);
 					}
 
 					break;
diff --git a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
index 87a93723a..319ae3062 100644
--- a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
+++ b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
@@ -131,11 +131,11 @@ describe('create-filter-modal', () => {
 		const { user } = setupTest(<CreateFilterModal t={t} onClose={(): void => closeModal()} />, {
 			store
 		});
-		await user.click(screen.getByText(/settings\.keep_in_inbox/i));
+		await user.click(screen.getByText('Keep in Inbox'));
 
-		await user.click(screen.getByText(/settings\.move_into_folder/i));
+		await user.click(screen.getByText('Move Into Folder'));
 		const button = screen.getByRole('button', {
-			name: /settings\.browse/i
+			name: 'Browse'
 		});
 		await act(async () => {
 			await user.click(button);
diff --git a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
index 3195d3608..6e910fed4 100644
--- a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
@@ -6,14 +6,13 @@
 
 import React from 'react';
 
-import { screen } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
 
 import { setupTest } from '../../../../../carbonio-ui-commons/test/test-setup';
 import FilterActionRows from '../filter-action-rows';
 
 describe('FilterActionsRows', () => {
 	const compProps = {
-		t: jest.fn(),
 		isIncoming: true,
 		setTempActions: jest.fn(),
 		tempActions: [],
@@ -32,6 +31,77 @@ describe('FilterActionsRows', () => {
 		);
 	});
 
+	it('adds a new filter condition when the add button is clicked', async () => {
+		const { user } = setupTest(
+			<FilterActionRows
+				tmpFilter={{
+					anything: [{ flagName: 'flagged' }]
+				}}
+				index={0}
+				compProps={compProps}
+			/>,
+			{}
+		);
+		await user.click(screen.getByTestId('icon: PlusOutline'));
+
+		expect(compProps.setTempActions).toHaveBeenCalledWith([
+			expect.objectContaining({
+				actionKeep: [{}],
+				actionStop: [{}]
+			})
+		]);
+	});
+
+	it('removes a filter condition when the remove button is clicked', async () => {
+		const newCompProps = {
+			...compProps,
+			tempActions: [
+				{ id: '1', actionKeep: [{}] },
+				{ id: '2', actionStop: [{}] }
+			]
+		};
+		const { user } = setupTest(
+			<FilterActionRows
+				tmpFilter={{
+					anything: [{ flagName: 'flagged' }]
+				}}
+				index={0}
+				compProps={newCompProps}
+			/>,
+			{}
+		);
+		await user.click(screen.getByTestId('icon: MinusOutline'));
+
+		expect(compProps.setTempActions).toHaveBeenCalledWith([
+			expect.objectContaining({ id: '2', actionStop: [{}] })
+		]);
+	});
+
+	it('disables the remove button when there is only one filter condition', async () => {
+		const newCompProps = {
+			...compProps,
+			tempActions: [{ id: '1', actionKeep: [{}] }]
+		};
+
+		const { user } = setupTest(
+			<FilterActionRows
+				tmpFilter={{
+					anything: [{ flagName: 'flagged' }]
+				}}
+				index={0}
+				compProps={newCompProps}
+			/>,
+			{}
+		);
+
+		const removeButton = screen
+			.getAllByRole('button')
+			.filter((button) => within(button).queryByTestId('icon: MinusOutline'))[0];
+		expect(removeButton).toBeDisabled();
+		await user.click(removeButton);
+		expect(compProps.setTempActions).not.toHaveBeenCalled();
+	});
+
 	describe('Keep In Inbox', () => {
 		it('it should render the selected action', async () => {
 			setupTest(
@@ -44,14 +114,10 @@ describe('FilterActionsRows', () => {
 				/>,
 				{}
 			);
+			const newLocal = await screen.findByText('Keep in Inbox');
+			expect(newLocal).toBeVisible();
 		});
 	});
-	// describe('Discard', () => {});
-	// describe('Move Into Folder', () => {});
-	// describe('Tag With', () => {});
-
-	// describe('Mark as', () => {});
-
 	describe('Redirect To Address', () => {
 		it('should not display Contact Input when dropdown option is different from "Redirect To Address"', async () => {
 			setupTest(
diff --git a/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx b/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
index c012613e7..626287bfc 100644
--- a/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
@@ -22,16 +22,17 @@ describe('Show Tag', () => {
 		expect(screen.getByText('Tag')).toBeVisible();
 	});
 
-	it.only('it should call onChange with the choosen value', async () => {
+	it('it should call onChange with the choosen value', async () => {
 		const store = generateStore();
 		const onChangeFn = jest.fn();
 		const tagOptions = [
 			{
-				color: 6,
-				id: '123',
+				avatarBackground: '#ffc107',
+				avatarIcon: 'Tag' as const,
+				background: 'gray2' as const,
+				hasAvatar: true,
 				label: 'tag option 1',
-				n: 2,
-				name: 'tag option 1'
+				color: 6
 			}
 		];
 

From f23715d88ccd2f00eb614bcb2f226ba2298817b0 Mon Sep 17 00:00:00 2001
From: FrancescoGottardi <gottardifrancesco92@gmail.com>
Date: Mon, 16 Dec 2024 16:41:40 +0100
Subject: [PATCH 11/40] fix: deprecated iconButton removal

---
 .../filters/parts/filter-action-rows.tsx        | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/views/settings/filters/parts/filter-action-rows.tsx b/src/views/settings/filters/parts/filter-action-rows.tsx
index 6ceea34b9..ee4e1663f 100644
--- a/src/views/settings/filters/parts/filter-action-rows.tsx
+++ b/src/views/settings/filters/parts/filter-action-rows.tsx
@@ -6,6 +6,7 @@
 import React, { FC, ReactElement, useCallback, useMemo, useState } from 'react';
 
 import {
+	Button,
 	Container,
 	IconButton,
 	Padding,
@@ -30,10 +31,10 @@ import { CONTACT_TYPES } from '../../../../carbonio-ui-commons/integrations/cons
 import { ContactInputItem } from '../../../../carbonio-ui-commons/integrations/types';
 import { Folder } from '../../../../carbonio-ui-commons/types/folder';
 
-export const StyledIconButton = styled(IconButton)`
+export const StyledIconButton = styled(Button)`
 	border: 0.0625rem solid
-		${({ theme, disabled, iconColor = 'primary' }): string =>
-			disabled ? theme.palette.gray2.regular : getColor(String(iconColor), theme)};
+		${({ theme, disabled, color = 'primary' }): string =>
+			disabled ? theme.palette.gray2.regular : getColor(String(color), theme)};
 	svg {
 		border: none !important;
 	}
@@ -384,7 +385,12 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 			</Row>
 			<Container orientation="horizontal" mainAlignment="flex-end" width="auto">
 				<Tooltip label={t('settings.add_action', 'Add new action')} placement="top">
-					<StyledIconButton icon="PlusOutline" onClick={addFilterCondition} iconColor="primary" />
+					<StyledIconButton
+						icon="PlusOutline"
+						onClick={addFilterCondition}
+						color="primary"
+						type="outlined"
+					/>
 				</Tooltip>
 				<Padding left="small">
 					<Tooltip label={t('settings.remove_action', 'Remove this action')} placement="top">
@@ -392,7 +398,8 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 							icon="MinusOutline"
 							disabled={disableRemove}
 							onClick={onRemove}
-							iconColor="secondary"
+							color="secondary"
+							type="outlined"
 						/>
 					</Tooltip>
 				</Padding>

From 5a0e5edea6f1985795c45fd60096e4a30284992e Mon Sep 17 00:00:00 2001
From: FrancescoGottardi <gottardifrancesco92@gmail.com>
Date: Mon, 16 Dec 2024 16:45:59 +0100
Subject: [PATCH 12/40] fix: deprecated iconButton removal

---
 .../filters/parts/filter-test-rows.tsx         | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/views/settings/filters/parts/filter-test-rows.tsx b/src/views/settings/filters/parts/filter-test-rows.tsx
index 975947e19..abbe13aaf 100644
--- a/src/views/settings/filters/parts/filter-test-rows.tsx
+++ b/src/views/settings/filters/parts/filter-test-rows.tsx
@@ -5,7 +5,7 @@
  */
 import React, { FC, ReactElement, useMemo, useCallback } from 'react';
 
-import { Container, Padding, IconButton, Tooltip, getColor } from '@zextras/carbonio-design-system';
+import { Button, Container, Padding, Tooltip, getColor } from '@zextras/carbonio-design-system';
 import styled from 'styled-components';
 
 import DefaultCondition from './create-filters-conditions/default';
@@ -13,10 +13,10 @@ import CustomSelect from './custom-select';
 import { getRowFunc } from './get-row';
 import { getStatusOptions, findDefaultValue } from './utils';
 
-export const StyledIconButton = styled(IconButton)`
+export const StyledIconButton = styled(Button)`
 	border: 0.0625rem solid
-		${({ theme, disabled, iconColor = 'primary' }): string =>
-			disabled ? theme.palette.gray2.regular : getColor(String(iconColor), theme)};
+		${({ theme, disabled, color = 'primary' }): string =>
+			disabled ? theme.palette.gray2.regular : getColor(String(color), theme)};
 	svg {
 		border: none !important;
 	}
@@ -98,7 +98,12 @@ const FilterTestRows: FC<FilterTestRowProps> = ({ tmpFilter, index, compProps })
 
 			<Container orientation="horizontal" mainAlignment="flex-end">
 				<Tooltip label={t('settings.add_condition', 'Add new condition')} placement="top">
-					<StyledIconButton icon="PlusOutline" onClick={addFilterCondition} iconColor="primary" />
+					<StyledIconButton
+						icon="PlusOutline"
+						onClick={addFilterCondition}
+						color="primary"
+						type="outlined"
+					/>
 				</Tooltip>
 				<Padding left="small">
 					<Tooltip label={t('settings.remove_condition', 'Remove this condition')} placement="top">
@@ -106,7 +111,8 @@ const FilterTestRows: FC<FilterTestRowProps> = ({ tmpFilter, index, compProps })
 							disabled={disableRemove}
 							icon="MinusOutline"
 							onClick={onRemove}
-							iconColor="secondary"
+							color="secondary"
+							type="outlined"
 						/>
 					</Tooltip>
 				</Padding>

From 339b03e6e166490e6ae23bc9b1f6c41009cd97c9 Mon Sep 17 00:00:00 2001
From: FrancescoGottardi <gottardifrancesco92@gmail.com>
Date: Mon, 16 Dec 2024 17:01:00 +0100
Subject: [PATCH 13/40] fix: styled component no more needed

---
 .../filters/parts/filter-action-rows.tsx       | 18 ++----------------
 .../filters/parts/filter-test-rows.tsx         | 18 ++----------------
 2 files changed, 4 insertions(+), 32 deletions(-)

diff --git a/src/views/settings/filters/parts/filter-action-rows.tsx b/src/views/settings/filters/parts/filter-action-rows.tsx
index ee4e1663f..a1910c98b 100644
--- a/src/views/settings/filters/parts/filter-action-rows.tsx
+++ b/src/views/settings/filters/parts/filter-action-rows.tsx
@@ -31,15 +31,6 @@ import { CONTACT_TYPES } from '../../../../carbonio-ui-commons/integrations/cons
 import { ContactInputItem } from '../../../../carbonio-ui-commons/integrations/types';
 import { Folder } from '../../../../carbonio-ui-commons/types/folder';
 
-export const StyledIconButton = styled(Button)`
-	border: 0.0625rem solid
-		${({ theme, disabled, color = 'primary' }): string =>
-			disabled ? theme.palette.gray2.regular : getColor(String(color), theme)};
-	svg {
-		border: none !important;
-	}
-`;
-
 // TODO: move this one
 type Tag = {
 	label: string;
@@ -385,16 +376,11 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 			</Row>
 			<Container orientation="horizontal" mainAlignment="flex-end" width="auto">
 				<Tooltip label={t('settings.add_action', 'Add new action')} placement="top">
-					<StyledIconButton
-						icon="PlusOutline"
-						onClick={addFilterCondition}
-						color="primary"
-						type="outlined"
-					/>
+					<Button icon="PlusOutline" onClick={addFilterCondition} color="primary" type="outlined" />
 				</Tooltip>
 				<Padding left="small">
 					<Tooltip label={t('settings.remove_action', 'Remove this action')} placement="top">
-						<StyledIconButton
+						<Button
 							icon="MinusOutline"
 							disabled={disableRemove}
 							onClick={onRemove}
diff --git a/src/views/settings/filters/parts/filter-test-rows.tsx b/src/views/settings/filters/parts/filter-test-rows.tsx
index abbe13aaf..f5d06cbe3 100644
--- a/src/views/settings/filters/parts/filter-test-rows.tsx
+++ b/src/views/settings/filters/parts/filter-test-rows.tsx
@@ -13,15 +13,6 @@ import CustomSelect from './custom-select';
 import { getRowFunc } from './get-row';
 import { getStatusOptions, findDefaultValue } from './utils';
 
-export const StyledIconButton = styled(Button)`
-	border: 0.0625rem solid
-		${({ theme, disabled, color = 'primary' }): string =>
-			disabled ? theme.palette.gray2.regular : getColor(String(color), theme)};
-	svg {
-		border: none !important;
-	}
-`;
-
 type FilterTestRowProps = {
 	tmpFilter: {
 		filterActions: Array<any>;
@@ -98,16 +89,11 @@ const FilterTestRows: FC<FilterTestRowProps> = ({ tmpFilter, index, compProps })
 
 			<Container orientation="horizontal" mainAlignment="flex-end">
 				<Tooltip label={t('settings.add_condition', 'Add new condition')} placement="top">
-					<StyledIconButton
-						icon="PlusOutline"
-						onClick={addFilterCondition}
-						color="primary"
-						type="outlined"
-					/>
+					<Button icon="PlusOutline" onClick={addFilterCondition} color="primary" type="outlined" />
 				</Tooltip>
 				<Padding left="small">
 					<Tooltip label={t('settings.remove_condition', 'Remove this condition')} placement="top">
-						<StyledIconButton
+						<Button
 							disabled={disableRemove}
 							icon="MinusOutline"
 							onClick={onRemove}

From 6586c84fa5eaa46894a093dc2060548d5fa2a774 Mon Sep 17 00:00:00 2001
From: FrancescoGottardi <gottardifrancesco92@gmail.com>
Date: Mon, 16 Dec 2024 18:04:54 +0100
Subject: [PATCH 14/40] tests: filter actions row tests

---
 .../parts/tests/filter-actions-rows.test.tsx  | 71 ++++++++++++++++++-
 1 file changed, 70 insertions(+), 1 deletion(-)

diff --git a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
index 6e910fed4..40c3cca3d 100644
--- a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
@@ -103,7 +103,7 @@ describe('FilterActionsRows', () => {
 	});
 
 	describe('Keep In Inbox', () => {
-		it('it should render the selected action', async () => {
+		it('should render the selected action', async () => {
 			setupTest(
 				<FilterActionRows
 					tmpFilter={{
@@ -186,4 +186,73 @@ describe('FilterActionsRows', () => {
 			]);
 		});
 	});
+
+	describe('Tag With', () => {
+		it('should display the saved tag', async () => {
+			const filterName = 'Test Designer';
+			setupTest(
+				<FilterActionRows
+					tmpFilter={{
+						actionTag: [{ tagName: filterName }]
+					}}
+					index={0}
+					compProps={compProps}
+				/>,
+				{}
+			);
+			expect(screen.getByText(filterName)).toBeVisible();
+		});
+
+		it('should reset the input value to empty after changing action', async () => {
+			const newCompProps = {
+				...compProps,
+				tempActions: [{}]
+			};
+			const filterName = 'Test Designer';
+			const { user } = setupTest(
+				<FilterActionRows
+					tmpFilter={{
+						actionTag: [{ tagName: filterName }]
+					}}
+					index={0}
+					compProps={newCompProps}
+				/>,
+				{}
+			);
+			expect(screen.getByText(filterName)).toBeVisible();
+
+			await user.click(screen.getByText('Tag with'));
+			await user.click(screen.getByText('Keep in Inbox'));
+			await user.click(screen.getByText('Keep in Inbox'));
+			await user.click(screen.getByText('Tag with'));
+
+			expect(screen.queryByText(filterName)).not.toBeInTheDocument();
+		});
+
+		it('should break if tempAction is empty and user is switching action', async () => {
+			const newCompProps = {
+				...compProps,
+				tempActions: []
+			};
+			const filterName = 'Test Designer';
+			const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+			const { user } = setupTest(
+				<FilterActionRows
+					tmpFilter={{
+						actionTag: [{ tagName: filterName }]
+					}}
+					index={0}
+					compProps={newCompProps}
+				/>,
+				{}
+			);
+			expect(screen.getByText(filterName)).toBeVisible();
+			await user.click(screen.getByText('Tag with'));
+			await user.click(screen.getByText('Keep in Inbox'));
+			expect(consoleSpy).toHaveBeenCalledWith(
+				`[Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'id')]`
+			);
+		});
+	});
 });

From dac97064b74835f26f5debee8278a37e12779c4e Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Tue, 17 Dec 2024 10:25:34 +0100
Subject: [PATCH 15/40] test: update test in filter-actions-rows.test.tsx

---
 .../parts/tests/filter-actions-rows.test.tsx  | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
index 40c3cca3d..baa4c5b42 100644
--- a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
@@ -32,19 +32,24 @@ describe('FilterActionsRows', () => {
 	});
 
 	it('adds a new filter condition when the add button is clicked', async () => {
+		const newCompProps = {
+			...compProps,
+			tempActions: [{ actionKeep: [{}] }]
+		};
 		const { user } = setupTest(
 			<FilterActionRows
 				tmpFilter={{
-					anything: [{ flagName: 'flagged' }]
+					actionKeep: [{}]
 				}}
 				index={0}
-				compProps={compProps}
+				compProps={newCompProps}
 			/>,
 			{}
 		);
 		await user.click(screen.getByTestId('icon: PlusOutline'));
 
 		expect(compProps.setTempActions).toHaveBeenCalledWith([
+			{ actionKeep: [{}] },
 			expect.objectContaining({
 				actionKeep: [{}],
 				actionStop: [{}]
@@ -132,7 +137,6 @@ describe('FilterActionsRows', () => {
 			);
 			expect(screen.queryByTestId('filter-action-row-contact-input')).not.toBeInTheDocument();
 		});
-
 		it('should not display Contact Input when dropdown option is different from "Tag With"', async () => {
 			setupTest(
 				<FilterActionRows
@@ -202,7 +206,6 @@ describe('FilterActionsRows', () => {
 			);
 			expect(screen.getByText(filterName)).toBeVisible();
 		});
-
 		it('should reset the input value to empty after changing action', async () => {
 			const newCompProps = {
 				...compProps,
@@ -228,8 +231,7 @@ describe('FilterActionsRows', () => {
 
 			expect(screen.queryByText(filterName)).not.toBeInTheDocument();
 		});
-
-		it('should break if tempAction is empty and user is switching action', async () => {
+		it.skip('should break if tempAction is empty and user is switching action', async () => {
 			const newCompProps = {
 				...compProps,
 				tempActions: []
@@ -249,10 +251,9 @@ describe('FilterActionsRows', () => {
 			);
 			expect(screen.getByText(filterName)).toBeVisible();
 			await user.click(screen.getByText('Tag with'));
-			await user.click(screen.getByText('Keep in Inbox'));
-			expect(consoleSpy).toHaveBeenCalledWith(
-				`[Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'id')]`
-			);
+			user.click(screen.getByText('Keep in Inbox')).catch((error) => {
+				expect(error).toBe('');
+			});
 		});
 	});
 });

From 5b3aee96089cfea8965d39a479ac47001c40ced8 Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Tue, 17 Dec 2024 10:31:39 +0100
Subject: [PATCH 16/40] test: create-filter-modal.test.tsx update test names to
 make them more clear

---
 .../settings/filters/parts/tests/create-filter-modal.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
index 319ae3062..ade440a94 100644
--- a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
+++ b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
@@ -18,7 +18,7 @@ import { generateStore } from '../../../../../tests/generators/store';
 import CreateFilterModal from '../create-filter-modal';
 
 describe('create-filter-modal', () => {
-	test('create filter add filter name and by default it will be deactive', async () => {
+	test('create filter add filter name and by default it will be inactive (in available filters)', async () => {
 		const closeModal = jest.fn();
 		const store = generateStore();
 
@@ -48,7 +48,7 @@ describe('create-filter-modal', () => {
 		expect(filterActiveChecked).toBeInTheDocument();
 	});
 
-	test('create button will be disable and enabled once filter name added', async () => {
+	test('create button will be disabled and enabled only once filter name is added', async () => {
 		const closeModal = jest.fn();
 		const store = generateStore();
 

From d355057bd91a9ac2297e5dc345a56fd6815f52d8 Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Tue, 17 Dec 2024 11:17:52 +0100
Subject: [PATCH 17/40] test: add specific test for "Active filter"

- the test is a bit weak but it's better than testing many things together
---
 .../parts/tests/create-filter-modal.test.tsx  | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
index ade440a94..dec6f81c6 100644
--- a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
+++ b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
@@ -73,6 +73,23 @@ describe('create-filter-modal', () => {
 		expect(createButton).toBeEnabled();
 	});
 
+	test('clicking "Active filter" should check the checkbox', async () => {
+		const store = generateStore();
+
+		const { user } = setupTest(<CreateFilterModal t={t} onClose={jest.fn()} />, {
+			store
+		});
+		const filterActiveUnChecked = within(screen.getByTestId('active-filter')).getByTestId(
+			'icon: Square'
+		);
+		await act(() => user.click(filterActiveUnChecked));
+
+		const filterActiveChecked = within(screen.getByTestId('active-filter')).getByTestId(
+			'icon: CheckmarkSquare'
+		);
+		expect(filterActiveChecked).toBeInTheDocument();
+	});
+
 	test('create filter add filter name and add condition', async () => {
 		const closeModal = jest.fn();
 		const store = generateStore();
@@ -86,8 +103,6 @@ describe('create-filter-modal', () => {
 		const name = faker.lorem.word();
 		const filterInputElement = within(filterName).getByRole('textbox');
 		await act(() => user.clear(filterInputElement));
-
-		// Insert the new filter name into the text input
 		await act(() => user.type(filterInputElement, name));
 
 		const filterActiveUnChecked = within(screen.getByTestId('active-filter')).getByTestId(

From 32b740c45167785a5cbd5527f57d51e26716c679 Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Tue, 17 Dec 2024 11:51:19 +0100
Subject: [PATCH 18/40] test: re-organize create-filter-modal.test.tsx

---
 .../parts/tests/create-filter-modal.test.tsx  | 100 +++++-------------
 1 file changed, 27 insertions(+), 73 deletions(-)

diff --git a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
index dec6f81c6..189608629 100644
--- a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
+++ b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
@@ -5,7 +5,6 @@
  */
 import React from 'react';
 
-import { faker } from '@faker-js/faker';
 import { act, screen, within } from '@testing-library/react';
 import { t } from '@zextras/carbonio-shell-ui';
 
@@ -18,111 +17,71 @@ import { generateStore } from '../../../../../tests/generators/store';
 import CreateFilterModal from '../create-filter-modal';
 
 describe('create-filter-modal', () => {
-	test('create filter add filter name and by default it will be inactive (in available filters)', async () => {
-		const closeModal = jest.fn();
+	test('create button is disabled when filter name is empty', async () => {
 		const store = generateStore();
 
-		const { user } = setupTest(<CreateFilterModal t={t} onClose={(): void => closeModal()} />, {
+		setupTest(<CreateFilterModal t={t} onClose={jest.fn()} />, {
 			store
 		});
 
-		expect(screen.getByTestId('filter-name')).toBeInTheDocument();
-		const filterName = screen.getByTestId('filter-name');
-		const name = faker.lorem.word();
-		const filterInputElement = within(filterName).getByRole('textbox');
-		await user.clear(filterInputElement);
-
-		// Insert the new filter name into the text input
-		await act(() => user.type(filterInputElement, name));
-
-		const filterActiveUnChecked = within(screen.getByTestId('active-filter')).getByTestId(
-			'icon: Square'
-		);
-		expect(filterActiveUnChecked).toBeInTheDocument();
-		await act(() => user.click(filterActiveUnChecked));
-
-		const filterActiveChecked = within(screen.getByTestId('active-filter')).getByTestId(
-			'icon: CheckmarkSquare'
-		);
-
-		expect(filterActiveChecked).toBeInTheDocument();
+		const createButton = screen.getByRole('button', {
+			name: /label\.create/i
+		});
+		expect(createButton).toBeDisabled();
 	});
-
-	test('create button will be disabled and enabled only once filter name is added', async () => {
-		const closeModal = jest.fn();
+	test('create button is enabled only when filter name is added', async () => {
 		const store = generateStore();
 
-		const { user } = setupTest(<CreateFilterModal t={t} onClose={(): void => closeModal()} />, {
+		const { user } = setupTest(<CreateFilterModal t={t} onClose={jest.fn()} />, {
 			store
 		});
+		const filterInputElement = screen.getByRole('textbox', {
+			name: 'settings.filter_name*'
+		});
+		await user.type(filterInputElement, 'My filter');
 
 		const createButton = screen.getByRole('button', {
 			name: /label\.create/i
 		});
-		expect(createButton).toBeDisabled();
-		expect(screen.getByTestId('filter-name')).toBeInTheDocument();
-		const filterName = screen.getByTestId('filter-name');
-		const name = faker.lorem.word();
-		const filterInputElement = within(filterName).getByRole('textbox');
-		await user.clear(filterInputElement);
-
-		// Insert the new filter name into the text input
-		await user.type(filterInputElement, name);
-
-		// filter name added so now create button should be enabled
 		expect(createButton).toBeEnabled();
 	});
 
-	test('clicking "Active filter" should check the checkbox', async () => {
+	test('"Active filter" is unchecked by default', async () => {
 		const store = generateStore();
 
-		const { user } = setupTest(<CreateFilterModal t={t} onClose={jest.fn()} />, {
+		setupTest(<CreateFilterModal t={t} onClose={jest.fn()} />, {
 			store
 		});
+
 		const filterActiveUnChecked = within(screen.getByTestId('active-filter')).getByTestId(
 			'icon: Square'
 		);
-		await act(() => user.click(filterActiveUnChecked));
-
-		const filterActiveChecked = within(screen.getByTestId('active-filter')).getByTestId(
-			'icon: CheckmarkSquare'
-		);
-		expect(filterActiveChecked).toBeInTheDocument();
+		expect(filterActiveUnChecked).toBeVisible();
 	});
-
-	test('create filter add filter name and add condition', async () => {
-		const closeModal = jest.fn();
+	test('clicking "Active filter" should check the checkbox', async () => {
 		const store = generateStore();
 
-		const { user } = setupTest(<CreateFilterModal t={t} onClose={(): void => closeModal()} />, {
+		const { user } = setupTest(<CreateFilterModal t={t} onClose={jest.fn()} />, {
 			store
 		});
-
-		expect(screen.getByTestId('filter-name')).toBeInTheDocument();
-		const filterName = screen.getByTestId('filter-name');
-		const name = faker.lorem.word();
-		const filterInputElement = within(filterName).getByRole('textbox');
-		await act(() => user.clear(filterInputElement));
-		await act(() => user.type(filterInputElement, name));
-
 		const filterActiveUnChecked = within(screen.getByTestId('active-filter')).getByTestId(
 			'icon: Square'
 		);
-		expect(filterActiveUnChecked).toBeInTheDocument();
 		await act(() => user.click(filterActiveUnChecked));
 
 		const filterActiveChecked = within(screen.getByTestId('active-filter')).getByTestId(
 			'icon: CheckmarkSquare'
 		);
-		expect(filterActiveChecked).toBeInTheDocument();
-		act(() => {
-			jest.advanceTimersByTime(5000);
-		});
+		expect(filterActiveChecked).toBeVisible();
+	});
 
-		const fieldLabel = screen.getByText(/settings\.field/i);
-		expect(fieldLabel).toBeInTheDocument();
+	test('Filter conditions should be visible', async () => {
+		const store = generateStore();
 
-		await act(() => user.click(fieldLabel));
+		const { user } = setupTest(<CreateFilterModal t={t} onClose={jest.fn()} />, {
+			store
+		});
+		await user.click(screen.getByText(/settings\.field/i));
 
 		const fieldAnyOption = within(screen.getByTestId('dropdown-popper-list')).getByText(
 			/label\.any/i
@@ -132,14 +91,9 @@ describe('create-filter-modal', () => {
 		);
 		expect(fieldAnyOption).toBeInTheDocument();
 		expect(fieldAllOption).toBeInTheDocument();
-
-		const createButton = screen.getByRole('button', {
-			name: /label\.create/i
-		});
-		expect(createButton).toBeEnabled();
 	});
 
-	test('junk folder is selectable', async () => {
+	test('Move into folder action allows selecting junk folder', async () => {
 		const closeModal = jest.fn();
 		const store = generateStore();
 		populateFoldersStore();

From 35129a3ff74db5a57bbc1b699e6c0e06ea16201c Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Tue, 17 Dec 2024 12:23:50 +0100
Subject: [PATCH 19/40] test: add test to check API call made to mailbox

---
 .../parts/tests/create-filter-modal.test.tsx  | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
index 189608629..df9fe0137 100644
--- a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
+++ b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
@@ -8,6 +8,7 @@ import React from 'react';
 import { act, screen, within } from '@testing-library/react';
 import { t } from '@zextras/carbonio-shell-ui';
 
+import { createSoapAPIInterceptor } from '../../../../../carbonio-ui-commons/test/mocks/network/msw/create-api-interceptor';
 import { populateFoldersStore } from '../../../../../carbonio-ui-commons/test/mocks/store/folders';
 import {
 	makeListItemsVisible,
@@ -17,6 +18,7 @@ import { generateStore } from '../../../../../tests/generators/store';
 import CreateFilterModal from '../create-filter-modal';
 
 describe('create-filter-modal', () => {
+	// TODO: these tests are not really helpful as they test the DS but not component logic
 	test('create button is disabled when filter name is empty', async () => {
 		const store = generateStore();
 
@@ -116,4 +118,38 @@ describe('create-filter-modal', () => {
 		});
 		expect(screen.getByText(/junk/i)).toBeVisible();
 	});
+
+	it('should call ModifyFiltersRule API when clicking create button', async () => {
+		const store = generateStore();
+
+		const modifyFilterRulesInterceptor = createSoapAPIInterceptor('ModifyFilterRules');
+		const { user } = setupTest(<CreateFilterModal t={t} onClose={jest.fn()} />, {
+			store
+		});
+		const filterInputElement = screen.getByRole('textbox', {
+			name: 'settings.filter_name*'
+		});
+		await user.type(filterInputElement, 'My filter');
+
+		const createButton = screen.getByRole('button', {
+			name: /label\.create/i
+		});
+		await user.click(createButton);
+		const request = await modifyFilterRulesInterceptor;
+		expect(request).toEqual({
+			_jsns: 'urn:zimbraMail',
+			filterRules: [
+				{
+					filterRule: [
+						{
+							active: false,
+							name: 'My filter',
+							filterActions: [{ actionKeep: [{}], actionStop: [{}] }],
+							filterTests: [{ condition: 'anyof' }]
+						}
+					]
+				}
+			]
+		});
+	});
 });

From fa118130186ddcd308bb01f93ccd4c350df8bbc0 Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Tue, 17 Dec 2024 13:04:57 +0100
Subject: [PATCH 20/40] test: add other API tests for
 create-filter-modal.test.tsx

---
 .../filters/parts/filter-action-rows.tsx      |  13 +-
 .../parts/new-filter-action-conditions.tsx    |   2 +-
 .../parts/tests/create-filter-modal.test.tsx  | 113 ++++++++++++++++++
 3 files changed, 116 insertions(+), 12 deletions(-)

diff --git a/src/views/settings/filters/parts/filter-action-rows.tsx b/src/views/settings/filters/parts/filter-action-rows.tsx
index a1910c98b..ca4416a88 100644
--- a/src/views/settings/filters/parts/filter-action-rows.tsx
+++ b/src/views/settings/filters/parts/filter-action-rows.tsx
@@ -5,19 +5,9 @@
  */
 import React, { FC, ReactElement, useCallback, useMemo, useState } from 'react';
 
-import {
-	Button,
-	Container,
-	IconButton,
-	Padding,
-	Row,
-	Text,
-	Tooltip,
-	getColor
-} from '@zextras/carbonio-design-system';
+import { Button, Container, Padding, Row, Text, Tooltip } from '@zextras/carbonio-design-system';
 import { filter, omit } from 'lodash';
 import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 
 import CustomSelect from './custom-select';
@@ -330,6 +320,7 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 			crossAlignment="center"
 			orientation="horizontal"
 			padding={{ top: 'small' }}
+			data-testid={'actions-panel'}
 		>
 			<Row>
 				<Row padding={{ right: 'small' }} minWidth="12.5rem">
diff --git a/src/views/settings/filters/parts/new-filter-action-conditions.tsx b/src/views/settings/filters/parts/new-filter-action-conditions.tsx
index a219ccc0c..f9456c1c8 100644
--- a/src/views/settings/filters/parts/new-filter-action-conditions.tsx
+++ b/src/views/settings/filters/parts/new-filter-action-conditions.tsx
@@ -42,7 +42,7 @@ const FilterActionConditions: FC<ComponentProps> = ({ compProps }): ReactElement
 				<Container padding={{ top: 'small' }} mainAlignment="flex-start">
 					{map(tempActions, (tempAction, index: number) => (
 						<FilterActionRows
-							key={tempAction.id}
+							key={`filter-action-row-${index}`}
 							index={index}
 							tmpFilter={tempAction}
 							compProps={compProps}
diff --git a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
index df9fe0137..27d1cb3b2 100644
--- a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
+++ b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
@@ -6,6 +6,7 @@
 import React from 'react';
 
 import { act, screen, within } from '@testing-library/react';
+import { UserEvent } from '@testing-library/user-event';
 import { t } from '@zextras/carbonio-shell-ui';
 
 import { createSoapAPIInterceptor } from '../../../../../carbonio-ui-commons/test/mocks/network/msw/create-api-interceptor';
@@ -17,6 +18,16 @@ import {
 import { generateStore } from '../../../../../tests/generators/store';
 import CreateFilterModal from '../create-filter-modal';
 
+const addAction = async (user: UserEvent): Promise<void> => {
+	await user.click(within(screen.getByTestId('actions-panel')).getByTestId('icon: PlusOutline'));
+};
+const fillFilterName = async (user: UserEvent, filterName: string): Promise<void> => {
+	const filterInputElement = screen.getByRole('textbox', {
+		name: 'settings.filter_name*'
+	});
+	await user.type(filterInputElement, filterName);
+};
+
 describe('create-filter-modal', () => {
 	// TODO: these tests are not really helpful as they test the DS but not component logic
 	test('create button is disabled when filter name is empty', async () => {
@@ -152,4 +163,106 @@ describe('create-filter-modal', () => {
 			]
 		});
 	});
+	describe('ModifyFilterRules API', () => {
+		test('create an "Active" filter', async () => {
+			const store = generateStore();
+
+			const modifyFilterRulesInterceptor = createSoapAPIInterceptor('ModifyFilterRules');
+			const { user } = setupTest(<CreateFilterModal t={t} onClose={jest.fn()} />, {
+				store
+			});
+			const filterInputElement = screen.getByRole('textbox', {
+				name: 'settings.filter_name*'
+			});
+			await user.type(filterInputElement, 'My filter');
+			const filterActiveUnChecked = within(screen.getByTestId('active-filter')).getByTestId(
+				'icon: Square'
+			);
+			await act(() => user.click(filterActiveUnChecked));
+
+			const createButton = screen.getByRole('button', {
+				name: /label\.create/i
+			});
+			await user.click(createButton);
+			const request = await modifyFilterRulesInterceptor;
+			expect(request).toEqual({
+				_jsns: 'urn:zimbraMail',
+				filterRules: [
+					{
+						filterRule: [expect.objectContaining({ active: true })]
+					}
+				]
+			});
+		});
+		test('create a filter with Mark As action does not work if mark as flag (read, flagged) is untouched', async () => {
+			const store = generateStore();
+
+			const modifyFilterRulesInterceptor = createSoapAPIInterceptor('ModifyFilterRules');
+			const { user } = setupTest(<CreateFilterModal t={t} onClose={jest.fn()} />, {
+				store
+			});
+			await fillFilterName(user, 'any name');
+			const keepInInboxAction = screen.getByText('Keep in Inbox');
+			await user.click(keepInInboxAction);
+			await user.click(screen.getByText('Mark as'));
+
+			const createButton = screen.getByRole('button', {
+				name: /label\.create/i
+			});
+			await user.click(createButton);
+
+			const request = await modifyFilterRulesInterceptor;
+			expect(request).toEqual({
+				_jsns: 'urn:zimbraMail',
+				filterRules: [
+					{
+						filterRule: [
+							expect.objectContaining({ filterActions: [{ actionKeep: [{}], actionStop: [{}] }] })
+						]
+					}
+				]
+			});
+		});
+		test('create a filter with Mark As action Flagged', async () => {
+			const store = generateStore();
+
+			const modifyFilterRulesInterceptor = createSoapAPIInterceptor('ModifyFilterRules');
+			const { user } = setupTest(<CreateFilterModal t={t} onClose={jest.fn()} />, {
+				store
+			});
+			await fillFilterName(user, 'any name');
+			await user.click(screen.getByText('Keep in Inbox'));
+			await user.click(screen.getByText('Mark as'));
+			await user.click(screen.getByText('Read'));
+			await user.click(screen.getByText('Flagged'));
+
+			const createButton = screen.getByRole('button', {
+				name: /label\.create/i
+			});
+			await user.click(createButton);
+
+			const request = await modifyFilterRulesInterceptor;
+			expect(request).toEqual({
+				_jsns: 'urn:zimbraMail',
+				filterRules: [
+					{
+						filterRule: [
+							expect.objectContaining({
+								filterActions: [
+									{
+										actionFlag: [
+											{
+												flagName: 'flagged'
+											}
+										],
+										actionStop: [{}]
+									}
+								]
+							})
+						]
+					}
+				]
+			});
+		});
+	});
 });

From e3473f78411b3f1534566ed21748b6d20ac3b972 Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Tue, 17 Dec 2024 14:09:54 +0100
Subject: [PATCH 21/40] test: add test for redirect-to and mark-as

---
 .../parts/tests/create-filter-modal.test.tsx  | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
index 27d1cb3b2..f4e885612 100644
--- a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
+++ b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
@@ -264,5 +264,59 @@ describe('create-filter-modal', () => {
 				]
 			});
 		});
+		test('create a filter with Mark As and Redirect To actions', async () => {
+			const store = generateStore();
+
+			const modifyFilterRulesInterceptor = createSoapAPIInterceptor('ModifyFilterRules');
+			const { user } = setupTest(<CreateFilterModal t={t} onClose={jest.fn()} />, {
+				store
+			});
+			await fillFilterName(user, 'any name');
+
+			await user.click(screen.getByText('Keep in Inbox'));
+			await user.click(screen.getByText('Mark as'));
+			await user.click(screen.getByText('Read'));
+			await user.click(screen.getByText('Flagged'));
+
+			await addAction(user);
+			await user.click(screen.getByText('Keep in Inbox'));
+			await user.click(screen.getByText('Redirect to address'));
+			const redirectToAddressInput = await screen.findByTestId('filter-action-row-contact-input');
+			await user.type(redirectToAddressInput, 'redirectTo@email.com');
+			await user.type(redirectToAddressInput, '[Enter]');
+
+			const createButton = screen.getByRole('button', {
+				name: /label\.create/i
+			});
+			await user.click(createButton);
+
+			const request = await modifyFilterRulesInterceptor;
+			expect(request).toEqual({
+				_jsns: 'urn:zimbraMail',
+				filterRules: [
+					{
+						filterRule: [
+							expect.objectContaining({
+								filterActions: [
+									{
+										actionFlag: [
+											{
+												flagName: 'flagged'
+											}
+										],
+										actionRedirect: [
+											{
+												a: 'redirectTo@email.com'
+											}
+										],
+										actionStop: [{}]
+									}
+								]
+							})
+						]
+					}
+				]
+			});
+		});
 	});
 });

From 09bd3dbbf2604e85701986ba7ea5faa8caff98a8 Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Tue, 17 Dec 2024 14:23:57 +0100
Subject: [PATCH 22/40] test: add test for filter with from condition

---
 .../filters/parts/filter-test-rows.tsx        |  9 ++--
 .../parts/tests/create-filter-modal.test.tsx  | 54 +++++++++++++++++++
 2 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/src/views/settings/filters/parts/filter-test-rows.tsx b/src/views/settings/filters/parts/filter-test-rows.tsx
index f5d06cbe3..fc4a23431 100644
--- a/src/views/settings/filters/parts/filter-test-rows.tsx
+++ b/src/views/settings/filters/parts/filter-test-rows.tsx
@@ -5,8 +5,7 @@
  */
 import React, { FC, ReactElement, useMemo, useCallback } from 'react';
 
-import { Button, Container, Padding, Tooltip, getColor } from '@zextras/carbonio-design-system';
-import styled from 'styled-components';
+import { Button, Container, Padding, Tooltip } from '@zextras/carbonio-design-system';
 
 import DefaultCondition from './create-filters-conditions/default';
 import CustomSelect from './custom-select';
@@ -87,7 +86,11 @@ const FilterTestRows: FC<FilterTestRowProps> = ({ tmpFilter, index, compProps })
 
 			{tmpFilter.comp}
 
-			<Container orientation="horizontal" mainAlignment="flex-end">
+			<Container
+				orientation="horizontal"
+				mainAlignment="flex-end"
+				data-testid={'filter-conditions'}
+			>
 				<Tooltip label={t('settings.add_condition', 'Add new condition')} placement="top">
 					<Button icon="PlusOutline" onClick={addFilterCondition} color="primary" type="outlined" />
 				</Tooltip>
diff --git a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
index f4e885612..103961b00 100644
--- a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
+++ b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
@@ -21,6 +21,11 @@ import CreateFilterModal from '../create-filter-modal';
 const addAction = async (user: UserEvent): Promise<void> => {
 	await user.click(within(screen.getByTestId('actions-panel')).getByTestId('icon: PlusOutline'));
 };
+const addCondition = async (user: UserEvent): Promise<void> => {
+	await user.click(
+		within(screen.getByTestId('filter-conditions')).getByTestId('icon: PlusOutline')
+	);
+};
 const fillFilterName = async (user: UserEvent, filterName: string): Promise<void> => {
 	const filterInputElement = screen.getByRole('textbox', {
 		name: 'settings.filter_name*'
@@ -318,5 +323,54 @@ describe('create-filter-modal', () => {
 				]
 			});
 		});
+		test('create a filter with "from" condition', async () => {
+			const store = generateStore();
+
+			const modifyFilterRulesInterceptor = createSoapAPIInterceptor('ModifyFilterRules');
+			const { user } = setupTest(<CreateFilterModal t={t} onClose={jest.fn()} />, {
+				store
+			});
+			await fillFilterName(user, 'any name');
+
+			await user.click(screen.getByText('label.subject'));
+			await user.click(screen.getByText('label.from'));
+			await user.type(
+				screen.getByRole('textbox', {
+					name: 'settings.keyword'
+				}),
+				'anyemail'
+			);
+
+			const createButton = screen.getByRole('button', {
+				name: /label\.create/i
+			});
+			await user.click(createButton);
+
+			const request = await modifyFilterRulesInterceptor;
+			expect(request).toEqual({
+				_jsns: 'urn:zimbraMail',
+				filterRules: [
+					{
+						filterRule: [
+							expect.objectContaining({
+								filterTests: [
+									{
+										addressTest: [
+											{
+												header: 'from',
+												part: 'all',
+												stringComparison: 'contains',
+												value: 'anyemail'
+											}
+										],
+										condition: 'anyof'
+									}
+								]
+							})
+						]
+					}
+				]
+			});
+		});
 	});
 });

From 66624a0011bb96363863fb663efebec86187306a Mon Sep 17 00:00:00 2001
From: FrancescoGottardi <gottardifrancesco92@gmail.com>
Date: Tue, 17 Dec 2024 16:15:59 +0100
Subject: [PATCH 23/40] WIP: create filter modal and inner components tests

---
 .../filters/parts/create-filter-modal.tsx     |   4 +-
 .../parts/create-outgoing-filter-modal.tsx    |   4 +-
 ...test-rows.tsx => filter-condition-row.tsx} |  16 +-
 ...on-row.tsx => filter-conditions-panel.tsx} |  14 +-
 .../modify-filter/modify-filter-modal.tsx     |   4 +-
 .../modify-outgoing-filter-modal.tsx          |   4 +-
 .../parts/tests/create-filter-modal.test.tsx  | 194 ++++++++++++++++++
 .../parts/tests/filter-condition-row.test.tsx |  54 +++++
 .../tests/filter-conditions-panel.test.tsx    |  34 +++
 9 files changed, 306 insertions(+), 22 deletions(-)
 rename src/views/settings/filters/parts/{filter-test-rows.tsx => filter-condition-row.tsx} (91%)
 rename src/views/settings/filters/parts/{filter-test-condition-row.tsx => filter-conditions-panel.tsx} (86%)
 create mode 100644 src/views/settings/filters/parts/tests/filter-condition-row.test.tsx
 create mode 100644 src/views/settings/filters/parts/tests/filter-conditions-panel.test.tsx

diff --git a/src/views/settings/filters/parts/create-filter-modal.tsx b/src/views/settings/filters/parts/create-filter-modal.tsx
index 821e9a622..cdc68dbee 100644
--- a/src/views/settings/filters/parts/create-filter-modal.tsx
+++ b/src/views/settings/filters/parts/create-filter-modal.tsx
@@ -14,7 +14,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { CreateFilterContext } from './create-filter-context';
 import ModalFooter from './create-filter-modal-footer';
 import DefaultCondition from './create-filters-conditions/default';
-import FilterTestConditionRow from './filter-test-condition-row';
+import FilterConditionsPanel from './filter-conditions-panel';
 import FilterActionConditions from './new-filter-action-conditions';
 import { getButtonInfo } from './utils';
 import ModalHeader from '../../../../carbonio-ui-commons/components/modals/modal-header';
@@ -196,7 +196,7 @@ const CreateFilterModal: FC<ComponentProps> = ({
 					maxWidth="100%"
 					width="100%"
 				>
-					<FilterTestConditionRow compProps={filterTestConditionRowProps} />
+					<FilterConditionsPanel compProps={filterTestConditionRowProps} />
 					<Padding top="medium" />
 					<Divider />
 					<FilterActionConditions compProps={filterActionProps} />
diff --git a/src/views/settings/filters/parts/create-outgoing-filter-modal.tsx b/src/views/settings/filters/parts/create-outgoing-filter-modal.tsx
index 4d90e0cce..9ce029a88 100644
--- a/src/views/settings/filters/parts/create-outgoing-filter-modal.tsx
+++ b/src/views/settings/filters/parts/create-outgoing-filter-modal.tsx
@@ -13,7 +13,7 @@ import { map, omit, reduce } from 'lodash';
 import { CreateFilterContext } from './create-filter-context';
 import ModalFooter from './create-filter-modal-footer';
 import DefaultCondition from './create-filters-conditions/default';
-import FilterTestConditionRow from './filter-test-condition-row';
+import FilterConditionsPanel from './filter-conditions-panel';
 import FilterActionConditions from './new-filter-action-conditions';
 import { getButtonInfo } from './utils';
 import ModalHeader from '../../../../carbonio-ui-commons/components/modals/modal-header';
@@ -203,7 +203,7 @@ const CreateOutgoingFilterModal: FC<ComponentProps> = ({
 					maxWidth="100%"
 					width="100%"
 				>
-					<FilterTestConditionRow compProps={filterTestConditionRowProps} />
+					<FilterConditionsPanel compProps={filterTestConditionRowProps} />
 					<Padding top="medium" />
 					<Divider />
 					<FilterActionConditions compProps={filterActionProps} />
diff --git a/src/views/settings/filters/parts/filter-test-rows.tsx b/src/views/settings/filters/parts/filter-condition-row.tsx
similarity index 91%
rename from src/views/settings/filters/parts/filter-test-rows.tsx
rename to src/views/settings/filters/parts/filter-condition-row.tsx
index fc4a23431..ca50fb59a 100644
--- a/src/views/settings/filters/parts/filter-test-rows.tsx
+++ b/src/views/settings/filters/parts/filter-condition-row.tsx
@@ -12,7 +12,7 @@ import CustomSelect from './custom-select';
 import { getRowFunc } from './get-row';
 import { getStatusOptions, findDefaultValue } from './utils';
 
-type FilterTestRowProps = {
+type FilterConditionRowrops = {
 	tmpFilter: {
 		filterActions: Array<any>;
 		active: boolean;
@@ -27,7 +27,11 @@ type FilterTestRowProps = {
 	compProps: any;
 };
 
-const FilterTestRows: FC<FilterTestRowProps> = ({ tmpFilter, index, compProps }): ReactElement => {
+const FilterConditionRow: FC<FilterConditionRowrops> = ({
+	tmpFilter,
+	index,
+	compProps
+}): ReactElement => {
 	const { t, newFilters, setNewFilters, condition, activeFilter, filterName } = compProps;
 	const statusOptions = useMemo(() => getStatusOptions(t), [t]);
 
@@ -86,11 +90,7 @@ const FilterTestRows: FC<FilterTestRowProps> = ({ tmpFilter, index, compProps })
 
 			{tmpFilter.comp}
 
-			<Container
-				orientation="horizontal"
-				mainAlignment="flex-end"
-				data-testid={'filter-conditions'}
-			>
+			<Container orientation="horizontal" mainAlignment="flex-end">
 				<Tooltip label={t('settings.add_condition', 'Add new condition')} placement="top">
 					<Button icon="PlusOutline" onClick={addFilterCondition} color="primary" type="outlined" />
 				</Tooltip>
@@ -110,4 +110,4 @@ const FilterTestRows: FC<FilterTestRowProps> = ({ tmpFilter, index, compProps })
 	);
 };
 
-export default FilterTestRows;
+export default FilterConditionRow;
diff --git a/src/views/settings/filters/parts/filter-test-condition-row.tsx b/src/views/settings/filters/parts/filter-conditions-panel.tsx
similarity index 86%
rename from src/views/settings/filters/parts/filter-test-condition-row.tsx
rename to src/views/settings/filters/parts/filter-conditions-panel.tsx
index e4c4a3108..9d585d34a 100644
--- a/src/views/settings/filters/parts/filter-test-condition-row.tsx
+++ b/src/views/settings/filters/parts/filter-conditions-panel.tsx
@@ -4,16 +4,18 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import React, { FC, ReactElement, useMemo } from 'react';
+
 import { Container, Padding, Row, Text } from '@zextras/carbonio-design-system';
 import { map } from 'lodash';
-import Heading from '../../components/settings-heading';
+
 import CustomSelect from './custom-select';
+import FilterConditionRow from './filter-condition-row';
 import { getFieldOptions, findDefaultValue } from './utils';
-import FilterTestRows from './filter-test-rows';
+import Heading from '../../components/settings-heading';
 
 type FilterTestConditionRowProps = any;
 
-const FilterTestConditionRow: FC<FilterTestConditionRowProps> = ({ compProps }): ReactElement => {
+const FilterConditionsPanel: FC<FilterTestConditionRowProps> = ({ compProps }): ReactElement => {
 	const { t, newFilters, setCondition, selectedFilter } = compProps;
 	const fieldOptions = useMemo(() => getFieldOptions(t), [t]);
 
@@ -54,9 +56,9 @@ const FilterTestConditionRow: FC<FilterTestConditionRowProps> = ({ compProps }):
 			</Container>
 
 			<Padding top="small" />
-			<Container padding={{ top: 'small' }}>
+			<Container padding={{ top: 'small' }} data-testid={'filter-conditions'}>
 				{map(newFilters, (tmpFilter, index) => (
-					<FilterTestRows
+					<FilterConditionRow
 						key={`tmp-filter-${tmpFilter.key}-${index}`}
 						index={index}
 						tmpFilter={tmpFilter}
@@ -67,4 +69,4 @@ const FilterTestConditionRow: FC<FilterTestConditionRowProps> = ({ compProps }):
 		</Container>
 	);
 };
-export default FilterTestConditionRow;
+export default FilterConditionsPanel;
diff --git a/src/views/settings/filters/parts/modify-filter/modify-filter-modal.tsx b/src/views/settings/filters/parts/modify-filter/modify-filter-modal.tsx
index 2980622ee..d67bb50ae 100644
--- a/src/views/settings/filters/parts/modify-filter/modify-filter-modal.tsx
+++ b/src/views/settings/filters/parts/modify-filter/modify-filter-modal.tsx
@@ -27,7 +27,7 @@ import { capitalise } from '../../../../sidebar/utils';
 import { CreateFilterContext } from '../create-filter-context';
 import ModalFooter from '../create-filter-modal-footer';
 import DefaultCondition from '../create-filters-conditions/default';
-import FilterTestConditionRow from '../filter-test-condition-row';
+import FilterConditionsPanel from '../filter-conditions-panel';
 import { findRowKey, getTestComponent } from '../get-test-component';
 import FilterActionConditions from '../new-filter-action-conditions';
 import { getButtonInfo } from '../utils';
@@ -352,7 +352,7 @@ const ModifyFilterModal: FC<ComponentProps> = ({
 					maxWidth="100%"
 					width="100%"
 				>
-					<FilterTestConditionRow compProps={filterTestConditionRowProps} />
+					<FilterConditionsPanel compProps={filterTestConditionRowProps} />
 					<Padding top="medium" />
 					<Divider />
 					<FilterActionConditions compProps={filterActionProps} />
diff --git a/src/views/settings/filters/parts/modify-filter/modify-outgoing-filter-modal.tsx b/src/views/settings/filters/parts/modify-filter/modify-outgoing-filter-modal.tsx
index 23481208a..8d712bc3c 100644
--- a/src/views/settings/filters/parts/modify-filter/modify-outgoing-filter-modal.tsx
+++ b/src/views/settings/filters/parts/modify-filter/modify-outgoing-filter-modal.tsx
@@ -27,7 +27,7 @@ import { capitalise } from '../../../../sidebar/utils';
 import { CreateFilterContext } from '../create-filter-context';
 import ModalFooter from '../create-filter-modal-footer';
 import DefaultCondition from '../create-filters-conditions/default';
-import FilterTestConditionRow from '../filter-test-condition-row';
+import FilterConditionsPanel from '../filter-conditions-panel';
 import { findRowKey, getTestComponent } from '../get-test-component';
 import FilterActionConditions from '../new-filter-action-conditions';
 import { getButtonInfo } from '../utils';
@@ -350,7 +350,7 @@ const ModifyOutgoingFilterModal: FC<ComponentProps> = ({
 					maxWidth="100%"
 					width="100%"
 				>
-					<FilterTestConditionRow compProps={filterTestConditionRowProps} />
+					<FilterConditionsPanel compProps={filterTestConditionRowProps} />
 					<Padding top="medium" />
 					<Divider />
 					<FilterActionConditions compProps={filterActionProps} />
diff --git a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
index 103961b00..27394b5df 100644
--- a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
+++ b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
@@ -372,5 +372,199 @@ describe('create-filter-modal', () => {
 				]
 			});
 		});
+
+		test('create a filter with multiple "from" condition', async () => {
+			const store = generateStore();
+
+			const modifyFilterRulesInterceptor = createSoapAPIInterceptor('ModifyFilterRules');
+			const { user } = setupTest(<CreateFilterModal t={t} onClose={jest.fn()} />, {
+				store
+			});
+			await fillFilterName(user, 'any name');
+
+			await user.click(screen.getByText('label.subject'));
+			await user.click(screen.getByText('label.from'));
+			await user.type(
+				screen.getByRole('textbox', {
+					name: 'settings.keyword'
+				}),
+				'anyemail'
+			);
+			await addCondition(user);
+			await user.click(screen.getByText('label.subject'));
+			await user.click(within(screen.getByTestId('dropdown-popper-list')).getByText('label.from'));
+			await user.type(
+				screen.getAllByRole('textbox', {
+					name: 'settings.keyword'
+				})[1],
+				'anotheremail'
+			);
+			await user.click(
+				screen.getByRole('button', {
+					name: /label\.create/i
+				})
+			);
+
+			const request = await modifyFilterRulesInterceptor;
+			expect(request).toEqual({
+				_jsns: 'urn:zimbraMail',
+				filterRules: [
+					{
+						filterRule: [
+							expect.objectContaining({
+								filterTests: [
+									{
+										addressTest: [
+											{
+												header: 'from',
+												part: 'all',
+												stringComparison: 'contains',
+												value: 'anyemail'
+											},
+											{
+												header: 'from',
+												part: 'all',
+												stringComparison: 'contains',
+												value: 'anotheremail'
+											}
+										],
+										condition: 'anyof'
+									}
+								]
+							})
+						]
+					}
+				]
+			});
+		});
+
+		test('create a filter with multiple different condition', async () => {
+			const store = generateStore();
+
+			const modifyFilterRulesInterceptor = createSoapAPIInterceptor('ModifyFilterRules');
+			const { user } = setupTest(<CreateFilterModal t={t} onClose={jest.fn()} />, {
+				store
+			});
+			await fillFilterName(user, 'any name');
+
+			await user.click(screen.getByText('label.subject'));
+			await user.click(screen.getByText('label.from'));
+			await user.type(
+				screen.getByRole('textbox', {
+					name: 'settings.keyword'
+				}),
+				'anyemail'
+			);
+			await addCondition(user);
+
+			await user.type(
+				screen.getAllByRole('textbox', {
+					name: 'settings.keyword'
+				})[1],
+				'anothervalue'
+			);
+
+			await user.click(
+				screen.getByRole('button', {
+					name: /label\.create/i
+				})
+			);
+
+			const request = await modifyFilterRulesInterceptor;
+			expect(request).toEqual({
+				_jsns: 'urn:zimbraMail',
+				filterRules: [
+					{
+						filterRule: [
+							expect.objectContaining({
+								filterTests: [
+									{
+										addressTest: [
+											{
+												header: 'from',
+												part: 'all',
+												stringComparison: 'contains',
+												value: 'anyemail'
+											}
+										],
+										headerTest: [
+											{
+												header: 'subject',
+												stringComparison: 'contains',
+												value: 'anothervalue'
+											}
+										],
+										condition: 'anyof'
+									}
+								]
+							})
+						]
+					}
+				]
+			});
+		});
+
+		test('removing a filter should call the api without the removed one', async () => {
+			const store = generateStore();
+
+			const modifyFilterRulesInterceptor = createSoapAPIInterceptor('ModifyFilterRules');
+			const { user } = setupTest(<CreateFilterModal t={t} onClose={jest.fn()} />, {
+				store
+			});
+			await fillFilterName(user, 'any name');
+
+			await user.click(screen.getByText('label.subject'));
+			await user.click(screen.getByText('label.from'));
+			await user.type(
+				screen.getByRole('textbox', {
+					name: 'settings.keyword'
+				}),
+				'anyemail'
+			);
+			await addCondition(user);
+
+			await user.type(
+				screen.getAllByRole('textbox', {
+					name: 'settings.keyword'
+				})[1],
+				'anothervalue'
+			);
+
+			await user.click(
+				within(screen.getByTestId('filter-conditions')).getAllByTestId('icon: MinusOutline')[1]
+			);
+
+			await user.click(
+				screen.getByRole('button', {
+					name: /label\.create/i
+				})
+			);
+
+			const request = await modifyFilterRulesInterceptor;
+			expect(request).toEqual({
+				_jsns: 'urn:zimbraMail',
+				filterRules: [
+					{
+						filterRule: [
+							expect.objectContaining({
+								filterTests: [
+									{
+										addressTest: [
+											{
+												header: 'from',
+												part: 'all',
+												stringComparison: 'contains',
+												value: 'anyemail'
+											}
+										],
+										condition: 'anyof'
+									}
+								]
+							})
+						]
+					}
+				]
+			});
+		});
 	});
 });
diff --git a/src/views/settings/filters/parts/tests/filter-condition-row.test.tsx b/src/views/settings/filters/parts/tests/filter-condition-row.test.tsx
new file mode 100644
index 000000000..2caa63d18
--- /dev/null
+++ b/src/views/settings/filters/parts/tests/filter-condition-row.test.tsx
@@ -0,0 +1,54 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+
+import { setupTest } from '../../../../../carbonio-ui-commons/test/test-setup';
+import FilterConditionRow from '../filter-condition-row';
+
+describe('Filter Condition Row', () => {
+	const compProps = {
+		t: (key: string, value: string): string => value,
+		newFilters: [
+			{
+				active: false,
+				comp: <></>,
+				filterActions: [{ actionKeep: [{}], actionStop: [{}] }],
+				filterTests: [{}],
+				index: 0,
+				key: 'Subject',
+				label: 'Subject',
+				name: ''
+			}
+		],
+		setNewFilters: jest.fn(),
+		condition: 'anyof',
+		activeFilter: false,
+		filterName: ''
+	};
+	it('should render correctly', () => {
+		setupTest(
+			<FilterConditionRow
+				tmpFilter={{
+					active: false,
+					comp: <>render subject</>,
+					filterActions: [{ actionKeep: [{}], actionStop: [{}] }],
+					filterTests: [{}],
+					index: 0,
+					key: 'Subject',
+					label: 'Subject',
+					name: ''
+				}}
+				index={'0'}
+				compProps={compProps}
+			/>,
+			{}
+		);
+		expect(screen.getByText('render subject')).toBeVisible();
+	});
+});
diff --git a/src/views/settings/filters/parts/tests/filter-conditions-panel.test.tsx b/src/views/settings/filters/parts/tests/filter-conditions-panel.test.tsx
new file mode 100644
index 000000000..e9453a84d
--- /dev/null
+++ b/src/views/settings/filters/parts/tests/filter-conditions-panel.test.tsx
@@ -0,0 +1,34 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+
+import { setupTest } from '../../../../../carbonio-ui-commons/test/test-setup';
+import FilterConditionsPanel from '../filter-conditions-panel';
+
+describe('Filter Condition Panel', () => {
+	const compProps = {
+		t: (key: string, value: string): string => value,
+		newFilters: [],
+		setCondition: jest.fn(),
+		selectedFilter: { filterTests: [{ condition: '' }] }
+	};
+	it('should render correctly', () => {
+		setupTest(<FilterConditionsPanel compProps={compProps} />, {});
+		expect(screen.getByText('any')).toBeVisible();
+	});
+
+	it('should call setCondition on select option change', async () => {
+		const { user } = setupTest(<FilterConditionsPanel compProps={compProps} />, {});
+
+		await user.click(screen.getByText('any'));
+		await user.click(screen.getByText('all'));
+
+		expect(compProps.setCondition).toHaveBeenCalledWith('allof');
+	});
+});

From 5df5645409da46b2ce990a37e661f97c3225cd37 Mon Sep 17 00:00:00 2001
From: FrancescoGottardi <gottardifrancesco92@gmail.com>
Date: Tue, 17 Dec 2024 17:12:55 +0100
Subject: [PATCH 24/40] WIP: create filter modal and inner components tests

---
 .../parts/new-filter-action-conditions.tsx    | 30 ++++++++--------
 .../parts/tests/create-filter-modal.test.tsx  | 34 +++++++++++++++++++
 .../parts/tests/filter-actions-rows.test.tsx  | 30 ++++++++++++++++
 3 files changed, 78 insertions(+), 16 deletions(-)

diff --git a/src/views/settings/filters/parts/new-filter-action-conditions.tsx b/src/views/settings/filters/parts/new-filter-action-conditions.tsx
index f9456c1c8..f1daba382 100644
--- a/src/views/settings/filters/parts/new-filter-action-conditions.tsx
+++ b/src/views/settings/filters/parts/new-filter-action-conditions.tsx
@@ -35,23 +35,21 @@ const FilterActionConditions: FC<ComponentProps> = ({ compProps }): ReactElement
 	);
 
 	return (
-		<>
-			<Container padding={{ top: 'medium' }} crossAlignment="flex-start" mainAlignment="flex-start">
-				<Heading title={t('settings.actions', 'Actions')} size="medium" />
-				<Text>{t('settings.perform_following_action', 'Perform the following actions:')}</Text>
-				<Container padding={{ top: 'small' }} mainAlignment="flex-start">
-					{map(tempActions, (tempAction, index: number) => (
-						<FilterActionRows
-							key={`filter-action-row-${index}`}
-							index={index}
-							tmpFilter={tempAction}
-							compProps={compProps}
-							tagOptions={tagOptions}
-						/>
-					))}
-				</Container>
+		<Container padding={{ top: 'medium' }} crossAlignment="flex-start" mainAlignment="flex-start">
+			<Heading title={t('settings.actions', 'Actions')} size="medium" />
+			<Text>{t('settings.perform_following_action', 'Perform the following actions:')}</Text>
+			<Container padding={{ top: 'small' }} mainAlignment="flex-start">
+				{map(tempActions, (tempAction, index: number) => (
+					<FilterActionRows
+						key={`filter-action-row-${index}`}
+						index={index}
+						tmpFilter={tempAction}
+						compProps={compProps}
+						tagOptions={tagOptions}
+					/>
+				))}
 			</Container>
-		</>
+		</Container>
 	);
 };
 
diff --git a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
index 27394b5df..31c1a3e3b 100644
--- a/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
+++ b/src/views/settings/filters/parts/tests/create-filter-modal.test.tsx
@@ -566,5 +566,39 @@ describe('create-filter-modal', () => {
 				]
 			});
 		});
+
+		test('"Do not process additional filter" checbox should not send actionStop in checkbox if disabled', async () => {
+			const store = generateStore();
+
+			const modifyFilterRulesInterceptor = createSoapAPIInterceptor('ModifyFilterRules');
+			const { user } = setupTest(<CreateFilterModal t={t} onClose={jest.fn()} />, {
+				store
+			});
+
+			await fillFilterName(user, 'My Filter');
+			await user.click(screen.getByTestId('checkbox'));
+			await user.click(
+				screen.getByRole('button', {
+					name: /label\.create/i
+				})
+			);
+
+			const request = await modifyFilterRulesInterceptor;
+			expect(request).toEqual({
+				_jsns: 'urn:zimbraMail',
+				filterRules: [
+					{
+						filterRule: [
+							{
+								active: false,
+								name: 'My Filter',
+								filterActions: [expect.not.objectContaining({ actionStop: [{}] })],
+								filterTests: [{ condition: 'anyof' }]
+							}
+						]
+					}
+				]
+			});
+		});
 	});
 });
diff --git a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
index baa4c5b42..f208ede10 100644
--- a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
@@ -189,6 +189,36 @@ describe('FilterActionsRows', () => {
 				expect.objectContaining({ actionRedirect: [{ a: 'valid@email.it' }] })
 			]);
 		});
+
+		it('should call onChange with empty address after clearing input', async () => {
+			const mockSetActions = jest.fn();
+			const mockCompProps = {
+				t: jest.fn(),
+				isIncoming: true,
+				setTempActions: mockSetActions,
+				tempActions: [],
+				zimbraFeatureMailForwardingInFiltersEnabled: 'TRUE' as const
+			};
+			const { user } = setupTest(
+				<FilterActionRows
+					tmpFilter={{
+						actionRedirect: [{ flagName: 'flagged' }]
+					}}
+					index={0}
+					compProps={mockCompProps}
+				/>,
+				{}
+			);
+			const redirectToAddressInput = await screen.findByTestId('filter-action-row-contact-input');
+			await user.type(redirectToAddressInput, 'valid@email.it');
+			await user.type(redirectToAddressInput, '[Enter]');
+			const chipRemoveIcon = within(redirectToAddressInput).getByTestId('icon: Close');
+			await user.click(chipRemoveIcon);
+
+			expect(mockSetActions).toHaveBeenCalledWith([
+				expect.objectContaining({ actionRedirect: [{ a: '' }] })
+			]);
+		});
 	});
 
 	describe('Tag With', () => {

From 485e97967c84edc1e0644c5765d03b57b0bf6376 Mon Sep 17 00:00:00 2001
From: FrancescoGottardi <gottardifrancesco92@gmail.com>
Date: Tue, 17 Dec 2024 18:05:05 +0100
Subject: [PATCH 25/40] FIX: filter tag add the chip with the correct color

---
 .../filters/parts/filter-action-rows.tsx      | 10 +-----
 .../filters/parts/filter-actions/show-tag.tsx | 23 ++++++------
 .../filter-actions/move-to-folder.test.tsx    | 35 +++++++++++++++++--
 .../tests/filter-actions/show-tag.test.tsx    | 28 +++++++++++++--
 4 files changed, 70 insertions(+), 26 deletions(-)

diff --git a/src/views/settings/filters/parts/filter-action-rows.tsx b/src/views/settings/filters/parts/filter-action-rows.tsx
index ca4416a88..afccdd373 100644
--- a/src/views/settings/filters/parts/filter-action-rows.tsx
+++ b/src/views/settings/filters/parts/filter-action-rows.tsx
@@ -16,7 +16,6 @@ import { MovetoFolder } from './filter-actions/move-to-folder';
 import { RedirectTo } from './filter-actions/redirect-to';
 import { ShowTag } from './filter-actions/show-tag';
 import { getActionOptions, getMarkAsOptions } from './utils';
-import { ZIMBRA_STANDARD_COLORS } from '../../../../carbonio-ui-commons/constants';
 import { CONTACT_TYPES } from '../../../../carbonio-ui-commons/integrations/constants';
 import { ContactInputItem } from '../../../../carbonio-ui-commons/integrations/types';
 import { Folder } from '../../../../carbonio-ui-commons/types/folder';
@@ -25,10 +24,6 @@ import { Folder } from '../../../../carbonio-ui-commons/types/folder';
 type Tag = {
 	label: string;
 	customComponent?: React.ReactNode;
-	hasAvatar: boolean;
-	avatarIcon: 'Tag';
-	background: 'gray2';
-	avatarBackground: string;
 	color?: number;
 };
 
@@ -145,10 +140,7 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 						? [
 								{
 									label: `${tmpFilter[action][0].tagName}`,
-									hasAvatar: true,
-									avatarIcon: 'Tag',
-									background: 'gray2',
-									avatarBackground: ZIMBRA_STANDARD_COLORS[chipBg?.color]?.hex
+									color: chipBg.color
 								}
 							]
 						: []
diff --git a/src/views/settings/filters/parts/filter-actions/show-tag.tsx b/src/views/settings/filters/parts/filter-actions/show-tag.tsx
index fb3b88901..629eb6c6a 100644
--- a/src/views/settings/filters/parts/filter-actions/show-tag.tsx
+++ b/src/views/settings/filters/parts/filter-actions/show-tag.tsx
@@ -13,10 +13,6 @@ import { ZIMBRA_STANDARD_COLORS } from '../../../../../carbonio-ui-commons/const
 type Tag = {
 	label: string;
 	customComponent?: React.ReactNode;
-	hasAvatar: boolean;
-	avatarIcon: 'Tag';
-	background: 'gray2';
-	avatarBackground: string;
 	color?: number;
 };
 
@@ -32,7 +28,10 @@ export const ShowTag = ({ value, tagOptions, onTagChange }: ShowTagProps): React
 	const tagChipInput = value.map(
 		(tag): ChipItem<Tag> => ({
 			label: tag.label,
-			value: tag
+			value: tag,
+			avatarBackground: ZIMBRA_STANDARD_COLORS[tag.color ?? 0].hex,
+			hasAvatar: true,
+			avatarIcon: 'Tag'
 		})
 	);
 
@@ -44,20 +43,18 @@ export const ShowTag = ({ value, tagOptions, onTagChange }: ShowTagProps): React
 		} => ({
 			id: tag.label,
 			label: tag.label,
-			value: tag
+			value: tag,
+			customComponent: tag.customComponent
 		})
 	);
 	const tagChipOnAdd = useCallback((tagValue: unknown): ChipItem<Tag> => {
 		const tag = tagValue as Tag;
 		return {
 			label: tag.label,
-			value: {
-				label: tag.label,
-				hasAvatar: true,
-				avatarIcon: 'Tag',
-				background: 'gray2',
-				avatarBackground: ZIMBRA_STANDARD_COLORS[tag.color ?? 0].hex
-			}
+			value: tag,
+			avatarBackground: ZIMBRA_STANDARD_COLORS[tag.color ?? 0].hex,
+			hasAvatar: true,
+			avatarIcon: 'Tag'
 		};
 	}, []);
 
diff --git a/src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx b/src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx
index a90254ba2..29cb5a52d 100644
--- a/src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions/move-to-folder.test.tsx
@@ -19,7 +19,7 @@ import { generateStore } from '../../../../../../tests/generators/store';
 import { MovetoFolder } from '../../filter-actions/move-to-folder';
 
 describe('Move to Folder', () => {
-	it('it should render initial folder destination in input', async () => {
+	it('should render initial folder destination in input', async () => {
 		const store = generateStore();
 
 		setupTest(
@@ -36,7 +36,7 @@ describe('Move to Folder', () => {
 		expect(input).toHaveValue('test path');
 	});
 
-	it('it should return selected destination on confirm', async () => {
+	it('should return selected destination on confirm', async () => {
 		const store = generateStore();
 		const folder = generateFolder({
 			id: '100',
@@ -72,4 +72,35 @@ describe('Move to Folder', () => {
 		await user.click(chooseFolder);
 		expect(onConfirm).toHaveBeenCalledWith(expect.objectContaining({ name: folder.name }));
 	});
+
+	it('should  close the modal clicking on the cross icon ', async () => {
+		const store = generateStore();
+		const folder = generateFolder({
+			id: '100',
+			name: 'Test folder'
+		});
+		const rootFolder = generateFolder({ id: FOLDERS.USER_ROOT, name: 'Root', children: [folder] });
+		populateFoldersStore({
+			view: FOLDER_VIEW.message,
+			customFolders: [rootFolder]
+		});
+		const onConfirm = jest.fn();
+		const { user } = setupTest(
+			<MovetoFolder
+				destination={undefined}
+				onSelectFolder={jest.fn()}
+				onConfirmDestination={onConfirm}
+			/>,
+			{
+				store
+			}
+		);
+		const browseFolder = screen.getByRole('button', {
+			name: /browse/i
+		});
+		await user.click(browseFolder);
+		await user.click(screen.getByTestId('icon: CloseOutline'));
+
+		expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+	});
 });
diff --git a/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx b/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
index 626287bfc..c6ff3b9d5 100644
--- a/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
@@ -12,7 +12,7 @@ import { generateStore } from '../../../../../../tests/generators/store';
 import { ShowTag } from '../../filter-actions/show-tag';
 
 describe('Show Tag', () => {
-	it('it should render selected option in the input', async () => {
+	it('should render selected option in the input', async () => {
 		const store = generateStore();
 
 		setupTest(<ShowTag value={[]} tagOptions={[]} onTagChange={jest.fn()} />, {
@@ -22,7 +22,7 @@ describe('Show Tag', () => {
 		expect(screen.getByText('Tag')).toBeVisible();
 	});
 
-	it('it should call onChange with the choosen value', async () => {
+	it('should call onChange with the chosen value', async () => {
 		const store = generateStore();
 		const onChangeFn = jest.fn();
 		const tagOptions = [
@@ -59,4 +59,28 @@ describe('Show Tag', () => {
 			}
 		]);
 	});
+
+	// incomplete test
+	it.skip('should render the avatar background as black if no color is passed as tagOption', async () => {
+		const store = generateStore();
+		const onChangeFn = jest.fn();
+		const tagOptions = [
+			{
+				label: 'tag option 1'
+			}
+		];
+
+		const { user } = setupTest(
+			<ShowTag value={[]} tagOptions={tagOptions} onTagChange={onChangeFn} />,
+			{
+				store
+			}
+		);
+
+		await user.click(screen.getByText('Tag'));
+		await screen.findByTestId('dropdown-popper-list');
+
+		expect(screen.getByText(tagOptions[0].label)).toBeVisible();
+		screen.logTestingPlaygroundURL();
+	});
 });

From 8bbac046b1a5d9370d63650ad8f7e636ca41f90e Mon Sep 17 00:00:00 2001
From: FrancescoGottardi <gottardifrancesco92@gmail.com>
Date: Wed, 18 Dec 2024 12:11:12 +0100
Subject: [PATCH 26/40] refactor: moved customcomponent of tag and unpdated
 relative tests

---
 .../filters/parts/filter-actions/show-tag.tsx | 19 ++++++++-
 .../parts/new-filter-action-conditions.tsx    | 13 +------
 .../tests/filter-actions/show-tag.test.tsx    | 39 ++++++++++---------
 3 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/src/views/settings/filters/parts/filter-actions/show-tag.tsx b/src/views/settings/filters/parts/filter-actions/show-tag.tsx
index 629eb6c6a..0fc1d28e6 100644
--- a/src/views/settings/filters/parts/filter-actions/show-tag.tsx
+++ b/src/views/settings/filters/parts/filter-actions/show-tag.tsx
@@ -5,7 +5,15 @@
  */
 import React, { useCallback } from 'react';
 
-import { ChipInput, ChipItem, DropdownItem, Row } from '@zextras/carbonio-design-system';
+import {
+	ChipInput,
+	ChipItem,
+	DropdownItem,
+	Icon,
+	Padding,
+	Row,
+	Text
+} from '@zextras/carbonio-design-system';
 import { useTranslation } from 'react-i18next';
 
 import { ZIMBRA_STANDARD_COLORS } from '../../../../../carbonio-ui-commons/constants';
@@ -44,7 +52,14 @@ export const ShowTag = ({ value, tagOptions, onTagChange }: ShowTagProps): React
 			id: tag.label,
 			label: tag.label,
 			value: tag,
-			customComponent: tag.customComponent
+			customComponent: (
+				<Row>
+					<Icon icon="Tag" color={ZIMBRA_STANDARD_COLORS[tag.color ?? 0].hex} />
+					<Padding left="small">
+						<Text>{tag.label}</Text>
+					</Padding>
+				</Row>
+			)
 		})
 	);
 	const tagChipOnAdd = useCallback((tagValue: unknown): ChipItem<Tag> => {
diff --git a/src/views/settings/filters/parts/new-filter-action-conditions.tsx b/src/views/settings/filters/parts/new-filter-action-conditions.tsx
index f1daba382..1980bb07d 100644
--- a/src/views/settings/filters/parts/new-filter-action-conditions.tsx
+++ b/src/views/settings/filters/parts/new-filter-action-conditions.tsx
@@ -5,11 +5,10 @@
  */
 import React, { FC, ReactElement, useMemo } from 'react';
 
-import { Container, Text, Icon, Row, Padding } from '@zextras/carbonio-design-system';
+import { Container, Text } from '@zextras/carbonio-design-system';
 import { map } from 'lodash';
 
 import FilterActionRows from './filter-action-rows';
-import { ZIMBRA_STANDARD_COLORS } from '../../../../carbonio-ui-commons/constants/utils';
 import { getTags } from '../../../../carbonio-ui-commons/store/zustand/tags';
 import Heading from '../../components/settings-heading';
 
@@ -21,15 +20,7 @@ const FilterActionConditions: FC<ComponentProps> = ({ compProps }): ReactElement
 		() =>
 			map(getTags(), (item) => ({
 				...item,
-				label: item.name,
-				customComponent: (
-					<Row>
-						<Icon icon="Tag" color={ZIMBRA_STANDARD_COLORS[item.color ?? 0].hex} />
-						<Padding left="small">
-							<Text>{item.name}</Text>
-						</Padding>
-					</Row>
-				)
+				label: item.name
 			})),
 		[]
 	);
diff --git a/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx b/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
index c6ff3b9d5..d20fef5ee 100644
--- a/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
@@ -5,14 +5,14 @@
  */
 import React from 'react';
 
-import { screen } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
 
 import { setupTest } from '../../../../../../carbonio-ui-commons/test/test-setup';
 import { generateStore } from '../../../../../../tests/generators/store';
 import { ShowTag } from '../../filter-actions/show-tag';
 
 describe('Show Tag', () => {
-	it('should render selected option in the input', async () => {
+	it('should render the tag input', async () => {
 		const store = generateStore();
 
 		setupTest(<ShowTag value={[]} tagOptions={[]} onTagChange={jest.fn()} />, {
@@ -27,10 +27,6 @@ describe('Show Tag', () => {
 		const onChangeFn = jest.fn();
 		const tagOptions = [
 			{
-				avatarBackground: '#ffc107',
-				avatarIcon: 'Tag' as const,
-				background: 'gray2' as const,
-				hasAvatar: true,
 				label: 'tag option 1',
 				color: 6
 			}
@@ -45,25 +41,19 @@ describe('Show Tag', () => {
 
 		await user.click(screen.getByText('Tag'));
 		await screen.findByTestId('dropdown-popper-list');
-
 		await user.click(screen.getByText(tagOptions[0].label));
 
 		expect(onChangeFn).toHaveBeenCalledTimes(1);
 		expect(onChangeFn).toHaveBeenCalledWith([
 			{
-				avatarBackground: '#ffc107',
-				avatarIcon: 'Tag',
-				background: 'gray2',
-				hasAvatar: true,
-				label: 'tag option 1'
+				label: 'tag option 1',
+				color: 6
 			}
 		]);
 	});
 
-	// incomplete test
-	it.skip('should render the avatar background as black if no color is passed as tagOption', async () => {
+	it('should render the option with the tag avatar', async () => {
 		const store = generateStore();
-		const onChangeFn = jest.fn();
 		const tagOptions = [
 			{
 				label: 'tag option 1'
@@ -71,16 +61,27 @@ describe('Show Tag', () => {
 		];
 
 		const { user } = setupTest(
-			<ShowTag value={[]} tagOptions={tagOptions} onTagChange={onChangeFn} />,
+			<ShowTag value={[]} tagOptions={tagOptions} onTagChange={jest.fn()} />,
 			{
 				store
 			}
 		);
 
 		await user.click(screen.getByText('Tag'));
-		await screen.findByTestId('dropdown-popper-list');
+		const dropdown = await screen.findByTestId('dropdown-popper-list');
+
+		expect(within(dropdown).getByTestId('icon: Tag')).toBeVisible();
+	});
+
+	it('should render added chip with the tag avatar', async () => {
+		const store = generateStore();
+		const value = {
+			label: 'tag option 1'
+		};
+		setupTest(<ShowTag value={[value]} tagOptions={[]} onTagChange={jest.fn()} />, {
+			store
+		});
 
-		expect(screen.getByText(tagOptions[0].label)).toBeVisible();
-		screen.logTestingPlaygroundURL();
+		expect(within(screen.getByTestId('chip')).getByTestId('icon: Tag')).toBeVisible();
 	});
 });

From b9ef3527d2008bddfe970447f86131c6911249d0 Mon Sep 17 00:00:00 2001
From: FrancescoGottardi <gottardifrancesco92@gmail.com>
Date: Wed, 18 Dec 2024 12:53:35 +0100
Subject: [PATCH 27/40] REFACTOR: converting filter parts utils to ts

---
 .../parts/tests/filter-actions-rows.test.tsx  |  19 ++
 .../filters/parts/{utils.js => utils.ts}      | 166 +++++++++++++++---
 2 files changed, 156 insertions(+), 29 deletions(-)
 rename src/views/settings/filters/parts/{utils.js => utils.ts} (70%)

diff --git a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
index f208ede10..6f44d1ece 100644
--- a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
@@ -219,6 +219,25 @@ describe('FilterActionsRows', () => {
 				expect.objectContaining({ actionRedirect: [{ a: '' }] })
 			]);
 		});
+
+		it('dsaddas', async () => {
+			const newCompProps = {
+				...compProps,
+				tempActions: [{ id: '1', actionKeep: [{}] }],
+				zimbraFeatureMailForwardingInFiltersEnabled: 'FALSE' as const
+			};
+
+			const { user } = setupTest(
+				<FilterActionRows
+					tmpFilter={{
+						actionRedirect: [{ flagName: 'flagged' }]
+					}}
+					index={0}
+					compProps={newCompProps}
+				/>,
+				{}
+			);
+		});
 	});
 
 	describe('Tag With', () => {
diff --git a/src/views/settings/filters/parts/utils.js b/src/views/settings/filters/parts/utils.ts
similarity index 70%
rename from src/views/settings/filters/parts/utils.js
rename to src/views/settings/filters/parts/utils.ts
index 03ec8c375..68e7a670a 100644
--- a/src/views/settings/filters/parts/utils.js
+++ b/src/views/settings/filters/parts/utils.ts
@@ -3,14 +3,26 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import { TFunction } from 'i18next';
 import { find, forEach } from 'lodash';
 
-export const domainOptions = (t) => [
+type DomainOption = {
+	label: string;
+	value: string;
+};
+
+export const getDomainOptions = (t: TFunction): DomainOption[] => [
 	{ label: t('label.all', 'all'), value: 'all' },
 	{ label: t('settings.localpart', 'localpart'), value: 'localpart' },
 	{ label: t('settings.domain', 'domain'), value: 'domain' }
 ];
-export const getConditionStatements = (t) => [
+
+type ConditionStatement = {
+	label: string;
+	value: { stringComparison: 'is' | 'contains' | 'matches'; negative?: string };
+};
+
+export const getConditionStatements = (t: TFunction): ConditionStatement[] => [
 	{
 		label: t('settings.matches_exactly', 'matches exactly'),
 		value: { stringComparison: 'is' }
@@ -37,7 +49,12 @@ export const getConditionStatements = (t) => [
 	}
 ];
 
-export const getFieldOptions = (t) => [
+type FieldOption = {
+	label: string;
+	value: 'anyof' | 'allof';
+};
+
+export const getFieldOptions = (t: TFunction): FieldOption[] => [
 	{
 		label: t('label.any', 'any'),
 		value: 'anyof'
@@ -48,7 +65,12 @@ export const getFieldOptions = (t) => [
 	}
 ];
 
-export const getHeaderConditionStatements = (t) => [
+type HeaderConditionStatement = {
+	label: string;
+	value: string | ConditionStatement['value'];
+};
+
+export const getHeaderConditionStatements = (t: TFunction): HeaderConditionStatement[] => [
 	...getConditionStatements(t),
 	{
 		label: t('settings.does_not_match_wildcard_condition', 'does not match wildcard condition'),
@@ -64,7 +86,12 @@ export const getHeaderConditionStatements = (t) => [
 	}
 ];
 
-export const getIsOptions = (t) => [
+type IsOption = {
+	label: string;
+	value: 'TRUE' | 'FALSE';
+};
+
+export const getIsOptions = (t: TFunction): IsOption[] => [
 	{
 		label: t('settings.is', 'is'),
 		value: 'TRUE'
@@ -75,7 +102,15 @@ export const getIsOptions = (t) => [
 	}
 ];
 
-export const getMessageOptions = (t) => [
+type MessageOption = {
+	label: string;
+	value: {
+		value: { where?: 'started' | 'participated'; flagName?: 'flagged' };
+		key: 'conversationTest' | 'flaggedTest' | 'listTest' | 'bulkTest';
+	};
+};
+
+export const getMessageOptions = (t: TFunction): MessageOption[] => [
 	{
 		label: t('settings.conv_is_started', 'in conversation I started'),
 		value: { value: { where: 'started' }, key: 'conversationTest' }
@@ -98,7 +133,8 @@ export const getMessageOptions = (t) => [
 	}
 ];
 
-export const getSizeOptions = (t) => [
+type SizeOption = { label: string; value: { numberComparison: 'under' | 'over'; negative?: '1' } };
+export const getSizeOptions = (t: TFunction): SizeOption[] => [
 	{ label: t('settings.under', 'under'), value: { numberComparison: 'under' } },
 	{
 		label: t('settings.not_under', 'not under'),
@@ -111,7 +147,8 @@ export const getSizeOptions = (t) => [
 	}
 ];
 
-export const getSizeUnit = (t) => [
+type SizeUnit = { label: string; value: '' | 'K' | 'M' | 'G' };
+export const getSizeUnit = (t: TFunction): SizeUnit[] => [
 	{ label: t('settings.b', 'B'), value: '' },
 	{
 		label: t('settings.kb', 'KB'),
@@ -124,7 +161,8 @@ export const getSizeUnit = (t) => [
 	}
 ];
 
-export const getDateOptions = (t) => [
+type DateOption = { label: string; value: { dateComparison: 'before' | 'after'; negative?: '1' } };
+export const getDateOptions = (t: TFunction): DateOption[] => [
 	{ label: t('settings.before', 'before'), value: { dateComparison: 'before' } },
 	{
 		label: t('settings.not_before', 'not before'),
@@ -137,7 +175,9 @@ export const getDateOptions = (t) => [
 	}
 ];
 
-export const getBodyOptions = (t) => [
+type BodyOption = { label: string; value: { negative?: '1' } };
+
+export const getBodyOptions = (t: TFunction): BodyOption[] => [
 	{ label: t('settings.contains', 'contains'), value: {} },
 	{
 		label: t('settings.does_not_contain', 'does not contain'),
@@ -145,7 +185,8 @@ export const getBodyOptions = (t) => [
 	}
 ];
 
-export const getExistOptions = (t) => [
+type ExistOption = { label: string; value: { negative?: '1' } };
+export const getEns = (t: TFunction): ExistOption[] => [
 	{
 		label: t('settings.exists', 'exists'),
 		value: {}
@@ -156,7 +197,16 @@ export const getExistOptions = (t) => [
 	}
 ];
 
-export const getReadReceiptOptions = (t) => [
+type ReadReceiptOption = {
+	label: string;
+	value: {
+		header: 'Content-Type';
+		stringComparison: 'Contains';
+		value: 'message/disposition-notification';
+		negative?: '1';
+	};
+};
+export const getReadReceiptOptions = (t: TFunction): ReadReceiptOption[] => [
 	{
 		label: t('settings.exists', 'exists'),
 		value: {
@@ -175,7 +225,12 @@ export const getReadReceiptOptions = (t) => [
 		}
 	}
 ];
-export const getFromOptions = (t) => [
+
+type FromOption = {
+	label: string;
+	value: 'FROM' | 'TO' | 'CC' | 'TO,CC';
+};
+export const getFromOptions = (t: TFunction): FromOption[] => [
 	{
 		label: t('label.from', 'From'),
 		value: 'FROM'
@@ -194,7 +249,16 @@ export const getFromOptions = (t) => [
 	}
 ];
 
-export const getInOptions = (t) => [
+type InOption = {
+	label: string;
+	value: {
+		key: 'in' | 'myTest';
+		value: {
+			negative?: '1';
+		};
+	};
+};
+export const getInOptions = (t: TFunction): InOption[] => [
 	{
 		label: t('settings.in', 'in'),
 		value: { key: 'in', value: {} }
@@ -213,7 +277,11 @@ export const getInOptions = (t) => [
 	}
 ];
 
-export const getFolderOptions = (t) => [
+type FolderOption = {
+	label: string;
+	value: 'addressBookTest' | 'contactRankingTest';
+};
+export const getFolderOptions = (t: TFunction): FolderOption[] => [
 	{
 		label: t('settings.contacts', 'contacts'),
 		value: 'addressBookTest'
@@ -224,7 +292,11 @@ export const getFolderOptions = (t) => [
 	}
 ];
 
-export const getInviteRspOptions = (t) => [
+type InviteRspOption = {
+	label: string;
+	value: { method: [{ _content: 'anyrequest' | 'anyreply' }]; negative?: '1' };
+};
+export const getInviteRspOptions = (t: TFunction): InviteRspOption[] => [
 	{
 		label: t('settings.invite_requested', 'invite is requested'),
 		value: { method: [{ _content: 'anyrequest' }] }
@@ -243,7 +315,12 @@ export const getInviteRspOptions = (t) => [
 	}
 ];
 
-export const getSocialOptions = (t) => [
+type SocialOption = {
+	label: string;
+	value: { linkedinTest?: [object]; twitterTest?: [object]; facebookTest?: [object] };
+};
+
+export const getSocialOptions = (t: TFunction): SocialOption[] => [
 	{
 		label: t('settings.linkedin_msg', 'LinkedIn messages and connections'),
 		value: { linkedinTest: [{}] }
@@ -258,7 +335,14 @@ export const getSocialOptions = (t) => [
 	}
 ];
 
-const getConditionAction = (t, zimbraFeatureMailForwardingInFiltersEnabled) => {
+type ConditionAction = {
+	label: string;
+	value: 'redirectToAddress';
+};
+const getConditionAction = (
+	t: TFunction,
+	zimbraFeatureMailForwardingInFiltersEnabled: 'TRUE' | 'FALSE'
+): ConditionAction[] => {
 	if (zimbraFeatureMailForwardingInFiltersEnabled === 'TRUE') {
 		return [
 			{
@@ -270,11 +354,16 @@ const getConditionAction = (t, zimbraFeatureMailForwardingInFiltersEnabled) => {
 	return [];
 };
 
+type ActionOption = {
+	label: string;
+	value: string;
+};
+
 export const getActionOptions = (
-	t,
-	zimbraFeatureMailForwardingInFiltersEnabled,
+	t: TFunction,
+	zimbraFeatureMailForwardingInFiltersEnabled: 'TRUE' | 'FALSE',
 	isIncoming = true
-) => [
+): ActionOption[] => [
 	{
 		label: isIncoming
 			? t('settings.keep_in_inbox', 'Keep in Inbox')
@@ -300,7 +389,12 @@ export const getActionOptions = (
 	...getConditionAction(t, zimbraFeatureMailForwardingInFiltersEnabled)
 ];
 
-export const getMarkAsOptions = (t) => [
+type MarkAsOption = {
+	label: string;
+	value: { actionFlag: [{ flagName: string }] };
+};
+
+export const getMarkAsOptions = (t: TFunction): MarkAsOption[] => [
 	{
 		label: t('label.read', 'Read'),
 		value: { actionFlag: [{ flagName: 'read' }] }
@@ -310,13 +404,27 @@ export const getMarkAsOptions = (t) => [
 		value: { actionFlag: [{ flagName: 'flagged' }] }
 	}
 ];
-export const getDomainOptions = (t) => [
-	{ label: t('label.all', 'all'), value: 'all' },
-	{ label: t('settings.localpart', 'localpart'), value: 'localpart' },
-	{ label: t('settings.domain', 'domain'), value: 'domain' }
-];
-
-export const getStatusOptions = (t) => [
+type StatusOption = {
+	label: string;
+	value:
+		| 'from'
+		| 'to'
+		| 'cc'
+		| 'to,cc'
+		| 'subject'
+		| 'message'
+		| 'size'
+		| 'date'
+		| 'body'
+		| 'attachment'
+		| 'read receipt'
+		| 'address in'
+		| 'header named'
+		| 'calendar'
+		| 'social';
+	keyName?: 'addressBookTest';
+};
+export const getStatusOptions = (t: TFunction): StatusOption[] => [
 	{
 		label: t('label.from', 'From'),
 		value: 'from'

From 87435f7d2ad0efc4f42dd358df26376b0c862a9f Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Wed, 18 Dec 2024 14:21:54 +0100
Subject: [PATCH 28/40] WIP(utils): add types in utils.ts. Some of them are
 incompatible

---
 src/views/settings/filters/parts/utils.ts | 26 ++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/views/settings/filters/parts/utils.ts b/src/views/settings/filters/parts/utils.ts
index 68e7a670a..fbcb7d778 100644
--- a/src/views/settings/filters/parts/utils.ts
+++ b/src/views/settings/filters/parts/utils.ts
@@ -6,6 +6,8 @@
 import { TFunction } from 'i18next';
 import { find, forEach } from 'lodash';
 
+import { FilterActions } from '../../../../types';
+
 type DomainOption = {
 	label: string;
 	value: string;
@@ -186,7 +188,7 @@ export const getBodyOptions = (t: TFunction): BodyOption[] => [
 ];
 
 type ExistOption = { label: string; value: { negative?: '1' } };
-export const getEns = (t: TFunction): ExistOption[] => [
+export const getExistOptions = (t: TFunction): ExistOption[] => [
 	{
 		label: t('settings.exists', 'exists'),
 		value: {}
@@ -475,11 +477,25 @@ export const getStatusOptions = (t: TFunction): StatusOption[] => [
 		value: 'header named'
 	}
 ];
+type ObjectWithValue<T> = {
+	value: T;
+};
+export function findDefaultValue<T>(
+	list: Array<ObjectWithValue<T>>,
+	key: T
+): ReturnType<typeof find<Array<ObjectWithValue<T>>>> {
+	return find(list, { value: key });
+}
+type Filters = {
+	filterActions: FilterActions[];
+};
 
-export const findDefaultValue = (list, key) => find(list, { value: key });
-export const findDefaultObjectValue = (list, key) => find(list, { value: key });
-
-export const getButtonInfo = (filterName, filters, t, isCreate = true) => {
+export const getButtonInfo = (
+	filterName: string,
+	filters: Filters,
+	t: TFunction,
+	isCreate = true
+): [boolean, string] => {
 	const keys = Object.keys(filters.filterActions[0]);
 	const actions = filters.filterActions[0];
 	if (filterName.length === 0) {

From df11ce4d76cb7dd5bd4059efe20f8cbbb4fc2928 Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Wed, 18 Dec 2024 14:32:32 +0100
Subject: [PATCH 29/40] WIP(mark-as): extract mark as option type and update
 tests

---
 src/types/filters/index.d.ts                             | 4 ++++
 .../settings/filters/parts/filter-actions/mark-as.tsx    | 7 ++++---
 .../filters/parts/tests/filter-actions/mark-as.test.tsx  | 8 ++++----
 src/views/settings/filters/parts/utils.ts                | 9 ++-------
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/types/filters/index.d.ts b/src/types/filters/index.d.ts
index 3126aedaa..be0803e65 100644
--- a/src/types/filters/index.d.ts
+++ b/src/types/filters/index.d.ts
@@ -94,3 +94,7 @@ export type FilterActions = {
 		}
 	];
 };
+export type MarkAsOption = {
+	label: string;
+	value: { actionFlag: { flagName: string }[] };
+};
diff --git a/src/views/settings/filters/parts/filter-actions/mark-as.tsx b/src/views/settings/filters/parts/filter-actions/mark-as.tsx
index 54f3c45d0..cee8dd4dd 100644
--- a/src/views/settings/filters/parts/filter-actions/mark-as.tsx
+++ b/src/views/settings/filters/parts/filter-actions/mark-as.tsx
@@ -7,12 +7,13 @@ import React from 'react';
 
 import { Row } from '@zextras/carbonio-design-system';
 
+import { MarkAsOption } from '../../../../../types';
 import CustomSelect from '../custom-select';
 
 type MarkAsProps = {
-	options: { label: string; value: string }[];
-	onChange: (option: { label: string; value: string }) => void;
-	selected: { label: string; value: string };
+	options: Array<MarkAsOption>;
+	onChange: (option: MarkAsOption) => void;
+	selected: MarkAsOption;
 };
 
 export const MarkAs = ({ options, onChange, selected }: MarkAsProps): React.JSX.Element => (
diff --git a/src/views/settings/filters/parts/tests/filter-actions/mark-as.test.tsx b/src/views/settings/filters/parts/tests/filter-actions/mark-as.test.tsx
index efc012553..2698f4596 100644
--- a/src/views/settings/filters/parts/tests/filter-actions/mark-as.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions/mark-as.test.tsx
@@ -15,8 +15,8 @@ describe('Mark As', () => {
 	it('it should render selected option in the input', async () => {
 		const store = generateStore();
 		const options = [
-			{ label: 'label 1', value: 'value_1' },
-			{ label: 'label 2', value: 'value_2' }
+			{ label: 'label 1', value: { actionFlag: [{ flagName: '1' }] } },
+			{ label: 'label 2', value: { actionFlag: [{ flagName: '2' }] } }
 		];
 		const selectedOption = options[0];
 
@@ -30,8 +30,8 @@ describe('Mark As', () => {
 	it('it should call onChange with the choosen value', async () => {
 		const store = generateStore();
 		const options = [
-			{ label: 'label 1', value: 'value_1' },
-			{ label: 'label 2', value: 'value_2' }
+			{ label: 'label 1', value: { actionFlag: [{ flagName: '1' }] } },
+			{ label: 'label 2', value: { actionFlag: [{ flagName: '2' }] } }
 		];
 		const selectedOption = options[0];
 		const secondOption = options[1];
diff --git a/src/views/settings/filters/parts/utils.ts b/src/views/settings/filters/parts/utils.ts
index fbcb7d778..3f49fceae 100644
--- a/src/views/settings/filters/parts/utils.ts
+++ b/src/views/settings/filters/parts/utils.ts
@@ -6,7 +6,7 @@
 import { TFunction } from 'i18next';
 import { find, forEach } from 'lodash';
 
-import { FilterActions } from '../../../../types';
+import { FilterActions, MarkAsOption } from '../../../../types';
 
 type DomainOption = {
 	label: string;
@@ -391,12 +391,7 @@ export const getActionOptions = (
 	...getConditionAction(t, zimbraFeatureMailForwardingInFiltersEnabled)
 ];
 
-type MarkAsOption = {
-	label: string;
-	value: { actionFlag: [{ flagName: string }] };
-};
-
-export const getMarkAsOptions = (t: TFunction): MarkAsOption[] => [
+export const getMarkAsOptions = (t: TFunction): Array<MarkAsOption> => [
 	{
 		label: t('label.read', 'Read'),
 		value: { actionFlag: [{ flagName: 'read' }] }

From 87d3f1087ea0805787a777f2864883ec344b1eb7 Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Wed, 18 Dec 2024 14:46:51 +0100
Subject: [PATCH 30/40] fix(utils): fix remaining type check. - custom select
 can accept undefined values - find from lodash has been replace with standard
 find as the return type was incompatible but the behavior should be the same

---
 src/views/settings/filters/parts/custom-select.tsx |  4 +++-
 src/views/settings/filters/parts/utils.ts          | 11 ++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/views/settings/filters/parts/custom-select.tsx b/src/views/settings/filters/parts/custom-select.tsx
index 9e6de7f0a..ba626161a 100644
--- a/src/views/settings/filters/parts/custom-select.tsx
+++ b/src/views/settings/filters/parts/custom-select.tsx
@@ -4,8 +4,10 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import React, { FC, ReactElement, useMemo } from 'react';
+
 import { Row, Select, Text, Padding, Icon, Container } from '@zextras/carbonio-design-system';
 import { map } from 'lodash';
+
 import {
 	ColorContainer,
 	TextUpperCase
@@ -80,7 +82,7 @@ const getItems = (items: Array<{ label: string; value: any }>): GetItemsReturnTy
 
 const CustomSelect: FC<{
 	onChange: (arg: any) => void;
-	defaultSelection: { label: string; value: any };
+	defaultSelection?: { label: string; value: any };
 	label: string;
 	items: Array<{ label: string; value: any }>;
 	background?: string;
diff --git a/src/views/settings/filters/parts/utils.ts b/src/views/settings/filters/parts/utils.ts
index 3f49fceae..cefba52ce 100644
--- a/src/views/settings/filters/parts/utils.ts
+++ b/src/views/settings/filters/parts/utils.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { TFunction } from 'i18next';
-import { find, forEach } from 'lodash';
+import { forEach } from 'lodash';
 
 import { FilterActions, MarkAsOption } from '../../../../types';
 
@@ -472,14 +472,15 @@ export const getStatusOptions = (t: TFunction): StatusOption[] => [
 		value: 'header named'
 	}
 ];
-type ObjectWithValue<T> = {
+type ObjectWithLabelValue<T> = {
+	label: string;
 	value: T;
 };
 export function findDefaultValue<T>(
-	list: Array<ObjectWithValue<T>>,
+	list: Array<ObjectWithLabelValue<T>>,
 	key: T
-): ReturnType<typeof find<Array<ObjectWithValue<T>>>> {
-	return find(list, { value: key });
+): ObjectWithLabelValue<T> | undefined {
+	return list.find((item) => item.value === key);
 }
 type Filters = {
 	filterActions: FilterActions[];

From 411e5501ce94c5ce298d9c26896c3df3cef034dc Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Wed, 18 Dec 2024 15:06:14 +0100
Subject: [PATCH 31/40] fix(filter-tags): add tests to check on default color +
 add test for tag color behavior defined in filter-action-rows.tsx

---
 src/types/filters/index.d.ts                  |  5 ++
 .../filters/parts/filter-action-rows.tsx      | 16 ++----
 .../filters/parts/filter-actions/show-tag.tsx | 54 +++++++++----------
 .../parts/tests/filter-actions-rows.test.tsx  | 25 +++++++++
 .../tests/filter-actions/show-tag.test.tsx    | 22 ++++++++
 5 files changed, 83 insertions(+), 39 deletions(-)

diff --git a/src/types/filters/index.d.ts b/src/types/filters/index.d.ts
index be0803e65..cc590589e 100644
--- a/src/types/filters/index.d.ts
+++ b/src/types/filters/index.d.ts
@@ -3,6 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+
 import { ChipProps } from '@zextras/carbonio-design-system';
 
 export type FilterTest = Record<string, string | Array<any>>;
@@ -98,3 +99,7 @@ export type MarkAsOption = {
 	label: string;
 	value: { actionFlag: { flagName: string }[] };
 };
+export type MailFilterTag = {
+	label: string;
+	color?: number;
+};
diff --git a/src/views/settings/filters/parts/filter-action-rows.tsx b/src/views/settings/filters/parts/filter-action-rows.tsx
index afccdd373..a03bf7061 100644
--- a/src/views/settings/filters/parts/filter-action-rows.tsx
+++ b/src/views/settings/filters/parts/filter-action-rows.tsx
@@ -19,13 +19,7 @@ import { getActionOptions, getMarkAsOptions } from './utils';
 import { CONTACT_TYPES } from '../../../../carbonio-ui-commons/integrations/constants';
 import { ContactInputItem } from '../../../../carbonio-ui-commons/integrations/types';
 import { Folder } from '../../../../carbonio-ui-commons/types/folder';
-
-// TODO: move this one
-type Tag = {
-	label: string;
-	customComponent?: React.ReactNode;
-	color?: number;
-};
+import { MailFilterTag } from '../../../../types';
 
 type ActionFileInto = {
 	folderPath?: string;
@@ -59,7 +53,7 @@ type FilterActionRowProps = {
 	tmpFilter: Record<string, [TempAction]>;
 	index: number;
 	compProps: CompProps;
-	tagOptions?: Array<any>;
+	tagOptions?: Array<MailFilterTag>;
 };
 
 const FilterActionRows: FC<FilterActionRowProps> = ({
@@ -78,7 +72,7 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 		[t, zimbraFeatureMailForwardingInFiltersEnabled, isIncoming]
 	);
 	const markAsOptions = useMemo(() => getMarkAsOptions(t), [t]);
-	const [tag, setTag] = useState<Array<Tag>>([]);
+	const [tag, setTag] = useState<Array<MailFilterTag>>([]);
 
 	const addFilterCondition = useCallback(() => {
 		const previousTempActions = tempActions.slice();
@@ -140,7 +134,7 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 						? [
 								{
 									label: `${tmpFilter[action][0].tagName}`,
-									color: chipBg.color
+									color: chipBg?.color
 								}
 							]
 						: []
@@ -268,7 +262,7 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 	}, [setActiveIndex, index]);
 
 	const onTagChange = useCallback(
-		(chip: Tag[]) => {
+		(chip: MailFilterTag[]) => {
 			const previous = tempActions.slice();
 			if (chip.length > 0) {
 				const requiredTag = chip.length > 1 ? chip[1] : chip[0];
diff --git a/src/views/settings/filters/parts/filter-actions/show-tag.tsx b/src/views/settings/filters/parts/filter-actions/show-tag.tsx
index 0fc1d28e6..5cb5ef5f5 100644
--- a/src/views/settings/filters/parts/filter-actions/show-tag.tsx
+++ b/src/views/settings/filters/parts/filter-actions/show-tag.tsx
@@ -17,24 +17,19 @@ import {
 import { useTranslation } from 'react-i18next';
 
 import { ZIMBRA_STANDARD_COLORS } from '../../../../../carbonio-ui-commons/constants';
-
-type Tag = {
-	label: string;
-	customComponent?: React.ReactNode;
-	color?: number;
-};
+import { MailFilterTag } from '../../../../../types';
 
 type ShowTagProps = {
-	value: Tag[];
-	tagOptions: Tag[] | undefined;
-	onTagChange: (chip: Tag[]) => void;
+	value: MailFilterTag[];
+	tagOptions: MailFilterTag[] | undefined;
+	onTagChange: (chip: MailFilterTag[]) => void;
 };
 
 export const ShowTag = ({ value, tagOptions, onTagChange }: ShowTagProps): React.JSX.Element => {
 	const [t] = useTranslation();
 
 	const tagChipInput = value.map(
-		(tag): ChipItem<Tag> => ({
+		(tag): ChipItem<MailFilterTag> => ({
 			label: tag.label,
 			value: tag,
 			avatarBackground: ZIMBRA_STANDARD_COLORS[tag.color ?? 0].hex,
@@ -47,23 +42,26 @@ export const ShowTag = ({ value, tagOptions, onTagChange }: ShowTagProps): React
 		(
 			tag
 		): DropdownItem & {
-			value?: Tag;
-		} => ({
-			id: tag.label,
-			label: tag.label,
-			value: tag,
-			customComponent: (
-				<Row>
-					<Icon icon="Tag" color={ZIMBRA_STANDARD_COLORS[tag.color ?? 0].hex} />
-					<Padding left="small">
-						<Text>{tag.label}</Text>
-					</Padding>
-				</Row>
-			)
-		})
+			value?: MailFilterTag;
+		} => {
+			const color: string = ZIMBRA_STANDARD_COLORS[tag.color ?? 0].hex;
+			return {
+				id: tag.label,
+				label: tag.label,
+				value: tag,
+				customComponent: (
+					<Row data-testid={`tag-option-${tag.label}-${color}`}>
+						<Icon icon="Tag" color={color} />
+						<Padding left="small">
+							<Text>{tag.label}</Text>
+						</Padding>
+					</Row>
+				)
+			};
+		}
 	);
-	const tagChipOnAdd = useCallback((tagValue: unknown): ChipItem<Tag> => {
-		const tag = tagValue as Tag;
+	const tagChipOnAdd = useCallback((tagValue: unknown): ChipItem<MailFilterTag> => {
+		const tag = tagValue as MailFilterTag;
 		return {
 			label: tag.label,
 			value: tag,
@@ -74,8 +72,8 @@ export const ShowTag = ({ value, tagOptions, onTagChange }: ShowTagProps): React
 	}, []);
 
 	const onTagInternalChange = useCallback(
-		(chips: ChipItem<Tag>[]) => {
-			const chipsValue = chips.map((chip) => chip.value) as Tag[];
+		(chips: ChipItem<MailFilterTag>[]) => {
+			const chipsValue = chips.map((chip) => chip.value) as MailFilterTag[];
 			onTagChange(chipsValue);
 		},
 		[onTagChange]
diff --git a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
index 6f44d1ece..6b134836f 100644
--- a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
@@ -255,6 +255,31 @@ describe('FilterActionsRows', () => {
 			);
 			expect(screen.getByText(filterName)).toBeVisible();
 		});
+
+		it('should display the tag with the same color of corresponding option', async () => {
+			const tagName = 'Test Designer';
+			const { user } = setupTest(
+				<FilterActionRows
+					tmpFilter={{
+						actionTag: [{ tagName }]
+					}}
+					index={0}
+					tagOptions={[
+						{
+							label: tagName,
+							color: 2 // See Zimbra Colors variable: #29B6F6
+						}
+					]}
+					compProps={compProps}
+				/>,
+				{}
+			);
+			await user.click(screen.getByText('Tag'));
+			const tagOptionsDropdown = await screen.findByTestId('dropdown-popper-list');
+			expect(
+				await within(tagOptionsDropdown).findByTestId(`tag-option-${tagName}-#29B6F6`)
+			).toBeVisible();
+		});
 		it('should reset the input value to empty after changing action', async () => {
 			const newCompProps = {
 				...compProps,
diff --git a/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx b/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
index d20fef5ee..511b441fb 100644
--- a/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
@@ -11,6 +11,7 @@ import { setupTest } from '../../../../../../carbonio-ui-commons/test/test-setup
 import { generateStore } from '../../../../../../tests/generators/store';
 import { ShowTag } from '../../filter-actions/show-tag';
 
+const BLACK = '#000000';
 describe('Show Tag', () => {
 	it('should render the tag input', async () => {
 		const store = generateStore();
@@ -72,6 +73,27 @@ describe('Show Tag', () => {
 
 		expect(within(dropdown).getByTestId('icon: Tag')).toBeVisible();
 	});
+	it('should render the option with a black tag avatar if tag has no color', async () => {
+		const store = generateStore();
+		const tagName = 'tag option 1';
+		const tagOptions = [
+			{
+				label: tagName
+			}
+		];
+
+		const { user } = setupTest(
+			<ShowTag value={[]} tagOptions={tagOptions} onTagChange={jest.fn()} />,
+			{
+				store
+			}
+		);
+
+		await user.click(screen.getByText('Tag'));
+		const dropdown = await screen.findByTestId('dropdown-popper-list');
+
+		expect(within(dropdown).getByTestId(`tag-option-${tagName}-${BLACK}`)).toBeVisible();
+	});
 
 	it('should render added chip with the tag avatar', async () => {
 		const store = generateStore();

From 817ec009fd42cf90985675370a0358733f895282 Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Wed, 18 Dec 2024 15:15:02 +0100
Subject: [PATCH 32/40] test: filter-action-rows.tsx check when actionTag
 selected but no value an empty input is rendered

- note: these tests showcase that some logic should not actually be in this component
---
 .../settings/filters/parts/filter-action-rows.tsx  |  2 ++
 .../parts/tests/filter-actions-rows.test.tsx       | 14 +++++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/views/settings/filters/parts/filter-action-rows.tsx b/src/views/settings/filters/parts/filter-action-rows.tsx
index a03bf7061..120aa69f1 100644
--- a/src/views/settings/filters/parts/filter-action-rows.tsx
+++ b/src/views/settings/filters/parts/filter-action-rows.tsx
@@ -129,6 +129,8 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 			case 'actionTag': {
 				setActiveActionOption('tagWith');
 				const chipBg = filter(tagOptions, { label: tmpFilter[action][0].tagName })[0];
+				// TODO: this logic doesn't make sense here, it should be moved to show-tag component
+				// they are trying to get the color from corresponding option
 				setTag(
 					tmpFilter[action][0].tagName
 						? [
diff --git a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
index 6b134836f..6e3514444 100644
--- a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
@@ -255,7 +255,19 @@ describe('FilterActionsRows', () => {
 			);
 			expect(screen.getByText(filterName)).toBeVisible();
 		});
-
+		it('should display empty tag in input', async () => {
+			setupTest(
+				<FilterActionRows
+					tmpFilter={{
+						actionTag: [{}]
+					}}
+					index={0}
+					compProps={compProps}
+				/>,
+				{}
+			);
+			expect(screen.getByText('Tag')).toBeVisible();
+		});
 		it('should display the tag with the same color of corresponding option', async () => {
 			const tagName = 'Test Designer';
 			const { user } = setupTest(

From 804d62470de9e30d17b690d7a13a34440c2f10b4 Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Wed, 18 Dec 2024 15:56:30 +0100
Subject: [PATCH 33/40] refactor: move tag option color fallback logic in
 show-tag

- add more tests for tag color
---
 .../filters/parts/filter-action-rows.tsx      | 11 +++-----
 .../filters/parts/filter-actions/show-tag.tsx | 24 ++++++++++-------
 .../parts/tests/filter-actions-rows.test.tsx  | 24 -----------------
 .../tests/filter-actions/show-tag.test.tsx    | 26 +++++++++++++++++--
 4 files changed, 41 insertions(+), 44 deletions(-)

diff --git a/src/views/settings/filters/parts/filter-action-rows.tsx b/src/views/settings/filters/parts/filter-action-rows.tsx
index 120aa69f1..9a3dac22d 100644
--- a/src/views/settings/filters/parts/filter-action-rows.tsx
+++ b/src/views/settings/filters/parts/filter-action-rows.tsx
@@ -6,7 +6,7 @@
 import React, { FC, ReactElement, useCallback, useMemo, useState } from 'react';
 
 import { Button, Container, Padding, Row, Text, Tooltip } from '@zextras/carbonio-design-system';
-import { filter, omit } from 'lodash';
+import { omit } from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -128,15 +128,11 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 			}
 			case 'actionTag': {
 				setActiveActionOption('tagWith');
-				const chipBg = filter(tagOptions, { label: tmpFilter[action][0].tagName })[0];
-				// TODO: this logic doesn't make sense here, it should be moved to show-tag component
-				// they are trying to get the color from corresponding option
 				setTag(
 					tmpFilter[action][0].tagName
 						? [
 								{
-									label: `${tmpFilter[action][0].tagName}`,
-									color: chipBg?.color
+									label: `${tmpFilter[action][0].tagName}`
 								}
 							]
 						: []
@@ -168,8 +164,7 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 		tempActions,
 		index,
 		setTempActions,
-		actionOptions,
-		tagOptions
+		actionOptions
 	]);
 
 	const defaultMarkAsOption = useMemo(() => {
diff --git a/src/views/settings/filters/parts/filter-actions/show-tag.tsx b/src/views/settings/filters/parts/filter-actions/show-tag.tsx
index 5cb5ef5f5..c8704c8f6 100644
--- a/src/views/settings/filters/parts/filter-actions/show-tag.tsx
+++ b/src/views/settings/filters/parts/filter-actions/show-tag.tsx
@@ -14,6 +14,7 @@ import {
 	Row,
 	Text
 } from '@zextras/carbonio-design-system';
+import { find } from 'lodash';
 import { useTranslation } from 'react-i18next';
 
 import { ZIMBRA_STANDARD_COLORS } from '../../../../../carbonio-ui-commons/constants';
@@ -28,16 +29,6 @@ type ShowTagProps = {
 export const ShowTag = ({ value, tagOptions, onTagChange }: ShowTagProps): React.JSX.Element => {
 	const [t] = useTranslation();
 
-	const tagChipInput = value.map(
-		(tag): ChipItem<MailFilterTag> => ({
-			label: tag.label,
-			value: tag,
-			avatarBackground: ZIMBRA_STANDARD_COLORS[tag.color ?? 0].hex,
-			hasAvatar: true,
-			avatarIcon: 'Tag'
-		})
-	);
-
 	const tagChipOptions = tagOptions?.map(
 		(
 			tag
@@ -60,6 +51,19 @@ export const ShowTag = ({ value, tagOptions, onTagChange }: ShowTagProps): React
 			};
 		}
 	);
+	const tagChipInput = value.map((tag): ChipItem<MailFilterTag> => {
+		const color = tag.color ?? find(tagOptions, (option) => option.label === tag.label)?.color ?? 0;
+		const tagColor = ZIMBRA_STANDARD_COLORS[color].hex;
+		return {
+			label: tag.label,
+			value: tag,
+			// @ts-ignore ignored just to check color is correct in tests
+			'data-testid': `tag-${tag.label}-${tagColor}`,
+			avatarBackground: tagColor,
+			hasAvatar: true,
+			avatarIcon: 'Tag'
+		};
+	});
 	const tagChipOnAdd = useCallback((tagValue: unknown): ChipItem<MailFilterTag> => {
 		const tag = tagValue as MailFilterTag;
 		return {
diff --git a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
index 6e3514444..2a1c920d8 100644
--- a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
@@ -268,30 +268,6 @@ describe('FilterActionsRows', () => {
 			);
 			expect(screen.getByText('Tag')).toBeVisible();
 		});
-		it('should display the tag with the same color of corresponding option', async () => {
-			const tagName = 'Test Designer';
-			const { user } = setupTest(
-				<FilterActionRows
-					tmpFilter={{
-						actionTag: [{ tagName }]
-					}}
-					index={0}
-					tagOptions={[
-						{
-							label: tagName,
-							color: 2 // See Zimbra Colors variable: #29B6F6
-						}
-					]}
-					compProps={compProps}
-				/>,
-				{}
-			);
-			await user.click(screen.getByText('Tag'));
-			const tagOptionsDropdown = await screen.findByTestId('dropdown-popper-list');
-			expect(
-				await within(tagOptionsDropdown).findByTestId(`tag-option-${tagName}-#29B6F6`)
-			).toBeVisible();
-		});
 		it('should reset the input value to empty after changing action', async () => {
 			const newCompProps = {
 				...compProps,
diff --git a/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx b/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
index 511b441fb..5e7c41200 100644
--- a/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
@@ -12,6 +12,7 @@ import { generateStore } from '../../../../../../tests/generators/store';
 import { ShowTag } from '../../filter-actions/show-tag';
 
 const BLACK = '#000000';
+const COLOR_2 = '#29B6F6';
 describe('Show Tag', () => {
 	it('should render the tag input', async () => {
 		const store = generateStore();
@@ -97,13 +98,34 @@ describe('Show Tag', () => {
 
 	it('should render added chip with the tag avatar', async () => {
 		const store = generateStore();
+		const tagName = 'tag option 1';
 		const value = {
-			label: 'tag option 1'
+			label: tagName
 		};
 		setupTest(<ShowTag value={[value]} tagOptions={[]} onTagChange={jest.fn()} />, {
 			store
 		});
 
-		expect(within(screen.getByTestId('chip')).getByTestId('icon: Tag')).toBeVisible();
+		expect(
+			within(screen.getByTestId(`tag-${tagName}-${BLACK}`)).getByTestId('icon: Tag')
+		).toBeVisible();
+	});
+
+	it('should display the tag with the same color of corresponding option', async () => {
+		const tagName = 'Test Designer';
+		setupTest(
+			<ShowTag
+				tagOptions={[
+					{
+						label: tagName,
+						color: 2 // See Zimbra Colors variable: #29B6F6
+					}
+				]}
+				value={[{ label: tagName }]}
+				onTagChange={jest.fn()}
+			/>,
+			{}
+		);
+		expect(screen.getByTestId(`tag-${tagName}-${COLOR_2}`));
 	});
 });

From 3630f2f474ca6763ee0e575bd0393323684a6962 Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Wed, 18 Dec 2024 16:23:25 +0100
Subject: [PATCH 34/40] test: test rendering of Discard option

---
 .../parts/tests/filter-actions-rows.test.tsx      | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
index 2a1c920d8..ee17e823c 100644
--- a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
@@ -318,4 +318,19 @@ describe('FilterActionsRows', () => {
 			});
 		});
 	});
+	describe('Discard', () => {
+		it('should render the the discard option', async () => {
+			setupTest(
+				<FilterActionRows
+					tmpFilter={{
+						actionDiscard: [{}]
+					}}
+					index={0}
+					compProps={compProps}
+				/>,
+				{}
+			);
+			expect(await screen.findByText('Discard')).toBeVisible();
+		});
+	});
 });

From 99ba2cf54361432ecd84f75d200639e57cbbfb8d Mon Sep 17 00:00:00 2001
From: FrancescoGottardi <gottardifrancesco92@gmail.com>
Date: Wed, 18 Dec 2024 17:39:45 +0100
Subject: [PATCH 35/40] TEST: filter action row tests related to
 FeatureMailForwardingInFiltersEnabled

---
 .../parts/tests/filter-actions-rows.test.tsx  | 71 ++++++++++++++++++-
 1 file changed, 69 insertions(+), 2 deletions(-)

diff --git a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
index ee17e823c..701ffba0e 100644
--- a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
@@ -220,14 +220,55 @@ describe('FilterActionsRows', () => {
 			]);
 		});
 
-		it('dsaddas', async () => {
+		it('should inform the user that redirect action is disabled when zimbraFeatureMailForwardingInFiltersEnabled is FALSE on an already existing filter with action redirect', async () => {
 			const newCompProps = {
 				...compProps,
 				tempActions: [{ id: '1', actionKeep: [{}] }],
 				zimbraFeatureMailForwardingInFiltersEnabled: 'FALSE' as const
 			};
 
-			const { user } = setupTest(
+			setupTest(
+				<FilterActionRows
+					tmpFilter={{
+						actionRedirect: [{ flagName: 'flagged' }]
+					}}
+					index={0}
+					compProps={newCompProps}
+				/>,
+				{}
+			);
+
+			expect(screen.getByText('The Admin disabled the redirect action')).toBeVisible();
+		});
+		it('Redirect to address should not be the selected option if zimbraFeatureMailForwardingInFiltersEnabled is FALSE', async () => {
+			const newCompProps = {
+				...compProps,
+				tempActions: [{ id: '1', actionKeep: [{}] }],
+				zimbraFeatureMailForwardingInFiltersEnabled: 'FALSE' as const
+			};
+
+			setupTest(
+				<FilterActionRows
+					tmpFilter={{
+						actionRedirect: [{ flagName: 'flagged' }]
+					}}
+					index={0}
+					compProps={newCompProps}
+				/>,
+				{}
+			);
+
+			expect(screen.queryByText('Redirect to address')).not.toBeInTheDocument();
+		});
+
+		it('should  display Keep in Inbox as selected option if zimbraFeatureMailForwardingInFiltersEnabled is FALSE', async () => {
+			const newCompProps = {
+				...compProps,
+				tempActions: [{ id: '1', actionKeep: [{}] }],
+				zimbraFeatureMailForwardingInFiltersEnabled: 'FALSE' as const
+			};
+
+			setupTest(
 				<FilterActionRows
 					tmpFilter={{
 						actionRedirect: [{ flagName: 'flagged' }]
@@ -237,6 +278,32 @@ describe('FilterActionsRows', () => {
 				/>,
 				{}
 			);
+
+			expect(screen.getByText('Keep in Inbox')).toBeVisible();
+		});
+
+		it('Redirect to address should not be present in the dropdown options if zimbraFeatureMailForwardingInFiltersEnabled is FALSE', async () => {
+			const newCompProps = {
+				...compProps,
+				tempActions: [{ id: '1', actionKeep: [{}] }],
+				zimbraFeatureMailForwardingInFiltersEnabled: 'FALSE' as const
+			};
+
+			const { user } = setupTest(
+				<FilterActionRows
+					tmpFilter={{
+						actionKeep: [{}]
+					}}
+					index={0}
+					compProps={newCompProps}
+				/>,
+				{}
+			);
+			await user.click(screen.getByText('Keep in Inbox'));
+
+			expect(
+				within(screen.getByTestId('dropdown-popper-list')).queryByText('Redirect to address')
+			).not.toBeInTheDocument();
 		});
 	});
 

From 35a5c6f4b20ec95497165104b0437e98ff0fc67b Mon Sep 17 00:00:00 2001
From: FrancescoGottardi <gottardifrancesco92@gmail.com>
Date: Wed, 18 Dec 2024 18:02:52 +0100
Subject: [PATCH 36/40] TEST: add/remove tag from tag action

---
 .../filters/parts/filter-action-rows.tsx      |  8 ++-
 .../filters/parts/filter-actions/show-tag.tsx |  8 ++-
 .../parts/tests/filter-actions-rows.test.tsx  | 52 +++++++++++++++++++
 3 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/src/views/settings/filters/parts/filter-action-rows.tsx b/src/views/settings/filters/parts/filter-action-rows.tsx
index 9a3dac22d..048b3ce09 100644
--- a/src/views/settings/filters/parts/filter-action-rows.tsx
+++ b/src/views/settings/filters/parts/filter-action-rows.tsx
@@ -265,7 +265,6 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 				const requiredTag = chip.length > 1 ? chip[1] : chip[0];
 				setTag([requiredTag]);
 				previous[index] = { id: previous[index]?.id, actionTag: [{ tagName: requiredTag.label }] };
-				setTempActions(previous);
 			} else {
 				previous[index] = { id: previous[index]?.id, actionTag: [{ tagName: '' }] };
 				setTag([]);
@@ -345,7 +344,12 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 				{showRedirectToAddrsInput && <RedirectTo defaultValue={contacts} onChange={onChange} />}
 
 				{showTagOptions && (
-					<ShowTag value={tag} tagOptions={tagOptions} onTagChange={onTagChange} />
+					<ShowTag
+						value={tag}
+						tagOptions={tagOptions}
+						onTagChange={onTagChange}
+						data-testid={'tag-input'}
+					/>
 				)}
 			</Row>
 			<Container orientation="horizontal" mainAlignment="flex-end" width="auto">
diff --git a/src/views/settings/filters/parts/filter-actions/show-tag.tsx b/src/views/settings/filters/parts/filter-actions/show-tag.tsx
index c8704c8f6..8d38ca6ba 100644
--- a/src/views/settings/filters/parts/filter-actions/show-tag.tsx
+++ b/src/views/settings/filters/parts/filter-actions/show-tag.tsx
@@ -26,7 +26,12 @@ type ShowTagProps = {
 	onTagChange: (chip: MailFilterTag[]) => void;
 };
 
-export const ShowTag = ({ value, tagOptions, onTagChange }: ShowTagProps): React.JSX.Element => {
+export const ShowTag = ({
+	value,
+	tagOptions,
+	onTagChange,
+	...rest
+}: ShowTagProps): React.JSX.Element => {
 	const [t] = useTranslation();
 
 	const tagChipOptions = tagOptions?.map(
@@ -96,6 +101,7 @@ export const ShowTag = ({ value, tagOptions, onTagChange }: ShowTagProps): React
 				onAdd={tagChipOnAdd}
 				disableOptions={false}
 				disabled
+				{...rest}
 			/>
 		</Row>
 	);
diff --git a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
index 701ffba0e..18b929822 100644
--- a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
@@ -360,6 +360,8 @@ describe('FilterActionsRows', () => {
 
 			expect(screen.queryByText(filterName)).not.toBeInTheDocument();
 		});
+
+		// TODO: check if we still want this test since seems hard to retrieve the console error
 		it.skip('should break if tempAction is empty and user is switching action', async () => {
 			const newCompProps = {
 				...compProps,
@@ -384,6 +386,56 @@ describe('FilterActionsRows', () => {
 				expect(error).toBe('');
 			});
 		});
+
+		it('should update tag action value if a new tag is selected', async () => {
+			const newCompProps = {
+				...compProps,
+				tempActions: [{}]
+			};
+			const { user } = setupTest(
+				<FilterActionRows
+					tmpFilter={{
+						actionTag: [{}]
+					}}
+					tagOptions={[{ label: 'Tag 1' }]}
+					index={0}
+					compProps={newCompProps}
+				/>,
+				{}
+			);
+
+			await user.click(screen.getByText('Tag'));
+			await user.click(screen.getByText('Tag 1'));
+
+			expect(compProps.setTempActions).toHaveBeenCalledTimes(1);
+			expect(compProps.setTempActions).toHaveBeenCalledWith([
+				{ actionTag: [{ tagName: 'Tag 1' }], id: undefined }
+			]);
+		});
+		it('should update tag action value if a new tag is selected', async () => {
+			const newCompProps = {
+				...compProps,
+				tempActions: [{}]
+			};
+			const { user } = setupTest(
+				<FilterActionRows
+					tmpFilter={{
+						actionTag: [{ tagName: 'Tag to remove' }]
+					}}
+					tagOptions={[{ label: 'Tag 1' }]}
+					index={0}
+					compProps={newCompProps}
+				/>,
+				{}
+			);
+
+			await user.click(within(screen.getByTestId('tag-input')).getByTestId('icon: Close'));
+
+			expect(compProps.setTempActions).toHaveBeenCalledTimes(1);
+			expect(compProps.setTempActions).toHaveBeenCalledWith([
+				{ actionTag: [{ tagName: '' }], id: undefined }
+			]);
+		});
 	});
 	describe('Discard', () => {
 		it('should render the the discard option', async () => {

From a4e3db96e7530a0dee8caac95eafea1e3f882d98 Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Wed, 18 Dec 2024 18:15:32 +0100
Subject: [PATCH 37/40] test: add tests on discard and changing action

---
 .../parts/tests/filter-actions-rows.test.tsx  | 48 ++++++++++++++++++-
 1 file changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
index 18b929822..089700c3c 100644
--- a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
@@ -106,6 +106,31 @@ describe('FilterActionsRows', () => {
 		await user.click(removeButton);
 		expect(compProps.setTempActions).not.toHaveBeenCalled();
 	});
+	it('should update actions using same action id as action at index number when selecting a new action', async () => {
+		const mockCompProps = {
+			...compProps,
+			tempActions: [{ id: '7' }, { id: '21' }, { id: '33' }]
+		};
+		const { user } = setupTest(
+			<FilterActionRows
+				tmpFilter={{
+					actionKeep: [{}]
+				}}
+				index={1}
+				compProps={mockCompProps}
+			/>,
+			{}
+		);
+		await user.click(screen.getByText('Keep in Inbox'));
+		const dropdown = screen.getByTestId('dropdown-popper-list');
+		await user.click(within(dropdown).getByText('Discard'));
+
+		expect(mockCompProps.setTempActions).toHaveBeenCalledWith([
+			{ id: '7' },
+			{ id: '21', actionDiscard: [{}] },
+			{ id: '33' }
+		]);
+	});
 
 	describe('Keep In Inbox', () => {
 		it('should render the selected action', async () => {
@@ -438,7 +463,7 @@ describe('FilterActionsRows', () => {
 		});
 	});
 	describe('Discard', () => {
-		it('should render the the discard option', async () => {
+		it('should render the the discard option if selected', async () => {
 			setupTest(
 				<FilterActionRows
 					tmpFilter={{
@@ -451,5 +476,26 @@ describe('FilterActionsRows', () => {
 			);
 			expect(await screen.findByText('Discard')).toBeVisible();
 		});
+		it('should render the the discard option after selecting it', async () => {
+			const mockCompProps = {
+				...compProps,
+				tempActions: [{ id: '1' }]
+			};
+			const { user } = setupTest(
+				<FilterActionRows
+					tmpFilter={{
+						actionKeep: [{}]
+					}}
+					index={0}
+					compProps={mockCompProps}
+				/>,
+				{}
+			);
+			await user.click(screen.getByText('Keep in Inbox'));
+			const dropdown = screen.getByTestId('dropdown-popper-list');
+			await user.click(within(dropdown).getByText('Discard'));
+
+			expect(await screen.findByText('Discard')).toBeVisible();
+		});
 	});
 });

From 24d257d152f947c51fe72ffdf8e364c63238a83e Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Wed, 18 Dec 2024 18:19:01 +0100
Subject: [PATCH 38/40] test(show-tag): assert visibility

---
 .../filters/parts/tests/filter-actions/show-tag.test.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx b/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
index 5e7c41200..d27a18728 100644
--- a/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions/show-tag.test.tsx
@@ -126,6 +126,6 @@ describe('Show Tag', () => {
 			/>,
 			{}
 		);
-		expect(screen.getByTestId(`tag-${tagName}-${COLOR_2}`));
+		expect(screen.getByTestId(`tag-${tagName}-${COLOR_2}`)).toBeVisible();
 	});
 });

From 8d4c2568aa228b8adfb4e5cc4a778196781b07f2 Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Wed, 18 Dec 2024 18:20:05 +0100
Subject: [PATCH 39/40] chore: remove setDestination commented code

- setDestination is not available anymore anyway
---
 src/views/settings/filters/parts/filter-action-rows.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/settings/filters/parts/filter-action-rows.tsx b/src/views/settings/filters/parts/filter-action-rows.tsx
index 048b3ce09..c414c4694 100644
--- a/src/views/settings/filters/parts/filter-action-rows.tsx
+++ b/src/views/settings/filters/parts/filter-action-rows.tsx
@@ -291,7 +291,6 @@ const FilterActionRows: FC<FilterActionRowProps> = ({
 				actionFileInto: [{ folderPath: `${folderDestination?.absFolderPath}` }]
 			};
 			setTempActions(previous);
-			// setDestination({ name: folderDestination?.name });
 		},
 		[tempActions, activeIndex, setTempActions]
 	);

From f574b0c9b2d542af07d9e9d15ba8b3118a02f6ee Mon Sep 17 00:00:00 2001
From: Davide Frison <davide.frison@zextras.com>
Date: Wed, 18 Dec 2024 18:31:09 +0100
Subject: [PATCH 40/40] test: add test on move to folder action at
 filter-actions-rows.test.tsx

---
 .../parts/tests/filter-actions-rows.test.tsx  | 61 ++++++++++++++++---
 1 file changed, 54 insertions(+), 7 deletions(-)

diff --git a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
index 089700c3c..27e852b39 100644
--- a/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
+++ b/src/views/settings/filters/parts/tests/filter-actions-rows.test.tsx
@@ -6,9 +6,17 @@
 
 import React from 'react';
 
-import { screen, within } from '@testing-library/react';
-
-import { setupTest } from '../../../../../carbonio-ui-commons/test/test-setup';
+import { act, screen, within } from '@testing-library/react';
+
+import { FOLDER_VIEW } from '../../../../../carbonio-ui-commons/constants';
+import { FOLDERS } from '../../../../../carbonio-ui-commons/constants/folders';
+import { generateFolder } from '../../../../../carbonio-ui-commons/test/mocks/folders/folders-generator';
+import { populateFoldersStore } from '../../../../../carbonio-ui-commons/test/mocks/store/folders';
+import {
+	makeListItemsVisible,
+	setupTest
+} from '../../../../../carbonio-ui-commons/test/test-setup';
+import { generateStore } from '../../../../../tests/generators/store';
 import FilterActionRows from '../filter-action-rows';
 
 describe('FilterActionsRows', () => {
@@ -30,7 +38,6 @@ describe('FilterActionsRows', () => {
 			{}
 		);
 	});
-
 	it('adds a new filter condition when the add button is clicked', async () => {
 		const newCompProps = {
 			...compProps,
@@ -56,7 +63,6 @@ describe('FilterActionsRows', () => {
 			})
 		]);
 	});
-
 	it('removes a filter condition when the remove button is clicked', async () => {
 		const newCompProps = {
 			...compProps,
@@ -81,7 +87,6 @@ describe('FilterActionsRows', () => {
 			expect.objectContaining({ id: '2', actionStop: [{}] })
 		]);
 	});
-
 	it('disables the remove button when there is only one filter condition', async () => {
 		const newCompProps = {
 			...compProps,
@@ -331,7 +336,6 @@ describe('FilterActionsRows', () => {
 			).not.toBeInTheDocument();
 		});
 	});
-
 	describe('Tag With', () => {
 		it('should display the saved tag', async () => {
 			const filterName = 'Test Designer';
@@ -462,6 +466,49 @@ describe('FilterActionsRows', () => {
 			]);
 		});
 	});
+	describe('Move To Folder', () => {
+		it('should update the action value with the selected folder on confirm', async () => {
+			const store = generateStore();
+			const folder = generateFolder({
+				id: '100',
+				name: 'Test folder'
+			});
+			const rootFolder = generateFolder({
+				id: FOLDERS.USER_ROOT,
+				name: 'Root',
+				children: [folder]
+			});
+			populateFoldersStore({
+				view: FOLDER_VIEW.message,
+				customFolders: [rootFolder]
+			});
+			const { user } = setupTest(
+				<FilterActionRows
+					tmpFilter={{
+						actionFileInto: [{}]
+					}}
+					index={0}
+					compProps={compProps}
+				/>,
+				{ store }
+			);
+			const browseFolder = screen.getByRole('button', {
+				name: /browse/i
+			});
+			await user.click(browseFolder);
+			makeListItemsVisible();
+			act(() => {
+				jest.advanceTimersByTime(1000);
+			});
+			await user.click(screen.getByTestId(`folder-accordion-item-${folder.id}`));
+			const chooseFolder = screen.getByRole('button', { name: 'Choose' });
+			expect(chooseFolder).toBeEnabled();
+			await user.click(chooseFolder);
+			expect(compProps.setTempActions).toHaveBeenCalledWith([
+				expect.objectContaining({ actionFileInto: expect.anything() })
+			]);
+		});
+	});
 	describe('Discard', () => {
 		it('should render the the discard option if selected', async () => {
 			setupTest(