feat(courses): added alert on dashboard for suspended courses

Author: adi-herwana-nus

app/models/components/course/course_ability_component.rb

@@ -35,7 +35,7 @@ def allow_unregistered_users_registering_courses
   end
 
   def allow_registered_users_showing_course
-    can :read, Course, id: course.id unless course_user.is_suspended || course.is_suspended
+    can :read, Course, id: course.id unless course_user.is_suspended || (course.is_suspended && course_user.student?)
   end
 
   def allow_staff_show_course_users

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

@@ -13,7 +13,6 @@ 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.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,6 +57,7 @@ if can?(:manage, current_course) || (current_course.user?(current_user) && !is_s
 end
 
 json.isSuspended current_course.is_suspended
+json.canSuspendCourse can?(:manage, current_course)
 json.isSuspendedUser is_suspended_user
 json.courseSuspensionMessage current_course.course_suspension_message if current_course.is_suspended
 json.userSuspensionMessage current_course.user_suspension_message if is_suspended_user

client/app/bundles/common/ErrorPage.tsx

@@ -67,7 +67,7 @@ const translations = defineMessages({
   },
   courseSuspended: {
     id: 'app.ErrorPage.courseSuspended',
-    defaultMessage: 'This course has been suspended.',
+    defaultMessage: 'This course is suspended.',
   },
   error: {
     id: 'app.ErrorPage.error',

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

@@ -3,6 +3,7 @@ import { Controller } from 'react-hook-form';
 import { Button, Grid, RadioGroup, Typography } from '@mui/material';
 import { CourseInfo, TimeOffset, TimeZones } from 'types/course/admin/course';
 
+import CourseSuspendedAlert from 'course/courses/components/misc/CourseSuspendedAlert';
 import { getCourseLogoUrl } from 'course/helper';
 import AvatarSelector from 'lib/components/core/AvatarSelector';
 import RadioButton from 'lib/components/core/buttons/RadioButton';
@@ -332,65 +333,62 @@ 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"
+            <Typography variant="body2">
+              {t(translations.suspendCourseDescription)}
+            </Typography>
+            {props.data.isSuspended && (
+              <CourseSuspendedAlert canSuspendCourse />
+            )}
+            {!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}
-                    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)}
-                      />
-                    )}
+                    field={field}
+                    fieldState={fieldState}
+                    fullWidth
+                    placeholder={t(courseTranslations.suspendedSubtitle)}
                   />
-                </Subsection>
-              </>
-            )}
+                )}
+              />
+            </Subsection>
             <Subsection
               subtitle={t(translations.userSuspensionMessageDescription)}
               title={t(translations.userSuspensionMessage)}

client/app/bundles/course/admin/pages/CourseSettings/translations.ts

@@ -263,7 +263,7 @@ export default defineMessages({
   userSuspensionMessageDescription: {
     id: 'course.admin.CourseSettings.userSuspensionMessageDescription',
     defaultMessage:
-      'This message will be shown to users whose access to this course has been suspended. Leave blank to show a default message.',
+      'This message will be shown to individual users whose access to this course has been suspended. Leave blank to show a default message.',
   },
   deleteCoursePromptAction: {
     id: 'course.admin.CourseSettingst.deleteCoursePromptAction',

client/app/bundles/course/courses/components/misc/CourseSuspendedAlert.tsx

@@ -0,0 +1,59 @@
+import { FC } from 'react';
+import { defineMessages } from 'react-intl';
+import { Alert, Typography } from '@mui/material';
+
+import { getComponentTitle } from 'course/translations';
+import Link from 'lib/components/core/Link';
+import { getCourseId } from 'lib/helpers/url-helpers';
+import useTranslation from 'lib/hooks/useTranslation';
+
+const translations = defineMessages({
+  header: {
+    id: 'course.courses.CourseSuspendedAlert.header',
+    defaultMessage:
+      'This course is suspended. Instructors can still access it, but students cannot.',
+  },
+  canSuspendMessage: {
+    id: 'course.courses.CourseSuspendedAlert.canSuspendMessage',
+    defaultMessage: 'You can unsuspend it from the {link} page.',
+  },
+  cannotSuspendMessage: {
+    id: 'course.courses.CourseSuspendedAlert.cannotSuspendMessage',
+    defaultMessage:
+      'If you believe this is a mistake, contact a course manager or owner to have them unsuspend the course.',
+  },
+});
+
+const CourseSuspendedAlert: FC<{
+  canSuspendCourse: boolean;
+  linkToSettings?: boolean;
+}> = ({ canSuspendCourse, linkToSettings }) => {
+  const { t } = useTranslation();
+  return (
+    <Alert severity="warning">
+      <Typography variant="body2">{t(translations.header)}</Typography>
+      {canSuspendCourse && linkToSettings && (
+        <Typography variant="body2">
+          {t(translations.canSuspendMessage, {
+            link: (
+              <Link
+                opensInNewTab
+                to={`/courses/${getCourseId()}/admin`}
+                underline="hover"
+              >
+                {getComponentTitle(t, 'admin_settings')}
+              </Link>
+            ),
+          })}
+        </Typography>
+      )}
+      {!canSuspendCourse && (
+        <Typography variant="body2">
+          {t(translations.cannotSuspendMessage)}
+        </Typography>
+      )}
+    </Alert>
+  );
+};
+
+export default CourseSuspendedAlert;

client/app/bundles/course/courses/pages/CourseShow/index.tsx

@@ -16,6 +16,7 @@ import courseTranslations from 'lib/translations/course';
 import CourseAnnouncements from '../../components/misc/CourseAnnouncements';
 import CourseEnrolOptions from '../../components/misc/CourseEnrolOptions';
 import CourseNotifications from '../../components/misc/CourseNotifications';
+import CourseSuspendedAlert from '../../components/misc/CourseSuspendedAlert';
 import PendingTodosTable from '../../components/tables/PendingTodosTable';
 import { loadCourse } from '../../operations';
 import { getCourseEntity } from '../../selectors';
@@ -72,6 +73,12 @@ const CourseShow: FC = () => {
 
   return (
     <Page className="space-y-5">
+      {course.isSuspended && (
+        <CourseSuspendedAlert
+          canSuspendCourse={course.canSuspendCourse}
+          linkToSettings
+        />
+      )}
       {!course.permissions.isCurrentCourseUser && (
         <>
           {getShouldShowEnrolOptions(course) && (

client/app/types/course/admin/course.ts

@@ -13,7 +13,6 @@ export interface CourseInfo {
   timeZone: string;
   advanceStartAtDurationDays: number;
   canDelete: boolean;
-  canSuspendCourse: boolean;
   userSuspensionMessage?: string;
   isSuspended: boolean;
   courseSuspensionMessage?: string;

client/app/types/course/courses.ts

@@ -76,6 +76,7 @@ export interface CourseEntity extends CourseMiniEntity {
   userSuspensionMessage?: string;
   isSuspended: boolean;
   courseSuspensionMessage?: string;
+  canSuspendCourse: boolean;
 }
 
 export interface NewCourseFormData {