Upgrade AG Grid to v34 and rewrite leaderboard routing (source-academy#3319)

* Upgrade ag-grid to latest

* Fix removed deprecated option

* Create AG Grid bootstrapper

* Move Sentry bootstrap to separate file

* Register various modules needed for AG Grid

* Migrate tables to new theming API

* Remove hardcoded global AG Grid styling

* Restore leaderboard styles with scoped CSS

* Fix leaderboard not loading

* Fix deprecation

* Simplify leaderboard routing logic

* Commit utils file

* Remove useless items

* Simplify leaderboard dropdown code

* Remove unused styles

* Fix overflow and memoization bugs

* Move constant out of component

* Use camelCase for variable

* Remove useless comment

* Fix table bugs

* Fix redirect not working

* Migrate changes

* Fix bugs

* Fix more bugs

Author: RichDom2185

package.json

@@ -48,8 +48,8 @@
     "@tremor/react": "^1.8.2",
     "ace-builds": "^1.42.1",
     "acorn": "^8.9.0",
-    "ag-grid-community": "^32.3.1",
-    "ag-grid-react": "^32.3.1",
+    "ag-grid-community": "^34.1.1",
+    "ag-grid-react": "^34.1.1",
     "array-move": "^4.0.0",
     "browserfs": "^1.4.3",
     "classnames": "^2.3.2",

src/bootstrap/agGrid.ts

@@ -0,0 +1,41 @@
+import {
+  CellStyleModule,
+  ClientSideRowModelModule,
+  ColumnApiModule,
+  ColumnAutoSizeModule,
+  CsvExportModule,
+  DateFilterModule,
+  InfiniteRowModelModule,
+  type Module,
+  ModuleRegistry,
+  PaginationModule,
+  RowDragModule,
+  TextEditorModule,
+  TextFilterModule,
+  ValidationModule
+} from 'ag-grid-community';
+
+const productionModules: readonly Module[] = [
+  CellStyleModule,
+  ClientSideRowModelModule,
+  ColumnApiModule,
+  ColumnAutoSizeModule,
+  CsvExportModule,
+  DateFilterModule,
+  InfiniteRowModelModule,
+  PaginationModule,
+  RowDragModule,
+  TextEditorModule,
+  TextFilterModule,
+  ValidationModule
+];
+
+export const initializeAgGridModules = () => {
+  const modulesToLoad = [...productionModules];
+
+  // Load helpful warnings in development mode
+  if (process.env.NODE_ENV === 'development') {
+    modulesToLoad.push(ValidationModule);
+  }
+  ModuleRegistry.registerModules(modulesToLoad);
+};

src/bootstrap/sentry.ts

@@ -0,0 +1,33 @@
+import * as Sentry from '@sentry/react';
+import { useEffect } from 'react';
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  useLocation,
+  useNavigationType
+} from 'react-router';
+import Constants from 'src/commons/utils/Constants';
+import { store } from 'src/pages/createStore';
+
+export const initializeSentryLogging = () => {
+  if (!Constants.sentryDsn) {
+    return;
+  }
+  Sentry.init({
+    dsn: Constants.sentryDsn,
+    environment: Constants.sourceAcademyEnvironment,
+    release: `cadet-frontend@${Constants.sourceAcademyVersion}`,
+    integrations: [
+      Sentry.reactRouterV7BrowserTracingIntegration({
+        useEffect,
+        useLocation,
+        useNavigationType,
+        createRoutesFromChildren,
+        matchRoutes
+      }),
+      Sentry.replayIntegration()
+    ]
+  });
+  const userId = store.getState().session.userId;
+  Sentry.setUser(typeof userId !== 'undefined' ? { id: userId.toString() } : null);
+};

src/commons/sourceRecorder/SourceRecorderTable.tsx

