fix: Updating Assessment Configuration crashes Admin Panel (#3071)

* Remove unused handler

* Memoize callbacks

* Bump AG-Grid version

* Fix broken cell renderer APIs

* Revert "Remove unused handler"

This reverts commit 5d14144.

* Fix broken row reorder callback

package.json

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

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

@@ -84,7 +84,7 @@ const AssessmentConfigPanel: WithImperativeApi<
 
     // Manually graded assessments should not be auto-published
     // Check and ensure that isManuallyGraded = true and isGradingAutoPublished = true cannot be set simultaneously
-    const setIsManuallyGraded = (index: number, value: boolean) => {
+    const setIsManuallyGraded = useCallback((index: number, value: boolean) => {
       setConfigs(prev => {
         const newConfigs = cloneDeep(prev) ?? [];
         newConfigs[index].isManuallyGraded = value;
@@ -98,9 +98,9 @@ const AssessmentConfigPanel: WithImperativeApi<
         gridApi.current?.getDisplayedRowAtIndex(index)?.setDataValue('isManuallyGraded', value);
         return newConfigs;
       });
-    };
+    }, []);
 
-    const setIsGradingAutoPublished = (index: number, value: boolean) => {
+    const setIsGradingAutoPublished = useCallback((index: number, value: boolean) => {
       setConfigs(prev => {
         const newConfigs = cloneDeep(prev) ?? [];
         newConfigs[index].isGradingAutoPublished = value;
@@ -114,7 +114,7 @@ const AssessmentConfigPanel: WithImperativeApi<
           ?.setDataValue('isGradingAutoPublished', value);
         return newConfigs;
       });
-    };
+    }, []);
 
     const valueSetter = useCallback(
       <T extends keyof AssessmentConfiguration>(field: T) =>
@@ -254,7 +254,9 @@ const AssessmentConfigPanel: WithImperativeApi<
         setEarlyXp,
         setHasTokenCounter,
         setHasVotingFeatures,
-        setHoursBeforeDecay
+        setHoursBeforeDecay,
+        setIsGradingAutoPublished,
+        setIsManuallyGraded
       ]
     );
 
@@ -281,7 +283,7 @@ const AssessmentConfigPanel: WithImperativeApi<
     // Updates the data passed into ag-grid
     // (this is necessary to update the rowIndex in our custom cellRenderer)
     const onRowDragLeaveOrEnd = (event: RowDragEvent) => {
-      // gridApi.current?.setRowData(assessmentConfig.current);
+      gridApi.current?.setGridOption('rowData', configs);
     };
 
     // Updates our local React state whenever there are changes

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

@@ -1,22 +1,24 @@
 import { Switch } from '@blueprintjs/core';
+import { IRowNode } from 'ag-grid-community';
 import React from 'react';
 import { AssessmentConfiguration } from 'src/commons/assessment/AssessmentTypes';
 import { KeysOfType } from 'src/commons/utils/TypeHelper';
 
 type Props = {
   data: AssessmentConfiguration;
   field: KeysOfType<AssessmentConfiguration, boolean>;
-  rowIndex: number;
+  node: IRowNode<AssessmentConfiguration>;
   setStateHandler: (index: number, value: boolean) => void;
 };
 
 const BooleanCell: React.FC<Props> = props => {
   const { data } = props;
+  const { rowIndex } = props.node;
   const checked = data[props.field];
 
   const changeHandler = React.useCallback(() => {
-    props.setStateHandler(props.rowIndex, !checked);
-  }, [props, checked]);
+    props.setStateHandler(rowIndex!, !checked);
+  }, [props, rowIndex, checked]);
 
   return <Switch checked={checked} onChange={changeHandler} />;
 };

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

@@ -1,23 +1,25 @@
 import { Button, Dialog, DialogBody, DialogFooter, Intent } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { IRowNode } from 'ag-grid-community';
 import React, { useCallback, useState } from 'react';
 import { AssessmentConfiguration } from 'src/commons/assessment/AssessmentTypes';
 import ControlButton from 'src/commons/ControlButton';
 
 type Props = {
   data: AssessmentConfiguration;
-  rowIndex: number;
+  node: IRowNode<AssessmentConfiguration>;
   deleteRowHandler: (index: number) => void;
 };
 
