✨(frontend) display spec on domain required actions modal

Display DNS configuration required
suitenumerique · Feb 13, 2025 · 14261aa · 14261aa
1 parent f49a82a
commit 14261aa
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 3 deletions.
diff --git a/src/frontend/apps/desk/src/features/mail-domains/domains/components/MailDomainView.tsx b/src/frontend/apps/desk/src/features/mail-domains/domains/components/MailDomainView.tsx
@@ -62,18 +62,40 @@ export const MailDomainView = ({ mailDomain }: Props) => {
             )}
           </p>
           <h3>{t('Actions required detail')}</h3>
+
           <pre>
             {mailDomain.action_required_details &&
               Object.entries(mailDomain.action_required_details).map(
-                ([check, value]) => (
-                  <ul key={check}>
-                    <li>
+                ([check, value], index) => (
+                  <ul key={`action-required-list-${index}`}>
+                    <li key={`action-required-${index}`}>
                       <b>{check}</b>: {value}
                     </li>
                   </ul>
                 ),
               )}
           </pre>
+          {mailDomain.spec && (
+            <Box $margin={{ bottom: 'medium' }}>
+              <h3>{t('DNS Configuration Required:')}</h3>
+              <pre>
+                {t('Add the following DNS values:')}
+                <ul>
+                  {mailDomain.spec.map((item, index) => (
+                    <li key={`dns-record-${index}`}>
+                      {item.target && (
+                        <>
+                          <b>{item.target.toUpperCase()}</b> -{' '}
+                        </>
+                      )}
+                      <b>{item.type.toUpperCase()}</b> {t('with value:')}{' '}
+                      <mark>{item.value}</mark>
+                    </li>
+                  ))}
+                </ul>
+              </pre>
+            </Box>
+          )}
         </Modal>
       )}
       <Box $padding="big">

diff --git a/src/frontend/apps/desk/src/features/mail-domains/domains/types.ts b/src/frontend/apps/desk/src/features/mail-domains/domains/types.ts
@@ -17,6 +17,11 @@ export interface MailDomain {
     delete: boolean;
     manage_accesses: boolean;
   };
+  spec?: Array<{
+    target: string;
+    type: string;
+    value: string;
+  }>;
 }
 
 export enum Role {

diff --git a/src/frontend/apps/desk/src/i18n/translations.json b/src/frontend/apps/desk/src/i18n/translations.json
@@ -32,6 +32,7 @@
       "Add a team": "Ajouter un groupe",
       "Add members to the team": "Ajouter des membres à l'équipe",
       "Add the domain": "Ajouter le domaine",
+      "Add the following DNS values:": "Ajouter les valeurs DNS suivantes :",
       "Add to group": "Ajouter au groupe",
       "Address: National Agency for Territorial Cohesion - 20, avenue de Ségur TSA 10717 75 334 Paris Cedex 07 Paris": "Adresse : Agence Nationale de la Cohésion des Territoires - 20, avenue de Ségur TSA 10717 75 334 Paris Cedex 07",
       "Administration": "Administration",
@@ -65,6 +66,7 @@
       "Create the team": "Créer le groupe",
       "Create your first team by clicking on the \"Create a new team\" button.": "Créez votre premier groupe en cliquant sur le bouton \"Créer un nouveau groupe\".",
       "Created at": "Créé le",
+      "DNS Configuration Required:": "Configuration DNS requise :",
       "Declaration established on June 25, 2024.": "Établie le 25 juin 2024.",
       "Defender of Rights - Free response - 71120 75342 Paris CEDEX 07": "Défenseur des droits\nLibre réponse 71120 75342 Paris CEDEX 07",
       "Delete the team": "Supprimer le groupe",
@@ -223,6 +225,7 @@
       "accessibility-contact-defenseurdesdroits": "Contacter le délégué du<1>Défenseur des droits dans votre région</1>",
       "accessibility-form-defenseurdesdroits": "Écrire un message au<1>Défenseur des droits</1>",
       "mail domains list loading": "chargement de la liste des domaines de messagerie",
+      "with value:": "avec la valeur:",
       "{{count}} member_many": "{{count}} membres",
       "{{count}} member_one": "{{count}} membre",
       "{{count}} member_other": "{{count}} membres",