SCRUM-3894 upgrade React

src/main/cliapp/package.json

@@ -18,8 +18,10 @@
         "@okta/okta-auth-js": "^6.1.0",
         "@okta/okta-react": "^6.4.2",
         "@okta/okta-signin-widget": "^6.0.1",
+        "@tanstack/react-query": "^4.36.1",
+        "@tanstack/react-query-devtools": "^4.36.1",
         "@testing-library/jest-dom": "^5.16.5",
-        "@testing-library/react": "^12.1.5",
+        "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^14.4.3",
         "axios": "^0.19.0",
         "chart.js": "3.3.2",
@@ -33,16 +35,15 @@
         "primeicons": "^5.0.0",
         "primereact": "^10.0.9",
         "prismjs": "1.9.0",
-        "react": "^17.0.1",
+        "react": "^18.2.0",
         "react-app-polyfill": "^1.0.6",
-        "react-dom": "^17.0.1",
-        "react-json-view": "^1.21.3",
+        "react-dom": "^18.2.0",
         "react-moment": "^1.1.1",
-        "react-query": "^3.34.15",
         "react-router-dom": "^5.2.0",
         "react-scripts": "^5.0.0",
         "react-transition-group": "^4.4.1",
         "react-use-websocket": "^3.0.0",
+        "react18-json-view": "^0.2.8",
         "sass": "^1.32.8",
         "use-immer": "^0.7.0"
     },

src/main/cliapp/src/components/Autocomplete/AutocompleteFormEditor.js

