Refaktorering av Programadministrasjon

.gitignore

@@ -23,4 +23,5 @@ common/temp
 **/.rush/temp/
 **/*.build.log
 **/package-lock.json
-.vscode/launch.json*
+.vscode/launch.json*
+SharePointFramework/ProgramWebParts/.vscode/chrome-debug-user-data

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)}
-              message={props.dialogMessage}
+              text={props.dialogMessage}
               intent='info'
             />
             <Field label={strings.ActionLabel}>

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

@@ -32,7 +32,7 @@ export const IdeaDialog: FC<IIdeaDialogProps> = (props) => {
                   ? strings.IdeaProjectDataDialogBlockedTitle
                   : strings.IdeaProjectDataDialogInfoTitle
               }
-              message={format(
+              text={format(
                 props.isBlocked ? strings.IdeaProjectDataDialogBlockedMessage : props.dialogMessage,
                 encodeURIComponent(window.location.href)
               )}

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

@@ -30,7 +30,7 @@ export const LatestProjects: FC<ILatestProjectsProps> = (props) => {
       return (
         <UserMessage
           title={strings.NoProjectsFoundTitle}
-          message={strings.NoProjectsFoundMessage}
+          text={strings.NoProjectsFoundMessage}
         />
       )
     }

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

@@ -84,7 +84,7 @@ export const DialogColumn: ColumnRenderComponent<IDialogColumnProps> = (props) =
             ) : (
               <UserMessage
                 title={strings.ModalColumnEmptyListTitle}
-                message={strings.ModalColumnEmptyListMessage}
+                text={strings.ModalColumnEmptyListMessage}
               />
             )}
           </DialogContent>

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

@@ -25,7 +25,7 @@ export const ListHeader: FC<IListHeaderProps> = (props) => {
         </div>
         {hasError && (
           <div className={styles.errorContainer}>
-            <UserMessage title={strings.ErrorTitle} message={props.error.message} intent='error' />
+            <UserMessage title={strings.ErrorTitle} text={props.error.message} intent='error' />
           </div>
         )}
         <div className={styles.commandBar}>

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

@@ -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'>
-                <UserMessage title={strings.ErrorTitle} message={error} intent='error' />
+                <UserMessage title={strings.ErrorTitle} text={error} intent='error' />
               </div>
             </div>
           </div>

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

@@ -78,7 +78,7 @@ export class PortfolioInsights extends Component<IPortfolioInsightsProps, IPortf
         <div className={styles.inner}>
           <UserMessage
             title={strings.ErrorFetchingProjectsTitle}
-            message={this.state.error}
+            text={this.state.error}
             intent='error'
           />
         </div>
@@ -89,7 +89,7 @@ export class PortfolioInsights extends Component<IPortfolioInsightsProps, IPortf
         <div className={styles.inner}>
           <UserMessage
             title={strings.NoProjectsFoundTitle}
-            message={strings.NoProjectsFoundMessage}
+            text={strings.NoProjectsFoundMessage}
           />
         </div>
       )

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

