fix(zimbra): wording & ui improvments

fixed a lot of minor UI issues and wordings, goal is to harmonize the differents pages ref: MANAGER-16056 Signed-off-by: Tristan WAGNER <[email protected]>
ovh · Nov 25, 2024 · 5fbfb18 · 5fbfb18
1 parent fa696d5
commit 5fbfb18
Show file tree

Hide file tree

Showing 15 changed files with 73 additions and 34 deletions.
diff --git a/packages/manager/apps/zimbra/public/translations/accounts/Messages_fr_FR.json b/packages/manager/apps/zimbra/public/translations/accounts/Messages_fr_FR.json
@@ -1,9 +1,9 @@
 {
-  "zimbra_account_datagrid_email_label": "Comptes email",
+  "zimbra_account_datagrid_email_label": "Compte email",
   "zimbra_account_datagrid_organization_label": "Organisation",
   "zimbra_account_datagrid_offer_label": "Offre",
   "zimbra_account_datagrid_webmail_label": "Webmail :",
-  "zimbra_account_datagrid_status_label": "Informations",
+  "zimbra_account_datagrid_status_label": "Statut",
   "zimbra_account_datagrid_quota": "Taille",
   "zimbra_account_datagrid_quota_octets": "Octets",
   "zimbra_account_datagrid_quota_ko": "Ko",

diff --git a/packages/manager/apps/zimbra/public/translations/autoReplies/Messages_fr_FR.json b/packages/manager/apps/zimbra/public/translations/autoReplies/Messages_fr_FR.json
@@ -1,7 +1,8 @@
 {
-  "zimbra_auto_replies_name": "Nom",
+  "zimbra_auto_replies_name": "Adresse",
   "zimbra_auto_replies_from": "Du",
   "zimbra_auto_replies_until": "Jusqu'au",
+  "zimbra_auto_replies_status": "Statut",
   "zimbra_auto_replies_copyTo": "Copier vers",
   "zimbra_auto_replies_add_cta": "Créer un répondeur",
   "zimbra_auto_replies_account_title": "Gestion des répondeurs"

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
@@ -5,7 +5,7 @@
   "zimbra_dashboard_domains_edit": "Configuration du domaine",
   "zimbra_dashboard_domains_delete": "Supprimer un domaine",
   "zimbra_dashboard_domains_diagnostic": "Diagnostique",
-  "zimbra_dashboard_email_accounts": "Comptes email",
+  "zimbra_dashboard_email_accounts": "Compte email",
   "zimbra_dashboard_email_accounts_add": "Créer un compte email",
   "zimbra_dashboard_email_accounts_edit": "Modifier le compte",
   "zimbra_dashboard_email_accounts_settings": "Paramètres du compte",
@@ -14,11 +14,11 @@
   "zimbra_dashboard_email_accounts_alias_add": "Créer un alias",
   "zimbra_dashboard_email_accounts_alias_delete": "Supprimer un alias",
   "zimbra_dashboard_email_accounts_delete": "Supprimer la boite mail",
-  "zimbra_dashboard_email_accounts_redirections": "Redirections",
+  "zimbra_dashboard_email_accounts_redirections": "Redirection",
   "zimbra_dashboard_email_accounts_redirections_add": "Créer une redirection",
   "zimbra_dashboard_email_accounts_redirections_edit": "Modifier une redirection",
   "zimbra_dashboard_email_accounts_redirections_delete": "Supprimer une redirection",
-  "zimbra_dashboard_email_accounts_auto_replies": "Répondeurs",
+  "zimbra_dashboard_email_accounts_auto_replies": "Répondeur",
   "zimbra_dashboard_email_accounts_auto_replies_add": "Créer un répondeur",
   "zimbra_dashboard_email_accounts_auto_replies_delete": "Supprimer un répondeur",
   "zimbra_dashboard_mailing_lists_add": "Créer une liste de diffusion",
@@ -31,7 +31,7 @@
   "zimbra_dashboard_organizations_add": "Ajouter une organisation",
   "zimbra_dashboard_organizations_edit": "Modifier l'organisation",
   "zimbra_dashboard_organizations_delete": "Supprimer l'organisation",
-  "zimbra_dashboard_redirections": "Redirections",
+  "zimbra_dashboard_redirections": "Redirection",
   "zimbra_dashboard_redirections_add": "Créer une redirection",
   "zimbra_dashboard_redirections_edit": "Modifier la redirection",
   "zimbra_dashboard_redirections_delete": "Supprimer la redirection",
@@ -48,7 +48,7 @@
   "zimbra_dashboard_tile_serviceConsumption_accountOffer": "Compte par offre",
   "zimbra_dashboard_tile_serviceConsumption_noAccountOffer": "Vous ne possedez actuellement aucune boite email.",
   "zimbra_dashboard_tile_usefulLinks_title": "Liens utiles",
-  "zimbra_dashboard_auto_replies": "Répondeurs",
+  "zimbra_dashboard_auto_replies": "Répondeur",
   "zimbra_dashboard_auto_replies_add": "Créer un répondeur",
   "zimbra_dashboard_auto_replies_delete": "Supprimer un répondeur"
 }
diff --git a/packages/manager/apps/zimbra/public/translations/domains/Messages_fr_FR.json b/packages/manager/apps/zimbra/public/translations/domains/Messages_fr_FR.json
@@ -6,6 +6,7 @@
   "zimbra_domains_datagrid_diagnostic_tooltip_title": "Diagnostic {{ diagType }}",
   "zimbra_domains_datagrid_domain_label": "Domaine",
   "zimbra_domains_datagrid_organization_label": "Organisation",
+  "zimbra_domains_datagrid_status_label": "Statut",
   "zimbra_domains_datagrid_account_number": "Nombre de comptes",
   "zimbra_domains_tooltip_configure": "Configurer",
   "zimbra_domains_tooltip_delete": "Supprimer",

diff --git a/packages/manager/apps/zimbra/public/translations/mailinglists/Messages_fr_FR.json b/packages/manager/apps/zimbra/public/translations/mailinglists/Messages_fr_FR.json
@@ -5,6 +5,7 @@
   "zimbra_mailinglists_datagrid_aliases_label": "Alias",
   "zimbra_mailinglists_datagrid_moderators_label": "Modérateurs",
   "zimbra_mailinglists_datagrid_subscribers_label": "Abonnés",
+  "zimbra_mailinglists_datagrid_status_label": "Statut",
   "zimbra_mailinglists_datagrid_action_edit": "Configurer la liste de diffusion",
   "zimbra_mailinglists_datagrid_action_define_members": "Définir les membres",
   "zimbra_mailinglists_datagrid_action_configure_delegation": "Configurer la délégation",

diff --git a/packages/manager/apps/zimbra/public/translations/organizations/Messages_fr_FR.json b/packages/manager/apps/zimbra/public/translations/organizations/Messages_fr_FR.json
@@ -5,6 +5,6 @@
   "zimbra_organization_edit": "Modifier",
   "zimbra_organization_delete": "Supprimer",
   "zimbra_organization_label": "Label",
-  "zimbra_organization_name": "Nom",
+  "zimbra_organization_name": "Organisation",
   "zimbra_organization_status": "Statut"
 }
