Merge branch 'series-selection-width-2' of JulianKniephoff/opencast-admin-interface into r/18.x

Pull request #1445

  Refactor dropdown components and fix width in metadata modals

Author: gregorydlogan

src/components/shared/wizard/RenderField.tsx

@@ -213,7 +213,7 @@ const EditableSingleSelect = (props: EditableSingleSelectProps) => {
 		field,
 		metadataField,
 		text,
-		form: { setFieldValue },
+		form,
 		isFirstField,
 		focused,
 		setFocused,
@@ -224,26 +224,16 @@ const EditableSingleSelect = (props: EditableSingleSelectProps) => {
 		return <EditableSingleSelectSeries {...props} />;
 	}
 
-	return (
-		<DropDown
-			ref={ref}
-			value={field.value as string}
-			text={text}
-			options={metadataField.collection
-				? metadataField.collection.map(item => ({ label: item.label ?? item.name, value: item.value, order: item.order }))
-				: []}
-			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}
-		/>
-	);
+	return <EditableSingleSelectDropDown
+		field={field}
+		metadataField={metadataField}
+		text={text}
+		form={form}
+		isFirstField={isFirstField}
+		focused={focused}
+		setFocused={setFocused}
+		ref={ref}
+	/>;
 };
 
 // Renders editable text area
@@ -338,8 +328,7 @@ const EditableSingleValueTime = ({
 const EditableSingleSelectSeries = ({
 	field,
 	metadataField,
-	text,
-	form: { setFieldValue },
+	form,
 	isFirstField,
 	focused,
 	setFocused,
@@ -371,19 +360,50 @@ const EditableSingleSelectSeries = ({
 		return transformListProvider(data);
 	};
 
+	return <EditableSingleSelectDropDown
+		field={field}
+		metadataField={metadataField}
+		text={label}
+		form={form}
+		isFirstField={isFirstField}
+		focused={focused}
+		setFocused={setFocused}
+		ref={ref}
+		fetchOptions={fetchOptions}
+	/>;
+};
+
+const EditableSingleSelectDropDown = ({
+	field,
+	metadataField,
+	text,
+	form: { setFieldValue },
+	options,
+	fetchOptions,
+	isFirstField,
+	focused,
+	setFocused,
+	ref,
+}: EditableSingleSelectProps & Pick<
+	Parameters<typeof DropDown>[0],
+	"options" | "fetchOptions"
+>) => {
+	const { t } = useTranslation();
+
 	return (
 		<DropDown
 			ref={ref}
 			value={field.value as string}
-			text={label}
+			text={text}
+			options={options}
 			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 }}
+			customCSS={{ isMetadataStyle: focused ? false : true, width: "100%" }}
 			handleMenuIsOpen={(open: boolean) => setFocused(open)}
 			openMenuOnFocus
 			autoFocus={isFirstField}