-
{platformUrn && (
<>
@@ -95,25 +88,17 @@ export default function EmailAccountsAlias() {
-
-
-
- {t('zimbra_account_alias_cta')}
-
+ icon={ODS_ICON_NAME.plus}
+ label={t('zimbra_account_alias_cta')}
+ >
{isLoading ? (
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalAddAlias.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalAddAlias.component.tsx
index f04309640671..b660ea9b3f29 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalAddAlias.component.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalAddAlias.component.tsx
@@ -1,20 +1,19 @@
import React, { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
+
import {
- ODS_THEME_COLOR_INTENT,
- ODS_THEME_TYPOGRAPHY_SIZE,
- ODS_THEME_TYPOGRAPHY_LEVEL,
- ODS_THEME_COLOR_HUE,
-} from '@ovhcloud/ods-common-theming';
-import {
- OsdsFormField,
- OsdsInput,
- OsdsSelect,
- OsdsSelectOption,
- OsdsText,
+ OdsFormField,
+ OdsInput,
+ OdsSelect,
+ OdsText,
} from '@ovhcloud/ods-components/react';
-import { ODS_INPUT_SIZE, ODS_INPUT_TYPE } from '@ovhcloud/ods-components';
+import {
+ ODS_BUTTON_COLOR,
+ ODS_INPUT_TYPE,
+ ODS_MODAL_COLOR,
+ ODS_TEXT_PRESET,
+} from '@ovhcloud/ods-components';
import { useNotifications } from '@ovh-ux/manager-react-components';
import { useMutation } from '@tanstack/react-query';
import { ApiError } from '@ovh-ux/manager-core-api';
@@ -89,29 +88,19 @@ export default function ModalAddAndEditOrganization() {
},
onSuccess: () => {
addSuccess(
-
+
{t('zimbra_account_alias_add_success_message')}
- ,
+ ,
true,
);
},
onError: (error: ApiError) => {
addError(
-
+
{t('zimbra_account_alias_add_error_message', {
error: error?.response?.data?.message,
})}
- ,
+ ,
true,
);
},
@@ -138,77 +127,62 @@ export default function ModalAddAndEditOrganization() {
return (
<>
-
+
{t('zimbra_account_alias_add_description', {
account: editAccountDetail?.currentState.email,
})}
-
+
-
+
-
+ onOdsBlur={({ target: { name, value } }) =>
handleFormChange(name, value.toString())
}
- onOdsValueChange={({ detail: { name, value } }) => {
- handleFormChange(name, value);
+ onOdsChange={({ detail: { name, value } }) => {
+ handleFormChange(name, String(value));
}}
- required
+ isRequired
className="rounded-r-none border-r-0 w-1/2"
data-testid="input-alias"
- >
-
+
-
+
- handleFormChange(name, value as string)
+ hasError={form.domain.hasError}
+ isRequired
+ onOdsChange={({ detail: { name, value } }) =>
+ handleFormChange(name, value)
}
data-testid="select-domain"
>
@@ -216,33 +190,27 @@ export default function ModalAddAndEditOrganization() {
{t('zimbra_account_alias_add_select_domain_placeholder')}
{domainList?.map(({ currentState: domain }) => (
-
+
+
))}
-
+
-
{t('zimbra_account_alias_add_input_email_helper')}
{[1, 2, 3].map((elm) => (
- -{' '}
+ -
{t(`zimbra_account_alias_add_input_email_helper_rule_${elm}`)}
))}
-
+
-
+
>
);
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalDeleteAlias.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalDeleteAlias.component.tsx
index a560d692fd76..6402772beaf4 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalDeleteAlias.component.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalDeleteAlias.component.tsx
@@ -1,16 +1,16 @@
import React from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
-import {
- ODS_THEME_COLOR_INTENT,
- ODS_THEME_TYPOGRAPHY_SIZE,
- ODS_THEME_TYPOGRAPHY_LEVEL,
- ODS_THEME_COLOR_HUE,
-} from '@ovhcloud/ods-common-theming';
-import { OsdsText } from '@ovhcloud/ods-components/react';
+
+import { OdsText } from '@ovhcloud/ods-components/react';
import { useNotifications } from '@ovh-ux/manager-react-components';
import { useMutation } from '@tanstack/react-query';
import { ApiError } from '@ovh-ux/manager-core-api';
+import {
+ ODS_BUTTON_VARIANT,
+ ODS_MODAL_COLOR,
+ ODS_TEXT_PRESET,
+} from '@ovhcloud/ods-components';
import { useGenerateUrl, usePlatform } from '@/hooks';
import Modal from '@/components/Modals/Modal';
import {
@@ -38,29 +38,19 @@ export default function ModalDeleteDomain() {
mutationFn: () => deleteZimbraPlatformAlias(platformId, deleteAliasId),
onSuccess: () => {
addSuccess(
-
+
{t('zimbra_account_alias_delete_success_message')}
- ,
+ ,
true,
);
},
onError: (error: ApiError) => {
addError(
-
+
{t('zimbra_account_alias_delete_error_message', {
error: error?.response?.data?.message,
})}
- ,
+ ,
true,
);
},
@@ -75,9 +65,10 @@ export default function ModalDeleteDomain() {
return (
- <>
-
- {t('zimbra_account_alias_delete_modal_description')}
-
- >
+
+ {t('zimbra_account_alias_delete_modal_description')}
+
);
}
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalDeleteEmailAccount.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalDeleteEmailAccount.component.tsx
index a535825f9afc..fc6ffc37a589 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalDeleteEmailAccount.component.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalDeleteEmailAccount.component.tsx
@@ -2,17 +2,11 @@ import React, { useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import {
- ODS_THEME_COLOR_INTENT,
- ODS_THEME_TYPOGRAPHY_SIZE,
- ODS_THEME_TYPOGRAPHY_LEVEL,
- ODS_THEME_COLOR_HUE,
-} from '@ovhcloud/ods-common-theming';
-import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
-import {
- OsdsContentAddon,
- OsdsMessage,
- OsdsText,
-} from '@ovhcloud/ods-components/react';
+ ODS_BUTTON_VARIANT,
+ ODS_MODAL_COLOR,
+ ODS_TEXT_PRESET,
+} from '@ovhcloud/ods-components';
+import { OdsMessage, OdsText } from '@ovhcloud/ods-components/react';
import { useNotifications } from '@ovh-ux/manager-react-components';
import { useMutation } from '@tanstack/react-query';
import { ApiError } from '@ovh-ux/manager-core-api';
@@ -44,29 +38,19 @@ export default function ModalDeleteEmailAccount() {
},
onSuccess: () => {
addSuccess(
-
+
{t('zimbra_account_delete_success_message')}
- ,
+ ,
true,
);
},
onError: (error: ApiError) => {
addError(
-
+
{t('zimbra_account_delete_error_message', {
error: error?.response?.data?.message,
})}
- ,
+ ,
true,
);
},
@@ -86,10 +70,11 @@ export default function ModalDeleteEmailAccount() {
return (
setStep(2) : handleDeleteClick,
disabled: step === 1 ? false : isSending,
+ variant: ODS_BUTTON_VARIANT.default,
testid: 'primary-btn',
}}
>
<>
{step === 1 && (
<>
-
{t('zimbra_account_delete_modal_content_step1')}
-
-
+
+
-
{t('zimbra_account_delete_modal_mail_label')}
-
+
-
+
{data?.currentState.email}
-
+
-
+
>
)}
{step === 2 && (
<>
-
{t('zimbra_account_delete_modal_content_step2')}
-
-
-
+
+
+
{t('zimbra_account_delete_modal_warn_message')}
-
-
+
+
>
)}
>
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/GeneralInformation.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/GeneralInformation.tsx
index 6bed7266cb09..1422277594cf 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/GeneralInformation.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/GeneralInformation.tsx
@@ -1,9 +1,13 @@
import React from 'react';
-import { OsdsTile, OsdsDivider } from '@ovhcloud/ods-components/react';
-import { ManagerText, Subtitle } from '@ovh-ux/manager-react-components';
+import { OdsDivider } from '@ovhcloud/ods-components/react';
+import {
+ DashboardTile,
+ ManagerText,
+ Subtitle,
+ TileBlock,
+} from '@ovh-ux/manager-react-components';
import { useTranslation } from 'react-i18next';
import { AccountStatistics } from '@/api/api.type';
-import { TileBlock } from '@/components/TileBlock';
import { BadgeStatus } from '@/components/BadgeStatus';
import { useOrganization, usePlatform } from '@/hooks';
// import { OngoingTasks } from './OngoingTasks';
@@ -21,11 +25,16 @@ function GeneralInformation() {
const { data: organisation } = useOrganization();
const guideLinks = (links: GuideLinks) => {
- return Object.entries(links).map(([key, value]) => {
+ const entries = Object.entries(links);
+ return entries.map(([key, value], index) => {
+ const isFirst = index === 0;
+ const isLast = index === entries.length - 1;
return (
-
-
+
+
+
+ {!isLast &&
}
);
});
@@ -35,89 +44,73 @@ function GeneralInformation() {
? organisation.currentState.accountsStatistics
: platform?.currentState?.accountsStatistics;
+ const itemsStatus = [
+ {
+ id: 'ongoing-task',
+ label: t(
+ 'Coming Soon',
+ ) /* label={t('zimbra_dashboard_tile_status_ongoingTask')} */,
+ value: platformUrn && (
+
+ Coming Soon
+
+ ),
+ },
+ ];
+
+ const itemsConsumption = [
+ {
+ id: 'account-offer',
+ label: t('zimbra_dashboard_tile_serviceConsumption_accountOffer'),
+ value: platformUrn ? (
+
+ {accountsStatistics?.length > 0
+ ? accountsStatistics?.map((stats) => (
+ {`${
+ stats.configuredAccountsCount
+ } / ${stats.configuredAccountsCount +
+ stats.availableAccountsCount} ${stats.offer}`}
+ ))
+ : t('zimbra_dashboard_tile_serviceConsumption_noAccountOffer')}
+
+ ) : null,
+ },
+ ];
+
+ const itemsUsefulLinks = [
+ {
+ id: 'useful-links',
+ value: guideLinks({
+ zimbra_dashboard_webmail: GUIDES_LIST.webmail,
+ zimbra_dashboard_administrator_guide: GUIDES_LIST.administrator_guide,
+ zimbra_dashboard_user_guides: GUIDES_LIST.user_guide,
+ }),
+ },
+ ];
+
return (
-
-
- {t('zimbra_dashboard_tile_status_title')}
- {organisation && (
-
-
-
- )}
- {/* To uncomment to have task
- */}
- */
- >
- {/* {platformUrn && (
-
-
-
-
- )} */}
-
- Coming Soon
-
-
-
-
+
-
-
-
- {t('zimbra_dashboard_tile_serviceConsumption_title')}
-
-
- {platformUrn && (
-
- {accountsStatistics?.length > 0
- ? accountsStatistics?.map((stats) => (
- {`${
- stats.configuredAccountsCount
- } / ${stats.configuredAccountsCount +
- stats.availableAccountsCount} ${stats.offer}`}
- ))
- : t(
- 'zimbra_dashboard_tile_serviceConsumption_noAccountOffer',
- )}
-
- )}
-
-
-
+
-
-
- {t('zimbra_dashboard_tile_usefulLinks_title')}
- {guideLinks({
- zimbra_dashboard_webmail: GUIDES_LIST.webmail,
- zimbra_dashboard_administrator_guide:
- GUIDES_LIST.administrator_guide,
- zimbra_dashboard_user_guides: GUIDES_LIST.user_guide,
- })}
-
-
+
);
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/OngoingTasks.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/OngoingTasks.tsx
index a4453594821b..3283091caacd 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/OngoingTasks.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/OngoingTasks.tsx
@@ -1,7 +1,8 @@
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
-import { OsdsIcon, OsdsLink } from '@ovhcloud/ods-components/react';
-import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-components';
+import { OdsIcon, OdsLink } from '@ovhcloud/ods-components/react';
+import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
+import { Links } from '@ovh-ux/manager-react-components';
import { useTasks } from '@/hooks';
export const OngoingTasks: React.FC = () => {
@@ -20,23 +21,24 @@ export const OngoingTasks: React.FC = () => {
{`${task.type} ${task.message}`}
))}
{data?.length > 5 && (
- setLoadMore(!loadMore)}>
+ setLoadMore(!loadMore)}
+ href="#"
+ >
{!loadMore
? t('zimbra_dashboard_tile_status_ongoingTask_viewMore')
: t('zimbra_dashboard_tile_status_ongoingTask_viewLess')}
-
+ >
-
+
)}
);
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
index e70ae4e7dc05..2bdedb0e4981 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/ActionButtonMailingList.component.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/ActionButtonMailingList.component.tsx
@@ -20,10 +20,18 @@ const ActionButtonMailingList: React.FC