Handling failed post delete service calls

client/src/Core/Components/AssignmentUpdateFailureMessageBar.tsx

@@ -0,0 +1,92 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License.
+ *--------------------------------------------------------------------------------------------*/
+
+import { AnimationClassNames, IMessageBarStyles, MessageBar, MessageBarType, styled } from '@fluentui/react';
+import { useObserver } from 'mobx-react-lite';
+import React from 'react';
+import { useStore } from '../../Stores/Core';
+import { ServiceError } from '../Utils/Axios/ServiceError';
+import { themedClassNames } from '../Utils/FluentUI';
+import { IStylesOnly, IThemeOnlyProps } from '../Utils/FluentUI/typings.fluent-ui';
+
+type Store = 'assignment' | 'links' | 'learn-content';
+
+const getErrorMessage = (stores: Store[], error: ServiceError | null) => {
+  if (error === null) {
+    return undefined;
+  }
+
+  const getStoreSpecificMessage = (store: Store) => {
+    switch (store) {
+      case 'links': return 'links';
+      case 'learn-content': return 'Microsoft Learn content';
+      case 'assignment': return 'description and deadline';
+    }
+  };
+
+  let storesWithError = stores.map(store => getStoreSpecificMessage(store)).join(', ');
+  let message = `Sorry! An error was encountered, and we could not sync the assignment's ${storesWithError} properly. Head to the Preview page to see the saved state of the assignment. `;
+
+  switch (error) {
+    case 'unauthorized':
+      return message + 'It seems like you do not have sufficient permissions to perform this action.';
+    case 'not found':
+      return message + 'We could not find what you were looking for. Please contact the server administrator or a teacher.'
+    case 'bad request':
+      return message + 'The server could not process your request.';
+    case 'internal error':
+    case 'other':
+      return message + 'The server encountered an internal error and was unable to complete your request. Please contact the server administrator.'
+  }
+};
+
+const AssignmentUpdateFailureMessageBarInner = ({ styles }: IStylesOnly<IMessageBarStyles>): JSX.Element | null => {
+  const assignmentStore = useStore('assignmentStore');
+  const assignmentLinksStore = useStore('assignmentLinksStore');
+  const learnStore = useStore('microsoftLearnStore');
+  const classes = themedClassNames(styles);
+
+  return useObserver(() => {
+    const learnStoreError = learnStore.itemsInErrorState.length !== 0 && !learnStore.serviceCallsInProgress && learnStore.hasServiceError ? learnStore.hasServiceError : null;
+    const linkStoreError = !assignmentLinksStore.isSynced && assignmentLinksStore.serviceCallInProgress === 0 && assignmentLinksStore.hasServiceError ? assignmentLinksStore.hasServiceError : null;
+    const assignmentError = !assignmentStore.isSynced && assignmentStore.serviceCallInProgress === 0 && assignmentStore.hasServiceError ? assignmentStore.hasServiceError : null;
+
+    let errorMessageMap: Map<ServiceError, Store[]> = new Map<ServiceError, Store[]>();
+
+    const getExistingStoresErrorMap = (err: ServiceError): Store[] => errorMessageMap.get(err) || [];
+
+    if (linkStoreError) {
+      errorMessageMap.set(linkStoreError, [...getExistingStoresErrorMap(linkStoreError), 'links']);
+    }
+    if (learnStoreError) {
+      errorMessageMap.set(learnStoreError, [...getExistingStoresErrorMap(learnStoreError), 'learn-content']);
+    }
+    if (assignmentError) {
+      errorMessageMap.set(assignmentError, [...getExistingStoresErrorMap(assignmentError), 'assignment']);
+    }
+
+    if (learnStoreError || linkStoreError || assignmentError) {
+      return (
+        <>
+          {[...errorMessageMap].map(([serviceError, stores]) => {
+            return (
+              <MessageBar messageBarType={MessageBarType.warning} isMultiline={true} className={classes.root}>
+                {getErrorMessage(stores, serviceError)}
+              </MessageBar>
+            );
+          })}
+        </>
+      );
+    } else {
+      return null;
+    }
+  });
+};
+
+const assignmentUpdateFailureMessageBarStyles = ({ theme }: IThemeOnlyProps): Partial<IMessageBarStyles> => ({
+  root: [AnimationClassNames.fadeIn500]
+});
+
+export const AssignmentUpdateFailureMessageBar = styled(AssignmentUpdateFailureMessageBarInner, assignmentUpdateFailureMessageBarStyles);

