From eb254444a89c6f71c0766a9ca8dabccd41c589cc Mon Sep 17 00:00:00 2001
From: Remi Blom-Ohlsen <remi.blom-ohlsen@puzzlepart.com>
Date: Fri, 3 Nov 2023 14:44:08 +0100
Subject: [PATCH 1/4] Add missing urls to 'Helpeinnhold' list

---
 Templates/Portfolio/Objects/Lists/Hjelpeinnhold.xml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Templates/Portfolio/Objects/Lists/Hjelpeinnhold.xml b/Templates/Portfolio/Objects/Lists/Hjelpeinnhold.xml
index 52fcdc6d0..06e24f3f5 100644
--- a/Templates/Portfolio/Objects/Lists/Hjelpeinnhold.xml
+++ b/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" />

From 614c4c0def698eee9c450fa4c94035455a0bfe42 Mon Sep 17 00:00:00 2001
From: Remi Blom-Ohlsen <remi.blom-ohlsen@puzzlepart.com>
Date: Fri, 3 Nov 2023 15:08:28 +0100
Subject: [PATCH 2/4] Refactor dialog + styling changes

---
 .../HelpContentDialog.module.scss             | 17 +++++
 .../HelpContent/HelpContentDialog/index.tsx   | 76 +++++++++++++++++++
 .../HelpContentModal.module.scss              | 22 ------
 .../HelpContent/HelpContentModal/index.tsx    | 53 -------------
 .../components/Footer/HelpContent/index.tsx   | 27 +++----
 5 files changed, 107 insertions(+), 88 deletions(-)
 create mode 100644 SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/HelpContentDialog.module.scss
 create mode 100644 SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/index.tsx
 delete mode 100644 SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentModal/HelpContentModal.module.scss
 delete mode 100644 SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentModal/index.tsx

diff --git a/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/HelpContentDialog.module.scss b/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/HelpContentDialog.module.scss
new file mode 100644
index 000000000..7761635da
--- /dev/null
+++ b/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/HelpContentDialog.module.scss
@@ -0,0 +1,17 @@
+.helpContentDialog {
+  & > div[role=dialog] {
+    max-width: 1000px;
+  }
+
+  .body {
+    .content {
+      .contentItem {
+        margin: 10px 0 0 0;
+      }
+
+      img {
+        max-width: 100%;
+      }
+    }
+  }
+}
diff --git a/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/index.tsx b/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/index.tsx
new file mode 100644
index 000000000..078c7f230
--- /dev/null
+++ b/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/index.tsx
@@ -0,0 +1,76 @@
+import { Pivot, PivotItem } from '@fluentui/react'
+import React, { FC, ReactElement, useContext } from 'react'
+import ReactMarkdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import styles from './HelpContentDialog.module.scss'
+import { FooterContext } from 'components/Footer/context'
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogProps,
+  DialogSurface,
+  DialogTrigger,
+  FluentProvider,
+  IdPrefixProvider,
+  useId,
+  webLightTheme
+} from '@fluentui/react-components'
+
+export const HelpContentDialog: FC<Omit<DialogProps, 'children'>> = (props) => {
+  const fluentProviderId = useId('fp-helpDialog')
+  const context = useContext(FooterContext)
+
+  return (
+    <IdPrefixProvider value={fluentProviderId}>
+      <FluentProvider theme={webLightTheme} className={styles.helpContentDialog}>
+        <Dialog open={props.open}>
+          <DialogTrigger disableButtonEnhancement>{props.children as ReactElement}</DialogTrigger>
+          <DialogSurface style={{ maxWidth: '800px !important' }}>
+            <DialogBody className={styles.body}>
+              <DialogContent className={styles.content}>
+                <Pivot>
+                  {context.props.helpContent.map((content, index) => (
+                    <PivotItem
+                      key={index}
+                      headerText={content.title}
+                      itemIcon={content.iconName}
+                      style={{
+                        overflow: 'auto',
+                        height: 'calc(100vh - 250px)',
+                        width: 'calc(100vw - 250px)'
+                      }}
+                    >
+                      <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>
+                    </PivotItem>
+                  ))}
+                </Pivot>
+              </DialogContent>
+            </DialogBody>
+          </DialogSurface>
+        </Dialog>
+      </FluentProvider>
+    </IdPrefixProvider>
+  )
+}
diff --git a/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentModal/HelpContentModal.module.scss b/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentModal/HelpContentModal.module.scss
deleted file mode 100644
index c54c1ec2e..000000000
--- a/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentModal/HelpContentModal.module.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.root {
-  max-width: 1000px;
-  overflow: hidden;
-
-  .scrollableContent {
-    overflow: hidden;
-  }
-
-  .body {
-    font-size: initial;
-    padding: 20px;
-    overflow: hidden;
-
-    .contentItem {
-      margin: 10px 0 0 0;
-    }
-
-    img {
-      max-width: 75%;
-    }
-  }
-}
diff --git a/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentModal/index.tsx b/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentModal/index.tsx
deleted file mode 100644
index b81c894ce..000000000
--- a/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentModal/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Modal, Pivot, PivotItem, ActionButton, IModalProps } from '@fluentui/react'
-import React, { FC, useContext } from 'react'
-import ReactMarkdown from 'react-markdown'
-import rehypeRaw from 'rehype-raw'
-import styles from './HelpContentModal.module.scss'
-import { FooterContext } from 'components/Footer/context'
-
-export const HelpContentModal: FC<IModalProps> = (props) => {
-  const context = useContext(FooterContext)
-  return (
-    <Modal
-      isOpen={props.isOpen}
-      isBlocking={false}
-      onDismiss={props.onDismiss}
-      styles={{ root: { overflow: 'hidden' } }}
-      containerClassName={styles.root}
-      scrollableContentClassName={styles.scrollableContent}
-    >
-      <div className={styles.body}>
-        <Pivot>
-          {context.props.helpContent.map((content, index) => (
-            <PivotItem
-              key={index}
-              headerText={content.title}
-              itemIcon={content.iconName}
-              style={{ overflow: 'auto', height: 'calc(100vh - 44px)' }}
-            >
-              <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 && (
-                  <ActionButton
-                    text={content.resourceLink.Description}
-                    iconProps={{ iconName: content.resourceLinkIcon }}
-                    href={content.resourceLink.Url}
-                  />
-                )}
-              </div>
-            </PivotItem>
-          ))}
-        </Pivot>
-      </div>
-    </Modal>
-  )
-}
diff --git a/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/index.tsx b/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/index.tsx
index 7537ce509..b84717044 100644
--- a/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/index.tsx
+++ b/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)} />
     </>
   )
 }