@@ -1,5 +1,3 @@
-import 'ag-grid-community/styles/ag-grid.css';
-
 import {
   Divider,
   FormGroup,
@@ -9,6 +7,7 @@ import {
   SpinnerSize
 } from '@blueprintjs/core';
 import { ColDef, GridApi, GridReadyEvent } from 'ag-grid-community';
+import { themeBalham } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import { sortBy } from 'lodash';
 import React from 'react';
@@ -62,7 +61,7 @@ class SourcecastTable extends React.Component<SourceRecorderTableProps, State> {
           },
           minWidth: 200,
           suppressMovable: true,
-          suppressMenu: true,
+          suppressHeaderMenuButton: true,
           cellStyle: {
             'text-align': 'left'
           },
@@ -73,15 +72,15 @@ class SourcecastTable extends React.Component<SourceRecorderTableProps, State> {
           field: 'title',
           minWidth: 100,
           suppressMovable: true,
-          suppressMenu: true,
+          suppressHeaderMenuButton: true,
           hide: !!this.props.handleSetSourcecastData
         },
         {
           headerName: 'Uploader',
           field: 'uploader.name',
           minWidth: 150,
           suppressMovable: true,
-          suppressMenu: true,
+          suppressHeaderMenuButton: true,
           cellStyle: {
             'text-align': 'center'
           }
@@ -91,7 +90,7 @@ class SourcecastTable extends React.Component<SourceRecorderTableProps, State> {
           valueGetter: params => getStandardDate(params.data.inserted_at),
           minWidth: 150,
           suppressMovable: true,
-          suppressMenu: true
+          suppressHeaderMenuButton: true
         },
         {
           headerName: 'Share',
@@ -102,7 +101,7 @@ class SourcecastTable extends React.Component<SourceRecorderTableProps, State> {
           },
           minWidth: 80,
           suppressMovable: true,
-          suppressMenu: true
+          suppressHeaderMenuButton: true
         },
         {
           headerName: 'Delete',
@@ -115,7 +114,7 @@ class SourcecastTable extends React.Component<SourceRecorderTableProps, State> {
           maxWidth: 100,
           sortable: false,
           suppressMovable: true,
-          suppressMenu: true,
+          suppressHeaderMenuButton: true,
           cellStyle: {
             'text-align': 'center'
           },
@@ -169,6 +168,7 @@ class SourcecastTable extends React.Component<SourceRecorderTableProps, State> {
         <div className="SourcecastTable">
           <div className="ag-grid-parent">
             <AgGridReact
+              theme={themeBalham}
               domLayout="autoHeight"
               columnDefs={this.state.columnDefs}
               defaultColDef={this.defaultColumnDefs}

src/index.tsx

@@ -2,45 +2,22 @@ import 'src/i18n/i18n';
 import 'src/styles/index.scss';
 
 import { Button, OverlaysProvider } from '@blueprintjs/core';
-import * as Sentry from '@sentry/react';
 import { setModulesStaticURL } from 'js-slang/dist/modules/loader';
-import { useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
-import {
-  createRoutesFromChildren,
-  matchRoutes,
-  useLocation,
-  useNavigationType
-} from 'react-router';
 import Constants, { Links } from 'src/commons/utils/Constants';
 import { showWarningMessage } from 'src/commons/utils/notifications/NotificationsHelper';
 import { register as registerServiceWorker } from 'src/commons/utils/RegisterServiceWorker';
 import { triggerSyncLogs } from 'src/features/eventLogging/client';
 import { store } from 'src/pages/createStore';
 
+import { initializeAgGridModules } from './bootstrap/agGrid';
+import { initializeSentryLogging } from './bootstrap/sentry';
 import ApplicationWrapper from './commons/application/ApplicationWrapper';
 import { createInBrowserFileSystem } from './pages/fileSystem/createInBrowserFileSystem';
 
-if (Constants.sentryDsn) {
-  Sentry.init({
-    dsn: Constants.sentryDsn,
-    environment: Constants.sourceAcademyEnvironment,
-    release: `cadet-frontend@${Constants.sourceAcademyVersion}`,
-    integrations: [
-      Sentry.reactRouterV7BrowserTracingIntegration({
-        useEffect,
-        useLocation,
-        useNavigationType,
-        createRoutesFromChildren,
-        matchRoutes
-      }),
-      Sentry.replayIntegration()
-    ]
-  });
-  const userId = store.getState().session.userId;
-  Sentry.setUser(typeof userId !== 'undefined' ? { id: userId.toString() } : null);
-}
+initializeSentryLogging();
+initializeAgGridModules();
 
 const rootContainer = document.getElementById('root') as HTMLElement;
 const root = createRoot(rootContainer);

src/pages/academy/academyRoutes.ts

@@ -7,16 +7,18 @@ import { assessmentRegExp, gradingRegExp, teamRegExp } from 'src/features/academ
 import { GuardedRoute } from 'src/routes/routeGuard';
 
 import { store } from '../createStore';
+import {
+  contestLeaderboardLoader,
+  leaderboardLoader
+} from '../leaderboard/subcomponents/leaderboardUtils';
 
 const notFoundPath = 'not_found';
 
 const Assessment = () => import('../../commons/assessment/Assessment');
 const Game = () => import('./game/Game');
 const Sourcecast = () => import('../sourcecast/Sourcecast');
 const Achievement = () => import('../achievement/Achievement');
-const Leaderboard = () => import('../leaderboard/Leaderboard');
-const OverallLeaderboardWrapper = () =>
-  import('../leaderboard/subcomponents/OverallLeaderboardWrapper');
+const OverallLeaderboard = () => import('../leaderboard/subcomponents/OverallLeaderboard');
 const ContestLeaderboardWrapper = () =>
   import('../leaderboard/subcomponents/ContestLeaderboardWrapper');
 const NotFound = () => import('../notFound/NotFound');
@@ -78,9 +80,18 @@ const getCommonAcademyRoutes = (): RouteObject[] => {
     },
     { path: 'sourcecast/:sourcecastId?', lazy: Sourcecast },
     { path: 'achievements/*', lazy: Achievement },
-    { path: 'leaderboard/overall', lazy: OverallLeaderboardWrapper },
-    { path: 'leaderboard/contests/*', lazy: ContestLeaderboardWrapper },
-    { path: 'leaderboard/*', lazy: Leaderboard },
+    {
+      path: 'leaderboard',
+      loader: leaderboardLoader,
+      children: [
+        { path: 'overall', lazy: OverallLeaderboard },
+        {
+          path: 'contests/:contestId?/:leaderboardType',
+          loader: contestLeaderboardLoader,
+          lazy: ContestLeaderboardWrapper
+        }
+      ]
+    },
     { path: '*', lazy: NotFound }
   ];
 };

src/pages/academy/adminPanel/AdminPanel.tsx

@@ -1,6 +1,3 @@
-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 React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';

src/pages/academy/adminPanel/subcomponents/AddStoriesUserPanel.tsx

@@ -12,7 +12,7 @@ import {
   Position
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { ColDef } from 'ag-grid-community';
+import { type ColDef, themeBalham } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import { uniqBy } from 'lodash';
 import React from 'react';
@@ -50,8 +50,9 @@ const AddStoriesUserPanel: React.FC<Props> = props => {
   const { CSVReader } = useCSVReader();
 
   const grid = (
-    <div className="Grid ag-grid-parent ag-theme-balham">
+    <div className="Grid">
       <AgGridReact
+        theme={themeBalham}
         domLayout="autoHeight"
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}

src/pages/academy/adminPanel/subcomponents/AddUserPanel.tsx

@@ -12,7 +12,7 @@ import {
   Position
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { ColDef } from 'ag-grid-community';
+import { type ColDef, themeBalham } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import { uniqBy } from 'lodash';
 import React from 'react';
@@ -50,8 +50,9 @@ const AddUserPanel: React.FC<Props> = props => {
   const { CSVReader } = useCSVReader();
 
   const grid = (
-    <div className="Grid ag-grid-parent ag-theme-balham">
+    <div className="Grid">
       <AgGridReact
+        theme={themeBalham}
         domLayout="autoHeight"
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}

src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx

@@ -1,10 +1,11 @@
 import { Button, H2 } from '@blueprintjs/core';
 import {
-  CellValueChangedEvent,
-  ColDef,
-  GridApi,
-  GridReadyEvent,
-  RowDragEvent
+  type CellValueChangedEvent,
+  type ColDef,
+  type GridApi,
+  type GridReadyEvent,
+  type RowDragEvent,
+  themeBalham
 } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import { cloneDeep, isEqual } from 'lodash';
@@ -316,8 +317,9 @@ const AssessmentConfigPanel: WithImperativeApi<
     };
 
     const grid = (
-      <div className="Grid ag-grid-parent ag-theme-balham">
+      <div className="Grid">
         <AgGridReact
+          theme={themeBalham}
           domLayout="autoHeight"
           columnDefs={columnDefs}
           defaultColDef={defaultColumnDefs}