diff --git a/packages/manager/apps/zimbra/public/translations/redirections/Messages_fr_FR.json b/packages/manager/apps/zimbra/public/translations/redirections/Messages_fr_FR.json
@@ -1,8 +1,9 @@
 {
   "zimbra_redirections_cta": "Créer une redirection",
   "zimbra_redirections_from": "De",
-  "zimbra_redirections_to": "À",
+  "zimbra_redirections_to": "Vers",
   "zimbra_redirections_organization": "Organisation",
+  "zimbra_redirections_status": "Statut",
   "zimbra_redirections_datagrid_tooltip_modification": "Modifier",
   "zimbra_redirections_datagrid_tooltip_delete": "Supprimer",
   "zimbra_redirections_account_title": "Gestion des redirections"

diff --git a/packages/manager/apps/zimbra/src/components/layout-helpers/Dashboard/Dashboard.tsx b/packages/manager/apps/zimbra/src/components/layout-helpers/Dashboard/Dashboard.tsx
@@ -4,6 +4,7 @@ import {
   useResolvedPath,
   useLocation,
   useParams,
+  useNavigate,
 } from 'react-router-dom';
 
 import {
@@ -15,16 +16,21 @@ import {
 
 import { useTranslation } from 'react-i18next';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { OdsTag } from '@ovhcloud/ods-components/react';
+import { ODS_TAG_COLOR, ODS_TAG_SIZE } from '@ovhcloud/ods-components';
 import TabsPanel, { TabItemProps } from './TabsPanel';
 import Breadcrumb from '@/components/Breadcrumb/Breadcrumb';
 import { GUIDES_LIST } from '@/guides.constants';
 import { urls } from '@/routes/routes.constants';
 
 import './Dashboard.scss';
 import { FEATURE_FLAGS } from '@/utils';
+import { useOrganization } from '@/hooks';
 
 export const Dashboard: React.FC = () => {
   const { platformId } = useParams();
+  const { data: organization } = useOrganization();
+  const navigate = useNavigate();
   const { t } = useTranslation('dashboard');
   const context = useContext(ShellContext);
   const { ovhSubsidiary } = context.environment.getUser();
@@ -119,6 +125,21 @@ export const Dashboard: React.FC = () => {
         title: 'Zimbra',
         headerButton: <GuideButton items={guideItems} />,
       }}
+      subtitle={
+        organization &&
+        (((
+          <>
+            <span>{organization.currentState.name}</span>
+            <OdsTag
+              color={ODS_TAG_COLOR.information}
+              onClick={() => navigate(location.pathname)}
+              className="ml-6 font-normal org-tag"
+              size={ODS_TAG_SIZE.lg}
+              label={organization.currentState.label}
+            />
+          </>
+        ) as unknown) as string) // subtitle should accept a ReactElement
+      }
       message={<Notifications clearAfterRead={false} />}
       tabs={<TabsPanel tabs={tabsList} />}
     >

diff --git a/packages/manager/apps/zimbra/src/components/layout-helpers/Dashboard/TabsPanel.tsx b/packages/manager/apps/zimbra/src/components/layout-helpers/Dashboard/TabsPanel.tsx
@@ -1,8 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { NavLink, useLocation, useNavigate } from 'react-router-dom';
-import { OdsTabs, OdsTab, OdsTag } from '@ovhcloud/ods-components/react';
-import { Headers } from '@ovh-ux/manager-react-components';
-import { ODS_TAG_COLOR, ODS_TAG_SIZE } from '@ovhcloud/ods-components';
+import { OdsTabs, OdsTab } from '@ovhcloud/ods-components/react';
 import { useOverridePage, useOrganization } from '@/hooks';
 
 export type TabItemProps = {
@@ -45,19 +43,6 @@ const TabsPanel: React.FC<TabsProps> = ({ tabs }) => {
 
   return (
     <>
-      {organization && (
-        <div className="flex items-center mb-4">
-          <Headers subtitle={organization.currentState.name} />
-          <OdsTag
-            color={ODS_TAG_COLOR.information}
-            onClick={() => navigate(location.pathname)}
-            className="ml-4"
-            size={ODS_TAG_SIZE.lg}
-            label={organization.currentState.label}
-          />
-        </div>
-      )}
-
       {!isOverriddedPage && (
         <OdsTabs>
           {tabs.map(

diff --git a/packages/manager/apps/zimbra/src/index.scss b/packages/manager/apps/zimbra/src/index.scss
@@ -18,3 +18,8 @@ ods-button.action-menu-item::part(button) {
 ods-modal::part(dialog) {
   max-height: 100vh;
 }
+
+// tag doesn't seems centered if line is bigger
+ods-tag.org-tag::part(tag) {
+  transform: translateY(-10%);
+}
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/AutoReplies/AutoReplies.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/AutoReplies/AutoReplies.tsx
@@ -21,6 +21,7 @@ import ActionButtonAutoReply from './ActionButtonAutoReply.component';
 import { ResourceStatus } from '@/api/api.type';
 import { useGenerateUrl, usePlatform } from '@/hooks';
 import { IAM_ACTIONS } from '@/utils/iamAction.constants';
+import { BadgeStatus } from '@/components/BadgeStatus';
 
 export type AutoRepliesItem = {
   id: string;
@@ -71,7 +72,12 @@ const columns: DatagridColumn<AutoRepliesItem>[] = [
     label: 'zimbra_auto_replies_copyTo',
   },
   {
-    id: 'deleteButton',
+    id: 'status',
+    cell: (item) => <BadgeStatus itemStatus={item.status}></BadgeStatus>,
+    label: 'zimbra_auto_replies_status',
+  },
+  {
+    id: 'actions',
     cell: (item) => <ActionButtonAutoReply autoReplyItem={item} />,
     label: '',
   },
@@ -93,7 +99,7 @@ export function AutoReplies() {
   ]);
 
   return (
-    <div data-testid="autoreplies" className="py-6 mt-8">
+    <div data-testid="autoreplies" className="py-6">
       <Outlet />
       {platformUrn && !shouldHide && (
         <>

diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Domains/Domains.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Domains/Domains.tsx
@@ -34,6 +34,7 @@ import Loading from '@/components/Loading/Loading';
 import { DiagnosticBadge } from '@/components/DiagnosticBadge';
 import { DomainType } from '@/api/domain/type';
 import { AccountStatistics, ResourceStatus } from '@/api/api.type';
+import { BadgeStatus } from '@/components/BadgeStatus';
 
 export type DomainsItem = {
   id: string;
@@ -96,6 +97,11 @@ const columns: DatagridColumn<DomainsItem>[] = [
     },
     label: 'zimbra_domains_datagrid_diagnostic_label',
   },
+  {
+    id: 'status',
+    cell: (item) => <BadgeStatus itemStatus={item.status}></BadgeStatus>,
+    label: 'zimbra_domains_datagrid_status_label',
+  },
   {
     id: 'tooltip',
     cell: (item: DomainsItem) => <ActionButtonDomain domainItem={item} />,

diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccounts.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccounts.tsx
@@ -74,11 +74,6 @@ const columns: DatagridColumn<EmailsItem>[] = [
     ),
     label: 'zimbra_account_datagrid_offer_label',
   },
-  {
-    id: 'status',
-    cell: (item) => <BadgeStatus itemStatus={item.status}></BadgeStatus>,
-    label: 'zimbra_account_datagrid_status_label',
-  },
   {
     id: 'quota',
     cell: (item) => (
@@ -88,6 +83,11 @@ const columns: DatagridColumn<EmailsItem>[] = [
     ),
     label: 'zimbra_account_datagrid_quota',
   },
+  {
+    id: 'status',
+    cell: (item) => <BadgeStatus itemStatus={item.status}></BadgeStatus>,
+    label: 'zimbra_account_datagrid_status_label',
+  },
   {
     id: 'tooltip',
     cell: (item: EmailsItem) => <ActionButtonEmail emailsItem={item} />,

diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/MailingLists.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/MailingLists.tsx
@@ -26,6 +26,7 @@ import { ResourceStatus } from '@/api/api.type';
 import { MailingListType } from '@/api/mailinglist';
 import { DATAGRID_REFRESH_INTERVAL, DATAGRID_REFRESH_ON_MOUNT } from '@/utils';
 import Loading from '@/components/Loading/Loading';
+import { BadgeStatus } from '@/components/BadgeStatus';
 
 export type MailingListItem = {
   id: string;
@@ -83,6 +84,11 @@ const columns: DatagridColumn<MailingListItem>[] = [
     ),
     label: 'zimbra_mailinglists_datagrid_subscribers_label',
   },
+  {
+    id: 'status',
+    cell: (item) => <BadgeStatus itemStatus={item.status}></BadgeStatus>,
+    label: 'zimbra_mailinglists_datagrid_status_label',
+  },
   {
     id: 'tooltip',
     cell: (item) => <ActionButtonMailingList mailingListItem={item} />,
@@ -131,7 +137,7 @@ export default function MailingLists() {
   const quota = platformData?.currentState?.quota || 0;
 
   return (
-    <div className="py-6 mt-8">
+    <div className="py-6">
       <Outlet />
       {platformUrn && !isOverridedPage && (
         <>

diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/Redirections.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/Redirections.tsx
@@ -17,6 +17,7 @@ import { useGenerateUrl, usePlatform } from '@/hooks';
 import { IAM_ACTIONS } from '@/utils/iamAction.constants';
 import { ResourceStatus } from '@/api/api.type';
 import Loading from '@/components/Loading/Loading';
+import { BadgeStatus } from '@/components/BadgeStatus';
 
 export type RedirectionsItem = {
   id: string;
@@ -59,6 +60,11 @@ const columns: DatagridColumn<RedirectionsItem>[] = [
     cell: (item) => <div>{item.organization}</div>,
     label: 'zimbra_redirections_organization',
   },
+  {
+    id: 'status',
+    cell: (item) => <BadgeStatus itemStatus={item.status}></BadgeStatus>,
+    label: 'zimbra_redirections_status',
+  },
   {
     id: 'tooltip',
     cell: (item) => (