refactor: fix some @ts-expect-errors (#1216)

* refactor: fix AddonMultiSelector errors

* refactor: fix FeatureOverviewTags errors

* refactor: fix EditProjectRole error

* refactor: fix ProjectCard error

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

@@ -1,6 +1,5 @@
 import { styled } from '@mui/system';
 import { FormControlLabel, TextField } from '@mui/material';
-import Autocomplete from '@mui/material/Autocomplete';
 
 export const StyledForm = styled('form')({
     display: 'flex',
@@ -9,10 +8,6 @@ export const StyledForm = styled('form')({
     gap: '1rem',
 });
 
-export const StyledAutocomplete = styled(Autocomplete)({
-    paddingBottom: '36px',
-    marginTop: '0px',
-});
 export const StyledFormSection = styled('section')({
     marginBottom: '36px',
 });

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

@@ -7,7 +7,13 @@ import {
     AutocompleteRenderOptionState,
 } from '@mui/material/Autocomplete';
 import { styled } from '@mui/system';
-import { capitalize, Checkbox, Paper, TextField } from '@mui/material';
+import {
+    capitalize,
+    Checkbox,
+    Paper,
+    TextField,
+    Autocomplete,
+} from '@mui/material';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import { ConditionallyRender } from '../../../common/ConditionallyRender/ConditionallyRender';
@@ -16,7 +22,6 @@ import {
     StyledHelpText,
     StyledSelectAllFormControlLabel,
     StyledTitle,
-    StyledAutocomplete,
 } from '../AddonForm.styles';
 
 export interface IAddonMultiSelectorProps {
@@ -153,19 +158,18 @@ export const AddonMultiSelector: VFC<IAddonMultiSelectorProps> = ({
                 condition={selectAllEnabled}
                 show={<SelectAllFormControl />}
             />
-            <StyledAutocomplete
+            <Autocomplete
+                sx={{ mb: 8 }}
                 disabled={isWildcardSelected}
                 multiple
                 limitTags={2}
                 options={options}
                 disableCloseOnSelect
-                //@ts-expect-error
                 getOptionLabel={({ label }) => label}
                 fullWidth
                 groupBy={() => 'Select/Deselect all'}
                 renderGroup={renderGroup}
                 PaperComponent={CustomPaper}
-                //@ts-expect-error
                 renderOption={renderOption}
                 renderInput={renderInput}
                 value={
@@ -176,7 +180,6 @@ export const AddonMultiSelector: VFC<IAddonMultiSelectorProps> = ({
                           )
                 }
                 onChange={(_, input) => {
-                    //@ts-expect-error
                     const state = input.map(({ value }) => value);
                     onChange(state);
                 }}

frontend/src/component/admin/projectRoles/EditProjectRole/EditProjectRole.tsx

@@ -6,7 +6,7 @@ import useProjectRolesApi from 'hooks/api/actions/useProjectRolesApi/useProjectR
 import useProjectRole from 'hooks/api/getters/useProjectRole/useProjectRole';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import useToast from 'hooks/useToast';
-import { IPermission } from 'interfaces/user';
+import { IPermission } from 'interfaces/project';
 import { useNavigate } from 'react-router-dom';
 import useProjectRoleForm from '../hooks/useProjectRoleForm';
 import ProjectRoleForm from '../ProjectRoleForm/ProjectRoleForm';
@@ -43,7 +43,6 @@ const EditProjectRole = () => {
     useEffect(() => {
         const initialCheckedPermissions = role?.permissions?.reduce(
             (acc: { [key: string]: IPermission }, curr: IPermission) => {
-                // @ts-expect-error
                 acc[getRoleKey(curr)] = curr;
                 return acc;
             },

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

@@ -18,7 +18,7 @@ import AccessContext from 'contexts/AccessContext';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 
-interface IFeatureOverviewTagsProps extends React.HTMLProps<HTMLButtonElement> {
+interface IFeatureOverviewTagsProps extends React.HTMLProps<HTMLDivElement> {
     projectId: string;
 }
 
@@ -119,32 +119,29 @@ const FeatureOverviewTags: React.FC<IFeatureOverviewTagsProps> = ({
     );
 
     return (
-        <>
-            {/* @ts-expect-error */}
-            <div className={styles.container} {...rest}>
-                <Dialogue
-                    open={showDelDialog}
-                    onClose={() => {
-                        setShowDelDialog(false);
-                        setSelectedTag({ type: '', value: '' });
-                    }}
-                    onClick={() => {
-                        setShowDelDialog(false);
-                        handleDelete();
-                        setSelectedTag({ type: '', value: '' });
-                    }}
-                    title="Are you sure you want to delete this tag?"
-                />
+        <div className={styles.container} {...rest}>
+            <Dialogue
+                open={showDelDialog}
+                onClose={() => {
+                    setShowDelDialog(false);
+                    setSelectedTag({ type: '', value: '' });
+                }}
+                onClick={() => {
+                    setShowDelDialog(false);
+                    handleDelete();
+                    setSelectedTag({ type: '', value: '' });
+                }}
+                title="Are you sure you want to delete this tag?"
+            />
 
-                <div>
-                    <ConditionallyRender
-                        condition={tags.length > 0}
-                        show={tags.map(renderTag)}
-                        elseShow={<p data-loading>No tags to display</p>}
-                    />
-                </div>
+            <div>
+                <ConditionallyRender
+                    condition={tags.length > 0}
+                    show={tags.map(renderTag)}
+                    elseShow={<p data-loading>No tags to display</p>}
+                />
             </div>
-        </>
+        </div>
     );
 };
 

frontend/src/component/project/ProjectCard/ProjectCard.tsx

@@ -36,13 +36,13 @@ export const ProjectCard = ({
     const { classes } = useStyles();
     const { hasAccess } = useContext(AccessContext);
     const { isOss } = useUiConfig();
-    const [anchorEl, setAnchorEl] = useState(null);
+    const [anchorEl, setAnchorEl] = useState<Element | null>(null);
     const [showDelDialog, setShowDelDialog] = useState(false);
     const navigate = useNavigate();
-    // @ts-expect-error
-    const handleClick = e => {
-        e.preventDefault();
-        setAnchorEl(e.currentTarget);
+
+    const handleClick = (event: React.SyntheticEvent) => {
+        event.preventDefault();
+        setAnchorEl(event.currentTarget);
     };
 
     const canDeleteProject =