@@ -46,7 +46,7 @@ export const AutocompleteFormEditor = (
 				suggestions={suggestions}
 				itemTemplate={itemTemplate}
 				completeMethod={(event) => search(event, setSuggestions, setQuery, rowProps)}
-				onHide={(e) => op.current.hide(e)}
+				onHide={(e) => op.current?.hide(e)}
 				onChange={(e) => onValueChangeHandler(e)}
 				className={classNames}
 				inputClassName={inputClassNames}

src/main/cliapp/src/components/Filters/FilterComponentMultiSelect.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { MultiSelect } from 'primereact/multiselect';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { SearchService } from '../../service/SearchService';
 
 export function FilterComponentMultiSelect({ isInEditMode, filterConfig, currentFilters, onFilter, endpoint }) {

src/main/cliapp/src/components/GenericDataTable/GenericDataTable.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 
 import { DataTable } from 'primereact/datatable';
 import { Dialog } from 'primereact/dialog';
@@ -34,7 +34,8 @@ export const GenericDataTable = (props) => {
 		deprecateOption = false,
 		modReset = false,
 		highlightObsolete = true,
-		fetching
+		fetching,
+		isEditable
 	} = props;
 
 	const {
@@ -122,8 +123,6 @@ export const GenericDataTable = (props) => {
 			/>
 		);
 	};
-	//This is needed so column order is tracked properly
-	useEffect(() => dataTable.current.resetColumnOrder() );
 
 	useEffect(() => {
 		const orderedColumns = orderColumns(columns, tableState.orderedColumnNames);
@@ -267,7 +266,7 @@ export const GenericDataTable = (props) => {
 					currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
 					rows={tableState.rows} rowsPerPageOptions={[10, 20, 50, 100, 250, 1000]}
 					rowClassName = {(props) => getRowClass(props)} loading={fetching} loadingIcon="pi pi-spin pi-spinner">
-					{props.isEditable &&
+					{isEditable &&
 						<Column field='rowEditor' rowEditor className={"p-text-center p-0 min-w-3rem max-w-3rem text-base"} filter filterElement={rowEditorFilterNameHeader} showFilterMenu={false}
 								bodyStyle={{ textAlign: 'center' }} frozen headerClassName='surface-0 w-3rem sticky'
 						/>
@@ -276,21 +275,21 @@ export const GenericDataTable = (props) => {
 						<Column field="delete"
 						editor={(props) => deleteAction(props, true)}
 						body={(props) => deleteAction(props, isInEditMode)} filterElement={rowEditorFilterNameHeader}
-						showFilterMenu={false} className={`p-text-center p-0 min-w-3rem max-w-3rem ${props.isEditable ? 'visible' : 'hidden'}`} bodyStyle={{textAlign: 'center'}}
+						showFilterMenu={false} className={`p-text-center p-0 min-w-3rem max-w-3rem ${isEditable ? 'visible' : 'hidden'}`} bodyStyle={{textAlign: 'center'}}
 						frozen headerClassName='surface-0 w-3rem sticky'/>
 					}
 					{duplicationEnabled &&
 						<Column field="duplicate"
 						editor={(props) => <DuplicationAction props={props} handleDuplication={handleDuplication} disabled={true}/>}
 						body={(props) => <DuplicationAction props={props} handleDuplication={handleDuplication} disabled={isInEditMode}/>}
-						showFilterMenu={false} className={`p-text-center p-0 min-w-3rem max-w-3rem ${props.isEditable ? 'visible' : 'hidden'}`} bodyStyle={{textAlign: 'center'}}
+						showFilterMenu={false} className={`p-text-center p-0 min-w-3rem max-w-3rem ${isEditable ? 'visible' : 'hidden'}`} bodyStyle={{textAlign: 'center'}}
 						frozen headerClassName='surface-0 w-3rem sticky'/>
 					}
 					{hasDetails &&
 						<Column field="details"
 						editor={(props) => <EntityDetailsAction identifier={getIdentifier(props.rowData)} disabled={true}/>} 
 						body={(props) => <EntityDetailsAction identifier={getIdentifier(props)} disabled={isInEditMode}/>} 
-						showFilterMenu={false} className={`p-text-center p-0 min-w-3rem max-w-3rem ${props.isEditable ? 'visible' : 'hidden'}`} bodyStyle={{textAlign: 'center'}}
+						showFilterMenu={false} className={`p-text-center p-0 min-w-3rem max-w-3rem ${isEditable ? 'visible' : 'hidden'}`} bodyStyle={{textAlign: 'center'}}
 						frozen headerClassName='surface-0 w-3rem sticky'/>
 					}
 					{columnList}

src/main/cliapp/src/components/GenericDataTable/useGenericDataTable.js

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 
-import { trimWhitespace, returnSorted, validateBioEntityFields } from '../../utils/utils';
+import { trimWhitespace, returnSorted, validateBioEntityFields, restoreTableState } from '../../utils/utils';
 import { getDefaultTableState, getModTableState } from '../../service/TableStateService';
 
 export const useGenericDataTable = ({
@@ -20,7 +20,11 @@ export const useGenericDataTable = ({
 	setTotalRecords,
 	totalRecords,
 	columns,
-	defaultColumnWidth
+	defaultColumnWidth,
+	isEditable, 
+	deletionEnabled, 
+	duplicationEnabled, 
+	hasDetails
 }) => {
 
 	const [originalRows, setOriginalRows] = useState([]);
@@ -326,19 +330,44 @@ export const useGenericDataTable = ({
 
 	const setToModDefault = () => {
 		const modTableState = getModTableState(tableState.tableKeyName, tableState.defaultColumnWidths, tableState.defaultColumnNames);
-		setTableState(modTableState);
+		restoreTableState(
+			columns, 
+			dataTable, 
+			modTableState.orderedColumnNames, 
+			isEditable, 
+			deletionEnabled, 
+			duplicationEnabled, 
+			hasDetails, 
+			modTableState
+		);
 		dataTable.current.resetScroll();
+		setTableState(modTableState);
 	}
 
 	const resetTableState = () => {
 		let defaultTableState = getDefaultTableState(tableState.tableKeyName, columns, defaultColumnWidth);
-
-		setTableState(defaultTableState);
+		restoreTableState(
+			columns, 
+			dataTable, 
+			defaultTableState.orderedColumnNames, 
+			isEditable, 
+			deletionEnabled, 
+			duplicationEnabled, 
+			hasDetails, 
+			defaultTableState
+		);
 		dataTable.current.resetScroll();
+		setTableState(defaultTableState);
 	}
 
 	const colReorderHandler = (event) => {
-		const columnNames = event.columns.filter(column => column.props.field !== 'rowEditor' && column.props.field !== 'delete').map(column => column.props.header);
+		const columnNames = event.columns.filter((column) => {
+			return column.props.field !== 'rowEditor' 
+			&& column.props.field !== 'delete' 
+			&& column.props.field !== 'duplicate'
+			&& column.props.field !== 'details';
+		})
+		.map(column => column.props.header);
 
 		for(let i = 0; i < tableState.orderedColumnNames.length; i++) {
 			if(!columnNames.includes(tableState.orderedColumnNames[i])) {

src/main/cliapp/src/components/HealthComponent.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { Button } from 'primereact/button';
 import { HealthService } from '../service/HealthService';
 

src/main/cliapp/src/components/MetricsComponent.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { TreeTable } from 'primereact/treetable';
 import { Column } from 'primereact/column';
 import { Button } from 'primereact/button';

src/main/cliapp/src/containers/allelesPage/AlleleDetailPage.js

@@ -5,7 +5,7 @@ import { Divider } from 'primereact/divider';
 import { Button } from 'primereact/button';
 import { ProgressSpinner } from 'primereact/progressspinner';
 import { useParams } from 'react-router-dom';
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { AlleleService } from '../../service/AlleleService';
 import ErrorBoundary from '../../components/Error/ErrorBoundary';
 import { TaxonFormEditor } from '../../components/Editors/taxon/TaxonFormEditor';

src/main/cliapp/src/containers/allelesPage/AllelesTable.js

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { GenericDataTable } from '../../components/GenericDataTable/GenericDataTable';
 import { ErrorMessageComponent } from '../../components/Error/ErrorMessageComponent';
 import { AlleleService } from '../../service/AlleleService';

src/main/cliapp/src/containers/conditionRelationPage/ConditionRelationTable.js

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { Toast } from 'primereact/toast';
 import { SearchService } from '../../service/SearchService';
 import { Messages } from 'primereact/messages';

src/main/cliapp/src/containers/conditionRelationPage/NewRelationForm.js

@@ -5,7 +5,7 @@ import { Button } from "primereact/button";
 import { InputText } from "primereact/inputtext";
 import { Dropdown } from "primereact/dropdown";
 import { Toast } from "primereact/toast";
-import { useMutation, useQueryClient } from "react-query";
+import { useMutation } from '@tanstack/react-query';
 import { AutocompleteEditor } from "../../components/Autocomplete/AutocompleteEditor";
 import { LiteratureAutocompleteTemplate } from "../../components/Autocomplete/LiteratureAutocompleteTemplate";
 import { ExConAutocompleteTemplate } from '../../components/Autocomplete/ExConAutocompleteTemplate';
@@ -24,7 +24,6 @@ export const NewRelationForm = ({
 	conditionRelationTypeTerms,
 	setNewConditionRelation,
 }) => {
-	const queryClient = useQueryClient();
 	const toast_success = useRef(null);
 	const toast_error = useRef(null);
 	const { newRelation, errorMessages, submitted, newRelationDialog } = newRelationState;
@@ -46,13 +45,7 @@ export const NewRelationForm = ({
 		newRelationDispatch({ type: "SUBMIT" });
 		mutation.mutate(newRelation, {
 			onSuccess: (data) => {
-				//Invalidating the query immediately after success leads to api results that don't always include the new entity
-				setTimeout(() => {
-					queryClient.invalidateQueries("Experiments").then(() => {
-						//needs to be set after api call otherwise the newly appended entity would be removed when there are no filters
-						setNewConditionRelation(data.data.entity);
-					});
-				}, 1000);
+				setNewConditionRelation(data.data.entity);
 				toast_success.current.show({ severity: 'success', summary: 'Successful', detail: 'New Relation Added' });
 				newRelationDispatch({ type: "RESET" });
 			},

src/main/cliapp/src/containers/controlledVocabularyPage/ControlledVocabularyTable.js

@@ -1,6 +1,6 @@
 import React, {useRef, useState, useReducer} from 'react';
 import { GenericDataTable } from '../../components/GenericDataTable/GenericDataTable';
-import { useMutation, useQuery} from 'react-query';
+import { useMutation, useQuery} from '@tanstack/react-query';
 import { Toast } from 'primereact/toast';
 
 import { Tooltip } from 'primereact/tooltip';
@@ -52,7 +52,7 @@ export const ControlledVocabularyTable = () => {
 	const obsoleteTerms = useControlledVocabularyService('generic_boolean_terms');
 	let vocabularyService = new VocabularyService();
 
-	useQuery("vocabularies",() => vocabularyService.getVocabularies(), {
+	useQuery(['vocabularies'], () => vocabularyService.getVocabularies(), {
 			onSuccess: (data) => {
 					setVocabularies(data.data.results.sort(function (a, b) {
 						return a.name.localeCompare(b.name, 'en', {'sensitivity' : 'base'});