From a29ef05d8bb7f01103faf23e41ef81fb42fb16d6 Mon Sep 17 00:00:00 2001
From: elvoisin <95469923+elvoisin@users.noreply.github.com>
Date: Wed, 11 Feb 2026 16:39:42 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(front)=20add=20icon=20to=20button=20t?=
 =?UTF-8?q?o=20configure=20a=20domain=20(#1054)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added an icon to help understanding of the configuration button/tag
---
 CHANGELOG.md                                  |  1 +
 src/frontend/apps/desk/src/components/Tag.tsx | 29 +++++++++++---
 .../domains/components/MailDomainView.tsx     |  6 +--
 .../components/ModalRequiredActionDomain.tsx  | 38 +++++++++++++------
 4 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 98e68a8..5cd0c2d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to
 
 ### Added
 
+- ✨(front) add icon to button to configure a domain
 - ✨(invitations) allow delete invitations mails domains access by an admin
 - ✨(front) delete invitations mails domains access
 - ✨(front) add show invitations mails domains access #1040
diff --git a/src/frontend/apps/desk/src/components/Tag.tsx b/src/frontend/apps/desk/src/components/Tag.tsx
index 9e753f8..e19cfcb 100644
--- a/src/frontend/apps/desk/src/components/Tag.tsx
+++ b/src/frontend/apps/desk/src/components/Tag.tsx
@@ -1,7 +1,7 @@
 import { Tooltip } from '@openfun/cunningham-react';
 import { useTranslation } from 'react-i18next';
 
-import { Box } from '@/components';
+import { Box, Icon } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 
 interface TagContentProps {
@@ -9,9 +9,10 @@ interface TagContentProps {
   showTooltip?: boolean;
   tooltipType?: 'domain' | 'mail';
   placement?: 'top' | 'bottom';
+  showIcon?: boolean;
 }
 
-const TagContent = ({ status }: TagContentProps) => {
+const TagContent = ({ status, showIcon }: TagContentProps) => {
   const { colorsTokens } = useCunninghamTheme();
   const { t } = useTranslation();
 
@@ -33,17 +34,35 @@ const TagContent = ({ status }: TagContentProps) => {
 
   return (
     <Box
+      $display="flex"
+      $direction="row"
+      $gap="4px"
       $background={backgroundColor[status]}
       $color={textColor[status]}
       $radius="4px"
       $css={`
         padding: 4px 8px;
         font-weight: 600;
-        cursor: default;
         text-transform: capitalize;
       `}
     >
       {t(status).replace('_', ' ')}
+      {showIcon &&
+        (status === 'enabled' ? (
+          <Icon
+            $size="small"
+            $weight="bold"
+            iconName="check"
+            $color="inherit"
+          />
+        ) : (
+          <Icon
+            $size="small"
+            $weight="bold"
+            iconName="arrow_forward"
+            $color="inherit"
+          />
+        ))}
     </Box>
   );
 };
@@ -80,10 +99,10 @@ export const Tag = ({ ...props }: TagContentProps) => {
   return props.showTooltip ? (
     <Tooltip content={tooltipContent} placement={props.placement || 'top'}>
       <Box>
-        <TagContent status={props.status} />
+        <TagContent status={props.status} showIcon={props.showIcon} />
       </Box>
     </Tooltip>
   ) : (
-    <TagContent status={props.status} />
+    <TagContent status={props.status} showIcon={props.showIcon} />
   );
 };
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
index 2b07b3a..affe26d 100644
--- 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
@@ -89,15 +89,14 @@ export const MailDomainView = ({
               {mailDomain.name}
             </Text>
 
-            {(mailDomain?.status === 'pending' ||
-              mailDomain?.status === 'action_required' ||
-              mailDomain?.status) && (
+            {mailDomain?.status && (
               <button
                 data-testid="actions_required"
                 onClick={handleShowModal}
                 style={{
                   backgroundColor: 'transparent',
                   border: 'none',
+                  cursor: 'pointer',
                 }}
               >
                 <Tag
@@ -105,6 +104,7 @@ export const MailDomainView = ({
                   status={mailDomain.status}
                   tooltipType="domain"
                   placement="bottom"
+                  showIcon={true}
                 ></Tag>
               </button>
             )}
diff --git a/src/frontend/apps/desk/src/features/mail-domains/domains/components/ModalRequiredActionDomain.tsx b/src/frontend/apps/desk/src/features/mail-domains/domains/components/ModalRequiredActionDomain.tsx
index f40ac35..4b19c64 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/domains/components/ModalRequiredActionDomain.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/domains/components/ModalRequiredActionDomain.tsx
@@ -47,18 +47,27 @@ export const ModalRequiredActionDomain = ({
 
   const steps = [
     {
-      title: t('Required actions on domain'),
+      title:
+        mailDomain.status !== 'enabled'
+          ? t('Required actions on domain')
+          : t('Domain configuration'),
       content: (
         <Text>
-          <p>
-            {t(
-              'The domain is currently in action required status. Please take the necessary actions to resolve those following issues.',
-            )}
-          </p>
-          <h3>{t('Actions required detail')}</h3>
-          <pre>
-            {mailDomain.action_required_details &&
-              Object.entries(mailDomain.action_required_details).map(
+          {mailDomain.status !== 'enabled' ? (
+            <>
+              <p>
+                {t(
+                  'The domain is currently in action required status. Please take the necessary actions to resolve those following issues.',
+                )}
+              </p>
+              <h3>{t('Actions required detail')}</h3>
+            </>
+          ) : (
+            <p>{t('The domain is currently enabled.')}</p>
+          )}
+          {mailDomain.action_required_details && (
+            <pre>
+              {Object.entries(mailDomain.action_required_details).map(
                 ([check, value], index) => (
                   <ul key={`action-required-list-${index}`}>
                     <li key={`action-required-${index}`}>
@@ -67,10 +76,15 @@ export const ModalRequiredActionDomain = ({
                   </ul>
                 ),
               )}
-          </pre>
+            </pre>
+          )}
           {mailDomain.expected_config && (
             <Box $margin={{ bottom: 'medium' }}>
-              <h3>{t('DNS Configuration Required:')}</h3>
+              <h3>
+                {mailDomain.status === 'action_required'
+                  ? t('DNS Configuration Required:')
+                  : t('DNS Configuration:')}
+              </h3>
               <pre>
                 <div
                   style={{