{tasksDiplayed?.map((task) => (
{`${task.type} ${task.message}`}
))}
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/__test__/GeneralInformation.spec.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/__test__/GeneralInformation.spec.tsx
new file mode 100644
index 000000000000..66cb3ca408e3
--- /dev/null
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/__test__/GeneralInformation.spec.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { describe, expect, vi } from 'vitest';
+import { useSearchParams } from 'react-router-dom';
+import GeneralInformation from '../GeneralInformation';
+import { render } from '@/utils/test.provider';
+import dashboardTranslation from '@/public/translations/dashboard/Messages_fr_FR.json';
+import { organizationDetailMock } from '@/api/_mock_';
+
+describe('General Informations page', () => {
+ it('should display page correctly', async () => {
+ const { findByText, getByTestId, queryByTestId } = render(
+
,
+ );
+
+ const title = await findByText(
+ dashboardTranslation.zimbra_dashboard_tile_status_title,
+ );
+ const serviceStatus = queryByTestId('tileblock-orga');
+ const accounts = getByTestId('platform-accounts');
+
+ expect(title).toBeVisible();
+ expect(serviceStatus).toBeNull();
+ expect(accounts).toBeInTheDocument();
+ });
+
+ it('should display organization status', async () => {
+ vi.mocked(useSearchParams).mockReturnValue([
+ new URLSearchParams({
+ organizationId: organizationDetailMock.id,
+ }),
+ vi.fn(),
+ ]);
+
+ const { findByText, getByTestId } = render(
);
+
+ const title = await findByText(
+ dashboardTranslation.zimbra_dashboard_tile_status_title,
+ );
+
+ const serviceStatus = getByTestId('tileblock-orga');
+
+ expect(title).toBeVisible();
+ expect(serviceStatus).toBeInTheDocument();
+ });
+});
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/__test__/OngoingTasks.spec.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/__test__/OngoingTasks.spec.tsx
new file mode 100644
index 000000000000..7d6537d0642a
--- /dev/null
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/__test__/OngoingTasks.spec.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { describe, expect } from 'vitest';
+import { OngoingTasks } from '../OngoingTasks';
+import { render } from '@/utils/test.provider';
+
+describe('OngoingTasks component', () => {
+ it('should display component correctly', async () => {
+ const { getByTestId } = render(
);
+
+ const wrap = getByTestId('ongoingtasks');
+
+ expect(wrap).toBeVisible();
+ });
+});
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/ActionButtonMailingList.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/ActionButtonMailingList.component.tsx
new file mode 100644
index 000000000000..e70ae4e7dc05
--- /dev/null
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/ActionButtonMailingList.component.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ActionMenu } from '@ovh-ux/manager-react-components';
+import { useGenerateUrl, usePlatform } from '@/hooks';
+import { IAM_ACTIONS } from '@/utils/iamAction.constants';
+import { MailingListItem } from './MailingLists';
+import { ResourceStatus } from '@/api/api.type';
+
+interface ActionButtonMailingListProps {
+ mailingListItem: MailingListItem;
+}
+
+const ActionButtonMailingList: React.FC
= ({
+ mailingListItem,
+}) => {
+ const { t } = useTranslation('mailinglists');
+ const { platformUrn } = usePlatform();
+
+ const hrefDeleteMailingList = useGenerateUrl('./delete', 'href', {
+ deleteMailingListId: mailingListItem.id,
+ });
+
+ const hrefEditMailingList = useGenerateUrl('./settings', 'href', {
+ editMailingListId: mailingListItem.id,
+ });
+
+ const hrefDefineMembersMailingList = useGenerateUrl(
+ './define_members',
+ 'href',
+ {
+ mailingListId: mailingListItem.id,
+ },
+ );
+
+ const hrefConfigureDelegationMailingList = useGenerateUrl(
+ './configure_delegation',
+ 'href',
+ {
+ mailingListId: mailingListItem.id,
+ },
+ );
+
+ const actionItems = [
+ {
+ id: 1,
+ href: hrefEditMailingList,
+ urn: platformUrn,
+ iamActions: [IAM_ACTIONS.mailingList.edit],
+ label: t('zimbra_mailinglists_datagrid_action_edit'),
+ },
+ {
+ id: 2,
+ href: hrefDefineMembersMailingList,
+ urn: platformUrn,
+ iamActions: [IAM_ACTIONS.mailingList.edit],
+ label: t('zimbra_mailinglists_datagrid_action_define_members'),
+ },
+ {
+ id: 3,
+ href: hrefConfigureDelegationMailingList,
+ urn: platformUrn,
+ iamActions: [IAM_ACTIONS.mailingList.edit],
+ label: t('zimbra_mailinglists_datagrid_action_configure_delegation'),
+ },
+ {
+ id: 4,
+ href: hrefDeleteMailingList,
+ urn: platformUrn,
+ iamActions: [IAM_ACTIONS.mailingList.delete],
+ label: t('zimbra_mailinglists_datagrid_action_delete'),
+ },
+ ];
+
+ return (
+
+ );
+};
+
+export default ActionButtonMailingList;
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/AddAndEditMailingList.page.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/AddAndEditMailingList.page.tsx
new file mode 100644
index 000000000000..246e2080b411
--- /dev/null
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/AddAndEditMailingList.page.tsx
@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { Links, LinkType, Subtitle } from '@ovh-ux/manager-react-components';
+import {
+ useDomains,
+ useGenerateUrl,
+ usePlatform,
+ useMailingList,
+} from '@/hooks';
+import Loading from '@/components/Loading/Loading';
+import MailingListSettings from './MailingListSettings.page';
+
+export default function AddAndEditMailingList() {
+ const { t } = useTranslation('mailinglists/addAndEdit');
+ const location = useLocation();
+ const navigate = useNavigate();
+ const { platformId } = usePlatform();
+ const [searchParams] = useSearchParams();
+ const editMailingListId = searchParams.get('editMailingListId');
+ const [isLoading, setIsLoading] = useState(true);
+ const goBackUrl = useGenerateUrl('..', 'path');
+
+ const goBack = () => {
+ return navigate(goBackUrl);
+ };
+
+ const {
+ data: editMailingListDetail,
+ isLoading: isLoadingMailingListDetailRequest,
+ } = useMailingList({ mailingListId: editMailingListId });
+
+ const { data: domainList, isLoading: isLoadingDomainRequest } = useDomains();
+
+ useEffect(() => {
+ if (
+ !isLoadingMailingListDetailRequest &&
+ !isLoadingDomainRequest &&
+ platformId
+ ) {
+ setIsLoading(false);
+ }
+ }, [
+ isLoadingMailingListDetailRequest,
+ isLoadingDomainRequest,
+ location.pathname,
+ ]);
+
+ return (
+ <>
+ {isLoading && }
+ {!isLoading && (
+ <>
+
+
+
+ {!editMailingListDetail
+ ? t('zimbra_mailinglist_add_title')
+ : t('zimbra_mailinglist_edit_title')}
+
+
+
+
+ )}
+
+ );
+}
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/MailingListSettings.page.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/MailingListSettings.page.tsx
new file mode 100644
index 000000000000..ded5e55e2a32
--- /dev/null
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/MailingListSettings.page.tsx
@@ -0,0 +1,601 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useNotifications } from '@ovh-ux/manager-react-components';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import {
+ OsdsButton,
+ OsdsFormField,
+ OsdsInput,
+ OsdsMessage,
+ OsdsRadio,
+ OsdsRadioButton,
+ OsdsRadioGroup,
+ OsdsSelect,
+ OsdsSelectOption,
+ OsdsText,
+ OsdsToggle,
+ OsdsTooltipContent,
+ OsdsIcon,
+ OsdsTooltip,
+} from '@ovhcloud/ods-components/react';
+import {
+ ODS_THEME_COLOR_HUE,
+ ODS_THEME_COLOR_INTENT,
+ ODS_THEME_TYPOGRAPHY_LEVEL,
+ ODS_THEME_TYPOGRAPHY_SIZE,
+} from '@ovhcloud/ods-common-theming';
+import {
+ ODS_BUTTON_VARIANT,
+ ODS_ICON_NAME,
+ ODS_ICON_SIZE,
+ ODS_INPUT_SIZE,
+ ODS_INPUT_TYPE,
+ ODS_MESSAGE_TYPE,
+ ODS_RADIO_BUTTON_SIZE,
+ ODS_TEXT_LEVEL,
+ ODS_TEXT_SIZE,
+} from '@ovhcloud/ods-components';
+import { ApiError } from '@ovh-ux/manager-core-api';
+import { useMutation } from '@tanstack/react-query';
+import { useGenerateUrl, usePlatform } from '@/hooks';
+import {
+ postZimbraPlatformMailingList,
+ putZimbraPlatformMailingList,
+ MailingListType,
+ MailingListBodyParamsType,
+ ReplyToChoices,
+ ModerationChoices,
+ getZimbraPlatformMailingListsQueryKey,
+} from '@/api/mailinglist';
+import { DomainType } from '@/api/domain';
+import { formInputRegex } from './mailingList.constants';
+import {
+ checkValidityField,
+ checkValidityForm,
+ FormTypeInterface,
+} from '@/utils';
+import queryClient from '@/queryClient';
+
+const replyToChoices = [
+ {
+ value: ReplyToChoices.LIST,
+ key: 'zimbra_mailinglist_add_reply_to_list',
+ },
+ {
+ value: ReplyToChoices.SENDER,
+ key: 'zimbra_mailinglist_add_reply_to_sender',
+ },
+ {
+ value: ReplyToChoices.MAILBOX,
+ key: 'zimbra_mailinglist_add_reply_to_another_mailbox',
+ },
+];
+
+const moderationChoices = [
+ {
+ value: ModerationChoices.ALL,
+ key: 'zimbra_mailinglist_add_moderation_choice_all',
+ },
+ {
+ value: ModerationChoices.SUBSONLY,
+ key: 'zimbra_mailinglist_add_moderation_choice_subs_only',
+ },
+ {
+ value: ModerationChoices.NONE,
+ key: 'zimbra_mailinglist_add_moderation_choice_none',
+ },
+];
+
+// fetch this from api ?
+const languageList = ['FR', 'EN', 'ES'];
+
+export default function MailingListSettings({
+ domainList = [],
+ editMailingListDetail = null,
+}: Readonly<{
+ domainList: DomainType[];
+ editMailingListDetail: MailingListType;
+}>) {
+ const { t } = useTranslation('mailinglists/addAndEdit');
+ const navigate = useNavigate();
+ const { addError, addSuccess } = useNotifications();
+ const { platformId } = usePlatform();
+ const [searchParams] = useSearchParams();
+ const editMailingListId = searchParams.get('editMailingListId');
+ const organizationIdParam = searchParams.get('organizationId');
+ const [isFormValid, setIsFormValid] = useState(false);
+ const [selectedDomainOrganization, setSelectedDomainOrganization] = useState(
+ '',
+ );
+ const goBackUrl = useGenerateUrl('..', 'path');
+
+ const goBack = () => {
+ return navigate(goBackUrl);
+ };
+
+ const [form, setForm] = useState({
+ ...{
+ account: {
+ value: '',
+ touched: false,
+ required: true,
+ },
+ domain: {
+ value: '',
+ touched: false,
+ required: true,
+ },
+ defaultReplyTo: {
+ value: '',
+ touched: false,
+ required: true,
+ },
+ owner: {
+ value: '',
+ touched: false,
+ required: true,
+ },
+ language: {
+ value: '',
+ touched: false,
+ required: true,
+ },
+ moderationOption: {
+ value: '',
+ touched: false,
+ required: false,
+ },
+ subscriberModeration: {
+ value: '',
+ touched: false,
+ required: false,
+ },
+ },
+ });
+
+ const getDataBody = useCallback(
+ (formRef: FormTypeInterface) => {
+ const {
+ account: { value: account },
+ domain: { value: domain },
+ } = form;
+
+ let dataBody = {
+ email: `${account}@${domain}`,
+ };
+
+ Object.entries(formRef).forEach(([key, { value }]) => {
+ if (!['account', 'domain'].includes(key)) {
+ dataBody = { ...dataBody, [key]: value };
+ }
+ });
+
+ return dataBody;
+ },
+ [form],
+ );
+
+ useEffect(() => {
+ if (editMailingListDetail) {
+ const newForm: FormTypeInterface = form;
+ const {
+ email,
+ defaultReplyTo,
+ language,
+ owner,
+ moderationOption,
+ } = editMailingListDetail.currentState;
+ const [account, domain] = email.split('@');
+ newForm.account.value = account;
+ newForm.domain.value = domain;
+ newForm.defaultReplyTo.value = defaultReplyTo;
+ newForm.owner.value = owner;
+ newForm.language.value = language;
+ newForm.moderationOption.value = moderationOption;
+ setForm((oldForm) => ({ ...oldForm, ...newForm }));
+ }
+ }, []);
+
+ const handleFormChange = (name: string, value: string) => {
+ const newForm: FormTypeInterface = form;
+ newForm[name] = {
+ ...form[name],
+ value,
+ touched: true,
+ hasError: !checkValidityField(name, value, formInputRegex, form),
+ };
+ setForm((oldForm) => ({ ...oldForm, ...newForm }));
+ setIsFormValid(checkValidityForm(form));
+ };
+
+ const handleDomainChange = (selectedDomain: string) => {
+ const organizationLabel = domainList.find(
+ ({ currentState }) => currentState.name === selectedDomain,
+ )?.currentState.organizationLabel;
+ handleFormChange('domain', selectedDomain);
+ setSelectedDomainOrganization(organizationLabel);
+ };
+
+ const { mutate: addOrEditMailingList, isPending: isSending } = useMutation({
+ mutationFn: (params: MailingListBodyParamsType) => {
+ return editMailingListId
+ ? putZimbraPlatformMailingList(platformId, editMailingListId, params)
+ : postZimbraPlatformMailingList(platformId, params);
+ },
+ onSuccess: () => {
+ addSuccess(
+
+ {t(
+ editMailingListId
+ ? 'zimbra_mailinglist_edit_success_message'
+ : 'zimbra_mailinglist_add_success_message',
+ )}
+ ,
+ true,
+ );
+ },
+ onError: (error: ApiError) => {
+ addError(
+
+ {t(
+ editMailingListId
+ ? 'zimbra_mailinglist_edit_error_message'
+ : 'zimbra_mailinglist_add_error_message',
+ {
+ error: error.response?.data?.message,
+ },
+ )}
+ ,
+ true,
+ );
+ },
+ onSettled: () => {
+ queryClient.invalidateQueries({
+ queryKey: getZimbraPlatformMailingListsQueryKey(platformId),
+ });
+ goBack();
+ },
+ });
+
+ const handleSavelick = () => {
+ addOrEditMailingList(getDataBody(form));
+ };
+
+ return (
+
+
+ {!editMailingListId
+ ? t('zimbra_mailinglist_add_header')
+ : t('zimbra_mailinglist_edit_header')}
+
+
+ {t('zimbra_mailinglist_mandatory_fields')}
+
+
+
+
+ {t('zimbra_mailinglist_add_input_email_label')} *
+
+
+
+
+ handleFormChange(name, value.toString())
+ }
+ onOdsValueChange={({ detail: { name, value } }) => {
+ handleFormChange(name, value);
+ }}
+ >
+
+
+ handleDomainChange(e.detail.value as string)
+ }
+ data-testid="select-domain"
+ >
+
+ {t('zimbra_mailinglist_add_select_domain_placeholder')}
+
+ {domainList?.map(({ currentState: domain }) => (
+
+ {domain.name}
+
+ ))}
+
+
+
+ {selectedDomainOrganization && !organizationIdParam && (
+
+
+ {t('zimbra_mailinglist_add_message_organization', {
+ organization: selectedDomainOrganization,
+ })}
+
+
+ )}
+
+
+
+ {t('zimbra_mailinglist_add_input_owner_label')} *
+
+
+
+
+ handleFormChange(name, value.toString())
+ }
+ onOdsValueChange={({ detail: { name, value } }) => {
+ handleFormChange(name, value);
+ }}
+ >
+
+
+
+
+
+ {t('zimbra_mailinglist_add_reply_to_label')} *
+
+
+
+
+ handleFormChange('defaultReplyTo', event.detail.newValue)
+ }
+ >
+ {replyToChoices.map(({ value, key }) => (
+
+
+
+
+ {t(key)}
+
+
+
+
+ ))}
+
+
+
+
+
+
+ {t('zimbra_mailinglist_add_language_label')} *
+
+
+
+
+ handleFormChange(e.detail.name, e.detail.value as string)
+ }
+ >
+
+ {t('zimbra_mailinglist_add_select_language_placeholder')}
+
+ {languageList?.map((lang) => (
+
+ {lang}
+
+ ))}
+
+
+
+
+
+
+ {t('zimbra_mailinglist_add_moderation_choice_label')}
+
+
+
+
+ handleFormChange('moderationOption', event.detail.newValue)
+ }
+ >
+ {moderationChoices.map(({ value, key }) => (
+
+
+
+
+ {t(key)}
+
+
+
+
+ ))}
+
+
+ handleFormChange(
+ 'subscriberModeration',
+ form.subscriberModeration.value === 'true' ? 'false' : 'true',
+ )
+ }
+ {...(form.subscriberModeration.value === 'true'
+ ? { checked: true }
+ : {})}
+ >
+
+
+ {t('zimbra_mailinglist_add_subscriber_moderation')}
+
+
+
+
+ {t(
+ 'zimbra_mailinglist_add_subscriber_moderation_tooltip',
+ )}
+
+
+
+
+
+ {t('zimbra_mailinglist_add_subscriber_moderation_info', {
+ max: 250,
+ })}
+
+
+
+
+
+
+ {t('zimbra_mailinglist_add_button_confirm')}
+
+ {editMailingListId && (
+
+ {t('zimbra_mailinglist_add_button_cancel')}
+
+ )}
+
+
+
+
+ {platformUrn && !isOverridedPage && (
+ <>
+
+
+
+ {t('zimbra_mailinglists_quota_label')}
+ {` ${quota}/1000`}
+
+
+
+
+
+
+ {t('zimbra_mailinglists_datagrid_cta')}
+
+
+ {isLoading ? (
+
+ ) : (
+
({
+ ...column,
+ label: t(column.label),
+ }))}
+ items={items}
+ totalItems={items.length}
+ />
+ )}
+
+ )}
+ Notifications
),
- Datagrid: vi.fn().mockReturnValue(Datagrid
),
- };
-});
-
-afterEach(() => {
- vi.clearAllMocks();
-});
+const addUrl = '#/00000000-0000-0000-0000-000000000001/organizations/add?';
describe('Organizations page', () => {
- it('Page should display correctly', () => {
+ it('Page should display correctly', async () => {
+ vi.mocked(useGenerateUrl).mockReturnValue(addUrl);
const { getByTestId } = render();
+
+ await waitFor(() => {
+ expect(getByTestId('add-organization-btn')).toBeInTheDocument();
+ });
+
const button = getByTestId('add-organization-btn');
- expect(button).toHaveAttribute(
- 'href',
- '#/00000000-0000-0000-0000-000000000001/organizations/add?',
- );
+ expect(button).toHaveAttribute('href', addUrl);
expect(button).toHaveTextContent(
organizationsTranslation.add_organisation_cta,
);
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ActionButtonRedirections.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ActionButtonRedirections.component.tsx
new file mode 100644
index 000000000000..8913db0808df
--- /dev/null
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ActionButtonRedirections.component.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ActionMenu } from '@ovh-ux/manager-react-components';
+import { useSearchParams } from 'react-router-dom';
+import { RedirectionsItem } from './Redirections';
+import { useGenerateUrl, usePlatform } from '@/hooks';
+import { IAM_ACTIONS } from '@/utils/iamAction.constants';
+import { ResourceStatus } from '@/api/api.type';
+import { FEATURE_FLAGS } from '@/utils';
+
+interface ActionButtonRedirectionsAccountProps {
+ redirectionsItem: RedirectionsItem;
+}
+
+const ActionButtonRedirections: React.FC = ({
+ redirectionsItem,
+}) => {
+ const { t } = useTranslation('redirections');
+ const { platformUrn } = usePlatform();
+
+ const [searchParams] = useSearchParams();
+ const params = Object.fromEntries(searchParams.entries());
+
+ const hrefEditRedirections = useGenerateUrl('./edit', 'href', {
+ editRedirectionId: redirectionsItem.id,
+ ...params,
+ });
+
+ const hrefDeleteRedirections = useGenerateUrl('./delete', 'href', {
+ deleteRedirectionId: redirectionsItem.id,
+ ...params,
+ });
+
+ const actionItems = [
+ {
+ id: 1,
+ href: hrefEditRedirections,
+ urn: platformUrn,
+ iamActions: [IAM_ACTIONS.redirection.edit],
+ label: t('zimbra_redirections_datagrid_tooltip_modification'),
+ hidden: !FEATURE_FLAGS.REDIRECTIONS_EDIT,
+ },
+ {
+ id: 2,
+ href: hrefDeleteRedirections,
+ urn: platformUrn,
+ iamActions: [IAM_ACTIONS.redirection.delete],
+ label: t('zimbra_redirections_datagrid_tooltip_delete'),
+ },
+ ];
+ return (
+ !i.hidden)}
+ isCompact
+ />
+ );
+};
+
+export default ActionButtonRedirections;
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ModalAddAndEditRedirections.page.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ModalAddAndEditRedirections.page.tsx
new file mode 100644
index 000000000000..089e94627ce6
--- /dev/null
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ModalAddAndEditRedirections.page.tsx
@@ -0,0 +1,339 @@
+import React, { useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import {
+ ODS_THEME_COLOR_INTENT,
+ ODS_THEME_TYPOGRAPHY_LEVEL,
+ ODS_THEME_TYPOGRAPHY_SIZE,
+} from '@ovhcloud/ods-common-theming';
+import {
+ OsdsCheckboxButton,
+ OsdsFormField,
+ OsdsInput,
+ OsdsSelect,
+ OsdsSelectOption,
+ OsdsText,
+} from '@ovhcloud/ods-components/react';
+import { useTranslation } from 'react-i18next';
+import {
+ ODS_CHECKBOX_BUTTON_SIZE,
+ ODS_INPUT_SIZE,
+ ODS_INPUT_TYPE,
+} from '@ovhcloud/ods-components';
+import { useNotifications } from '@ovh-ux/manager-react-components';
+import Modal from '@/components/Modals/Modal';
+import { useAccount, useDomains, useGenerateUrl } from '@/hooks';
+import {
+ FormTypeInterface,
+ FormInputRegexInterface,
+ checkValidityField,
+ checkValidityForm,
+ ACCOUNT_REGEX,
+ EMAIL_REGEX,
+} from '@/utils';
+import Loading from '@/components/Loading/Loading';
+
+export default function ModalAddAndEditRedirections() {
+ const { t } = useTranslation('redirections/addAndEdit');
+ const navigate = useNavigate();
+
+ const [searchParams] = useSearchParams();
+ const editEmailAccountId = searchParams.get('editEmailAccountId');
+ const editRedirectionId = searchParams.get('editRedirectionId');
+ const params = Object.fromEntries(searchParams.entries());
+ delete params.editRedirectionId;
+
+ const goBackUrl = useGenerateUrl('..', 'path', params);
+ const onClose = () => navigate(goBackUrl);
+
+ const { addError, addSuccess } = useNotifications();
+ const [isFormValid, setIsFormValid] = useState(false);
+
+ const { data: domainList, isLoading: isLoadingDomain } = useDomains({
+ enabled: !editEmailAccountId && !editRedirectionId,
+ });
+
+ const { data: accountDetail, isLoading: isLoadingAccount } = useAccount({
+ accountId: editEmailAccountId,
+ enabled: !!editEmailAccountId,
+ });
+
+ const formInputRegex: FormInputRegexInterface = {
+ account: ACCOUNT_REGEX,
+ to: EMAIL_REGEX,
+ };
+
+ const [form, setForm] = useState({
+ account: {
+ value: '',
+ touched: false,
+ hasError: false,
+ required: !editEmailAccountId,
+ },
+ domain: {
+ value: '',
+ touched: false,
+ hasError: false,
+ required: !editEmailAccountId,
+ },
+ to: {
+ value: '',
+ touched: false,
+ hasError: false,
+ required: true,
+ },
+ checked: {
+ value: '',
+ touched: false,
+ hasError: false,
+ required: false,
+ },
+ });
+
+ const handleFormChange = (name: string, value: string) => {
+ const newForm: FormTypeInterface = form;
+ newForm[name] = {
+ value,
+ touched: true,
+ required: form[name].required,
+ hasError: !checkValidityField(name, value, formInputRegex, form),
+ };
+ setForm((oldForm) => ({ ...oldForm, ...newForm }));
+ setIsFormValid(checkValidityForm(form));
+ };
+
+ /* const getDataBody = useCallback(
+ (formRef: FormTypeInterface) => {
+ const {
+ account: { value: account },
+ domain: { value: domain },
+ } = form;
+
+ let dataBody: Record = {};
+
+ dataBody.from =
+ account && domain
+ ? `${account}@${domain}`
+ : accountDetail?.currentState.email;
+
+ Object.entries(formRef).forEach(([key, { value }]) => {
+ if (!['account', 'domain'].includes(key)) {
+ dataBody = { ...dataBody, [key]: value };
+ }
+ });
+
+ dataBody.checked = dataBody?.checked === 'checked';
+
+ return dataBody;
+ },
+ [form],
+ ); */
+
+ const handleClickConfirm = () => {
+ if (isFormValid) {
+ addSuccess(
+ t(
+ editRedirectionId
+ ? 'zimbra_redirections_edit_success'
+ : 'zimbra_redirections_add_success',
+ ),
+ );
+ } else {
+ addError(
+ t(
+ editRedirectionId
+ ? 'zimbra_redirections_edit_error'
+ : 'zimbra_redirections_add_error',
+ ),
+ );
+ }
+ onClose();
+ };
+
+ return (
+
+ <>
+
+ {t('zimbra_redirections_edit_1')}
+
+
+ {t('zimbra_redirections_edit_2')}
+
+
+
+
+
+ {t('zimbra_redirections_add_form_input_name_title_from')} *
+
+
+ {editEmailAccountId || editRedirectionId ? (
+
+ ) : (
+ <>
+
+
+ handleFormChange(name, value.toString())
+ }
+ onOdsValueChange={({ detail: { name, value } }) => {
+ handleFormChange(name, value);
+ }}
+ required
+ className="rounded-r-none border-r-0 w-1/2"
+ data-testid="input-account"
+ >
+
+
+ handleFormChange(name, value as string)
+ }
+ >
+
+ {t('zimbra_redirections_add_select_domain_placeholder')}
+
+ {domainList?.map(({ currentState: domain }) => (
+
+ {domain.name}
+
+ ))}
+
+
+ {isLoadingDomain && (
+
+
+
+ )}
+
+ )}
+
+
+
+
+ {t('zimbra_redirections_add_form_input_name_title_to')} *
+
+
+
+ handleFormChange(name, value.toString())
+ }
+ onOdsValueChange={({ detail: { name, value } }) =>
+ handleFormChange(name, value)
+ }
+ required
+ />
+
+
+
+
+ handleFormChange(
+ 'checked',
+ form.checked.value === 'checked' ? '' : 'checked',
+ )
+ }
+ >
+
+
+ {t('zimbra_redirections_add_form_input_checkbox')}
+
+
+
+
+
+
+ );
+}
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ModalDeleteRedirections.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ModalDeleteRedirections.component.tsx
new file mode 100644
index 000000000000..f842dbb31331
--- /dev/null
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ModalDeleteRedirections.component.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { OsdsText } from '@ovhcloud/ods-components/react';
+import {
+ ODS_TEXT_COLOR_HUE,
+ ODS_TEXT_LEVEL,
+ ODS_TEXT_SIZE,
+} from '@ovhcloud/ods-components';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import Modal from '@/components/Modals/Modal';
+import { useGenerateUrl } from '@/hooks';
+
+export default function ModalDeleteRedirections() {
+ const { t } = useTranslation('redirections/delete');
+ const navigate = useNavigate();
+
+ const [searchParams] = useSearchParams();
+ const params = Object.fromEntries(searchParams.entries());
+ delete params.deleteRedirectionId;
+
+ const goBackUrl = useGenerateUrl('..', 'path', params);
+ const goBack = () => navigate(goBackUrl);
+
+ const buttonProps = {
+ color: ODS_THEME_COLOR_INTENT.primary,
+ action: goBack,
+ };
+
+ return (
+
+ <>
+
+ {t('zimbra_redirections_delete_modal_content')}
+
+
+
+ {t('zimbra_redirections_delete_modal_from')}
+
+
+
+ {t('zimbra_redirections_delete_modal_to')}
+
+
+
+ );
+}
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/Redirections.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/Redirections.tsx
new file mode 100644
index 000000000000..36492e33fa1d
--- /dev/null
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/Redirections.tsx
@@ -0,0 +1,137 @@
+import React from 'react';
+import {
+ Datagrid,
+ DatagridColumn,
+ ManagerButton,
+ Notifications,
+ Subtitle,
+} from '@ovh-ux/manager-react-components';
+import { useTranslation } from 'react-i18next';
+import { Outlet, useSearchParams } from 'react-router-dom';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import {
+ ODS_BUTTON_SIZE,
+ ODS_ICON_NAME,
+ ODS_ICON_SIZE,
+} from '@ovhcloud/ods-components';
+import { OsdsIcon } from '@ovhcloud/ods-components/react';
+import ActionButtonRedirections from './ActionButtonRedirections.component';
+import { useGenerateUrl, usePlatform } from '@/hooks';
+import { IAM_ACTIONS } from '@/utils/iamAction.constants';
+import { ResourceStatus } from '@/api/api.type';
+import Loading from '@/components/Loading/Loading';
+
+export type RedirectionsItem = {
+ id: string;
+ from: string;
+ to: string;
+ organization: string;
+ status: ResourceStatus;
+};
+
+const items: RedirectionsItem[] = [
+ {
+ status: ResourceStatus.ERROR,
+ from: 'from@example.com',
+ to: 'to@example.com',
+ organization: 'Test Organization',
+ id: '1',
+ },
+ {
+ status: ResourceStatus.READY,
+ from: 'from@example.com',
+ to: 'to2@example.com',
+ organization: 'Test Organization',
+ id: '2',
+ },
+];
+
+const columns: DatagridColumn[] = [
+ {
+ id: 'from',
+ cell: (item) => {item.from}
,
+ label: 'zimbra_redirections_from',
+ },
+ {
+ id: 'to',
+ cell: (item) => {item.to}
,
+ label: 'zimbra_redirections_to',
+ },
+ {
+ id: 'organization',
+ cell: (item) => {item.organization}
,
+ label: 'zimbra_redirections_organization',
+ },
+ {
+ id: 'tooltip',
+ cell: (item) => (
+
+ ),
+ label: '',
+ },
+];
+
+export function Redirections() {
+ const { t } = useTranslation('redirections');
+ const { platformUrn } = usePlatform();
+ const [searchParams] = useSearchParams();
+ const editEmailAccountId = searchParams.get('editEmailAccountId');
+ const hrefAddRedirection = useGenerateUrl('./add', 'href');
+ // to update
+ const isLoading = false;
+
+ return (
+
+ {!editEmailAccountId &&
}
+
+ {platformUrn && (
+ <>
+ {editEmailAccountId && (
+
+ {t('zimbra_redirections_account_title')}
+
+ )}
+
+
+
+
+
+ {t('zimbra_redirections_cta')}
+
+
+ {isLoading ? (
+
+ ) : (
+
({
+ ...column,
+ label: t(column.label),
+ }))}
+ items={items}
+ totalItems={items.length}
+ />
+ )}
+
+ )}
+