Feat: adapt governance to new texts (#3831)

* feat: parse links in event info * feat: remove event info from voting dashboard * feat: rename function * feat: update links from plain text to work with platform * chore: whitelist govern.iota.org * chore: fix typo in comment Co-authored-by: Matthew Maxwell <[email protected]>
iotaledger · Jul 11, 2022 · 7ba4fe7 · 7ba4fe7
1 parent 7e9a10d
commit 7ba4fe7
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 7 deletions.
diff --git a/packages/desktop/electron/main.js b/packages/desktop/electron/main.js
@@ -191,6 +191,7 @@ function isUrlAllowed(targetUrl) {
         'wiki.iota.org',
         'explorer.iota.org',
         'iotatreasury.org',
+        'govern.iota.org',
 
         // Assembly / Shimmer
         'assembly.sc',

diff --git a/packages/shared/lib/helpers.ts b/packages/shared/lib/helpers.ts
@@ -269,3 +269,18 @@ export const isBright = (color: string): boolean => {
         }
     }
 }
+
+/**
+ * Parse plain text and add <a> html tags to every link found
+ * @param plainText The text to be parsed
+ * @param classes the classes to add to the <a> tag
+ * @returns The input plain text with <a> tags added
+ */
+export function addLinkHtmlTagsToPlainText(plainText: string, classes: string = ''): string {
+    if (!plainText) {
+        return
+    } else {
+        const regex = /((http|https)?:\/\/[^\s]+)/g
+        return plainText.replace(regex, (url) => `<a href=${url} class="link-from-plaintext ${classes}">${url}</a>`)
+    }
+}
diff --git a/packages/shared/routes/dashboard/governance/views/GovernanceEventInfo.svelte b/packages/shared/routes/dashboard/governance/views/GovernanceEventInfo.svelte
@@ -16,14 +16,17 @@
     import { formatUnitBestMatch } from '@lib/units'
     import { selectedAccountStore } from '@lib/wallet'
     import { DashboardPane, GovernanceInfoTooltip, Icon, Spinner, Text, Tooltip } from 'shared/components'
+    import { addLinkHtmlTagsToPlainText } from 'shared/lib/helpers'
     import { showAppNotification } from 'shared/lib/notifications'
     import {
         isChangingParticipation,
         participationAction,
         pendingParticipations,
     } from 'shared/lib/participation/stores'
     import { ParticipationAction } from 'shared/lib/participation/types'
+    import { Platform } from 'shared/lib/platform'
     import { isSyncing } from 'shared/lib/wallet'
+    import { onMount } from 'svelte'
 
     export let event: ParticipationEvent
     export let nextVote: VotingEventAnswer = null
@@ -41,6 +44,15 @@
     $: disableVoting =
         $isChangingParticipation || $pendingParticipations?.length > 0 || !!$participationAction || $isSyncing
 
+    $: eventAdditionalInfo = addLinkHtmlTagsToPlainText(
+        event?.information?.additionalInfo,
+        'cursor-pointer text-blue-500'
+    )
+    $: eventQuestionsInfo = addLinkHtmlTagsToPlainText(
+        event?.information?.payload?.questions[0]?.text,
+        'cursor-pointer text-blue-500'
+    )
+
     let disableVotingMessages: {
         show?: boolean
         busy?: boolean
@@ -175,6 +187,28 @@
             disableVotingMessages = disableVotingMessages
         }
     }
+
+    // We need to add event listeners to all links from plain text to make them work
+    onMount(() => {
+        const linksFromPlainText = document.querySelectorAll('.link-from-plaintext')
+        const onLinkClick = (e: MouseEvent) => {
+            e.preventDefault()
+            const href = (e.target as HTMLElement).getAttribute('href')
+            if (href) {
+                Platform.openUrl(href)
+            }
+        }
+        linksFromPlainText?.forEach((link) => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault()
+                const href = link.getAttribute('href')
+                if (href) {
+                    window.open(href, '_blank')
+                }
+            })
+        })
+        return () => linksFromPlainText?.forEach((link) => link.removeEventListener('click', onLinkClick))
+    })
 </script>
 
 <DashboardPane classes="w-full h-full p-6 col-span-2 row-span-2 flex flex-col">
@@ -206,14 +240,14 @@
     </div>
     <div class="flex flex-col space-y-4 mb-6">
         <Text type="h2">{event?.information?.name}</Text>
-        {#if event?.information?.payload?.questions[0]?.text}
+        {#if eventAdditionalInfo}
             <Text type="p" overrideColor classes="text-gray-700 dark:text-gray-500">
-                {event?.information?.additionalInfo}
+                {@html eventAdditionalInfo}
             </Text>
         {/if}
-        {#if event?.information?.additionalInfo}
+        {#if eventQuestionsInfo}
             <Text type="h3" overrideColor classes="text-gray-900 dark:text-white">
-                {event?.information?.payload?.questions[0]?.text}
+                {@html eventQuestionsInfo}
             </Text>
         {/if}
     </div>

diff --git a/packages/shared/routes/dashboard/governance/views/GovernanceEvents.svelte b/packages/shared/routes/dashboard/governance/views/GovernanceEvents.svelte
@@ -34,7 +34,7 @@
 </script>
 
 {#if event}
-    <div class="p-6 h-full">
+    <div class="p-6 h-full flex flex-col">
         <div bind:clientHeight={illustrationHeight} class="relative illustration-wrapper max-w-full h-full max-h-3/5">
             <Illustration
                 height={illustrationHeight}
@@ -55,13 +55,14 @@
         <div class="flex flex-col items-center flex-1 justify-between mt-8 mx-14">
             <div class="text-center">
                 <Text type="h2" classes="mb-2">{event?.information?.name}</Text>
-                <Text
+                <!-- Note: commented out for Shimmer EF Proposal -->
+                <!-- <Text
                     type="p"
                     classes="text-gray-700 dark:text-gray-500 mb-6 text-14 min-w-0 overflow-auto"
                     overrideColor
                 >
                     {event?.information?.additionalInfo}
-                </Text>
+                </Text> -->
             </div>
             <div class="relative min-w-40">
                 <Button onClick={handleViewProposalClick} disabled={!event} classes="w-full">