feat(web-hosting): post demo modification

erazafimovh · stif59100 · commit d260a03bb9c7 · 2025-11-19T07:16:41.000+01:00
ref: #PUWEBPT-114

Signed-off-by: Emilien Razafimampiandra &lt;emilien.razafimampiandra.ext@corp.ovh.com&gt;
diff --git a/packages/manager/apps/web-hosting/public/translations/multisite/Messages_fr_FR.json b/packages/manager/apps/web-hosting/public/translations/multisite/Messages_fr_FR.json
@@ -78,7 +78,7 @@
   "multisite_modal_domain_configuration_modify_step2_domain_name": "Nom du domaine",
   "multisite_modal_domain_configuration_modify_step2_cdn": "CDN",
   "multisite_modal_domain_configuration_modify_step2_ssl": "SSL",
-   "multisite_modal_domain_configuration_modify_step2_firewall": "Firewall",
+  "multisite_modal_domain_configuration_modify_step2_firewall": "Firewall",
   "multisite_modal_domain_configuration_modify_step2_cdn_stats_ACTIVE": "activé",
   "multisite_modal_domain_configuration_modify_step2_cdn_stats_NONE": "désactivé",
   "multisite_modal_domain_configuration_modify_success": "La modification du ou des domaines associé(s) à votre hébergement mutualisé va être effectuée.",
@@ -97,15 +97,17 @@
   "multisite_modal_domain_configuration_modify_options_choose": "Choisissez une option",
   "multisite_modal_domain_configuration_cdn_help": "Activez le CDN afin d'accélérer l'accessibilité de votre site dans le monde.",
   "multisite_modal_domain_configuration_modify_country_ip_help": "Activez l'IP du pays pour géolocaliser les parties internationales de votre site afin d'optimiser leur référencement.",
-  "multisite_modal_domain_configuration_modify_firewall_help": "Activez le firewall pour bénéficier d’une protection renforcée de votre site.",
+  "multisite_modal_domain_configuration_modify_firewall_help": "Activez le firewall pour bénéficier d'une protection renforcée de votre site.",
   "multisite_modal_domain_configuration_modify_ownlog_help": "Activez cette option pour avoir des logs séparés pour votre multisite.",
   "multisite_modal_domain_configuration_modify_path_help": "Les caractères acceptés pour les dossiers sont les lettres, les chiffres, et les caractères -_./ Par ailleurs, il est interdit d'accéder aux dossiers parents en utilisant ..",
   "multisite_modal_domain_configuration_modify_countriesIp": "Ip du pays",
   "multisite_modal_domain_configuration_modify_countriesIp_none": "Aucune",
   "multisite_modal_domain_configuration_modify_ssl_help": "Activer l'option SSL pour bénéficier de l'accès à votre site en https",
   "multisite_modal_domain_configuration_modify_git_warning": "Si vous souhaitez modifier votre dossier racine, vous devez au préalable supprimer votre configuration Git du répertoire pour prévenir d'éventuels problèmes de suivi des modifications et de gestion des déploiements.",
-   "multisite_cdn_activate_description": "Le CDN accélère le chargement de vos pages et renforce la sécurité de votre site en bloquant le trafic malveillant.",
+  "multisite_cdn_activate_description": "Le CDN accélère le chargement de vos pages et renforce la sécurité de votre site en bloquant le trafic malveillant.",
   "multisite_cdn_activate_question": "Souhaitez-vous l'activer maintenant ?",
   "multisite_cdn_activate_success": "Le CDN a été activé avec succès",
-  "multisite_cdn_activate_error": "Une erreur est survenue lors de l'activation du CDN"
+  "multisite_cdn_activate_error": "Une erreur est survenue lors de l'activation du CDN",
+  "multisite_linked_domain": "{{ linkedDomains }} domaine",
+  "multisite_linked_domains": "{{ linkedDomains }} domaines"
 }
