feat(web): Powerbi richtext embed slice (#8703)

* Add powerbi library and component

* Add powerbi slice code

* Allow powerbi slice on project pages

* Add powerbi slice to project subpages

* Add support for forms on project pages while we're at it

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

apps/web/components/Organization/Slice/PowerBiSlice/PowerBiSlice.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css'
+
+export const container = style({
+  height: '500px',
+})

apps/web/components/Organization/Slice/PowerBiSlice/PowerBiSlice.tsx

@@ -0,0 +1,27 @@
+import { PowerBIEmbed } from 'powerbi-client-react'
+import { Embed } from 'powerbi-client'
+import { PowerBiSlice as PowerBiSliceSchema } from '@island.is/web/graphql/schema'
+import * as styles from './PowerBiSlice.css'
+
+interface PowerBiSliceProps {
+  slice: PowerBiSliceSchema
+}
+
+export const PowerBiSlice = ({ slice }: PowerBiSliceProps) => {
+  const getEmbeddedComponent = (embed: Embed) => {
+    if (slice?.powerBiEmbedProps?.height) {
+      embed.element.style.height = slice.powerBiEmbedProps.height
+    }
+  }
+
+  const embedProps = slice?.powerBiEmbedProps ?? {}
+  return (
+    <PowerBIEmbed
+      embedConfig={{ type: 'report', ...embedProps }}
+      cssClassName={styles.container}
+      getEmbeddedComponent={getEmbeddedComponent}
+    />
+  )
+}
+
+export default PowerBiSlice

apps/web/components/Organization/Slice/PowerBiSlice/index.ts

@@ -0,0 +1,4 @@
+import dynamic from 'next/dynamic'
+export const PowerBiSlice = dynamic(() => import('./PowerBiSlice'), {
+  ssr: false,
+})

apps/web/components/Organization/index.ts

@@ -23,3 +23,4 @@ export * from './Slice/EventSlice/EventSlice'
 export * from './SearchBox/SearchBox'
 export * from './Slice/MailingListSignupSlice/MailingListSignupSlice'
 export * from './Slice/LifeEventPageListSlice/LifeEventPageListSlice'
+export * from './Slice/PowerBiSlice'

apps/web/screens/Organization/SubPage.tsx

@@ -14,6 +14,7 @@ import {
 import { withMainLayout } from '@island.is/web/layouts/main'
 import {
   ContentLanguage,
+  PowerBiSlice as PowerBiSliceSchema,
   Query,
   QueryGetNamespaceArgs,
   QueryGetOrganizationPageArgs,
@@ -35,6 +36,7 @@ import {
   SliceDropdown,
   Form,
   OneColumnTextSlice,
+  PowerBiSlice,
 } from '@island.is/web/components'
 import { CustomNextError } from '@island.is/web/units/errors'
 import useContentfulId from '@island.is/web/hooks/useContentfulId'
@@ -178,6 +180,9 @@ const SubPage: Screen<SubPageProps> = ({
                         OneColumnText: (slice) => (
                           <OneColumnTextSlice slice={slice} />
                         ),
+                        PowerBiSlice: (slice: PowerBiSliceSchema) => (
+                          <PowerBiSlice slice={slice} />
+                        ),
                       },
                     })}
                   </GridColumn>

apps/web/screens/Project/Project.tsx

@@ -19,6 +19,7 @@ import {
   Stepper,
   stepperUtils,
   Form,
+  PowerBiSlice,
 } from '@island.is/web/components'
 import {
   Box,
@@ -74,8 +75,9 @@ const ProjectPage: Screen<PageProps> = ({
   >(undefined)
 
   let content: SliceType[] = []
-  if (!!subpage && renderSlicesAsTabs)
+  if (!!subpage && renderSlicesAsTabs) {
     content = selectedSliceTab?.content as SliceType[]
+  }
   if (!subpage) content = projectPage?.content as SliceType[]
 
   useEffect(() => {
@@ -136,6 +138,7 @@ const ProjectPage: Screen<PageProps> = ({
               richText(subpage.content as SliceType[], {
                 renderComponent: {
                   Form: (slice) => <Form form={slice} namespace={namespace} />,
+                  PowerBiSlice: (slice) => <PowerBiSlice slice={slice} />,
                 },
               })}
           </Box>
@@ -168,7 +171,13 @@ const ProjectPage: Screen<PageProps> = ({
             {selectedSliceTab.title}
           </Text>
         )}
-        {content && richText(content)}
+        {content &&
+          richText(content, {
+            renderComponent: {
+              Form: (slice) => <Form form={slice} namespace={namespace} />,
+              PowerBiSlice: (slice) => <PowerBiSlice slice={slice} />,
+            },
+          })}
         {!subpage && projectPage.stepper && (
           <Box marginTop={6}>
             <Stepper

apps/web/screens/queries/fragments.ts

@@ -592,6 +592,13 @@ export const slices = gql`
     }
   }
 
+  fragment PowerBiSliceFields on PowerBiSlice {
+    __typename
+    id
+    title
+    powerBiEmbedProps
+  }
+
   fragment BaseSlices on Slice {
     ...TimelineFields
     ...MailingListSignupFields
@@ -626,6 +633,7 @@ export const slices = gql`
     ...GraphCardFields
     ...LifeEventPageListSliceFields
     ...SidebarCardFields
+    ...PowerBiSliceFields
   }
 
   fragment AllSlices on Slice {

libs/cms/src/lib/environments/environment.ts

@@ -60,6 +60,7 @@ export default {
     'form',
     'formField',
     'graphCard',
+    'powerBiSlice',
   ],
   contentful: {
     space: process.env.CONTENTFUL_SPACE || '8k0h54kbe6bj',

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

@@ -2256,6 +2256,7 @@ export interface IOrganizationSubpageFields {
         | IMultipleStatistics
         | IOneColumnText
         | IOverviewLinks
+        | IPowerBiSlice
         | ISliceConnectedComponent
         | ITabSection
         | ITeamList
@@ -2385,6 +2386,33 @@ export interface IPageHeader extends Entry<IPageHeaderFields> {
   }
 }
 
+export interface IPowerBiSliceFields {
+  /** Title */
+  title?: string | undefined
+
+  /** Config */
+  config: Record<string, any>
+}
+
+/** A Slice that embeds a Power BI report */
+
+export interface IPowerBiSlice extends Entry<IPowerBiSliceFields> {
+  sys: {
+    id: string
+    type: string
+    createdAt: string
+    updatedAt: string
+    locale: string
+    contentType: {
+      sys: {
+        id: 'powerBiSlice'
+        linkType: 'ContentType'
+        type: 'Link'
+      }
+    }
+  }
+}
+
 export interface IProcessEntryFields {
   /** Type */
   type:
@@ -3819,6 +3847,7 @@ export type CONTENT_TYPE =
   | 'organizationTag'
   | 'overviewLinks'
   | 'pageHeader'
+  | 'powerBiSlice'
   | 'processEntry'
   | 'projectPage'
   | 'projectSubpage'

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

@@ -0,0 +1,28 @@
+import { Field, ID, ObjectType } from '@nestjs/graphql'
+import graphqlTypeJson from 'graphql-type-json'
+import { SystemMetadata } from '@island.is/shared/types'
+import { IPowerBiSlice } from '../generated/contentfulTypes'
+
+@ObjectType()
+export class PowerBiSlice {
+  @Field(() => ID)
+  id!: string
+
+  @Field()
+  title?: string
+
+  @Field(() => graphqlTypeJson, { nullable: true })
+  powerBiEmbedProps?: Record<string, unknown>
+}
+
+export const mapPowerBiSlice = ({
+  fields,
+  sys,
+}: IPowerBiSlice): SystemMetadata<PowerBiSlice> => {
+  return {
+    typename: 'PowerBiSlice',
+    id: sys.id,
+    title: fields.title ?? '',
+    powerBiEmbedProps: fields.config ?? null,
+  }
+}

libs/cms/src/lib/unions/slice.union.ts

@@ -34,6 +34,7 @@ import {
   IGraphCard,
   ILifeEventPageListSlice,
   ISidebarCard,
+  IPowerBiSlice,
 } from '../generated/contentfulTypes'
 import { Image, mapImage } from '../models/image.model'
 import { Asset, mapAsset } from '../models/asset.model'
@@ -96,6 +97,7 @@ import {
   mapLifeEventPageListSlice,
 } from '../models/lifeEventPageListSlice.model'
 import { mapSidebarCard, SidebarCard } from '../models/sidebarCard.model'
+import { PowerBiSlice, mapPowerBiSlice } from '../models/powerBiSlice.model'
 
 type SliceTypes =
   | ITimeline
@@ -129,6 +131,7 @@ type SliceTypes =
   | IGraphCard
   | ILifeEventPageListSlice
   | ISidebarCard
+  | IPowerBiSlice
 
 export const SliceUnion = createUnionType({
   name: 'Slice',
@@ -167,6 +170,7 @@ export const SliceUnion = createUnionType({
     GraphCard,
     LifeEventPageListSlice,
     SidebarCard,
+    PowerBiSlice,
   ],
   resolveType: (document) => document.typename, // typename is appended to request on indexing
 })
@@ -236,6 +240,8 @@ export const mapSliceUnion = (slice: SliceTypes): typeof SliceUnion => {
       return mapLifeEventPageListSlice(slice as ILifeEventPageListSlice)
     case 'sidebarCard':
       return mapSidebarCard(slice as ISidebarCard)
+    case 'powerBiSlice':
+      return mapPowerBiSlice(slice as IPowerBiSlice)
     default:
       throw new ApolloError(`Can not convert to slice: ${contentType}`)
   }

package.json

@@ -217,6 +217,8 @@
     "pdfkit": "0.11.0",
     "pg": "8.1.0",
     "pg-hstore": "2.3.3",
+    "powerbi-client": "2.21.1",
+    "powerbi-client-react": "1.3.5",
     "prom-client": "12.0.0",
     "pubsub-js": "1.8.0",
     "react": "17.0.2",