feat: decorate emails in banner view

frontend/src/component/banners/internalBanners/LicenseBanner.tsx

@@ -5,6 +5,7 @@ import {
 } from 'hooks/api/getters/useLicense/useLicense';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import type { BannerVariant } from 'interfaces/banner';
+import { decorateEmailsAsMarkdown } from 'utils/decorateEmailsAsMarkdown';
 
 export const LicenseBanner = () => {
     const { isEnterprise } = useUiConfig();
@@ -20,9 +21,10 @@ export const LicenseBanner = () => {
     ) {
         if (!licenseInfo.isValid) {
             const banner = {
-                message:
+                message: decorateEmailsAsMarkdown(
                     licenseInfo.message ||
-                    'You have an invalid Unleash license.',
+                        'You have an invalid Unleash license.',
+                ),
                 variant: 'error' as BannerVariant,
                 sticky: true,
             };
@@ -31,7 +33,7 @@ export const LicenseBanner = () => {
         } else {
             if (!license.loading && !license.error && licenseInfo.message) {
                 const banner = {
-                    message: licenseInfo.message,
+                    message: decorateEmailsAsMarkdown(licenseInfo.message),
                     variant: mapToVariant(licenseInfo.messageType),
                     sticky: true,
                 };

frontend/src/utils/decorateEmailsAsMarkdown.test.ts

@@ -0,0 +1,44 @@
+import { decorateEmailsAsMarkdown } from './decorateEmailsAsMarkdown';
+
+describe('decorateEmailsAsMarkdown', () => {
+    it('decorates a plain email', () => {
+        const input =
+            'Please contact your account representative or contact@mydomain.com. Thanks!';
+        const expected =
+            'Please contact your account representative or [contact@mydomain.com](contact@mydomain.com). Thanks!';
+        expect(decorateEmailsAsMarkdown(input)).toBe(expected);
+    });
+
+    it('does not re-decorate an already decorated email', () => {
+        const input =
+            'Reach us at [contact@mydomain.com](contact@mydomain.com)';
+        expect(decorateEmailsAsMarkdown(input)).toBe(input);
+    });
+
+    it('handles multiple emails in a string', () => {
+        const input = 'Emails: first@example.com, second@example.com';
+        const expected =
+            'Emails: [first@example.com](first@example.com), [second@example.com](second@example.com)';
+        expect(decorateEmailsAsMarkdown(input)).toBe(expected);
+    });
+
+    it('handles multiple emails in a string when some are decorated', () => {
+        const input =
+            'Emails: [first@example.com](first@example.com), second@example.com';
+        const expected =
+            'Emails: [first@example.com](first@example.com), [second@example.com](second@example.com)';
+        expect(decorateEmailsAsMarkdown(input)).toBe(expected);
+    });
+
+    it('ignores invalid email patterns', () => {
+        const input = 'Not an email: test@@example..com';
+        expect(decorateEmailsAsMarkdown(input)).toBe(input);
+    });
+
+    it('decorates emails adjacent to punctuation', () => {
+        const input = 'Contact:contact@mydomain.com, for info.';
+        const expected =
+            'Contact:[contact@mydomain.com](contact@mydomain.com), for info.';
+        expect(decorateEmailsAsMarkdown(input)).toBe(expected);
+    });
+});

frontend/src/utils/decorateEmailsAsMarkdown.ts

@@ -0,0 +1,5 @@
+export function decorateEmailsAsMarkdown(text: string): string {
+    const emailRegex =
+        /(?<!\[)(?<!\]\()(\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}\b)(?!\]\()/g;
+    return text.replace(emailRegex, (email) => `[${email}](${email})`);
+}