Enable CPEx on non-production environments (#4063)

* renamed feature flag to fit context

* added CPEx to config while checking type of environment

* updated source for show CPEx config

* Change condition for enableCPEx to allow all non-production
This makes the variable for enableCPExforProd clearer, as well as to allow easy UI testing. Nonetheless, backend testing with API is still not possible other than on prod and cpex-staging

* Update maintenance docs for CPEx

---------

Co-authored-by: Jonathan Loh <[email protected]>

Author: gnimnix

MAINTENANCE.md

@@ -30,12 +30,12 @@ Reference PRs: [PR #3286](https://github.com/nusmodifications/nusmods/pull/3286)
   - [ ] Update `TERM` in `scrapers/cpex-scraper/src/index.ts` and `MPE_SEMESTER` in `website/src/views/mpe/constants.ts` to be the semester you're configuring CPEx for (usually the next semester)
   - [ ] Update the displayed dates in `website/src/views/mpe/MpeContainer.tsx` and any new requirements/descriptions
   - [ ] Update dates in the ModReg schedule in `website/src/data/modreg-schedule.json`
-  - [ ] Enable the `enabledCPEx` and `showCPExTab` flags in `website/src/featureFlags.ts`
+  - [ ] Enable the `enableCPExforProd` and `showCPExTab` flags in `website/src/featureFlags.ts`
   - [ ] Push onto `cpex-staging` branch (Ensure synced with `master` branch first), then visit https://cpex-staging.nusmods.com/cpex and verify that NUS authentication is working
 - During
   - [ ] Merge `cpex-staging` into `master`
   - [ ] Deploy latest `master` to `production`
 - After
-  - [ ] Disable the `enabledCPEx` and `showCPExTab` flags in `website/src/featureFlags.ts`
+  - [ ] Disable the `enableCPExforProd` and `showCPExTab` flags in `website/src/featureFlags.ts`
   - [ ] Merge into `master`
   - [ ] Deploy latest `master` to `production`

website/src/config/index.ts

@@ -6,6 +6,7 @@ import { AcadYear, Semester } from 'types/modules';
 import holidays from 'data/holidays.json';
 import modRegData from 'data/modreg-schedule.json';
 import appConfig from './app-config.json';
+import { enableCPExforProd } from '../featureFlags';
 
 export const regPeriods = [
   'Select Courses',
@@ -70,6 +71,8 @@ export type Config = {
   holidays: Date[];
 
   modRegSchedule: { [type in ScheduleType]: RegPeriod[] };
+
+  enableCPEx: boolean;
 };
 
 export function convertModRegDates(roundData: (typeof modRegData)[ScheduleType]): RegPeriod[] {
@@ -97,6 +100,8 @@ const augmentedConfig: Config = {
    */
   getSemesterKey: (): string =>
     `${augmentedConfig.academicYear} ${augmentedConfig.semesterNames[augmentedConfig.semester]}`,
+
+  enableCPEx: enableCPExforProd || NUSMODS_ENV !== 'production',
 };
 
 export default augmentedConfig;

website/src/featureFlags.ts

@@ -1,6 +1,6 @@
 /* eslint-disable import/prefer-default-export */
 
 /** Enable Course Planning Exercise */
-export const enableCPEx = false;
+export const enableCPExforProd = false;
 
 export const showCPExTab = false;

website/src/serverless/mpe.ts

@@ -1,7 +1,7 @@
 import axios, { AxiosHeaders } from 'axios';
-import { enableCPEx } from '../featureFlags';
 import { MpeSubmission, MpePreference, MODULE_TYPES } from '../types/mpe';
 import type { Handler } from './handler';
+import config from '../config';
 
 const vfsEndpoint = process.env.NUS_VFS_MPE_ENDPOINT;
 const defaultHeaders = new AxiosHeaders({
@@ -104,7 +104,7 @@ const validatePreferences = (preferences: MpePreference[]): boolean =>
 export const featureFlagEnablerMiddleware =
   (next: Handler): Handler =>
   async (req, res): Promise<void> => {
-    if (!enableCPEx) {
+    if (!config.enableCPEx) {
       res.status(404).end();
       return;
     }

website/src/views/mpe/MpeContainer.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useState } from 'react';
 import { useLocation, useHistory } from 'react-router-dom';
 import classnames from 'classnames';
-import { enableCPEx } from 'featureFlags';
 import Modal from 'views/components/Modal';
 import type { MpeSubmission } from 'types/mpe';
 import ExternalLink from 'views/components/ExternalLink';
@@ -31,6 +30,7 @@ const MpeContainer: React.FC = () => {
   );
   const hasCPEx = ugCPEx && gdCPEx;
   const sameTime = hasCPEx && ugCPEx.startDate.getTime() === gdCPEx.startDate.getTime();
+  const { enableCPEx } = config;
 
   const onLogin = useCallback(() => {
     setIsGettingSSOLink(true);