feat: settings tab in sidebar

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,
@@ -257,7 +258,7 @@ export async function configureCourseSubsection(variables: ConfigureSubsectionDa
         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,
+        default_time_limit_minutes: variables.defaultTimeLimitMinutes,
         is_onboarding_exam: variables.isOnboardingExam,
         start: variables.releaseDate,
       },
@@ -269,18 +270,23 @@ export async function configureCourseSubsection(variables: ConfigureSubsectionDa
  * 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,13 @@ 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 { 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 +86,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 +109,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 +129,6 @@ export const useCreateCourseBlock = (
         dispatch(addSection(newBlock));
       }
     },
-    onError: () => {
-      closeToast();
-    },
   });
 };
 
@@ -198,7 +188,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 +203,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 +216,7 @@ export const usePublishCourseItem = () => {
 
 export const useDeleteCourseItem = () => {
   const queryClient = useQueryClient();
-  return useMutation({
+  return useMutationWithProcessingNotification({
     mutationFn: (variables:{
       itemId: string;
     } & ParentIds) => deleteCourseItem(variables.itemId),
@@ -239,17 +229,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,17 +242,9 @@ export const useConfigureSection = () => {
 
 export const useConfigureSubsection = () => {
   const queryClient = useQueryClient();
-  const {
-    showToast,
-    closeToast,
-  } = useToastContext();
-  return useMutation({
+  return useMutationWithProcessingNotification({
     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)) });
       invalidateParentQueries(queryClient, variables).catch((e) => handleResponseErrors(e));
     },
@@ -279,39 +253,30 @@ export const useConfigureSubsection = () => {
 
 export const useConfigureUnit = () => {
   const queryClient = useQueryClient();
-  const {
-    showToast,
-    closeToast,
-  } = useToastContext();
+  const { showToast, closeToast } = useToastContext();
   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 +286,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 +304,6 @@ export const useDuplicateItem = (courseKey: string) => {
       // scroll to newly added block
       setData({ id: data.locator });
     },
-    onSettled: () => {
-      closeToast();
-    },
   });
 };
 
@@ -362,29 +317,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();
-    },
   });
 };

src/course-outline/data/types.ts

@@ -1,4 +1,5 @@
 import { XBlock, XBlockActions } from '@src/data/types';
+import { PUBLISH_TYPES } from '@src/course-unit/constants';
 
 export interface CourseStructure {
   highlightsEnabledForMessaging: boolean,
@@ -34,6 +35,7 @@ export interface CourseDetails {
   org: string;
   description?: string;
   hasChanges: boolean;
+  selfPaced: boolean;
 }
 
 export interface ChecklistType {
@@ -102,25 +104,26 @@ export interface ConfigureSubsectionData {
   releaseDate: string,
   graderType: string,
   dueDate: string,
-  isTimeLimited: boolean,
-  isProctoredExam: boolean,
-  isOnboardingExam: boolean,
-  isPracticeExam: boolean,
-  examReviewRules: string,
-  defaultTimeLimitMin: number,
-  hideAfterDue: string,
-  showCorrectness: string,
-  isPrereq: boolean,
-  prereqUsageKey: string,
-  prereqMinScore: number,
+  isTimeLimited?: boolean,
+  isProctoredExam?: boolean,
+  isOnboardingExam?: boolean,
+  isPracticeExam?: boolean,
+  examReviewRules?: string,
+  defaultTimeLimitMinutes?: number,
+  hideAfterDue: boolean,
+  showCorrectness: 'always' | 'never' | 'past_due' | 'never_but_include_grade',
+  isPrereq?: boolean,
+  prereqUsageKey?: string,
+  prereqMinScore?: number,
   prereqMinCompletion: number,
 }
 
 export interface ConfigureUnitData {
-  unitId: string,
-  isVisibleToStaffOnly: boolean,
-  groupAccess: object,
-  discussionEnabled: boolean,
+  unitId: string;
+  isVisibleToStaffOnly: boolean;
+  type: typeof PUBLISH_TYPES[keyof typeof PUBLISH_TYPES];
+  groupAccess: Record<string, any> | null,
+  discussionEnabled?: boolean;
 }
 
 export type StaticFileNotices = {