From 9805da3b8420651b8c9e7ce151799f16e7dcbe00 Mon Sep 17 00:00:00 2001 From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Tue, 29 Oct 2024 13:48:44 +0800 Subject: [PATCH] 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 5d141443553cd9c3ef7f7026b4e294eadebf4f3a. * Fix broken row reorder callback --- package.json | 4 +-- .../AssessmentConfigPanel.tsx | 14 ++++++---- .../assessmentConfigPanel/BooleanCell.tsx | 8 ++++-- .../assessmentConfigPanel/DeleteRowCell.tsx | 8 ++++-- .../assessmentConfigPanel/NumericCell.tsx | 8 ++++-- yarn.lock | 28 +++++++++---------- 6 files changed, 39 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index eee63af97f..7cffb2064a 100644 --- a/package.json +++ b/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", diff --git a/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx b/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx index 9bbb0f3b53..18ca059f82 100644 --- a/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx +++ b/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( (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 diff --git a/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/BooleanCell.tsx b/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/BooleanCell.tsx index 529d7222c0..8cc169bf38 100644 --- a/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/BooleanCell.tsx +++ b/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/BooleanCell.tsx @@ -1,4 +1,5 @@ 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'; @@ -6,17 +7,18 @@ import { KeysOfType } from 'src/commons/utils/TypeHelper'; type Props = { data: AssessmentConfiguration; field: KeysOfType; - rowIndex: number; + node: IRowNode; setStateHandler: (index: number, value: boolean) => void; }; const BooleanCell: React.FC = 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 ; }; diff --git a/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/DeleteRowCell.tsx b/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/DeleteRowCell.tsx index f02a817f54..de762ff9ce 100644 --- a/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/DeleteRowCell.tsx +++ b/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; deleteRowHandler: (index: number) => void; }; -const DeleteRowCell: React.FC = ({ data, rowIndex, deleteRowHandler }) => { +const DeleteRowCell: React.FC = ({ 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]); diff --git a/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/NumericCell.tsx b/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/NumericCell.tsx index c800de84cc..31ae2d7edb 100644 --- a/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/NumericCell.tsx +++ b/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/NumericCell.tsx @@ -1,4 +1,5 @@ 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'; @@ -6,18 +7,19 @@ import { KeysOfType } from 'src/commons/utils/TypeHelper'; type Props = { data: AssessmentConfiguration; field: KeysOfType; - rowIndex: number; + node: IRowNode; setStateHandler: (index: number, value: number) => void; }; const NumericCell: React.FC = 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 ( diff --git a/yarn.lock b/yarn.lock index 7707927fe3..375d5f939e 100644 --- a/yarn.lock +++ b/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: