Merge branch 'async-select-for-collections' of Arnei/opencast-admin-interface into r/18.x

Pull request #1375 Make event metadata load faster by fetching series options asynchronously

Author: gregorydlogan

src/components/shared/DropDown.tsx

@@ -45,7 +45,7 @@ const DropDown = <T, >({
 ref?: React.RefObject<SelectInstance<any, boolean, GroupBase<any>> | null>
 value: T
 text: string,
-options: DropDownOption[],
+options?: DropDownOption[],
 required: boolean,
 handleChange: (option: {value: T, label: string} | null) => void
 placeholder: string
@@ -66,7 +66,7 @@ const DropDown = <T, >({
 optionPaddingTop?: number,
 optionLineHeight?: string
 },
-fetchOptions?: () => { label: string, value: string}[]
+fetchOptions?: (inputValue: string) => Promise<{ label: string, value: string }[]>
 }) => {
 const { t } = useTranslation();
 
@@ -157,14 +157,29 @@ const DropDown = <T, >({
 ) : null;
 };
 
+const filterOptions = (inputValue: string) => {
+if (options) {
+return options.filter(option =>
+option.label.toLowerCase().includes(inputValue.toLowerCase()),
+);
+}
+return [];
+};
+
+const loadOptionsAsync = (inputValue: string, callback: (options: DropDownOption[]) => void) => {
+setTimeout(async () => {
+callback(formatOptions(
+fetchOptions ? await fetchOptions(inputValue) : filterOptions(inputValue),
+required,
+));
+}, 1000);
+};
+
 const loadOptions = (
 inputValue: string,
 callback: (options: DropDownOption[]) => void,
 ) => {
-callback(formatOptions(
-fetchOptions ? fetchOptions() : options,
-required,
-));
+callback(formatOptions(filterOptions(inputValue), required));
 };
 
 
@@ -176,10 +191,14 @@ const DropDown = <T, >({
 autoFocus: autoFocus,
 isSearchable: true,
 value: { value: value, label: text === "" ? placeholder : text },
-options: formatOptions(
-options,
-required,
-),
+defaultOptions: options
+? formatOptions(
+options,
+required,
+)
+: true,
+cacheOptions: true,
+loadOptions: fetchOptions ? loadOptionsAsync : loadOptions,
 placeholder: placeholder,
 onChange: element => handleChange(element as {value: T, label: string}),
 menuIsOpen: menuIsOpen,
@@ -191,31 +210,18 @@ const DropDown = <T, >({
 
 // @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 ? (
 <AsyncCreatableSelect
 ref={selectRef}
 {...commonProps}
-cacheOptions
-defaultOptions={formatOptions(
-options,
-required,
-)}
-loadOptions={loadOptions}
 />
 ) : (
 <AsyncSelect
 ref={selectRef}
 {...commonProps}
 noOptionsMessage={() => t("SELECT_NO_MATCHING_RESULTS")}
-cacheOptions
-defaultOptions={formatOptions(
-options,
-required,
-)}
-loadOptions={loadOptions}
 />
 );
 };

src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx

@@ -543,11 +543,6 @@ export const AccessPolicyTable = <T extends AccessPolicyTabFormikProps>({
 ? formatAclRolesForDropdown(rolesFilteredbyPolicies)
 : []
 }
-fetchOptions={() =>
-roles.length > 0
-? formatAclRolesForDropdown(rolesFilteredbyPolicies)
-: []
-}
 required={true}
 creatable={true}
 handleChange={element => {

src/components/shared/wizard/RenderField.tsx

@@ -1,15 +1,16 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import DatePicker from "react-datepicker";
 import cn from "classnames";
-import { getMetadataCollectionFieldName } from "../../../utils/resourceUtils";
+import { getMetadataCollectionFieldName, transformListProvider } from "../../../utils/resourceUtils";
 import { getCurrentLanguageInformation } from "../../../utils/utils";
 import DropDown from "../DropDown";
 import { parseISO } from "date-fns";
 import { FieldProps } from "formik";
 import { MetadataField } from "../../../slices/eventSlice";
 import { GroupBase, SelectInstance } from "react-select";
 import TextareaAutosize from "react-textarea-autosize";
+import axios from "axios";
 
 /**
  * This component renders an editable field for single values depending on the type of the corresponding metadata
@@ -65,7 +66,7 @@ const RenderField = ({
 )}
 {metadataField.type === "text" &&
 !!metadataField.collection &&
-metadataField.collection.length > 0 && (
+(
 <EditableSingleSelect
 metadataField={metadataField}
 field={field}
@@ -91,7 +92,7 @@ const RenderField = ({
 )}
 {metadataField.type === "text" &&
 !(
-!!metadataField.collection && metadataField.collection.length !== 0
+metadataField.collection
 ) && (
 <EditableSingleValue
 field={field}
@@ -195,16 +196,7 @@ const EditableDateValue = ({
 };
 
 // renders editable field for selecting value via dropdown
-const EditableSingleSelect = ({
-field,
-metadataField,
-text,
-form: { setFieldValue },
-isFirstField,
-focused,
-setFocused,
-ref,
-}: {
+type EditableSingleSelectProps = ({
 field: FieldProps["field"]
 metadataField: MetadataField
 text: string
@@ -213,9 +205,25 @@ const EditableSingleSelect = ({
 focused: boolean,
 setFocused: (open: boolean) => void
 ref: React.RefObject<SelectInstance<any, boolean, GroupBase<any>>>
-}) => {
+})
+const EditableSingleSelect = (props: EditableSingleSelectProps) => {
 const { t } = useTranslation();
 
+const {
+field,
+metadataField,
+text,
+form: { setFieldValue },
+isFirstField,
+focused,
+setFocused,
+ref,
+} = props;
+
+if (metadataField.id === "isPartOf") {
+return <EditableSingleSelectSeries {...props} />;
+}
+
 return (
 <DropDown
 ref={ref}
@@ -321,4 +329,67 @@ const EditableSingleValueTime = ({
 );
 };
 
+/**
+ * Special case for series. Uses an async selector to fetch options.
+ *
+ * Ideally we could generalize this for all metadata fields with listproviders,
+ * but other listproviders do not offer the required filtering capabilities.
+ */
+const EditableSingleSelectSeries = ({
+field,
+metadataField,
+text,
+form: { setFieldValue },
+isFirstField,
+focused,
+setFocused,
+ref,
+}: EditableSingleSelectProps) => {
+const { t } = useTranslation();
+
+const [label, setLabel] = useState("");
+
+useEffect(() => {
+// The metadata catalog only contains the field value, so we need to fetch the label ourselves
+const fetchLabelById = async () => {
+if (field.value) {
+const res = await axios.get<{ [key: string]: string }>(`/admin-ng/resources/SERIES.WRITE_ONLY.json?limit=1&filter=textFilter:${field.value}`);
+const data = res.data;
+const transformedData = transformListProvider(data);
+if (transformedData.length > 0) {
+setLabel(transformedData[0].label);
+}
+}
+};
+fetchLabelById();
+}, [field.value]);
+
+// Fetch collection
+const fetchOptions = async (inputValue: string) => {
+const res = await axios.get<{ [key: string]: string }>(`/admin-ng/resources/SERIES.WRITE_ONLY.json?filter=textFilter:${inputValue}`);
+const data = res.data;
+return transformListProvider(data);
+};
+
+return (
+<DropDown
+ref={ref}
+value={field.value as string}
+text={label}
+fetchOptions={fetchOptions}
+required={metadataField.required}
+handleChange={element => element && setFieldValue(field.name, element.value)}
+placeholder={focused
+? `-- ${t("SELECT_NO_OPTION_SELECTED")} --`
+: `${t("SELECT_NO_OPTION_SELECTED")}`
+}
+customCSS={{ isMetadataStyle: focused ? false : true }}
+handleMenuIsOpen={(open: boolean) => setFocused(open)}
+openMenuOnFocus
+autoFocus={isFirstField}
+skipTranslate={!metadataField.translatable}
+/>
+);
+};
+
 export default RenderField;

src/utils/resourceUtils.ts

@@ -177,6 +177,27 @@ export const transformMetadataFields = (metadata: MetadataField[]) => {
 return metadata;
 };
 
+export const transformListProvider = (collection: { [key: string]: string }) => {
+return Object.entries(collection)
+.map(([key, value]) => {
+if (isJson(value)) {
+// TODO: Handle JSON parsing errors
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+const collectionParsed: { [key: string]: string } = JSON.parse(value);
+return {
+label: collectionParsed.label || value,
+value: key,
+...collectionParsed,
+};
+} else {
+return {
+label: value,
+value: key,
+};
+}
+});
+};
+
 // transform metadata catalog for update via post request
 export const transformMetadataForUpdate = (catalog: MetadataCatalog, values: { [key: string]: MetadataCatalog["fields"][0]["value"] }) => {
 const fields: MetadataCatalog["fields"] = [];