Bump major versions of dependencies (#2742)

* Update dependency @testing-library/jest-dom to v6 * Fix testing library breaking changes * Update dependency husky to v9 * Update husky format for v9 Though husky v9 is backwards-compatible with v8, it is still a good practice to update the formats regardless. * Update dependency prettier to v3 * Freeze prettier to 3.0 minor version Done due to indentation changes to ternaries in minor version 3.1. * Reformat files post-prettier version upgrade * Update ag-grid monorepo to v31 * Fix `ag-grid` breaking changes * Rename `cellRendererFramework` to `cellRenderer` * Rename `suppressCellSelection` to `suppressCellFocus` Also added some type imports for better type-safety. * Fix warning when starting dev server Caused by missing transitive `@babel/plugin-proposal-private-property-in-object` dependency belonging to CRA, which is not maintained anymore. Thus, we manually add it as a devDependency here. * Fix `ag-grid` incorrect CSS import paths This was left out after the migration and thus resulted in a runtime error previously. * Fix format * Revert "Fix format" This reverts commit 41457f3. * Fix format --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
source-academy · Jan 31, 2024 · acafed3 · acafed3
1 parent 0ba2fc4
commit acafed3
Show file tree

Hide file tree

Showing 20 changed files with 153 additions and 224 deletions.
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 bash scripts/test.sh
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "test-coveralls": "./scripts/test-coveralls.sh",
     "update-ui-snapshots": "jest --updateSnapshot",
     "eslint": "eslint --ext \".js,.jsx,.ts,.tsx\" src",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "dependencies": {
     "@blueprintjs/core": "^4.20.1",
@@ -40,8 +40,8 @@
     "@tremor/react": "^1.8.2",
     "ace-builds": "^1.4.14",
     "acorn": "^8.9.0",
-    "ag-grid-community": "^28.0.2",
-    "ag-grid-react": "^28.0.0",
+    "ag-grid-community": "^31.0.0",
+    "ag-grid-react": "^31.0.0",
     "array-move": "^4.0.0",
     "browserfs": "^1.4.3",
     "classnames": "^2.3.2",
@@ -93,9 +93,10 @@
     "yareco": "^0.1.5"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@craco/craco": "^7.1.0",
     "@svgr/webpack": "^8.0.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/acorn": "^6.0.0",
@@ -131,11 +132,11 @@
     "cross-env": "^7.0.3",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "https-browserify": "^1.0.0",
-    "husky": "^8.0.2",
+    "husky": "^9.0.0",
     "npm-run-all": "^4.1.5",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
-    "prettier": "^2.8.8",
+    "prettier": "~3.0.0",
     "process": "^0.11.10",
     "react-error-overlay": "^6.0.11",
     "react-scripts": "^5.0.1",

diff --git a/src/commons/achievement/utils/AchievementBackender.ts b/src/commons/achievement/utils/AchievementBackender.ts
@@ -31,7 +31,7 @@ export const frontendifyAchievementGoal = (goal: any) =>
     count: goal.count,
     targetCount: goal.targetCount,
     completed: goal.count >= goal.targetCount
-  } as AchievementGoal);
+  }) as AchievementGoal;
 
 export const frontendifyAchievementItem = (achievement: any) =>
   ({
@@ -51,7 +51,7 @@ export const frontendifyAchievementItem = (achievement: any) =>
       completionText: achievement.view.completionText || '',
       description: achievement.view.description || ''
     }
-  } as AchievementItem);
+  }) as AchievementItem;
 
 export const backendifyAchievementItem = (achievement: AchievementItem) => ({
   ...achievement,

diff --git a/src/commons/sourceRecorder/SourceRecorderTable.tsx b/src/commons/sourceRecorder/SourceRecorderTable.tsx
@@ -1,4 +1,4 @@
-import 'ag-grid-community/dist/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-grid.css';
 
 import {
   Divider,
@@ -56,7 +56,7 @@ class SourcecastTable extends React.Component<SourceRecorderTableProps, State> {
         {
           headerName: 'Title',
           field: 'title',
-          cellRendererFramework: SourceRecorderSelectCell,
+          cellRenderer: SourceRecorderSelectCell,
           cellRendererParams: {
             handleSetSourcecastData: this.props.handleSetSourcecastData
           },
@@ -96,7 +96,7 @@ class SourcecastTable extends React.Component<SourceRecorderTableProps, State> {
         {
           headerName: 'Share',
           field: 'uid',
-          cellRendererFramework: SourceRecorderShareCell,
+          cellRenderer: SourceRecorderShareCell,
           cellRendererParams: {
             courseId: this.props.courseId
           },
@@ -107,7 +107,7 @@ class SourcecastTable extends React.Component<SourceRecorderTableProps, State> {
         {
           headerName: 'Delete',
           field: '',
-          cellRendererFramework: SourcastDeleteCell,
+          cellRenderer: SourcastDeleteCell,
           cellRendererParams: {
             handleDeleteSourcecastEntry: this.props.handleDeleteSourcecastEntry
           },

diff --git a/src/pages/academy/adminPanel/AdminPanel.tsx b/src/pages/academy/adminPanel/AdminPanel.tsx
@@ -1,5 +1,5 @@
-import 'ag-grid-community/dist/styles/ag-grid.css';
-import 'ag-grid-community/dist/styles/ag-theme-balham.css';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-balham.css';
 
 import { Button, Divider, H1, Intent, Tab, Tabs } from '@blueprintjs/core';
 import { cloneDeep } from 'lodash';

diff --git a/src/pages/academy/adminPanel/subcomponents/AddStoriesUserPanel.tsx b/src/pages/academy/adminPanel/subcomponents/AddStoriesUserPanel.tsx
@@ -72,7 +72,7 @@ const AddStoriesUserPanel: React.FC<Props> = props => {
         onGridSizeChanged={() => gridApi.current?.sizeColumnsToFit()}
         rowData={users}
         rowHeight={36}
-        suppressCellSelection={true}
+        suppressCellFocus={true}
         suppressMovableColumns={true}
         pagination
       />

diff --git a/src/pages/academy/adminPanel/subcomponents/AddUserPanel.tsx b/src/pages/academy/adminPanel/subcomponents/AddUserPanel.tsx
@@ -72,7 +72,7 @@ const AddUserPanel: React.FC<Props> = props => {
         onGridSizeChanged={() => gridApi.current?.sizeColumnsToFit()}
         rowData={users}
         rowHeight={36}
-        suppressCellSelection={true}
+        suppressCellFocus={true}
         suppressMovableColumns={true}
         pagination
       />

diff --git a/src/pages/academy/adminPanel/subcomponents/NotificationConfigPanel.tsx b/src/pages/academy/adminPanel/subcomponents/NotificationConfigPanel.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { Button, H2, Intent } from '@blueprintjs/core';
-import { GridApi, GridReadyEvent, ValueFormatterFunc } from 'ag-grid-community';
+import { ColDef, GridApi, GridReadyEvent, ValueFormatterFunc } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import { cloneDeep } from 'lodash';
 import React, { useEffect, useState } from 'react';
@@ -94,7 +94,7 @@ const NotificationConfigPanel = () => {
     return params.data!.notificationType.forStaff ? 'Staff' : 'Student';
   };
 
-  const columnDefs = [
+  const columnDefs: ColDef[] = [
     {
       headerName: 'Notification Type',
       field: 'notificationType.name',
@@ -122,7 +122,7 @@ const NotificationConfigPanel = () => {
     {
       headerName: 'Reminder Time Options (hours)',
       field: 'timeOptions',
-      cellRendererFramework: TimeOptionCell,
+      cellRenderer: TimeOptionCell,
       cellRendererParams: {
         setStateHandler: setTimeOptions,
         setDelete: addTimeOptionsToDelete,
@@ -132,7 +132,7 @@ const NotificationConfigPanel = () => {
     {
       headerName: 'Default Reminder (hours)',
       field: 'timeOptions',
-      cellRendererFramework: SelectCell,
+      cellRenderer: SelectCell,
       cellRendererParams: {
         setStateHandler: setTimeOptions,
         field: 'timeOptions'
@@ -141,7 +141,7 @@ const NotificationConfigPanel = () => {
     {
       headerName: 'Enabled',
       field: 'isEnabled',
-      cellRendererFramework: BooleanCell,
+      cellRenderer: BooleanCell,
       cellRendererParams: {
         setStateHandler: setIsEnabled,
         field: 'isEnabled'
@@ -199,7 +199,7 @@ const NotificationConfigPanel = () => {
         rowData={notificationConfig.current}
         rowHeight={36}
         rowDragManaged={true}
-        suppressCellSelection={true}
+        suppressCellFocus={true}
         suppressMovableColumns={true}
         suppressPaginationPanel={true}
       />

diff --git a/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx b/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx
@@ -1,5 +1,11 @@
 import { Button, H2 } from '@blueprintjs/core';
-import { CellValueChangedEvent, GridApi, GridReadyEvent, RowDragEvent } from 'ag-grid-community';
+import {
+  CellValueChangedEvent,
+  ColDef,
+  GridApi,
+  GridReadyEvent,
+  RowDragEvent
+} from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import { isEqual } from 'lodash';
 import React from 'react';
@@ -95,7 +101,7 @@ const AssessmentConfigPanel: React.FC<AssessmentConfigPanelProps> = props => {
     setAssessmentConfigsToDelete(deleted[0]);
   };
 
-  const columnDefs = [
+  const columnDefs: ColDef[] = [
     {
       headerName: 'Assessment Type',
       field: 'type',
@@ -105,7 +111,7 @@ const AssessmentConfigPanel: React.FC<AssessmentConfigPanelProps> = props => {
     {
       headerName: 'Is Manually Graded',
       field: 'isManuallyGraded',
-      cellRendererFramework: BooleanCell,
+      cellRenderer: BooleanCell,
       cellRendererParams: {
         setStateHandler: setIsManuallyGraded,
         field: 'isManuallyGraded'
@@ -114,7 +120,7 @@ const AssessmentConfigPanel: React.FC<AssessmentConfigPanelProps> = props => {
     {
       headerName: 'Display in Dashboard',
       field: 'displayInDashboard',
-      cellRendererFramework: BooleanCell,
+      cellRenderer: BooleanCell,
       cellRendererParams: {
         setStateHandler: setDisplayInDashboard,
         field: 'displayInDashboard'
@@ -123,7 +129,7 @@ const AssessmentConfigPanel: React.FC<AssessmentConfigPanelProps> = props => {
     {
       headerName: 'Max Bonus XP',
       field: 'earlySubmissionXp',
-      cellRendererFramework: NumericCell,
+      cellRenderer: NumericCell,
       cellRendererParams: {
         setStateHandler: setEarlyXp,
         field: 'earlySubmissionXp'
@@ -132,7 +138,7 @@ const AssessmentConfigPanel: React.FC<AssessmentConfigPanelProps> = props => {
     {
       headerName: 'Early Hours Before Decay',
       field: 'hoursBeforeEarlyXpDecay',
-      cellRendererFramework: NumericCell,
+      cellRenderer: NumericCell,
       cellRendererParams: {
         setStateHandler: setHoursBeforeDecay,
         field: 'hoursBeforeEarlyXpDecay'
@@ -141,7 +147,7 @@ const AssessmentConfigPanel: React.FC<AssessmentConfigPanelProps> = props => {
     {
       headerName: 'Delete Row',
       field: 'placeholderToPreventColumnRerender',
-      cellRendererFramework: DeleteRowCell,
+      cellRenderer: DeleteRowCell,
       cellRendererParams: {
         deleteRowHandler: deleteRowHandler
       },
@@ -177,7 +183,7 @@ const AssessmentConfigPanel: React.FC<AssessmentConfigPanelProps> = props => {
   );
 
   // Updates the data passed into ag-grid (this is necessary to update the rowIndex in our custom
-  // cellRendererFramework)
+  // cellRenderer)
   const onRowDragLeaveOrEnd = (event: RowDragEvent) => {
     gridApi.current?.setRowData(assessmentConfig.current);
     props.setHasChangesAssessmentConfig(true);
@@ -212,7 +218,7 @@ const AssessmentConfigPanel: React.FC<AssessmentConfigPanelProps> = props => {
         rowData={props.assessmentConfig.current}
         rowHeight={36}
         rowDragManaged={true}
-        suppressCellSelection={true}
+        suppressCellFocus={true}
         suppressMovableColumns={true}
         suppressPaginationPanel={true}
         onRowDragMove={onRowDragMove}

diff --git a/src/pages/academy/adminPanel/subcomponents/userConfigPanel/UserConfigPanel.tsx b/src/pages/academy/adminPanel/subcomponents/userConfigPanel/UserConfigPanel.tsx
@@ -48,7 +48,7 @@ const UserConfigPanel: React.FC<UserConfigPanelProps> = props => {
     {
       headerName: 'Role',
       field: 'role',
-      cellRendererFramework: RolesCell,
+      cellRenderer: RolesCell,
       cellRendererParams: {
         courseRegId: props.courseRegId,
         handleUpdateUserRole: props.handleUpdateUserRole
@@ -58,7 +58,7 @@ const UserConfigPanel: React.FC<UserConfigPanelProps> = props => {
     {
       headerName: 'Actions',
       field: 'actions',
-      cellRendererFramework: UserActionsCell,
+      cellRenderer: UserActionsCell,
       cellRendererParams: {
         handleDeleteUserFromCourse: props.handleDeleteUserFromCourse
       },
@@ -88,7 +88,7 @@ const UserConfigPanel: React.FC<UserConfigPanelProps> = props => {
         onGridSizeChanged={() => gridApi.current?.sizeColumnsToFit()}
         rowData={userCourseRegistrations}
         rowHeight={36}
-        suppressCellSelection={true}
+        suppressCellFocus={true}
         suppressMovableColumns={true}
         pagination
       />

diff --git a/src/pages/academy/dashboard/Dashboard.tsx b/src/pages/academy/dashboard/Dashboard.tsx
@@ -1,5 +1,5 @@
-import 'ag-grid-community/dist/styles/ag-grid.css';
-import 'ag-grid-community/dist/styles/ag-theme-balham.css';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-balham.css';
 
 import { ColDef, GridApi, GridReadyEvent } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
@@ -55,7 +55,7 @@ const Dashboard: React.FC<DashboardProps> = props => {
           onGridSizeChanged={resizeGrid}
           rowData={gradingSummary.rows}
           rowHeight={30}
-          suppressCellSelection={true}
+          suppressCellFocus={true}
           suppressMovableColumns={true}
         />
       </div>

diff --git a/src/pages/academy/groundControl/GroundControl.tsx b/src/pages/academy/groundControl/GroundControl.tsx
@@ -1,5 +1,5 @@
-import 'ag-grid-community/dist/styles/ag-grid.css';
-import 'ag-grid-community/dist/styles/ag-theme-balham.css';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-balham.css';
 
 import { Button, Collapse, Divider, Intent } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
@@ -75,7 +75,7 @@ class GroundControl extends React.Component<GroundControlProps, State> {
           inRangeInclusive: true
         },
         sortingOrder: ['desc', 'asc', null],
-        cellRendererFramework: EditCell,
+        cellRenderer: EditCell,
         cellRendererParams: {
           handleAssessmentChangeDate: this.props.handleAssessmentChangeDate,
           forOpenDate: true
@@ -91,7 +91,7 @@ class GroundControl extends React.Component<GroundControlProps, State> {
           inRangeInclusive: true
         },
         sortingOrder: ['desc', 'asc', null],
-        cellRendererFramework: EditCell,
+        cellRenderer: EditCell,
         cellRendererParams: {
           handleAssessmentChangeDate: this.props.handleAssessmentChangeDate,
           forOpenDate: false
@@ -101,7 +101,7 @@ class GroundControl extends React.Component<GroundControlProps, State> {
       {
         headerName: 'Publish',
         field: '',
-        cellRendererFramework: PublishCell,
+        cellRenderer: PublishCell,
         cellRendererParams: {
           handlePublishAssessment: this.props.handlePublishAssessment
         },
@@ -116,7 +116,7 @@ class GroundControl extends React.Component<GroundControlProps, State> {
       {
         headerName: 'Delete',
         field: '',
-        cellRendererFramework: DeleteCell,
+        cellRenderer: DeleteCell,
         cellRendererParams: {
           handleDeleteAssessment: this.props.handleDeleteAssessment
         },
@@ -174,7 +174,7 @@ class GroundControl extends React.Component<GroundControlProps, State> {
           onGridSizeChanged={this.resizeGrid}
           rowData={this.props.assessmentOverviews}
           rowHeight={30}
-          suppressCellSelection={true}
+          suppressCellFocus={true}
           suppressMovableColumns={true}
           suppressPaginationPanel={true}
         />