Visuelt løft på Hjelpeinnhold

SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/Content.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import styles from './HelpContentDialog.module.scss'
+import { Button } from '@fluentui/react-components'
+import { HelpContentModel } from 'extensions/footer/types'
+
+export const Content = React.memo(({ content }: { content: HelpContentModel }) => (
+  <div className={styles.contentItem} title={content.title}>
+    <p dangerouslySetInnerHTML={{ __html: content.textContent }}></p>
+    {content.markdownContent && (
+      <ReactMarkdown linkTarget='_blank' rehypePlugins={[rehypeRaw]} transformImageUri={null}>
+        {content.markdownContent}
+      </ReactMarkdown>
+    )}
+    {content.resourceLink && (
+      <Button
+        size='medium'
+        appearance='primary'
+        onClick={() => window.open(content.resourceLink.Url, '_blank')}
+      >
+        <span>{content.resourceLink.Description}</span>
+      </Button>
+    )}
+  </div>
+))

SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/HelpContentDialog.module.scss

@@ -0,0 +1,20 @@
+.helpContentDialog {
+  & > div[role="dialog"] {
+    max-width: 1000px;
+    width: calc(100vw - 180px);
+    height: calc(100vh - 180px);
+  }
+
+  .content {
+    overflow: auto;
+    height: calc(100vh - 236px);
+
+    .contentItem {
+      margin: 25px;
+    }
+
+    img {
+      max-width: 100%;
+    }
+  }
+}

SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/index.tsx

@@ -0,0 +1,59 @@
+import React, { FC, ReactElement, useContext } from 'react'
+import styles from './HelpContentDialog.module.scss'
+import { FooterContext } from 'components/Footer/context'
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogProps,
+  DialogSurface,
+  DialogTrigger,
+  FluentProvider,
+  IdPrefixProvider,
+  SelectTabData,
+  SelectTabEvent,
+  Tab,
+  TabList,
+  TabValue,
+  useId,
+  webLightTheme
+} from '@fluentui/react-components'
+import { Content } from './Content'
+
+export const HelpContentDialog: FC<Omit<DialogProps, 'children'>> = (props) => {
+  const fluentProviderId = useId('fp-helpDialog')
+  const context = useContext(FooterContext)
+  const [selectedValue, setSelectedValue] = React.useState<TabValue>(
+    context.props.helpContent[0].title
+  )
+
+  const onTabSelect = (_: SelectTabEvent, data: SelectTabData) => {
+    setSelectedValue(data.value)
+  }
+
+  return (
+    <IdPrefixProvider value={fluentProviderId}>
+      <FluentProvider theme={webLightTheme} className={styles.helpContentDialog}>
+        <Dialog open={props.open}>
+          <DialogTrigger disableButtonEnhancement>{props.children as ReactElement}</DialogTrigger>
+          <DialogSurface>
+            <DialogBody>
+              <DialogContent className={styles.content}>
+                <TabList selectedValue={selectedValue} onTabSelect={onTabSelect}>
+                  {context.props.helpContent.map((content, index) => (
+                    <Tab key={index} value={content.title}>
+                      {content.title}
+                    </Tab>
+                  ))}
+                </TabList>
+                {context.props.helpContent.map(
+                  (content) => selectedValue === content.title && <Content content={content} />
+                )}
+              </DialogContent>
+            </DialogBody>
+          </DialogSurface>
+        </Dialog>
+      </FluentProvider>
+    </IdPrefixProvider>
+  )
+}

SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/index.tsx

@@ -1,13 +1,12 @@
 import strings from 'PortfolioExtensionsStrings'
-import React, { FC, useContext, useState } from 'react'
-import { HelpContentModal } from './HelpContentModal'
+import React, { FC, useContext } from 'react'
+import { HelpContentDialog } from './HelpContentDialog'
 import { FooterContext } from '../context'
 import { Button, Tooltip } from '@fluentui/react-components'
 import { getFluentIcon } from 'pp365-shared-library'
 
 export const HelpContent: FC = () => {
   const context = useContext(FooterContext)
-  const [showModal, setShowModal] = useState(false)
   const isUnavailable = context.props.helpContent.length === 0
 
   return (
@@ -21,17 +20,19 @@ export const HelpContent: FC = () => {
             : strings.HelpContentAvailableDescription
         }
       >
-        <Button
-          size='small'
-          appearance='subtle'
-          onClick={() => setShowModal(true)}
-          disabled={isUnavailable}
-          icon={getFluentIcon('QuestionCircle')}
-        >
-          {isUnavailable ? strings.HelpContentUnavailableLabel : strings.HelpContentAvailableLabel}
-        </Button>
+        <HelpContentDialog>
+          <Button
+            size='small'
+            appearance='subtle'
+            disabled={isUnavailable}
+            icon={getFluentIcon('QuestionCircle')}
+          >
+            {isUnavailable
+              ? strings.HelpContentUnavailableLabel
+              : strings.HelpContentAvailableLabel}
+          </Button>
+        </HelpContentDialog>
       </Tooltip>
-      <HelpContentModal isOpen={showModal} onDismiss={() => setShowModal(false)} />
     </>
   )
 }

Templates/Portfolio/Objects/Lists/Hjelpeinnhold.xml

@@ -25,7 +25,7 @@
             <CustomFormatter />
         </View>
     </pnp:Views>
-    <pnp:DataRows UpdateBehavior="Skip" KeyColumn="Title">
+    <pnp:DataRows UpdateBehavior="Overwrite" KeyColumn="Title">
         <pnp:DataRow>
             <pnp:DataValue FieldName="GtSortOrder">10</pnp:DataValue>
             <pnp:DataValue FieldName="Title">Porteføljenivå Brukermanual</pnp:DataValue>
@@ -105,7 +105,7 @@
             <pnp:DataValue FieldName="GtURL">SitePages/Prosjekttidslinje.aspx</pnp:DataValue>
             <pnp:DataValue FieldName="GtTextContent" />
             <pnp:DataValue FieldName="GtResourceLink" />
-            <pnp:DataValue FieldName="GtExternalURL"></pnp:DataValue>
+            <pnp:DataValue FieldName="GtExternalURL">https://raw.githubusercontent.com/Puzzlepart/prosjektportalen-manual/master/Brukermanual/3%20Portefolje/3.85%20Prosjekttidslinje.md</pnp:DataValue>
         </pnp:DataRow>
         <pnp:DataRow>
             <pnp:DataValue FieldName="GtSortOrder">100</pnp:DataValue>
@@ -267,7 +267,7 @@
             <pnp:DataValue FieldName="GtURL">SitePages/Prosjekttidslinje.aspx</pnp:DataValue>
             <pnp:DataValue FieldName="GtTextContent" />
             <pnp:DataValue FieldName="GtResourceLink" />
-            <pnp:DataValue FieldName="GtExternalURL"></pnp:DataValue>
+            <pnp:DataValue FieldName="GtExternalURL">https://raw.githubusercontent.com/Puzzlepart/prosjektportalen-manual/master/Brukermanual/4%20Prosjekt/Prosjekttidslinje.md</pnp:DataValue>
         </pnp:DataRow>
     </pnp:DataRows>
     <xi:include xmlns:xi="http://www.w3.org/2001/XInclude" href="Objects/Lists/Security/DefaultSecurity.xml" />