Add same configuration functionality to OpportunityMatrix as RiskMatr…

…ix [packages-only]

CHANGELOG.md

@@ -1,10 +1,22 @@
 # Endringslogg
 
-Sjekk ut [release notes](./releasenotes/1.9.0.md) for høydepunkter og mer detaljert endringslogg for siste hovedversjon.
+Sjekk ut [release notes](./releasenotes/1.10.0.md) for høydepunkter og mer detaljert endringslogg for siste hovedversjon.
 
-## 1.10.0 - TBA
+## 1.10.0 - 23.09.2024
 
-NB: Som en del av denne releasen må det godkjennes en ny app ved installasjon eller oppgradering. Dette skyldes at den tidligere PnP PowerShell appen som vi benyttet ikke lenger er tilgjengelig. Appen må godkjennes av Global Admin eller Application Admin. Prompt for å godkjenne denne appen vil automatisk dukke opp når brukeren setter i gang installasjonen. Som den del av denne endringen må nye oppdateringer og installasjoner gjøres med *PowerShell 7*.
+### Ny funksjonalitet
+
+### Forbedringer
+
+- Mulighetsmatrise har fått samme tilpasningsmuligheter som Risikomatrise, inkluderer overstyring av farger og konfigurasjon
+
+### Feilrettinger
+
+- Rettet et problem hvor programvisninger forble aktive selvom visningsvelgeren ble skrudd av [#1566](https://github.com/Puzzlepart/prosjektportalen365/issues/1566)
+
+## 1.10.0 - 23.09.2024
+
+NB: Som en del av denne versjonen kreves det godkjenning av en ny app-registrering ved installasjon eller oppgradering av Prosjektportalen 365. Dette skyldes at den tidligere PnP Management Shell-appen ikke lenger er tilgjengelig. Appen må godkjennes av en Global Administrator eller Application Administrator. Godkjenningsprosessen vil automatisk starte ved installasjon. Merk at oppdateringer og installasjoner nå må gjøres med PowerShell 7 eller nyere. [Les mer om dette her](https://github.com/Puzzlepart/prosjektportalen365/blob/main/releasenotes/1.10.0.md#overgang-til-nyeste-pnp-powershell)
 
 ### Ny funksjonalitet
 
@@ -14,6 +26,7 @@ NB: Som en del av denne releasen må det godkjennes en ny app ved installasjon e
 - Lagt til en aggregert oversikt for `Ressursallokering` i program og overordnet område mal [#1490](https://github.com/Puzzlepart/prosjektportalen365/issues/1490)
 
 ### Forbedringer
+
 - En ny visning i Porteføljeoversikt vil være personlig som standard [#1539](https://github.com/Puzzlepart/prosjektportalen365/issues/1539)
 
 ### Feilrettinger

SharePointFramework/ProjectWebParts/src/components/OpportunityMatrix/OpportunityMatrix.tsx

@@ -1,32 +1,48 @@
-import { Field, Switch } from '@fluentui/react-components'
+import { Field, FluentProvider, IdPrefixProvider, Switch } from '@fluentui/react-components'
 import strings from 'ProjectWebPartsStrings'
 import React, { FC } from 'react'
 import { DynamicMatrix } from '../DynamicMatrix'
 import { IOpportunityMatrixProps } from './types'
 import { useOpportunityMatrix } from './useOpportunityMatrix'
+import { UserMessage, customLightTheme } from 'pp365-shared-library'
 
 export const OpportunityMatrix: FC<IOpportunityMatrixProps> = (props) => {
-  const { configuration, getElementsForCell, setShowPostAction, showPostAction } =
-    useOpportunityMatrix(props)
+  const {
+    configuration,
+    error,
+    getElementsForCell,
+    setShowPostAction,
+    showPostAction,
+    fluentProviderId
+  } = useOpportunityMatrix(props)
   return (
-    <>
-      <DynamicMatrix
-        {...props}
-        width={props.fullWidth ? '100%' : props.width}
-        configuration={configuration}
-        getElementsForCell={getElementsForCell}
-      />
-      <Field label={strings.ToggleUncertaintyPostActionLabel}>
-        <Switch
-          label={
-            showPostAction
-              ? strings.ToggleUncertaintyPostActionOnText
-              : strings.ToggleUncertaintyPostActionOffText
-          }
-          onChange={(_event, data) => setShowPostAction(data.checked)}
-        />
-      </Field>
-    </>
+    <IdPrefixProvider value={fluentProviderId}>
+      <FluentProvider theme={customLightTheme} style={{ background: 'transparent' }}>
+        {!!error ? (
+          <UserMessage title={strings.ErrorTitle} text={error} intent='error' />
+        ) : (
+          <>
+            <DynamicMatrix
+              {...props}
+              width={props.fullWidth ? '100%' : props.width}
+              configuration={configuration}
+              getElementsForCell={getElementsForCell}
+            />
+            <Field label={strings.ToggleUncertaintyPostActionLabel}>
+              <Switch
+                label={
+                  showPostAction
+                    ? strings.ToggleUncertaintyPostActionOnText
+                    : strings.ToggleUncertaintyPostActionOffText
+                }
+                onChange={(_event, data) => setShowPostAction(data.checked)}
+                disabled={!!error}
+              />
+            </Field>
+          </>
+        )}
+      </FluentProvider>
+    </IdPrefixProvider>
   )
 }
 

SharePointFramework/ProjectWebParts/src/components/OpportunityMatrix/useOpportunityMatrix.ts

@@ -3,6 +3,7 @@ import { useState } from 'react'
 import { IMatrixCell } from '../DynamicMatrix'
 import { IOpportunityMatrixProps } from './types'
 import { useOpportunityMatrixConfiguration } from './useOpportunityMatrixConfiguration'
+import { useId } from '@fluentui/react-components'
 
 /**
  * Component logic hook for `OpportunityMatrix`. Builds the matrix elements and configuration
@@ -45,5 +46,14 @@ export function useOpportunityMatrix(props: IOpportunityMatrixProps) {
     return [...elements, ...postActionElements]
   }
 
-  return { configuration, error, getElementsForCell, setShowPostAction, showPostAction }
+  const fluentProviderId = useId('fp-opportunity-matrix')
+
+  return {
+    configuration,
+    error,
+    getElementsForCell,
+    setShowPostAction,
+    showPostAction,
+    fluentProviderId
+  }
 }

SharePointFramework/ProjectWebParts/src/components/OpportunityMatrix/useOpportunityMatrixConfiguration.ts

@@ -1,14 +1,15 @@
 import { dateAdd, getHashCode } from '@pnp/core'
 import { Caching } from '@pnp/queryable'
+import strings from 'ProjectWebPartsStrings'
 import { useEffect, useState } from 'react'
 import SPDataAdapter from '../../data'
 import { DynamicMatrixConfiguration } from '../DynamicMatrix'
 import { IOpportunityMatrixProps } from './types'
-import strings from 'ProjectWebPartsStrings'
 
 /**
- * Configuration hook for `OpportunityMatrix`. Generates the matrix configuration based on the
- * specified matrix size.
+ * Configuration hook for `OpportunityMatrix`. This hook will fetch the manual configuration
+ * from the specified URL or generate a dynamic configuration based on the size of the
+ * matrix.
  *
  * @param props Props
  */
@@ -18,8 +19,10 @@ export function useOpportunityMatrixConfiguration(props: IOpportunityMatrixProps
 
   // Fetch manual configuration if `pageContext` is set.
   useEffect(() => {
-    fetchJsonConfiguration()
-  }, [props.manualConfigurationPath])
+    if (props.pageContext) {
+      fetchJsonConfiguration()
+    }
+  }, [props.pageContext])
 
   /**
    * Fetches the manual configuration from the specified URL.

SharePointFramework/ProjectWebParts/src/components/RiskMatrix/useRiskMatrix.ts

@@ -6,14 +6,20 @@ import { useRiskMatrixConfiguration } from './useRiskMatrixConfiguration'
 import { useId } from '@fluentui/react-components'
 
 /**
- * Component logic hook for `RiskMatrix`
+ * Component logic hook for `RiskMatrix`. Builds the matrix elements and configuration
+ * for the matrix.
  *
  * @param props Props
  */
 export function useRiskMatrix(props: IRiskMatrixProps) {
   const [showPostAction, setShowPostAction] = useState(false)
   const { configuration, error } = useRiskMatrixConfiguration(props)
 
+  /**
+   * Get the matrix elements for a given cell.
+   *
+   * @param cell Matrix cell
+   */
   function getElementsForCell(cell: IMatrixCell) {
     const elements = props.items
       .filter((item) => cell.y === item.probability && cell.x === item.consequence)

SharePointFramework/ProjectWebParts/src/webparts/opportunityMatrix/index.ts

@@ -1,12 +1,13 @@
+import { get } from '@microsoft/sp-lodash-subset'
 import {
   IPropertyPaneConfiguration,
+  PropertyPaneDropdown,
   PropertyPaneSlider,
   PropertyPaneTextField,
   PropertyPaneToggle
 } from '@microsoft/sp-property-pane'
 import * as strings from 'ProjectWebPartsStrings'
 import { IOpportunityMatrixProps, OpportunityMatrix } from 'components/OpportunityMatrix'
-import * as getValue from 'get-value'
 import _ from 'lodash'
 import ReactDom from 'react-dom'
 import SPDataAdapter from '../../data'
@@ -23,12 +24,13 @@ export default class OpportunityMatrixWebPart extends BaseProjectWebPart<IOpport
     try {
       const [items, configurations] = await Promise.all([
         this._getItems(),
-        SPDataAdapter.getConfigurations(strings.RiskMatrixConfigurationFolder)
+        SPDataAdapter.getConfigurations(strings.OpportunityMatrixConfigurationFolder)
       ])
       const defaultConfiguration = _.find(
         configurations,
         (config) =>
-          config.name === SPDataAdapter.globalSettings.get('RiskMatrixDefaultConfigurationFile')
+          config.name ===
+          SPDataAdapter.globalSettings.get('OpportunityMatrixDefaultConfigurationFile')
       )
       this._data = { items, configurations, defaultConfiguration }
     } catch (error) {
@@ -51,24 +53,29 @@ export default class OpportunityMatrixWebPart extends BaseProjectWebPart<IOpport
     }
   }
 
+  /**
+   * Get items from list `this.properties.listName` using CAML query
+   */
   protected async _getItems(): Promise<UncertaintyElementModel[]> {
     const {
       probabilityFieldName,
       consequenceFieldName,
       probabilityPostActionFieldName,
-      consequencePostActionFieldName
+      consequencePostActionFieldName,
+      viewXml,
+      listName
     } = this.properties
     const items: any[] = await this.sp.web.lists
-      .getByTitle(this.properties.listName)
-      .getItemsByCAMLQuery({ ViewXml: this.properties.viewXml })
+      .getByTitle(listName)
+      .getItemsByCAMLQuery({ ViewXml: viewXml })
     return items.map(
       (i) =>
         new UncertaintyElementModel(
           i,
-          getValue(i, probabilityFieldName, { default: '' }),
-          getValue(i, consequenceFieldName, { default: '' }),
-          getValue(i, probabilityPostActionFieldName, { default: '' }),
-          getValue(i, consequencePostActionFieldName, { default: '' })
+          get(i, probabilityFieldName, { default: '' }),
+          get(i, consequenceFieldName, { default: '' }),
+          get(i, probabilityPostActionFieldName, { default: '' }),
+          get(i, consequencePostActionFieldName, { default: '' })
         )
     )
   }
@@ -127,6 +134,15 @@ export default class OpportunityMatrixWebPart extends BaseProjectWebPart<IOpport
                   multiline: true,
                   resizable: true,
                   rows: 8
+                }),
+                PropertyPaneDropdown('manualConfigurationPath', {
+                  label: strings.ManualConfigurationPathLabel,
+                  options: this._data.configurations.map(({ url: key, title: text }) => ({
+                    key,
+                    text
+                  })),
+                  selectedKey:
+                    this.properties?.manualConfigurationPath ?? this._data.defaultConfiguration?.url
                 })
               ].filter(Boolean)
             }

