From c9590ea70307667076e9a3aceb0974db28281f84 Mon Sep 17 00:00:00 2001
From: Matteo Scurati <matteo.scurati@gmail.com>
Date: Thu, 24 Oct 2024 14:31:24 +0200
Subject: [PATCH] feat: add support for external links in feature announcements
 (#26491)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**


This PR introduces support for external links in feature announcements.
The following changes have been made:

- **Import `TypeExternalLinkFields`**: Added the import statement for
`TypeExternalLinkFields` in `feature-announcements.ts`.
- **Update `TypeFeatureAnnouncementFields`**: Included the
`externalLink` field in the `TypeFeatureAnnouncementFields` type.
- **Modify `FeatureAnnouncementRawNotificationData`**: Added the
`externalLink` field to the `FeatureAnnouncementRawNotificationData`
type.
- **Update `fetchFeatureAnnouncementNotifications`**: Modified the
function to fetch and process the `externalLink` field from Contentful.
- **Update UI Components**: Updated the relevant UI components to handle
and display the `externalLink` in notifications.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26491?quickstart=1)

## **Related issues**

No related issues

## **Manual testing steps**

To test the modification, it’s necessary to create a notification on
Contentful that includes both types of links.

## **Screenshots/Recordings**

[<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change.
-->](https://www.figma.com/design/c7GgNw2kScGrVyRGAPhwEd/Notifications?node-id=3331-67563&t=RRE2jn0OHn8T2ui9-11)

### **Before**

<img width="868" alt="Screenshot 2024-10-23 at 18 31 38"
src="https://github.com/user-attachments/assets/d87dc0c4-c7c2-4046-8877-2b59bb67401e">

### **After**

<img width="868" alt="Screenshot 2024-10-23 at 18 33 52"
src="https://github.com/user-attachments/assets/6e686e64-5b4e-46ed-8916-48183419f606">

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
 .../notification-details-footer.tsx                | 10 ++++++++--
 .../feature-announcement/feature-announcement.tsx  | 14 ++++++++++++++
 .../types/notifications/notifications.ts           |  1 +
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/ui/pages/notification-details/notification-details-footer/notification-details-footer.tsx b/ui/pages/notification-details/notification-details-footer/notification-details-footer.tsx
index 2af87b2d6730..7a1f9a1c8890 100644
--- a/ui/pages/notification-details/notification-details-footer/notification-details-footer.tsx
+++ b/ui/pages/notification-details/notification-details-footer/notification-details-footer.tsx
@@ -35,9 +35,15 @@ export const NotificationDetailsFooter = ({
         </>
       )}
       {footer.type === 'footer_feature_announcement' && (
-        <>
+        <Box
+          display={Display.Flex}
+          gap={4}
+          flexDirection={FlexDirection.Row}
+          width={BlockSize.Full}
+        >
+          <footer.ExternalLink notification={notification} />
           <footer.ExtensionLink notification={notification} />
-        </>
+        </Box>
       )}
     </Box>
   );
diff --git a/ui/pages/notifications/notification-components/feature-announcement/feature-announcement.tsx b/ui/pages/notifications/notification-components/feature-announcement/feature-announcement.tsx
index 281112b6172d..d64015d590a3 100644
--- a/ui/pages/notifications/notification-components/feature-announcement/feature-announcement.tsx
+++ b/ui/pages/notifications/notification-components/feature-announcement/feature-announcement.tsx
@@ -114,6 +114,20 @@ export const components: NotificationComponent<FeatureAnnouncementNotification>
             href={`/${notification.data.extensionLink.extensionLinkRoute}`}
             id={notification.id}
             endIconName={false}
+            // Even if the link is not external, it will open in a new tab
+            // to avoid breaking the popup
+            isExternal={true}
+          />
+        ) : null,
+      ExternalLink: ({ notification }) =>
+        notification.data.externalLink ? (
+          <NotificationDetailButton
+            notification={notification}
+            variant={ButtonVariant.Secondary}
+            text={notification.data.externalLink.externalLinkText}
+            href={`${notification.data.externalLink.externalLinkUrl}`}
+            id={notification.id}
+            endIconName={false}
             isExternal={true}
           />
         ) : null,
diff --git a/ui/pages/notifications/notification-components/types/notifications/notifications.ts b/ui/pages/notifications/notification-components/types/notifications/notifications.ts
index 445646904ecb..15831627bf9c 100644
--- a/ui/pages/notifications/notification-components/types/notifications/notifications.ts
+++ b/ui/pages/notifications/notification-components/types/notifications/notifications.ts
@@ -40,6 +40,7 @@ type FooterOnChainNotification<N = Notification> = {
 type FooterFeatureAnnouncement<N = Notification> = {
   type: 'footer_feature_announcement';
   ExtensionLink: NotificationFC<N>;
+  ExternalLink: NotificationFC<N>;
 };
 
 /**