✨(front) add icon to button to configure a domain (#1054)

Added an icon to help understanding of the configuration button/tag

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

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} />
   );
 };

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 && (
-              mailDomain?.status === 'action_required' ||
-              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>
             )}

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>
+          {mailDomain.status !== 'enabled' ? (
-            {t(
+            <>
-              'The domain is currently in action required status. Please take the necessary actions to resolve those following issues.',
+              <p>
-            )}
+                {t(
-          </p>
+                  'The domain is currently in action required status. Please take the necessary actions to resolve those following issues.',
-          <h3>{t('Actions required detail')}</h3>
+                )}
-          <pre>
+              </p>
-            {mailDomain.action_required_details &&
+              <h3>{t('Actions required detail')}</h3>
-              Object.entries(mailDomain.action_required_details).map(
+            </>
+          ) : (
+            <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={{