feat: settings tab in sidebar (#2968)

Author: navinkarkera

src/course-outline/data/api.ts

@@ -1,5 +1,6 @@
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { PUBLISH_TYPES } from '@src/course-unit/constants';
 import { XBlock } from '@src/data/types';
 import {
   CourseOutline,
@@ -13,6 +14,10 @@ import {
 
 const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
 
+const pickDefined = <T extends Record<string, any>>(obj: T) => Object.fromEntries(
+  Object.entries(obj).filter(([, value]) => value !== undefined),
+);
+
 export const getCourseOutlineIndexApiUrl = (
   courseId: string,
 ) => `${getApiBaseUrl()}/api/contentstore/v1/course_index/${courseId}`;
@@ -238,49 +243,89 @@ export async function configureCourseSection(variables: ConfigureSectionData): P
 /**
  * Configure course subsection
  */
-export async function configureCourseSubsection(variables: ConfigureSubsectionData): Promise<object> {
+export async function configureCourseSubsection(
+  variables: Partial<ConfigureSubsectionData> & Pick<ConfigureSubsectionData, 'itemId'>,
+): Promise<object> {
+  const {
+    itemId,
+    isVisibleToStaffOnly,
+    dueDate,
+    hideAfterDue,
+    showCorrectness,
+    isPracticeExam,
+    isTimeLimited,
+    isProctoredExam,
+    isOnboardingExam,
+    examReviewRules,
+    defaultTimeLimitMinutes,
+    releaseDate,
+    graderType,
+    isPrereq,
+    prereqUsageKey,
+    prereqMinScore,
+    prereqMinCompletion,
+  } = variables;
+
+  const metadata = pickDefined({
+    visible_to_staff_only: (() => {
+      if (isVisibleToStaffOnly === undefined) {
+        return undefined;
+      }
+      return isVisibleToStaffOnly ? true : null;
+    })(),
+    due: dueDate,
+    hide_after_due: hideAfterDue,
+    show_correctness: showCorrectness,
+    is_practice_exam: isPracticeExam,
+    is_time_limited: isTimeLimited,
+    is_proctored_enabled: (
+      isProctoredExam !== undefined || isPracticeExam !== undefined || isOnboardingExam !== undefined
+    )
+      ? (isProctoredExam || isPracticeExam || isOnboardingExam)
+      : undefined,
+    exam_review_rules: examReviewRules,
+    default_time_limit_minutes: defaultTimeLimitMinutes,
+    is_onboarding_exam: isOnboardingExam,
+    start: releaseDate,
+  });
+
+  const body = pickDefined({
+    publish: 'republish',
+    graderType,
+    isPrereq,
+    prereqUsageKey,
+    prereqMinScore,
+    prereqMinCompletion,
+    metadata,
+  });
+
   const { data } = await getAuthenticatedHttpClient()
-    .post(getCourseItemApiUrl(variables.itemId), {
-      publish: 'republish',
-      graderType: variables.graderType,
-      isPrereq: variables.isPrereq,
-      prereqUsageKey: variables.prereqUsageKey,
-      prereqMinScore: variables.prereqMinScore,
-      prereqMinCompletion: variables.prereqMinCompletion,
-      metadata: {
-        // The backend expects metadata.visible_to_staff_only to either true or null
-        visible_to_staff_only: variables.isVisibleToStaffOnly ? true : null,
-        due: variables.dueDate,
-        hide_after_due: variables.hideAfterDue,
-        show_correctness: variables.showCorrectness,
-        is_practice_exam: variables.isPracticeExam,
-        is_time_limited: variables.isTimeLimited,
-        is_proctored_enabled: variables.isProctoredExam || variables.isPracticeExam || variables.isOnboardingExam,
-        exam_review_rules: variables.examReviewRules,
-        default_time_limit_minutes: variables.defaultTimeLimitMin,
-        is_onboarding_exam: variables.isOnboardingExam,
-        start: variables.releaseDate,
-      },
-    });
+    .post(getCourseItemApiUrl(itemId), body);
+
   return data;
 }
 
 /**
  * Configure course unit
  */
 export async function configureCourseUnit(variables: ConfigureUnitData): Promise<object> {
-  const { data } = await getAuthenticatedHttpClient()
-    .post(getCourseItemApiUrl(variables.unitId), {
-      publish: 'republish',
+  const body = {
+    publish: variables.groupAccess ? null : variables.type,
+    ...(variables.type === PUBLISH_TYPES.republish ? {
       metadata: {
-        // The backend expects metadata.visible_to_staff_only to either true or null
         visible_to_staff_only: variables.isVisibleToStaffOnly ? true : null,
-        group_access: variables.groupAccess,
-        discussion_enabled: variables.discussionEnabled,
+        ...(variables.discussionEnabled !== undefined && {
+          discussion_enabled: variables.discussionEnabled,
+        }),
+        ...(variables.groupAccess != null && { group_access: variables.groupAccess }),
       },
-    });
+    } : {}),
+  };
+  const url = getCourseItemApiUrl(variables.unitId);
+  const { data } = await getAuthenticatedHttpClient()
+    .post(url, body);
 
-  return data;
+  return camelCaseObject(data);
 }
 
 /**

src/course-outline/data/apiHooks.ts

@@ -6,12 +6,15 @@ import {
   ConfigureUnitData,
   StaticFileNotices,
 } from '@src/course-outline/data/types';
-import { useToastContext } from '@src/generic/toast-context';
-import { NOTIFICATION_MESSAGES } from '@src/constants';
+import { getNotificationMessage } from '@src/course-unit/data/utils';
 import { createGlobalState } from '@src/data/apiHooks';
 import type { XBlockBase, XblockChildInfo } from '@src/data/types';
-import { getBlockType, getCourseKey } from '@src/generic/key-utils';
+import {
+  ContainerType, getBlockType, getCourseKey, normalizeContainerType,
+} from '@src/generic/key-utils';
+import { useMutationWithProcessingNotification } from '@src/generic/processing-notification/data/apiHooks';
 import { handleResponseErrors } from '@src/generic/saving-error-alert';
+import { useToastContext } from '@src/generic/toast-context';
 import { ParentIds } from '@src/generic/types';
 import {
   QueryClient,
@@ -85,7 +88,7 @@ export const useScrollState = createGlobalState<ScrollState>(courseOutlineQueryK
  * 1. If sectionId exists, invalidate section data which also updates all children block data
  * 2. Else If subsectionId exists, invalidate subsection data
  */
-const invalidateParentQueries = async (queryClient: QueryClient, variables: ParentIds) => {
+export const invalidateParentQueries = async (queryClient: QueryClient, variables: ParentIds) => {
   if (variables.sectionId) {
     await queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.sectionId) });
   } else if (variables.subsectionId) {
@@ -108,20 +111,12 @@ export const useCreateCourseBlock = (
   courseKey: string,
   callback?: ((locator: string, parentLocator: string) => Promise<void>),
 ) => {
-  const {
-    showToast,
-    closeToast,
-  } = useToastContext();
   const queryClient = useQueryClient();
   const { setData } = useScrollState(courseKey);
   const dispatch = useDispatch();
-  return useMutation({
+  return useMutationWithProcessingNotification({
     mutationFn: (variables: CreateCourseXBlockMutationProps) => createCourseXblock(variables),
-    onMutate: () => {
-      showToast(NOTIFICATION_MESSAGES.saving, undefined, 15000);
-    },
     onSuccess: async (data: { locator: string; }, variables) => {
-      closeToast();
       await callback?.(data.locator, variables.parentLocator);
       queryClient.invalidateQueries({
         queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(data.locator)),
@@ -136,9 +131,6 @@ export const useCreateCourseBlock = (
         dispatch(addSection(newBlock));
       }
     },
-    onError: () => {
-      closeToast();
-    },
   });
 };
 
@@ -198,7 +190,7 @@ export const useCourseDetails = (courseId?: string, enabled: boolean = true) =>
  */
 export const useUpdateCourseBlockName = (courseId: string) => {
   const queryClient = useQueryClient();
-  return useMutation({
+  return useMutationWithProcessingNotification({
     mutationFn: (variables:{
       itemId: string;
       displayName: string;
@@ -213,7 +205,7 @@ export const useUpdateCourseBlockName = (courseId: string) => {
 
 export const usePublishCourseItem = () => {
   const queryClient = useQueryClient();
-  return useMutation({
+  return useMutationWithProcessingNotification({
     mutationFn: (variables:{
       itemId: string;
     } & ParentIds) => publishCourseItem(variables.itemId),
@@ -226,7 +218,7 @@ export const usePublishCourseItem = () => {
 
 export const useDeleteCourseItem = () => {
   const queryClient = useQueryClient();
-  return useMutation({
+  return useMutationWithProcessingNotification({
     mutationFn: (variables:{
       itemId: string;
     } & ParentIds) => deleteCourseItem(variables.itemId),
@@ -239,17 +231,9 @@ export const useDeleteCourseItem = () => {
 
 export const useConfigureSection = () => {
   const queryClient = useQueryClient();
-  const {
-    showToast,
-    closeToast,
-  } = useToastContext();
-  return useMutation({
+  return useMutationWithProcessingNotification({
     mutationFn: (variables: ConfigureSectionData & ParentIds) => configureCourseSection(variables),
-    onMutate: () => {
-      showToast(NOTIFICATION_MESSAGES.saving, undefined, 15000);
-    },
     onSettled: (_data, _err, variables) => {
-      closeToast();
       queryClient.invalidateQueries({
         queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(variables.sectionId)),
       });
@@ -260,58 +244,61 @@ export const useConfigureSection = () => {
 
 export const useConfigureSubsection = () => {
   const queryClient = useQueryClient();
-  const {
-    showToast,
-    closeToast,
-  } = useToastContext();
-  return useMutation({
-    mutationFn: (variables: ConfigureSubsectionData & ParentIds) => configureCourseSubsection(variables),
-    onMutate: () => {
-      showToast(NOTIFICATION_MESSAGES.saving, undefined, 15000);
-    },
-    onSettled: (_data, _err, variables) => {
-      closeToast();
-      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(variables.itemId)) });
+  return useMutationWithProcessingNotification({
+    mutationFn: (
+      variables: Partial<ConfigureSubsectionData> & Pick<ConfigureSubsectionData, 'itemId'> & ParentIds,
+    ) => configureCourseSubsection(variables),
+    onSettled: async (_data, _err, variables) => {
+      const courseKey = getCourseKey(variables.itemId);
+      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(courseKey) });
       invalidateParentQueries(queryClient, variables).catch((e) => handleResponseErrors(e));
+      if (variables.isPrereq !== undefined) {
+        const subsectionItemQueries = queryClient.getQueryCache().findAll({
+          predicate: (query) => {
+            const { queryKey } = query;
+            return Array.isArray(queryKey)
+              && queryKey.length >= 3
+              && queryKey[0] === courseOutlineQueryKeys.all[0]
+              && queryKey[1] === courseKey
+              && typeof queryKey[2] === 'string'
+              && normalizeContainerType(getBlockType(queryKey[2], 'empty')) === ContainerType.Subsection;
+          },
+        });
+        await Promise.all(subsectionItemQueries.map((query) => queryClient.invalidateQueries({
+          queryKey: query.queryKey,
+        })));
+      }
     },
   });
 };
 
 export const useConfigureUnit = () => {
   const queryClient = useQueryClient();
-  const {
-    showToast,
-    closeToast,
-  } = useToastContext();
+  const { showToast, closeToast } = useToastContext();
+  // We are not using useMutationWithProcessingNotification to set custom processing notification message
   return useMutation({
     mutationFn: (variables: ConfigureUnitData & ParentIds) => configureCourseUnit(variables),
-    onMutate: () => {
-      showToast(NOTIFICATION_MESSAGES.saving, undefined, 15000);
+    onMutate: (variables) => {
+      const msg = getNotificationMessage(variables.type, variables.isVisibleToStaffOnly, true);
+      // Show processing notification
+      showToast(msg, undefined, 15000);
     },
     onSettled: (_data, _err, variables) => {
-      closeToast();
       queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(variables.unitId)) });
       invalidateParentQueries(queryClient, variables).catch((e) => handleResponseErrors(e));
+      closeToast();
     },
   });
 };
 
 export const useUpdateCourseSectionHighlights = () => {
-  const {
-    showToast,
-    closeToast,
-  } = useToastContext();
   const queryClient = useQueryClient();
-  return useMutation({
+  return useMutationWithProcessingNotification({
     mutationFn: (variables: {
       sectionId: string;
       highlights: string[];
     } & ParentIds) => updateCourseSectionHighlights(variables.sectionId, variables.highlights),
-    onMutate: () => {
-      showToast(NOTIFICATION_MESSAGES.saving, undefined, 15000);
-    },
     onSettled: (_data, _err, variables) => {
-      closeToast();
       queryClient.invalidateQueries({
         queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(variables.sectionId)),
       });
@@ -321,21 +308,14 @@ export const useUpdateCourseSectionHighlights = () => {
 };
 
 export const useDuplicateItem = (courseKey: string) => {
-  const {
-    showToast,
-    closeToast,
-  } = useToastContext();
   const queryClient = useQueryClient();
   const dispatch = useDispatch();
   const { setData } = useScrollState(courseKey);
-  return useMutation({
+  return useMutationWithProcessingNotification({
     mutationFn: (variables: {
       itemId: string;
       parentId: string;
     } & ParentIds) => duplicateCourseItem(variables.itemId, variables.parentId),
-    onMutate: () => {
-      showToast(NOTIFICATION_MESSAGES.saving, undefined, 15000);
-    },
     onSuccess: async (data, variables) => {
       await invalidateParentQueries(queryClient, variables);
       // add duplicated section to store, subsection and unit are handled by invalidateParentQueries
@@ -346,9 +326,6 @@ export const useDuplicateItem = (courseKey: string) => {
       // scroll to newly added block
       setData({ id: data.locator });
     },
-    onSettled: () => {
-      closeToast();
-    },
   });
 };
 
@@ -362,29 +339,19 @@ export const usePasteFileNotices = createGlobalState<StaticFileNotices>(
 );
 
 export const usePasteItem = (courseId?: string) => {
-  const {
-    showToast,
-    closeToast,
-  } = useToastContext();
   const queryClient = useQueryClient();
   const { setData: setScrollState } = useScrollState(courseId);
   const { setData } = usePasteFileNotices(courseId);
-  return useMutation({
+  return useMutationWithProcessingNotification({
     mutationFn: (variables: {
       parentLocator: string;
     } & ParentIds) => pasteBlock(variables.parentLocator),
-    onMutate: () => {
-      showToast(NOTIFICATION_MESSAGES.saving, undefined, 15000);
-    },
     onSuccess: async (data, variables) => {
       await invalidateParentQueries(queryClient, variables);
       // set pasteFileNotices
       setData(data.staticFileNotices);
       // scroll to pasted block
       setScrollState({ id: data.locator });
     },
-    onSettled: () => {
-      closeToast();
-    },
   });
 };