107 bulk enroll um user

ccm_web/client/src/App.tsx

@@ -19,6 +19,10 @@ const useStyles = makeStyles((theme) => ({
   breadcrumbContainer: {
     paddingLeft: 25,
     paddingTop: 25
+  },
+  swaggerLink: {
+    display: 'block',
+    clear: 'both'
   }
 }))
 
@@ -107,7 +111,11 @@ function App (): JSX.Element {
         </Router>
         {
           globals?.environment === 'development' &&
-          <Link href={`/swagger?csrfToken=${String(getCSRFToken())}`}>Swagger UI</Link>
+          (
+            <div className={classes.swaggerLink}>
+              <Link href={`/swagger?csrfToken=${String(getCSRFToken())}`}>Swagger UI</Link>
+            </div>
+          )
         }
       </SnackbarProvider>
     </div>

ccm_web/client/src/components/BulkEnrollUMUserConfirmationTable.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react'
+import ConfirmationTable from './ConfirmationTable'
+
+interface IAddUMUserEnrollment {
+  rowNumber: number
+  loginID: string
+  role: string
+}
+
+interface BulkEnrollUMUserConfirmationTableProps {
+  enrollments: IAddUMUserEnrollment[]
+}
+
+interface TableHeaderColumnInfoShouldUseMatUIType {
+  id: keyof IAddUMUserEnrollment
+  label: string
+  minWidth: number
+  align?: 'left' | 'right' | undefined
+}
+
+const columns: TableHeaderColumnInfoShouldUseMatUIType[] = [
+  { id: 'rowNumber', label: 'Row Number', minWidth: 25 },
+  { id: 'loginID', label: 'Login ID', minWidth: 100 },
+  { id: 'role', label: 'Role', minWidth: 100 }
+]
+
+function BulkEnrollUMUserConfirmationTable (props: BulkEnrollUMUserConfirmationTableProps): JSX.Element {
+  const [page, setPage] = useState<number>(0)
+
+  const tableRows = props.enrollments
+
+  return <ConfirmationTable<IAddUMUserEnrollment> {...{ tableRows, columns, page, setPage }} />
+}
+
+export type { BulkEnrollUMUserConfirmationTableProps, IAddUMUserEnrollment }
+export default BulkEnrollUMUserConfirmationTable

ccm_web/client/src/components/CreateSectionWidget.tsx

@@ -0,0 +1,100 @@
+import { Button, Grid, makeStyles, TextField } from '@material-ui/core'
+import React, { ChangeEvent, useState } from 'react'
+import { useSnackbar } from 'notistack'
+import { addCourseSections } from '../api'
+import { CanvasCourseSection } from '../models/canvas'
+import { CCMComponentProps } from '../models/FeatureUIData'
+import { CanvasCoursesSectionNameValidator, ICanvasSectionNameInvalidError } from '../utils/canvasSectionNameValidator'
+import { CODE_NUMPAD_ENTER, CODE_RETURN } from 'keycode-js'
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    backgroundColor: '#FAFAFA',
+    height: 200
+  },
+  input: {
+    width: '100%'
+  },
+  button: {
+    width: '100%'
+  }
+}))
+
+export interface CreateSectionWidgetProps extends CCMComponentProps {
+  onSectionCreated: (newSection: CanvasCourseSection) => void
+}
+
+function CreateSectionWidget (props: CreateSectionWidgetProps): JSX.Element {
+  const classes = useStyles()
+  const { enqueueSnackbar } = useSnackbar()
+  const [newSectionName, setNewSectionName] = useState<string>('')
+  const [isCreating, setIsCreating] = useState(false)
+  const nameValidator = new CanvasCoursesSectionNameValidator(props.globals.course)
+
+  const newSectionNameChanged = (event: ChangeEvent<HTMLInputElement>): void => {
+    setNewSectionName(event.target.value)
+  }
+
+  const errorAlert = (errors: ICanvasSectionNameInvalidError[]): void => {
+    const errorMessage = errors.map(e => { return e.reason }).join('<br/>')
+    enqueueSnackbar(errorMessage, {
+      variant: 'error'
+    })
+  }
+
+  const createSection = (): void => {
+    if (newSectionName.trim().length === 0) {
+      return
+    }
+    setIsCreating(true)
+    nameValidator.validateSectionName(newSectionName).then(errors => {
+      if (errors.length === 0) {
+        addCourseSections(props.globals.course.id, [newSectionName])
+          .then(newSections => {
+            props.onSectionCreated(newSections[0])
+            setNewSectionName('')
+          }).catch(() => {
+            enqueueSnackbar('Error adding section', {
+              variant: 'error'
+            })
+          })
+      } else {
+        errorAlert(errors)
+      }
+    }).catch(() => {
+      enqueueSnackbar('Error validating section name', {
+        variant: 'error'
+      })
+    }).finally(() => {
+      setIsCreating(false)
+    })
+  }
+
+  const isCreateDisabled = (): boolean => {
+    return isCreating || newSectionName.trim().length === 0
+  }
+
+  const keyDown = (code: string): void => {
+    if (isCreateDisabled()) return
+    if (code === CODE_RETURN || code === CODE_NUMPAD_ENTER) {
+      createSection()
+    }
+  }
+
+  return (
+    <>
+    <Grid container spacing={2}>
+      <Grid item xs={12} sm={9}>
+        <TextField className={classes.input} size='small' label='input the name of the new section' variant='outlined' id="outlined-basic" onChange={newSectionNameChanged} value={newSectionName} onKeyDown={(e) => keyDown(e.code)}/>
+      </Grid>
+      <Grid item xs={12} sm>
+        <Button className={classes.button} variant="contained" color="primary" onClick={createSection} value={newSectionName} disabled={isCreateDisabled()}>
+          Create
+        </Button>
+      </Grid>
+    </Grid>
+    </>
+  )
+}
+
+export default CreateSectionWidget

