diff --git a/app/src/components/users/partials/wizard/NewUserWizard.tsx b/app/src/components/users/partials/wizard/NewUserWizard.tsx index c3c1e18c1c..7625e92e26 100644 --- a/app/src/components/users/partials/wizard/NewUserWizard.tsx +++ b/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; diff --git a/app/src/configs/modalConfig.ts b/app/src/configs/modalConfig.ts index 212f4f9299..a2a1a20454 100644 --- a/app/src/configs/modalConfig.ts +++ b/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: "", diff --git a/app/src/slices/aclSlice.ts b/app/src/slices/aclSlice.ts index 34895745ed..bfea045c93 100644 --- a/app/src/slices/aclSlice.ts +++ b/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. diff --git a/app/src/slices/eventSlice.ts b/app/src/slices/eventSlice.ts index ddc4940aaa..85beb0aec1 100644 --- a/app/src/slices/eventSlice.ts +++ b/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. diff --git a/app/src/slices/groupSlice.ts b/app/src/slices/groupSlice.ts index 4ca595da05..d30407b34f 100644 --- a/app/src/slices/groupSlice.ts +++ b/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. diff --git a/app/src/slices/jobSlice.ts b/app/src/slices/jobSlice.ts index 1fa11a5976..d12e6796e9 100644 --- a/app/src/slices/jobSlice.ts +++ b/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. diff --git a/app/src/slices/recordingSlice.ts b/app/src/slices/recordingSlice.ts index 9d42cbfabb..6e29c20de2 100644 --- a/app/src/slices/recordingSlice.ts +++ b/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", { diff --git a/app/src/slices/seriesSlice.ts b/app/src/slices/seriesSlice.ts index d25acd709e..b2e6aa1a40 100644 --- a/app/src/slices/seriesSlice.ts +++ b/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. diff --git a/app/src/slices/serverSlice.ts b/app/src/slices/serverSlice.ts index 22c8949042..f8f41ac352 100644 --- a/app/src/slices/serverSlice.ts +++ b/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. diff --git a/app/src/slices/serviceSlice.ts b/app/src/slices/serviceSlice.ts index 67e6b16f09..501b272361 100644 --- a/app/src/slices/serviceSlice.ts +++ b/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. diff --git a/app/src/slices/themeSlice.ts b/app/src/slices/themeSlice.ts index 8091e750ba..68360f5dcf 100644 --- a/app/src/slices/themeSlice.ts +++ b/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. diff --git a/app/src/slices/userDetailsSlice.ts b/app/src/slices/userDetailsSlice.ts index 4cc73becf4..55a2691bbb 100644 --- a/app/src/slices/userDetailsSlice.ts +++ b/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 diff --git a/app/src/slices/userSlice.ts b/app/src/slices/userSlice.ts index d51eb2ea35..e92b59b4f2 100644 --- a/app/src/slices/userSlice.ts +++ b/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); diff --git a/app/src/utils/eventDetailsUtils.ts b/app/src/utils/eventDetailsUtils.ts index b359b9a904..88bddd30e1 100644 --- a/app/src/utils/eventDetailsUtils.ts +++ b/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; } diff --git a/app/src/utils/resourceUtils.ts b/app/src/utils/resourceUtils.ts index d2a0bdf4ce..7de96a704c 100644 --- a/app/src/utils/resourceUtils.ts +++ b/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); diff --git a/app/src/utils/workflowPanelUtils.ts b/app/src/utils/workflowPanelUtils.ts index 68c9c922fc..8c032d0c25 100644 --- a/app/src/utils/workflowPanelUtils.ts +++ b/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) {