Bruk av UserMessage gjennom hele løsningen (#1293)

* Update UserMessage and FieldContainer component

* ColumnSearchPropertyField UserMessage adjustments

* Update UserMessages in PortfolioWebParts

* Use UserMessage instead of Alert and MessageBar (PortfolioWebParts

* ProgramWebParts

* shared-library

* ProjectInformation

* ProjectExtensions

* Use message consistency throughout solution

* Minor fix

* Another minor fix

SharePointFramework/PortfolioExtensions/src/components/IdeaApprovalDialog/index.tsx

@@ -35,7 +35,7 @@ export const IdeaApprovalDialog: FC<IIdeaApprovalDialogProps> = (props) => {
           <DialogContent className={styles.content}>
             <UserMessage
               title={format(strings.SetRecommendationSubtitle, props.ideaTitle)}
-              text={props.dialogDescription}
+              message={props.dialogMessage}
               intent='info'
             />
             <Field label={strings.ActionLabel}>
@@ -81,7 +81,7 @@ export default class RecommendationDialog extends BaseDialog {
   public message: string
   public selectedChoice: string
   public ideaTitle: string
-  public dialogDescription: string
+  public dialogMessage: string
   public comment: string
 
   public render(): void {
@@ -90,7 +90,7 @@ export default class RecommendationDialog extends BaseDialog {
         close={this.close}
         submit={this._submit}
         ideaTitle={this.ideaTitle}
-        dialogDescription={this.dialogDescription}
+        dialogMessage={this.dialogMessage}
       />,
       this.domElement
     )

SharePointFramework/PortfolioExtensions/src/components/IdeaApprovalDialog/types.ts

@@ -2,7 +2,7 @@ export interface IIdeaApprovalDialogProps {
   close: () => void
   submit: (choice: string, comment: string) => void
   ideaTitle?: string
-  dialogDescription?: string
+  dialogMessage?: string
 }
 
 export interface IIdeaApprovalDialogState {

SharePointFramework/PortfolioExtensions/src/components/IdeaDialog/index.tsx

@@ -32,10 +32,8 @@ export const IdeaDialog: FC<IIdeaDialogProps> = (props) => {
                   ? strings.IdeaProjectDataDialogBlockedTitle
                   : strings.IdeaProjectDataDialogInfoTitle
               }
-              text={format(
-                props.isBlocked
-                  ? strings.IdeaProjectDataDialogBlockedText
-                  : props.dialogDescription,
+              message={format(
+                props.isBlocked ? strings.IdeaProjectDataDialogBlockedMessage : props.dialogMessage,
                 encodeURIComponent(window.location.href)
               )}
               intent={props.isBlocked ? 'warning' : 'info'}
@@ -62,7 +60,7 @@ export const IdeaDialog: FC<IIdeaDialogProps> = (props) => {
 
 export default class ProjectDataDialog extends BaseDialog {
   public ideaTitle: string
-  public dialogDescription: string
+  public dialogMessage: string
   public isBlocked: boolean
 
   public render(): void {
@@ -71,7 +69,7 @@ export default class ProjectDataDialog extends BaseDialog {
         close={this.close}
         submit={this.submit}
         ideaTitle={this.ideaTitle}
-        dialogDescription={this.dialogDescription}
+        dialogMessage={this.dialogMessage}
         isBlocked={this.isBlocked}
       />,
       this.domElement

SharePointFramework/PortfolioExtensions/src/components/IdeaDialog/types.ts

@@ -2,6 +2,6 @@ export interface IIdeaDialogProps {
   close: () => void
   submit: () => void
   ideaTitle?: string
-  dialogDescription?: string
+  dialogMessage?: string
   isBlocked?: boolean
 }

SharePointFramework/PortfolioExtensions/src/extensions/ideaProcessing/index.ts

@@ -59,7 +59,7 @@ export default class IdeaProcessCommand extends BaseListViewCommandSet<any> {
         const row = event.selectedRows[0]
 
         dialog.ideaTitle = row.getValueByName('Title')
-        dialog.dialogDescription =
+        dialog.dialogMessage =
           this._ideaConfig.description[1] ||
           strings.SetRecommendationDefaultDescription.split(';')[1]
         dialog.show().then(() => {

SharePointFramework/PortfolioExtensions/src/extensions/ideaProjectData/index.tsx

@@ -56,7 +56,7 @@ export default class IdeaProjectDataCommand extends BaseListViewCommandSet<IIdea
         const row = event.selectedRows[0]
 
         dialog.ideaTitle = row.getValueByName('Title')
-        dialog.dialogDescription =
+        dialog.dialogMessage =
           this._ideaConfig.description[2] ||
           strings.SetRecommendationDefaultDescription.split(';')[2]
         dialog.isBlocked = !!row.getValueByName('GtIdeaProjectData')

SharePointFramework/PortfolioExtensions/src/extensions/ideaRegistration/index.tsx

@@ -67,7 +67,7 @@ export default class IdeaRegistrationCommand extends BaseListViewCommandSet<any>
         const row = event.selectedRows[0]
 
         dialog.ideaTitle = row.getValueByName('Title')
-        dialog.dialogDescription =
+        dialog.dialogMessage =
           this._ideaConfig.description[0] ||
           strings.SetRecommendationDefaultDescription.split(';')[0]
         await dialog.show()
@@ -305,7 +305,7 @@ export default class IdeaRegistrationCommand extends BaseListViewCommandSet<any>
       )
       .addControl(
         new ClientsideText(`
-          <h3>Mulige gevinster</h3> 
+          <h3>Mulige gevinster</h3>
           ${row.getValueByName('GtIdeaPossibleGains')}
           `)
       )

SharePointFramework/PortfolioExtensions/src/loc/_/en-us.js

@@ -16,7 +16,7 @@ define([], function () {
     IdeaAlreadyApproved: 'This idea has already been approved',
     IdeaConfigurationTitle: 'Idékonfigurasjon',
     IdeaProcessorsSiteGroup: 'Idebehandlere',
-    IdeaProjectDataDialogBlockedText: 'Project data for this idea has already been created and associated.',
+    IdeaProjectDataDialogBlockedMessage: 'Project data for this idea has already been created and associated.',
     IdeaProjectDataDialogTitle: 'Create project data for the idea',
     IdeaProjectDataTitle: 'Prosjektdata',
     InstallationLogListName: 'Installasjonslogg',

SharePointFramework/PortfolioExtensions/src/loc/myStrings.d.ts

@@ -20,7 +20,7 @@ declare interface IPortfolioExtensionsStrings {
   IdeaConfigurationTitle: string
   IdeaProcessorsSiteGroup: string
   IdeaProjectDataDialogBlockedTitle: string
-  IdeaProjectDataDialogBlockedText: string
+  IdeaProjectDataDialogBlockedMessage: string
   IdeaProjectDataDialogInfoTitle: string
   IdeaProjectDataDialogTitle: string
   IdeaProjectDataTitle: string

SharePointFramework/PortfolioExtensions/src/loc/nb-no.js

@@ -21,7 +21,7 @@ define([], function () {
     IdeaConfigurationTitle: 'Idékonfigurasjon',
     IdeaProcessorsSiteGroup: 'Idebehandlere',
     IdeaProjectDataDialogBlockedTitle: 'Prosjektdata element funnet',
-    IdeaProjectDataDialogBlockedText: 'Det er allerede opprettet og tilknyttet prosjektdata for denne ideen.',
+    IdeaProjectDataDialogBlockedMessage: 'Det er allerede opprettet og tilknyttet prosjektdata for denne ideen.',
     IdeaProjectDataDialogInfoTitle: 'Tilknytning av prosjektdata',
     IdeaProjectDataDialogTitle: 'Opprett prosjektdata for ideen',
     IdeaProjectDataTitle: 'Prosjektdata',

SharePointFramework/PortfolioWebParts/src/components/LatestProjects/LatestProjects.module.scss

@@ -1,9 +1,5 @@
 .root {
   .container {
-    .emptyMessage {
-      margin: 15px 0 0 0;
-    }
-
     .projectItem {
       display: flex;
       flex-direction: row;

SharePointFramework/PortfolioWebParts/src/components/LatestProjects/index.tsx

@@ -1,9 +1,8 @@
 import { format } from '@fluentui/react'
 import { Button, Caption1, FluentProvider, Link, webLightTheme } from '@fluentui/react-components'
-import { Alert } from '@fluentui/react-components/unstable'
 import { ChevronDownFilled, ChevronUpFilled } from '@fluentui/react-icons'
 import strings from 'PortfolioWebPartsStrings'
-import { ProjectLogo, WebPartTitle } from 'pp365-shared-library/lib/components'
+import { ProjectLogo, UserMessage, WebPartTitle } from 'pp365-shared-library/lib/components'
 import { formatDate } from 'pp365-shared-library/lib/util/formatDate'
 import React, { FC } from 'react'
 import styles from './LatestProjects.module.scss'
@@ -29,9 +28,10 @@ export const LatestProjects: FC<ILatestProjectsProps> = (props) => {
   function renderLatestProjects(): JSX.Element[] | JSX.Element {
     if (!loading && projects.length === 0) {
       return (
-        <Alert className={styles.emptyMessage} intent='info'>
-          {strings.NoProjectsFoundMessage}
-        </Alert>
+        <UserMessage
+          title={strings.NoProjectsFoundTitle}
+          message={strings.NoProjectsFoundMessage}
+        />
       )
     }
     const viewCount = viewAll ? projects.length : props.rowLimit

SharePointFramework/PortfolioWebParts/src/components/List/ItemColumn/DialogColumn/DialogColumn.module.scss

@@ -10,8 +10,4 @@
   .infoText {
     margin: 20px 0;
   }
-
-  .emptyListText {
-    margin: 10px 0;
-  }
 }

SharePointFramework/PortfolioWebParts/src/components/List/ItemColumn/DialogColumn/index.tsx

@@ -22,8 +22,8 @@ import {
   Link,
   Text
 } from '@fluentui/react-components'
-import { Alert } from '@fluentui/react-components/unstable'
 import { stringIsNullOrEmpty } from '@pnp/core'
+import { UserMessage } from 'pp365-shared-library'
 
 /**
  * A column render component that displays a link in the cell. When the link is clicked, a dialog is displayed
@@ -82,9 +82,10 @@ export const DialogColumn: ColumnRenderComponent<IDialogColumnProps> = (props) =
                 </DataGridBody>
               </DataGrid>
             ) : (
-              <Alert intent='info' className={styles.emptyListText}>
-                {strings.ModalColumnEmptyListText}
-              </Alert>
+              <UserMessage
+                title={strings.ModalColumnEmptyListTitle}
+                message={strings.ModalColumnEmptyListMessage}
+              />
             )}
           </DialogContent>
         </DialogBody>

SharePointFramework/PortfolioWebParts/src/components/List/ListHeader/ListHeader.tsx

@@ -3,10 +3,9 @@ import React, { FC, useContext } from 'react'
 import styles from './ListHeader.module.scss'
 import { IListHeaderProps } from './types'
 import strings from 'PortfolioWebPartsStrings'
-import { WebPartTitle } from 'pp365-shared-library'
+import { UserMessage, WebPartTitle } from 'pp365-shared-library'
 import { SearchBox } from '@fluentui/react-search-preview'
 import { FluentProvider, webLightTheme } from '@fluentui/react-components'
-import { Alert } from '@fluentui/react-components/unstable'
 import { Toolbar } from 'pp365-shared-library'
 import { ListContext } from '../context'
 
@@ -26,7 +25,7 @@ export const ListHeader: FC<IListHeaderProps> = (props) => {
         </div>
         {hasError && (
           <div className={styles.errorContainer}>
-            <Alert intent='error'>{props.error.message}</Alert>
+            <UserMessage title={strings.ErrorTitle} message={props.error.message} intent='error' />
           </div>
         )}
         <div className={styles.commandBar}>

SharePointFramework/PortfolioWebParts/src/components/PortfolioInsights/Chart/index.tsx

@@ -1,10 +1,10 @@
-import { MessageBar, MessageBarType } from '@fluentui/react/lib/MessageBar'
 import * as strings from 'PortfolioWebPartsStrings'
 import { getBreakpoint } from 'pp365-shared-library/lib/util/getBreakpoint'
 import React, { Component } from 'react'
 import * as ReactHighcharts from 'react-highcharts'
 import { IChartProps } from './IChartProps'
 import { IChartState } from './IChartState'
+import { UserMessage } from 'pp365-shared-library'
 
 export default class Chart extends Component<IChartProps, IChartState> {
   public static defaultProps: Partial<IChartProps> = {}
@@ -41,7 +41,7 @@ export default class Chart extends Component<IChartProps, IChartState> {
           <div className='ms-Grid' dir='ltr'>
             <div className='ms-Grid-row'>
               <div className='ms-Grid-col ms-sm12'>
-                <MessageBar messageBarType={MessageBarType.error}>{error}</MessageBar>
+                <UserMessage title={strings.ErrorTitle} message={error} intent='error' />
               </div>
             </div>
           </div>

SharePointFramework/PortfolioWebParts/src/components/PortfolioInsights/index.tsx

@@ -1,12 +1,12 @@
 import { ChartData, ChartDataItem } from 'models'
-import { MessageBar, MessageBarType } from '@fluentui/react/lib/MessageBar'
 import { PortfolioOverviewView } from 'pp365-shared-library/lib/models'
 import React, { Component } from 'react'
 import Chart from './Chart'
 import { Commands } from './Commands'
 import styles from './PortfolioInsights.module.scss'
 import { IPortfolioInsightsProps, IPortfolioInsightsState } from './types'
 import * as strings from 'PortfolioWebPartsStrings'
+import { UserMessage } from 'pp365-shared-library'
 
 /**
  * @component PortfolioInsights
@@ -76,16 +76,21 @@ export class PortfolioInsights extends Component<IPortfolioInsightsProps, IPortf
     if (this.state.error) {
       return (
         <div className={styles.inner}>
-          <MessageBar messageBarType={MessageBarType.error}>{this.state.error}</MessageBar>
+          <UserMessage
+            title={strings.ErrorFetchingProjectsTitle}
+            message={this.state.error}
+            intent='error'
+          />
         </div>
       )
     }
     if (this.state.chartData.isEmpty()) {
       return (
         <div className={styles.inner}>
-          <MessageBar messageBarType={MessageBarType.info}>
-            {strings.NoProjectsFoundMessage}
-          </MessageBar>
+          <UserMessage
+            title={strings.NoProjectsFoundTitle}
+            message={strings.NoProjectsFoundMessage}
+          />
         </div>
       )
     }

SharePointFramework/PortfolioWebParts/src/components/PortfolioOverview/ColumnFormPanel/index.tsx

@@ -98,11 +98,13 @@ export const ColumnFormPanel: FC = () => {
             onChange={(value) => setColumn('fieldName', value)}
             disabled={isEditing}
             managedProperties={context.state.managedProperties}
-          >
-            {columnMessages.get('fieldName') && (
-              <UserMessage style={{ margin: '8px 0' }} text={columnMessages.get('fieldName')} />
-            )}
-          </ColumnSearchPropertyField>
+          />
+          {columnMessages.get('fieldName') && (
+            <UserMessage
+              title={strings.SearchPropertyFoundTitle}
+              message={columnMessages.get('fieldName')}
+            />
+          )}
         </FieldContainer>
         <FieldContainer
           iconName='TextNumberFormat'

SharePointFramework/PortfolioWebParts/src/components/PortfolioOverview/ViewFormPanel/index.tsx

@@ -95,7 +95,11 @@ export const ViewFormPanel: FC = () => {
             disabled={isDefaultViewSet}
           />
           {isDefaultViewSet && (
-            <UserMessage text={strings.DefaultViewSetWarningMessage} intent='warning' />
+            <UserMessage
+              title={strings.DefaultViewLabel}
+              message={strings.DefaultViewSetWarningMessage}
+              intent='warning'
+            />
           )}
         </FieldContainer>
         <FieldContainer

SharePointFramework/PortfolioWebParts/src/components/ProjectList/index.tsx

@@ -5,7 +5,6 @@ import {
   TabList,
   webLightTheme
 } from '@fluentui/react-components'
-import { Alert } from '@fluentui/react-components/unstable'
 import { SearchBox } from '@fluentui/react-search-preview'
 import * as strings from 'PortfolioWebPartsStrings'
 import { ProjectInformationPanel } from 'pp365-projectwebparts/lib/components/ProjectInformationPanel'
@@ -20,7 +19,7 @@ import styles from './ProjectList.module.scss'
 import { ProjectListVerticals } from './ProjectListVerticals'
 import { IProjectListProps } from './types'
 import { useProjectList } from './useProjectList'
-import { Toolbar } from 'pp365-shared-library'
+import { Toolbar, UserMessage } from 'pp365-shared-library'
 
 export const ProjectList: FC<IProjectListProps> = (props) => {
   const {
@@ -70,7 +69,10 @@ export const ProjectList: FC<IProjectListProps> = (props) => {
     return (
       <FluentProvider theme={webLightTheme}>
         <section className={styles.root}>
-          <Alert intent='info'>{strings.NoProjectsFoundMessage}</Alert>
+          <UserMessage
+            title={strings.NoProjectsFoundTitle}
+            message={strings.NoProjectsFoundMessage}
+          />
         </section>
       </FluentProvider>
     )
@@ -79,7 +81,11 @@ export const ProjectList: FC<IProjectListProps> = (props) => {
   if (state.error) {
     return (
       <section className={styles.root}>
-        <Alert intent='error'>{strings.ErrorText}</Alert>
+        <UserMessage
+          title={strings.ErrorFetchingProjectsTitle}
+          message={state.error}
+          intent='error'
+        />
       </section>
     )
   }
@@ -132,7 +138,10 @@ export const ProjectList: FC<IProjectListProps> = (props) => {
       </div>
       {state.isDataLoaded && isEmpty(projects) && (
         <div className={styles.emptyMessage}>
-          <Alert intent='info'>{strings.ProjectListEmptyText}</Alert>
+          <UserMessage
+            title={strings.NoProjectsFoundTitle}
+            message={strings.ProjectListEmptyMessage}
+          />
         </div>
       )}
       <div className={styles.projects}>{renderProjects(projects)}</div>

SharePointFramework/PortfolioWebParts/src/components/ResourceAllocation/index.tsx

@@ -1,11 +1,10 @@
 import { FluentProvider, webLightTheme } from '@fluentui/react-components'
-import { Alert } from '@fluentui/react-components/unstable'
 import React, { FC } from 'react'
 import styles from './ResourceAllocation.module.scss'
 import * as strings from 'PortfolioWebPartsStrings'
 import { IResourceAllocationProps } from './types'
 import { useResourceAllocation } from './useResourceAllocation'
-import { Timeline } from 'pp365-shared-library/lib/components'
+import { Timeline, UserMessage } from 'pp365-shared-library'
 
 export const ResourceAllocation: FC<IResourceAllocationProps> = (props) => {
   const { state, filters, onFilterChange, items, groups, defaultTimeframe } =
@@ -17,7 +16,7 @@ export const ResourceAllocation: FC<IResourceAllocationProps> = (props) => {
     return (
       <FluentProvider className={styles.root} theme={webLightTheme}>
         <div className={styles.errorContainer}>
-          <Alert intent='error'>{state.error}</Alert>
+          <UserMessage title={strings.ErrorTitle} message={state.error} intent='error' />
         </div>
       </FluentProvider>
     )