@@ -102,7 +102,7 @@ export const ColumnFormPanel: FC = () => {
           {columnMessages.get('fieldName') && (
             <UserMessage
               title={strings.SearchPropertyFoundTitle}
-              message={columnMessages.get('fieldName')}
+              text={columnMessages.get('fieldName')}
             />
           )}
         </FieldContainer>

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

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

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

@@ -71,7 +71,7 @@ export const ProjectList: FC<IProjectListProps> = (props) => {
         <section className={styles.root}>
           <UserMessage
             title={strings.NoProjectsFoundTitle}
-            message={strings.NoProjectsFoundMessage}
+            text={strings.NoProjectsFoundMessage}
           />
         </section>
       </FluentProvider>
@@ -83,7 +83,7 @@ export const ProjectList: FC<IProjectListProps> = (props) => {
       <section className={styles.root}>
         <UserMessage
           title={strings.ErrorFetchingProjectsTitle}
-          message={state.error}
+          text={state.error}
           intent='error'
         />
       </section>
@@ -140,7 +140,7 @@ export const ProjectList: FC<IProjectListProps> = (props) => {
         <div className={styles.emptyMessage}>
           <UserMessage
             title={strings.NoProjectsFoundTitle}
-            message={strings.ProjectListEmptyMessage}
+            text={strings.ProjectListEmptyMessage}
           />
         </div>
       )}

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

@@ -16,7 +16,7 @@ export const ResourceAllocation: FC<IResourceAllocationProps> = (props) => {
     return (
       <FluentProvider className={styles.root} theme={webLightTheme}>
         <div className={styles.errorContainer}>
-          <UserMessage title={strings.ErrorTitle} message={state.error} intent='error' />
+          <UserMessage title={strings.ErrorTitle} text={state.error} intent='error' />
         </div>
       </FluentProvider>
     )

SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/AddProjectDialog.module.scss

@@ -1,24 +1,20 @@
 @import '~@fluentui/react/dist/sass/References.scss';
 
-.root {
+.addProjectDialog {
   width: 950px;
   max-width: 950px;
   box-sizing: border-box;
   position: relative;
 
-  .dialogContent {
-    height: 650px;
+  .content {
+    height: 550px;
     margin: 20px 0 0 0;
     box-sizing: border-box;
-
-    .searchBox {
-      width: 625px;
-      margin: 10px 0 0 0;
-      box-sizing: border-box;
-    }
+    overflow-y: auto;
+    overflow-x: hidden;
   }
 
-  div[class*="ms-List-cell"] {
-    min-height: 0px;
+  .actions {
+    padding: 20px 0 0 0;
   }
 }

SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/AddProjectDialog.tsx

@@ -1,76 +1,64 @@
 import {
-  DefaultButton,
+  Button,
   Dialog,
-  DialogFooter,
-  DialogType,
-  PrimaryButton,
-  SelectionMode,
-  ShimmeredDetailsList,
-  ScrollablePane
-} from '@fluentui/react'
-import _ from 'lodash'
+  DialogActions,
+  DialogContent,
+  DialogSurface,
+  DialogTitle
+} from '@fluentui/react-components'
 import * as strings from 'ProgramWebPartsStrings'
+import _ from 'lodash'
 import React, { FC, useContext } from 'react'
-import { columns } from '../columns'
+import { ProjectList } from '../ProjectList'
 import { ProgramAdministrationContext } from '../context'
-import { ListHeaderSearch } from '../ListHeaderSearch/ListHeaderSearch'
-import { ADD_CHILD_PROJECTS, TOGGLE_ADD_PROJECT_DIALOG } from '../reducer'
+import { SET_SELECTED_TO_ADD, TOGGLE_ADD_PROJECT_DIALOG } from '../reducer'
 import styles from './AddProjectDialog.module.scss'
 import { useAddProjectDialog } from './useAddProjectDialog'
 
 export const AddProjectDialog: FC = () => {
   const context = useContext(ProgramAdministrationContext)
-  const { selection, availableProjects, onSearch, onRenderRow } = useAddProjectDialog()
+  const { availableProjects, onAddChildProjects } = useAddProjectDialog()
 
   return (
     <Dialog
-      hidden={false}
-      modalProps={{ containerClassName: styles.root }}
-      onDismiss={() => context.dispatch(TOGGLE_ADD_PROJECT_DIALOG())}
-      dialogContentProps={{
-        type: DialogType.largeHeader,
-        title: strings.ProgramAdministrationAddChildsButtonText
+      open={context.state.addProjectDialog?.open}
+      onOpenChange={(_, data) => {
+        if (!data.open) {
+          context.dispatch(TOGGLE_ADD_PROJECT_DIALOG())
+        }
       }}
     >
-      <div className={styles.dialogContent}>
-        <ScrollablePane>
-          <ShimmeredDetailsList
-            setKey='AddProjectDialog'
+      <DialogSurface className={styles.addProjectDialog}>
+        <DialogTitle>
+          <h2>{strings.ProgramAdministrationAddChildsButtonText}</h2>
+        </DialogTitle>
+        <DialogContent className={styles.content}>
+          <ProjectList
             items={availableProjects}
-            columns={columns({ renderAsLink: false })}
-            selectionMode={SelectionMode.multiple}
-            selection={selection}
-            enableShimmer={context.state.loading.AddProjectDialog}
-            selectionPreservedOnEmptyClick={true}
-            onRenderRow={onRenderRow}
-            onRenderDetailsHeader={(detailsHeaderProps, defaultRender) => (
-              <ListHeaderSearch
-                selectedItems={context.state.selectedProjectsToAdd}
-                detailsHeaderProps={detailsHeaderProps}
-                defaultRender={defaultRender}
-                search={{
-                  placeholder: strings.AddProjectDialogSearchBoxPlaceholder,
-                  onSearch
-                }}
-              />
-            )}
+            onSelectionChange={(_, data) => {
+              context.dispatch(SET_SELECTED_TO_ADD(Array.from(data.selectedItems)))
+            }}
+            search={{
+              placeholder: strings.AddProjectDialogSearchBoxPlaceholder
+            }}
           />
-        </ScrollablePane>
-      </div>
-      <DialogFooter>
-        <PrimaryButton
-          text={strings.Add}
-          disabled={_.isEmpty(context.state.selectedProjectsToAdd)}
-          onClick={async () => {
-            await context.props.dataAdapter.addChildProjects(context.state.selectedProjectsToAdd)
-            context.dispatch(ADD_CHILD_PROJECTS())
-          }}
-        />
-        <DefaultButton
-          text={strings.Cancel}
-          onClick={() => context.dispatch(TOGGLE_ADD_PROJECT_DIALOG())}
-        />
-      </DialogFooter>
+        </DialogContent>
+        <DialogActions className={styles.actions}>
+          <Button
+            appearance='primary'
+            disabled={_.isEmpty(context.state.addProjectDialog?.selectedProjects)}
+            onClick={onAddChildProjects}
+          >
+            {strings.Add}
+          </Button>
+          <Button
+            appearance='secondary'
+            onClick={() => context.dispatch(TOGGLE_ADD_PROJECT_DIALOG())}
+          >
+            {strings.Cancel}
+          </Button>
+        </DialogActions>
+      </DialogSurface>
     </Dialog>
   )
 }

SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/useAddProjectDialog.ts

@@ -1,16 +1,9 @@
 import { useContext, useEffect } from 'react'
 import { ProgramAdministrationContext } from '../context'
-import { DATA_LOADED, SET_SELECTED_TO_ADD } from '../reducer'
-import { useRowRenderer } from '../useRowRenderer'
-import { useSelectionList } from '../useSelectionList'
+import { ADD_CHILD_PROJECTS, DATA_LOADED } from '../reducer'
 
 export const useAddProjectDialog = () => {
   const context = useContext(ProgramAdministrationContext)
-  const selectedKeys = context.state.selectedProjectsToAdd.map((p) => p.key)
-
-  const selectionList = useSelectionList(selectedKeys, (selected) => {
-    context.dispatch(SET_SELECTED_TO_ADD({ selected }))
-  })
 
   useEffect(() => {
     context.props.dataAdapter
@@ -26,19 +19,25 @@ export const useAddProjectDialog = () => {
   }, [])
 
   const availableProjects = context.state.availableProjects.filter(
-    (project) =>
-      !context.state.childProjects.some((el) => el.SiteId === project.SiteId) &&
-      project.SiteId !== context.props.context.pageContext.site.id.toString()
+    ({SiteId}) =>
+      !context.state.childProjects.some((c) => c.SiteId === SiteId) &&
+      SiteId !== context.props.context.pageContext.site.id.toString()
   )
 
-  const onRenderRow = useRowRenderer({
-    selectedKeys,
-    searchTerm: selectionList.searchTerm
-  })
+  /**
+   * Adds projects to the parent project. This function is called when the user clicks the "Add" button in the
+   * `<AddProjectDialog />` component.
+   */
+  const onAddChildProjects = async () => {
+    const projects = availableProjects.filter(({SiteId}) =>
+      context.state.addProjectDialog?.selectedProjects.includes(SiteId)
+    )
+    await context.props.dataAdapter.addChildProjects(projects)
+    context.dispatch(ADD_CHILD_PROJECTS(projects))
+  }
 
   return {
-    ...selectionList,
     availableProjects,
-    onRenderRow
+    onAddChildProjects
   }
 }

SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/Commands/Commands.module.scss

@@ -0,0 +1,3 @@
+.commands {
+    margin: 20px;
+}