diff --git a/packages/manager/apps/web-hosting/src/components/badgeStatus/BadgeStatus.component.tsx b/packages/manager/apps/web-hosting/src/components/badgeStatus/BadgeStatus.component.tsx
@@ -31,16 +31,16 @@ export const getStatusColor = (status: Status) => {
     case GitStatus.CREATING:
     case GitStatus.DELETING:
     case GitStatus.DEPLOYING:
-    case GitStatus.INITIALERROR:
     case DnsStatus.EXTERNAL:
       return ODS_BADGE_COLOR.warning;
-    case GitStatus.DISABLED:
+    case GitStatus.INITIALERROR:
     case GitStatus.ERROR:
     case ResourceStatus.ERROR:
     case ResourceStatus.SUSPENDED:
-    case ServiceStatus.NONE:
       return ODS_BADGE_COLOR.critical;
     case DnsStatus.NOT_CONFIGURED:
+    case GitStatus.DISABLED:
+    case ServiceStatus.NONE:
       return ODS_BADGE_COLOR.neutral;
     default:
       return ODS_BADGE_COLOR.information;
diff --git a/packages/manager/apps/web-hosting/src/components/badgeStatus/BadgeStatus.spec.tsx b/packages/manager/apps/web-hosting/src/components/badgeStatus/BadgeStatus.spec.tsx
@@ -26,7 +26,7 @@ describe('BadgeStatus component', () => {
       { status: GitStatus.DELETING, color: ODS_BADGE_COLOR.warning },
       { status: GitStatus.ERROR, color: ODS_BADGE_COLOR.critical },
       { status: ServiceStatus.ACTIVE, color: ODS_BADGE_COLOR.success },
-      { status: ServiceStatus.NONE, color: ODS_BADGE_COLOR.critical },
+      { status: ServiceStatus.NONE, color: ODS_BADGE_COLOR.neutral },
     ];
 
     testCases.forEach(({ status, color }) => {
diff --git a/packages/manager/apps/web-hosting/src/data/hooks/cdn/__tests__/useCdn.spec.tsx b/packages/manager/apps/web-hosting/src/data/hooks/cdn/__tests__/useCdn.spec.tsx
@@ -30,7 +30,7 @@ describe('useGetCDNProperties', () => {
   });
 });
 
-it('useGetServiceNameCdn: should return webhosting cdn ', async () => {
+it('useGetServiceNameCdn: should return webhosting cdn', async () => {
   const { result } = renderHook(() => useGetServiceNameCdn('serviceName'), {
     wrapper,
   });
@@ -40,7 +40,7 @@ it('useGetServiceNameCdn: should return webhosting cdn ', async () => {
   expect(result.current.data).toEqual(serviceNameCdnMock);
 });
 
-it('useGetCdnOption: should return webhosting cdn options ', async () => {
+it('useGetCdnOption: should return webhosting cdn options', async () => {
   const { result } = renderHook(() => useGetCdnOption('serviceName', 'domain'), {
     wrapper,
   });
diff --git a/packages/manager/apps/web-hosting/src/data/hooks/webHosting/webHostingWebsite/__tests__/useWebHostingWebsite.spec.ts b/packages/manager/apps/web-hosting/src/data/hooks/webHosting/webHostingWebsite/__tests__/useWebHostingWebsite.spec.ts
@@ -12,7 +12,7 @@ describe('useWebHostingAttachedDomain', () => {
     vi.clearAllMocks();
   });
 
-  it('should return webhosting websites list ', async () => {
+  it('should return webhosting websites list', async () => {
     const { result } = renderHook(() => useWebHostingWebsite('test'), {
       wrapper,
     });
diff --git a/packages/manager/apps/web-hosting/src/data/hooks/webHostingDashboard/__tests__/useWebHostingDashboard.spec.ts b/packages/manager/apps/web-hosting/src/data/hooks/webHostingDashboard/__tests__/useWebHostingDashboard.spec.ts
@@ -103,7 +103,7 @@ describe('useWebHostingDashboard', () => {
     });
     expect(result.current.data).toEqual(domainInformationMock);
   });
-  it('useGetHostingServiceWebsite: should return webhosting website list ', async () => {
+  it('useGetHostingServiceWebsite: should return webhosting website list', async () => {
     const { result } = renderHook(() => useGetHostingServiceWebsite('serviceName', 'path'), {
       wrapper,
     });
diff --git a/packages/manager/apps/web-hosting/src/pages/dashboard/multisite/Multisite.page.tsx b/packages/manager/apps/web-hosting/src/pages/dashboard/multisite/Multisite.page.tsx
@@ -69,7 +69,16 @@ export default function MultisitePage() {
         id: 'linkedDomains',
         label: t('web_hosting_status_header_linked_domains'),
         isSortable: false,
-        cell: (item) => <span>{item.currentState?.linkedDomains}</span>,
+        cell: (item) => (
+          <span>
+            {t(
+              `multisite:multisite_linked_${
+                item.currentState?.linkedDomains > 1 ? 'domains' : 'domain'
+              }`,
+              { linkedDomains: item.currentState?.linkedDomains },
+            )}
+          </span>
+        ),
       },
       {
         id: 'path',
diff --git a/packages/manager/apps/web-hosting/src/pages/dashboard/multisite/cdn/component/CdnRuleDatagrid.tsx b/packages/manager/apps/web-hosting/src/pages/dashboard/multisite/cdn/component/CdnRuleDatagrid.tsx
@@ -54,22 +54,6 @@ export default function CdnRuleDatagrid({ range }: { range: string }) {
     ?.filter((item) => item?.type === CdnOptionType.CACHE_RULE)
     .sort((a, b) => a.config.priority - b.config.priority);
 
-  const TopbarCTA = () => (
-    <OdsButton
-      icon={ODS_ICON_NAME.plus}
-      size={ODS_BUTTON_SIZE.sm}
-      variant={ODS_BUTTON_VARIANT.outline}
-      label={t('cdn_shared_option_cache_rule_btn_add_rule')}
-      onClick={() =>
-        navigate(
-          urls.cdnCacheRule
-            .replace(subRoutes.serviceName, serviceName)
-            .replace(subRoutes.domain, domain),
-        )
-      }
-    />
-  );
-
   const DatagridActionCell = (props: CdnOption) => {
     const items: ActionMenuItem[] = [
       {
@@ -222,7 +206,21 @@ export default function CdnRuleDatagrid({ range }: { range: string }) {
             setSearchInput,
             onSearch: (search) => setDebouncedSearchInput(search),
           }}
-          topbar={<TopbarCTA />}
+          topbar={
+            <OdsButton
+              icon={ODS_ICON_NAME.plus}
+              size={ODS_BUTTON_SIZE.sm}
+              variant={ODS_BUTTON_VARIANT.outline}
+              label={t('cdn_shared_option_cache_rule_btn_add_rule')}
+              onClick={() =>
+                navigate(
+                  urls.cdnCacheRule
+                    .replace(subRoutes.serviceName, serviceName)
+                    .replace(subRoutes.domain, domain),
+                )
+              }
+            />
+          }
         />
       )}
     </React.Suspense>
diff --git a/packages/manager/apps/web-hosting/src/pages/dashboard/multisite/domain/AddDomain.page.tsx b/packages/manager/apps/web-hosting/src/pages/dashboard/multisite/domain/AddDomain.page.tsx
@@ -60,7 +60,7 @@ export default function AddWDomainPage() {
     () => {
       addSuccess(
         <>
-          <OdsText className="mr-2">{t('multisite:multisite_add_website_success')}</OdsText>
+          <OdsText className="mr-3">{t('multisite:multisite_add_website_success')}</OdsText>
           <OdsLink
             href={`#/${serviceName}/task`}
             label={t('multisite:multisite_add_website_in_progress')}
diff --git a/packages/manager/apps/web-hosting/src/pages/dashboard/multisite/domain/DetacheDomain.modal.tsx b/packages/manager/apps/web-hosting/src/pages/dashboard/multisite/domain/DetacheDomain.modal.tsx
@@ -28,7 +28,7 @@ export default function DetacheDomainModal() {
   const { t } = useTranslation(['common', NAMESPACES.ACTIONS]);
   const { data } = useWebHostingAttachedDomain({ domain });
   const domainData = data?.find((d) => d?.currentState?.fqdn === domain);
-  const canDetachDomainWithGit = domainData?.currentState?.git?.status === GitStatus?.DISABLED;
+  const canDetachDomainWithGit = domainData?.currentState?.git?.status === GitStatus?.CREATED;
   const domainExisting = useGetAddDomainExisting(serviceName, false, Boolean(serviceName));
   const wwwDomainExists = domainExisting?.data?.existingDomains?.includes(`www.${domain}`);
 
diff --git a/packages/manager/apps/web-hosting/src/pages/dashboard/multisite/website/AddWebsite.page.tsx b/packages/manager/apps/web-hosting/src/pages/dashboard/multisite/website/AddWebsite.page.tsx
@@ -54,7 +54,7 @@ export default function AddWebsitePage() {
     () => {
       addSuccess(
         <>
-          <OdsText className="mr-2">{t('multisite:multisite_add_website_success')}</OdsText>
+          <OdsText className="mr-3">{t('multisite:multisite_add_website_success')}</OdsText>
           <OdsLink
             href={`#/${serviceName}/task`}
             label={t('multisite:multisite_add_website_in_progress')}
diff --git a/packages/manager/apps/web-hosting/src/pages/dashboard/multisite/website/component/DomainAdvancedConfiguration.tsx b/packages/manager/apps/web-hosting/src/pages/dashboard/multisite/website/component/DomainAdvancedConfiguration.tsx
@@ -97,13 +97,13 @@ export const DomainAdvancedConfiguration: React.FC<DomainAdvancedConfigurationPr
                 />
               )}
             />
-            <label className="ml-2 cursor-pointer">
+            <label className="ml-4 cursor-pointer">
               <OdsText preset={ODS_TEXT_PRESET.heading6}>
                 {t('dashboard:hosting_multisite_domain_configuration_countriesIp')}
               </OdsText>
             </label>
           </div>
-          <OdsText preset={ODS_TEXT_PRESET.caption}>
+          <OdsText preset={ODS_TEXT_PRESET.caption} className="ml-8 mt-4 mb-5">
             {t('multisite:multisite_add_website_advanced_options_ip')}
           </OdsText>
           <Controller
@@ -143,13 +143,13 @@ export const DomainAdvancedConfiguration: React.FC<DomainAdvancedConfigurationPr
                 />
               )}
             />
-            <label className="ml-2 cursor-pointer">
+            <label className="ml-4 cursor-pointer">
               <OdsText preset={ODS_TEXT_PRESET.heading6}>
                 {t('dashboard:hosting_add_step3_firewall')}
               </OdsText>
             </label>
           </div>
-          <OdsText preset={ODS_TEXT_PRESET.caption}>
+          <OdsText preset={ODS_TEXT_PRESET.caption} className="ml-8 mt-4">
             {t('multisite:multisite_add_website_advanced_options_firewall')}
           </OdsText>
         </OdsCard>
@@ -170,13 +170,13 @@ export const DomainAdvancedConfiguration: React.FC<DomainAdvancedConfigurationPr
                 />
               )}
             />
-            <label className="ml-2 cursor-pointer">
+            <label className="ml-4 cursor-pointer">
               <OdsText preset={ODS_TEXT_PRESET.heading6}>
                 {t('dashboard:hosting_multisite_domain_configuration_cdn')}
               </OdsText>
             </label>
           </div>
-          <OdsText preset={ODS_TEXT_PRESET.caption}>
+          <OdsText preset={ODS_TEXT_PRESET.caption} className="ml-8 mt-4">
             {t('multisite:multisite_add_website_advanced_options_cdn')}
           </OdsText>
         </OdsCard>
