fix(zimbra): various minor ui issues (#14956)

ref: MANAGER-16752 Signed-off-by: Tristan WAGNER <[email protected]> Co-authored-by: CDS Translator Agent <[email protected]>
ovh · Jan 24, 2025 · 0b4ae38 · 0b4ae38
1 parent e39cd3c
commit 0b4ae38
Show file tree

Hide file tree

Showing 21 changed files with 117 additions and 93 deletions.
diff --git a/packages/manager/apps/zimbra/public/translations/accounts/alias/add/Messages_de_DE.json b/packages/manager/apps/zimbra/public/translations/accounts/alias/add/Messages_de_DE.json
@@ -1,6 +1,6 @@
 {
   "zimbra_account_alias_add_modal_title": "Alias erstellen",
-  "zimbra_account_alias_add_description": "Alias für den Account {{ account }} erstellen",
+  "zimbra_account_alias_add_description": "Alias für den Account <strong> {{ account }} erstellen</strong> ",
   "zimbra_account_alias_add_input_email_placeholder": "Alias",
   "zimbra_account_alias_add_input_email_helper": "Der lokale Teil Ihres Alias (der Text vor dem „@“) muss den folgenden Richtlinien entsprechen:",
   "zimbra_account_alias_add_input_email_helper_rule_1": "Er muss mit einem Buchstaben oder einer Zahl enden.",

diff --git a/packages/manager/apps/zimbra/public/translations/accounts/alias/add/Messages_en_GB.json b/packages/manager/apps/zimbra/public/translations/accounts/alias/add/Messages_en_GB.json
@@ -1,6 +1,6 @@
 {
   "zimbra_account_alias_add_modal_title": "Create an alias",
-  "zimbra_account_alias_add_description": "Create an alias for the {{ account }} account",
+  "zimbra_account_alias_add_description": "Create an alias for the <strong>{{ account }} account</strong> ",
   "zimbra_account_alias_add_input_email_placeholder": "Alias",
   "zimbra_account_alias_add_input_email_helper": "The local part of your alias (the text preceding the ‘@’) must follow the following guidelines:",
   "zimbra_account_alias_add_input_email_helper_rule_1": "It must end with a letter or number",

diff --git a/packages/manager/apps/zimbra/public/translations/accounts/alias/add/Messages_es_ES.json b/packages/manager/apps/zimbra/public/translations/accounts/alias/add/Messages_es_ES.json
@@ -1,6 +1,6 @@
 {
   "zimbra_account_alias_add_modal_title": "Crear un alias",
-  "zimbra_account_alias_add_description": "Crear un alias para la cuenta {{ account }}",
+  "zimbra_account_alias_add_description": "Crear un alias para la cuenta <strong> {{ account }}</strong> ",
   "zimbra_account_alias_add_input_email_placeholder": "Alias",
   "zimbra_account_alias_add_input_email_helper": "La parte local del alias (el texto que precede a «@») debe cumplir los siguientes requisitos:",
   "zimbra_account_alias_add_input_email_helper_rule_1": "debe terminar por una letra o un número;",

diff --git a/packages/manager/apps/zimbra/public/translations/accounts/alias/add/Messages_fr_CA.json b/packages/manager/apps/zimbra/public/translations/accounts/alias/add/Messages_fr_CA.json
@@ -1,6 +1,6 @@
 {
   "zimbra_account_alias_add_modal_title": "Créer un alias",
-  "zimbra_account_alias_add_description": "Créer un alias pour le compte {{ account }}",
+  "zimbra_account_alias_add_description": "Créer un alias pour le compte <strong>{{ account }}</strong>",
   "zimbra_account_alias_add_input_email_placeholder": "Alias",
   "zimbra_account_alias_add_input_email_helper": "La partie locale de votre alias (le texte précédant le « @ ») doit suivre les lignes directrices suivantes :",
   "zimbra_account_alias_add_input_email_helper_rule_1": "Elle doit se terminer par une lettre ou un numéro",

diff --git a/packages/manager/apps/zimbra/public/translations/accounts/alias/add/Messages_fr_FR.json b/packages/manager/apps/zimbra/public/translations/accounts/alias/add/Messages_fr_FR.json
@@ -1,6 +1,6 @@
 {
   "zimbra_account_alias_add_modal_title": "Créer un alias",
-  "zimbra_account_alias_add_description": "Créer un alias pour le compte {{ account }}",
+  "zimbra_account_alias_add_description": "Créer un alias pour le compte <strong>{{ account }}</strong>",
   "zimbra_account_alias_add_input_email_placeholder": "Alias",
   "zimbra_account_alias_add_input_email_helper": "La partie locale de votre alias (le texte précédant le « @ ») doit suivre les lignes directrices suivantes :",
   "zimbra_account_alias_add_input_email_helper_rule_1": "Elle doit se terminer par une lettre ou un numéro",

diff --git a/packages/manager/apps/zimbra/public/translations/accounts/alias/add/Messages_it_IT.json b/packages/manager/apps/zimbra/public/translations/accounts/alias/add/Messages_it_IT.json
@@ -1,6 +1,6 @@
 {
   "zimbra_account_alias_add_modal_title": "Creare un alias",
-  "zimbra_account_alias_add_description": "Creare un alias per l’account {{ account }}",
+  "zimbra_account_alias_add_description": "Crea un alias per l’account <strong> {{ account }}</strong> ",
   "zimbra_account_alias_add_input_email_placeholder": "Alias",
   "zimbra_account_alias_add_input_email_helper": "La parte locale del tuo alias (il testo che precede \"@\") deve rispettare i seguenti requisiti:",
   "zimbra_account_alias_add_input_email_helper_rule_1": "deve terminare con una lettera o un numero",

diff --git a/packages/manager/apps/zimbra/public/translations/accounts/alias/add/Messages_pl_PL.json b/packages/manager/apps/zimbra/public/translations/accounts/alias/add/Messages_pl_PL.json
@@ -1,6 +1,6 @@
 {
   "zimbra_account_alias_add_modal_title": "Utwórz alias",
-  "zimbra_account_alias_add_description": "Utwórz alias dla konta {{account}}",
+  "zimbra_account_alias_add_description": "Utwórz alias dla konta <strong>{{ account }}</strong> ",
   "zimbra_account_alias_add_input_email_placeholder": "Alias",
   "zimbra_account_alias_add_input_email_helper": "Pierwsza część aliasu (tekst przed „@”) musi być utworzona zgodnie z następującymi wytycznymi:",
   "zimbra_account_alias_add_input_email_helper_rule_1": "Musi kończyć się literą lub cyfrą",

diff --git a/packages/manager/apps/zimbra/public/translations/accounts/alias/add/Messages_pt_PT.json b/packages/manager/apps/zimbra/public/translations/accounts/alias/add/Messages_pt_PT.json
@@ -1,6 +1,6 @@
 {
   "zimbra_account_alias_add_modal_title": "Criar um alias",
-  "zimbra_account_alias_add_description": "Criar um alias para a conta {{ account }}",
+  "zimbra_account_alias_add_description": "Criar um alias para a conta <strong> {{ account }}</strong> ",
   "zimbra_account_alias_add_input_email_placeholder": "Alias",
   "zimbra_account_alias_add_input_email_helper": "A parte local do seu alias (o texto que precede o «@») deve seguir estas diretrizes:",
   "zimbra_account_alias_add_input_email_helper_rule_1": "Deve terminar por uma letra ou um algarismo",

diff --git a/packages/manager/apps/zimbra/public/translations/dashboard/Messages_en_GB.json b/packages/manager/apps/zimbra/public/translations/dashboard/Messages_en_GB.json
@@ -47,7 +47,7 @@
   "zimbra_dashboard_email_accounts_redirections_delete": "Delete a redirection",
   "zimbra_dashboard_mailing_lists_add": "Create a mailing list",
   "zimbra_dashboard_mailing_lists_settings": "Edit mailing list",
-  "zimbra_dashboard_mailing_lists": "Mailing lists",
+  "zimbra_dashboard_mailing_lists": "Mailing List",
   "zimbra_dashboard_redirections": "Redirection",
   "zimbra_dashboard_redirections_edit": "Modify redirection",
   "zimbra_dashboard_redirections_delete": "Delete redirection",

diff --git a/packages/manager/apps/zimbra/public/translations/dashboard/Messages_fr_CA.json b/packages/manager/apps/zimbra/public/translations/dashboard/Messages_fr_CA.json
@@ -25,7 +25,7 @@
   "zimbra_dashboard_mailing_lists_add": "Créer une liste de diffusion",
   "zimbra_dashboard_mailing_lists_settings": "Modifier la liste de diffusion",
   "zimbra_dashboard_error_service": "No services info",
-  "zimbra_dashboard_mailing_lists": "Listes de diffusion",
+  "zimbra_dashboard_mailing_lists": "Liste de diffusion",
   "zimbra_dashboard_general_informations": "Informations générales",
   "zimbra_dashboard_header_guides": "Guides",
   "zimbra_dashboard_organizations": "Organisation",

diff --git a/packages/manager/apps/zimbra/public/translations/dashboard/Messages_fr_FR.json b/packages/manager/apps/zimbra/public/translations/dashboard/Messages_fr_FR.json
@@ -25,7 +25,7 @@
   "zimbra_dashboard_mailing_lists_add": "Créer une liste de diffusion",
   "zimbra_dashboard_mailing_lists_settings": "Modifier la liste de diffusion",
   "zimbra_dashboard_error_service": "No services info",
-  "zimbra_dashboard_mailing_lists": "Listes de diffusion",
+  "zimbra_dashboard_mailing_lists": "Liste de diffusion",
   "zimbra_dashboard_general_informations": "Informations générales",
   "zimbra_dashboard_header_guides": "Guides",
   "zimbra_dashboard_organizations": "Organisation",

diff --git a/packages/manager/apps/zimbra/public/translations/dashboard/Messages_pl_PL.json b/packages/manager/apps/zimbra/public/translations/dashboard/Messages_pl_PL.json
@@ -47,7 +47,7 @@
   "zimbra_dashboard_email_accounts_redirections_delete": "Usuwanie przekierowania",
   "zimbra_dashboard_mailing_lists_add": "Utwórz listę mailingową",
   "zimbra_dashboard_mailing_lists_settings": "Zmodyfikuj listę mailingową",
-  "zimbra_dashboard_mailing_lists": "Listy mailingowe",
+  "zimbra_dashboard_mailing_lists": "Lista mailingowa",
   "zimbra_dashboard_redirections": "Przekierowywanie",
   "zimbra_dashboard_redirections_edit": "Zmodyfikuj przekierowanie",
   "zimbra_dashboard_redirections_delete": "Usuń przekierowanie",

diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/AutoReplies/AddAutoReply.page.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/AutoReplies/AddAutoReply.page.tsx
@@ -58,6 +58,7 @@ import {
   EMAIL_ACCOUNT_ADD_AUTO_REPLY,
 } from '@/tracking.constant';
 import { FormTypeInterface, useForm } from '@/hooks/useForm';
+import queryClient from '@/queryClient';
 
 export enum AutoReplyTypes {
   LINKED = 'linked',
@@ -237,6 +238,9 @@ export default function AddAutoReply() {
     const orgId = selectedDomain?.currentState?.organizationId;
     if (selectedDomain && selectedOrganizationId !== orgId) {
       setSelectedOrganizationId(orgId);
+      queryClient.invalidateQueries({
+        queryKey: ['get', 'account'],
+      });
     }
   }, [selectedDomain]);
 
@@ -355,22 +359,25 @@ export default function AddAutoReply() {
                 setValue(event.detail.name, event.detail.value.toString());
               }}
             >
-              {domainAccounts && (
-                <datalist slot="list">
-                  {domainAccounts.map((acc) => {
-                    const [head] = (acc.currentState?.email || '@').split('@');
-                    return <option key={head} value={head}></option>;
-                  })}
-                </datalist>
-              )}
+              <datalist slot="list">
+                {(domainAccounts || []).map((acc, index) => {
+                  const [head] = (acc.currentState?.email || '@').split('@');
+                  return (
+                    <option
+                      key={`account-${head}-${index}`}
+                      value={head}
+                    ></option>
+                  );
+                })}
+              </datalist>
             </OdsInput>
             <OdsInput
               name="@"
               type={ODS_INPUT_TYPE.text}
               value={'@'}
-              isReadonly={true}
-              isDisabled={true}
-              className="w-10"
+              isReadonly
+              isDisabled
+              className="w-10 input-at"
             ></OdsInput>
             <OdsSelect
               id="domain"
@@ -387,8 +394,11 @@ export default function AddAutoReply() {
                 'zimbra_auto_replies_add_select_domain_placeholder',
               )}
             >
-              {domains?.map(({ currentState: domain }) => (
-                <option key={domain.name} value={domain.name}>
+              {(domains || []).map(({ currentState: domain }, index) => (
+                <option
+                  key={`domain-${domain.name}-${index}`}
+                  value={domain.name}
+                >
                   {domain.name}
                 </option>
               ))}
@@ -480,7 +490,7 @@ export default function AddAutoReply() {
           </label>
         </div>
       </OdsFormField>
-      {!!form.sendCopy.value && (
+      {!!form.sendCopy.value && !isOrgAccountsLoading && (
         <OdsFormField>
           <OdsSelect
             id="sendCopyTo"
@@ -497,8 +507,8 @@ export default function AddAutoReply() {
             }
             onOdsChange={(event) => setValue('sendCopyTo', event.detail.value)}
           >
-            {orgAccounts?.map(({ currentState: acc }) => (
-              <option key={acc.email} value={acc.email}>
+            {(orgAccounts || []).map(({ currentState: acc }, index) => (
+              <option key={`copy-${acc.email}-${index}`} value={acc.email}>
                 {acc.email}
               </option>
             ))}

diff --git a/...ges/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/AddAndEditEmailAccount.page.tsx b/...ges/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/AddAndEditEmailAccount.page.tsx
@@ -6,7 +6,7 @@ import {
   Subtitle,
 } from '@ovh-ux/manager-react-components';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useSearchParams } from 'react-router-dom';
+import { useLocation, useMatches, useSearchParams } from 'react-router-dom';
 import {
   ButtonType,
   PageLocation,
@@ -34,11 +34,16 @@ export default function AddAndEditAccount() {
   const { trackClick } = useOvhTracking();
   const { t } = useTranslation('accounts/addAndEdit');
   const location = useLocation();
+  const matches = useMatches();
   const { platformId } = usePlatform();
   const [searchParams] = useSearchParams();
   const editEmailAccountId = searchParams.get('editEmailAccountId');
   const [isLoading, setIsLoading] = useState(true);
-  const goBackUrl = useGenerateUrl('..', 'href');
+  const goBackUrl = useGenerateUrl(
+    matches.find((m) => m.pathname.endsWith('email_accounts'))?.pathname ||
+      '..',
+    'href',
+  );
   const [isSettingsTab, setIsSettingsTab] = useState(false);
   const [isAliasTab, setIsAliasTab] = useState(false);
   const [isRedirectionsTab, setIsRedirectionsTab] = useState(false);

diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccounts.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccounts.tsx
@@ -148,7 +148,7 @@ export default function EmailAccounts() {
   const webmailUrl = GUIDES_LIST.webmail.url.DEFAULT;
 
   const hrefAddEmailAccount = useGenerateUrl('./add', 'path');
-  const hrefOrderEmailAccount = useGenerateUrl('./order', 'href');
+  const hrefOrderEmailAccount = useGenerateUrl('./order', 'path');
 
   const handleAddEmailAccountClick = () => {
     trackClick({
@@ -219,45 +219,49 @@ export default function EmailAccounts() {
               </ManagerText>
             </div>
           </div>
-          {(data?.length > 0 || dataDomains?.length > 0) && (
-            <ManagerButton
-              id="add-account-btn"
-              color={ODS_BUTTON_COLOR.primary}
-              size={ODS_BUTTON_SIZE.sm}
-              urn={platformUrn}
-              iamActions={[IAM_ACTIONS.account.create]}
-              onClick={handleAddEmailAccountClick}
-              data-testid="add-account-btn"
-              className="mb-6"
-              icon={ODS_ICON_NAME.plus}
-              label={t('zimbra_account_account_add')}
-            />
-          )}
-          {dataDomains?.length === 0 && (
-            <OdsTooltip className="mb-6" triggerId="tooltip-trigger">
-              <OdsButton
+          <div className="mb-6 flex gap-6">
+            {(data?.length > 0 || dataDomains?.length > 0) && (
+              <ManagerButton
+                id="add-account-btn"
                 color={ODS_BUTTON_COLOR.primary}
                 size={ODS_BUTTON_SIZE.sm}
-                isDisabled
+                urn={platformUrn}
+                iamActions={[IAM_ACTIONS.account.create]}
+                onClick={handleAddEmailAccountClick}
+                data-testid="add-account-btn"
                 icon={ODS_ICON_NAME.plus}
                 label={t('zimbra_account_account_add')}
-              ></OdsButton>
-              <div id="tooltip-trigger">
-                <OdsText preset={ODS_TEXT_PRESET.paragraph}>
-                  {t('zimbra_domains_tooltip_need_domain')}
-                </OdsText>
-              </div>
-            </OdsTooltip>
-          )}
-          {FEATURE_FLAGS.ORDER && (
-            <OdsButton
-              data-testid="order-account-btn"
-              color={ODS_BUTTON_COLOR.primary}
-              size={ODS_BUTTON_SIZE.sm}
-              onClick={handleOrderEmailAccountClick}
-              label={t('zimbra_account_account_order')}
-            ></OdsButton>
-          )}
+              />
+            )}
+            {dataDomains?.length === 0 && (
+              <OdsTooltip triggerId="tooltip-trigger">
+                <OdsButton
+                  color={ODS_BUTTON_COLOR.primary}
+                  size={ODS_BUTTON_SIZE.sm}
+                  isDisabled
+                  icon={ODS_ICON_NAME.plus}
+                  label={t('zimbra_account_account_add')}
+                ></OdsButton>
+                <div id="tooltip-trigger">
+                  <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+                    {t('zimbra_domains_tooltip_need_domain')}
+                  </OdsText>
+                </div>
+              </OdsTooltip>
+            )}
+            {FEATURE_FLAGS.ORDER && (
+              <ManagerButton
+                id="order-account-btn"
+                urn={platformUrn}
+                iamActions={[IAM_ACTIONS.account.create]}
+                data-testid="order-account-btn"
+                color={ODS_BUTTON_COLOR.primary}
+                size={ODS_BUTTON_SIZE.sm}
+                onClick={handleOrderEmailAccountClick}
+                label={t('zimbra_account_account_order')}
+              />
+            )}
+          </div>
           {isLoading ? (
             <Loading />
           ) : (

diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccountsAlias.page.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccountsAlias.page.tsx
@@ -92,7 +92,7 @@ export default function EmailAccountsAlias() {
     })) ?? [];
 
   return (
-    <div className="py-6 mt-8">
+    <div>
       <Outlet />
       {platformUrn && (
         <>

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
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import {
   OdsFormField,
@@ -157,6 +157,7 @@ export default function ModalAddAndEditOrganization() {
       secondaryButton={{
         label: t('zimbra_account_alias_add_btn_cancel'),
         action: handleCancelClick,
+        testid: 'cancel-btn',
       }}
       primaryButton={{
         testid: 'confirm-btn',
@@ -169,9 +170,13 @@ export default function ModalAddAndEditOrganization() {
     >
       <>
         <OdsText preset={ODS_TEXT_PRESET.paragraph} className="mt-5 mb-5">
-          {t('zimbra_account_alias_add_description', {
-            account: editAccountDetail?.currentState.email,
-          })}
+          <Trans
+            t={t}
+            i18nKey={'zimbra_account_alias_add_description'}
+            values={{
+              account: editAccountDetail?.currentState.email,
+            }}
+          />
         </OdsText>
 
         <OdsFormField>
@@ -225,16 +230,20 @@ export default function ModalAddAndEditOrganization() {
               ))}
             </OdsSelect>
           </div>
-          <div slot="helper">
-            <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+          <OdsText
+            slot="helper"
+            preset={ODS_TEXT_PRESET.caption}
+            className="flex flex-col"
+          >
+            <span className="block">
               {t('zimbra_account_alias_add_input_email_helper')}
-            </OdsText>
+            </span>
             {[1, 2, 3].map((elm) => (
-              <OdsText preset={ODS_TEXT_PRESET.paragraph} key={elm}>
-                -{t(`zimbra_account_alias_add_input_email_helper_rule_${elm}`)}
-              </OdsText>
+              <span key={elm} className="block">
+                - {t(`zimbra_account_alias_add_input_email_helper_rule_${elm}`)}
+              </span>
             ))}
-          </div>
+          </OdsText>
         </OdsFormField>
       </>
     </Modal>