refactor: fix misc TS errors (#729)

* refactor: update test deps

* refactor: remove unused ts-expect-error annotations

* refactor: add missing arg and return types

* refactor: the loading prop is optional

* refactor: add missing arg and return types

* reafactor: fix value arg type

* refactor: fix missing array type

* refactor: the parameters field is an array

* refactor: use undefined instead of null in state

* refactor: add missing params type

* refactor: add missing children prop

* refactor: add missing array type

* refactor: add missing React imports

* refactor: use correct IProjectEnvironment type

* refactor: type errors as unknown

* refactor: the index prop is required

* refactor: fix date prop type

* refactor: fix tooltip placement prop type

* refactor: fix environments state type

* refactor: add missing arg types

* refactor: add guard for undefined field

* refactor: fix ChangePassword prop types

* refactor: fix MUI import paths

* refactor: add missing arg type

* refactor: fix showDialog prop type

* refactor: remove unused openUpdateDialog prop

* refactor: add missing non-null assertion

* refactor: remove unused types prop

* refactor: stricten API error handler types

* refactor: add missing undefined check

* refactor: add missing IProject id field

* refactor: fix ConditionallyRender condition prop types

* refactor: remove unused args

* refactor: add AddVariant prop types

* refactor: add types to UIContext

* refactor: fix event arg type

* refactor: add missing default impressionData field

* refactor: fix handleDeleteEnvironment prop args

* refactor: fix IFeatureMetrics field requirements

* refactor: add missing element types to ConditionallyRender

* refactor: remove unused ProjectAccess projectId prop

* refactor: add missing undefined check

* refactor: fix getCreateTogglePath arg type

* refactor: add missing IStrategyPayload import

* refactor: remove unused user arg

* refactor: add missing event arg type

* refactor: add missing style object types

* refactor: improve userApiErrors prop type

* refactor: the Dialogue onClose prop is optional

* refactor: fix the AddonEvents setEventValue prop type

frontend/package.json

@@ -42,6 +42,7 @@
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "4.11.2",
     "@material-ui/lab": "4.0.0-alpha.60",
+    "@testing-library/dom": "^8.11.3",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.3",
     "@testing-library/user-event": "13.5.0",
@@ -49,7 +50,7 @@
     "@types/deep-diff": "1.0.1",
     "@types/jest": "27.4.1",
     "@types/lodash.clonedeep": "4.5.6",
-    "@types/node": "14.18.12",
+    "@types/node": "17.0.18",
     "@types/react": "17.0.39",
     "@types/react-dom": "17.0.11",
     "@types/react-outside-click-handler": "1.3.1",
@@ -63,7 +64,7 @@
     "copy-to-clipboard": "3.3.1",
     "craco": "0.0.3",
     "css-loader": "6.6.0",
-    "cypress": "8.7.0",
+    "cypress": "9.5.0",
     "date-fns": "2.28.0",
     "debounce": "1.2.1",
     "deep-diff": "1.0.2",
@@ -82,7 +83,7 @@
     "react-outside-click-handler": "1.3.0",
     "react-router-dom": "5.3.0",
     "react-scripts": "4.0.3",
-    "react-test-renderer": "16.14.0",
+    "react-test-renderer": "17.0.2",
     "react-timeago": "6.2.1",
     "sass": "1.49.8",
     "swr": "1.2.2",

frontend/src/component/addons/AddonForm/AddonEvents/AddonEvents.tsx

@@ -7,7 +7,9 @@ import { IAddonProvider } from '../../../../interfaces/addons';
 interface IAddonProps {
     provider: IAddonProvider;
     checkedEvents: string[];
-    setEventValue: (name: string) => void;
+    setEventValue: (
+        name: string
+    ) => (event: React.ChangeEvent<HTMLInputElement>) => void;
     error: Record<string, string>;
 }
 

frontend/src/component/addons/AddonList/AddonList.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import { ConfiguredAddons } from './ConfiguredAddons/ConfiguredAddons';
 import { AvailableAddons } from './AvailableAddons/AvailableAddons';
 import { Avatar } from '@material-ui/core';
@@ -12,7 +12,7 @@ import dataDogIcon from '../../../assets/icons/datadog.svg';
 import { formatAssetPath } from '../../../utils/format-path';
 import useAddons from '../../../hooks/api/getters/useAddons/useAddons';
 
-const style = {
+const style: React.CSSProperties = {
     width: '40px',
     height: '40px',
     marginRight: '16px',

frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx

@@ -21,6 +21,7 @@ import AccessContext from '../../../../contexts/AccessContext';
 import { IAddon } from '../../../../interfaces/addons';
 import PermissionIconButton from '../../../common/PermissionIconButton/PermissionIconButton';
 import Dialogue from '../../../common/Dialogue';
+import { formatUnknownError } from '../../../../utils/format-unknown-error';
 
 interface IConfigureAddonsProps {
     getAddonIcon: (name: string) => ReactElement;
@@ -59,8 +60,8 @@ export const ConfiguredAddons = ({ getAddonIcon }: IConfigureAddonsProps) => {
                 title: 'Success',
                 text: 'Addon state switched successfully',
             });
-        } catch (e: any) {
-            setToastApiError(e.toString());
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 

frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx

@@ -10,6 +10,7 @@ import { ADMIN } from '../../../providers/AccessProvider/permissions';
 import { ConfirmToken } from '../ConfirmToken/ConfirmToken';
 import { useState } from 'react';
 import { scrollToTop } from '../../../common/util';
+import { formatUnknownError } from '../../../../utils/format-unknown-error';
 
 export const CreateApiToken = () => {
     const { setToastApiError } = useToast();
@@ -49,8 +50,8 @@ export const CreateApiToken = () => {
                     setToken(api.secret);
                     setShowConfirm(true);
                 });
-        } catch (e: any) {
-            setToastApiError(e.toString());
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 

frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx

@@ -68,8 +68,8 @@ export const GoogleAuth = () => {
                 title: 'Settings stored',
                 type: 'success',
             });
-        } catch (err) {
-            setToastApiError(formatUnknownError(err));
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 

frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx

@@ -79,8 +79,8 @@ export const OidcAuth = () => {
                 title: 'Settings stored',
                 type: 'success',
             });
-        } catch (err) {
-            setToastApiError(formatUnknownError(err));
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 

frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx

@@ -51,8 +51,8 @@ export const PasswordAuth = () => {
                 type: 'success',
                 show: true,
             });
-        } catch (err) {
-            setToastApiError(formatUnknownError(err));
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
             setDisablePasswordAuth(config.disabled);
         }
     };

frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx

@@ -75,8 +75,8 @@ export const SamlAuth = () => {
                 title: 'Settings stored',
                 type: 'success',
             });
-        } catch (err) {
-            setToastApiError(formatUnknownError(err));
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 

frontend/src/component/admin/project-roles/CreateProjectRole/CreateProjectRole.tsx

@@ -7,6 +7,7 @@ import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
 import useToast from '../../../../hooks/useToast';
 import PermissionButton from '../../../common/PermissionButton/PermissionButton';
 import { ADMIN } from '../../../providers/AccessProvider/permissions';
+import { formatUnknownError } from '../../../../utils/format-unknown-error';
 
 const CreateProjectRole = () => {
     const { setToastData, setToastApiError } = useToast();
@@ -49,8 +50,8 @@ const CreateProjectRole = () => {
                     confetti: true,
                     type: 'success',
                 });
-            } catch (e: any) {
-                setToastApiError(e.toString());
+            } catch (error: unknown) {
+                setToastApiError(formatUnknownError(error));
             }
         }
     };

frontend/src/component/admin/project-roles/EditProjectRole/EditProjectRole.tsx

@@ -13,6 +13,7 @@ import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
 import useToast from '../../../../hooks/useToast';
 import PermissionButton from '../../../common/PermissionButton/PermissionButton';
 import { ADMIN } from '../../../providers/AccessProvider/permissions';
+import { formatUnknownError } from '../../../../utils/format-unknown-error';
 
 const EditProjectRole = () => {
     const { uiConfig } = useUiConfig();
@@ -88,8 +89,8 @@ const EditProjectRole = () => {
                     text: 'Your role changes will automatically be applied to the users with this role.',
                     confetti: true,
                 });
-            } catch (e: any) {
-                setToastApiError(e.toString());
+            } catch (error: unknown) {
+                setToastApiError(formatUnknownError(error));
             }
         }
     };

frontend/src/component/admin/project-roles/ProjectRoleForm/ProjectRoleForm.tsx

@@ -1,16 +1,16 @@
 import Input from '../../../common/Input/Input';
 import EnvironmentPermissionAccordion from './EnvironmentPermissionAccordion/EnvironmentPermissionAccordion';
 import {
+    Button,
     Checkbox,
     FormControlLabel,
     TextField,
-    Button,
 } from '@material-ui/core';
 import useProjectRolePermissions from '../../../../hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
 
 import { useStyles } from './ProjectRoleForm.styles';
 import ConditionallyRender from '../../../common/ConditionallyRender';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { IPermission } from '../../../../interfaces/project';
 import {
     ICheckedPermission,
@@ -33,6 +33,7 @@ interface IProjectRoleForm {
     clearErrors: () => void;
     validateNameUniqueness?: () => void;
     getRoleKey: (permission: { id: number; environment?: string }) => string;
+    children: ReactNode;
 }
 
 const ProjectRoleForm: React.FC<IProjectRoleForm> = ({

frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 export const useStyles = makeStyles(theme => ({
     deleteParagraph: {

frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx

@@ -16,6 +16,7 @@ import IRole, { IProjectRole } from '../../../../../interfaces/role';
 import useProjectRolesApi from '../../../../../hooks/api/actions/useProjectRolesApi/useProjectRolesApi';
 import useToast from '../../../../../hooks/useToast';
 import ProjectRoleDeleteConfirm from '../ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm';
+import { formatUnknownError } from '../../../../../utils/format-unknown-error';
 
 const ROOTROLE = 'root';
 
@@ -44,8 +45,8 @@ const ProjectRoleList = () => {
                 title: 'Successfully deleted role',
                 text: 'Your role is now deleted',
             });
-        } catch (e) {
-            setToastApiError(e.toString());
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
         setDelDialog(false);
         setConfirmName('');

frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx

@@ -1,11 +1,12 @@
 import { useStyles } from './ProjectRoleListItem.styles';
-import { TableRow, TableCell, Typography } from '@material-ui/core';
-import { Edit, Delete } from '@material-ui/icons';
+import { TableCell, TableRow, Typography } from '@material-ui/core';
+import { Delete, Edit } from '@material-ui/icons';
 import { ADMIN } from '../../../../../providers/AccessProvider/permissions';
 import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle';
 import PermissionIconButton from '../../../../../common/PermissionIconButton/PermissionIconButton';
 import { IProjectRole } from '../../../../../../interfaces/role';
 import { useHistory } from 'react-router-dom';
+import React from 'react';
 
 interface IRoleListItemProps {
     id: number;

frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoles.styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 export const useStyles = makeStyles(theme => ({
     rolesListBody: {

frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 export const useStyles = makeStyles({
     iconContainer: {

frontend/src/component/admin/users/CreateUser/CreateUser.tsx

@@ -10,6 +10,7 @@ import { useState } from 'react';
 import { scrollToTop } from '../../../common/util';
 import PermissionButton from '../../../common/PermissionButton/PermissionButton';
 import { ADMIN } from '../../../providers/AccessProvider/permissions';
+import { formatUnknownError } from '../../../../utils/format-unknown-error';
 
 const CreateUser = () => {
     const { setToastApiError } = useToast();
@@ -51,8 +52,8 @@ const CreateUser = () => {
                         setInviteLink(user.inviteLink);
                         setShowConfirm(true);
                     });
-            } catch (e: any) {
-                setToastApiError(e.toString());
+            } catch (error: unknown) {
+                setToastApiError(formatUnknownError(error));
             }
         }
     };

frontend/src/component/admin/users/EditUser/EditUser.tsx

@@ -11,6 +11,7 @@ import { useEffect } from 'react';
 import PermissionButton from '../../../common/PermissionButton/PermissionButton';
 import { ADMIN } from '../../../providers/AccessProvider/permissions';
 import { EDIT } from '../../../../constants/misc';
+import { formatUnknownError } from '../../../../utils/format-unknown-error';
 
 const EditUser = () => {
     useEffect(() => {
@@ -60,8 +61,8 @@ const EditUser = () => {
                     title: 'User information updated',
                     type: 'success',
                 });
-            } catch (e: any) {
-                setToastApiError(e.toString());
+            } catch (error: unknown) {
+                setToastApiError(formatUnknownError(error));
             }
         }
     };

frontend/src/component/admin/users/UserAdmin.styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 export const useStyles = makeStyles(theme => ({
     userListBody: {

frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import classnames from 'classnames';
-import { TextField, Typography, Avatar } from '@material-ui/core';
+import { Avatar, TextField, Typography } from '@material-ui/core';
 import { trim } from '../../../../common/util';
 import { modalStyles } from '../../util';
 import Dialogue from '../../../../common/Dialogue/Dialogue';
@@ -12,10 +12,10 @@ import { Alert } from '@material-ui/lab';
 import { IUser } from '../../../../../interfaces/user';
 
 interface IChangePasswordProps {
-    showDialog: () => void;
+    showDialog: boolean;
     closeDialog: () => void;
-    changePassword: () => void;
-    user: IUser;
+    changePassword: (user: IUser, password: string) => Promise<Response>;
+    user: Partial<IUser>;
 }
 
 const ChangePassword = ({
@@ -25,7 +25,7 @@ const ChangePassword = ({
     user = {},
 }: IChangePasswordProps) => {
     const [data, setData] = useState({});
-    const [error, setError] = useState({});
+    const [error, setError] = useState<Record<string, string>>({});
     const [validPassword, setValidPassword] = useState(false);
     const commonStyles = useCommonStyles();
 
@@ -88,7 +88,7 @@ const ChangePassword = ({
                 )}
             >
                 <ConditionallyRender
-                    condition={error.general}
+                    condition={Boolean(error.general)}
                     show={<Alert severity="error">{error.general}</Alert>}
                 />
                 <Typography variant="subtitle1">

frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx

@@ -9,12 +9,12 @@ import { useCommonStyles } from '../../../../../common.styles';
 import { IUser } from '../../../../../interfaces/user';
 
 interface IDeleteUserProps {
-    showDialog: () => void;
+    showDialog: boolean;
     closeDialog: () => void;
     user: IUser;
     userLoading: boolean;
     removeUser: () => void;
-    userApiErrors: Object;
+    userApiErrors: Record<string, string>;
 }
 
 const DeleteUser = ({
@@ -33,13 +33,13 @@ const DeleteUser = ({
             open={showDialog}
             title="Really delete user?"
             onClose={closeDialog}
-            onClick={() => removeUser(user)}
+            onClick={removeUser}
             primaryButtonText="Delete user"
             secondaryButtonText="Cancel"
         >
             <div ref={ref}>
                 <ConditionallyRender
-                    condition={userApiErrors[REMOVE_USER_ERROR]}
+                    condition={Boolean(userApiErrors[REMOVE_USER_ERROR])}
                     show={
                         <Alert
                             data-loading

frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx

@@ -19,7 +19,6 @@ import { formatDateYMD } from '../../../../../utils/format-date';
 interface IUserListItemProps {
     user: IUser;
     renderRole: (roleId: number) => string;
-    openUpdateDialog: (user: IUser) => (e: SyntheticEvent) => void;
     openPwDialog: (user: IUser) => (e: SyntheticEvent) => void;
     openDelDialog: (user: IUser) => (e: SyntheticEvent) => void;
     locationSettings: ILocationSettings;
@@ -30,7 +29,6 @@ const UserListItem = ({
     renderRole,
     openDelDialog,
     openPwDialog,
-    openUpdateDialog,
     locationSettings,
 }: IUserListItemProps) => {
     const { hasAccess } = useContext(AccessContext);

frontend/src/component/admin/users/UsersList/UsersList.tsx

@@ -24,6 +24,7 @@ import { IUser } from '../../../../interfaces/user';
 import IRole from '../../../../interfaces/role';
 import useToast from '../../../../hooks/useToast';
 import { useLocationSettings } from '../../../../hooks/useLocationSettings';
+import { formatUnknownError } from '../../../../utils/format-unknown-error';
 
 const UsersList = () => {
     const { users, roles, refetch, loading } = useUsers();
@@ -79,8 +80,8 @@ const UsersList = () => {
             });
             refetch();
             closeDelDialog();
-        } catch (e: any) {
-            setToastApiError(e.toString());
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 
@@ -172,7 +173,7 @@ const UsersList = () => {
                     <DeleteUser
                         showDialog={delDialog}
                         closeDialog={closeDelDialog}
-                        user={delUser}
+                        user={delUser!}
                         removeUser={onDeleteUser}
                         userLoading={userLoading}
                         userApiErrors={userApiErrors}

frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx

@@ -1,11 +1,11 @@
 /* eslint react/no-multi-comp:off */
-import { useContext, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import {
     Avatar,
-    Link,
     Icon,
     IconButton,
     LinearProgress,
+    Link,
     Typography,
 } from '@material-ui/core';
 import { Link as LinkIcon } from '@material-ui/icons';
@@ -25,6 +25,7 @@ import { useLocationSettings } from '../../../hooks/useLocationSettings';
 import useToast from '../../../hooks/useToast';
 import PermissionButton from '../../common/PermissionButton/PermissionButton';
 import { formatDateYMD } from '../../../utils/format-date';
+import { formatUnknownError } from '../../../utils/format-unknown-error';
 
 export const ApplicationEdit = () => {
     const history = useHistory();
@@ -44,7 +45,7 @@ export const ApplicationEdit = () => {
 
     const formatDate = (v: string) => formatDateYMD(v, locationSettings.locale);
 
-    const onDeleteApplication = async (evt: Event) => {
+    const onDeleteApplication = async (evt: React.SyntheticEvent) => {
         evt.preventDefault();
         try {
             await deleteApplication(appName);
@@ -54,8 +55,8 @@ export const ApplicationEdit = () => {
                 type: 'success',
             });
             history.push('/applications');
-        } catch (e: any) {
-            setToastApiError(e.toString());
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 

frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent, useState } from 'react';
-import { TextField, Grid } from '@material-ui/core';
+import { Grid, TextField } from '@material-ui/core';
 import { useCommonStyles } from '../../../common.styles';
 import icons from '../icon-names';
 import GeneralSelect from '../../common/GeneralSelect/GeneralSelect';
@@ -7,6 +7,7 @@ import useApplicationsApi from '../../../hooks/api/actions/useApplicationsApi/us
 import useToast from '../../../hooks/useToast';
 import { IApplication } from '../../../interfaces/application';
 import useApplication from '../../../hooks/api/getters/useApplication/useApplication';
+import { formatUnknownError } from '../../../utils/format-unknown-error';
 
 interface IApplicationUpdateProps {
     application: IApplication;
@@ -35,8 +36,8 @@ export const ApplicationUpdate = ({ application }: IApplicationUpdateProps) => {
                 title: 'Updated Successfully',
                 text: `${field} successfully updated`,
             });
-        } catch (e: any) {
-            setToastApiError(e.toString());
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 

frontend/src/component/application/ApplicationView/ApplicationView.tsx

@@ -4,16 +4,16 @@ import {
     Grid,
     List,
     ListItem,
-    ListItemText,
     ListItemAvatar,
+    ListItemText,
     Typography,
 } from '@material-ui/core';
 import {
-    Report,
     Extension,
-    Timeline,
     FlagRounded,
+    Report,
     SvgIconComponent,
+    Timeline,
 } from '@material-ui/icons';
 import {
     CREATE_FEATURE,
@@ -117,10 +117,9 @@ export const ApplicationView = () => {
                                     createUrl: `/projects/default/create-toggle?name=${name}`,
                                     name,
                                     permission: CREATE_FEATURE,
-                                    i,
                                 })}
                                 elseShow={foundListItem({
-                                    viewUrl: getTogglePath(project, name, true),
+                                    viewUrl: getTogglePath(project, name),
                                     name,
                                     description,
                                     Icon: FlagRounded,

frontend/src/component/common/AnimateOnMount/AnimateOnMount.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef, FC } from 'react';
+import React, { useEffect, useState, useRef, FC } from 'react';
 import ConditionallyRender from '../ConditionallyRender';
 
 interface IAnimateOnMountProps {
@@ -7,7 +7,7 @@ interface IAnimateOnMountProps {
     start: string;
     leave: string;
     container?: string;
-    style?: Object;
+    style?: React.CSSProperties;
 }
 
 const AnimateOnMount: FC<IAnimateOnMountProps> = ({

frontend/src/component/common/ApiError/ApiError.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
+import React from 'react';
 
 interface IApiErrorProps {
     className?: string;

frontend/src/component/common/ConditionallyRender/ConditionallyRender.tsx

@@ -1,9 +1,10 @@
 interface IConditionallyRenderProps {
     condition: boolean;
-    show: JSX.Element | RenderFunc;
-    elseShow?: JSX.Element | RenderFunc;
+    show: TargetElement;
+    elseShow?: TargetElement;
 }
 
+type TargetElement = JSX.Element | JSX.Element[] | RenderFunc | null;
 type RenderFunc = () => JSX.Element;
 
 const ConditionallyRender = ({
@@ -23,8 +24,9 @@ const ConditionallyRender = ({
         return result;
     };
 
-    const isFunc = (param: JSX.Element | RenderFunc) =>
-        typeof param === 'function';
+    const isFunc = (param: TargetElement): boolean => {
+        return typeof param === 'function';
+    };
 
     if (condition) {
         if (isFunc(show)) {

frontend/src/component/common/Dialogue/Dialogue.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import {
+    Button,
     Dialog,
-    DialogTitle,
     DialogActions,
     DialogContent,
-    Button,
+    DialogTitle,
 } from '@material-ui/core';
 
 import ConditionallyRender from '../ConditionallyRender/ConditionallyRender';
@@ -15,15 +15,15 @@ interface IDialogue {
     primaryButtonText?: string;
     secondaryButtonText?: string;
     open: boolean;
-    onClick: (e: any) => void;
-    onClose: () => void;
+    onClick: (e: React.SyntheticEvent) => void;
+    onClose?: (e: React.SyntheticEvent) => void;
     style?: object;
     title: string;
     fullWidth?: boolean;
     maxWidth?: 'lg' | 'sm' | 'xs' | 'md' | 'xl';
     disabledPrimaryButton?: boolean;
     formId?: string;
-    permissionButton?: React.ReactNode;
+    permissionButton?: JSX.Element;
 }
 
 const Dialogue: React.FC<IDialogue> = ({
@@ -69,7 +69,7 @@ const Dialogue: React.FC<IDialogue> = ({
             <DialogActions>
                 <ConditionallyRender
                     condition={Boolean(permissionButton)}
-                    show={permissionButton}
+                    show={permissionButton!}
                     elseShow={
                         <ConditionallyRender
                             condition={Boolean(onClick)}

frontend/src/component/common/EnvironmentSplash/EnvironmentSplashPage/EnvironmentSplashPage.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 interface EnvironmentSplashPageProps {
     title: React.ReactNode;
     topDescription: React.ReactNode;

frontend/src/component/common/FormTemplate/FormTemplate.tsx

@@ -7,6 +7,7 @@ import ConditionallyRender from '../ConditionallyRender';
 import Loader from '../Loader/Loader';
 import copy from 'copy-to-clipboard';
 import useToast from '../../../hooks/useToast';
+import React from 'react';
 
 interface ICreateProps {
     title: string;

frontend/src/component/common/Gradient/Gradient.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 interface IGradientProps {
     from: string;
     to: string;

frontend/src/component/common/Input/Input.tsx

@@ -1,6 +1,7 @@
 import { TextField } from '@material-ui/core';
 import { INPUT_ERROR_TEXT } from '../../../testIds';
-import { useStyles } from './Input.styles.ts';
+import { useStyles } from './Input.styles';
+import React from 'react';
 
 interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label: string;

frontend/src/component/common/NoItems/NoItems.tsx

@@ -1,5 +1,6 @@
 import { ReactComponent as NoItemsIcon } from '../../../assets/icons/addfiles.svg';
 import { useStyles } from './NoItems.styles';
+import React from 'react';
 
 const NoItems: React.FC = ({ children }) => {
     const styles = useStyles();

frontend/src/component/common/PaginateUI/PaginateUI.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import ConditionallyRender from '../ConditionallyRender';
 import classnames from 'classnames';
 import { useStyles } from './PaginationUI.styles';

frontend/src/component/common/PasswordField/PasswordField.tsx

@@ -1,6 +1,6 @@
 import { IconButton, InputAdornment, TextField } from '@material-ui/core';
 import { Visibility, VisibilityOff } from '@material-ui/icons';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 const PasswordField = ({ ...rest }) => {
     const [showPassword, setShowPassword] = useState(false);

frontend/src/component/common/PermissionButton/PermissionButton.tsx

@@ -1,6 +1,6 @@
 import { Button, Tooltip } from '@material-ui/core';
 import { Lock } from '@material-ui/icons';
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 import AccessContext from '../../../contexts/AccessContext';
 import ConditionallyRender from '../ConditionallyRender';
 

frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx

@@ -1,5 +1,5 @@
 import { IconButton, Tooltip } from '@material-ui/core';
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 import AccessContext from '../../../contexts/AccessContext';
 
 interface IPermissionIconButtonProps

frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx

@@ -2,6 +2,7 @@ import { useMediaQuery } from '@material-ui/core';
 import ConditionallyRender from '../ConditionallyRender';
 import PermissionButton from '../PermissionButton/PermissionButton';
 import PermissionIconButton from '../PermissionIconButton/PermissionIconButton';
+import React from 'react';
 
 interface IResponsiveButtonProps {
     Icon: React.ElementType;

frontend/src/component/common/Splash/Splash.tsx

@@ -1,12 +1,11 @@
-import { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import { Button, IconButton } from '@material-ui/core';
 import { useStyles } from './Splash.styles';
 import {
+    CloseOutlined,
     FiberManualRecord,
     FiberManualRecordOutlined,
-    CloseOutlined,
 } from '@material-ui/icons';
-import { useState } from 'react';
 import ConditionallyRender from '../ConditionallyRender';
 import { CLOSE_SPLASH } from '../../../testIds';
 

frontend/src/component/common/TagSelect/TagSelect.tsx

@@ -7,7 +7,7 @@ interface ITagSelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
     onChange: (val: any) => void;
 }
 
-const TagSelect = ({ value, types, onChange, ...rest }: ITagSelect) => {
+const TagSelect = ({ value, onChange, ...rest }: ITagSelect) => {
     const { tagTypes } = useTagTypes();
 
     const options = tagTypes.map(tagType => ({

frontend/src/component/common/ToastRenderer/Toast/Toast.tsx

@@ -3,12 +3,12 @@ import classnames from 'classnames';
 import { useContext } from 'react';
 import { IconButton } from '@material-ui/core';
 import CheckMarkBadge from '../../CheckmarkBadge/CheckMarkBadge';
-import UIContext, { IToastData } from '../../../../contexts/UIContext';
+import UIContext from '../../../../contexts/UIContext';
 import ConditionallyRender from '../../ConditionallyRender';
 import Close from '@material-ui/icons/Close';
+import { IToast } from '../../../../interfaces/toast';
 
-const Toast = ({ title, text, type, confetti }: IToastData) => {
-    // @ts-expect-error
+const Toast = ({ title, text, type, confetti }: IToast) => {
     const { setToast } = useContext(UIContext);
 
     const styles = useStyles();
@@ -51,7 +51,7 @@ const Toast = ({ title, text, type, confetti }: IToastData) => {
     };
 
     const hide = () => {
-        setToast((prev: IToastData) => ({ ...prev, show: false }));
+        setToast((prev: IToast) => ({ ...prev, show: false }));
     };
 
     return (

frontend/src/component/common/ToastRenderer/ToastRenderer.tsx

@@ -1,19 +1,19 @@
 import { Portal } from '@material-ui/core';
 import { useContext, useEffect } from 'react';
 import { useCommonStyles } from '../../../common.styles';
-import UIContext, { IToastData } from '../../../contexts/UIContext';
+import UIContext from '../../../contexts/UIContext';
 import { useStyles } from './ToastRenderer.styles';
 import AnimateOnMount from '../AnimateOnMount/AnimateOnMount';
 import Toast from './Toast/Toast';
+import { IToast } from '../../../interfaces/toast';
 
 const ToastRenderer = () => {
-    // @ts-expect-error
     const { toastData, setToast } = useContext(UIContext);
     const commonStyles = useCommonStyles();
     const styles = useStyles();
 
     const hide = () => {
-        setToast((prev: IToastData) => ({ ...prev, show: false }));
+        setToast((prev: IToast) => ({ ...prev, show: false }));
     };
 
     useEffect(() => {
@@ -31,7 +31,7 @@ const ToastRenderer = () => {
     return (
         <Portal>
             <AnimateOnMount
-                mounted={toastData?.show}
+                mounted={Boolean(toastData?.show)}
                 start={commonStyles.fadeInBottomStartWithoutFixed}
                 enter={commonStyles.fadeInBottomEnter}
                 leave={commonStyles.fadeInBottomLeave}

frontend/src/component/context/ContextList/ContextList.jsx

@@ -7,6 +7,7 @@ import {
     UPDATE_CONTEXT_FIELD,
 } from '../../providers/AccessProvider/permissions';
 import {
+    Button,
     IconButton,
     List,
     ListItem,
@@ -14,7 +15,6 @@ import {
     ListItemText,
     Tooltip,
     useMediaQuery,
-    Button,
 } from '@material-ui/core';
 import { Add, Album, Delete, Edit } from '@material-ui/icons';
 import { useContext, useState } from 'react';
@@ -25,6 +25,7 @@ import AccessContext from '../../../contexts/AccessContext';
 import useUnleashContext from '../../../hooks/api/getters/useUnleashContext/useUnleashContext';
 import useContextsApi from '../../../hooks/api/actions/useContextsApi/useContextsApi';
 import useToast from '../../../hooks/useToast';
+import { formatUnknownError } from '../../../utils/format-unknown-error';
 
 const ContextList = () => {
     const { hasAccess } = useContext(AccessContext);
@@ -46,8 +47,8 @@ const ContextList = () => {
                 title: 'Successfully deleted context',
                 text: 'Your context is now deleted',
             });
-        } catch (e) {
-            setToastApiError(e.toString());
+        } catch (error) {
+            setToastApiError(formatUnknownError(error));
         }
         setName(undefined);
         setShowDelDialogue(false);

frontend/src/component/context/CreateContext/CreateContext.tsx

@@ -8,6 +8,7 @@ import PermissionButton from '../../common/PermissionButton/PermissionButton';
 import { CREATE_CONTEXT_FIELD } from '../../providers/AccessProvider/permissions';
 import useContextsApi from '../../../hooks/api/actions/useContextsApi/useContextsApi';
 import useUnleashContext from '../../../hooks/api/getters/useUnleashContext/useUnleashContext';
+import { formatUnknownError } from '../../../utils/format-unknown-error';
 
 const CreateContext = () => {
     const { setToastData, setToastApiError } = useToast();
@@ -46,8 +47,8 @@ const CreateContext = () => {
                     confetti: true,
                     type: 'success',
                 });
-            } catch (e: any) {
-                setToastApiError(e.toString());
+            } catch (error: unknown) {
+                setToastApiError(formatUnknownError(error));
             }
         }
     };
@@ -69,7 +70,7 @@ const CreateContext = () => {
         <FormTemplate
             loading={loading}
             title="Create context"
-            description="Context fields are a basic building block used in Unleash to control roll-out. 
+            description="Context fields are a basic building block used in Unleash to control roll-out.
             They can be used together with strategy constraints as part of the activation strategy evaluation."
             documentationLink="https://docs.getunleash.io/how-to/how-to-define-custom-context-fields"
             formatApiCode={formatApiCode}

frontend/src/component/context/EditContext/EditContext.tsx

@@ -10,6 +10,7 @@ import { scrollToTop } from '../../common/util';
 import { UPDATE_CONTEXT_FIELD } from '../../providers/AccessProvider/permissions';
 import ContextForm from '../ContextForm/ContextForm';
 import useContextForm from '../hooks/useContextForm';
+import { formatUnknownError } from '../../../utils/format-unknown-error';
 
 const EditContext = () => {
     useEffect(() => {
@@ -67,8 +68,8 @@ const EditContext = () => {
                     title: 'Context information updated',
                     type: 'success',
                 });
-            } catch (e: any) {
-                setToastApiError(e.toString());
+            } catch (error: unknown) {
+                setToastApiError(formatUnknownError(error));
             }
         }
     };
@@ -81,7 +82,7 @@ const EditContext = () => {
         <FormTemplate
             loading={loading}
             title="Edit context"
-            description="Context fields are a basic building block used in Unleash to control roll-out. 
+            description="Context fields are a basic building block used in Unleash to control roll-out.
             They can be used together with strategy constraints as part of the activation strategy evaluation."
             documentationLink="https://docs.getunleash.io/how-to/how-to-define-custom-context-fields"
             formatApiCode={formatApiCode}

frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx

@@ -14,6 +14,7 @@ import HeaderTitle from '../../common/HeaderTitle';
 import PermissionButton from '../../common/PermissionButton/PermissionButton';
 import { ADMIN } from '../../providers/AccessProvider/permissions';
 import useProjectRolePermissions from '../../../hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
+import { formatUnknownError } from '../../../utils/format-unknown-error';
 
 const CreateEnvironment = () => {
     const { setToastApiError, setToastData } = useToast();
@@ -49,8 +50,8 @@ const CreateEnvironment = () => {
                     confetti: true,
                 });
                 history.push('/environments');
-            } catch (e: any) {
-                setToastApiError(e.toString());
+            } catch (error: unknown) {
+                setToastApiError(formatUnknownError(error));
             }
         }
     };

frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx

@@ -9,6 +9,7 @@ import PermissionButton from '../../common/PermissionButton/PermissionButton';
 import { ADMIN } from '../../providers/AccessProvider/permissions';
 import EnvironmentForm from '../EnvironmentForm/EnvironmentForm';
 import useEnvironmentForm from '../hooks/useEnvironmentForm';
+import { formatUnknownError } from '../../../utils/format-unknown-error';
 
 const EditEnvironment = () => {
     const { uiConfig } = useUiConfig();
@@ -49,8 +50,8 @@ const EditEnvironment = () => {
                 type: 'success',
                 title: 'Successfully updated environment.',
             });
-        } catch (e: any) {
-            setToastApiError(e.toString());
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 
@@ -61,7 +62,7 @@ const EditEnvironment = () => {
     return (
         <FormTemplate
             title="Edit environment"
-            description="Environments allow you to manage your 
+            description="Environments allow you to manage your
             product lifecycle from local development
             through production. Your projects and
             feature toggles are accessible in all your

frontend/src/component/environments/EnvironmentForm/EnvironmentTypeSelector/EnvironmentTypeSelector.tsx

@@ -1,10 +1,11 @@
 import {
     FormControl,
     FormControlLabel,
-    RadioGroup,
     Radio,
+    RadioGroup,
 } from '@material-ui/core';
 import { useStyles } from './EnvironmentTypeSelector.styles';
+import React from 'react';
 
 interface IEnvironmentTypeSelectorProps {
     onChange: (event: React.FormEvent<HTMLInputElement>) => void;

frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx

@@ -11,7 +11,7 @@ interface IEnviromentDeleteConfirmProps {
     open: boolean;
     setSelectedEnv: React.Dispatch<React.SetStateAction<IEnvironment>>;
     setDeldialogue: React.Dispatch<React.SetStateAction<boolean>>;
-    handleDeleteEnvironment: (name: string) => Promise<void>;
+    handleDeleteEnvironment: () => Promise<void>;
     confirmName: string;
     setConfirmName: React.Dispatch<React.SetStateAction<string>>;
 }

frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx

@@ -21,6 +21,7 @@ import EnvironmentToggleConfirm from './EnvironmentToggleConfirm/EnvironmentTogg
 import useProjectRolePermissions from '../../../hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { formatUnknownError } from '../../../utils/format-unknown-error';
 
 const EnvironmentList = () => {
     const defaultEnv = {
@@ -75,16 +76,16 @@ const EnvironmentList = () => {
         try {
             await sortOrderAPICall(sortOrder);
             refetch();
-        } catch (e) {
-            setToastApiError(e.toString());
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 
     const sortOrderAPICall = async (sortOrder: ISortOrderPayload) => {
         try {
             await changeSortOrder(sortOrder);
-        } catch (e) {
-            setToastApiError(e.toString());
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 
@@ -97,8 +98,8 @@ const EnvironmentList = () => {
                 title: 'Project environment deleted',
                 text: 'You have successfully deleted the project environment.',
             });
-        } catch (e) {
-            setToastApiError(e.toString());
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         } finally {
             setDeldialogue(false);
             setSelectedEnv(defaultEnv);
@@ -124,8 +125,8 @@ const EnvironmentList = () => {
                 title: 'Project environment enabled',
                 text: 'Your environment is enabled',
             });
-        } catch (e) {
-            setToastApiError(e.toString());
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         } finally {
             refetch();
         }
@@ -140,8 +141,8 @@ const EnvironmentList = () => {
                 title: 'Project environment disabled',
                 text: 'Your environment is disabled.',
             });
-        } catch (e) {
-            setToastApiError(e.toString());
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         } finally {
             refetch();
         }

frontend/src/component/feature/CreateFeature/CreateFeature.tsx

@@ -10,6 +10,7 @@ import PermissionButton from '../../common/PermissionButton/PermissionButton';
 import { CF_CREATE_BTN_ID } from '../../../testIds';
 import { useContext } from 'react';
 import UIContext from '../../../contexts/UIContext';
+import { formatUnknownError } from '../../../utils/format-unknown-error';
 
 const CreateFeature = () => {
     const { setToastData, setToastApiError } = useToast();
@@ -53,8 +54,8 @@ const CreateFeature = () => {
                     type: 'success',
                 });
                 setShowFeedback(true);
-            } catch (e: any) {
-                setToastApiError(e.toString());
+            } catch (error: unknown) {
+                setToastApiError(formatUnknownError(error));
             }
         }
     };

frontend/src/component/feature/EditFeature/EditFeature.tsx

@@ -10,6 +10,7 @@ import { IFeatureViewParams } from '../../../interfaces/params';
 import * as jsonpatch from 'fast-json-patch';
 import PermissionButton from '../../common/PermissionButton/PermissionButton';
 import { UPDATE_FEATURE } from '../../providers/AccessProvider/permissions';
+import { formatUnknownError } from '../../../utils/format-unknown-error';
 
 const EditFeature = () => {
     const { setToastData, setToastApiError } = useToast();
@@ -57,8 +58,8 @@ const EditFeature = () => {
                 title: 'Toggle updated successfully',
                 type: 'success',
             });
-        } catch (e: any) {
-            setToastApiError(e.toString());
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 

frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx

@@ -1,10 +1,12 @@
 import { useRef, useState } from 'react';
 import { TableCell, TableRow } from '@material-ui/core';
 import { useHistory } from 'react-router';
-
 import { useStyles } from '../FeatureToggleListNew.styles';
 import useToggleFeatureByEnv from '../../../../hooks/api/actions/useToggleFeatureByEnv/useToggleFeatureByEnv';
-import { IEnvironments } from '../../../../interfaces/featureToggle';
+import {
+    IEnvironments,
+    IFeatureEnvironment,
+} from '../../../../interfaces/featureToggle';
 import useToast from '../../../../hooks/useToast';
 import { getTogglePath } from '../../../../utils/route-path-helpers';
 import { SyntheticEvent } from 'react-router/node_modules/@types/react';
@@ -25,8 +27,8 @@ interface IFeatureToggleListNewItemProps {
     type: string;
     environments: IFeatureEnvironment[];
     projectId: string;
-    lastSeenAt?: Date;
-    createdAt: Date;
+    lastSeenAt?: string;
+    createdAt: string;
 }
 
 const FeatureToggleListNewItem = ({

frontend/src/component/feature/FeatureView/FeatureOverview/AddTagDialog/AddTagDialog.tsx

@@ -1,6 +1,6 @@
 import { DialogContentText } from '@material-ui/core';
 import { useParams } from 'react-router';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { IFeatureViewParams } from '../../../../../interfaces/params';
 import Dialogue from '../../../../common/Dialogue';
 import Input from '../../../../common/Input/Input';
@@ -11,6 +11,7 @@ import TagSelect from '../../../../common/TagSelect/TagSelect';
 import useFeatureApi from '../../../../../hooks/api/actions/useFeatureApi/useFeatureApi';
 import useTags from '../../../../../hooks/api/getters/useTags/useTags';
 import useToast from '../../../../../hooks/useToast';
+import { formatUnknownError } from '../../../../../utils/format-unknown-error';
 
 interface IAddTagDialogProps {
     open: boolean;
@@ -20,6 +21,7 @@ interface IAddTagDialogProps {
 interface IDefaultTag {
     type: string;
     value: string;
+
     [index: string]: string;
 }
 
@@ -62,9 +64,10 @@ const AddTagDialog = ({ open, setOpen }: IAddTagDialogProps) => {
                 text: 'We successfully added a tag to your toggle',
                 confetti: true,
             });
-        } catch (e) {
-            setToastApiError(e.message);
-            setErrors({ tagError: e.message });
+        } catch (error: unknown) {
+            const message = formatUnknownError(error);
+            setToastApiError(message);
+            setErrors({ tagError: message });
         }
     };
 

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx

@@ -8,6 +8,8 @@ import { IFeatureViewParams } from '../../../../../../interfaces/params';
 import PermissionSwitch from '../../../../../common/PermissionSwitch/PermissionSwitch';
 import StringTruncator from '../../../../../common/StringTruncator/StringTruncator';
 import { UPDATE_FEATURE_ENVIRONMENT } from '../../../../../providers/AccessProvider/permissions';
+import React from 'react';
+import { formatUnknownError } from '../../../../../../utils/format-unknown-error';
 
 interface IFeatureOverviewEnvSwitchProps {
     env: IFeatureEnvironment;
@@ -40,7 +42,7 @@ const FeatureOverviewEnvSwitch = ({
             if (callback) {
                 callback();
             }
-        } catch (e: any) {
+        } catch (e) {
             if (e.message === ENVIRONMENT_STRATEGY_ERROR) {
                 showInfoBox(true);
             } else {
@@ -61,8 +63,8 @@ const FeatureOverviewEnvSwitch = ({
             if (callback) {
                 callback();
             }
-        } catch (e: any) {
-            setToastApiError(e.message);
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx

@@ -1,5 +1,5 @@
 import { Settings } from '@material-ui/icons';
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 import { Link, useParams } from 'react-router-dom';
 import { IFeatureViewParams } from '../../../../../../../../interfaces/params';
 import { IFeatureStrategy } from '../../../../../../../../interfaces/strategy';

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx

@@ -1,6 +1,6 @@
-import { useState, useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { Chip } from '@material-ui/core';
-import { Label, Close } from '@material-ui/icons';
+import { Close, Label } from '@material-ui/icons';
 import { useParams } from 'react-router-dom';
 import useTags from '../../../../../../hooks/api/getters/useTags/useTags';
 import { IFeatureViewParams } from '../../../../../../interfaces/params';
@@ -17,6 +17,7 @@ import useToast from '../../../../../../hooks/useToast';
 import { UPDATE_FEATURE } from '../../../../../providers/AccessProvider/permissions';
 import ConditionallyRender from '../../../../../common/ConditionallyRender';
 import AccessContext from '../../../../../../contexts/AccessContext';
+import { formatUnknownError } from '../../../../../../utils/format-unknown-error';
 
 interface IFeatureOverviewTagsProps extends React.HTMLProps<HTMLButtonElement> {
     projectId: string;
@@ -53,8 +54,8 @@ const FeatureOverviewTags: React.FC<IFeatureOverviewTagsProps> = ({
                 title: 'Tag deleted',
                 text: 'Successfully deleted tag',
             });
-        } catch (e) {
-            setToastApiError(e.message);
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 

frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureSettingsMetadata.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import * as jsonpatch from 'fast-json-patch';
 import { TextField } from '@material-ui/core';
 import PermissionButton from '../../../../common/PermissionButton/PermissionButton';
@@ -11,6 +11,7 @@ import { IFeatureViewParams } from '../../../../../interfaces/params';
 import useToast from '../../../../../hooks/useToast';
 import useFeatureApi from '../../../../../hooks/api/actions/useFeatureApi/useFeatureApi';
 import ConditionallyRender from '../../../../common/ConditionallyRender';
+import { formatUnknownError } from '../../../../../utils/format-unknown-error';
 
 const FeatureSettingsMetadata = () => {
     const { hasAccess } = useContext(AccessContext);
@@ -54,8 +55,8 @@ const FeatureSettingsMetadata = () => {
             });
             setDirty(false);
             refetch();
-        } catch (e) {
-            setToastApiError(e.toString());
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 

frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProject.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { useHistory, useParams } from 'react-router';
 import AccessContext from '../../../../../contexts/AccessContext';
 import useFeatureApi from '../../../../../hooks/api/actions/useFeatureApi/useFeatureApi';
@@ -12,6 +12,7 @@ import FeatureProjectSelect from './FeatureProjectSelect/FeatureProjectSelect';
 import FeatureSettingsProjectConfirm from './FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm';
 import { IPermission } from '../../../../../interfaces/user';
 import { useAuthPermissions } from '../../../../../hooks/api/getters/useAuth/useAuthPermissions';
+import { formatUnknownError } from '../../../../../utils/format-unknown-error';
 
 const FeatureSettingsProject = () => {
     const { hasAccess } = useContext(AccessContext);
@@ -61,16 +62,16 @@ const FeatureSettingsProject = () => {
             history.replace(
                 `/projects/${newProject}/features/${featureId}/settings`
             );
-        } catch (e) {
-            setToastApiError(e.message);
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 
     const createMoveTargets = () => {
         return permissions.reduce(
-            (acc: { [key: string]: boolean }, permission: IPermission) => {
-                if (permission.permission === MOVE_FEATURE_TOGGLE) {
-                    acc[permission.project] = true;
+            (acc: { [key: string]: boolean }, p: IPermission) => {
+                if (p.project && p.permission === MOVE_FEATURE_TOGGLE) {
+                    acc[p.project] = true;
                 }
                 return acc;
             },

frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.tsx

@@ -1,7 +1,8 @@
 import { useStyles } from './FeatureStatus.styles';
 import TimeAgo from 'react-timeago';
 import ConditionallyRender from '../../../common/ConditionallyRender';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip, TooltipProps } from '@material-ui/core';
+import React from 'react';
 
 function generateUnit(unit?: string): string {
     switch (unit) {
@@ -46,8 +47,8 @@ function getColor(unit?: string): string {
 }
 
 interface FeatureStatusProps {
-    lastSeenAt?: Date;
-    tooltipPlacement?: string;
+    lastSeenAt?: string;
+    tooltipPlacement?: TooltipProps['placement'];
 }
 
 const FeatureStatus = ({
@@ -76,7 +77,7 @@ const FeatureStatus = ({
             condition={!!lastSeenAt}
             show={
                 <TimeAgo
-                    date={lastSeenAt}
+                    date={lastSeenAt!}
                     title=""
                     live={false}
                     formatter={(

frontend/src/component/feature/FeatureView/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesConfigure/FeatureStrategiesConfigure.tsx

@@ -19,6 +19,7 @@ import { ADD_NEW_STRATEGY_SAVE_ID } from '../../../../../../testIds';
 import useFeature from '../../../../../../hooks/api/getters/useFeature/useFeature';
 import { scrollToTop } from '../../../../../common/util';
 import useToast from '../../../../../../hooks/useToast';
+import { formatUnknownError } from '../../../../../../utils/format-unknown-error';
 
 const FeatureStrategiesConfigure = () => {
     const history = useHistory();
@@ -99,8 +100,8 @@ const FeatureStrategiesConfigure = () => {
             history.replace(history.location.pathname);
             refetch();
             scrollToTop();
-        } catch (e) {
-            setToastApiError(e.message);
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 

frontend/src/component/feature/FeatureView/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironmentList/FeatureStrategiesEnvironmentList.tsx

@@ -39,7 +39,6 @@ const FeatureStrategiesEnvironmentList = ({
 
     const {
         activeEnvironmentsRef,
-        setToastData,
         deleteStrategy,
         updateStrategy,
         delDialog,
@@ -162,7 +161,6 @@ const FeatureStrategiesEnvironmentList = ({
                                                 : 'Toggle is disabled and no strategies are executing'
                                         }
                                         env={activeEnvironment}
-                                        setToastData={setToastData}
                                         callback={updateFeatureEnvironmentCache}
                                     />
                                 </div>

frontend/src/component/feature/FeatureView/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironmentList/useFeatureStrategiesEnvironmentList.ts

@@ -4,9 +4,13 @@ import FeatureStrategiesUIContext from '../../../../../../contexts/FeatureStrate
 import useFeatureStrategyApi from '../../../../../../hooks/api/actions/useFeatureStrategyApi/useFeatureStrategyApi';
 import useToast from '../../../../../../hooks/useToast';
 import { IFeatureViewParams } from '../../../../../../interfaces/params';
-import { IFeatureStrategy } from '../../../../../../interfaces/strategy';
+import {
+    IFeatureStrategy,
+    IStrategyPayload,
+} from '../../../../../../interfaces/strategy';
 import cloneDeep from 'lodash.clonedeep';
 import { IFeatureEnvironment } from '../../../../../../interfaces/featureToggle';
+import { formatUnknownError } from '../../../../../../utils/format-unknown-error';
 
 const useFeatureStrategiesEnvironmentList = () => {
     const { projectId, featureId } = useParams<IFeatureViewParams>();
@@ -85,8 +89,8 @@ const useFeatureStrategiesEnvironmentList = () => {
             strategy.constraints = updateStrategyPayload.constraints;
             history.replace(history.location.pathname);
             setFeatureCache(feature);
-        } catch (e) {
-            setToastApiError(e.message);
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 
@@ -118,14 +122,13 @@ const useFeatureStrategiesEnvironmentList = () => {
                 text: `Successfully deleted strategy from ${featureId}`,
             });
             history.replace(history.location.pathname);
-        } catch (e) {
-            setToastApiError(e.message);
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 
     return {
         activeEnvironmentsRef,
-        setToastData,
         deleteStrategy,
         updateStrategy,
         delDialog,

frontend/src/component/feature/FeatureView/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesProductionGuard/FeatureStrategiesProductionGuard.tsx

@@ -11,7 +11,7 @@ interface IFeatureStrategiesProductionGuard {
     onClick: () => void;
     onClose: () => void;
     primaryButtonText: string;
-    loading: boolean;
+    loading?: boolean;
 }
 
 const FeatureStrategiesProductionGuard = ({

frontend/src/component/feature/FeatureView/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategyEditable/FeatureStrategyEditable.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { mutate } from 'swr';
 import FeatureStrategiesUIContext from '../../../../../../contexts/FeatureStrategiesUIContext';
@@ -6,8 +6,8 @@ import useFeatureStrategy from '../../../../../../hooks/api/getters/useFeatureSt
 import { IFeatureViewParams } from '../../../../../../interfaces/params';
 import {
     IConstraint,
-    IParameter,
     IFeatureStrategy,
+    IParameter,
 } from '../../../../../../interfaces/strategy';
 import FeatureStrategyAccordion from '../../FeatureStrategyAccordion/FeatureStrategyAccordion';
 import cloneDeep from 'lodash.clonedeep';

frontend/src/component/feature/FeatureView/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.tsx

@@ -23,7 +23,7 @@ interface IFeatureStrategyCardProps {
     name: string;
     description: string;
     configureNewStrategy: boolean;
-    index?: number;
+    index: number;
 }
 
 export const FEATURE_STRATEGIES_DRAG_TYPE = 'FEATURE_STRATEGIES_DRAG_TYPE';

frontend/src/component/feature/FeatureView/FeatureStrategies/FeatureStrategyAccordion/FeatureStrategyAccordionBody/FeatureStrategyAccordionBody.tsx

@@ -8,7 +8,7 @@ import useStrategies from '../../../../../../hooks/api/getters/useStrategies/use
 import GeneralStrategy from '../../common/GeneralStrategy/GeneralStrategy';
 import UserWithIdStrategy from '../../common/UserWithIdStrategy/UserWithId';
 import StrategyConstraints from '../../common/StrategyConstraints/StrategyConstraints';
-import { useContext, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import ConditionallyRender from '../../../../../common/ConditionallyRender';
 import useUiConfig from '../../../../../../hooks/api/getters/useUiConfig/useUiConfig';
 import { C } from '../../../../../common/flags';

frontend/src/component/feature/FeatureView/FeatureStrategies/common/GeneralStrategy/GeneralStrategy.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import {
-    Switch,
     FormControlLabel,
-    Tooltip,
+    Switch,
     TextField,
+    Tooltip,
 } from '@material-ui/core';
 
 import StrategyInputList from '../StrategyInputList/StrategyInputList';
 import RolloutSlider from '../RolloutSlider/RolloutSlider';
 import {
-    IParameter,
     IFeatureStrategy,
+    IParameter,
 } from '../../../../../../interfaces/strategy';
 import { useStyles } from './GeneralStrategy.styles';
 
@@ -77,7 +77,7 @@ const GeneralStrategy = ({
                         </div>
                     );
                 } else if (type === 'list') {
-                    let list = [];
+                    let list: string[] = [];
                     if (typeof value === 'string') {
                         list = value.trim().split(',').filter(Boolean);
                     }

frontend/src/component/feature/FeatureView/FeatureStrategies/common/RolloutSlider/RolloutSlider.tsx

@@ -1,6 +1,7 @@
 import { makeStyles, withStyles } from '@material-ui/core/styles';
 import { Slider, Typography } from '@material-ui/core';
 import { ROLLOUT_SLIDER_ID } from '../../../../../../testIds';
+import React from 'react';
 
 const StyledSlider = withStyles({
     root: {

frontend/src/component/feature/FeatureView/FeatureStrategies/common/StrategyConstraints/StrategyConstraints.tsx

@@ -7,7 +7,7 @@ import useUiConfig from '../../../../../../hooks/api/getters/useUiConfig/useUiCo
 import { C } from '../../../../../common/flags';
 import useUnleashContext from '../../../../../../hooks/api/getters/useUnleashContext/useUnleashContext';
 import StrategyConstraintInputField from './StrategyConstraintInputField';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 
 interface IStrategyConstraintProps {
     constraints: IConstraint[];
@@ -38,7 +38,7 @@ const StrategyConstraints: React.FC<IStrategyConstraintProps> = ({
     const enabled = uiConfig.flags[C];
     const contextNames = contextFields.map(context => context.name);
 
-    const onClick = evt => {
+    const onClick = (evt: React.SyntheticEvent) => {
         evt.preventDefault();
         addConstraint();
     };
@@ -57,15 +57,15 @@ const StrategyConstraints: React.FC<IStrategyConstraintProps> = ({
         };
     };
 
-    const removeConstraint = index => evt => {
-        evt.preventDefault();
+    const removeConstraint = (index: number) => (event: Event) => {
+        event.preventDefault();
         const updatedConstraints = [...constraints];
         updatedConstraints.splice(index, 1);
 
         updateConstraints(updatedConstraints);
     };
 
-    const updateConstraint = index => (value, field) => {
+    const updateConstraint = (index: number) => (value, field) => {
         const updatedConstraints = [...constraints];
         const constraint = updatedConstraints[index];
         constraint[field] = value;

frontend/src/component/feature/FeatureView/FeatureStrategies/common/StrategyInputList/StrategyInputList.tsx

@@ -10,7 +10,7 @@ import {
 interface IStrategyInputList {
     name: string;
     list: string[];
-    setConfig: () => void;
+    setConfig: (field: string, value: string) => void;
     disabled: boolean;
 }
 

frontend/src/component/feature/FeatureView/FeatureStrategies/common/UserWithIdStrategy/UserWithId.tsx

@@ -3,7 +3,7 @@ import StrategyInputList from '../StrategyInputList/StrategyInputList';
 
 interface IUserWithIdStrategyProps {
     parameters: IParameter;
-    updateParameter: (field: string, value: any) => void;
+    updateParameter: (field: string, value: string) => void;
     editable: boolean;
 }
 

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx

@@ -1,12 +1,11 @@
-import { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
 import {
+    Button,
     FormControl,
     FormControlLabel,
     Grid,
-    TextField,
     InputAdornment,
-    Button,
+    TextField,
     Tooltip,
 } from '@material-ui/core';
 import { Info } from '@material-ui/icons';
@@ -18,13 +17,16 @@ import ConditionallyRender from '../../../../../common/ConditionallyRender';
 import GeneralSelect from '../../../../../common/GeneralSelect/GeneralSelect';
 import { useCommonStyles } from '../../../../../../common.styles';
 import Dialogue from '../../../../../common/Dialogue';
-import { trim, modalStyles } from '../../../../../common/util';
+import { modalStyles, trim } from '../../../../../common/util';
 import PermissionSwitch from '../../../../../common/PermissionSwitch/PermissionSwitch';
 import { UPDATE_FEATURE_VARIANTS } from '../../../../../providers/AccessProvider/permissions';
 import useFeature from '../../../../../../hooks/api/getters/useFeature/useFeature';
 import { useParams } from 'react-router-dom';
 import { IFeatureViewParams } from '../../../../../../interfaces/params';
-import { IFeatureVariant } from '../../../../../../interfaces/featureToggle';
+import {
+    IFeatureVariant,
+    IOverride,
+} from '../../../../../../interfaces/featureToggle';
 import cloneDeep from 'lodash.clonedeep';
 
 const payloadOptions = [
@@ -35,6 +37,17 @@ const payloadOptions = [
 
 const EMPTY_PAYLOAD = { type: 'string', value: '' };
 
+interface IAddVariantProps {
+    showDialog: boolean;
+    closeDialog: () => void;
+    save: (variantToSave: IFeatureVariant) => Promise<void>;
+    editVariant: IFeatureVariant;
+    validateName: (value: string) => Record<string, string> | undefined;
+    validateWeight: (value: string) => Record<string, string> | undefined;
+    title: string;
+    editing: boolean;
+}
+
 const AddVariant = ({
     showDialog,
     closeDialog,
@@ -44,11 +57,11 @@ const AddVariant = ({
     validateWeight,
     title,
     editing,
-}) => {
+}: IAddVariantProps) => {
     const [data, setData] = useState({});
     const [payload, setPayload] = useState(EMPTY_PAYLOAD);
-    const [overrides, setOverrides] = useState([]);
-    const [error, setError] = useState({});
+    const [overrides, setOverrides] = useState<IOverride[]>([]);
+    const [error, setError] = useState<Record<string, string>>({});
     const commonStyles = useCommonStyles();
     const { projectId, featureId } = useParams<IFeatureViewParams>();
     const { feature } = useFeature(projectId, featureId);
@@ -80,7 +93,7 @@ const AddVariant = ({
         setError({});
     };
 
-    const setClonedVariants = clonedVariants =>
+    const setClonedVariants = (clonedVariants: IFeatureVariant[]) =>
         setVariants(cloneDeep(clonedVariants));
 
     useEffect(() => {
@@ -159,7 +172,7 @@ const AddVariant = ({
         }
     };
 
-    const onPayload = e => {
+    const onPayload = (e: React.SyntheticEvent) => {
         e.preventDefault();
         setPayload({
             ...payload,
@@ -167,13 +180,13 @@ const AddVariant = ({
         });
     };
 
-    const onCancel = e => {
+    const onCancel = (e: React.SyntheticEvent) => {
         e.preventDefault();
         clear();
         closeDialog();
     };
 
-    const updateOverrideType = index => e => {
+    const updateOverrideType = (index: number) => (e: React.SyntheticEvent) => {
         e.preventDefault();
         setOverrides(
             overrides.map((o, i) => {
@@ -186,7 +199,7 @@ const AddVariant = ({
         );
     };
 
-    const updateOverrideValues = (index, values) => {
+    const updateOverrideValues = (index: number, values: string[]) => {
         setOverrides(
             overrides.map((o, i) => {
                 if (i === index) {
@@ -197,12 +210,12 @@ const AddVariant = ({
         );
     };
 
-    const removeOverride = index => e => {
+    const removeOverride = (index: number) => (e: React.SyntheticEvent) => {
         e.preventDefault();
         setOverrides(overrides.filter((o, i) => i !== index));
     };
 
-    const onAddOverride = e => {
+    const onAddOverride = (e: React.SyntheticEvent) => {
         e.preventDefault();
         setOverrides([
             ...overrides,
@@ -388,7 +401,6 @@ const AddVariant = ({
                     removeOverride={removeOverride}
                     updateOverrideType={updateOverrideType}
                     updateOverrideValues={updateOverrideValues}
-                    updateValues={updateOverrideValues}
                 />
                 <Button
                     onClick={onAddOverride}
@@ -402,15 +414,4 @@ const AddVariant = ({
     );
 };
 
-AddVariant.propTypes = {
-    showDialog: PropTypes.bool.isRequired,
-    closeDialog: PropTypes.func.isRequired,
-    save: PropTypes.func.isRequired,
-    validateName: PropTypes.func.isRequired,
-    validateWeight: PropTypes.func.isRequired,
-    editVariant: PropTypes.object,
-    title: PropTypes.string,
-    uiConfig: PropTypes.object,
-};
-
 export default AddVariant;

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx

@@ -30,6 +30,7 @@ import cloneDeep from 'lodash.clonedeep';
 import useDeleteVariantMarkup from './FeatureVariantsListItem/useDeleteVariantMarkup';
 import PermissionButton from '../../../../common/PermissionButton/PermissionButton';
 import { mutate } from 'swr';
+import { formatUnknownError } from '../../../../../utils/format-unknown-error';
 
 const FeatureOverviewVariants = () => {
     const { hasAccess } = useContext(AccessContext);
@@ -155,8 +156,8 @@ const FeatureOverviewVariants = () => {
                 type: 'success',
                 text: 'Successfully updated variant stickiness',
             });
-        } catch (e) {
-            setToastApiError(e.message);
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 
@@ -167,8 +168,8 @@ const FeatureOverviewVariants = () => {
                 updatedVariants,
                 'Successfully removed variant'
             );
-        } catch (e) {
-            setToastApiError(e.message);
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
     const updateVariant = async (variant: IFeatureVariant) => {
@@ -210,8 +211,8 @@ const FeatureOverviewVariants = () => {
                 type: 'success',
                 text: successText,
             });
-        } catch (e) {
-            setToastApiError(e.message);
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 
@@ -221,7 +222,7 @@ const FeatureOverviewVariants = () => {
         }
     };
 
-    const validateWeight = (weight: number) => {
+    const validateWeight = (weight: string) => {
         const weightValue = parseInt(weight);
         if (weightValue > 100 || weightValue < 0) {
             return { weight: 'weight must be between 0 and 100' };
@@ -230,7 +231,7 @@ const FeatureOverviewVariants = () => {
 
     const delDialogueMarkup = useDeleteVariantMarkup({
         show: delDialog.show,
-        onClick: e => {
+        onClick: () => {
             removeVariant(delDialog.name);
             setDelDialog({ name: '', show: false });
             setToastData({

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx

@@ -1,5 +1,5 @@
-import { IconButton, Chip, TableCell, TableRow } from '@material-ui/core';
-import { Edit, Delete } from '@material-ui/icons';
+import { Chip, IconButton, TableCell, TableRow } from '@material-ui/core';
+import { Delete, Edit } from '@material-ui/icons';
 
 import styles from '../variants.module.scss';
 import { IFeatureVariant } from '../../../../../../interfaces/featureToggle';
@@ -26,7 +26,7 @@ const FeatureVariantListItem = ({
             <TableCell data-test={'VARIANT_NAME'}>{variant.name}</TableCell>
             <TableCell className={styles.chipContainer}>
                 <ConditionallyRender
-                    condition={variant.payload}
+                    condition={Boolean(variant.payload)}
                     show={<Chip label="Payload" />}
                 />
                 <ConditionallyRender

frontend/src/component/feature/FeatureView/FeatureView.tsx

@@ -61,7 +61,7 @@ const FeatureView = () => {
             setShowDelDialog(false);
             projectRefetch();
             history.push(`/projects/${projectId}`);
-        } catch (error) {
+        } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
             setShowDelDialog(false);
         }

frontend/src/component/feature/RedirectFeatureView/RedirectFeatureView.tsx

@@ -11,9 +11,7 @@ interface IRedirectParams {
 const RedirectFeatureView = () => {
     const { name } = useParams<IRedirectParams>();
     const { features } = useFeatures();
-    const [featureToggle, setFeatureToggle] = useState<IFeatureToggle | null>(
-        null
-    );
+    const [featureToggle, setFeatureToggle] = useState<IFeatureToggle>();
 
     useEffect(() => {
         const toggle = features.find(
@@ -23,7 +21,9 @@ const RedirectFeatureView = () => {
         setFeatureToggle(toggle);
     }, [features, name]);
 
-    if (!featureToggle) return null;
+    if (!featureToggle) {
+        return null;
+    }
 
     return (
         <Redirect

frontend/src/component/project/Project/CreateProject/CreateProject.tsx

@@ -8,6 +8,7 @@ import useToast from '../../../../hooks/useToast';
 import PermissionButton from '../../../common/PermissionButton/PermissionButton';
 import { CREATE_PROJECT } from '../../../providers/AccessProvider/permissions';
 import { useAuthUser } from '../../../../hooks/api/getters/useAuth/useAuthUser';
+import { formatUnknownError } from '../../../../utils/format-unknown-error';
 
 const CreateProject = () => {
     const { setToastData, setToastApiError } = useToast();
@@ -48,8 +49,8 @@ const CreateProject = () => {
                     confetti: true,
                     type: 'success',
                 });
-            } catch (e: any) {
-                setToastApiError(e.toString());
+            } catch (error: unknown) {
+                setToastApiError(formatUnknownError(error));
             }
         }
     };

frontend/src/component/project/Project/EditProject/EditProject.tsx

@@ -8,6 +8,7 @@ import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
 import useToast from '../../../../hooks/useToast';
 import PermissionButton from '../../../common/PermissionButton/PermissionButton';
 import { UPDATE_PROJECT } from '../../../providers/AccessProvider/permissions';
+import { formatUnknownError } from '../../../../utils/format-unknown-error';
 
 const EditProject = () => {
     const { uiConfig } = useUiConfig();
@@ -58,8 +59,8 @@ const EditProject = () => {
                     title: 'Project information updated',
                     type: 'success',
                 });
-            } catch (e: any) {
-                setToastApiError(e.toString());
+            } catch (error: unknown) {
+                setToastApiError(formatUnknownError(error));
             }
         }
     };

frontend/src/component/project/Project/Project.tsx

@@ -45,7 +45,7 @@ const Project = () => {
         },
         {
             title: 'Access',
-            component: <ProjectAccess projectId={id} />,
+            component: <ProjectAccess />,
             path: `${basePath}/access`,
             name: 'access',
         },

frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -27,7 +27,7 @@ const ProjectFeatureToggles = ({
     loading,
 }: IProjectFeatureToggles) => {
     const styles = useStyles();
-    const { id } = useParams();
+    const { id } = useParams<{ id: string }>();
     const history = useHistory();
     const { hasAccess } = useContext(AccessContext);
     const { uiConfig } = useUiConfig();

frontend/src/component/project/Project/ProjectForm/ProjectForm.style.ts

@@ -38,7 +38,6 @@ export const useStyles = makeStyles(theme => ({
         position: 'relative',
     },
     errorMessage: {
-        // @ts-expect-error
         fontSize: theme.fontSizes.smallBody,
         color: theme.palette.error.main,
         position: 'absolute',

frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessList.tsx

@@ -4,6 +4,7 @@ import {
     IProjectAccessUser,
 } from '../../../../hooks/api/getters/useProjectAccess/useProjectAccess';
 import { ProjectAccessListItem } from './ProjectAccessListItem/ProjectAccessListItem';
+import React from 'react';
 
 interface IProjectAccesListProps {
     page: IProjectAccessUser[];
@@ -28,8 +29,8 @@ export const ProjectAccessList: React.FC<IProjectAccesListProps> = ({
     children,
 }) => {
     const sortUsers = (users: IProjectAccessUser[]): IProjectAccessUser[] => {
-        /* This should be done on the API side in the future, 
-                we should expect the list of users to come in the 
+        /* This should be done on the API side in the future,
+                we should expect the list of users to come in the
                 same order each time and not jump around on the screen*/
 
         return users.sort(

frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx

@@ -1,22 +1,23 @@
 import {
+    Avatar,
     ListItem,
     ListItemAvatar,
-    Avatar,
-    ListItemText,
     ListItemSecondaryAction,
+    ListItemText,
     MenuItem,
 } from '@material-ui/core';
 import { Delete } from '@material-ui/icons';
 import { useParams } from 'react-router-dom';
 import {
-    IProjectAccessUser,
     IProjectAccessOutput,
+    IProjectAccessUser,
 } from '../../../../../hooks/api/getters/useProjectAccess/useProjectAccess';
 import { IProjectViewParams } from '../../../../../interfaces/params';
 import PermissionIconButton from '../../../../common/PermissionIconButton/PermissionIconButton';
 import { UPDATE_PROJECT } from '../../../../providers/AccessProvider/permissions';
 import { ProjectRoleSelect } from '../../ProjectRoleSelect/ProjectRoleSelect';
 import { useStyles } from '../ProjectAccessListItem/ProjectAccessListItem.styles';
+import React from 'react';
 
 interface IProjectAccessListItemProps {
     user: IProjectAccessUser;

frontend/src/component/project/ProjectEnvironment/EnvironmentDisableConfirm/EnvironmentDisableConfirm.tsx

@@ -2,11 +2,11 @@ import { Alert } from '@material-ui/lab';
 import React from 'react';
 import Dialogue from '../../../common/Dialogue';
 import Input from '../../../common/Input/Input';
-import { ProjectEnvironment } from '../ProjectEnvironment';
 import { useStyles } from './EnvironmentDisableConfirm.styles';
+import { IProjectEnvironment } from '../../../../interfaces/environments';
 
 interface IEnvironmentDisableConfirmProps {
-    env?: ProjectEnvironment;
+    env?: IProjectEnvironment;
     open: boolean;
     handleDisableEnvironment: () => Promise<void>;
     handleCancelDisableEnvironment: () => void;

frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import ConditionallyRender from '../../common/ConditionallyRender';
 import { useStyles } from './ProjectEnvironment.styles';
 
@@ -27,7 +27,7 @@ interface ProjectEnvironmentListProps {
 
 const ProjectEnvironmentList = ({ projectId }: ProjectEnvironmentListProps) => {
     // api state
-    const [envs, setEnvs] = useState<IProjectEnvironment>([]);
+    const [envs, setEnvs] = useState<IProjectEnvironment[]>([]);
     const { setToastData, setToastApiError } = useToast();
     const { uiConfig } = useUiConfig();
     const {
@@ -76,7 +76,7 @@ const ProjectEnvironmentList = ({ projectId }: ProjectEnvironmentListProps) => {
         } the environment.`;
     };
 
-    const toggleEnv = async (env: ProjectEnvironment) => {
+    const toggleEnv = async (env: IProjectEnvironment) => {
         if (env.enabled) {
             const enabledEnvs = getEnabledEnvs(envs);
 
@@ -128,7 +128,7 @@ const ProjectEnvironmentList = ({ projectId }: ProjectEnvironmentListProps) => {
         setConfirmName('');
     };
 
-    const genLabel = (env: ProjectEnvironment) => (
+    const genLabel = (env: IProjectEnvironment) => (
         <>
             <code>{env.name}</code> environment is{' '}
             <strong>{env.enabled ? 'enabled' : 'disabled'}</strong>

frontend/src/component/providers/UIProvider/UIProvider.tsx

@@ -1,17 +1,10 @@
 import React, { useState } from 'react';
-
-import UIContext, { IToastData } from '../../../contexts/UIContext';
+import UIContext, { createEmptyToast } from '../../../contexts/UIContext';
+import { IToast } from '../../../interfaces/toast';
 
 const UIProvider: React.FC = ({ children }) => {
-    const [toastData, setToast] = useState<IToastData>({
-        title: '',
-        text: '',
-        components: [],
-        show: false,
-        persist: false,
-        type: '',
-    });
-    const [showFeedback, setShowFeedback] = useState();
+    const [toastData, setToast] = useState<IToast>(createEmptyToast());
+    const [showFeedback, setShowFeedback] = useState(false);
 
     const context = React.useMemo(
         () => ({

frontend/src/component/strategies/StrategiesList/StrategiesList.styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 export const useStyles = makeStyles(theme => ({
     listItem: {

frontend/src/component/strategies/StrategiesList/StrategiesList.tsx

@@ -36,6 +36,7 @@ import useStrategies from '../../../hooks/api/getters/useStrategies/useStrategie
 import useStrategiesApi from '../../../hooks/api/actions/useStrategiesApi/useStrategiesApi';
 import useToast from '../../../hooks/useToast';
 import { IStrategy } from '../../../interfaces/strategy';
+import { formatUnknownError } from '../../../utils/format-unknown-error';
 
 interface IDialogueMetaData {
     show: boolean;
@@ -49,7 +50,11 @@ export const StrategiesList = () => {
     const smallScreen = useMediaQuery('(max-width:700px)');
     const { hasAccess } = useContext(AccessContext);
     const [dialogueMetaData, setDialogueMetaData] = useState<IDialogueMetaData>(
-        { show: false, title: '', onConfirm: () => {} }
+        {
+            show: false,
+            title: '',
+            onConfirm: () => {},
+        }
     );
     const { strategies, refetchStrategies } = useStrategies();
     const { removeStrategy, deprecateStrategy, reactivateStrategy } =
@@ -88,7 +93,7 @@ export const StrategiesList = () => {
         />
     );
 
-    const strategyLink = ({ name, deprecated }) => (
+    const strategyLink = ({ name, deprecated }: IStrategy) => (
         <Link to={`/strategies/view/${name}`}>
             <strong>{getHumanReadableStrategyName(name)}</strong>
             <ConditionallyRender
@@ -111,8 +116,8 @@ export const StrategiesList = () => {
                         title: 'Success',
                         text: 'Strategy reactivated successfully',
                     });
-                } catch (e: any) {
-                    setToastApiError(e.toString());
+                } catch (error: unknown) {
+                    setToastApiError(formatUnknownError(error));
                 }
             },
         });
@@ -131,8 +136,8 @@ export const StrategiesList = () => {
                         title: 'Success',
                         text: 'Strategy deprecated successfully',
                     });
-                } catch (e: any) {
-                    setToastApiError(e.toString());
+                } catch (error: unknown) {
+                    setToastApiError(formatUnknownError(error));
                 }
             },
         });
@@ -151,8 +156,8 @@ export const StrategiesList = () => {
                         title: 'Success',
                         text: 'Strategy deleted successfully',
                     });
-                } catch (e: any) {
-                    setToastApiError(e.toString());
+                } catch (error: unknown) {
+                    setToastApiError(formatUnknownError(error));
                 }
             },
         });

frontend/src/component/strategies/StrategyView/StrategyView.tsx

@@ -20,7 +20,7 @@ export const StrategyView = () => {
     const { applications } = useApplications();
 
     const toggles = features.filter(toggle => {
-        return toggle?.strategies.findIndex(s => s.name === strategyName) > -1;
+        return toggle?.strategies?.find(s => s.name === strategyName);
     });
 
     const strategy = strategies.find(n => n.name === strategyName);

frontend/src/component/strategies/TogglesLinkList/TogglesLinkList.tsx

@@ -5,13 +5,14 @@ import {
     ListItemText,
     Tooltip,
 } from '@material-ui/core';
-import { PlayArrow, Pause } from '@material-ui/icons';
+import { Pause, PlayArrow } from '@material-ui/icons';
 import styles from '../../common/common.module.scss';
 import { Link } from 'react-router-dom';
 import ConditionallyRender from '../../common/ConditionallyRender';
+import { IFeatureToggle } from '../../../interfaces/featureToggle';
 
 interface ITogglesLinkListProps {
-    toggles: [];
+    toggles: IFeatureToggle[];
 }
 
 export const TogglesLinkList = ({ toggles }: ITogglesLinkListProps) => (

frontend/src/component/tags/CreateTagType/CreateTagType.tsx

@@ -7,6 +7,7 @@ import PermissionButton from '../../common/PermissionButton/PermissionButton';
 import { UPDATE_TAG_TYPE } from '../../providers/AccessProvider/permissions';
 import useTagTypeForm from '../TagTypeForm/useTagTypeForm';
 import TagTypeForm from '../TagTypeForm/TagTypeForm';
+import { formatUnknownError } from '../../../utils/format-unknown-error';
 
 const CreateTagType = () => {
     const { setToastData, setToastApiError } = useToast();
@@ -38,8 +39,8 @@ const CreateTagType = () => {
                     confetti: true,
                     type: 'success',
                 });
-            } catch (e: any) {
-                setToastApiError(e.toString());
+            } catch (error: unknown) {
+                setToastApiError(formatUnknownError(error));
             }
         }
     };

frontend/src/component/tags/EditTagType/EditTagType.tsx

@@ -8,6 +8,7 @@ import PermissionButton from '../../common/PermissionButton/PermissionButton';
 import { UPDATE_TAG_TYPE } from '../../providers/AccessProvider/permissions';
 import useTagTypeForm from '../TagTypeForm/useTagTypeForm';
 import TagForm from '../TagTypeForm/TagTypeForm';
+import { formatUnknownError } from '../../../utils/format-unknown-error';
 
 const EditTagType = () => {
     const { setToastData, setToastApiError } = useToast();
@@ -37,8 +38,8 @@ const EditTagType = () => {
                 title: 'Tag type updated',
                 type: 'success',
             });
-        } catch (e: any) {
-            setToastApiError(e.toString());
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 

frontend/src/component/tags/TagTypeList/TagTypeList.jsx

@@ -26,6 +26,7 @@ import useTagTypesApi from '../../../hooks/api/actions/useTagTypesApi/useTagType
 import useTagTypes from '../../../hooks/api/getters/useTagTypes/useTagTypes';
 import useToast from '../../../hooks/useToast';
 import PermissionIconButton from '../../common/PermissionIconButton/PermissionIconButton';
+import { formatUnknownError } from '../../../utils/format-unknown-error';
 
 export const TagTypeList = () => {
     const { hasAccess } = useContext(AccessContext);
@@ -46,8 +47,8 @@ export const TagTypeList = () => {
                 show: true,
                 text: 'Successfully deleted tag type.',
             });
-        } catch (e) {
-            setToastApiError(e.toString());
+        } catch (error) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 

frontend/src/component/user/DemoAuth/DemoAuth.jsx

@@ -8,6 +8,7 @@ import { useHistory } from 'react-router-dom';
 import { useAuthApi } from '../../../hooks/api/actions/useAuthApi/useAuthApi';
 import { useAuthUser } from '../../../hooks/api/getters/useAuth/useAuthUser';
 import useToast from '../../../hooks/useToast';
+import { formatUnknownError } from '../../../utils/format-unknown-error';
 
 const DemoAuth = ({ authDetails }) => {
     const [email, setEmail] = useState('');
@@ -23,8 +24,8 @@ const DemoAuth = ({ authDetails }) => {
             await emailAuth(authDetails.path, email);
             refetchUser();
             history.push(`/`);
-        } catch (e) {
-            setToastApiError(e.toString());
+        } catch (error) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 

frontend/src/component/user/SimpleAuth/SimpleAuth.jsx

@@ -7,6 +7,7 @@ import { useAuthApi } from '../../../hooks/api/actions/useAuthApi/useAuthApi';
 import { useAuthUser } from '../../../hooks/api/getters/useAuth/useAuthUser';
 import { LOGIN_BUTTON, LOGIN_EMAIL_ID } from '../../../testIds';
 import useToast from '../../../hooks/useToast';
+import { formatUnknownError } from '../../../utils/format-unknown-error';
 
 const SimpleAuth = ({ authDetails }) => {
     const [email, setEmail] = useState('');
@@ -22,8 +23,8 @@ const SimpleAuth = ({ authDetails }) => {
             await emailAuth(authDetails.path, email);
             refetchUser();
             history.push(`/`);
-        } catch (e) {
-            setToastApiError(e.toString());
+        } catch (error) {
+            setToastApiError(formatUnknownError(error));
         }
     };
 

frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx

@@ -1,4 +1,4 @@
-import { SyntheticEvent, useState } from 'react';
+import React, { SyntheticEvent, useState } from 'react';
 import { Button, Typography } from '@material-ui/core';
 import classnames from 'classnames';
 import { useStyles } from './EditProfile.styles';