fix(website/ta): Hide TA button for non TA-able mods (#3932)

Co-authored-by: Zhao Wei Liew <[email protected]>

Author: leslieyip02

website/src/__mocks__/modules/CP3880.json

@@ -0,0 +1,67 @@
+{
+  "acadYear": "2024/2025",
+  "preclusion": "If undertaking an Undergraduate Degree THEN ( must not have completed EG3601 at a grade of at least D)",
+  "preclusionRule": "PROGRAM_TYPES IF_IN Undergraduate Degree THEN (COURSES (1) EG3601:D)",
+  "description": "This course enables students to apply the computing knowledge they have assimilated in class to industrial projects through six-month attachment to companies/organizations. Students under attachment will be jointly guided by supervisors from both the companies/organizations and the school. Their progress on projects will be monitored during attachment, and their performance will be assessed (on Satisfactory/Unsatisfactory (S/U) basis) at the end of the attachment, based on the interim and final project reports. During the attachment, students are not expected to take other courses offered by the university.",
+  "title": "Advanced Technology Attachment Programme",
+  "additionalInformation": "",
+  "department": "SoC Dean's Office",
+  "faculty": "Computing",
+  "workload": [0, 0, 0, 30, 0],
+  "gradingBasisDescription": "Completed Satisfactory/Unsatisfactory",
+  "prerequisite": "If undertaking an Undergraduate Degree THEN ( must have completed 1 of any Courses (Modules) beginning with UTW1001 at a grade of at least D, CS2101/ES1601/ES2002/ES2007D/ES2531/ES2631/IS2101/NTW2017/NTW2028/NTW2029/NTW2030/NTW2031/NTW2032/NTW2033/NTW2034/UWC2101% at a grade of at least D AND must have completed 1 of BT3103/CS2103/CS2103T/CS2113/CS2113T/IS3106 at a grade of at least D)",
+  "prerequisiteRule": "PROGRAM_TYPES IF_IN Undergraduate Degree THEN (COURSES (1) IS2101:D, CS2101:D, ES1601:D, ES2002:D, ES2007D:D, ES2531:D, ES2631:D, UTW1001%:D, UWC2101%:D, NTW2017:D, NTW2028:D, NTW2029:D, NTW2030:D, NTW2031:D, NTW2032:D, NTW2033:D, NTW2034:D AND COURSES (1) CS2103:D, CS2103T:D, CS2113:D, CS2113T:D, IS3106:D, BT3103:D)",
+  "moduleCredit": "12",
+  "moduleCode": "CP3880",
+  "semesterData": [
+    {
+      "semester": 1,
+      "timetable": [],
+      "covidZones": []
+    },
+    {
+      "semester": 2,
+      "timetable": [],
+      "covidZones": []
+    },
+    {
+      "semester": 3,
+      "timetable": [],
+      "covidZones": []
+    },
+    {
+      "semester": 4,
+      "timetable": [],
+      "covidZones": []
+    }
+  ],
+  "prereqTree": {
+    "and": [
+      {
+        "or": [
+          "IS2101:D",
+          "CS2101:D",
+          "ES1601:D",
+          "ES2002:D",
+          "ES2007D:D",
+          "ES2531:D",
+          "ES2631:D",
+          "UTW1001%:D",
+          "UWC2101%:D",
+          "NTW2017:D",
+          "NTW2028:D",
+          "NTW2029:D",
+          "NTW2030:D",
+          "NTW2031:D",
+          "NTW2032:D",
+          "NTW2033:D",
+          "NTW2034:D"
+        ]
+      },
+      {
+        "or": ["CS2103:D", "CS2103T:D", "CS2113:D", "CS2113T:D", "IS3106:D", "BT3103:D"]
+      }
+    ]
+  },
+  "fulfillRequirements": ["IFS4201"]
+}

website/src/__mocks__/modules/index.ts

@@ -2,6 +2,7 @@ import type { Module } from 'types/modules';
 
 import ACC2002_JSON from './ACC2002.json';
 import BFS1001_JSON from './BFS1001.json';
+import CP3880_JSON from './CP3880.json';
 import CS1010A_JSON from './CS1010A.json';
 import CS1010S_JSON from './CS1010S.json';
 import CS3216_JSON from './CS3216.json';
@@ -12,14 +13,15 @@ import PC1222_JSON from './PC1222.json';
 // Have to cast these as Module explicitly, otherwise TS will try to
 // incorrectly infer the shape from the JSON - specifically Weeks will
 // not be cast correctly
-export const CS1010S: Module = { ...CS1010S_JSON, timestamp: 1572843950000 };
 export const ACC2002: Module = { ...ACC2002_JSON, timestamp: 1572843950000 };
 export const BFS1001: Module = { ...BFS1001_JSON, timestamp: 1572843950000 };
+export const CP3880: Module = { ...CP3880_JSON, timestamp: 1572843950000 };
+export const CS1010A: Module = { ...CS1010A_JSON, timestamp: 1572843950000 };
+export const CS1010S: Module = { ...CS1010S_JSON, timestamp: 1572843950000 };
 export const CS3216: Module = { ...CS3216_JSON, timestamp: 1572843950000 };
+export const CS4243: Module = { ...CS4243_JSON, timestamp: 1572843950000 };
 export const GES1021: Module = { ...GES1021_JSON, timestamp: 1572843950000 };
 export const PC1222: Module = { ...PC1222_JSON, timestamp: 1572843950000 };
-export const CS4243: Module = { ...CS4243_JSON, timestamp: 1572843950000 };
-export const CS1010A: Module = { ...CS1010A_JSON, timestamp: 1572843950000 };
 
 const modules: Module[] = [ACC2002, BFS1001, CS1010S, CS3216, GES1021, PC1222, CS1010A];
 export default modules;

website/src/test-utils/theme.ts

@@ -16,11 +16,13 @@ export function addColors(
   modules: Module[],
   isHiddenInTimetable = false,
   isTaInTimetable = false,
+  canTa = false,
 ): ModuleWithColor[] {
   return modules.map((module, index) => ({
     ...module,
     colorIndex: index,
     isHiddenInTimetable,
     isTaInTimetable,
+    canTa,
   }));
 }

website/src/types/views.ts

@@ -55,6 +55,7 @@ export type ModuleWithColor = Module & {
   colorIndex: ColorIndex;
   isHiddenInTimetable: boolean;
   isTaInTimetable: boolean;
+  canTa: boolean;
 };
 
 export type TombstoneModule = ModuleWithColor & {

website/src/utils/modules.test.ts

@@ -16,11 +16,12 @@ import {
   isGraduateModule,
   renderExamDuration,
   getExamDuration,
+  canTa,
 } from 'utils/modules';
 import { noBreak } from 'utils/react';
 
 import { EVERY_WEEK } from 'test-utils/timetable';
-import { CS1010S, CS3216 } from '__mocks__/modules';
+import { CP3880, CS1010S, CS3216 } from '__mocks__/modules';
 import { Lesson } from 'types/timetables';
 
 const mockLesson = _.cloneDeep(CS1010S.semesterData[0].timetable[0]) as Lesson;
@@ -244,3 +245,23 @@ describe(isGraduateModule, () => {
     expect(isGraduateModule({ moduleCode: 'ACC4999X' })).toEqual(false);
   });
 });