-const DeleteRowCell: React.FC<Props> = ({ data, rowIndex, deleteRowHandler }) => {
+const DeleteRowCell: React.FC<Props> = ({ data, node, deleteRowHandler }) => {
+  const { rowIndex } = node;
   const [isDialogOpen, setIsDialogOpen] = useState(false);
 
   const clickHandler = () => {
     setIsDialogOpen(true);
   };
   const handleDelete = useCallback(() => {
-    deleteRowHandler(rowIndex);
+    deleteRowHandler(rowIndex!);
     setIsDialogOpen(false);
   }, [deleteRowHandler, rowIndex]);
 

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

@@ -1,23 +1,25 @@
 import { NumericInput } from '@blueprintjs/core';
+import { IRowNode } from 'ag-grid-community';
 import React from 'react';
 import { AssessmentConfiguration } from 'src/commons/assessment/AssessmentTypes';
 import { KeysOfType } from 'src/commons/utils/TypeHelper';
 
 type Props = {
   data: AssessmentConfiguration;
   field: KeysOfType<AssessmentConfiguration, number>;
-  rowIndex: number;
+  node: IRowNode<AssessmentConfiguration>;
   setStateHandler: (index: number, value: number) => void;
 };
 
 const NumericCell: React.FC<Props> = props => {
   const { data } = props;
+  const { rowIndex } = props.node;
 
   const changeHandler = React.useCallback(
     (value: number) => {
-      props.setStateHandler(props.rowIndex, value);
+      props.setStateHandler(rowIndex!, value);
     },
-    [props]
+    [props, rowIndex]
   );
 
   return (

yarn.lock

@@ -3740,24 +3740,24 @@ adjust-sourcemap-loader@^4.0.0:
     loader-utils "^2.0.0"
     regex-parser "^2.2.11"
 
-ag-charts-types@10.0.2:
-  version "10.0.2"
-  resolved "https://registry.yarnpkg.com/ag-charts-types/-/ag-charts-types-10.0.2.tgz#fe4d7aa3cdc4ba6f354d7b4bbf65818e242f2fd6"
-  integrity sha512-Nxo5slHOXlaeg0gRIsVnovAosQzzlYfWJtdDy0Aq/VvpJru/PJ+5i2c9aCyEhgRxhBjImsoegwkgRj7gNOWV6Q==
+ag-charts-types@10.3.1:
+  version "10.3.1"
+  resolved "https://registry.yarnpkg.com/ag-charts-types/-/ag-charts-types-10.3.1.tgz#b60163a5da5f27222db71d4fcc20c0aed1854c9c"
+  integrity sha512-oZvu9vJLk6lmzaYi0TmVVmHFZJpVNFziU0bnllx4wR3muXCmnxz5LouKIZ8CYnNiC7VO5HmHNlFu+0DmEO5zxg==
 
-ag-grid-community@32.0.2, ag-grid-community@^32.0.2:
-  version "32.0.2"
-  resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-32.0.2.tgz#a69d99ee944fa07ab5faa103f6f930fbd2d4b432"
-  integrity sha512-vLJJUjnsG9hNK41GNuW2EHu1W264kxA/poOpcX4kmyrjU5Uzvelsbj3HdKAO9POV28iqyRdKGYfAWdn8QzA7KA==
+ag-grid-community@32.3.1, ag-grid-community@^32.3.1:
+  version "32.3.1"
+  resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-32.3.1.tgz#9b7b0580635e6243c6b0c50af66b590d55289293"
+  integrity sha512-j/VpFbDO+7tDNG5xq9JIg3zSYxKbTKlAYjaAFSUwiJF8SDyWYUALWjtiCa+mr/RowyGRTcFv5sc+HCbS6C4UKQ==
   dependencies:
-    ag-charts-types "10.0.2"
+    ag-charts-types "10.3.1"
 
-ag-grid-react@^32.0.2:
-  version "32.0.2"
-  resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-32.0.2.tgz#675b477f23f1f1338af0c15f174f9da3c68baec9"
-  integrity sha512-IWYsoyJ/Z763rWbE5/9SaT1n5xwIKrm/QzOG14l7i8z5J6JdJwfV0aQFATmEE8Xws2H48vlLcLdW1cv4hwV3eg==
+ag-grid-react@^32.3.1:
+  version "32.3.1"
+  resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-32.3.1.tgz#6cea84597b1ccf663027d8113a228e690509de09"
+  integrity sha512-5xd9LGiJHghbb7KwlqzayJ+7Ot+kYXcBwwZan0cT2xtVHpJi9sz//PoWGzBILhxX707ocXz0ICsEyErAa+8WWw==
   dependencies:
-    ag-grid-community "32.0.2"
+    ag-grid-community "32.3.1"
     prop-types "^15.8.1"
 
 agent-base@6: