refactor: replace ts-ignore with ts-expect-error (#681)

* refactor: replace ts-ignore with ts-expect-error

* refactor: remove unused ts-expect-errors

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

@@ -12,7 +12,6 @@ import { useState } from 'react';
 import { scrollToTop } from '../../../common/util';
 
 const CreateApiToken = () => {
-    /* @ts-ignore */
     const { setToastApiError } = useToast();
     const { uiConfig } = useUiConfig();
     const history = useHistory();

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

@@ -9,7 +9,6 @@ import PermissionButton from '../../../common/PermissionButton/PermissionButton'
 import { ADMIN } from '../../../providers/AccessProvider/permissions';
 
 const CreateProjectRole = () => {
-    /* @ts-ignore */
     const { setToastData, setToastApiError } = useToast();
     const { uiConfig } = useUiConfig();
     const history = useHistory();

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

@@ -12,7 +12,6 @@ import PermissionButton from '../../../common/PermissionButton/PermissionButton'
 import { ADMIN } from '../../../providers/AccessProvider/permissions';
 
 const CreateUser = () => {
-    /* @ts-ignore */
     const { setToastApiError } = useToast();
     const { uiConfig } = useUiConfig();
     const history = useHistory();

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

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

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

@@ -24,7 +24,6 @@ const FormTemplate: React.FC<ICreateProps> = ({
     loading,
     formatApiCode,
 }) => {
-    // @ts-ignore-next-line
     const { setToastData } = useToast();
     const styles = useStyles();
     const smallScreen = useMediaQuery(`(max-width:${900}px)`);

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

@@ -8,7 +8,7 @@ import ConditionallyRender from '../../ConditionallyRender';
 import Close from '@material-ui/icons/Close';
 
 const Toast = ({ title, text, type, confetti }: IToastData) => {
-    // @ts-ignore
+    // @ts-expect-error
     const { setToast } = useContext(UIContext);
 
     const styles = useStyles();

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

@@ -7,7 +7,7 @@ import AnimateOnMount from '../AnimateOnMount/AnimateOnMount';
 import Toast from './Toast/Toast';
 
 const ToastRenderer = () => {
-    // @ts-ignore-next-line
+    // @ts-expect-error
     const { toastData, setToast } = useContext(UIContext);
     const commonStyles = useCommonStyles();
     const styles = useStyles();

frontend/src/component/context/ContextForm/ContextForm.styles.ts

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

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

@@ -16,7 +16,6 @@ import { ADMIN } from '../../providers/AccessProvider/permissions';
 import useProjectRolePermissions from '../../../hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
 
 const CreateEnvironment = () => {
-    /* @ts-ignore */
     const { setToastApiError, setToastData } = useToast();
     const { uiConfig } = useUiConfig();
     const history = useHistory();
@@ -76,7 +75,7 @@ const CreateEnvironment = () => {
                 <FormTemplate
                     loading={loading}
                     title="Create 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/EnvironmentForm.styles.ts

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

frontend/src/component/environments/EnvironmentForm/EnvironmentTypeSelector/EnvironmentTypeSelector.styles.ts

@@ -6,7 +6,7 @@ export const useStyles = makeStyles(theme => ({
     },
     formHeader: {
         fontWeight: 'bold',
-        //@ts-ignore
+        // @ts-expect-error
         fontSize: theme.fontSizes.bodySize,
         marginTop: '1.5rem',
         marginBottom: '0.5rem',

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

@@ -12,7 +12,6 @@ import { useContext } from 'react';
 import UIContext from '../../../contexts/UIContext';
 
 const CreateFeature = () => {
-    /* @ts-ignore */
     const { setToastData, setToastApiError } = useToast();
     const { setShowFeedback } = useContext(UIContext);
     const { uiConfig } = useUiConfig();

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

@@ -12,7 +12,6 @@ import PermissionButton from '../../common/PermissionButton/PermissionButton';
 import { UPDATE_FEATURE } from '../../providers/AccessProvider/permissions';
 
 const EditFeature = () => {
-    /* @ts-ignore */
     const { setToastData, setToastApiError } = useToast();
     const { uiConfig } = useUiConfig();
     const history = useHistory();

frontend/src/component/feature/FeatureForm/FeatureForm.styles.ts

@@ -38,7 +38,7 @@ export const useStyles = makeStyles(theme => ({
         marginBottom: '0.5rem',
     },
     typeDescription: {
-        //@ts-ignore
+        // @ts-expect-error
         fontSize: theme.fontSizes.smallBody,
         color: theme.palette.grey[600],
         top: '-13px',
@@ -55,7 +55,7 @@ export const useStyles = makeStyles(theme => ({
         position: 'relative',
     },
     errorMessage: {
-        //@ts-ignore
+        // @ts-expect-error
         fontSize: theme.fontSizes.smallBody,
         color: theme.palette.error.main,
         position: 'absolute',

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

@@ -24,7 +24,7 @@ interface IFeatureToggleListNewProps {
     projectId: string;
 }
 
-//@ts-ignore
+// @ts-expect-error
 const sortList = (list, sortOpt) => {
     if (!list) {
         return list;
@@ -33,7 +33,7 @@ const sortList = (list, sortOpt) => {
         return list;
     }
     if (sortOpt.type === 'string') {
-        //@ts-ignore
+        // @ts-expect-error
         return list.sort((a, b) => {
             const fieldA = a[sortOpt.field]?.toUpperCase();
             const fieldB = b[sortOpt.field]?.toUpperCase();
@@ -49,7 +49,7 @@ const sortList = (list, sortOpt) => {
         });
     }
     if (sortOpt.type === 'date') {
-        //@ts-ignore
+        // @ts-expect-error
         return list.sort((a, b) => {
             const fieldA = new Date(a[sortOpt.field]);
             const fieldB = new Date(b[sortOpt.field]);

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

@@ -75,7 +75,6 @@ const FeatureStatus = ({
         <ConditionallyRender
             condition={!!lastSeenAt}
             show={
-                //@ts-ignore
                 <TimeAgo
                     date={lastSeenAt}
                     title=""

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

@@ -147,7 +147,6 @@ const FeatureOverviewVariants = () => {
 
         try {
             const res = await patchFeatureVariants(projectId, featureId, patch);
-            // @ts-ignore
             const { variants } = await res.json();
             mutate(FEATURE_CACHE_KEY, { ...feature, variants }, false);
             setToastData({
@@ -204,7 +203,6 @@ const FeatureOverviewVariants = () => {
         if (patch.length === 0) return;
         try {
             const res = await patchFeatureVariants(projectId, featureId, patch);
-            // @ts-ignore
             const { variants } = await res.json();
             mutate(FEATURE_CACHE_KEY, { ...feature, variants }, false);
             setToastData({

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

@@ -10,7 +10,6 @@ import PermissionButton from '../../../common/PermissionButton/PermissionButton'
 import { CREATE_PROJECT } from '../../../providers/AccessProvider/permissions';
 
 const CreateProject = () => {
-    /* @ts-ignore */
     const { setToastData, setToastApiError } = useToast();
     const { refetch } = useUser();
     const { uiConfig } = useUiConfig();

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

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

frontend/src/component/tagTypes/TagTypeForm/TagTypeForm.styles.ts

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

frontend/src/hooks/api/getters/httpErrorResponseHandler.ts

@@ -5,15 +5,15 @@ const handleErrorResponses = (target: string) => async (res: Response) => {
         );
         // Try to resolve body, but don't rethrow res.json is not a function
         try {
-            // @ts-ignore
+            // @ts-expect-error
             error.info = await res.json();
         } catch (e) {
-            // @ts-ignore
+            // @ts-expect-error
             error.info = {};
         }
-        // @ts-ignore
+        // @ts-expect-error
         error.status = res.status;
-        // @ts-ignore
+        // @ts-expect-error
         error.statusText = res.statusText;
         throw error;
     }

frontend/src/hooks/useToast.tsx

@@ -20,7 +20,7 @@ interface IToastOptions {
 }
 
 const useToast = () => {
-    // @ts-ignore
+    // @ts-expect-error
     const { setToast } = useContext(UIContext);
 
     const hideToast = () =>