Visuelt løft på dialog for endring av fase (#1289)

SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Footer/index.tsx → SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Actions/index.tsx

@@ -1,14 +1,14 @@
-import { DefaultButton, DialogFooter, PrimaryButton } from '@fluentui/react'
 import * as strings from 'ProjectWebPartsStrings'
 import React, { FC, useContext } from 'react'
-import { DISMISS_CHANGE_PHASE_DIALOG } from '../../..//ProjectPhases/reducer'
-import { ProjectPhasesContext } from '../../../ProjectPhases/context'
+import { DISMISS_CHANGE_PHASE_DIALOG } from '../../reducer'
+import { ProjectPhasesContext } from '../../context'
 import { useChangePhase } from '../../useChangePhase'
 import { View } from '../Views'
 import { ChangePhaseDialogContext } from '../context'
 import { SET_VIEW } from '../reducer'
+import { Button, DialogActions } from '@fluentui/react-components'
 
-export const Footer: FC = () => {
+export const Actions: FC = () => {
   const context = useContext(ProjectPhasesContext)
   const { state, dispatch } = useContext(ChangePhaseDialogContext)
   const onChangePhase = useChangePhase()
@@ -47,14 +47,18 @@ export const Footer: FC = () => {
   }
 
   return (
-    <DialogFooter>
-      <DefaultButton
-        text={strings.CancelText}
+    <DialogActions>
+      <Button
+        title={strings.CancelText}
         onClick={() => context.dispatch(DISMISS_CHANGE_PHASE_DIALOG())}
-      />
+      >
+        {strings.CancelText}
+      </Button>
       {actions.map((buttonProps, index) => (
-        <PrimaryButton key={index} {...buttonProps} />
+        <Button appearance='primary' key={index} {...buttonProps}>
+          {buttonProps.text}
+        </Button>
       ))}
-    </DialogFooter>
+    </DialogActions>
   )
 }

SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/ChangePhaseDialog.module.scss

@@ -1,5 +1,10 @@
-.root {
+.changePhaseDialog {
   width: 550px;
   max-width: 550px;
-  font-weight: 300;
+
+  .dialogContent {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
 }

SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Body/index.tsx → SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Content/index.tsx

@@ -9,7 +9,7 @@ const VIEW_MAP: Record<View, JSX.Element> = {
   [View.Confirm]: null
 }
 
-export const Body: FC = () => {
+export const Content: FC = () => {
   const { state } = useContext(ChangePhaseDialogContext)
   return VIEW_MAP[state.view] ?? null
 }

SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/DynamicHomepageContent/index.tsx

@@ -4,22 +4,20 @@ import { UserMessage } from 'pp365-shared-library/lib/components/UserMessage'
 import * as strings from 'ProjectWebPartsStrings'
 import React, { FC, useContext } from 'react'
 import _ from 'underscore'
-import styles from './DynamicHomepageContent.module.scss'
 
 export const DynamicHomepageContent: FC = () => {
   const context = useContext(ProjectPhasesContext)
   const phaseSitePages = context.state.data.phaseSitePages ?? []
   const phaseSitePage = _.find(phaseSitePages, (p) => p.title === context.state.confirmPhase.name)
   return (
-    <div className={styles.root}>
-      <UserMessage
-        text={
-          phaseSitePage
-            ? format(strings.PhaseSitePageFoundDescription, phaseSitePage?.fileLeafRef)
-            : format(strings.PhaseSitePageNotFoundDescription, context.state.confirmPhase.name)
-        }
-        intent={phaseSitePage ? 'info' : 'warning'}
-      />
-    </div>
+    <UserMessage
+      title={strings.PhaseSitePageTitle}
+      text={
+        phaseSitePage
+          ? format(strings.PhaseSitePageFoundDescription, phaseSitePage?.fileLeafRef)
+          : format(strings.PhaseSitePageNotFoundDescription, context.state.confirmPhase.name)
+      }
+      intent={phaseSitePage ? 'info' : 'warning'}
+    />
   )
 }

SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/ChangingPhaseView/index.tsx

@@ -1,14 +1,18 @@
-import { format, ProgressIndicator } from '@fluentui/react'
+import { format } from '@fluentui/react'
 import { ProjectPhasesContext } from '../../../../ProjectPhases/context'
 import * as strings from 'ProjectWebPartsStrings'
 import React, { FC, useContext } from 'react'
+import { Field, ProgressBar } from '@fluentui/react-components'
 
 export const ChangingPhaseView: FC = () => {
   const context = useContext(ProjectPhasesContext)
   return (
-    <ProgressIndicator
+    <Field
       label={strings.PleaseWaitText}
-      description={format(strings.ChangingPhaseDescription, context.state.confirmPhase.name)}
-    />
+      hint={format(strings.ChangingPhaseDescription, context.state.confirmPhase.name)}
+      validationState='none'
+    >
+      <ProgressBar />
+    </Field>
   )
 }

SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/InitialView.module.scss

@@ -1,14 +1,16 @@
-@import '~@fluentui/react/dist/sass/References.scss';
+@import "~@fluentui/react/dist/sass/References.scss";
 
 .root {
-  .header {
-    @include ms-fontSize-14;
-  }
-  .commentField {
-    margin: 10px 0 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .tabList {
+    display: flex;
+    justify-content: space-between;
 
-    textarea {
-      height: 100px;
+    .tabItem {
+      cursor: default;
     }
   }
 }

SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusActions/StatusActions.module.scss

@@ -0,0 +1,7 @@
+.root {
+  margin: 12px 0;
+
+  .button {
+    font-weight: var(--fontWeightRegular);
+  }
+}

SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusActions/index.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react'
+import { IStatusActionsProps } from './types'
+import styles from './StatusActions.module.scss'
+import { Button } from '@fluentui/react-components'
+
+export const StatusActions: FC<IStatusActionsProps> = ({ actions }) => {
+  return (
+    <div className={styles.root}>
+      {actions.map((action, index) => (
+        <Button
+          className={styles.button}
+          appearance='subtle'
+          title={action.text}
+          key={index}
+          {...action}
+        >
+          {action.text}
+        </Button>
+      ))}
+    </div>
+  )
+}

SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusActions/types.ts

@@ -0,0 +1,3 @@
+export interface IStatusActionsProps {
+  actions: any[]
+}

SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/index.tsx

@@ -1,29 +1,39 @@
-import { TextField } from '@fluentui/react/lib/TextField'
 import * as strings from 'ProjectWebPartsStrings'
 import React, { FC } from 'react'
 import styles from './InitialView.module.scss'
-import { StatusOptions } from './StatusOptions'
 import { useInitialView } from './useInitialView'
+import { Field, Label, Tab, TabList, Textarea } from '@fluentui/react-components'
+import { StatusActions } from './StatusActions'
+import { format } from '@fluentui/react'
 
 export const InitialView: FC = () => {
-  const { checklistItem, setComment, comment, actions } = useInitialView()
+  const { checklistItem, checklistItems, setComment, comment, actions } = useInitialView()
   if (!checklistItem) return null
 
   return (
     <div className={styles.root}>
-      <div className={styles.header}>
-        {checklistItem.id}. {checklistItem.title}
-      </div>
-      <TextField
-        className={styles.commentField}
-        onChange={(_, newValue: string) => setComment(newValue)}
-        placeholder={strings.ChecklistCommentPlaceholder}
-        description={strings.ChecklistCommentDescription}
-        multiline
-        value={comment}
-        resizable={false}
-      />
-      <StatusOptions actions={actions} />
+      <TabList className={styles.tabList} selectedValue={checklistItem.id}>
+        {checklistItems.map((item) => (
+          <Tab
+            className={styles.tabItem}
+            key={item.id}
+            title={format(strings.PhaseCheckListItem, item.id)}
+            value={item.id}
+          >
+            {item.id}
+          </Tab>
+        ))}
+      </TabList>
+      <Label weight='semibold'>{checklistItem.title}</Label>
+      <Field hint={strings.ChecklistCommentDescription}>
+        <Textarea
+          rows={4}
+          value={comment}
+          placeholder={strings.ChecklistCommentPlaceholder}
+          onChange={(_, data) => setComment(data.value)}
+        />
+      </Field>
+      <StatusActions actions={actions} />
     </div>
   )
 }

SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/useActions.ts

@@ -1,5 +1,5 @@
-import { IButtonProps } from '@fluentui/react/lib/Button'
 import { ProjectPhasesContext } from 'components/ProjectPhases/context'
+import { getFluentIcon } from 'pp365-shared-library'
 import * as strings from 'ProjectWebPartsStrings'
 import { useContext } from 'react'
 
@@ -12,15 +12,15 @@ import { useContext } from 'react'
 export function useActions(comment: string, onNextChecklistItem: (statusValue: string) => void) {
   const context = useContext(ProjectPhasesContext)
   const isCommentValid = comment?.length >= context.props.commentMinLength
-  const actions: IButtonProps[] = [
+  const actions = [
     {
       text: strings.StatusNotRelevant,
       disabled: !isCommentValid,
       title: isCommentValid
         ? strings.CheckpointNotRelevantTooltip
         : strings.CheckpointNotRelevantTooltipCommentEmpty,
       onClick: () => onNextChecklistItem(strings.StatusNotRelevant),
-      iconProps: { iconName: 'Blocked' }
+      icon: getFluentIcon('DismissCircle')
     },
     {
       text: strings.StatusStillOpen,
@@ -29,13 +29,13 @@ export function useActions(comment: string, onNextChecklistItem: (statusValue: s
         ? strings.CheckpointStillOpenTooltip
         : strings.CheckpointStillOpenTooltipCommentEmpty,
       onClick: () => onNextChecklistItem(strings.StatusOpen),
-      iconProps: { iconName: 'CircleRing' }
+      icon: getFluentIcon('Circle')
     },
     {
       text: strings.StatusClosed,
       title: strings.CheckpointDoneTooltip,
       onClick: () => onNextChecklistItem(strings.StatusClosed),
-      iconProps: { iconName: 'CheckMark' }
+      icon: getFluentIcon('CheckmarkCircle')
     }
   ]
   return actions

SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/useInitialView.ts

@@ -8,6 +8,7 @@ import { useActions } from './useActions'
 export function useInitialView() {
   const { state } = useContext(ChangePhaseDialogContext)
   const checklistItem = state.checklistItems[state.currentIdx]
+  const checklistItems = state.checklistItems
   const { nextChecklistItem } = useContext(ChangePhaseDialogContext)
   const [comment, setComment] = useState(checklistItem.comment || '')
 
@@ -26,5 +27,5 @@ export function useInitialView() {
 
   const actions = useActions(comment, onNextChecklistItem)
 
-  return { checklistItem, setComment, comment, actions } as const
+  return { checklistItem, checklistItems, setComment, comment, actions } as const
 }