add clickable urls to notifications

pluralsh · Sep 19, 2024 · b24e185 · b24e185
1 parent 1948c4c
commit b24e185
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 24 deletions.
diff --git a/assets/package.json b/assets/package.json
@@ -46,7 +46,7 @@
     "@nivo/pie": "0.87.0",
     "@nivo/radial-bar": "0.87.0",
     "@nivo/tooltip": "0.87.0",
-    "@pluralsh/design-system": "3.67.2",
+    "@pluralsh/design-system": "3.68.0",
     "@react-hooks-library/core": "0.6.0",
     "@saas-ui/use-hotkeys": "1.1.3",
     "@tanstack/react-virtual": "3.0.1",

diff --git a/assets/src/components/cd/clusters/ClusterUpgradeFlyover.tsx b/assets/src/components/cd/clusters/ClusterUpgradeFlyover.tsx
@@ -419,21 +419,7 @@ export function ClusterUpgradeFlyover({
       header={`Upgrade Plan for ${cluster?.name}`}
       open={open}
       onClose={onClose}
-      portal
-      size="large"
       minWidth={920}
-      actions={
-        <Button
-          type="button"
-          secondary
-          onClick={(e) => {
-            e.preventDefault()
-            onClose()
-          }}
-        >
-          Cancel
-        </Button>
-      }
     >
       <FlyoverContent
         open={open}

diff --git a/assets/src/components/notifications/Notification.tsx b/assets/src/components/notifications/Notification.tsx
@@ -1,7 +1,8 @@
-import { useTheme } from 'styled-components'
-import React, { useEffect, useRef, useState } from 'react'
 import { Button } from '@pluralsh/design-system'
 import moment from 'moment/moment'
+import { useEffect, useRef, useState } from 'react'
+import { useTheme } from 'styled-components'
+import { renderTextWithUrls } from 'utils/textWithUrls'
 
 import { AppNotificationFragment } from '../../generated/graphql'
 
@@ -43,7 +44,6 @@ export default function Notification({
         flexDirection: 'column',
         gap: theme.spacing.small,
         padding: `${theme.spacing.large}px ${theme.spacing.medium}px `,
-        width: '100%',
       }}
     >
       <div
@@ -61,6 +61,7 @@ export default function Notification({
       <div
         ref={contentRef}
         css={{
+          wordBreak: 'break-word',
           ...(expand
             ? {}
             : {
@@ -71,7 +72,7 @@ export default function Notification({
               }),
         }}
       >
-        {notification.text}
+        {renderTextWithUrls(notification.text ?? '')}
       </div>
       {clamped && (
         <Button

diff --git a/assets/src/utils/textWithUrls.tsx b/assets/src/utils/textWithUrls.tsx
@@ -0,0 +1,21 @@
+import { InlineLink } from 'components/utils/typography/InlineLink'
+
+export const renderTextWithUrls = (text: string) => {
+  const urlRegex = /(https?:\/\/[^\s]+)/g
+  const parts = text.split(urlRegex)
+
+  return parts.map((part, index) =>
+    urlRegex.test(part) ? (
+      <InlineLink
+        key={index}
+        href={part}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {part}
+      </InlineLink>
+    ) : (
+      part
+    )
+  )
+}
diff --git a/assets/yarn.lock b/assets/yarn.lock
@@ -4274,9 +4274,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pluralsh/design-system@npm:3.67.2":
-  version: 3.67.2
-  resolution: "@pluralsh/design-system@npm:3.67.2"
+"@pluralsh/design-system@npm:3.68.0":
+  version: 3.68.0
+  resolution: "@pluralsh/design-system@npm:3.68.0"
   dependencies:
     "@floating-ui/react-dom-interactions": 0.13.3
     "@loomhq/loom-embed": 1.5.0
@@ -4324,7 +4324,7 @@ __metadata:
     react-dom: ">=18.3.1"
     react-transition-group: ">=4.4.5"
     styled-components: ">=5.3.11"
-  checksum: f84cfc700e3b467ba71fba40a66e1c81e4e326bdabfb19cb523aff5a8979bf2e3c4d73cbc12afea93368ccecf328485957148b4654a5b60bf5c56546687da2f1
+  checksum: 6461e1534d9d9f1ebe9ad9c1e4672a674458b4b4b672af86018974d4bafa1f2f2bda2166392269cd316248cbb10d24499f8172314e3c1612d6f91b18ab6a0b2c
   languageName: node
   linkType: hard
 
@@ -10112,7 +10112,7 @@ __metadata:
     "@nivo/pie": 0.87.0
     "@nivo/radial-bar": 0.87.0
     "@nivo/tooltip": 0.87.0
-    "@pluralsh/design-system": 3.67.2
+    "@pluralsh/design-system": 3.68.0
     "@pluralsh/eslint-config-typescript": 2.5.150
     "@pluralsh/stylelint-config": 2.0.10
     "@react-hooks-library/core": 0.6.0