client/src/Core/Components/MainLayout.tsx

@@ -17,6 +17,7 @@ import learnLogo from '../../Assets/icon_learn_062020.png';
 import { useQueryValue } from '../Hooks';
 import { ErrorPage } from './ErrorsPage';
 import { NavigationControlHeader } from './NavigationControlHeader';
+import { AssignmentUpdateFailureMessageBar } from './AssignmentUpdateFailureMessageBar';
 
 type MainLayoutStyles = SimpleComponentStyles<'root' | 'spinner' | 'content'>;
 
@@ -52,11 +53,15 @@ const MainLayoutInner = ({ styles }: IStylesOnly<MainLayoutStyles>): JSX.Element
         <div className={classes.content}>
           {usersStore.userDetails.role === 'teacher' && !asStudent ? (
             <>
+              <AssignmentUpdateFailureMessageBar/>
               <NavigationControlHeader/>
               <PagesRouter />
             </>
           ) : (
-            <StudentPage />
+            <>
+              <AssignmentUpdateFailureMessageBar/>
+              <StudentPage />
+            </>
           )}
         </div>
       )}

client/src/Core/Components/NavigationControlHeader.tsx

@@ -3,50 +3,97 @@
  *  Licensed under the MIT License.
  *--------------------------------------------------------------------------------------------*/
 
-import { FontSizes, FontWeights, mergeStyles, styled } from '@fluentui/react';
+import { SpinnerSize } from '@fluentui/react';
+import { Spinner } from '@fluentui/react';
+import { FontSizes, FontWeights, mergeStyles, MessageBarType, styled } from '@fluentui/react';
 import { useObserver } from 'mobx-react-lite';
 import React from 'react';
 import { PublishControlArea } from '../../Features/PublishAssignment/PublishControlArea';
-import { PublishSuccessMessageBar } from '../../Features/PublishAssignment/PublishSuccessMessageBar';
+import {
+  PublishSuccessMessageBar,
+  PublishSuccessMessageBarProps
+} from '../../Features/PublishAssignment/PublishSuccessMessageBar';
 import { useStore } from '../../Stores/Core';
 import { themedClassNames } from '../Utils/FluentUI';
 import { IStylesOnly, IThemeOnlyProps, SimpleComponentStyles } from '../Utils/FluentUI/typings.fluent-ui';
 import { stickyHeaderStyle } from './Common/StickyHeaderStyle';
 import * as NavBarBase from './Navbar';
 
