Merge branch 'dropdown-with-variablesizelist' of Arnei/opencast-admin-interface into r/17.x

Pull request #1343

  Make DropDown more performant for many options

Author: gregorydlogan

package-lock.json

@@ -36,6 +36,7 @@
     "react-router": "^7.6.0",
     "react-select": "^5.10.1",
     "react-textarea-autosize": "^8.5.9",
+    "react-window": "^1.8.11",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^3.1.0",
@@ -66,6 +67,7 @@
     "@types/lodash": "^4.17.16",
     "@types/node": "^22.15.18",
     "@types/react-dom": "^19.1.5",
+    "@types/react-window": "^1.8.8",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react-swc": "^3.9.0",
     "eslint": "^9.26.0",

package.json

@@ -241,6 +241,14 @@ const NewAccessPage = <T extends RequiredFormProps>({
 																								formik.values.acls
 																							)
 																						)}
+																						fetchOptions={() =>
+																							formatAclRolesForDropdown(
+																								filterRoles(
+																									roles,
+																									formik.values.acls
+																								)
+																							)
+																						}
 																						required={true}
 																						handleChange={(element) => {
 																							if (element) {
@@ -259,6 +267,8 @@ const NewAccessPage = <T extends RequiredFormProps>({
 																								user
 																							)
 																						}
+																						skipTranslate
+																						optionHeight={35}
 																						customCSS={{ width: 360, optionPaddingTop: 5 }}
 																					/>
 																				</td>

src/components/events/partials/ModalTabsAndPages/NewAccessPage.tsx

@@ -4,10 +4,12 @@ import {
 	dropDownSpacingTheme,
 	dropDownStyle,
 } from "../../utils/componentStyles";
-import Select, { GroupBase, Props, SelectInstance } from "react-select";
-import CreatableSelect from "react-select/creatable";
+import { GroupBase, MenuListProps, Props, SelectInstance, createFilter } from "react-select";
 import { isJson } from "../../utils/utils";
 import { ParseKeys } from "i18next";
+import { FixedSizeList, ListChildComponentProps } from "react-window";
+import AsyncSelect from 'react-select/async';
+import AsyncCreatableSelect from 'react-select/async-creatable';
 
 export type DropDownOption = {
 	label: string,
@@ -34,7 +36,10 @@ const DropDown = <T, >({
 	disabled = false,
 	menuIsOpen = undefined,
 	handleMenuIsOpen = undefined,
+	skipTranslate = false,
+	optionHeight = 25,
 	customCSS,
+	fetchOptions,
 }: {
 	ref?: React.RefObject<SelectInstance<any, boolean, GroupBase<any>> | null>
 	value: T
@@ -51,12 +56,15 @@ const DropDown = <T, >({
 	disabled?: boolean,
 	menuIsOpen?: boolean,
 	handleMenuIsOpen?: (open: boolean) => void,
+	skipTranslate?: boolean,
+	optionHeight?: number,
 	customCSS?: {
 		isMetadataStyle?: boolean,
 		width?: number | string,
 		optionPaddingTop?: number,
 		optionLineHeight?: string
-	}
+	},
+	fetchOptions?: () => { label: string, value: string}[]
 }) => {
 	const { t } = useTranslation();
 
@@ -84,8 +92,11 @@ const DropDown = <T, >({
 		filterText: string,
 		required: boolean,
 	) => {
-		// Translate?
-		unformattedOptions = unformattedOptions.map(option => ({...option, label: t(option.label as ParseKeys)}))
+		// Translate
+		// Translating is expensive, skip it if it is not required
+		if (!skipTranslate) {
+			unformattedOptions = unformattedOptions.map(option => ({...option, label: t(option.label as ParseKeys)}))
+		}
 
 		// Filter
 		filterText = filterText.toLowerCase();
@@ -119,6 +130,41 @@ const DropDown = <T, >({
 		return unformattedOptions;
 	};
 
+	const itemHeight = optionHeight;
+	/**
+	 * Custom component for list virtualization
+	 */
+	const MenuList = (props: MenuListProps<DropDownOption, false>) => {
+		const { options, children, maxHeight, getValue } = props
+
+		console.log("Menu List render")
+
+		return Array.isArray(children) ? (
+			<div style={{ paddingTop: 4 }}>
+				<FixedSizeList
+					height={maxHeight < (children.length * itemHeight) ? maxHeight : children.length * itemHeight}
+					itemCount={children.length}
+					itemSize={itemHeight}
+					overscanCount={4}
+					width="100%"
+				>
+					{({ index, style }: ListChildComponentProps) => <div style={{ ...style }}>{children[index]}</div>}
+				</FixedSizeList>
+			</div>
+		) : null
+	}
+
+	const loadOptions = (
+		inputValue: string,
+		callback: (options: DropDownOption[]) => void
+	) => {
+		callback(formatOptions(
+			fetchOptions ? fetchOptions() : options,
+			searchText,
+			required,
+		));
+	};
+
 
   let commonProps: Props = {
 		tabIndex: tabIndex,
@@ -129,11 +175,6 @@ const DropDown = <T, >({
 		isSearchable: true,
 		value: { value: value, label: text === "" ? placeholder : text },
 		inputValue: searchText,
-		options: formatOptions(
-			options,
-			searchText,
-			required,
-		),
 		placeholder: placeholder,
 		onInputChange: (value: string) => setSearch(value),
 		onChange: (element) => handleChange(element as {value: T, label: string}),
@@ -142,18 +183,36 @@ const DropDown = <T, >({
 		onMenuClose: () => openMenu(false),
 		isDisabled: disabled,
 		openMenuOnFocus: openMenuOnFocus,
+
+		//@ts-expect-error: React-Select typing does not account for the typing of option it itself requires
+		components: { MenuList },
+		filterOption: createFilter({ ignoreAccents: false }), // To improve performance on filtering
 	};
 
 	return creatable ? (
-		<CreatableSelect
+		<AsyncCreatableSelect
 			ref={selectRef}
 			{...commonProps}
+			cacheOptions
+			defaultOptions={formatOptions(
+				options,
+				searchText,
+				required,
+			)}
+			loadOptions={loadOptions}
 		/>
 	) : (
-		<Select
+		<AsyncSelect
 			ref={selectRef}
 			{...commonProps}
 			noOptionsMessage={() => t("SELECT_NO_MATCHING_RESULTS")}
+			cacheOptions
+			defaultOptions={formatOptions(
+				options,
+				searchText,
+				required,
+			)}
+			loadOptions={loadOptions}
 		/>
 	);
 };

src/components/shared/DropDown.tsx

@@ -457,6 +457,7 @@ const FilterSwitch = ({
 						openMenuOnFocus
 						menuIsOpen={openSecondFilterMenu}
 						handleMenuIsOpen={setOpenSecondFilterMenu}
+						skipTranslate={!filter.translatable}
 						customCSS={{ width: 200, optionPaddingTop: 5 }}
 					/>
 				</div>

src/components/shared/TableFilters.tsx

@@ -495,6 +495,8 @@ const ResourceDetailsAccessPolicyTab = ({
 																										user
 																									)
 																								}
+																								skipTranslate
+																								optionHeight={35}
 																								customCSS={{ width: 360, optionPaddingTop: 5 }}
 																							/>
 																						) : (

src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx

@@ -227,6 +227,8 @@ const AclAccessPage = <T extends RequiredFormProps>({
 																							"USERS.ACLS.NEW.ACCESS.ROLES.LABEL"
 																						)}
 																						disabled={!isAccess}
+																						skipTranslate
+																						optionHeight={35}
 																						customCSS={{ width: 360, optionPaddingTop: 5 }}
 																					/>
 																				</td>

src/components/users/partials/wizard/AclAccessPage.tsx

@@ -1,4 +1,4 @@
-import { createSelector } from "reselect";
+import { createSelector } from "@reduxjs/toolkit";
 import { RootState } from "../store";
 import { Resource } from "../slices/tableSlice";