SharePointFramework/ProjectWebParts/src/webparts/opportunityMatrix/types.ts

@@ -3,14 +3,41 @@ import { UncertaintyElementModel } from 'models'
 import { IBaseWebPartComponentProps } from 'pp365-shared-library/lib/components/BaseWebPartComponent/types'
 import { IConfigurationFile } from 'types'
 
+/**
+ * Interface for the properties of the Opportunity Matrix web part.
+ * Extends IBaseWebPartComponentProps and IOpportunityMatrixProps interfaces.
+ */
 export interface IOpportunityMatrixWebPartProps
   extends IBaseWebPartComponentProps,
     IOpportunityMatrixProps {
+  /**
+   * The name of the SharePoint list to retrieve data from.
+   */
   listName?: string
+
+  /**
+   * The CAML query to filter items in the SharePoint list.
+   */
   viewXml?: string
+
+  /**
+   * The internal name of the field in the SharePoint list that stores the probability values.
+   */
   probabilityFieldName?: string
+
+  /**
+   * The internal name of the field in the SharePoint list that stores the consequence values
+   */
   consequenceFieldName?: string
+
+  /**
+   * The internal name of the field in the SharePoint list that stores the post-action probability values.
+   */
   probabilityPostActionFieldName?: string
+
+  /**
+   * The internal name of the field in the SharePoint list that stores the post-action consequence values.
+   */
   consequencePostActionFieldName?: string
 }