#330 Upgrade CCM To ESM (#433)

Author: pushyamig

.github/workflows/ccm.yml

@@ -7,6 +7,7 @@ on:
       - main
       - '[0-9][0-9][0-9][0-9].[0-9][0-9].*' # 2021.01.x
       - '2024-03-01-dep-update'
+      - 'i330_alt_cjs_esm_upgrade'
     tags:
       - '[0-9][0-9][0-9][0-9].[0-9][0-9].[0-9][0-9]' # 2021.01.01
 
@@ -22,7 +23,7 @@ env:
 jobs:
   build:
     # to test a feature, change the repo name to your github id
-    if: github.repository_owner == 'tl-its-umich-edu'
+    if: github.repository_owner == 'tl-its-umich-edu' || github.repository_owner == 'pushyamig'
     runs-on: ubuntu-latest
     steps:
 

README.md

@@ -188,9 +188,9 @@ you create a migration file and run the migration using `umzug`.
 Developers have to write `up` and `down` migration steps manually.
 
 1. Running migrations locally
-    1. Run migrations: `docker exec -it ccm_web node -r ts-node/register server/src/migrator up`
-    2. Revert a migration: `docker exec -it ccm_web node -r ts-node/register server/src/migrator down`.
-    3. Create a migration file: `docker exec -it ccm_web node -r ts-node/register server/src/migrator create --name my-migration.ts`.
+    1. Run migrations: `docker exec -it ccm_web node --loader ts-node/esm server/src/migrator.ts up`
+    2. Revert a migration: `docker exec -it ccm_web node --loader ts-node/esm server/src/migrator.ts down`.
+    3. Create a migration file: `docker exec -it ccm_web node --loader ts-node/esm server/src/migrator.ts create --name my-migration.ts`.
 
         This generates a migration file called `<timestamp>.my-migration.ts`.
         The timestamp prefix can be customized to be date-only or omitted,
@@ -201,9 +201,9 @@ Developers have to write `up` and `down` migration steps manually.
 2. Running the migration are usually done when server is starting up, but in addition if you want to run migrations or revert use above commands
 
 3. Running migrations `docker-compose-prod.yml`
-    1. For running the migrations in in dev/test/prod, use `docker exec -it ccm_web_prod node server/src/migrator up` and `docker exec -it ccm_web_prod node server/src/migrator down`.
+    1. For running the migrations in in dev/test/prod, use `docker exec -it ccm_web_prod node --loader ts-node/esm server/src/migrator.js up` and `docker exec -it ccm_web_prod node --loader ts-node/esm server/src/migrator.js down`.
     2. The reason for the separate setups for running migrations for local/non-prod and prod is locally, we don't
-    transpile TypeScript to Javascript and so we always use `ts-node/register` module for running in node
+    transpile TypeScript to Javascript and so we always use `ts-node/esm` module for running in node
     environment.
 
 #### Troubleshooting
@@ -352,7 +352,7 @@ This code will hopefully only remain in this repository temporarily.
 2. The action is triggered whenever a commit is made to the `main` branch.  E.g., when a pull request is merged to `main`.
 3. OpenShift projects can periodically pull this image from GHCR.  Configure only **_NON-PRODUCTION_** CCM projects to pull the image…
     ```sh
-    oc tag ghcr.io/tl-its-umich-edu/canvas-course-manager-next:latest canvas-course-manager-next:latest --scheduled --reference-policy=local
+    oc tag ghcr.io/tl-its-umich-edu/canvas-course-manager-next:main canvas-course-manager-next:main --scheduled --reference-policy=local
     ```
     See the OpenShift documentation "[Managing image streams: Configuring periodic importing of image stream tags](https://docs.openshift.com/container-platform/4.11/openshift_images/image-streams-manage.html#images-imagestream-import_image-streams-managing)" for details.
 

ccm_web/Dockerfile

@@ -29,7 +29,7 @@ COPY --from=base \
     /base/package.json \
     /base/package-lock.json \
     /base/start.sh \
-    /base/ecosystem.config.js \
+    /base/ecosystem.config.cjs \
     ./
 RUN npm install --production
 RUN npm install [email protected] -g