From bb4edba31d806ab1a07d738908710f953067399b Mon Sep 17 00:00:00 2001
From: Remi Blom-Ohlsen <remi.blom-ohlsen@puzzlepart.com>
Date: Fri, 3 Nov 2023 15:54:21 +0100
Subject: [PATCH 3/4] Finish helpContent

---
 .../HelpContent/HelpContentDialog/Content.tsx | 26 +++++++++++
 .../HelpContentDialog.module.scss             | 18 ++++----
 .../HelpContent/HelpContentDialog/index.tsx   | 44 ++++---------------
 3 files changed, 43 insertions(+), 45 deletions(-)
 create mode 100644 SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/Content.tsx

diff --git a/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/Content.tsx b/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/Content.tsx
new file mode 100644
index 000000000..47d7faf3c
--- /dev/null
+++ b/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>
+))
diff --git a/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/HelpContentDialog.module.scss b/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/HelpContentDialog.module.scss
index 7761635da..db3b8b63c 100644
--- a/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/HelpContentDialog.module.scss
+++ b/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/HelpContentDialog.module.scss
@@ -1,17 +1,17 @@
 .helpContentDialog {
-  & > div[role=dialog] {
+  & > div[role="dialog"] {
     max-width: 1000px;
+    width: calc(100vw - 180px);
+    height: calc(100vh - 180px);
   }
 
-  .body {
-    .content {
-      .contentItem {
-        margin: 10px 0 0 0;
-      }
+  .content {
+    .contentItem {
+      margin: 25px;
+    }
 
-      img {
-        max-width: 100%;
-      }
+    img {
+      max-width: 100%;
     }
   }
 }
diff --git a/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/index.tsx b/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/index.tsx
index 078c7f230..17138dc56 100644
--- a/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/index.tsx
+++ b/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/index.tsx
@@ -1,11 +1,8 @@
 import { Pivot, PivotItem } from '@fluentui/react'
 import React, { FC, ReactElement, useContext } from 'react'
-import ReactMarkdown from 'react-markdown'
-import rehypeRaw from 'rehype-raw'
 import styles from './HelpContentDialog.module.scss'
 import { FooterContext } from 'components/Footer/context'
 import {
-  Button,
   Dialog,
   DialogBody,
   DialogContent,
@@ -17,6 +14,7 @@ import {
   useId,
   webLightTheme
 } from '@fluentui/react-components'
+import { Content } from './Content'
 
 export const HelpContentDialog: FC<Omit<DialogProps, 'children'>> = (props) => {
   const fluentProviderId = useId('fp-helpDialog')
@@ -27,42 +25,16 @@ export const HelpContentDialog: FC<Omit<DialogProps, 'children'>> = (props) => {
       <FluentProvider theme={webLightTheme} className={styles.helpContentDialog}>
         <Dialog open={props.open}>
           <DialogTrigger disableButtonEnhancement>{props.children as ReactElement}</DialogTrigger>
-          <DialogSurface style={{ maxWidth: '800px !important' }}>
-            <DialogBody className={styles.body}>
+          <DialogSurface>
+            <DialogBody>
               <DialogContent className={styles.content}>
                 <Pivot>
                   {context.props.helpContent.map((content, index) => (
-                    <PivotItem
-                      key={index}
-                      headerText={content.title}
-                      itemIcon={content.iconName}
-                      style={{
-                        overflow: 'auto',
-                        height: 'calc(100vh - 250px)',
-                        width: 'calc(100vw - 250px)'
-                      }}
-                    >
-                      <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>
+                    <PivotItem key={index} headerText={content.title} style={{
+                      overflow: 'auto',
+                      height: 'calc(100vh - 285px)'
+                    }}>
+                      <Content content={content} />
                     </PivotItem>
                   ))}
                 </Pivot>

From 9daaf518d82ef0b36c2d00a308785570dd8297e6 Mon Sep 17 00:00:00 2001
From: Remi Blom-Ohlsen <remi.blom-ohlsen@puzzlepart.com>
Date: Fri, 3 Nov 2023 16:07:05 +0100
Subject: [PATCH 4/4] Use TabList instead of Pivot

---
 .../HelpContentDialog.module.scss             |  3 ++
 .../HelpContent/HelpContentDialog/index.tsx   | 29 +++++++++++++------
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/HelpContentDialog.module.scss b/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/HelpContentDialog.module.scss
index db3b8b63c..d44675481 100644
--- a/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/HelpContentDialog.module.scss
+++ b/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/HelpContentDialog.module.scss
@@ -6,6 +6,9 @@
   }
 
   .content {
+    overflow: auto;
+    height: calc(100vh - 236px);
+
     .contentItem {
       margin: 25px;
     }
diff --git a/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/index.tsx b/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/index.tsx
index 17138dc56..af8df15f7 100644
--- a/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/index.tsx
+++ b/SharePointFramework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/index.tsx
@@ -1,4 +1,3 @@
-import { Pivot, PivotItem } from '@fluentui/react'
 import React, { FC, ReactElement, useContext } from 'react'
 import styles from './HelpContentDialog.module.scss'
 import { FooterContext } from 'components/Footer/context'
@@ -11,6 +10,11 @@ import {
   DialogTrigger,
   FluentProvider,
   IdPrefixProvider,
+  SelectTabData,
+  SelectTabEvent,
+  Tab,
+  TabList,
+  TabValue,
   useId,
   webLightTheme
 } from '@fluentui/react-components'
@@ -19,6 +23,13 @@ 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}>
@@ -28,16 +39,16 @@ export const HelpContentDialog: FC<Omit<DialogProps, 'children'>> = (props) => {
           <DialogSurface>
             <DialogBody>
               <DialogContent className={styles.content}>
-                <Pivot>
+                <TabList selectedValue={selectedValue} onTabSelect={onTabSelect}>
                   {context.props.helpContent.map((content, index) => (
-                    <PivotItem key={index} headerText={content.title} style={{
-                      overflow: 'auto',
-                      height: 'calc(100vh - 285px)'
-                    }}>
-                      <Content content={content} />
-                    </PivotItem>
+                    <Tab key={index} value={content.title}>
+                      {content.title}
+                    </Tab>
                   ))}
-                </Pivot>
+                </TabList>
+                {context.props.helpContent.map(
+                  (content) => selectedValue === content.title && <Content content={content} />
+                )}
               </DialogContent>
             </DialogBody>
           </DialogSurface>