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}