ccm_web/client/src/App.tsx

@@ -1,19 +1,19 @@
 import React, { useEffect, useState } from 'react'
 import { Route, Routes, useLocation } from 'react-router-dom'
 
-import { getCourse } from './api'
+import { getCourse } from './api.js'
 import './App.css'
-import APIErrorMessage from './components/APIErrorMessage'
-import AuthorizePrompt from './components/AuthorizePrompt'
-import ErrorAlert from './components/ErrorAlert'
-import Layout from './components/Layout'
-import useGlobals from './hooks/useGlobals'
-import usePromise from './hooks/usePromise'
-import { CanvasCourseBase } from './models/canvas'
-import allFeatures from './models/FeatureUIData'
-import Home from './pages/Home'
-import NotFound from './pages/NotFound'
-import redirect from './utils/redirect'
+import APIErrorMessage from './components/APIErrorMessage.js'
+import AuthorizePrompt from './components/AuthorizePrompt.js'
+import ErrorAlert from './components/ErrorAlert.js'
+import Layout from './components/Layout.js'
+import useGlobals from './hooks/useGlobals.js'
+import usePromise from './hooks/usePromise.js'
+import { CanvasCourseBase } from './models/canvas.js'
+import allFeatures from './models/FeatureUIData.js'
+import Home from './pages/Home.js'
+import NotFound from './pages/NotFound.js'
+import redirect from './utils/redirect.js'
 
 function App (): JSX.Element {
   const features = allFeatures.map(f => f.features).flat()

ccm_web/client/src/api.ts

@@ -1,10 +1,10 @@
 import {
   CanvasCourseBase, CanvasCourseSection, CanvasCourseSectionBase, CanvasEnrollment,
   CanvasUserCondensed, CourseWithSections
-} from './models/canvas'
-import { ExternalUserSuccess } from './models/externalUser'
-import { Globals, CsrfToken } from './models/models'
-import handleErrors, { CanvasError } from './utils/handleErrors'
+} from './models/canvas.js'
+import { ExternalUserSuccess } from './models/externalUser.js'
+import { Globals, CsrfToken } from './models/models.js'
+import handleErrors, { CanvasError } from './utils/handleErrors.js'
 
 const jsonMimeType = 'application/json'
 

ccm_web/client/src/components/APIErrorMessage.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Typography } from '@mui/material'
 
-import { CanvasError } from '../utils/handleErrors'
+import { CanvasError } from '../utils/handleErrors.js'
 
 interface APIErrorMessageProps {
   context: string

ccm_web/client/src/components/APIErrorsTable.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 
-import CustomTable, { TableColumn } from './CustomTable'
-import { ErrorDescription } from '../utils/handleErrors'
+import CustomTable, { TableColumn } from './CustomTable.js'
+import { ErrorDescription } from '../utils/handleErrors.js'
 
 interface NumberedErrorDescription extends ErrorDescription {
   rowNumber: number

ccm_web/client/src/components/Accordion.tsx

@@ -5,7 +5,7 @@ import {
   AccordionDetails as MUIAccordionDetails,
   AccordionSummary as MUIAccordionSummary
 } from '@mui/material'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import {ExpandMore as ExpandMoreIcon} from '@mui/icons-material'
 
 const PREFIX = 'Accordion'
 

ccm_web/client/src/components/AuthorizePrompt.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { styled } from '@mui/material/styles'
 import { Button, Typography } from '@mui/material'
 
-import Help from './Help'
+import Help from './Help.js'
 
 const PREFIX = 'AuthorizePrompt'
 

ccm_web/client/src/components/Breadcrumbs.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import { styled } from '@mui/material/styles'
 import { Link as RouterLink } from 'react-router-dom'
 import { Breadcrumbs as MuiBreadcrumbs, Link, Typography } from '@mui/material'
-import NavigateNextIcon from '@mui/icons-material/NavigateNext'
+import {NavigateNext as NavigateNextIcon} from '@mui/icons-material'
 
-import { FeatureUIProps } from '../models/FeatureUIData'
+import { FeatureUIProps } from '../models/FeatureUIData.js'
 
 const PREFIX = 'Breadcrumbs'