Merge branch 'dropdown-options-typing' of Arnei/opencast-admin-interface into main

Pull request #1075

  Add typing to dropdown options

Author: gregorydlogan

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

@@ -218,8 +218,7 @@ const EditScheduledEventsEditPage = <T extends RequiredFormProps>({
 																	text={
 																		formik.values.editedEvents.length > 0 ? findSeriesName(seriesOptions, formik.values.editedEvents) : ""
 																	}
-																	options={seriesOptions}
-																	type={"isPartOf"}
+																	options={seriesOptions.map((option) => ({ label: option.name, value: option.value }) )}
 																	required={false}
 																	handleChange={(element) => {
 																		if (element) {

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

@@ -246,8 +246,7 @@ const EventDetailsCommentsTab = ({
 											<DropDown
 												value={commentReason}
 												text={t(commentReason)}
-												options={Object.entries(commentReasons)}
-												type={"comment"}
+												options={Object.entries(commentReasons).map(([key, value]) => ({ label: value, value: key }))}
 												required={true}
 												handleChange={(element) => {
 													if (element) {
@@ -257,6 +256,7 @@ const EventDetailsCommentsTab = ({
 												placeholder={t(
 													"EVENTS.EVENTS.DETAILS.COMMENTS.SELECTPLACEHOLDER"
 												)}
+												customCSS={{width: 200, optionPaddingTop: 5, optionLineHeight: "105%"}}
 											/>
 										</div>
 

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

@@ -29,6 +29,7 @@ import { renderValidDate } from "../../../../utils/dateUtils";
 import { Tooltip } from "../../../shared/Tooltip";
 import { WorkflowTabHierarchy } from "../modals/EventDetails";
 import { useTranslation } from "react-i18next";
+import { formatWorkflowsForDropdown } from "../../../../utils/dropDownUtils";
 
 /**
  * This component manages the workflows tab of the event details modal
@@ -334,10 +335,9 @@ const EventDetailsWorkflowTab = ({
 																					options={
 																						!!workflowDefinitions &&
 																						workflowDefinitions.length > 0
-																							? workflowDefinitions /*w.id as w.title for w in workflowDefinitions | orderBy: 'displayOrder':true*/
+																							? formatWorkflowsForDropdown(workflowDefinitions)
 																							: []
 																					}
-																					type={"workflow"}
 																					required={true}
 																					handleChange={(element) => {
 																						if (element) {
@@ -358,6 +358,7 @@ const EventDetailsWorkflowTab = ({
 																						!hasCurrentAgentAccess() ||
 																						!isRoleWorkflowEdit
 																					}
+																					customCSS={{width: "100%"}}
 																				/>
 																				{/*pre-select-from="workflowDefinitionIds"*/}
 																			</div>

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

@@ -21,6 +21,7 @@ import { fetchSeriesDetailsAcls } from "../../../../slices/seriesDetailsSlice";
 import { getSeriesDetailsAcl } from "../../../../selectors/seriesDetailsSelectors";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import { TransformedAcl } from "../../../../slices/aclDetailsSlice";
+import { formatAclRolesForDropdown, formatAclTemplatesForDropdown } from "../../../../utils/dropDownUtils";
 
 /**
  * This component renders the access page for new events and series in the wizards.
@@ -148,8 +149,7 @@ const NewAccessPage = <T extends RequiredFormProps>({
 																				aclTemplates,
 																				formik.values.aclTemplate
 																			)}
-																			options={aclTemplates}
-																			type={"aclTemplate"}
+																			options={formatAclTemplatesForDropdown(aclTemplates)}
 																			required={true}
 																			handleChange={(element) => {
 																				if (element) {
@@ -160,6 +160,7 @@ const NewAccessPage = <T extends RequiredFormProps>({
 																				"EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.LABEL"
 																			)}
 																			autoFocus={true}
+																			customCSS={{ width: 200, optionPaddingTop: 5 }}
 																		/>
 																	</div>
 																</td>
@@ -235,11 +236,12 @@ const NewAccessPage = <T extends RequiredFormProps>({
 																							<DropDown
 																								value={policy.role}
 																								text={policy.role}
-																								options={filterRoles(
-																									roles,
-																									formik.values.acls
+																								options={formatAclRolesForDropdown(
+																									filterRoles(
+																										roles,
+																										formik.values.acls
+																									)
 																								)}
-																								type={"aclRole"}
 																								required={true}
 																								handleChange={(element) => {
 																									if (element) {
@@ -258,6 +260,7 @@ const NewAccessPage = <T extends RequiredFormProps>({
 																										user
 																									)
 																								}
+																								customCSS={{ width: 360, optionPaddingTop: 5 }}
 																							/>
 																						</td>
 																						{/* Checkboxes for  policy.read and policy.write*/}

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

@@ -7,6 +7,7 @@ import DropDown from "../../../shared/DropDown";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { fetchWorkflowDef } from "../../../../slices/workflowSlice";
 import { FormikProps } from "formik";
+import { formatWorkflowsForDropdown } from "../../../../utils/dropDownUtils";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 
 /**
@@ -86,8 +87,7 @@ const NewProcessingPage = <T extends RequiredFormProps>({
 														formik.values.processingWorkflow === workflow.id
 												)?.title ?? ""
 											}
-											options={workflowDef}
-											type={"workflow"}
+											options={formatWorkflowsForDropdown(workflowDef)}
 											required={true}
 											handleChange={(element) => {
 												if (element) {
@@ -97,6 +97,7 @@ const NewProcessingPage = <T extends RequiredFormProps>({
 											placeholder={t(
 												"EVENTS.EVENTS.NEW.PROCESSING.SELECT_WORKFLOW"
 											)}
+											customCSS={{width: "100%"}}
 										/>
 									</div>
 								) : (

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

@@ -60,15 +60,15 @@ const NewThemePage = <T extends RequiredFormProps>({
 															text={
 																getName(formik.values.theme) ?? ""
 															}
-															options={seriesThemes}
-															type={"newTheme"}
+															options={seriesThemes.map(theme => ({ label: theme.name, value: theme.id}))}
 															required={false}
 															handleChange={(element) => {
 																if (element) {
 																	formik.setFieldValue("theme", element.value)
 																}
 															}}
 															placeholder={t("EVENTS.SERIES.NEW.THEME.LABEL")}
+															customCSS={{ width: "100%" }}
 														/>
 													</div>
 												</p>

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

@@ -19,7 +19,10 @@ const SeriesDetailsThemeTab = ({
 	seriesId,
 }: {
 	theme: string,
-	themeNames: unknown[]
+	themeNames: {
+		id: string;
+		value: string;
+	}[],
 	seriesId: string
 }) => {
 	const { t } = useTranslation();
@@ -64,8 +67,7 @@ const SeriesDetailsThemeTab = ({
 														<DropDown
 															value={formik.values.theme}
 															text={formik.values.theme}
-															options={themeNames}
-															type={"theme"}
+															options={themeNames.map(names => ({ label: names.value, value: names.id }))}
 															required={false}
 															handleChange={(element) => {
 																if (element) {
@@ -79,6 +81,7 @@ const SeriesDetailsThemeTab = ({
 																	user
 																)
 															}
+															customCSS={{ width: "100%" }}
 														/>
 													</div>
 												)}

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

@@ -7,6 +7,7 @@ import DropDown from "../../../shared/DropDown";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { fetchWorkflowDef } from "../../../../slices/workflowSlice";
 import { FormikProps } from "formik";
+import { formatWorkflowsForDropdown } from "../../../../utils/dropDownUtils";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 
 /**
@@ -76,8 +77,7 @@ const StartTaskWorkflowPage = <T extends RequiredFormProps>({
 														workflowDef.id === formik.values.workflow
 												)?.title ?? ""
 											}
-											options={workflowDef}
-											type={"workflow"}
+											options={formatWorkflowsForDropdown(workflowDef)}
 											required={true}
 											handleChange={(element) => {
 												if (element) {
@@ -88,6 +88,7 @@ const StartTaskWorkflowPage = <T extends RequiredFormProps>({
 												"EVENTS.EVENTS.DETAILS.PUBLICATIONS.SELECT_WORKFLOW"
 											)}
 											tabIndex={99}
+											customCSS={{width: "100%"}}
 										/>
 									</div>
 								)}

src/components/events/partials/wizards/scheduling/SchedulingLocation.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import DropDown from "../../../../shared/DropDown";
 import { Recording } from "../../../../../slices/recordingSlice";
+import { formatCaptureAgentForDropdown } from "../../../../../utils/dropDownUtils";
 
 const SchedulingLocation = ({
 	location,
@@ -34,8 +35,7 @@ const SchedulingLocation = ({
 				<DropDown
 					value={location}
 					text={location}
-					options={inputDevices}
-					type={"captureAgent"}
+					options={formatCaptureAgentForDropdown(inputDevices)}
 					required={true}
 					handleChange={(element) => {
 						if (element) {

src/components/events/partials/wizards/scheduling/SchedulingTime.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import DropDown from "../../../../shared/DropDown";
 import { hours, minutes } from "../../../../../configs/modalConfig";
+import { formatTimeForDropdown } from "../../../../../utils/dropDownUtils";
 
 const SchedulingTime = ({
 	hour,
@@ -35,8 +36,7 @@ const SchedulingTime = ({
 				<DropDown
 					value={hour}
 					text={hour}
-					options={hours}
-					type={"time"}
+					options={formatTimeForDropdown(hours)}
 					required={true}
 					handleChange={(element) => {
 						if (element) {
@@ -46,14 +46,14 @@ const SchedulingTime = ({
 					}}
 					placeholder={t(hourPlaceholder)}
 					disabled={disabled}
+					customCSS={{width: 70}}
 				/>
 
 				{/* drop-down for minute */}
 				<DropDown
 					value={minute}
 					text={minute}
-					options={minutes}
-					type={"time"}
+					options={formatTimeForDropdown(minutes)}
 					required={true}
 					handleChange={(element) => {
 						if (element) {
@@ -62,6 +62,7 @@ const SchedulingTime = ({
 					}}
 					placeholder={t(minutePlaceholder)}
 					disabled={disabled}
+					customCSS={{width: 70}}
 				/>
 			</td>
 		</tr>