feat(courses): implement course suspension flag

- renamed "suspension_message" to "user_suspension_message"
- reworded / added relevant course settings form elements

Author: adi-herwana-nus

app/controllers/course/admin/admin_controller.rb

@@ -30,12 +30,28 @@ def destroy
     end
   end
 
+  def suspend
+    authorize!(:manage, current_course)
+    current_course.update!(is_suspended: true)
+    true
+  end
+
+  def unsuspend
+    authorize!(:manage, current_course)
+    current_course.update!(is_suspended: false)
+    true
+  end
+
   private
 
   def course_setting_params
     params.require(:course).
-      permit(:title, :description, :published, :enrollable, :enrol_auto_approve, :start_at, :end_at, :logo, :gamified,
-             :show_personalized_timeline_features, :default_timeline_algorithm, :suspension_message,
+      permit(:title, :description,
+             :published, :enrollable, :enrol_auto_approve,
+             :start_at, :end_at,
+             :logo, :gamified,
+             :show_personalized_timeline_features, :default_timeline_algorithm,
+             :user_suspension_message, :course_suspension_message,
              :time_zone, :advance_start_at_duration_days)
   end
 

app/mailers/course/mailer.rb

@@ -134,7 +134,7 @@ def user_suspended_email(course_user)
       @course = course_user.course
     end
     @recipient = course_user.user
-    @suspension_message = @course.suspension_message.presence
+    @user_suspension_message = @course.user_suspension_message.presence
 
     I18n.with_locale(@recipient.locale) do
       mail(to: @recipient.email, subject: t('.subject', course: @course.title))

app/views/course/admin/admin/index.json.jbuilder

@@ -13,4 +13,7 @@ json.defaultTimelineAlgorithm current_course.default_timeline_algorithm
 json.timeZone current_course.time_zone
 json.advanceStartAtDurationDays current_course.advance_start_at_duration_days
 json.canDelete can?(:destroy, current_course)
-json.suspensionMessage current_course.suspension_message unless current_course.suspension_message.blank?
+json.canSuspendCourse can?(:manage, current_course)
+json.userSuspensionMessage current_course.user_suspension_message unless current_course.user_suspension_message.blank?
+json.isSuspended current_course.is_suspended
+json.courseSuspensionMessage current_course.course_suspension_message unless current_course.course_suspension_message.blank?

app/views/course/courses/_course_data.json.jbuilder

@@ -57,4 +57,4 @@ end
 
 is_suspended_user = current_course_user&.is_suspended && cannot?(:manage, current_course)
 json.isSuspendedUser is_suspended_user
-json.suspensionMessage current_course.suspension_message if is_suspended_user
+json.userSuspensionMessage current_course.user_suspension_message if is_suspended_user

app/views/course/mailer/user_suspended_email.html.slim

@@ -1,3 +1,3 @@
 = simple_format(t('.message', course: link_to(@course.title, course_url(@course, host: @course.instance.host)),
                               coursemology: link_to(t('common.mailers.coursemology'), @course.instance.host)))
-= simple_format(@suspension_message || t('.default_suspension_message'))
+= simple_format(@user_suspension_message || t('.default_suspension_message'))

app/views/course/mailer/user_suspended_email.text.erb

@@ -1,4 +1,4 @@
 <%= t('.message', course: plain_link_to(@course.title, course_url(@course, host: @course.instance.host)),
                   coursemology: plain_link_to(t('common.mailers.coursemology'), @course.instance.host)) %>
 
-<%= @suspension_message || t('.default_suspension_message') %>
+<%= @user_suspension_message || t('.default_suspension_message') %>

client/app/api/course/Admin/Course.ts

@@ -34,4 +34,12 @@ export default class CourseAdminAPI extends BaseAdminAPI {
   delete(): Promise<AxiosResponse> {
     return this.client.delete(this.urlPrefix);
   }
+
+  suspend(): Promise<AxiosResponse> {
+    return this.client.patch(`${this.urlPrefix}/suspend`);
+  }
+
+  unsuspend(): Promise<AxiosResponse> {
+    return this.client.patch(`${this.urlPrefix}/unsuspend`);
+  }
 }

client/app/bundles/common/ErrorPage.tsx

@@ -61,10 +61,14 @@ const translations = defineMessages({
       'Graphic of an astronaut floating in space is created by <author>Storyset</author> from ' +
       '<source>www.storyset.com</source>, with modifications.',
   },
-  suspended: {
-    id: 'app.ErrorPage.suspended',
+  userSuspended: {
+    id: 'app.ErrorPage.userSuspended',
     defaultMessage: 'Your access to this course has been suspended.',
   },
+  courseSuspended: {
+    id: 'app.ErrorPage.courseSuspended',
+    defaultMessage: 'This course has been suspended.',
+  },
   error: {
     id: 'app.ErrorPage.error',
     defaultMessage: 'KABOOM, a meteor has just crashed.',
@@ -285,10 +289,10 @@ const SuspendedPage = (): JSX.Element => {
       illustrationAlt="Forbidden illustration"
       illustrationSrc={forbiddenIllustration}
       subtitle={
-        course?.suspensionMessage ?? t(courseTranslations.suspendedSubtitle)
+        course?.userSuspensionMessage ?? t(courseTranslations.suspendedSubtitle)
       }
       tip={sourceURL}
-      title={t(translations.suspended)}
+      title={t(translations.userSuspended)}
     />
   );
 };

client/app/bundles/course/admin/pages/CourseSettings/CourseSettingsForm.tsx

@@ -6,6 +6,7 @@ import { CourseInfo, TimeOffset, TimeZones } from 'types/course/admin/course';
 import { getCourseLogoUrl } from 'course/helper';
 import AvatarSelector from 'lib/components/core/AvatarSelector';
 import RadioButton from 'lib/components/core/buttons/RadioButton';
+import Prompt, { PromptText } from 'lib/components/core/dialogs/Prompt';
 import InfoLabel from 'lib/components/core/InfoLabel';
 import Section from 'lib/components/core/layouts/Section';
 import Subsection from 'lib/components/core/layouts/Subsection';
@@ -28,6 +29,8 @@ interface CourseSettingsFormProps {
   timeZones: TimeZones;
   onSubmit: (data: CourseInfo, timeOffset?: TimeOffset) => void;
   onDeleteCourse: () => void;
+  onSuspendCourse: () => void;
+  onUnsuspendCourse: () => void;
   onUploadCourseLogo: (image: File, onSuccess: () => void) => void;
   disabled: boolean;
 }
@@ -38,11 +41,13 @@ const CourseSettingsForm = forwardRef<
 >((props, ref): JSX.Element => {
   const { t } = useTranslation();
   const [offsetTimesPrompt, setOffsetTimesPrompt] = useState(false);
+  const [suspendingCourse, setSuspendingCourse] = useState(false);
   const [deletingCourse, setDeletingCourse] = useState(false);
   const [stagedLogo, setStagedLogo] = useState<File>();
 
   const closeOffsetTimesPrompt = (): void => setOffsetTimesPrompt(false);
   const closeDeleteCoursePrompt = (): void => setDeletingCourse(false);
+  const closeSuspendingCoursePrompt = (): void => setSuspendingCourse(false);
 
   const timeZonesOptions = useMemo(
     () =>
@@ -327,13 +332,72 @@ const CourseSettingsForm = forwardRef<
           </Section>
 
           <Section sticksToNavbar title={t(translations.suspension)}>
+            {props.data.canSuspendCourse && (
+              <>
+                <Typography variant="body2">
+                  {t(translations.suspendCourseDescription)}
+                </Typography>
+                {!props.data.isSuspended && (
+                  <Button
+                    color="warning"
+                    disabled={props.disabled}
+                    onClick={() => setSuspendingCourse(true)}
+                    variant="outlined"
+                  >
+                    {t(translations.suspendCourse)}
+                  </Button>
+                )}
+                <Prompt
+                  onClickPrimary={() => {
+                    props.onSuspendCourse();
+                    setSuspendingCourse(false);
+                  }}
+                  onClose={closeSuspendingCoursePrompt}
+                  open={suspendingCourse}
+                  primaryColor="warning"
+                  primaryLabel={t(translations.suspendCourse)}
+                >
+                  <PromptText>
+                    {t(translations.suspendCoursePromptText)}
+                  </PromptText>
+                </Prompt>
+                {props.data.isSuspended && (
+                  <Button
+                    color="warning"
+                    disabled={props.disabled}
+                    onClick={props.onUnsuspendCourse}
+                    variant="outlined"
+                  >
+                    {t(translations.unsuspendCourse)}
+                  </Button>
+                )}
+                <Subsection
+                  subtitle={t(translations.courseSuspensionMessageDescription)}
+                  title={t(translations.courseSuspensionMessage)}
+                >
+                  <Controller
+                    control={control}
+                    name="courseSuspensionMessage"
+                    render={({ field, fieldState }): JSX.Element => (
+                      <FormTextField
+                        disabled={props.disabled}
+                        field={field}
+                        fieldState={fieldState}
+                        fullWidth
+                        placeholder={t(courseTranslations.suspendedSubtitle)}
+                      />
+                    )}
+                  />
+                </Subsection>
+              </>
+            )}
             <Subsection
-              subtitle={t(translations.suspensionMessageDescription)}
-              title={t(translations.suspensionMessage)}
+              subtitle={t(translations.userSuspensionMessageDescription)}
+              title={t(translations.userSuspensionMessage)}
             >
               <Controller
                 control={control}
-                name="suspensionMessage"
+                name="userSuspensionMessage"
                 render={({ field, fieldState }): JSX.Element => (
                   <FormTextField
                     disabled={props.disabled}

client/app/bundles/course/admin/pages/CourseSettings/index.tsx

@@ -1,4 +1,5 @@
 import { ComponentRef, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { CourseInfo, TimeOffset, TimeZones } from 'types/course/admin/course';
 
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
@@ -14,6 +15,8 @@ import {
   deleteCourse,
   fetchCourseSettings,
   fetchTimeZones,
+  suspendCourse,
+  unsuspendCourse,
   updateCourseLogo,
   updateCourseSettings,
 } from './operations';
@@ -29,6 +32,8 @@ const CourseSettings = (): JSX.Element => {
   const [reloadForm, setReloadForm] = useState(false);
   const [submitting, setSubmitting] = useState(false);
 
+  const navigate = useNavigate();
+
   const updateForm = (data?: CourseInfo): void => {
     if (!data) return;
     formRef.current?.resetTo?.(data);
@@ -76,15 +81,44 @@ const CourseSettings = (): JSX.Element => {
     deleteCourse()
       .then(() => {
         toast.success(t(translations.deleteCourseSuccess));
-        // TODO: Replace this with useNavigate()('/courses') once SPA
-        window.location.replace('/courses');
+        navigate('/courses');
       })
       .catch(() => {
         toast.error(t(translations.errorOccurredWhenDeletingCourse));
       })
       .finally(() => setSubmitting(false));
   };
 
+  const handleSuspendCourse = (): void => {
+    setSubmitting(true);
+
+    suspendCourse()
+      .then(() => {
+        formRef.current?.resetByMerging?.({ isSuspended: true });
+        toast.success(t(translations.suspendCourseSuccess));
+        setReloadForm((value) => !value);
+      })
+      .catch(() => {
+        toast.error(t(translations.suspendCourseFailure));
+      })
+      .finally(() => setSubmitting(false));
+  };
+
+  const handleUnsuspendCourse = (): void => {
+    setSubmitting(true);
+
+    unsuspendCourse()
+      .then(() => {
+        formRef.current?.resetByMerging?.({ isSuspended: false });
+        toast.success(t(translations.unsuspendCourseSuccess));
+        setReloadForm((value) => !value);
+      })
+      .catch(() => {
+        toast.error(t(translations.unsuspendCourseFailure));
+      })
+      .finally(() => setSubmitting(false));
+  };
+
   return (
     <Preload
       render={<LoadingIndicator />}
@@ -98,6 +132,8 @@ const CourseSettings = (): JSX.Element => {
           disabled={submitting}
           onDeleteCourse={handleDeleteCourse}
           onSubmit={handleSubmit}
+          onSuspendCourse={handleSuspendCourse}
+          onUnsuspendCourse={handleUnsuspendCourse}
           onUploadCourseLogo={handleUploadCourseLogo}
           timeZones={timeZones}
         />