From cc2cc4585c1b730c18dcce1961cab71012497b66 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 22 Sep 2022 21:09:50 +0800
Subject: [PATCH] Add link to changelog notificaiton

---
 .../NotificationRows.utils.tsx                | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/NotificationRows.utils.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/NotificationRows.utils.tsx
index 501081fd020..97051471ffc 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/NotificationRows.utils.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/NotificationRows.utils.tsx
@@ -10,6 +10,7 @@ import {
   ViolatedLimit,
 } from '@supabase/shared-types/out/notifications'
 import { IconArrowRight, IconExternalLink } from '@supabase/ui'
+import Link from 'next/link'
 
 export const formatNotificationText = (project: Project, notification: Notification) => {
   const projectName = project.name
@@ -85,13 +86,19 @@ export const formatNotificationText = (project: Project, notification: Notificat
                 <p className="text-sm">{upgrade.name}</p>
                 <IconArrowRight size={12} strokeWidth={2} />
                 <p className="text-sm">{upgrade.version_to}</p>
-                <div className="!ml-4">
-                  <IconExternalLink
-                    className="cursor-pointer text-scale-1000 hover:text-scale-1200 transition"
-                    size={12}
-                    strokeWidth={2}
-                  />
-                </div>
+                {upgrade.changelog_link && (
+                  <div className="!ml-4">
+                    <Link href={upgrade.changelog_link}>
+                      <a>
+                        <IconExternalLink
+                          className="cursor-pointer text-scale-1000 hover:text-scale-1200 transition"
+                          size={12}
+                          strokeWidth={2}
+                        />
+                      </a>
+                    </Link>
+                  </div>
+                )}
               </div>
             </li>
           ))}