+
+describe(canTa, () => {
+  const modules = { CP3880, CS1010S, CS3216 };
+
+  it('should return true for modules with non-lecture lessons', () => {
+    expect(canTa(modules, 'CS1010S', 1)).toEqual(true);
+  });
+
+  it('should return false for modules with only lecture lessons', () => {
+    expect(canTa(modules, 'CS3216', 1)).toEqual(false);
+  });
+
+  it('should return false for modules without lessons', () => {
+    expect(canTa(modules, 'CP3880', 1)).toEqual(false);
+  });
+
+  it('should return false for unknown modules', () => {
+    expect(canTa(modules, 'ZZ9999', 1)).toEqual(false);
+  });
+});

website/src/utils/modules.ts

@@ -12,6 +12,7 @@ import type {
 import config from 'config';
 import { NBSP, noBreak } from 'utils/react';
 import { Lesson } from 'types/timetables';
+import { ModulesMap } from 'types/reducers';
 import { toSingaporeTime } from './timify';
 
 // Look for strings that look like module codes - eg.
@@ -145,3 +146,11 @@ export function getYearsBetween(minYear: string, maxYear: string): string[] {
 export function isGraduateModule(module: { moduleCode: ModuleCode }): boolean {
   return Boolean(/[A-Z]+(5|6)\d{3}/i.test(module.moduleCode));
 }
+
+// A module is TA-able if it has at least 1 non-lecture lesson
+export function canTa(modules: ModulesMap, moduleCode: ModuleCode, semester: Semester): boolean {
+  const module = modules[moduleCode];
+  if (!module) return false;
+  const moduleTimetable = getModuleTimetable(module, semester);
+  return moduleTimetable.some((lesson) => lesson.lessonType !== 'Lecture');
+}

website/src/views/timetable/TimetableContent.tsx

@@ -27,6 +27,7 @@ import {
 } from 'actions/timetables';
 import {
   areLessonsSameClass,
+  canTa,
   formatExamDate,
   getExamDate,
   getModuleTimetable,
@@ -179,6 +180,11 @@ class TimetableContent extends React.Component<Props, State> {
 
   isTaInTimetable = (moduleCode: ModuleCode) => this.props.taInTimetable[moduleCode]?.length > 0;
 
+  canTa = (moduleCode: ModuleCode) => {
+    const { semester, modules } = this.props;
+    return canTa(modules, moduleCode, semester);
+  };
+
   // Adds current non lecture lessons as TA lessons
   setTaLessonInTimetable = (semester: Semester, moduleCode: ModuleCode) => {
     timetableLessonsArray(this.props.timetableWithLessons)
@@ -263,6 +269,7 @@ class TimetableContent extends React.Component<Props, State> {
     colorIndex: this.props.colors[module.moduleCode],
     isHiddenInTimetable: this.isHiddenInTimetable(module.moduleCode),
     isTaInTimetable: this.isTaInTimetable(module.moduleCode),
+    canTa: this.canTa(module.moduleCode),
   });
 
   renderModuleTable = (
@@ -456,6 +463,7 @@ class TimetableContent extends React.Component<Props, State> {
                   colorIndex: this.props.colors[module.moduleCode],
                   isHiddenInTimetable: this.isHiddenInTimetable(module.moduleCode),
                   isTaInTimetable: this.isTaInTimetable(module.moduleCode),
+                  canTa: false,
                 }))}
               />
             ) : (

website/src/views/timetable/TimetableModulesTable.test.tsx

@@ -48,6 +48,10 @@ function getModules(wrapper: ShallowWrapper) {
   return wrapper.find(`.${styles.modulesTableRow}`).map((ele) => ele.key());
 }
 
+function getButtons(wrapper: ShallowWrapper) {
+  return wrapper.find(`.${styles.moduleActionButtons} > .btn-group`);
+}
+
 describe(TimetableModulesTableComponent, () => {
   const modules = addColors([CS1010S, CS3216]);
 
@@ -77,6 +81,7 @@ describe(TimetableModulesTableComponent, () => {
       colorIndex: 2,
       isHiddenInTimetable: false,
       isTaInTimetable: false,
+      canTa: false,
     };
 
     const moduleCodes = getModules(
@@ -85,4 +90,14 @@ describe(TimetableModulesTableComponent, () => {
 
     expect(moduleCodes).toEqual(originalOrder);
   });
+
+  it('should display buttons correctly', () => {
+    // TA button is the 3rd button
+    const withoutTaButton = getButtons(make({ modules: addColors([CS1010S]) }).wrapper);
+    expect(withoutTaButton.at(0).children()).toHaveLength(2);
+
+    const modulesWithTaAbleModule = addColors([CS1010S], false, false, true);
+    const withTaButton = getButtons(make({ modules: modulesWithTaAbleModule }).wrapper);
+    expect(withTaButton.at(0).children()).toHaveLength(3);
+  });
 });

website/src/views/timetable/TimetableModulesTable.tsx

@@ -97,26 +97,28 @@ export const TimetableModulesTableComponent: React.FC<Props> = (props) => {
               )}
             </button>
           </Tooltip>
-          <Tooltip content={taBtnLabel} touch={['hold', 50]}>
-            <button
-              type="button"
-              className={classnames('btn btn-outline-secondary btn-svg', styles.moduleAction)}
-              aria-label={taBtnLabel}
-              onClick={() => {
-                if (module.isTaInTimetable) {
-                  props.disableTaModeInTimetable(semester, module.moduleCode);
-                } else {
-                  props.enableTaModeInTimetable(semester, module.moduleCode);
-                }
-              }}
-            >
-              {module.isTaInTimetable ? (
-                <BookOpen className={styles.actionIcon} />
-              ) : (
-                <Book className={styles.actionIcon} />
-              )}
-            </button>
-          </Tooltip>
+          {module.canTa && (
+            <Tooltip content={taBtnLabel} touch={['hold', 50]}>
+              <button
+                type="button"
+                className={classnames('btn btn-outline-secondary btn-svg', styles.moduleAction)}
+                aria-label={taBtnLabel}
+                onClick={() => {
+                  if (module.isTaInTimetable) {
+                    props.disableTaModeInTimetable(semester, module.moduleCode);
+                  } else {
+                    props.enableTaModeInTimetable(semester, module.moduleCode);
+                  }
+                }}
+              >
+                {module.isTaInTimetable ? (
+                  <BookOpen className={styles.actionIcon} />
+                ) : (
+                  <Book className={styles.actionIcon} />
+                )}
+              </button>
+            </Tooltip>
+          )}
         </div>
       </div>
     );