-type NavigationControlHeaderStyles = SimpleComponentStyles<'assignmentTitle' | 'navAndControlArea'>;
+type NavigationControlHeaderStyles = SimpleComponentStyles<'assignmentTitle' | 'navAndControlArea' | 'header'>;
 
 function NavigationControlHeaderInner({ styles }: IStylesOnly<NavigationControlHeaderStyles>): JSX.Element {
   const assignmentStore = useStore('assignmentStore');
+  const assignmentLinksStore = useStore('assignmentLinksStore');
+  const learnStore = useStore('microsoftLearnStore');
   const classes = themedClassNames(styles);
-  return useObserver(() => (
-    <>
-      <span className={classes.assignmentTitle}>{assignmentStore.assignment?.name}</span>
-      <div className={classes.navAndControlArea}>
-        <NavBarBase.NavbarTop />
-        <PublishControlArea />
-      </div>
-      <PublishSuccessMessageBar
-        isPublished={
-          assignmentStore.assignment?.publishStatus === 'Published' && assignmentStore.isChangingPublishState === false
-        }
-      />
-    </>
-  ));
+
+  return useObserver(() => {
+    const learnStoreCallsInProgress =
+      !learnStore.isLoadingCatalog &&
+      (learnStore.serviceCallsInProgress || learnStore.clearCallInProgress || learnStore.clearCallsToMake)
+        ? 1
+        : 0;
+    const isCallInProgress =
+      learnStoreCallsInProgress + assignmentLinksStore.serviceCallInProgress + assignmentStore.serviceCallInProgress > 0;
+    const publishStatusMessageBarProps: PublishSuccessMessageBarProps =
+      assignmentStore.pushlishStatusChangeError === 'unauthorized'
+        ? {
+            messageBarType: MessageBarType.error,
+            message: 'Sorry, but it seems like you do not have sufficient permissions to perform this action.',
+            showMessage: assignmentStore.pushlishStatusChangeError === 'unauthorized'
+          }
+        : assignmentStore.pushlishStatusChangeError !== null
+        ? {
+            messageBarType: MessageBarType.error,
+            message:
+              assignmentStore.assignment?.publishStatus !== 'Published'
+                ? 'Something went wrong! Could not publish the assignment'
+                : 'Something went wrong! Could not switch to edit mode',
+            showMessage: assignmentStore.pushlishStatusChangeError !== null
+          }
+        : {
+            messageBarType: MessageBarType.success,
+            message: 'Your assignment was published successfully',
+            showMessage:
+              assignmentStore.assignment?.publishStatus === 'Published' &&
+              assignmentStore.isChangingPublishState === false
+          };
+
+    return (
+      <>
+        <div className={classes.header}>
+          <span className={classes.assignmentTitle}>{assignmentStore.assignment?.name}</span>
+          {isCallInProgress && <Spinner label="Updating..." labelPosition="left" size={SpinnerSize.small}/>}
+        </div>
+        <div className={classes.navAndControlArea}>
+          <NavBarBase.NavbarTop />
+          <PublishControlArea />
+        </div>
+        <PublishSuccessMessageBar {...publishStatusMessageBarProps} />
+      </>
+    );
+  });
 }
 
 const navigationControlHeaderStyle = ({ theme }: IThemeOnlyProps): NavigationControlHeaderStyles => {
   return {
+    header: [
+      {
+        display: 'flex',
+        justifyContent: 'space-between',
+        paddingRight: `calc(${theme.spacing.l1} * 1.6)`,
+        paddingLeft: `calc(${theme.spacing.l1} * 1.6)`,
+        paddingBottom: `calc(${theme.spacing.l1} * 0.5)`,
+        paddingTop: `calc(${theme.spacing.l1} * 1.5)`
+      }
+    ],
     assignmentTitle: [
       {
         fontSize: FontSizes.xLargePlus,
         fontWeight: FontWeights.semibold,
         color: theme.palette.neutralPrimary,
         backgroundColor: theme.palette.neutralLighterAlt,
         lineHeight: FontSizes.xxLarge,
-        paddingLeft: `calc(${theme.spacing.l1} * 1.6)`,
-        paddingBottom: `calc(${theme.spacing.l1} * 0.5)`,
-        paddingTop: `calc(${theme.spacing.l1} * 1.5)`
       }
     ],
 

client/src/Core/Utils/Axios/ServiceError.ts

@@ -3,4 +3,4 @@
  *  Licensed under the MIT License.
  *--------------------------------------------------------------------------------------------*/
 
-export type ServiceError = 'unauthorized' | 'internal error' | 'other' | 'not found';
+export type ServiceError = 'unauthorized' | 'internal error' | 'other' | 'not found' | 'bad request';

client/src/Core/Utils/Axios/safeData.ts

@@ -9,7 +9,8 @@ import { ServiceError } from './ServiceError';
 const errorNumberToEnumMap: Map<number, ServiceError> = new Map<number, ServiceError>([
   [500, 'internal error'],
   [401, 'unauthorized'],
-  [404, 'not found']
+  [404, 'not found'],
+  [400, 'bad request']
 ]);
 
 export type WithError<T> = T & { error?: ServiceError };

client/src/Dtos/Assignment.dto.ts

@@ -7,7 +7,7 @@ import { PlatformPersonalizationDto } from './PlatformPersonalization.dto';
 
 export interface AssignmentDto {
   id: string;
-  deadline: Date;
+  deadline: Date | null;
   courseName: string;
   name: string;
   description: string;

client/src/Features/AssignmentLinks/AssignmentLinkDisplayItemActionArea.tsx

@@ -20,6 +20,7 @@ import { themedClassNames } from '../../Core/Utils/FluentUI';
 import { useStore } from '../../Stores/Core';
 import { AssignmentLink } from '../../Models/AssignmentLink.model';
 import { commonDialogContentProps, DIALOG_MIN_WIDTH } from '../../Core/Components/Common/Dialog/EdnaDialogStyles';
+import { useObserver } from 'mobx-react-lite';
 
 interface AssignmentLinkDisplayItemActionAreaProps {
   toggleEditMode: () => void;
@@ -42,10 +43,18 @@ const AssignmentLinkDisplayItemActionAreaInner = ({
     title: 'Delete Link'
   };
 
-  return (
+  return useObserver(() => (
     <div className={classes.root}>
-      <IconButton iconProps={{ iconName: 'Edit' }} onClick={toggleEditMode} />
-      <IconButton iconProps={{ iconName: 'Delete' }} onClick={() => setIsDialogOpen(true)}>
+      <IconButton 
+        iconProps={{ iconName: 'Edit' }}
+        onClick={toggleEditMode} 
+        disabled={assignmentLinksStore.addOrUpdateCallInProgress.includes(link.id)}
+      />
+      <IconButton 
+        iconProps={{ iconName: 'Delete' }} 
+        onClick={() => setIsDialogOpen(true)}
+        disabled={assignmentLinksStore.addOrUpdateCallInProgress.includes(link.id)}
+      >
         <Dialog
           hidden={!isDialogOpen}
           onDismiss={() => setIsDialogOpen(false)}
@@ -64,7 +73,7 @@ const AssignmentLinkDisplayItemActionAreaInner = ({
         </Dialog>
       </IconButton>
     </div>
-  );
+  ))
 };
 
 const assignmentLinkDisplayItemActionAreaStyles = ({

client/src/Features/AssignmentLinks/AssignmentLinksList.tsx

@@ -14,6 +14,7 @@ import { AssignmentLinkItemShimmer } from './AssignmentLinkItemShimmer';
 
 interface AssignmentLinksListProps {
   disableEdit?: boolean;
+  showSynced?: boolean;
 }
 export type AssignmentLinksListStyles = SimpleComponentStyles<'root' | 'itemsDividerSeparator'>;
 type AssignmentLinksListStylesProps = {
@@ -22,10 +23,13 @@ type AssignmentLinksListStylesProps = {
 
 const AssignmentLinksListInner = ({
   styles,
-  disableEdit
+  disableEdit,
+  showSynced
 }: AssignmentLinksListProps & IStylesOnly<AssignmentLinksListStyles>): JSX.Element => {
   const assignmentLinksStore = useStore('assignmentLinksStore');
 
+  const assignmentLinksToDisplay = showSynced? assignmentLinksStore.syncedAssignmentLinks : assignmentLinksStore.assignmentLinks;
+
   const classes = themedClassNames(styles);
 
   return useObserver(() => {
@@ -35,7 +39,7 @@ const AssignmentLinksListInner = ({
           <AssignmentLinkItemShimmer />
         ) : (
           <>
-            {assignmentLinksStore.assignmentLinks.map((link, index) => (
+            { assignmentLinksToDisplay.map((link, index) => (
               <React.Fragment key={link.id}>
                 {index !== 0 && <Separator className={classes.itemsDividerSeparator} />}
                 <AssignmentLinkItem link={link} disableEdit={disableEdit} />

client/src/Features/GeneralPage/DeadlineInput.tsx

@@ -12,6 +12,7 @@ import { InputGroupWrapper } from '../../Core/Components/Common/InputGroupWrappe
 import { generalPageInputGroupChildrenStyleProps } from './GeneralPageStyles';
 import { datePickerBaseStyle } from '../../Core/Components/Common/Inputs/EdnaInputStyles';
 import { useStore } from '../../Stores/Core';
+import { useObserver } from 'mobx-react-lite';
 
 type DeadlineInputStyles = Partial<IDatePickerStyles>;
 
@@ -31,7 +32,7 @@ const DeadlineInputInner = ({ styles }: IStylesOnly<DeadlineInputStyles>): JSX.E
   const formatDate = (chosenDate?: Date): string => {
     return chosenDate ? moment(chosenDate).format('MMM DD YYYY') : '';
   };
-  return (
+  return useObserver(() => (
     <InputGroupWrapper styles={generalPageInputGroupChildrenStyleProps} label="Deadline">
       <DatePicker
         styles={combinedStyles}
@@ -43,7 +44,7 @@ const DeadlineInputInner = ({ styles }: IStylesOnly<DeadlineInputStyles>): JSX.E
         value={deadline || undefined}
       />
     </InputGroupWrapper>
-  );
+  ));
 };
 
 const deadlineInputStyles = ({ theme }: IThemeOnlyProps): DeadlineInputStyles => ({

client/src/Features/GeneralPage/DescriptionInput.tsx

@@ -11,6 +11,7 @@ import { generalPageInputGroupChildrenStyleProps } from './GeneralPageStyles';
 import { themedClassNames } from '../../Core/Utils/FluentUI';
 import { textFieldBaseStyle } from '../../Core/Components/Common/Inputs/EdnaInputStyles';
 import { useStore } from '../../Stores/Core';
+import { useObserver } from 'mobx-react-lite';
 
 type DescriptionInputStyles = Partial<ITextFieldStyles>;
 const DescriptionInputInner = ({ styles }: IStylesOnly<DescriptionInputStyles>): JSX.Element => {
@@ -21,7 +22,7 @@ const DescriptionInputInner = ({ styles }: IStylesOnly<DescriptionInputStyles>):
 
   const combinedStyles = mergeStyleSets(themedClassNames(textFieldBaseStyle), themedClassNames(styles));
 
-  return (
+  return useObserver(() => (
     <InputGroupWrapper
       label="Description"
       labelElementId={descriptionFieldId}
@@ -38,7 +39,7 @@ const DescriptionInputInner = ({ styles }: IStylesOnly<DescriptionInputStyles>):
         onChange={(_e, newValue) => setDescription(newValue || '')}
       />
     </InputGroupWrapper>
-  );
+  ));
 };
 
 const descriptionInputStyles = ({ theme }: IThemeOnlyProps): DescriptionInputStyles => ({

client/src/Features/MicrosoftLearn/MicrosoftLearnItem.tsx

@@ -86,7 +86,8 @@ const MicrosoftLearnItemInner = ({
   );
 
   return useObserver(() => {
-    const isSelected = !!learnStore.selectedItems?.find(selectedItem => selectedItem.contentUid === item.uid);
+    const selectedItems = [...learnStore.contentSelectionMap].filter(item => item[1].userState==='selected');
+    const isSelected = !!selectedItems?.find(selectedItem => selectedItem[0] === item.uid);
     const classNames = classNamesFunction<MicrosoftLearnItemStylesProps, MicrosoftLearnItemStyles>()(styles, {
       theme: getTheme(),
       productDetails: productCatalogDetails,