#330 Upgrade CCM To ESM (#433)

.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 pm2@5.3.1 -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'
 

ccm_web/client/src/components/BulkApiErrorContent.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import { Typography } from '@mui/material'
 
-import APIErrorsTable from './APIErrorsTable'
-import CSVFileName from './CSVFileName'
-import ErrorAlert from './ErrorAlert'
-import RowLevelErrorsContent from './RowLevelErrorsContent'
-import { CanvasError } from '../utils/handleErrors'
+import APIErrorsTable from './APIErrorsTable.js'
+import CSVFileName from './CSVFileName.js'
+import ErrorAlert from './ErrorAlert.js'
+import RowLevelErrorsContent from './RowLevelErrorsContent.js'
+import { CanvasError } from '../utils/handleErrors.js'
 
 interface BulkApiErrorContentProps {
   error: Error

ccm_web/client/src/components/BulkEnrollExternalUserConfirmationTable.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 
-import CustomTable from './CustomTable'
-import { RowNumberedAddNewExternalUserEnrollment } from '../models/enrollment'
+import CustomTable from './CustomTable.js'
+import { RowNumberedAddNewExternalUserEnrollment } from '../models/enrollment.js'
 
 interface BulkEnrollExternalConfirmationTableProps {
   enrollments: RowNumberedAddNewExternalUserEnrollment[]

ccm_web/client/src/components/BulkEnrollUMUserConfirmationTable.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 
-import CustomTable from './CustomTable'
-import { RowNumberedAddEnrollment } from '../models/enrollment'
+import CustomTable from './CustomTable.js'
+import { RowNumberedAddEnrollment } from '../models/enrollment.js'
 
 interface BulkEnrollUMUserConfirmationTableProps {
   enrollments: RowNumberedAddEnrollment[]

ccm_web/client/src/components/BulkEnrollUMUserToSectionsConfirmationTable.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 
-import CustomTable from './CustomTable'
-import { RowNumberedAddEnrollmentWithSectionId } from '../models/enrollment'
+import CustomTable from './CustomTable.js'
+import { RowNumberedAddEnrollmentWithSectionId } from '../models/enrollment.js'
 
 interface BulkEnrollUMUserSectionsConfirmationTableProps {
   enrollments: RowNumberedAddEnrollmentWithSectionId[]

ccm_web/client/src/components/BulkSectionCreateUploadConfirmationTable.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import CustomTable from './CustomTable'
+import CustomTable from './CustomTable.js'
 
 interface Section {
   rowNumber: number

ccm_web/client/src/components/BulkSectionCreateValidators.ts

@@ -1,6 +1,6 @@
-import { InvalidationType } from '../models/models'
-import { DuplicateIdentifierInRowsValidator, RowInvalidation, StringRowsSchemaValidator } from '../utils/rowValidation'
-import { sectionNameSchema } from '../utils/validation'
+import { InvalidationType } from '../models/models.js'
+import { DuplicateIdentifierInRowsValidator, RowInvalidation, StringRowsSchemaValidator } from '../utils/rowValidation.js'
+import { sectionNameSchema } from '../utils/validation.js'
 
 interface SectionsRowInvalidation extends RowInvalidation {}
 

ccm_web/client/src/components/ConfirmDialog.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { styled } from '@mui/material/styles'
 import { Button, Paper, Typography } from '@mui/material'
-import CloudDoneIcon from '@mui/icons-material/CloudDone'
+import { CloudDone as CloudDoneIcon } from '@mui/icons-material'
 
-import { DownloadData } from '../models/models'
+import { DownloadData } from '../models/models.js'
 
 const PREFIX = 'ConfirmDialog'
 

ccm_web/client/src/components/CourseSectionList.tsx

@@ -12,13 +12,13 @@ import {
   Typography
 } from '@mui/material'
 
-import APIErrorMessage from './APIErrorMessage'
-import { getCourseSections, unmergeSections } from '../api'
-import usePromise from '../hooks/usePromise'
+import APIErrorMessage from './APIErrorMessage.js'
+import { getCourseSections, unmergeSections } from '../api.js'
+import usePromise from '../hooks/usePromise.js'
 import {
   CanvasCourseSection, CanvasCourseSectionBase, injectCourseName, CanvasCourseSectionWithCourseName
-} from '../models/canvas'
-import { CCMComponentProps } from '../models/FeatureUIData'
+} from '../models/canvas.js'
+import { CCMComponentProps } from '../models/FeatureUIData.js'
 
 const PREFIX = 'CourseSectionList'
 

ccm_web/client/src/components/CreateSectionWidget.tsx

@@ -4,11 +4,11 @@ import { useSnackbar } from 'notistack'
 import React, { ChangeEvent, useState } from 'react'
 import { Button, Grid, TextField } from '@mui/material'
 
-import APIErrorMessage from './APIErrorMessage'
-import { addCourseSections } from '../api'
-import { CanvasCourseBase, CanvasCourseSection } from '../models/canvas'
-import { CanvasCoursesSectionNameValidator, ICanvasSectionNameInvalidError } from '../utils/canvasSectionNameValidator'
-import { CsrfToken } from '../models/models'
+import APIErrorMessage from './APIErrorMessage.js'
+import { addCourseSections } from '../api.js'
+import { CanvasCourseBase, CanvasCourseSection } from '../models/canvas.js'
+import { CanvasCoursesSectionNameValidator, ICanvasSectionNameInvalidError } from '../utils/canvasSectionNameValidator.js'
+import { CsrfToken } from '../models/models.js'
 
 const PREFIX = 'CreateSectionWidget'
 

ccm_web/client/src/components/CreateSelectSectionWidget.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import { styled } from '@mui/material/styles'
 import { Tooltip, Typography } from '@mui/material'
-import HelpOutline from '@mui/icons-material/HelpOutline'
+import { HelpOutline } from '@mui/icons-material'
 
-import CreateSectionWidget from './CreateSectionWidget'
-import SectionSelectorWidget from './SectionSelectorWidget'
-import { CanvasCourseBase, CanvasCourseSection, CanvasCourseSectionWithCourseName } from '../models/canvas'
-import { CsrfToken } from '../models/models'
+import CreateSectionWidget from './CreateSectionWidget.js'
+import SectionSelectorWidget from './SectionSelectorWidget.js'
+import { CanvasCourseBase, CanvasCourseSection, CanvasCourseSectionWithCourseName } from '../models/canvas.js'
+import { CsrfToken } from '../models/models.js'
 
 const PREFIX = 'CreateSelectSectionWidget'
 

ccm_web/client/src/components/CustomTable.tsx

@@ -1,8 +1,8 @@
 import { Paper, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow } from '@mui/material'
 import React from 'react'
-import StyledTableCell from './StyledTableCell'
-import TableCaption from './TableCaption'
-import { TablePaginationActions } from './TablePagination'
+import StyledTableCell from './StyledTableCell.js'
+import TableCaption from './TableCaption.js'
+import { TablePaginationActions } from './TablePagination.js'
 
 interface TableEntity {
   rowNumber: number

ccm_web/client/src/components/ErrorAlert.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { styled } from '@mui/material/styles'
 import { Button, Typography } from '@mui/material'
-import ErrorIcon from '@mui/icons-material/Error'
+import { Error as ErrorIcon } from '@mui/icons-material'
 
-import Alert from './Alert'
+import Alert from './Alert.js'
 
 const PREFIX = 'ErrorAlert'
 

ccm_web/client/src/components/ExampleFileDownloadHeader.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { styled } from '@mui/material/styles'
 import { Link, Typography } from '@mui/material'
 
-import { prepDownloadDataString } from '../utils/fileUtils'
+import { prepDownloadDataString } from '../utils/fileUtils.js'
 
 const PREFIX = 'ExampleFileDownloadHeader'
 

ccm_web/client/src/components/FeatureCard.tsx

@@ -3,7 +3,7 @@ import { styled } from '@mui/material/styles'
 import { Link as RouterLink } from 'react-router-dom'
 import { Card, CardActionArea, CardContent, Grid, Typography } from '@mui/material'
 
-import { FeatureUIProps } from '../models/FeatureUIData'
+import { FeatureUIProps } from '../models/FeatureUIData.js'
 
 const PREFIX = 'FeatureCard'
 

ccm_web/client/src/components/FileUpload.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, useRef } from 'react'
 import { styled } from '@mui/material/styles'
 import { Button, Card, CardContent, Typography } from '@mui/material'
-import CloudUploadIcon from '@mui/icons-material/CloudUpload'
+import { CloudUpload as CloudUploadIcon } from '@mui/icons-material'
 import { useSnackbar } from 'notistack'
 
 const PREFIX = 'FileUpload'

ccm_web/client/src/components/GradebookCanvasValidators.ts

@@ -1,6 +1,6 @@
-import { InvalidationType } from '../models/models'
-import { GradebookRecord } from '../pages/GradebookCanvas'
-import { RowInvalidation } from '../utils/rowValidation'
+import { InvalidationType } from '../models/models.js'
+import { GradebookRecord } from '../pages/GradebookCanvas.js'
+import { RowInvalidation } from '../utils/rowValidation.js'
 
 interface GradebookRowInvalidation extends RowInvalidation {}
 

ccm_web/client/src/components/GradebookUploadConfirmationTable.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import CustomTable from './CustomTable'
+import CustomTable from './CustomTable.js'
 
 interface StudentGrade {
   rowNumber: number

ccm_web/client/src/components/InlineErrorAlert.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { styled } from '@mui/material/styles'
 import { Grid, Paper } from '@mui/material'
-import ErrorIcon from '@mui/icons-material/Error'
+import { Error as ErrorIcon } from '@mui/icons-material'
 import { red } from '@mui/material/colors'
 
 const PREFIX = 'InlineErrorAlert'

ccm_web/client/src/components/InlineTextEdit.tsx

@@ -4,7 +4,7 @@ import { Button, Grid, TextField, Typography } from '@mui/material'
 import { Edit as EditIcon } from '@mui/icons-material'
 import { CODE_ENTER, CODE_NUMPAD_ENTER, CODE_ESCAPE } from 'keycode-js'
 
-import { ValidationResult } from '../utils/validation'
+import { ValidationResult } from '../utils/validation.js'
 
 const PREFIX = 'InlineTextEdit'
 

ccm_web/client/src/components/Layout.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import { styled } from '@mui/material/styles'
 import { Divider, Grid, Link, Paper, Typography } from '@mui/material'
-import BuildIcon from '@mui/icons-material/Build'
+import { Build as BuildIcon } from '@mui/icons-material'
 
-import Breadcrumbs, { BreadcrumbsProps } from './Breadcrumbs'
-import ResponsiveHelper from './ResponsiveHelper'
-import { CsrfToken } from '../models/models'
+import Breadcrumbs, { BreadcrumbsProps } from './Breadcrumbs.js'
+import ResponsiveHelper from './ResponsiveHelper.js'
+import { CsrfToken } from '../models/models.js'
 
 const PREFIX = 'Layout'