ccm_web/client/src/components/SectionSelectorWidget.tsx

@@ -0,0 +1,98 @@
+import { Grid, List, ListItem, ListItemText, makeStyles, TextField } from '@material-ui/core'
+import ClearIcon from '@material-ui/icons/Clear'
+import React, { useEffect, useState } from 'react'
+import { CanvasCourseSection } from '../models/canvas'
+
+const useStyles = makeStyles((theme) => ({
+  listContainer: {
+    overflow: 'auto',
+    marginBottom: '5px'
+  },
+  searchContainer: {
+    textAlign: 'left'
+  },
+  searchTextField: {
+    width: '100%'
+  }
+}))
+
+interface ISectionSelectorWidgetProps {
+  sections: CanvasCourseSection[]
+  selectedSections: CanvasCourseSection[]
+  height: number
+  multiSelect: boolean
+  selectionUpdated: (section: CanvasCourseSection[]) => void
+}
+
+function SectionSelectorWidget (props: ISectionSelectorWidgetProps): JSX.Element {
+  const classes = useStyles()
+
+  const [sectionFilterText, setSectionFilterText] = useState<string>('')
+  const [filteredSections, setFilteredSections] = useState<CanvasCourseSection[]>(props.sections)
+
+  useEffect(() => {
+    if (sectionFilterText.length === 0) {
+      setFilteredSections(props.sections)
+    } else {
+      setFilteredSections(props.sections.filter(p => { return p.name.toUpperCase().includes(sectionFilterText.toUpperCase()) }))
+    }
+  }, [sectionFilterText, props.sections])
+
+  const handleListItemClick = (
+    sectionId: number
+  ): void => {
+    let newSelections = [...props.selectedSections]
+    const alreadySelected = props.selectedSections.filter(s => { return s.id === sectionId })
+    if (alreadySelected.length > 0) {
+      newSelections.splice(newSelections.indexOf(alreadySelected[0]), 1)
+    } else {
+      if (props.multiSelect) {
+        newSelections.push(filteredSections.filter(s => { return s.id === sectionId })[0])
+      } else {
+        newSelections = [filteredSections.filter(s => { return s.id === sectionId })[0]]
+      }
+    }
+    props.selectionUpdated(newSelections)
+  }
+
+  const isSectionSelected = (sectionId: number): boolean => {
+    return props.selectedSections.map(s => { return s.id }).includes(sectionId)
+  }
+
+  const searchChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    setSectionFilterText(event.target.value)
+  }
+
+  const clearSearch = (): void => {
+    setSectionFilterText('')
+  }
+
+  const getSearchTextFieldEndAdornment = (hasText: boolean): JSX.Element => {
+    if (!hasText) {
+      return (<></>)
+    } else {
+      return (<ClearIcon onClick={clearSearch}/>)
+    }
+  }
+  // Passing in the height in the props seems like the wrong solution, but wanted to move on from solving that for now
+  return (
+    <>
+      <Grid container>
+        <Grid item container className={classes.searchContainer} xs={12}>
+          <TextField className={classes.searchTextField} onChange={searchChange} value={sectionFilterText} id='textField_Search' size='small' label='Search Sections' variant='outlined' InputProps={{ endAdornment: getSearchTextFieldEndAdornment(sectionFilterText.length > 0) }}/>
+        </Grid>
+        <Grid item xs={12}>
+          <List className={classes.listContainer} style={{ maxHeight: props.height }}>
+            {filteredSections.map((section, index) => {
+              return (<ListItem divider key={section.id} button selected={isSectionSelected(section.id)} onClick={(event) => handleListItemClick(section.id)}>
+                <ListItemText primary={section.name} secondary={`${section.total_students ?? '?'} students`}></ListItemText>
+              </ListItem>)
+            })}
+          </List>
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+export default SectionSelectorWidget

ccm_web/client/src/models/FeatureUIData.tsx

@@ -10,6 +10,7 @@ import { FeatureDataProps, mergeSectionProps, canvasGradebookFormatterProps, Ext
 import ConvertCanvasGradebook from '../pages/GradebookCanvas'
 import MergeSections from '../pages/MergeSections'
 import BulkSectionCreate from '../pages/BulkSectionCreate'
+import AddUMUsers from '../pages/AddUMUsers'
 import { Globals, RoleEnum } from './models'
 
 export interface CCMComponentProps {
@@ -61,7 +62,7 @@ const createSectionsCardProps: FeatureUIProps = {
 const addUMUsersCardProps: FeatureUIProps = {
   data: addUMUsersProps,
   icon: <PersonAddIcon fontSize='large' />,
-  component: MergeSections,
+  component: AddUMUsers,
   route: '/add-um-users'
 }
 

ccm_web/client/src/models/canvas.ts

@@ -6,5 +6,18 @@ export interface CanvasCourseBase {
 export interface CanvasCourseSection {
   id: number
   name: string
-  total_students?: number
+  total_students: number
 }
+
+export interface CanvasRole {
+  clientName: string
+  canvasName: string
+}
+
+export const canvasRoles: CanvasRole[] = [
+  { clientName: 'student', canvasName: 'StudentEnrollment' },
+  { clientName: 'teacher', canvasName: 'TeacherEnrollment' },
+  { clientName: 'ta', canvasName: 'TaEnrollment' },
+  { clientName: 'observer', canvasName: 'ObserverEnrollment' },
+  { clientName: 'designer', canvasName: 'DesignerEnrollment' }
+]