More util typing

app/src/components/users/partials/wizard/NewUserWizard.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { connect } from "react-redux";
 import { Formik } from "formik";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
@@ -9,17 +8,20 @@ import { initialFormValuesNewUser } from "../../../../configs/modalConfig";
 import { getUsernames } from "../../../../selectors/userSelectors";
 import { NewUserSchema } from "../../../../utils/validate";
 import { postNewUser } from "../../../../slices/userSlice";
-import { useAppDispatch } from "../../../../store";
+import { useAppDispatch, useAppSelector } from "../../../../store";
 
 /**
  * This component renders the new user wizard
  */
 const NewUserWizard = ({
-    close,
-    usernames,
-}: any) => {
+	close,
+}: {
+	close: () => void,
+}) => {
 	const { t } = useTranslation();
-  const dispatch = useAppDispatch();
+	const dispatch = useAppDispatch();
+
+	const usernames = useAppSelector(state => getUsernames(state));
 
 	const navStyle = {
 		left: "0px",
@@ -29,8 +31,7 @@ const NewUserWizard = ({
 
 	const [tab, setTab] = useState(0);
 
-// @ts-expect-error TS(7006): Parameter 'tabNr' implicitly has an 'any' type.
-	const openTab = (tabNr) => {
+	const openTab = (tabNr: number) => {
 		setTab(tabNr);
 	};
 
@@ -102,15 +103,4 @@ const NewUserWizard = ({
 	);
 };
 
-// Getting state data out of redux store
-// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
-const mapStateToProps = (state) => ({
-	usernames: getUsernames(state),
-});
-
-// Mapping actions to dispatch
-// @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type.
-const mapDispatchToProps = (dispatch) => ({
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(NewUserWizard);
+export default NewUserWizard;

app/src/configs/modalConfig.ts

@@ -114,7 +114,14 @@ export const initialFormValuesNewGroup = {
 
 // All fields for new user form that are fix and not depending on response of backend
 // InitialValues of Formik form (others computed dynamically depending on responses from backend)
-export const initialFormValuesNewUser = {
+export const initialFormValuesNewUser: {
+	username: string,
+	name: string,
+	email: string,
+	password: string,
+	passwordConfirmation: string,
+	roles: string[],
+} = {
 	username: "",
 	name: "",
 	email: "",

app/src/slices/aclSlice.ts

@@ -2,6 +2,7 @@ import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@
 import { TableConfig, aclsTableConfig } from "../configs/tableConfigs/aclsTableConfig";
 import axios from 'axios';
 import { getURLParams } from '../utils/resourceUtils';
+import { RootState } from '../store';
 
 /**
  * This file contains redux reducer for actions affecting the state of acls
@@ -50,7 +51,7 @@ const initialState: AclsState = {
 
 export const fetchAcls = createAsyncThunk('acls/fetchAcls', async (_, { getState }) => {
 	const state = getState();
-	let params = getURLParams(state);
+	let params = getURLParams(state as RootState);
 	// Just make the async request here, and return the response.
 	// This will automatically dispatch a `pending` action first,
 	// and then `fulfilled` or `rejected` actions based on the promise.

app/src/slices/eventSlice.ts

@@ -201,7 +201,7 @@ const initialState: EventState = {
 // fetch events from server
 export const fetchEvents = createAsyncThunk('events/fetchEvents', async (_, { getState }) => {
 	const state = getState();
-	let params = getURLParams(state);
+	let params = getURLParams(state as RootState);
 	// Just make the async request here, and return the response.
 	// This will automatically dispatch a `pending` action first,
 	// and then `fulfilled` or `rejected` actions based on the promise.

app/src/slices/groupSlice.ts

@@ -4,6 +4,7 @@ import axios from 'axios';
 import { buildGroupBody, getURLParams } from '../utils/resourceUtils';
 import { addNotification } from '../slices/notificationSlice';
 import { TableConfig } from '../configs/tableConfigs/aclsTableConfig';
+import { RootState } from '../store';
 
 /**
  * This file contains redux reducer for actions affecting the state of groups
@@ -48,7 +49,7 @@ const initialState: GroupState = {
 // fetch groups from server
 export const fetchGroups = createAsyncThunk('groups/fetchGroups', async (_, { getState }) => {
 	const state = getState();
-	let params = getURLParams(state);
+	let params = getURLParams(state as RootState);
 	// Just make the async request here, and return the response.
 	// This will automatically dispatch a `pending` action first,
 	// and then `fulfilled` or `rejected` actions based on the promise.

app/src/slices/jobSlice.ts

@@ -3,6 +3,7 @@ import { jobsTableConfig } from '../configs/tableConfigs/jobsTableConfig';
 import axios from 'axios';
 import { getURLParams } from '../utils/resourceUtils';
 import { TableConfig } from '../configs/tableConfigs/aclsTableConfig';
+import { RootState } from '../store';
 
 /**
  * This file contains redux reducer for actions affecting the state of jobs
@@ -50,7 +51,7 @@ const initialState: JobState = {
 
 export const fetchJobs = createAsyncThunk('jobs/fetchJobs', async (_, { getState }) => {
 	const state = getState();
-	let params = getURLParams(state);
+	let params = getURLParams(state as RootState);
 	// Just make the async request here, and return the response.
 	// This will automatically dispatch a `pending` action first,
 	// and then `fulfilled` or `rejected` actions based on the promise.

app/src/slices/recordingSlice.ts

@@ -4,6 +4,7 @@ import axios from 'axios';
 import { getURLParams } from '../utils/resourceUtils';
 import { addNotification } from '../slices/notificationSlice';
 import { TableConfig } from '../configs/tableConfigs/aclsTableConfig';
+import { RootState } from '../store';
 
 /**
  * This file contains redux reducer for actions affecting the state of recordings
@@ -59,7 +60,7 @@ export const fetchRecordings = createAsyncThunk('recordings/fetchRecordings', as
 			);
 		} else {
 			const state = getState();
-			let params = getURLParams(state);
+			let params = getURLParams(state as RootState);
 
 		// /agents.json?filter={filter}&limit=100&offset=0&inputs=false&sort={sort}
 		res = await axios.get("/admin-ng/capture-agents/agents.json", {

app/src/slices/seriesSlice.ts

@@ -15,6 +15,7 @@ import {
 import { addNotification } from '../slices/notificationSlice';
 import { TableConfig } from '../configs/tableConfigs/aclsTableConfig';
 import { TransformedAcls } from './aclDetailsSlice';
+import { RootState } from '../store';
 
 /**
  * This file contains redux reducer for actions affecting the state of series
@@ -109,7 +110,7 @@ const initialState: SeriesState = {
 // fetch series from server
 export const fetchSeries = createAsyncThunk('series/fetchSeries', async (_, { getState }) => {
 	const state = getState();
-	let params = getURLParams(state);
+	let params = getURLParams(state as RootState);
 	// Just make the async request here, and return the response.
 	// This will automatically dispatch a `pending` action first,
 	// and then `fulfilled` or `rejected` actions based on the promise.

app/src/slices/serverSlice.ts

@@ -3,6 +3,7 @@ import { serversTableConfig } from "../configs/tableConfigs/serversTableConfig";
 import axios from 'axios';
 import { getURLParams } from '../utils/resourceUtils';
 import { TableConfig } from '../configs/tableConfigs/aclsTableConfig';
+import { RootState } from '../store';
 
 /**
  * This file contains redux reducer for actions affecting the state of servers
@@ -49,7 +50,7 @@ const initialState: ServerState = {
 // fetch servers from server
 export const fetchServers = createAsyncThunk('servers/fetchServers', async (_, { getState }) => {
 	const state = getState();
-	let params = getURLParams(state);
+	let params = getURLParams(state as RootState);
 	// Just make the async request here, and return the response.
 	// This will automatically dispatch a `pending` action first,
 	// and then `fulfilled` or `rejected` actions based on the promise.

app/src/slices/serviceSlice.ts

@@ -3,6 +3,7 @@ import { servicesTableConfig } from "../configs/tableConfigs/servicesTableConfig
 import axios from 'axios';
 import { getURLParams } from '../utils/resourceUtils';
 import { TableConfig } from '../configs/tableConfigs/aclsTableConfig';
+import { RootState } from '../store';
 
 /**
  * This file contains redux reducer for actions affecting the state of services
@@ -51,7 +52,7 @@ const initialState: ServiceState = {
 // fetch services from server
 export const fetchServices = createAsyncThunk('services/fetchServices', async (_, { getState }) => {
 	const state = getState();
-	let params = getURLParams(state);
+	let params = getURLParams(state as RootState);
 	// Just make the async request here, and return the response.
 	// This will automatically dispatch a `pending` action first,
 	// and then `fulfilled` or `rejected` actions based on the promise.

app/src/slices/themeSlice.ts

@@ -4,6 +4,7 @@ import axios from 'axios';
 import { buildThemeBody, getURLParams } from '../utils/resourceUtils';
 import { addNotification } from '../slices/notificationSlice';
 import { TableConfig } from '../configs/tableConfigs/aclsTableConfig';
+import { RootState } from '../store';
 
 /**
  * This file contains redux reducer for actions affecting the state of themes
@@ -62,7 +63,7 @@ const initialState: ThemeState = {
 // fetch themes from server
 export const fetchThemes = createAsyncThunk('theme/fetchThemes', async (_, { getState }) => {
 	const state = getState();
-	let params = getURLParams(state);
+	let params = getURLParams(state as RootState);
 	// Just make the async request here, and return the response.
 	// This will automatically dispatch a `pending` action first,
 	// and then `fulfilled` or `rejected` actions based on the promise.

app/src/slices/userDetailsSlice.ts

@@ -2,6 +2,7 @@ import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@
 import axios from 'axios';
 import { addNotification } from '../slices/notificationSlice';
 import { buildUserBody } from "../utils/resourceUtils";
+import { NewUser } from './userSlice';
 
 /**
  * This file contains redux reducer for actions affecting the state of details of a user
@@ -40,7 +41,7 @@ export const fetchUserDetails = createAsyncThunk('userDetails/fetchUserDetails',
 
 // update existing user with changed values
 export const updateUserDetails = createAsyncThunk('userDetails/updateUserDetails', async (params: {
-	values: UserDetailsState,
+	values: NewUser,
 	username: string
 }, {dispatch}) => {
 	const { username, values } = params

app/src/slices/userSlice.ts

@@ -5,11 +5,12 @@ import { transformToIdValueArray } from "../utils/utils";
 import { buildUserBody, getURLParams } from "../utils/resourceUtils";
 import { addNotification } from '../slices/notificationSlice';
 import { TableConfig } from '../configs/tableConfigs/aclsTableConfig';
+import { RootState } from '../store';
 
 /**
  * This file contains redux reducer for actions affecting the state of users
  */
-type UserResult = {
+export type UserResult = {
 	email?: string,
 	manageable: boolean,
 	name: string,
@@ -18,6 +19,14 @@ type UserResult = {
 	username: string,
 }
 
+export type NewUser = {
+	email: string,
+	name: string,
+	password: string,
+	roles: string,
+	username: string,
+}
+
 type UsersState = {
 	status: 'uninitialized' | 'loading' | 'succeeded' | 'failed',
 	error: SerializedError | null,
@@ -50,7 +59,7 @@ const initialState: UsersState = {
 // fetch users from server
 export const fetchUsers = createAsyncThunk('users/fetchUsers', async (_, { getState }) => {
 	const state = getState();
-	let params = getURLParams(state);
+	let params = getURLParams(state as RootState);
 	// Just make the async request here, and return the response.
 	// This will automatically dispatch a `pending` action first,
 	// and then `fulfilled` or `rejected` actions based on the promise.
@@ -59,7 +68,7 @@ export const fetchUsers = createAsyncThunk('users/fetchUsers', async (_, { getSt
 });
 
 // new user to backend
-export const postNewUser = createAsyncThunk('users/postNewUser', async (values: UserResult, {dispatch}) => {
+export const postNewUser = createAsyncThunk('users/postNewUser', async (values: NewUser, {dispatch}) => {
 	// get URL params used for post request
 	let data = buildUserBody(values);
 

app/src/utils/eventDetailsUtils.ts

@@ -32,8 +32,7 @@ export const error_detail_style = {
 	width: "750px",
 };
 
-// @ts-expect-error TS(7006): Parameter 'durationInMS' implicitly has an 'any' t... Remove this comment to see the full error message
-export const formatDuration = (durationInMS) => {
+export const formatDuration = (durationInMS: number) => {
 	const duration = moment.duration(durationInMS);
 	if (duration.asHours() > 1) {
 		return moment.utc(duration.asMilliseconds()).format("HH:mm:ss");
@@ -42,12 +41,10 @@ export const formatDuration = (durationInMS) => {
 	}
 };
 
-// @ts-expect-error TS(7006): Parameter 'bytesValue' implicitly has an 'any' typ... Remove this comment to see the full error message
-export const humanReadableBytesFilter = (bytesValue) => {
+export const humanReadableBytesFilter = (bytesValue: string | number) => {
 	// best effort, independent on type
-	let bytes = parseInt(bytesValue);
-
-	if (isNaN(bytes)) {
+	let bytes = bytesValue;
+	if (typeof bytes === "string") {
 		return bytesValue;
 	}
 

app/src/utils/resourceUtils.ts

@@ -5,6 +5,7 @@ import {
 	getTableDirection,
 	getTableSorting,
 } from "../selectors/tableSelectors";
+import { NewUser } from "../slices/userSlice";
 import { Recording } from "../slices/recordingSlice";
 import { UserInfoState } from "../slices/userInfoSlice";
 import { hasAccess } from "./utils";
@@ -23,8 +24,12 @@ export const getHttpHeaders = () => {
 };
 
 // prepare URL params for getting resources
-// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
-export const getURLParams = (state) => {
+export const getURLParams = (
+	state: {
+		tableFilters: any,	// TODO: Type these after modernizing redux is done
+		table: any,
+	}
+) => {
 	// get filter map from state
 	let filters = [];
 	let filterMap = getFilters(state);
@@ -66,8 +71,7 @@ export const getURLParams = (state) => {
 };
 
 // used for create URLSearchParams for API requests used to create/update user
-// @ts-expect-error TS(7006): Parameter 'values' implicitly has an 'any' type.
-export const buildUserBody = (values) => {
+export const buildUserBody = (values: NewUser) => {
 	let data = new URLSearchParams();
 	// fill form data with user inputs
 	data.append("username", values.username);

app/src/utils/workflowPanelUtils.ts

@@ -1,17 +1,17 @@
+import { Workflow } from "../slices/workflowSlice";
+
 // fill values with default configuration of chosen workflow
-export const setDefaultConfig = (workflowDefinitions: any, workflowId: any) => {
+export const setDefaultConfig = (workflowDefinitions: Workflow[], workflowId: string) => {
 	let defaultConfiguration = {};
 
 	// find configuration panel information about chosen workflow
 	let configPanel = workflowDefinitions.find(
-// @ts-expect-error TS(7006): Parameter 'workflow' implicitly has an 'any' type.
 		(workflow) => workflow.id === workflowId
-	).configuration_panel_json;
+	)?.configuration_panel_json;
 
 	// only set default values if there is an configuration panel
-	if (configPanel.length > 0) {
+	if (Array.isArray(configPanel) && configPanel.length > 0) {
 		// iterate through all config options and set their defaults
-// @ts-expect-error TS(7006): Parameter 'configOption' implicitly has an 'any' t... Remove this comment to see the full error message
 		configPanel.forEach((configOption) => {
 			if (configOption.fieldset) {
 				defaultConfiguration = fillDefaultConfig(
@@ -26,11 +26,9 @@ export const setDefaultConfig = (workflowDefinitions: any, workflowId: any) => {
 };
 
 // fills default configuration with values
-// @ts-expect-error TS(7006): Parameter 'fieldset' implicitly has an 'any' type.
-const fillDefaultConfig = (fieldset, defaultConfiguration) => {
+const fillDefaultConfig = (fieldset: { [key: string]: any }, defaultConfiguration: { [key: string]: any }) => {
 	// iteration through each input field
-// @ts-expect-error TS(7006): Parameter 'field' implicitly has an 'any' type.
-	fieldset.forEach((field) => {
+	fieldset.forEach((field: any) => {
 
     // set only the checked input of radio button as default value
     if (field.type === "radio" && field.checked) {