feat(web): add support links to grants (#17189)

* feat: add support links

* chore: conciser

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/screens/Grants/Grant/GrantSidebar.tsx

@@ -1,14 +1,21 @@
 import { useMemo } from 'react'
 
-import { Box, Button, LinkV2, Stack, Text } from '@island.is/island-ui/core'
+import {
+  Box,
+  BoxProps,
+  Button,
+  LinkV2,
+  Stack,
+  Text,
+} from '@island.is/island-ui/core'
+import { useLocale } from '@island.is/localization'
 import { Locale } from '@island.is/shared/types'
 import { isDefined } from '@island.is/shared/utils'
 import { InstitutionPanel } from '@island.is/web/components'
 import { Grant } from '@island.is/web/graphql/schema'
 import { LinkType, useLinkResolver } from '@island.is/web/hooks'
 
 import { m } from '../messages'
-import { useLocale } from '@island.is/localization'
 import { generateStatusTag } from '../utils'
 
 interface Props {
@@ -30,6 +37,20 @@ const generateLine = (heading: string, content?: React.ReactNode) => {
   )
 }
 
+const generateSidebarPanel = (
+  data: Array<React.ReactElement>,
+  background: BoxProps['background'],
+) => {
+  if (!data) {
+    return undefined
+  }
+  return (
+    <Box background={background} padding={3} borderRadius="standard">
+      <Stack space={2}>{data}</Stack>
+    </Box>
+  )
+}
+
 export const GrantSidebar = ({ grant, locale }: Props) => {
   const { linkResolver } = useLinkResolver()
   const { formatMessage } = useLocale()
@@ -100,6 +121,7 @@ export const GrantSidebar = ({ grant, locale }: Props) => {
           return (
             <LinkV2
               key={`${f.url}-${index}`}
+              newTab
               href={f.url}
               underlineVisibility="hover"
             >
@@ -113,6 +135,35 @@ export const GrantSidebar = ({ grant, locale }: Props) => {
     [grant.files],
   )
 
+  const supportLinksPanelData = useMemo(
+    () =>
+      grant.supportLinks
+        ?.map((link) => {
+          if (!link.url || !link.text || !link.id) {
+            return null
+          }
+          return (
+            <LinkV2
+              newTab
+              key={link.id}
+              href={link.url}
+              underlineVisibility="hover"
+            >
+              <Button
+                size="medium"
+                icon="link"
+                iconType="outline"
+                variant="text"
+              >
+                {link.text}
+              </Button>
+            </LinkV2>
+          )
+        })
+        .filter(isDefined) ?? [],
+    [grant.supportLinks],
+  )
+
   return (
     <Stack space={3}>
       <InstitutionPanel
@@ -124,16 +175,9 @@ export const GrantSidebar = ({ grant, locale }: Props) => {
         img={grant.fund?.parentOrganization.logo?.url}
         locale={locale}
       />
-      {detailPanelData.length ? (
-        <Box background="blue100" padding={3} borderRadius="standard">
-          <Stack space={2}>{detailPanelData}</Stack>
-        </Box>
-      ) : undefined}
-      {filesPanelData.length ? (
-        <Box background="red100" padding={3} borderRadius="standard">
-          <Stack space={2}>{filesPanelData}</Stack>
-        </Box>
-      ) : undefined}
+      {generateSidebarPanel(detailPanelData, 'blue100')}
+      {generateSidebarPanel(filesPanelData, 'red100')}
+      {generateSidebarPanel(supportLinksPanelData, 'purple100')}
     </Stack>
   )
 }

apps/web/screens/queries/Grants.ts

@@ -77,6 +77,12 @@ export const GET_GRANT_QUERY = gql`
         id
         title
       }
+      supportLinks {
+        id
+        text
+        url
+        date
+      }
       files {
           ...AssetFields
       }

libs/cms/src/lib/generated/contentfulTypes.d.ts

@@ -1853,6 +1853,9 @@ export interface IGrantFields {
   /** Files */
   grantFiles?: Asset[] | undefined
 
+  /** Support links */
+  grantSupportLinks?: ILink[] | undefined
+
   /** Category tags */
   grantCategoryTags?: IGenericTag[] | undefined
 

libs/cms/src/lib/models/grant.model.ts

@@ -7,6 +7,7 @@ import { mapDocument, SliceUnion } from '../unions/slice.union'
 import { Asset, mapAsset } from './asset.model'
 import { ReferenceLink, mapReferenceLink } from './referenceLink.model'
 import { Fund, mapFund } from './fund.model'
+import { Link, mapLink } from './link.model'
 
 export enum GrantStatus {
   CLOSED,
@@ -66,6 +67,9 @@ export class Grant {
   @CacheField(() => [Asset], { nullable: true })
   files?: Array<Asset>
 
+  @CacheField(() => [Link], { nullable: true })
+  supportLinks?: Array<Link>
+
   @CacheField(() => [GenericTag], { nullable: true })
   categoryTags?: Array<GenericTag>
 
@@ -85,7 +89,6 @@ export const mapGrant = ({ fields, sys }: IGrant): Grant => ({
   applicationUrl: fields.granApplicationUrl?.fields
     ? mapReferenceLink(fields.granApplicationUrl)
     : undefined,
-
   specialEmphasis: fields.grantSpecialEmphasis
     ? mapDocument(fields.grantSpecialEmphasis, sys.id + ':special-emphasis')
     : [],
@@ -117,6 +120,8 @@ export const mapGrant = ({ fields, sys }: IGrant): Grant => ({
       : undefined,
   fund: fields.grantFund ? mapFund(fields.grantFund) : undefined,
   files: (fields.grantFiles ?? []).map((file) => mapAsset(file)) ?? [],
+  supportLinks:
+    (fields.grantSupportLinks ?? []).map((link) => mapLink(link)) ?? [],
   categoryTags: fields.grantCategoryTags
     ? fields.grantCategoryTags.map((tag) => mapGenericTag(tag))
     : undefined,