Enable eslint no-explicit-any

eslint.config.js

@@ -14,7 +14,6 @@ export default [
             "indent": "off",
             "max-len": "off",
             "no-tabs": "off",
-            "@typescript-eslint/no-explicit-any": "off",
             "@typescript-eslint/no-floating-promises": "off",
             "@typescript-eslint/no-misused-promises": "off",
         },

src/components/configuration/Themes.tsx

@@ -1,15 +1,16 @@
 import { themesTemplateMap } from "../../configs/tableConfigs/themesTableMap";
 import { getTotalThemes } from "../../selectors/themeSelectors";
 import { loadThemesIntoTable } from "../../thunks/tableThunks";
-import { fetchThemes } from "../../slices/themeSlice";
+import { fetchThemes, ThemeDetailsType } from "../../slices/themeSlice";
 import TablePage from "../shared/TablePage";
+import { Row } from "../../slices/tableSlice";
 
 /**
  * This component renders the table view of events
  */
 const Themes = () => {
 	return (
-		<TablePage
+		<TablePage<Row & ThemeDetailsType>
 			resource={"themes"}
 			fetchResource={fetchThemes}
 			loadResourceIntoTable={loadThemesIntoTable}

src/components/events/Events.tsx

@@ -21,6 +21,7 @@ import { availableHotkeys } from "../../configs/hotkeysConfig";
 import { fetchAssetUploadOptions } from "../../thunks/assetsThunks";
 import { useAppDispatch, useAppSelector } from "../../store";
 import {
+	Event,
 	fetchEventMetadata,
 	fetchEvents,
 	setShowActions,
@@ -32,6 +33,7 @@ import TableActionDropdown from "../shared/TableActionDropdown";
 import { fetchAclDefaults } from "../../slices/aclSlice";
 import TablePage from "../shared/TablePage";
 import SeriesDetailsModal from "./partials/modals/SeriesDetailsModal";
+import { Row } from "../../slices/tableSlice";
 
 /**
  * This component renders the table view of events
@@ -69,7 +71,7 @@ const Events = () => {
 
 	return (
 		<>
-			<TablePage
+			<TablePage<Row & Event>
 				resource={"events"}
 				fetchResource={fetchEvents}
 				loadResourceIntoTable={loadEventsIntoTable}

src/components/events/Series.tsx

@@ -12,6 +12,7 @@ import {
 	fetchSeries,
 	fetchSeriesMetadata,
 	fetchSeriesThemes,
+	Series as SeriesRow,
 	showActionsSeries,
 } from "../../slices/seriesSlice";
 import { fetchSeriesDetailsTobiraNew } from "../../slices/seriesSlice";
@@ -22,6 +23,7 @@ import TableActionDropdown from "../shared/TableActionDropdown";
 import { fetchAclDefaults } from "../../slices/aclSlice";
 import TablePage from "../shared/TablePage";
 import SeriesDetailsModal from "./partials/modals/SeriesDetailsModal";
+import { Row } from "../../slices/tableSlice";
 
 /**
  * This component renders the table view of series
@@ -54,7 +56,7 @@ const Series = () => {
 
 	return (
 		<>
-			<TablePage
+			<TablePage<Row & SeriesRow>
 				resource={"series"}
 				fetchResource={fetchSeries}
 				loadResourceIntoTable={loadSeriesIntoTable}

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

@@ -40,9 +40,9 @@ const DetailsMetadataTab = ({
 	metadata: MetadataCatalog[],
 	updateResource: AsyncThunk<void, {
 		id: string;
-		values: { [key: string]: any; };
+		values: InitialValues;
 		catalog: MetadataCatalog;
-	}, any> // (id: string, values: { [key: string]: any }, catalog: MetadataCatalog) => void,
+	}, object> // (id: string, values: { [key: string]: any }, catalog: MetadataCatalog) => void,
 	editAccessRole: string,
 	formikRef?: React.RefObject<FormikProps<InitialValues> | null>
 	header?: ParseKeys
@@ -52,7 +52,7 @@ const DetailsMetadataTab = ({
 
 	const user = useAppSelector(state => getUserInformation(state));
 
-	const handleSubmit = (values: { [key: string]: any }, catalog: MetadataCatalog) => {
+	const handleSubmit = (values: InitialValues, catalog: MetadataCatalog) => {
 		dispatch(updateResource({ id: resourceId, values, catalog }))
 			.unwrap()
 			.then(() => {
@@ -75,7 +75,7 @@ const DetailsMetadataTab = ({
 
 	// set current values of metadata fields as initial values
 	const getInitialValues = (metadataCatalog: MetadataCatalog) => {
-		const initialValues: { [key: string]: any } = {};
+		const initialValues: { [key: string]: MetadataCatalog["fields"][0]["value"] } = {};
 
 		// Transform metadata fields and their values provided by backend (saved in redux)
 		metadataCatalog.fields.forEach(field => {
@@ -85,7 +85,7 @@ const DetailsMetadataTab = ({
 		return initialValues;
 	};
 
-	const checkValidity = (formik: FormikProps<any>) => {
+	const checkValidity = (formik: FormikProps<InitialValues>) => {
 		if (formik.dirty && formik.isValid && hasAccess(editAccessRole, user)) {
 			// check if user provided values differ from initial ones
 			return !_.isEqual(formik.values, formik.initialValues);

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

@@ -69,7 +69,7 @@ const EditScheduledEventsEditPage = <T extends RequiredFormProps>({
 		dispatch(fetchScheduling({
 			events: formik.values.events,
 			fetchNewScheduling: fetchEventInfos,
-			setFormikValue: formik.setFieldValue,
+			setFieldValue: formik.setFieldValue,
 	}));
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [formik.values.events]);

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

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import _ from "lodash";
 import DatePicker from "react-datepicker";
-import { Formik, FormikErrors, FormikProps } from "formik";
+import { Formik, FormikHelpers, FormikProps } from "formik";
 import Notifications from "../../../shared/Notifications";
 import {
 	getSchedulingConflicts,
@@ -142,7 +142,7 @@ const EventDetailsSchedulingTab = ({
 	};
 
 	// changes the inputs in the formik
-	const changeInputs = (deviceId: Recording["id"], setFieldValue: (field: string, value: any) => Promise<void | FormikErrors<any>>) => {
+	const changeInputs = (deviceId: Recording["id"], setFieldValue: FormikHelpers<InitialValues>["setFieldValue"]) => {
 		setFieldValue("captureAgent", deviceId);
 		setFieldValue("inputs", []);
 	};

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

@@ -25,7 +25,7 @@ import ModalContent from "../../../shared/modals/ModalContent";
 type InitialValues = {
 	workflowDefinition: string;
 	configuration: {
-			[key: string]: any;
+			[key: string]: unknown;
 	} | undefined;
 }
 

src/components/events/partials/modals/EditMetadataEventsModal.tsx

@@ -12,6 +12,7 @@ import RenderMultiField from "../../../shared/wizard/RenderMultiField";
 import { getUserInformation } from "../../../../selectors/userInfoSelectors";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import {
+	MetadataField,
 	MetadataFieldSelected,
 	postEditMetadata,
 	updateBulkMetadata,
@@ -83,7 +84,7 @@ const EditMetadataEventsModal = ({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const handleSubmit = (values: { [key: string]: unknown }) => {
+	const handleSubmit = (values: { [key: string]: MetadataField["value"] }) => {
 		const response = dispatch(updateBulkMetadata({ metadataFields, values }));
 		console.info(response);
 		close();

src/components/events/partials/modals/EventDetails.tsx

@@ -80,6 +80,7 @@ const EventDetails = ({
 	eventId: string,
 	policyChanged: boolean,
 	setPolicyChanged: (value: boolean) => void,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	formikRef: React.RefObject<FormikProps<any> | null>
 }) => {
 	const { t } = useTranslation();

src/components/events/partials/modals/EventDetailsModal.tsx

@@ -18,6 +18,7 @@ const EventDetailsModal = () => {
 
 	// tracks, whether the policies are different to the initial value
 	const [policyChanged, setPolicyChanged] = useState(false);
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const formikRef = useRef<FormikProps<any>>(null);
 
 	const displayEventDetailsModal = useAppSelector(state => showModal(state));

src/components/events/partials/modals/SeriesDetails.tsx

@@ -51,6 +51,7 @@ const SeriesDetails = ({
 	seriesId: string
 	policyChanged: boolean
 	setPolicyChanged: (policyChanged: boolean) => void
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	formikRef: React.RefObject<FormikProps<any> | null>
 }) => {
 	const { t } = useTranslation();

src/components/events/partials/modals/SeriesDetailsModal.tsx

@@ -18,6 +18,7 @@ const SeriesDetailsModal = () => {
 
 	// tracks, whether the policies are different to the initial value
 	const [policyChanged, setPolicyChanged] = useState(false);
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const formikRef = useRef<FormikProps<any>>(null);
 
 	const displaySeriesDetailsModal = useAppSelector(state => showModal(state));

src/components/events/partials/wizards/RenderWorkflowConfig.tsx

@@ -13,7 +13,7 @@ import { FieldSetField } from "../../../../slices/workflowSlice";
  * wizard chosen via dropdown.
  */
 interface RequiredFormProps {
-	configuration?: { [key: string]: any }
+	configuration?: { [key: string]: unknown }
 }
 
 const RenderWorkflowConfig = <T extends RequiredFormProps>({
@@ -154,7 +154,7 @@ const RenderField = <T extends RequiredFormProps>({
 }: {
 	field: FieldSetField,
 	formik: FormikProps<T>,
-	validate?: (value: any) => string | undefined,
+	validate?: (value: string) => string | undefined,
 }) => {
 	// id used for Field and label
 	const uuid = uuidv4();

src/components/recordings/Recordings.tsx

@@ -1,18 +1,19 @@
 import { recordingsTemplateMap } from "../../configs/tableConfigs/recordingsTableMap";
 import { getTotalRecordings } from "../../selectors/recordingSelectors";
 import { loadRecordingsIntoTable } from "../../thunks/tableThunks";
-import { fetchRecordings } from "../../slices/recordingSlice";
-import { AsyncThunk } from "@reduxjs/toolkit";
+import { fetchRecordings, Recording } from "../../slices/recordingSlice";
 import TablePage from "../shared/TablePage";
+import { GenericAsyncThunk } from "../../utils/utils";
+import { Row } from "../../slices/tableSlice";
 
 /**
  * This component renders the table view of recordings
  */
 const Recordings = () => {
 	return (
-		<TablePage
+		<TablePage<Row & Recording>
 			resource={"recordings"}
-			fetchResource={fetchRecordings as AsyncThunk<any, void, any>}
+			fetchResource={fetchRecordings as GenericAsyncThunk}
 			loadResourceIntoTable={loadRecordingsIntoTable}
 			getTotalResources={getTotalRecordings}
 			navBarLinks={[

src/components/shared/DateTimeCell.tsx

@@ -4,9 +4,9 @@ import { getFilters } from "../../selectors/tableFilterSelectors";
 import { AppThunk, useAppDispatch, useAppSelector } from "../../store";
 import { renderValidDate } from "../../utils/dateUtils";
 import { ParseKeys } from "i18next";
-import { AsyncThunk } from "@reduxjs/toolkit";
 import { Resource } from "../../slices/tableSlice";
 import ButtonLikeAnchor from "./ButtonLikeAnchor";
+import { GenericAsyncThunk } from "../../utils/utils";
 
 /**
  * This component renders the start date cells of events in the table view
@@ -22,7 +22,7 @@ const DateTimeCell = ({
 	resource: Resource
 	date: string
 	filterName: string
-	fetchResource: AsyncThunk<any, void, any>
+	fetchResource: GenericAsyncThunk
 	loadResourceIntoTable: () => AppThunk
 	tooltipText?: ParseKeys
 }) => {

src/components/shared/DropDown.tsx

@@ -4,23 +4,23 @@ import {
 	dropDownSpacingTheme,
 	dropDownStyle,
 } from "../../utils/componentStyles";
-import { GroupBase, MenuListProps, Props, SelectInstance } from "react-select";
+import { GroupBase, MenuListProps, SelectInstance } from "react-select";
 import { ParseKeys } from "i18next";
 import { FixedSizeList, ListChildComponentProps } from "react-window";
-import AsyncSelect from "react-select/async";
+import AsyncSelect, { AsyncProps } from "react-select/async";
 import AsyncCreatableSelect from "react-select/async-creatable";
 
-export type DropDownOption = {
+export type DropDownOption<T> = {
 	label: string,
-	value: string | number,
+	value: T | "",
 	order?: number
 }
 
 /**
  * This component renders a dropdown menu using react-select
  */
 const DropDown = <T, >({
-	ref = React.createRef<SelectInstance<any, boolean, GroupBase<any>>>(),
+	ref = React.createRef<SelectInstance<DropDownOption<T>, boolean, GroupBase<DropDownOption<T>>>>(),
 	value,
 	text,
 	options,
@@ -41,10 +41,10 @@ const DropDown = <T, >({
 	customCSS,
 	fetchOptions,
 }: {
-	ref?: React.RefObject<SelectInstance<any, boolean, GroupBase<any>> | null>
+	ref?: React.RefObject<SelectInstance<DropDownOption<T>, boolean, GroupBase<DropDownOption<T>>> | null>
 	value: T
 	text: string,
-	options?: DropDownOption[],
+	options?: DropDownOption<T>[],
 	required: boolean,
 	handleChange: (option: {value: T, label: string} | null) => void
 	placeholder: string
@@ -65,13 +65,13 @@ const DropDown = <T, >({
 		optionPaddingTop?: number,
 		optionLineHeight?: string
 	},
-	fetchOptions?: (inputValue: string) => Promise<{ label: string, value: string }[]>
+	fetchOptions?: (inputValue: string) => Promise<DropDownOption<T>[]>
 }) => {
 	const { t } = useTranslation();
 
 	const selectRef = ref;
 
-	const style = dropDownStyle(customCSS ?? {});
+	const style = dropDownStyle<T>(customCSS ?? {});
 
 	useEffect(() => {
 		// Ensure menu has focus when opened programmatically
@@ -87,7 +87,7 @@ const DropDown = <T, >({
 	};
 
 	const formatOptions = (
-		unformattedOptions: DropDownOption[],
+		unformattedOptions: DropDownOption<T>[],
 		required: boolean,
 	) => {
 		// Translate
@@ -130,7 +130,7 @@ const DropDown = <T, >({
 	/**
 	 * Custom component for list virtualization
 	 */
-	const MenuList = (props: MenuListProps<DropDownOption, false>) => {
+	const MenuList = (props: MenuListProps<DropDownOption<T>, false>) => {
 		const { children, maxHeight } = props;
 
 		console.log("Menu List render");
@@ -159,7 +159,7 @@ const DropDown = <T, >({
 		return [];
 	};
 
-	const loadOptionsAsync = (inputValue: string, callback: (options: DropDownOption[]) => void) => {
+	const loadOptionsAsync = (inputValue: string, callback: (options: DropDownOption<T>[]) => void) => {
 		setTimeout(async () => {
 			callback(formatOptions(
 				fetchOptions ? await fetchOptions(inputValue) : filterOptions(inputValue),
@@ -170,13 +170,17 @@ const DropDown = <T, >({
 
 	const loadOptions = (
 		_inputValue: string,
-		callback: (options: DropDownOption[]) => void,
+		callback: (options: DropDownOption<T>[]) => void,
 	) => {
 		callback(formatOptions(filterOptions(_inputValue), required));
 	};
 
 
-  const commonProps: Props = {
+	const commonProps: AsyncProps<
+		DropDownOption<T>,
+		boolean,
+		GroupBase<DropDownOption<T>>
+	> = {
 		tabIndex: tabIndex,
 		theme: theme => (dropDownSpacingTheme(theme)),
 		styles: style,
@@ -200,7 +204,6 @@ const DropDown = <T, >({
 		isDisabled: disabled,
 		openMenuOnFocus: openMenuOnFocus,
 		menuPlacement: menuPlacement ?? "auto",
-
 		// @ts-expect-error: React-Select typing does not account for the typing of option it itself requires
 		components: { MenuList },
 	};

src/components/shared/Field.tsx

@@ -4,7 +4,7 @@ import { FieldAttributes } from "formik/dist/Field";
 /**
  * Wrapper for the Formik Fields
  */
-export const Field = (props: FieldAttributes<any>) => {
+export const Field = (props: FieldAttributes<unknown>) => {
   return (
     <FormikFastField
       {...props}

src/components/shared/FilterCell.tsx

@@ -25,7 +25,7 @@ const FilterCell = <T, >({
 		children: ReactNode
 		cellTooltipText?: ParseKeys
 	}[]
-	fetchResource: AsyncThunk<T, void, any>
+	fetchResource: AsyncThunk<T, void, object>
 	loadResourceIntoTable: () => AppThunk,
 }) => {
 	const dispatch = useAppDispatch();