Merge pull request #1665 from automatisch/ts-removal-in-web

refactor(web): remove typescript
2024-02-29 11:43:07 +01:00
parent 007334fef0 b3ae2d2748
commit 2c15e0dd32
337 changed files with 2067 additions and 4997 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,18 +0,0 @@
-module.exports = {
-  root: true,
-  parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'prettier',
-  ],
-  overrides: [
-    {
-      files: ['**/*.test.ts', '**/test/**/*.ts'],
-      rules: {
-        '@typescript-eslint/ban-ts-comment': ['off'],
-      },
-    },
-  ],
-};
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -22,7 +22,7 @@ jobs:
      - run: echo "💡 The ${{ github.repository }} repository has been cloned to the runner."
      - run: echo "🖥️ The workflow is now ready to test your code on the runner."
      - run: yarn --frozen-lockfile
-      - run: yarn lint
+      - run: cd packages/backend && yarn lint
      - run: echo "🍏 This job's status is ${{ job.status }}."
  start-backend-server:
    runs-on: ubuntu-latest
--- a/package.json
+++ b/package.json
@@ -6,7 +6,6 @@
    "start": "lerna run --stream --parallel --scope=@*/{web,backend} dev",
    "start:web": "lerna run --stream --scope=@*/web dev",
    "start:backend": "lerna run --stream --scope=@*/backend dev",
-    "lint": "lerna run --no-bail --stream --parallel --scope=@*/{web,backend} lint",
    "build:docs": "cd ./packages/docs && yarn install && yarn build"
  },
  "workspaces": {
@@ -21,8 +20,6 @@
    ]
  },
  "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.9.1",
-    "@typescript-eslint/parser": "^5.9.1",
    "eslint": "^8.13.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
--- a/packages/backend/.eslintignore
+++ b/packages/backend/.eslintignore
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -11,7 +11,7 @@
    "start:worker": "node src/worker.js",
    "pretest": "APP_ENV=test node ./test/setup/prepare-test-env.js",
    "test": "APP_ENV=test vitest run",
-    "lint": "eslint . --ignore-path ../../.eslintignore",
+    "lint": "eslint .",
    "db:create": "node ./bin/database/create.js",
    "db:seed:user": "node ./bin/database/seed-user.js",
    "db:drop": "node ./bin/database/drop.js",
@@ -95,7 +95,6 @@
    "url": "https://github.com/automatisch/automatisch/issues"
  },
  "devDependencies": {
-    "@typescript-eslint/utils": "^7.0.2",
    "nodemon": "^2.0.13",
    "supertest": "^6.3.3",
    "vitest": "^1.1.3"
--- a/packages/e2e-tests/package.json
+++ b/packages/e2e-tests/package.json
@@ -28,8 +28,6 @@
    "@playwright/test": "^1.36.2"
  },
  "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.9.1",
-    "@typescript-eslint/parser": "^5.9.1",
    "dotenv": "^16.3.1",
    "eslint": "^8.13.0",
    "eslint-config-prettier": "^8.3.0",
--- a/packages/web/.eslintignore
+++ b/packages/web/.eslintignore
@@ -0,0 +1,3 @@
+node_modules
+build
+source
--- a/packages/web/.eslintrc.js
+++ b/packages/web/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['react-app', 'prettier'],
+};
--- a/packages/web/jsconfig.json
+++ b/packages/web/jsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": ["src"]
+}
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -16,16 +16,9 @@
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/lodash": "^4.14.182",
-    "@types/luxon": "^2.0.8",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/react-window": "^1.8.5",
-    "@types/uuid": "^9.0.0",
    "clipboard-copy": "^4.0.1",
    "compare-versions": "^4.1.3",
+    "eslint-plugin-react": "^7.33.2",
    "graphql": "^15.6.0",
    "lodash": "^4.17.21",
    "luxon": "^2.3.1",
@@ -42,7 +35,6 @@
    "slate": "^0.94.1",
    "slate-history": "^0.93.0",
    "slate-react": "^0.94.2",
-    "typescript": "^4.6.3",
    "uuid": "^9.0.0",
    "web-vitals": "^1.0.1",
    "yup": "^0.32.11"
@@ -54,7 +46,7 @@
    "build:watch": "yarn nodemon --exec react-scripts build --watch 'src/**/*.ts' --watch 'public/**/*' --ext ts,html",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
-    "lint": "eslint . --ignore-path ../../.eslintignore",
+    "lint": "eslint .",
    "prepack": "REACT_APP_GRAPHQL_URL=/graphql yarn build"
  },
  "files": [
@@ -87,5 +79,15 @@
  },
  "publishConfig": {
    "access": "public"
+  },
+  "devDependencies": {
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-react-app": "^7.0.1",
+    "prettier": "^3.2.5"
+  },
+  "eslintConfig": {
+    "extends": [
+      "./.eslintrc.js"
+    ]
  }
 }
--- a/packages/web/src/adminSettingsRoutes.jsx
+++ b/packages/web/src/adminSettingsRoutes.jsx
@@ -8,12 +8,10 @@ import CreateRole from 'pages/CreateRole/index.ee';
 import EditRole from 'pages/EditRole/index.ee';
 import Authentication from 'pages/Authentication';
 import UserInterface from 'pages/UserInterface';
-
 import * as URLS from 'config/urls';
 import Can from 'components/Can';
 import AdminApplications from 'pages/AdminApplications';
 import AdminApplication from 'pages/AdminApplication';
-
 // TODO: consider introducing redirections to `/` as fallback
 export default (
  <>
--- a/packages/web/src/components/AccountDropdownMenu/index.jsx
+++ b/packages/web/src/components/AccountDropdownMenu/index.jsx
@@ -1,40 +1,24 @@
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
 import MenuItem from '@mui/material/MenuItem';
-import Menu, { MenuProps } from '@mui/material/Menu';
+import Menu from '@mui/material/Menu';
 import { Link } from 'react-router-dom';
-
 import Can from 'components/Can';
 import apolloClient from 'graphql/client';
 import * as URLS from 'config/urls';
 import useAuthentication from 'hooks/useAuthentication';
 import useFormatMessage from 'hooks/useFormatMessage';
-
-type AccountDropdownMenuProps = {
-  open: boolean;
-  onClose: () => void;
-  anchorEl: MenuProps['anchorEl'];
-  id: string;
-};
-
-function AccountDropdownMenu(
-  props: AccountDropdownMenuProps
-): React.ReactElement {
+function AccountDropdownMenu(props) {
  const formatMessage = useFormatMessage();
  const authentication = useAuthentication();
  const navigate = useNavigate();
-
  const { open, onClose, anchorEl, id } = props;
-
  const logout = async () => {
    authentication.updateToken('');
    await apolloClient.clearStore();
-
    onClose();
-
    navigate(URLS.LOGIN);
  };
-
  return (
    <Menu
      anchorEl={anchorEl}
@@ -56,10 +40,7 @@ function AccountDropdownMenu(
      </MenuItem>

      <Can I="read" a="User">
-        <MenuItem
-          component={Link}
-          to={URLS.ADMIN_SETTINGS_DASHBOARD}
-        >
+        <MenuItem component={Link} to={URLS.ADMIN_SETTINGS_DASHBOARD}>
          {formatMessage('accountDropdownMenu.adminSettings')}
        </MenuItem>
      </Can>
@@ -70,5 +51,4 @@ function AccountDropdownMenu(
    </Menu>
  );
 }
-
 export default AccountDropdownMenu;
--- a/packages/web/src/components/AddAppConnection/index.jsx
+++ b/packages/web/src/components/AddAppConnection/index.jsx
@@ -1,4 +1,3 @@
-import type { IApp, IField, IJSONObject } from 'types';
 import LoadingButton from '@mui/lab/LoadingButton';
 import Alert from '@mui/material/Alert';
 import Dialog from '@mui/material/Dialog';
@@ -6,32 +5,21 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import * as React from 'react';
-import { FieldValues, SubmitHandler } from 'react-hook-form';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-
 import AppAuthClientsDialog from 'components/AppAuthClientsDialog/index.ee';
 import InputCreator from 'components/InputCreator';
 import * as URLS from 'config/urls';
 import useAuthenticateApp from 'hooks/useAuthenticateApp.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
-import { generateExternalLink } from '../../helpers/translationValues';
+import { generateExternalLink } from 'helpers/translationValues';
 import { Form } from './style';
-
-type AddAppConnectionProps = {
-  onClose: (response: Record<string, unknown>) => void;
-  application: IApp;
-  connectionId?: string;
-};
-
-export default function AddAppConnection(
-  props: AddAppConnectionProps
-): React.ReactElement {
+export default function AddAppConnection(props) {
  const { application, connectionId, onClose } = props;
  const { name, authDocUrl, key, auth } = application;
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const formatMessage = useFormatMessage();
-  const [error, setError] = React.useState<IJSONObject | null>(null);
+  const [error, setError] = React.useState(null);
  const [inProgress, setInProgress] = React.useState(false);
  const hasConnection = Boolean(connectionId);
  const useShared = searchParams.get('shared') === 'true';
@@ -42,7 +30,6 @@ export default function AddAppConnection(
    appAuthClientId,
    useShared: !!appAuthClientId,
  });
-
  React.useEffect(function relayProviderData() {
    if (window.opener) {
      window.opener.postMessage({
@@ -52,51 +39,41 @@ export default function AddAppConnection(
      window.close();
    }
  }, []);
-
  React.useEffect(
    function initiateSharedAuthenticationForGivenAuthClient() {
      if (!appAuthClientId) return;
      if (!authenticate) return;
-
      const asyncAuthenticate = async () => {
        await authenticate();
-
        navigate(URLS.APP_CONNECTIONS(key));
      };
-
      asyncAuthenticate();
    },
-    [appAuthClientId, authenticate]
+    [appAuthClientId, authenticate],
  );
-
-  const handleClientClick = (appAuthClientId: string) =>
+  const handleClientClick = (appAuthClientId) =>
    navigate(URLS.APP_ADD_CONNECTION_WITH_AUTH_CLIENT_ID(key, appAuthClientId));
-
  const handleAuthClientsDialogClose = () =>
    navigate(URLS.APP_CONNECTIONS(key));
-
-  const submitHandler: SubmitHandler<FieldValues> = React.useCallback(
+  const submitHandler = React.useCallback(
    async (data) => {
      if (!authenticate) return;
-
      setInProgress(true);
-
      try {
        const response = await authenticate({
          fields: data,
        });
-        onClose(response as Record<string, unknown>);
+        onClose(response);
      } catch (err) {
-        const error = err as IJSONObject;
+        const error = err;
        console.log(error);
-        setError((error.graphQLErrors as IJSONObject[])?.[0]);
+        setError(error.graphQLErrors?.[0]);
      } finally {
        setInProgress(false);
      }
    },
-    [authenticate]
+    [authenticate],
  );
-
  if (useShared)
    return (
      <AppAuthClientsDialog
@@ -105,9 +82,7 @@ export default function AddAppConnection(
        onClientClick={handleClientClick}
      />
    );
-
  if (appAuthClientId) return <React.Fragment />;
-
  return (
    <Dialog open={true} onClose={onClose} data-test="add-app-connection-dialog">
      <DialogTitle>
@@ -142,7 +117,7 @@ export default function AddAppConnection(
      <DialogContent>
        <DialogContentText tabIndex={-1} component="div">
          <Form onSubmit={submitHandler}>
-            {auth?.fields?.map((field: IField) => (
+            {auth?.fields?.map((field) => (
              <InputCreator key={field.key} schema={field} />
            ))}

--- a/packages/web/src/components/AddAppConnection/style.js
+++ b/packages/web/src/components/AddAppConnection/style.js
@@ -1,6 +1,5 @@
 import { styled } from '@mui/material/styles';
 import BaseForm from 'components/Form';
-
 export const Form = styled(BaseForm)(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
--- a/packages/web/src/components/AddNewAppConnection/index.jsx
+++ b/packages/web/src/components/AddNewAppConnection/index.jsx
@@ -19,67 +19,52 @@ import InputLabel from '@mui/material/InputLabel';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import FormControl from '@mui/material/FormControl';
 import Box from '@mui/material/Box';
-import type { IApp } from 'types';
-
 import * as URLS from 'config/urls';
 import AppIcon from 'components/AppIcon';
 import { GET_APPS } from 'graphql/queries/get-apps';
 import useFormatMessage from 'hooks/useFormatMessage';
-
-function createConnectionOrFlow(appKey: string, supportsConnections = false) {
+function createConnectionOrFlow(appKey, supportsConnections = false) {
  if (!supportsConnections) {
    return URLS.CREATE_FLOW_WITH_APP(appKey);
  }
-
  return URLS.APP_ADD_CONNECTION(appKey);
 }
-
-type AddNewAppConnectionProps = {
-  onClose: () => void;
-};
-
-export default function AddNewAppConnection(
-  props: AddNewAppConnectionProps
-): React.ReactElement {
+export default function AddNewAppConnection(props) {
  const { onClose } = props;
  const theme = useTheme();
  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('sm'));
  const formatMessage = useFormatMessage();
-  const [appName, setAppName] = React.useState<string | null>(null);
+  const [appName, setAppName] = React.useState(null);
  const [loading, setLoading] = React.useState(false);
  const [getApps, { data }] = useLazyQuery(GET_APPS, {
    onCompleted: () => {
      setLoading(false);
    },
  });
-
  const fetchData = React.useMemo(
    () => debounce((name) => getApps({ variables: { name } }), 300),
-    [getApps]
+    [getApps],
  );
-
  React.useEffect(
    function fetchAppsOnAppNameChange() {
      setLoading(true);
-
      fetchData(appName);
    },
-    [fetchData, appName]
+    [fetchData, appName],
  );
-
  React.useEffect(function cancelDebounceOnUnmount() {
    return () => {
      fetchData.cancel();
    };
  }, []);
-
  return (
    <Dialog
      open={true}
      onClose={onClose}
      maxWidth="sm"
      fullWidth
-      data-test="add-app-connection-dialog">
+      data-test="add-app-connection-dialog"
+    >
      <DialogTitle>{formatMessage('apps.addNewAppConnection')}</DialogTitle>

      <Box px={3}>
@@ -123,7 +108,7 @@ export default function AddNewAppConnection(
          )}

          {!loading &&
-            data?.getApps?.map((app: IApp) => (
+            data?.getApps?.map((app) => (
              <ListItem disablePadding key={app.name} data-test="app-list-item">
                <ListItemButton
                  component={Link}
--- a/packages/web/src/components/AdminApplicationAuthClientDialog/index.jsx
+++ b/packages/web/src/components/AdminApplicationAuthClientDialog/index.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import type { IField } from 'types';
 import LoadingButton from '@mui/lab/LoadingButton';
 import Alert from '@mui/material/Alert';
 import Dialog from '@mui/material/Dialog';
@@ -7,32 +6,12 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import CircularProgress from '@mui/material/CircularProgress';
-import { FieldValues, SubmitHandler } from 'react-hook-form';
-import type { UseFormProps } from 'react-hook-form';
-import type { ApolloError } from '@apollo/client';
-
 import useFormatMessage from 'hooks/useFormatMessage';
 import InputCreator from 'components/InputCreator';
 import Switch from 'components/Switch';
 import TextField from 'components/TextField';
-
 import { Form } from './style';
-
-type AdminApplicationAuthClientDialogProps = {
-  title: string;
-  authFields?: IField[];
-  defaultValues: UseFormProps['defaultValues'];
-  loading: boolean;
-  submitting: boolean;
-  disabled?: boolean;
-  error?: ApolloError;
-  submitHandler: SubmitHandler<FieldValues>;
-  onClose: () => void;
-};
-
-export default function AdminApplicationAuthClientDialog(
-  props: AdminApplicationAuthClientDialogProps
-): React.ReactElement {
+export default function AdminApplicationAuthClientDialog(props) {
  const {
    error,
    onClose,
@@ -45,7 +24,6 @@ export default function AdminApplicationAuthClientDialog(
    disabled = false,
  } = props;
  const formatMessage = useFormatMessage();
-
  return (
    <Dialog open={true} onClose={onClose}>
      <DialogTitle>{title}</DialogTitle>
@@ -80,7 +58,7 @@ export default function AdminApplicationAuthClientDialog(
                    label={formatMessage('authClient.inputName')}
                    fullWidth
                  />
-                  {authFields?.map((field: IField) => (
+                  {authFields?.map((field) => (
                    <InputCreator key={field.key} schema={field} />
                  ))}
                  <LoadingButton
--- a/packages/web/src/components/AdminApplicationAuthClientDialog/style.js
+++ b/packages/web/src/components/AdminApplicationAuthClientDialog/style.js
@@ -1,6 +1,5 @@
 import { styled } from '@mui/material/styles';
 import BaseForm from 'components/Form';
-
 export const Form = styled(BaseForm)(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
--- a/packages/web/src/components/AdminApplicationAuthClients/index.jsx
+++ b/packages/web/src/components/AdminApplicationAuthClients/index.jsx
@@ -7,27 +7,16 @@ import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
 import Chip from '@mui/material/Chip';
 import Button from '@mui/material/Button';
-
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useAppAuthClients from 'hooks/useAppAuthClients.ee';
-
 import NoResultFound from 'components/NoResultFound';
-
-type AdminApplicationAuthClientsProps = {
-  appKey: string;
-};
-
-function AdminApplicationAuthClients(
-  props: AdminApplicationAuthClientsProps
-): React.ReactElement {
+function AdminApplicationAuthClients(props) {
  const { appKey } = props;
  const formatMessage = useFormatMessage();
  const { appAuthClients, loading } = useAppAuthClients({ appKey });
-
  if (loading)
    return <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />;
-
  if (!appAuthClients?.length) {
    return (
      <NoResultFound
@@ -36,7 +25,6 @@ function AdminApplicationAuthClients(
      />
    );
  }
-
  const sortedAuthClients = appAuthClients.slice().sort((a, b) => {
    if (a.id < b.id) {
      return -1;
@@ -46,7 +34,6 @@ function AdminApplicationAuthClients(
    }
    return 0;
  });
-
  return (
    <div>
      {sortedAuthClients.map((client) => (
@@ -67,7 +54,7 @@ function AdminApplicationAuthClients(
                  label={formatMessage(
                    client?.active
                      ? 'adminAppsAuthClients.statusActive'
-                      : 'adminAppsAuthClients.statusInactive'
+                      : 'adminAppsAuthClients.statusInactive',
                  )}
                />
              </Stack>
@@ -85,5 +72,4 @@ function AdminApplicationAuthClients(
    </div>
  );
 }
-
 export default AdminApplicationAuthClients;
--- a/packages/web/src/components/AdminApplicationCreateAuthClient/index.jsx
+++ b/packages/web/src/components/AdminApplicationCreateAuthClient/index.jsx
@@ -1,24 +1,11 @@
 import React, { useCallback, useMemo } from 'react';
-import type { IApp } from 'types';
-import { FieldValues, SubmitHandler } from 'react-hook-form';
 import { useMutation } from '@apollo/client';
 import { CREATE_APP_CONFIG } from 'graphql/mutations/create-app-config';
 import { CREATE_APP_AUTH_CLIENT } from 'graphql/mutations/create-app-auth-client';
-
 import useAppConfig from 'hooks/useAppConfig.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
-
 import AdminApplicationAuthClientDialog from 'components/AdminApplicationAuthClientDialog';
-
-type AdminApplicationCreateAuthClientProps = {
-  appKey: string;
-  application: IApp;
-  onClose: () => void;
-};
-
-export default function AdminApplicationCreateAuthClient(
-  props: AdminApplicationCreateAuthClientProps
-): React.ReactElement {
+export default function AdminApplicationCreateAuthClient(props) {
  const { appKey, application, onClose } = props;
  const { auth } = application;
  const formatMessage = useFormatMessage();
@@ -37,10 +24,8 @@ export default function AdminApplicationCreateAuthClient(
    refetchQueries: ['GetAppAuthClients'],
    context: { autoSnackbar: false },
  });
-
-  const submitHandler: SubmitHandler<FieldValues> = async (values) => {
+  const submitHandler = async (values) => {
    let appConfigId = appConfig?.id;
-
    if (!appConfigId) {
      const { data: appConfigData } = await createAppConfig({
        variables: {
@@ -54,9 +39,7 @@ export default function AdminApplicationCreateAuthClient(
      });
      appConfigId = appConfigData.createAppConfig.id;
    }
-
    const { name, active, ...formattedAuthDefaults } = values;
-
    await createAppAuthClient({
      variables: {
        input: {
@@ -67,17 +50,13 @@ export default function AdminApplicationCreateAuthClient(
        },
      },
    });
-
    onClose();
  };
-
  const getAuthFieldsDefaultValues = useCallback(() => {
    if (!auth?.fields) {
      return {};
    }
-    const defaultValues: {
-      [key: string]: any;
-    } = {};
+    const defaultValues = {};
    auth.fields.forEach((field) => {
      if (field.value || field.type !== 'string') {
        defaultValues[field.key] = field.value;
@@ -87,16 +66,14 @@ export default function AdminApplicationCreateAuthClient(
    });
    return defaultValues;
  }, [auth?.fields]);
-
  const defaultValues = useMemo(
    () => ({
      name: '',
      active: false,
      ...getAuthFieldsDefaultValues(),
    }),
-    [getAuthFieldsDefaultValues]
+    [getAuthFieldsDefaultValues],
  );
-
  return (
    <AdminApplicationAuthClientDialog
      onClose={onClose}
--- a/packages/web/src/components/AdminApplicationSettings/index.jsx
+++ b/packages/web/src/components/AdminApplicationSettings/index.jsx
@@ -6,39 +6,28 @@ import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import LoadingButton from '@mui/lab/LoadingButton';
 import { useMutation } from '@apollo/client';
-
 import { CREATE_APP_CONFIG } from 'graphql/mutations/create-app-config';
 import { UPDATE_APP_CONFIG } from 'graphql/mutations/update-app-config';
-
 import Form from 'components/Form';
 import { Switch } from './style';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
-
-type AdminApplicationSettingsProps = {
-  appKey: string;
-};
-
-function AdminApplicationSettings(
-  props: AdminApplicationSettingsProps
-): React.ReactElement {
+function AdminApplicationSettings(props) {
  const { appConfig, loading } = useAppConfig(props.appKey);
  const [createAppConfig, { loading: loadingCreateAppConfig }] = useMutation(
    CREATE_APP_CONFIG,
    {
      refetchQueries: ['GetAppConfig'],
-    }
+    },
  );
  const [updateAppConfig, { loading: loadingUpdateAppConfig }] = useMutation(
    UPDATE_APP_CONFIG,
    {
      refetchQueries: ['GetAppConfig'],
-    }
+    },
  );
-
  const formatMessage = useFormatMessage();
  const enqueueSnackbar = useEnqueueSnackbar();
-
-  const handleSubmit = async (values: any) => {
+  const handleSubmit = async (values) => {
    try {
      if (!appConfig) {
        await createAppConfig({
@@ -56,23 +45,21 @@ function AdminApplicationSettings(
      enqueueSnackbar(formatMessage('adminAppsSettings.successfullySaved'), {
        variant: 'success',
        SnackbarProps: {
-          'data-test': 'snackbar-save-admin-apps-settings-success'
-        }
+          'data-test': 'snackbar-save-admin-apps-settings-success',
+        },
      });
    } catch (error) {
      throw new Error('Failed while saving!');
    }
  };
-
  const defaultValues = useMemo(
    () => ({
      allowCustomConnection: appConfig?.allowCustomConnection || false,
      shared: appConfig?.shared || false,
      disabled: appConfig?.disabled || false,
    }),
-    [appConfig]
+    [appConfig],
  );
-
  return (
    <Form
      defaultValues={defaultValues}
@@ -122,5 +109,4 @@ function AdminApplicationSettings(
    ></Form>
  );
 }
-
 export default AdminApplicationSettings;
--- a/packages/web/src/components/AdminApplicationSettings/style.js
+++ b/packages/web/src/components/AdminApplicationSettings/style.js
@@ -1,6 +1,5 @@
 import { styled } from '@mui/material/styles';
 import SwitchBase from 'components/Switch';
-
 export const Switch = styled(SwitchBase)`
  justify-content: space-between;
  margin: 0;
--- a/packages/web/src/components/AdminApplicationUpdateAuthClient/index.jsx
+++ b/packages/web/src/components/AdminApplicationUpdateAuthClient/index.jsx
@@ -1,31 +1,18 @@
 import React, { useCallback, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
-import type { IApp } from 'types';
-import { FieldValues, SubmitHandler } from 'react-hook-form';
 import { useMutation } from '@apollo/client';
 import { UPDATE_APP_AUTH_CLIENT } from 'graphql/mutations/update-app-auth-client';
-
 import useAppAuthClient from 'hooks/useAppAuthClient.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 import AdminApplicationAuthClientDialog from 'components/AdminApplicationAuthClientDialog';
-
-type AdminApplicationUpdateAuthClientProps = {
-  application: IApp;
-  onClose: () => void;
-};
-
-export default function AdminApplicationUpdateAuthClient(
-  props: AdminApplicationUpdateAuthClientProps
-): React.ReactElement {
+export default function AdminApplicationUpdateAuthClient(props) {
  const { application, onClose } = props;
  const { auth } = application;
  const authFields = auth?.fields?.map((field) => ({
    ...field,
    required: false,
  }));
-
  const formatMessage = useFormatMessage();
-
  const { clientId } = useParams();
  const { appAuthClient, loading: loadingAuthClient } =
    useAppAuthClient(clientId);
@@ -34,8 +21,7 @@ export default function AdminApplicationUpdateAuthClient(
      refetchQueries: ['GetAppAuthClients'],
      context: { autoSnackbar: false },
    });
-
-  const submitHandler: SubmitHandler<FieldValues> = async (values) => {
+  const submitHandler = async (values) => {
    if (!appAuthClient) {
      return;
    }
@@ -52,14 +38,11 @@ export default function AdminApplicationUpdateAuthClient(
    });
    onClose();
  };
-
  const getAuthFieldsDefaultValues = useCallback(() => {
    if (!authFields) {
      return {};
    }
-    const defaultValues: {
-      [key: string]: any;
-    } = {};
+    const defaultValues = {};
    authFields.forEach((field) => {
      if (field.value || field.type !== 'string') {
        defaultValues[field.key] = field.value;
@@ -69,16 +52,14 @@ export default function AdminApplicationUpdateAuthClient(
    });
    return defaultValues;
  }, [auth?.fields]);
-
  const defaultValues = useMemo(
    () => ({
      name: appAuthClient?.name || '',
      active: appAuthClient?.active || false,
      ...getAuthFieldsDefaultValues(),
    }),
-    [appAuthClient, getAuthFieldsDefaultValues]
+    [appAuthClient, getAuthFieldsDefaultValues],
  );
-
  return (
    <AdminApplicationAuthClientDialog
      onClose={onClose}
--- a/packages/web/src/components/AdminSettingsLayout/index.jsx
+++ b/packages/web/src/components/AdminSettingsLayout/index.jsx
@@ -4,42 +4,22 @@ import GroupsIcon from '@mui/icons-material/Groups';
 import LockIcon from '@mui/icons-material/LockPerson';
 import BrushIcon from '@mui/icons-material/Brush';
 import AppsIcon from '@mui/icons-material/Apps';
-
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
-
-import { SvgIconComponent } from '@mui/icons-material';
 import AppBar from 'components/AppBar';
 import Drawer from 'components/Drawer';
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
-
-type SettingsLayoutProps = {
-  children: React.ReactNode;
-};
-
-type DrawerLink = {
-  Icon: SvgIconComponent;
-  primary: string;
-  to: string;
-};
-
 function createDrawerLinks({
  canReadRole,
  canReadUser,
  canUpdateConfig,
  canManageSamlAuthProvider,
  canUpdateApp,
-}: {
-  canReadRole: boolean;
-  canReadUser: boolean;
-  canUpdateConfig: boolean;
-  canManageSamlAuthProvider: boolean;
-  canUpdateApp: boolean;
 }) {
  const items = [
    canReadUser
@@ -82,20 +62,15 @@ function createDrawerLinks({
          dataTest: 'apps-drawer-link',
        }
      : null,
-  ].filter(Boolean) as DrawerLink[];
-
+  ].filter(Boolean);
  return items;
 }
-
-export default function SettingsLayout({
-  children,
-}: SettingsLayoutProps): React.ReactElement {
+export default function SettingsLayout({ children }) {
  const theme = useTheme();
  const formatMessage = useFormatMessage();
  const currentUserAbility = useCurrentUserAbility();
  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'));
  const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
-
  const openDrawer = () => setDrawerOpen(true);
  const closeDrawer = () => setDrawerOpen(false);
  const drawerLinks = createDrawerLinks({
@@ -108,7 +83,7 @@ export default function SettingsLayout({
      currentUserAbility.can('create', 'SamlAuthProvider'),
    canUpdateApp: currentUserAbility.can('update', 'App'),
  });
-
+  const a = 123;
  const drawerBottomLinks = [
    {
      Icon: ArrowBackIosNewIcon,
@@ -117,7 +92,6 @@ export default function SettingsLayout({
      dataTest: 'go-back-drawer-link',
    },
  ];
-
  return (
    <>
      <AppBar
--- a/packages/web/src/components/ApolloProvider/index.jsx
+++ b/packages/web/src/components/ApolloProvider/index.jsx
@@ -1,38 +1,28 @@
 import { ApolloProvider as BaseApolloProvider } from '@apollo/client';
 import * as React from 'react';
-
 import { mutateAndGetClient } from 'graphql/client';
 import useAuthentication from 'hooks/useAuthentication';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
-
-type ApolloProviderProps = {
-  children: React.ReactNode;
-};
-
-const ApolloProvider = (props: ApolloProviderProps): React.ReactElement => {
+const ApolloProvider = (props) => {
  const enqueueSnackbar = useEnqueueSnackbar();
  const authentication = useAuthentication();
-
  const onError = React.useCallback(
    (message) => {
      enqueueSnackbar(message, {
        variant: 'error',
        SnackbarProps: {
-          'data-test': 'snackbar-error'
-        }
+          'data-test': 'snackbar-error',
+        },
      });
    },
-    [enqueueSnackbar]
+    [enqueueSnackbar],
  );
-
  const client = React.useMemo(() => {
    return mutateAndGetClient({
      onError,
      token: authentication.token,
    });
  }, [onError, authentication]);
-
  return <BaseApolloProvider client={client} {...props} />;
 };
-
 export default ApolloProvider;
--- a/packages/web/src/components/AppAuthClientsDialog/index.ee.jsx
+++ b/packages/web/src/components/AppAuthClientsDialog/index.ee.jsx
@@ -5,33 +5,22 @@ import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import * as React from 'react';
-
 import useAppAuthClients from 'hooks/useAppAuthClients.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
-
-type AppAuthClientsDialogProps = {
-  appKey: string;
-  onClientClick: (appAuthClientId: string) => void;
-  onClose: () => void;
-};
-
-export default function AppAuthClientsDialog(props: AppAuthClientsDialogProps) {
+export default function AppAuthClientsDialog(props) {
  const { appKey, onClientClick, onClose } = props;
  const { appAuthClients } = useAppAuthClients({ appKey, active: true });
  const formatMessage = useFormatMessage();
-
  React.useEffect(
    function autoAuthenticateSingleClient() {
      if (appAuthClients?.length === 1) {
        onClientClick(appAuthClients[0].id);
      }
    },
-    [appAuthClients]
+    [appAuthClients],
  );
-
  if (!appAuthClients?.length || appAuthClients?.length === 1)
    return <React.Fragment />;
-
  return (
    <Dialog onClose={onClose} open={true}>
      <DialogTitle>{formatMessage('appAuthClientsDialog.title')}</DialogTitle>
--- a/packages/web/src/components/AppBar/index.jsx
+++ b/packages/web/src/components/AppBar/index.jsx
@@ -2,49 +2,31 @@ import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import MenuIcon from '@mui/icons-material/Menu';
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
 import MuiAppBar from '@mui/material/AppBar';
-import type { ContainerProps } from '@mui/material/Container';
 import IconButton from '@mui/material/IconButton';
 import Toolbar from '@mui/material/Toolbar';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
-
 import AccountDropdownMenu from 'components/AccountDropdownMenu';
 import Container from 'components/Container';
 import Logo from 'components/Logo/index';
 import TrialStatusBadge from 'components/TrialStatusBadge/index.ee';
 import * as URLS from 'config/urls';
-
 import { Link } from './style';
-
-type AppBarProps = {
-  drawerOpen: boolean;
-  onDrawerOpen: () => void;
-  onDrawerClose: () => void;
-  maxWidth?: ContainerProps['maxWidth'];
-};
-
 const accountMenuId = 'account-menu';
-
-export default function AppBar(props: AppBarProps): React.ReactElement {
+export default function AppBar(props) {
  const { drawerOpen, onDrawerOpen, onDrawerClose, maxWidth = false } = props;
-
  const theme = useTheme();
  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'));
-
  const [accountMenuAnchorElement, setAccountMenuAnchorElement] =
-    React.useState<null | HTMLElement>(null);
-
+    React.useState(null);
  const isMenuOpen = Boolean(accountMenuAnchorElement);
-
-  const handleAccountMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
+  const handleAccountMenuOpen = (event) => {
    setAccountMenuAnchorElement(event.currentTarget);
  };
-
  const handleAccountMenuClose = () => {
    setAccountMenuAnchorElement(null);
  };
-
  return (
    <MuiAppBar data-test="app-bar">
      <Container maxWidth={maxWidth} disableGutters>
--- a/packages/web/src/components/AppBar/style.js
+++ b/packages/web/src/components/AppBar/style.js
@@ -1,6 +1,5 @@
 import { styled } from '@mui/material/styles';
 import { Link as RouterLink } from 'react-router-dom';
-
 export const Link = styled(RouterLink)(() => ({
  textDecoration: 'none',
  color: 'inherit',
--- a/packages/web/src/components/AppConnectionContextMenu/index.jsx
+++ b/packages/web/src/components/AppConnectionContextMenu/index.jsx
@@ -1,29 +1,10 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import Menu from '@mui/material/Menu';
-import type { PopoverProps } from '@mui/material/Popover';
 import MenuItem from '@mui/material/MenuItem';
-import type { IConnection } from 'types';
-
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
-
-type Action = {
-  type: 'test' | 'reconnect' | 'delete' | 'viewFlows';
-};
-
-type ContextMenuProps = {
-  appKey: string;
-  connection: IConnection;
-  onClose: () => void;
-  onMenuItemClick: (event: React.MouseEvent, action: Action) => void;
-  anchorEl: PopoverProps['anchorEl'];
-  disableReconnection: boolean;
-};
-
-export default function ContextMenu(
-  props: ContextMenuProps
-): React.ReactElement {
+export default function ContextMenu(props) {
  const {
    appKey,
    connection,
@@ -33,18 +14,15 @@ export default function ContextMenu(
    disableReconnection,
  } = props;
  const formatMessage = useFormatMessage();
-
  const createActionHandler = React.useCallback(
-    (action: Action) => {
-      return function clickHandler(event: React.MouseEvent) {
+    (action) => {
+      return function clickHandler(event) {
        onMenuItemClick(event, action);
-
        onClose();
      };
    },
-    [onMenuItemClick, onClose]
+    [onMenuItemClick, onClose],
  );
-
  return (
    <Menu
      open={true}
@@ -70,7 +48,7 @@ export default function ContextMenu(
        to={URLS.APP_RECONNECT_CONNECTION(
          appKey,
          connection.id,
-          connection.appAuthClientId
+          connection.appAuthClientId,
        )}
        onClick={createActionHandler({ type: 'reconnect' })}
      >
--- a/packages/web/src/components/AppConnectionRow/index.jsx
+++ b/packages/web/src/components/AppConnectionRow/index.jsx
@@ -10,26 +10,18 @@ import Stack from '@mui/material/Stack';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import { DateTime } from 'luxon';
 import * as React from 'react';
-
-import type { IConnection } from 'types';
 import ConnectionContextMenu from 'components/AppConnectionContextMenu';
 import { DELETE_CONNECTION } from 'graphql/mutations/delete-connection';
 import { TEST_CONNECTION } from 'graphql/queries/test-connection';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { CardContent, Typography } from './style';
-
-type AppConnectionRowProps = {
-  connection: IConnection;
-};
-
-const countTranslation = (value: React.ReactNode) => (
+const countTranslation = (value) => (
  <>
    <Typography variant="body1">{value}</Typography>
    <br />
  </>
 );
-
-function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
+function AppConnectionRow(props) {
  const enqueueSnackbar = useEnqueueSnackbar();
  const [verificationVisible, setVerificationVisible] = React.useState(false);
  const [testConnection, { called: testCalled, loading: testLoading }] =
@@ -43,7 +35,6 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
      },
    });
  const [deleteConnection] = useMutation(DELETE_CONNECTION);
-
  const formatMessage = useFormatMessage();
  const {
    id,
@@ -54,17 +45,14 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
    flowCount,
    reconnectable,
  } = props.connection;
-
-  const contextButtonRef = React.useRef<SVGSVGElement | null>(null);
-  const [anchorEl, setAnchorEl] = React.useState<SVGSVGElement | null>(null);
-
+  const contextButtonRef = React.useRef(null);
+  const [anchorEl, setAnchorEl] = React.useState(null);
  const handleClose = () => {
    setAnchorEl(null);
  };
-
  const onContextMenuClick = () => setAnchorEl(contextButtonRef.current);
  const onContextMenuAction = React.useCallback(
-    async (event, action: { [key: string]: string }) => {
+    async (event, action) => {
      if (action.type === 'delete') {
        await deleteConnection({
          variables: { input: { id } },
@@ -73,13 +61,11 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
              __typename: 'Connection',
              id,
            });
-
            cache.evict({
              id: connectionCacheId,
            });
          },
        });
-
        enqueueSnackbar(formatMessage('connection.deletedMessage'), {
          variant: 'success',
          SnackbarProps: {
@@ -91,13 +77,11 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
        testConnection({ variables: { id } });
      }
    },
-    [deleteConnection, id, testConnection, formatMessage, enqueueSnackbar]
+    [deleteConnection, id, testConnection, formatMessage, enqueueSnackbar],
  );
-
  const relativeCreatedAt = DateTime.fromMillis(
-    parseInt(createdAt, 10)
+    parseInt(createdAt, 10),
  ).toRelative();
-
  return (
    <>
      <Card sx={{ my: 2 }} data-test="app-connection-row">
@@ -125,14 +109,17 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
                    </Typography>
                  </>
                )}
-                {verificationVisible && testCalled && !testLoading && verified && (
-                  <>
-                    <CheckCircleIcon fontSize="small" color="success" />
-                    <Typography variant="caption">
-                      {formatMessage('connection.testSuccessful')}
-                    </Typography>
-                  </>
-                )}
+                {verificationVisible &&
+                  testCalled &&
+                  !testLoading &&
+                  verified && (
+                    <>
+                      <CheckCircleIcon fontSize="small" color="success" />
+                      <Typography variant="caption">
+                        {formatMessage('connection.testSuccessful')}
+                      </Typography>
+                    </>
+                  )}
                {verificationVisible &&
                  testCalled &&
                  !testLoading &&
@@ -179,5 +166,4 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
    </>
  );
 }
-
 export default AppConnectionRow;
--- a/packages/web/src/components/AppConnectionRow/style.js
+++ b/packages/web/src/components/AppConnectionRow/style.js
@@ -1,7 +1,6 @@
 import { styled } from '@mui/material/styles';
 import MuiCardContent from '@mui/material/CardContent';
 import MuiTypography from '@mui/material/Typography';
-
 export const CardContent = styled(MuiCardContent)(({ theme }) => ({
  display: 'grid',
  gridTemplateRows: 'auto',
@@ -9,7 +8,6 @@ export const CardContent = styled(MuiCardContent)(({ theme }) => ({
  gridColumnGap: theme.spacing(2),
  alignItems: 'center',
 }));
-
 export const Typography = styled(MuiTypography)(() => ({
  textAlign: 'center',
  display: 'inline-block',
--- a/packages/web/src/components/AppConnections/index.jsx
+++ b/packages/web/src/components/AppConnections/index.jsx
@@ -1,29 +1,18 @@
 import * as React from 'react';
 import { useQuery } from '@apollo/client';
-
-import type { IConnection } from 'types';
 import { GET_APP_CONNECTIONS } from 'graphql/queries/get-app-connections';
 import AppConnectionRow from 'components/AppConnectionRow';
 import NoResultFound from 'components/NoResultFound';
 import useFormatMessage from 'hooks/useFormatMessage';
 import * as URLS from 'config/urls';
-
-type AppConnectionsProps = {
-  appKey: string;
-};
-
-export default function AppConnections(
-  props: AppConnectionsProps
-): React.ReactElement {
+export default function AppConnections(props) {
  const { appKey } = props;
  const formatMessage = useFormatMessage();
  const { data } = useQuery(GET_APP_CONNECTIONS, {
    variables: { key: appKey },
  });
-  const appConnections: IConnection[] = data?.getApp?.connections || [];
-
+  const appConnections = data?.getApp?.connections || [];
  const hasConnections = appConnections?.length;
-
  if (!hasConnections) {
    return (
      <NoResultFound
@@ -33,10 +22,9 @@ export default function AppConnections(
      />
    );
  }
-
  return (
    <>
-      {appConnections.map((appConnection: IConnection) => (
+      {appConnections.map((appConnection) => (
        <AppConnectionRow key={appConnection.id} connection={appConnection} />
      ))}
    </>
--- a/packages/web/src/components/AppFlows/index.jsx
+++ b/packages/web/src/components/AppFlows/index.jsx
@@ -3,25 +3,16 @@ import { Link, useSearchParams } from 'react-router-dom';
 import { GET_FLOWS } from 'graphql/queries/get-flows';
 import Pagination from '@mui/material/Pagination';
 import PaginationItem from '@mui/material/PaginationItem';
-
 import * as URLS from 'config/urls';
 import AppFlowRow from 'components/FlowRow';
 import NoResultFound from 'components/NoResultFound';
 import useFormatMessage from 'hooks/useFormatMessage';
-import type { IFlow } from 'types';
-
-type AppFlowsProps = {
-  appKey: string;
-};
-
 const FLOW_PER_PAGE = 10;
-
-const getLimitAndOffset = (page: number) => ({
+const getLimitAndOffset = (page) => ({
  limit: FLOW_PER_PAGE,
  offset: (page - 1) * FLOW_PER_PAGE,
 });
-
-export default function AppFlows(props: AppFlowsProps): React.ReactElement {
+export default function AppFlows(props) {
  const { appKey } = props;
  const formatMessage = useFormatMessage();
  const [searchParams, setSearchParams] = useSearchParams();
@@ -36,10 +27,8 @@ export default function AppFlows(props: AppFlowsProps): React.ReactElement {
  });
  const getFlows = data?.getFlows || {};
  const { pageInfo, edges } = getFlows;
-
-  const flows: IFlow[] = edges?.map(({ node }: { node: IFlow }) => node);
+  const flows = edges?.map(({ node }) => node);
  const hasFlows = flows?.length;
-
  if (!hasFlows) {
    return (
      <NoResultFound
@@ -49,10 +38,9 @@ export default function AppFlows(props: AppFlowsProps): React.ReactElement {
      />
    );
  }
-
  return (
    <>
-      {flows?.map((appFlow: IFlow) => (
+      {flows?.map((appFlow) => (
        <AppFlowRow key={appFlow.id} flow={appFlow} />
      ))}

--- a/packages/web/src/components/AppIcon/index.jsx
+++ b/packages/web/src/components/AppIcon/index.jsx
@@ -1,25 +1,11 @@
 import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
-import type { AvatarProps } from '@mui/material/Avatar';
-
-type AppIconProps = {
-  name?: string;
-  url?: string;
-  color?: string;
-  variant?: AvatarProps['variant'];
-};
-
-const inlineImgStyle: React.CSSProperties = {
+const inlineImgStyle = {
  objectFit: 'contain',
 };
-
-export default function AppIcon(
-  props: AppIconProps & AvatarProps
-): React.ReactElement {
+export default function AppIcon(props) {
  const { name, url, color, sx = {}, variant = 'square', ...restProps } = props;
-
  const initialLetter = name?.[0];
-
  return (
    <Avatar
      component="span"
--- a/packages/web/src/components/AppRow/index.jsx
+++ b/packages/web/src/components/AppRow/index.jsx
@@ -4,30 +4,19 @@ import Card from '@mui/material/Card';
 import Box from '@mui/material/Box';
 import CardActionArea from '@mui/material/CardActionArea';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-
 import useFormatMessage from 'hooks/useFormatMessage';
 import AppIcon from 'components/AppIcon';
-import type { IApp } from 'types';
-
 import { CardContent, Typography } from './style';
-
-type AppRowProps = {
-  application: IApp;
-  url: string;
-};
-
-const countTranslation = (value: React.ReactNode) => (
+const countTranslation = (value) => (
  <>
    <Typography variant="body1">{value}</Typography>
    <br />
  </>
 );
-
-function AppRow(props: AppRowProps): React.ReactElement {
+function AppRow(props) {
  const formatMessage = useFormatMessage();
  const { name, primaryColor, iconUrl, connectionCount, flowCount } =
    props.application;
-
  return (
    <Link to={props.url} data-test="app-row">
      <Card sx={{ mb: 1 }}>
@@ -76,5 +65,4 @@ function AppRow(props: AppRowProps): React.ReactElement {
    </Link>
  );
 }
-
 export default AppRow;
--- a/packages/web/src/components/AppRow/style.js
+++ b/packages/web/src/components/AppRow/style.js
@@ -1,7 +1,6 @@
 import { styled } from '@mui/material/styles';
 import MuiCardContent from '@mui/material/CardContent';
 import MuiTypography from '@mui/material/Typography';
-
 export const CardContent = styled(MuiCardContent)(({ theme }) => ({
  display: 'grid',
  gridTemplateRows: 'auto',
@@ -9,7 +8,6 @@ export const CardContent = styled(MuiCardContent)(({ theme }) => ({
  gridColumnGap: theme.spacing(2),
  alignItems: 'center',
 }));
-
 export const Typography = styled(MuiTypography)(() => ({
  '&.MuiTypography-h6': {
    textTransform: 'capitalize',
@@ -17,7 +15,6 @@ export const Typography = styled(MuiTypography)(() => ({
  textAlign: 'center',
  display: 'inline-block',
 }));
-
 export const DesktopOnlyBreakline = styled('br')(({ theme }) => ({
  [theme.breakpoints.down('sm')]: {
    display: 'none',
--- a/packages/web/src/components/Can/index.jsx
+++ b/packages/web/src/components/Can/index.jsx
@@ -0,0 +1,7 @@
+import { Can as OriginalCan } from '@casl/react';
+import * as React from 'react';
+import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
+export default function Can(props) {
+  const currentUserAbility = useCurrentUserAbility();
+  return <OriginalCan ability={currentUserAbility} {...props} />;
+}
--- a/packages/web/src/components/Can/index.tsx
+++ b/packages/web/src/components/Can/index.tsx
@@ -1,22 +0,0 @@
-import { Can as OriginalCan } from '@casl/react';
-import * as React from 'react';
-
-import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
-
-type CanProps = {
-  I: string;
-  a: string;
-  passThrough?: boolean;
-  children: React.ReactNode | ((isAllowed: boolean) => React.ReactNode);
-} | {
-  I: string;
-  an: string;
-  passThrough?: boolean;
-  children: React.ReactNode | ((isAllowed: boolean) => React.ReactNode);
-};
-
-export default function Can(props: CanProps) {
-  const currentUserAbility = useCurrentUserAbility();
-
-  return (<OriginalCan ability={currentUserAbility} {...props} />);
-};
--- a/packages/web/src/components/CheckoutCompletedAlert/index.ee.jsx
+++ b/packages/web/src/components/CheckoutCompletedAlert/index.ee.jsx
@@ -2,18 +2,13 @@ import * as React from 'react';
 import { useLocation } from 'react-router-dom';
 import Alert from '@mui/material/Alert';
 import Typography from '@mui/material/Typography';
-
 import useFormatMessage from 'hooks/useFormatMessage';
-
 export default function CheckoutCompletedAlert() {
  const formatMessage = useFormatMessage();
  const location = useLocation();
-  const state = location.state as { checkoutCompleted: boolean };
-
+  const state = location.state;
  const checkoutCompleted = state?.checkoutCompleted;
-
  if (!checkoutCompleted) return <React.Fragment />;
-
  return (
    <Alert
      severity="success"
--- a/packages/web/src/components/ChooseAppAndEventSubstep/index.jsx
+++ b/packages/web/src/components/ChooseAppAndEventSubstep/index.jsx
@@ -7,49 +7,22 @@ import ListItem from '@mui/material/ListItem';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
 import Chip from '@mui/material/Chip';
-import type { IApp, IStep, ISubstep, ITrigger, IAction } from 'types';
-
 import useFormatMessage from 'hooks/useFormatMessage';
 import useApps from 'hooks/useApps';
 import { EditorContext } from 'contexts/Editor';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
-
-type ChooseAppAndEventSubstepProps = {
-  substep: ISubstep;
-  expanded?: boolean;
-  onExpand: () => void;
-  onCollapse: () => void;
-  onChange: ({ step }: { step: IStep }) => void;
-  onSubmit: () => void;
-  step: IStep;
-};
-
-const optionGenerator = (app: {
-  name: string;
-  key: string;
-}): { label: string; value: string } => ({
-  label: app.name as string,
-  value: app.key as string,
+const optionGenerator = (app) => ({
+  label: app.name,
+  value: app.key,
 });
-
-const eventOptionGenerator = (app: {
-  name: string;
-  key: string;
-  type?: string;
-}): { label: string; value: string; type: string } => ({
-  label: app.name as string,
-  value: app.key as string,
-  type: app?.type as string,
+const eventOptionGenerator = (app) => ({
+  label: app.name,
+  value: app.key,
+  type: app?.type,
 });
-
-const getOption = <T extends { value: string }>(
-  options: T[],
-  selectedOptionValue?: string
-) => options.find((option) => option.value === selectedOptionValue);
-
-function ChooseAppAndEventSubstep(
-  props: ChooseAppAndEventSubstepProps
-): React.ReactElement {
+const getOption = (options, selectedOptionValue) =>
+  options.find((option) => option.value === selectedOptionValue);
+function ChooseAppAndEventSubstep(props) {
  const {
    substep,
    expanded = false,
@@ -59,49 +32,38 @@ function ChooseAppAndEventSubstep(
    onSubmit,
    onChange,
  } = props;
-
  const formatMessage = useFormatMessage();
  const editorContext = React.useContext(EditorContext);
-
  const isTrigger = step.type === 'trigger';
  const isAction = step.type === 'action';
-
  const { apps } = useApps({
    onlyWithTriggers: isTrigger,
    onlyWithActions: isAction,
  });
-  const app = apps?.find((currentApp: IApp) => currentApp.key === step.appKey);
-
+  const app = apps?.find((currentApp) => currentApp.key === step.appKey);
  const appOptions = React.useMemo(
    () => apps?.map((app) => optionGenerator(app)) || [],
-    [apps]
+    [apps],
  );
-  const actionsOrTriggers: Array<ITrigger | IAction> =
-    (isTrigger ? app?.triggers : app?.actions) || [];
+  const actionsOrTriggers = (isTrigger ? app?.triggers : app?.actions) || [];
  const actionOrTriggerOptions = React.useMemo(
    () => actionsOrTriggers.map((trigger) => eventOptionGenerator(trigger)),
-    [app?.key]
+    [app?.key],
  );
  const selectedActionOrTrigger = actionsOrTriggers.find(
-    (actionOrTrigger: IAction | ITrigger) => actionOrTrigger.key === step?.key
+    (actionOrTrigger) => actionOrTrigger.key === step?.key,
  );
-
-  const isWebhook =
-    isTrigger && (selectedActionOrTrigger as ITrigger)?.type === 'webhook';
-
+  const isWebhook = isTrigger && selectedActionOrTrigger?.type === 'webhook';
  const { name } = substep;
-
-  const valid: boolean = !!step.key && !!step.appKey;
-
+  const valid = !!step.key && !!step.appKey;
  // placeholders
  const onEventChange = React.useCallback(
-    (event: React.SyntheticEvent, selectedOption: unknown) => {
+    (event, selectedOption) => {
      if (typeof selectedOption === 'object') {
        // TODO: try to simplify type casting below.
-        const typedSelectedOption = selectedOption as { value: string };
-        const option: { value: string } = typedSelectedOption;
-        const eventKey = option?.value as string;
-
+        const typedSelectedOption = selectedOption;
+        const option = typedSelectedOption;
+        const eventKey = option?.value;
        if (step.key !== eventKey) {
          onChange({
            step: {
@@ -112,17 +74,15 @@ function ChooseAppAndEventSubstep(
        }
      }
    },
-    [step, onChange]
+    [step, onChange],
  );
-
  const onAppChange = React.useCallback(
-    (event: React.SyntheticEvent, selectedOption: unknown) => {
+    (event, selectedOption) => {
      if (typeof selectedOption === 'object') {
        // TODO: try to simplify type casting below.
-        const typedSelectedOption = selectedOption as { value: string };
-        const option: { value: string } = typedSelectedOption;
-        const appKey = option?.value as string;
-
+        const typedSelectedOption = selectedOption;
+        const option = typedSelectedOption;
+        const appKey = option?.value;
        if (step.appKey !== appKey) {
          onChange({
            step: {
@@ -135,11 +95,9 @@ function ChooseAppAndEventSubstep(
        }
      }
    },
-    [step, onChange]
+    [step, onChange],
  );
-
  const onToggle = expanded ? onCollapse : onExpand;
-
  return (
    <React.Fragment>
      <FlowSubstepTitle
@@ -200,7 +158,7 @@ function ChooseAppAndEventSubstep(
                          {isWebhook && (
                            <Chip
                              label={formatMessage(
-                                'flowEditor.instantTriggerType'
+                                'flowEditor.instantTriggerType',
                              )}
                            />
                          )}
@@ -237,11 +195,11 @@ function ChooseAppAndEventSubstep(
            </Box>
          )}

-          {isTrigger && (selectedActionOrTrigger as ITrigger)?.pollInterval && (
+          {isTrigger && selectedActionOrTrigger?.pollInterval && (
            <TextField
              label={formatMessage('flowEditor.pollIntervalLabel')}
              value={formatMessage('flowEditor.pollIntervalValue', {
-                minutes: (selectedActionOrTrigger as ITrigger)?.pollInterval,
+                minutes: selectedActionOrTrigger?.pollInterval,
              })}
              sx={{ mt: 2 }}
              fullWidth
@@ -264,5 +222,4 @@ function ChooseAppAndEventSubstep(
    </React.Fragment>
  );
 }
-
 export default ChooseAppAndEventSubstep;
--- a/packages/web/src/components/ChooseConnectionSubstep/index.jsx
+++ b/packages/web/src/components/ChooseConnectionSubstep/index.jsx
@@ -5,8 +5,6 @@ import Collapse from '@mui/material/Collapse';
 import ListItem from '@mui/material/ListItem';
 import TextField from '@mui/material/TextField';
 import * as React from 'react';
-
-import type { IApp, IConnection, IStep, ISubstep } from 'types';
 import AddAppConnection from 'components/AddAppConnection';
 import AppAuthClientsDialog from 'components/AppAuthClientsDialog/index.ee';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
@@ -16,34 +14,15 @@ import { GET_APP_CONNECTIONS } from 'graphql/queries/get-app-connections';
 import { TEST_CONNECTION } from 'graphql/queries/test-connection';
 import useAuthenticateApp from 'hooks/useAuthenticateApp.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
-
-type ChooseConnectionSubstepProps = {
-  application: IApp;
-  substep: ISubstep;
-  expanded?: boolean;
-  onExpand: () => void;
-  onCollapse: () => void;
-  onChange: ({ step }: { step: IStep }) => void;
-  onSubmit: () => void;
-  step: IStep;
-};
-
 const ADD_CONNECTION_VALUE = 'ADD_CONNECTION';
 const ADD_SHARED_CONNECTION_VALUE = 'ADD_SHARED_CONNECTION';
-
-const optionGenerator = (
-  connection: IConnection
-): { label: string; value: string } => ({
-  label: (connection?.formattedData?.screenName as string) ?? 'Unnamed',
-  value: connection?.id as string,
+const optionGenerator = (connection) => ({
+  label: connection?.formattedData?.screenName ?? 'Unnamed',
+  value: connection?.id,
 });
-
-const getOption = (options: Record<string, unknown>[], connectionId?: string) =>
+const getOption = (options, connectionId) =>
  options.find((connection) => connection.value === connectionId) || null;
-
-function ChooseConnectionSubstep(
-  props: ChooseConnectionSubstepProps
-): React.ReactElement {
+function ChooseConnectionSubstep(props) {
  const {
    substep,
    expanded = false,
@@ -78,7 +57,6 @@ function ChooseConnectionSubstep(
      id: connection?.id,
    },
  });
-
  React.useEffect(() => {
    if (connection?.id) {
      testConnection({
@@ -89,42 +67,34 @@ function ChooseConnectionSubstep(
    }
    // intentionally no dependencies for initial test
  }, []);
-
  const connectionOptions = React.useMemo(() => {
-    const appWithConnections = data?.getApp as IApp;
+    const appWithConnections = data?.getApp;
    const options =
      appWithConnections?.connections?.map((connection) =>
-        optionGenerator(connection)
+        optionGenerator(connection),
      ) || [];
-
    if (!appConfig || appConfig.canCustomConnect) {
      options.push({
        label: formatMessage('chooseConnectionSubstep.addNewConnection'),
        value: ADD_CONNECTION_VALUE,
      });
    }
-
    if (appConfig?.canConnect) {
      options.push({
        label: formatMessage('chooseConnectionSubstep.addNewSharedConnection'),
        value: ADD_SHARED_CONNECTION_VALUE,
      });
    }
-
    return options;
  }, [data, formatMessage, appConfig]);
-
-  const handleClientClick = async (appAuthClientId: string) => {
+  const handleClientClick = async (appAuthClientId) => {
    try {
      const response = await authenticate?.({
        appAuthClientId,
      });
-
      const connectionId = response?.createConnection.id;
-
      if (connectionId) {
        await refetch();
-
        onChange({
          step: {
            ...step,
@@ -140,18 +110,13 @@ function ChooseConnectionSubstep(
      setShowAddSharedConnectionDialog(false);
    }
  };
-
  const { name } = substep;
-
  const handleAddConnectionClose = React.useCallback(
    async (response) => {
      setShowAddConnectionDialog(false);
-
      const connectionId = response?.createConnection.id;
-
      if (connectionId) {
        await refetch();
-
        onChange({
          step: {
            ...step,
@@ -162,27 +127,23 @@ function ChooseConnectionSubstep(
        });
      }
    },
-    [onChange, refetch, step]
+    [onChange, refetch, step],
  );
-
  const handleChange = React.useCallback(
-    (event: React.SyntheticEvent, selectedOption: unknown) => {
+    (event, selectedOption) => {
      if (typeof selectedOption === 'object') {
        // TODO: try to simplify type casting below.
-        const typedSelectedOption = selectedOption as { value: string };
-        const option: { value: string } = typedSelectedOption;
-        const connectionId = option?.value as string;
-
+        const typedSelectedOption = selectedOption;
+        const option = typedSelectedOption;
+        const connectionId = option?.value;
        if (connectionId === ADD_CONNECTION_VALUE) {
          setShowAddConnectionDialog(true);
          return;
        }
-
        if (connectionId === ADD_SHARED_CONNECTION_VALUE) {
          setShowAddSharedConnectionDialog(true);
          return;
        }
-
        if (connectionId !== step.connection?.id) {
          onChange({
            step: {
@@ -195,9 +156,8 @@ function ChooseConnectionSubstep(
        }
      }
    },
-    [step, onChange]
+    [step, onChange],
  );
-
  React.useEffect(() => {
    if (step.connection?.id) {
      retestConnection({
@@ -205,9 +165,7 @@ function ChooseConnectionSubstep(
      });
    }
  }, [step.connection?.id, retestConnection]);
-
  const onToggle = expanded ? onCollapse : onExpand;
-
  return (
    <React.Fragment>
      <FlowSubstepTitle
@@ -235,7 +193,7 @@ function ChooseConnectionSubstep(
              <TextField
                {...params}
                label={formatMessage(
-                  'chooseConnectionSubstep.chooseConnection'
+                  'chooseConnectionSubstep.chooseConnection',
                )}
              />
            )}
@@ -279,5 +237,4 @@ function ChooseConnectionSubstep(
    </React.Fragment>
  );
 }
-
 export default ChooseConnectionSubstep;
--- a/packages/web/src/components/ColorInput/ColorButton/index.jsx
+++ b/packages/web/src/components/ColorInput/ColorButton/index.jsx
@@ -1,19 +1,8 @@
 import React from 'react';
-import { ButtonProps } from '@mui/material/Button';
 import { Button } from './style';
-
 const BG_IMAGE_FALLBACK =
  'linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%) /*! @noflip */';
-
-export type ColorButtonProps = Omit<ButtonProps, 'children'> & {
-  bgColor: string;
-  isBgColorValid: boolean;
-  disablePopover: boolean;
-};
-
-export type ColorButtonElement = (props: ColorButtonProps) => JSX.Element;
-
-const ColorButton = (props: ColorButtonProps) => {
+const ColorButton = (props) => {
  const {
    bgColor,
    className,
@@ -21,7 +10,6 @@ const ColorButton = (props: ColorButtonProps) => {
    isBgColorValid,
    ...restButtonProps
  } = props;
-
  return (
    <Button
      data-test="color-button"
@@ -36,5 +24,4 @@ const ColorButton = (props: ColorButtonProps) => {
    />
  );
 };
-
 export default ColorButton;
--- a/packages/web/src/components/ColorInput/ColorButton/style.jsx
+++ b/packages/web/src/components/ColorInput/ColorButton/style.jsx
@@ -1,6 +1,5 @@
 import MuiButton from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
-
 export const Button = styled(MuiButton)(() => ({
  backgroundSize: '8px 8px',
  backgroundPosition: '0 0, 4px 0, 4px -4px, 0px 4px',
@@ -12,4 +11,4 @@ export const Button = styled(MuiButton)(() => ({
  aspectRatio: '1 / 1',
  height: '24px',
  minWidth: 0,
-})) as typeof MuiButton;
+}));
--- a/packages/web/src/components/ColorInput/index.jsx
+++ b/packages/web/src/components/ColorInput/index.jsx
@@ -1,15 +1,8 @@
 import * as React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
-import { MuiColorInput, MuiColorInputProps } from 'mui-color-input';
+import { MuiColorInput } from 'mui-color-input';
 import ColorButton from './ColorButton';
-
-type ColorInputProps = {
-  shouldUnregister?: boolean;
-  name: string;
-  'data-test'?: string;
-} & Partial<MuiColorInputProps>;
-
-export default function ColorInput(props: ColorInputProps): React.ReactElement {
+export default function ColorInput(props) {
  const { control } = useFormContext();
  const {
    required,
@@ -18,7 +11,6 @@ export default function ColorInput(props: ColorInputProps): React.ReactElement {
    disabled = false,
    ...textFieldProps
  } = props;
-
  return (
    <Controller
      rules={{ required }}
--- a/packages/web/src/components/ConditionalIconButton/index.jsx
+++ b/packages/web/src/components/ConditionalIconButton/index.jsx
@@ -2,16 +2,11 @@ import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Button from '@mui/material/Button';
-import type { ButtonProps } from '@mui/material/Button';
-
 import { IconButton } from './style';
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export default function ConditionalIconButton(props: any): React.ReactElement {
+export default function ConditionalIconButton(props) {
  const { icon, ...buttonProps } = props;
  const theme = useTheme();
  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'));
-
  if (matchSmallScreens) {
    return (
      <IconButton
@@ -27,6 +22,5 @@ export default function ConditionalIconButton(props: any): React.ReactElement {
      </IconButton>
    );
  }
-
-  return <Button {...(buttonProps as ButtonProps)} />;
+  return <Button {...buttonProps} />;
 }
--- a/packages/web/src/components/ConditionalIconButton/style.js
+++ b/packages/web/src/components/ConditionalIconButton/style.js
@@ -1,6 +1,5 @@
 import { styled } from '@mui/material/styles';
 import MuiIconButton, { iconButtonClasses } from '@mui/material/IconButton';
-
 export const IconButton = styled(MuiIconButton)`
  &.${iconButtonClasses.colorPrimary}:not(.${iconButtonClasses.disabled}) {
    background: ${({ theme }) => theme.palette.primary.main};
@@ -10,4 +9,4 @@ export const IconButton = styled(MuiIconButton)`
      background: ${({ theme }) => theme.palette.primary.dark};
    }
  }
-` as typeof MuiIconButton;
+`;
--- a/packages/web/src/components/ConfirmationDialog/index.jsx
+++ b/packages/web/src/components/ConfirmationDialog/index.jsx
@@ -5,19 +5,7 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
-
-type ConfirmationDialogProps = {
-  onClose: () => void;
-  onConfirm: () => void;
-  title: React.ReactNode;
-  description: React.ReactNode;
-  cancelButtonChildren: React.ReactNode;
-  confirmButtionChildren: React.ReactNode;
-  open?: boolean;
-  'data-test'?: string;
-}
-
-export default function ConfirmationDialog(props: ConfirmationDialogProps) {
+export default function ConfirmationDialog(props) {
  const {
    onClose,
    onConfirm,
@@ -30,31 +18,26 @@ export default function ConfirmationDialog(props: ConfirmationDialogProps) {
  const dataTest = props['data-test'];
  return (
    <Dialog open={open} onClose={onClose} data-test={dataTest}>
-      {title && (
-        <DialogTitle>
-          {title}
-        </DialogTitle>
-      )}
+      {title && <DialogTitle>{title}</DialogTitle>}
      {description && (
        <DialogContent>
-          <DialogContentText>
-            {description}
-          </DialogContentText>
+          <DialogContentText>{description}</DialogContentText>
        </DialogContent>
      )}

      <DialogActions>
-        {(cancelButtonChildren && onClose) && (
-          <Button
-            onClick={onClose}
-            data-test="confirmation-cancel-button">{cancelButtonChildren}</Button>
+        {cancelButtonChildren && onClose && (
+          <Button onClick={onClose} data-test="confirmation-cancel-button">
+            {cancelButtonChildren}
+          </Button>
        )}

-        {(confirmButtionChildren && onConfirm) && (
+        {confirmButtionChildren && onConfirm && (
          <Button
            onClick={onConfirm}
            color="error"
-            data-test="confirmation-confirm-button">
+            data-test="confirmation-confirm-button"
+          >
            {confirmButtionChildren}
          </Button>
        )}
--- a/packages/web/src/components/Container/index.jsx
+++ b/packages/web/src/components/Container/index.jsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+import MuiContainer from '@mui/material/Container';
+export default function Container(props) {
+  return <MuiContainer {...props} />;
+}
+Container.defaultProps = {
+  maxWidth: 'lg',
+};
--- a/packages/web/src/components/Container/index.tsx
+++ b/packages/web/src/components/Container/index.tsx
@@ -1,10 +0,0 @@
-import * as React from 'react';
-import MuiContainer, { ContainerProps } from '@mui/material/Container';
-
-export default function Container(props: ContainerProps): React.ReactElement {
-  return <MuiContainer {...props} />;
-}
-
-Container.defaultProps = {
-  maxWidth: 'lg',
-};
--- a/packages/web/src/components/ControlledAutocomplete/index.jsx
+++ b/packages/web/src/components/ControlledAutocomplete/index.jsx
@@ -1,39 +1,19 @@
 import * as React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import FormHelperText from '@mui/material/FormHelperText';
-import Autocomplete, {
-  AutocompleteProps,
-  createFilterOptions,
-} from '@mui/material/Autocomplete';
+import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Typography from '@mui/material/Typography';
-import type { IFieldDropdownOption } from 'types';
-
-interface ControlledAutocompleteProps
-  extends AutocompleteProps<IFieldDropdownOption, boolean, boolean, boolean> {
-  shouldUnregister?: boolean;
-  name: string;
-  required?: boolean;
-  showOptionValue?: boolean;
-  description?: string;
-  dependsOn?: string[];
-}
-
-const getOption = (options: readonly IFieldDropdownOption[], value: string) =>
+const getOption = (options, value) =>
  options.find((option) => option.value === value) || null;
-
 // Enables filtering by value in autocomplete dropdown
-const filterOptions = createFilterOptions<IFieldDropdownOption>({
+const filterOptions = createFilterOptions({
  stringify: ({ label, value }) => `
    ${label}
    ${value}
  `,
 });
-
-function ControlledAutocomplete(
-  props: ControlledAutocompleteProps
-): React.ReactElement {
+function ControlledAutocomplete(props) {
  const { control, watch, setValue, resetField } = useFormContext();
-
  const {
    required = false,
    name,
@@ -47,23 +27,19 @@ function ControlledAutocomplete(
    showOptionValue,
    ...autocompleteProps
  } = props;
-
-  let dependsOnValues: unknown[] = [];
+  let dependsOnValues = [];
  if (dependsOn?.length) {
    dependsOnValues = watch(dependsOn);
  }
-
  React.useEffect(() => {
    const hasDependencies = dependsOnValues.length;
    const allDepsSatisfied = dependsOnValues.every(Boolean);
-
    if (hasDependencies && !allDepsSatisfied) {
      // Reset the field if any dependency is not satisfied
      setValue(name, null);
      resetField(name);
    }
  }, dependsOnValues);
-
  return (
    <Controller
      rules={{ required }}
@@ -89,20 +65,18 @@ function ControlledAutocomplete(
            filterOptions={filterOptions}
            value={getOption(options, field.value)}
            onChange={(event, selectedOption, reason, details) => {
-              const typedSelectedOption =
-                selectedOption as IFieldDropdownOption;
+              const typedSelectedOption = selectedOption;
              if (
                typedSelectedOption !== null &&
                Object.prototype.hasOwnProperty.call(
                  typedSelectedOption,
-                  'value'
+                  'value',
                )
              ) {
                controllerOnChange(typedSelectedOption.value);
              } else {
                controllerOnChange(typedSelectedOption);
              }
-
              onChange?.(event, selectedOption, reason, details);
            }}
            onBlur={(...args) => {
@@ -139,5 +113,4 @@ function ControlledAutocomplete(
    />
  );
 }
-
 export default ControlledAutocomplete;
--- a/packages/web/src/components/ControlledCheckbox/index.jsx
+++ b/packages/web/src/components/ControlledCheckbox/index.jsx
@@ -1,16 +1,7 @@
 import * as React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
-import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
-
-type ControlledCheckboxProps = {
-  name: string;
-  defaultValue?: boolean;
-  dataTest?: string;
-} & Omit<CheckboxProps, 'defaultValue'>;
-
-export default function ControlledCheckbox(
-  props: ControlledCheckboxProps
-): React.ReactElement {
+import Checkbox from '@mui/material/Checkbox';
+export default function ControlledCheckbox(props) {
  const { control } = useFormContext();
  const {
    required,
@@ -22,7 +13,6 @@ export default function ControlledCheckbox(
    dataTest,
    ...checkboxProps
  } = props;
-
  return (
    <Controller
      rules={{ required }}
--- a/packages/web/src/components/ControlledCustomAutocomplete/Controller.jsx
+++ b/packages/web/src/components/ControlledCustomAutocomplete/Controller.jsx
@@ -1,17 +1,6 @@
 import * as React from 'react';
 import { Controller as RHFController, useFormContext } from 'react-hook-form';
-
-interface ControllerProps {
-  defaultValue?: string;
-  name: string;
-  required?: boolean;
-  shouldUnregister?: boolean;
-  children: React.ReactElement;
-}
-
-function Controller(
-  props: ControllerProps
-): React.ReactElement {
+function Controller(props) {
  const { control } = useFormContext();
  const {
    defaultValue = '',
@@ -20,7 +9,6 @@ function Controller(
    shouldUnregister,
    children,
  } = props;
-
  return (
    <RHFController
      rules={{ required }}
@@ -28,11 +16,8 @@ function Controller(
      control={control}
      defaultValue={defaultValue}
      shouldUnregister={shouldUnregister ?? false}
-      render={({
-        field,
-      }) => React.cloneElement(children, { field })}
+      render={({ field }) => React.cloneElement(children, { field })}
    />
  );
 }
-
 export default Controller;
--- a/packages/web/src/components/ControlledCustomAutocomplete/CustomOptions.jsx
+++ b/packages/web/src/components/ControlledCustomAutocomplete/CustomOptions.jsx
@@ -2,27 +2,11 @@ import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
 import Tab from '@mui/material/Tab';
 import * as React from 'react';
-
-import type { IFieldDropdownOption } from 'types';
 import Suggestions from 'components/PowerInput/Suggestions';
 import TabPanel from 'components/TabPanel';
-
 import Options from './Options';
 import { Tabs } from './style';
-
-interface CustomOptionsProps {
-  open: boolean;
-  anchorEl: any;
-  data: any;
-  options: readonly IFieldDropdownOption[];
-  onSuggestionClick: any;
-  onOptionClick: (event: React.MouseEvent, option: any) => void;
-  onTabChange: (tabIndex: 0 | 1) => void;
-  label?: string;
-  initialTabIndex?: 0 | 1;
-}
-
-const CustomOptions = (props: CustomOptionsProps) => {
+const CustomOptions = (props) => {
  const {
    open,
    anchorEl,
@@ -34,24 +18,18 @@ const CustomOptions = (props: CustomOptionsProps) => {
    label,
    initialTabIndex,
  } = props;
-
-  const [activeTabIndex, setActiveTabIndex] = React.useState<
-    number | undefined
-  >(undefined);
-
+  const [activeTabIndex, setActiveTabIndex] = React.useState(undefined);
  React.useEffect(
    function applyInitialActiveTabIndex() {
      setActiveTabIndex((currentActiveTabIndex) => {
        if (currentActiveTabIndex === undefined) {
          return initialTabIndex;
        }
-
        return currentActiveTabIndex;
      });
    },
-    [initialTabIndex]
+    [initialTabIndex],
  );
-
  return (
    <Popper
      open={open}
@@ -91,5 +69,4 @@ const CustomOptions = (props: CustomOptionsProps) => {
    </Popper>
  );
 };
-
 export default CustomOptions;
--- a/packages/web/src/components/ControlledCustomAutocomplete/Options.jsx
+++ b/packages/web/src/components/ControlledCustomAutocomplete/Options.jsx
@@ -1,35 +1,23 @@
-import type { IFieldDropdownOption } from 'types';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import throttle from 'lodash/throttle';
 import * as React from 'react';
-import { FixedSizeList, ListChildComponentProps } from 'react-window';
-
+import { FixedSizeList } from 'react-window';
 import { Typography } from '@mui/material';
 import SearchInput from 'components/SearchInput';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { SearchInputWrapper } from './style';
-
-interface OptionsProps {
-  data: readonly IFieldDropdownOption[];
-  onOptionClick: (event: React.MouseEvent, option: any) => void;
-}
-
 const SHORT_LIST_LENGTH = 4;
 const LIST_ITEM_HEIGHT = 64;
-
-const computeListHeight = (currentLength: number) => {
+const computeListHeight = (currentLength) => {
  const numberOfRenderedItems = Math.min(SHORT_LIST_LENGTH, currentLength);
  return LIST_ITEM_HEIGHT * numberOfRenderedItems;
 };
-
 const renderItemFactory =
-  ({ onOptionClick }: Pick<OptionsProps, 'onOptionClick'>) =>
-  (props: ListChildComponentProps) => {
+  ({ onOptionClick }) =>
+  (props) => {
    const { index, style, data } = props;
-
    const suboption = data[index];
-
    return (
      <ListItemButton
        sx={{ pl: 4 }}
@@ -56,55 +44,45 @@ const renderItemFactory =
      </ListItemButton>
    );
  };
-
-const Options = (props: OptionsProps) => {
+const Options = (props) => {
  const formatMessage = useFormatMessage();
  const { data, onOptionClick } = props;
-  const [filteredData, setFilteredData] =
-    React.useState<readonly IFieldDropdownOption[]>(data);
-
+  const [filteredData, setFilteredData] = React.useState(data);
  React.useEffect(
    function syncOptions() {
      setFilteredData((filteredData) => {
        if (filteredData.length === 0 && filteredData.length !== data.length) {
          return data;
        }
-
        return filteredData;
      });
    },
-    [data]
+    [data],
  );
-
  const renderItem = React.useMemo(
    () =>
      renderItemFactory({
        onOptionClick,
      }),
-    [onOptionClick]
+    [onOptionClick],
  );
-
  const onSearchChange = React.useMemo(
    () =>
-      throttle((event: React.ChangeEvent) => {
-        const search = (event.target as HTMLInputElement).value.toLowerCase();
-
+      throttle((event) => {
+        const search = event.target.value.toLowerCase();
        if (!search) {
          setFilteredData(data);
          return;
        }
-
        const newFilteredData = data.filter((option) =>
          `${option.label}\n${option.value}`
            .toLowerCase()
-            .includes(search.toLowerCase())
+            .includes(search.toLowerCase()),
        );
-
        setFilteredData(newFilteredData);
      }, 400),
-    [data]
+    [data],
  );
-
  return (
    <>
      <SearchInputWrapper>
@@ -130,5 +108,4 @@ const Options = (props: OptionsProps) => {
    </>
  );
 };
-
 export default Options;
--- a/packages/web/src/components/ControlledCustomAutocomplete/index.jsx
+++ b/packages/web/src/components/ControlledCustomAutocomplete/index.jsx
@@ -2,20 +2,15 @@ import * as React from 'react';
 import { useController, useFormContext } from 'react-hook-form';
 import { IconButton } from '@mui/material';
 import FormHelperText from '@mui/material/FormHelperText';
-import { AutocompleteProps } from '@mui/material/Autocomplete';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import ClearIcon from '@mui/icons-material/Clear';
-import type { IFieldDropdownOption } from 'types';
 import { ActionButtonsWrapper } from './style';
-
 import ClickAwayListener from '@mui/base/ClickAwayListener';
 import InputLabel from '@mui/material/InputLabel';
 import { createEditor } from 'slate';
 import { Editable, ReactEditor } from 'slate-react';
-
 import Slate from 'components/Slate';
 import Element from 'components/Slate/Element';
-
 import {
  serialize,
  deserialize,
@@ -30,32 +25,10 @@ import {
  InputLabelWrapper,
  ChildrenWrapper,
 } from 'components/PowerInput/style';
-import { VariableElement } from 'components/Slate/types';
 import CustomOptions from './CustomOptions';
 import { processStepWithExecutions } from 'components/PowerInput/data';
 import { StepExecutionsContext } from 'contexts/StepExecutions';
-
-interface ControlledCustomAutocompleteProps
-  extends AutocompleteProps<IFieldDropdownOption, boolean, boolean, boolean> {
-  showOptionValue?: boolean;
-  dependsOn?: string[];
-
-  defaultValue?: string;
-  name: string;
-  label?: string;
-  type?: string;
-  required?: boolean;
-  readOnly?: boolean;
-  description?: string;
-  docUrl?: string;
-  clickToCopy?: boolean;
-  disabled?: boolean;
-  shouldUnregister?: boolean;
-}
-
-function ControlledCustomAutocomplete(
-  props: ControlledCustomAutocompleteProps
-): React.ReactElement {
+function ControlledCustomAutocomplete(props) {
  const {
    defaultValue = '',
    name,
@@ -83,63 +56,48 @@ function ControlledCustomAutocomplete(
  } = field;
  const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
  const [isInitialValueSet, setInitialValue] = React.useState(false);
-  const [isSingleChoice, setSingleChoice] = React.useState<boolean | undefined>(
-    undefined
-  );
+  const [isSingleChoice, setSingleChoice] = React.useState(undefined);
  const priorStepsWithExecutions = React.useContext(StepExecutionsContext);
-  const editorRef = React.useRef<HTMLDivElement | null>(null);
+  const editorRef = React.useRef(null);
  const renderElement = React.useCallback(
    (props) => <Element {...props} disabled={disabled} />,
-    [disabled]
+    [disabled],
  );
  const [editor] = React.useState(() => customizeEditor(createEditor()));
  const [showVariableSuggestions, setShowVariableSuggestions] =
    React.useState(false);
-
-  let dependsOnValues: unknown[] = [];
+  let dependsOnValues = [];
  if (dependsOn?.length) {
    dependsOnValues = watch(dependsOn);
  }
-
  React.useEffect(() => {
    const ref = ReactEditor.toDOMNode(editor, editor);
-
    resizeObserver.observe(ref);
-
    return () => resizeObserver.unobserve(ref);
  }, []);
-
  const promoteValue = () => {
    const serializedValue = serialize(editor.children);
    controllerOnChange(serializedValue);
  };
-
  const resizeObserver = React.useMemo(function syncCustomOptionsPosition() {
    return new ResizeObserver(() => {
      forceUpdate();
    });
  }, []);
-
  React.useEffect(() => {
    const hasDependencies = dependsOnValues.length;
-
    if (hasDependencies) {
      // Reset the field when a dependent has been updated
      resetEditor(editor);
    }
  }, dependsOnValues);
-
  React.useEffect(
    function updateInitialValue() {
      const hasOptions = options.length;
      const isOptionsLoaded = loading === false;
      if (!isInitialValueSet && hasOptions && isOptionsLoaded) {
        setInitialValue(true);
-
-        const option: IFieldDropdownOption | undefined = options.find(
-          (option) => option.value === value
-        );
-
+        const option = options.find((option) => option.value === value);
        if (option) {
          overrideEditorValue(editor, { option, focus: false });
          setSingleChoice(true);
@@ -148,70 +106,56 @@ function ControlledCustomAutocomplete(
        }
      }
    },
-    [isInitialValueSet, options, loading]
+    [isInitialValueSet, options, loading],
  );
-
  React.useEffect(() => {
    if (!showVariableSuggestions && value !== serialize(editor.children)) {
      promoteValue();
    }
  }, [showVariableSuggestions]);
-
-  const hideSuggestionsOnShift = (
-    event: React.KeyboardEvent<HTMLInputElement>
-  ) => {
+  const hideSuggestionsOnShift = (event) => {
    if (event.code === 'Tab') {
      setShowVariableSuggestions(false);
    }
  };
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  const handleKeyDown = (event) => {
    hideSuggestionsOnShift(event);
    if (event.code === 'Tab') {
      promoteValue();
    }
-
    if (isSingleChoice && event.code !== 'Tab') {
      event.preventDefault();
    }
  };
-
  const stepsWithVariables = React.useMemo(() => {
    return processStepWithExecutions(priorStepsWithExecutions);
  }, [priorStepsWithExecutions]);
-
  const handleVariableSuggestionClick = React.useCallback(
-    (variable: Pick<VariableElement, 'name' | 'value'>) => {
+    (variable) => {
      insertVariable(editor, variable, stepsWithVariables);
    },
-    [stepsWithVariables]
+    [stepsWithVariables],
  );
-
  const handleOptionClick = React.useCallback(
-    (event: React.MouseEvent, option: IFieldDropdownOption) => {
+    (event, option) => {
      event.stopPropagation();
      overrideEditorValue(editor, { option, focus: false });
      setShowVariableSuggestions(false);
      setSingleChoice(true);
    },
-    [stepsWithVariables]
+    [stepsWithVariables],
  );
-
-  const handleClearButtonClick = (event: React.MouseEvent) => {
+  const handleClearButtonClick = (event) => {
    event.stopPropagation();
    resetEditor(editor);
    promoteValue();
    setSingleChoice(undefined);
  };
-
-  const reset = (tabIndex: 0 | 1) => {
+  const reset = (tabIndex) => {
    const isOptions = tabIndex === 0;
-
    setSingleChoice(isOptions);
-
    resetEditor(editor, { focus: true });
  };
-
  return (
    <Slate
      editor={editor}
@@ -313,5 +257,4 @@ function ControlledCustomAutocomplete(
    </Slate>
  );
 }
-
 export default ControlledCustomAutocomplete;
--- a/packages/web/src/components/ControlledCustomAutocomplete/style.js
+++ b/packages/web/src/components/ControlledCustomAutocomplete/style.js
@@ -1,18 +1,15 @@
 import { styled } from '@mui/material/styles';
 import Stack from '@mui/material/Stack';
 import MuiTabs from '@mui/material/Tabs';
-
 export const ActionButtonsWrapper = styled(Stack)`
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
 `;
-
 export const Tabs = styled(MuiTabs)`
  border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
 `;
-
 export const SearchInputWrapper = styled('div')`
  padding: ${({ theme }) => theme.spacing(0, 2, 2, 2)};
 `;
--- a/packages/web/src/components/CustomLogo/index.ee.jsx
+++ b/packages/web/src/components/CustomLogo/index.ee.jsx
@@ -1,13 +1,9 @@
 import useConfig from 'hooks/useConfig';
 import { LogoImage } from './style.ee';
-
 const CustomLogo = () => {
  const { config, loading } = useConfig(['logo.svgData']);
-
  if (loading || !config?.['logo.svgData']) return null;
-
-  const logoSvgData = config['logo.svgData'] as string;
-
+  const logoSvgData = config['logo.svgData'];
  return (
    <LogoImage
      data-test="custom-logo"
@@ -15,5 +11,4 @@ const CustomLogo = () => {
    />
  );
 };
-
 export default CustomLogo;
--- a/packages/web/src/components/CustomLogo/style.ee.js
+++ b/packages/web/src/components/CustomLogo/style.ee.js
@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-
 export const LogoImage = styled('img')(() => ({
  maxWidth: 200,
  maxHeight: 22,
--- a/packages/web/src/components/DefaultLogo/index.jsx
+++ b/packages/web/src/components/DefaultLogo/index.jsx
@@ -1,22 +1,16 @@
 import Typography from '@mui/material/Typography';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-
 import MationLogo from 'components/MationLogo';
 import useAutomatischInfo from 'hooks/useAutomatischInfo';
-
 const DefaultLogo = () => {
  const { isMation, loading } = useAutomatischInfo();
-
  if (loading) return <React.Fragment />;
-
  if (isMation) return <MationLogo />;
-
  return (
    <Typography variant="h6" component="h1" data-test="typography-logo" noWrap>
      <FormattedMessage id="brandText" />
    </Typography>
  );
 };
-
 export default DefaultLogo;
--- a/packages/web/src/components/DeleteAccountDialog/index.ee.jsx
+++ b/packages/web/src/components/DeleteAccountDialog/index.ee.jsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useMutation } from '@apollo/client';
-
 import * as URLS from 'config/urls';
 import ConfirmationDialog from 'components/ConfirmationDialog';
 import apolloClient from 'graphql/client';
@@ -9,27 +8,18 @@ import { DELETE_CURRENT_USER } from 'graphql/mutations/delete-current-user.ee';
 import useAuthentication from 'hooks/useAuthentication';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCurrentUser from 'hooks/useCurrentUser';
-
-type DeleteAccountDialogProps = {
-  onClose: () => void;
-}
-
-export default function DeleteAccountDialog(props: DeleteAccountDialogProps) {
+export default function DeleteAccountDialog(props) {
  const [deleteCurrentUser] = useMutation(DELETE_CURRENT_USER);
  const formatMessage = useFormatMessage();
  const currentUser = useCurrentUser();
  const authentication = useAuthentication();
  const navigate = useNavigate();
-
  const handleConfirm = React.useCallback(async () => {
    await deleteCurrentUser();
-
    authentication.updateToken('');
    await apolloClient.clearStore();
-
    navigate(URLS.LOGIN);
  }, [deleteCurrentUser, currentUser]);
-
  return (
    <ConfirmationDialog
      title={formatMessage('deleteAccountDialog.title')}
--- a/packages/web/src/components/DeleteRoleButton/index.ee.jsx
+++ b/packages/web/src/components/DeleteRoleButton/index.ee.jsx
@@ -3,18 +3,11 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import IconButton from '@mui/material/IconButton';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
-
 import Can from 'components/Can';
 import ConfirmationDialog from 'components/ConfirmationDialog';
 import { DELETE_ROLE } from 'graphql/mutations/delete-role.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
-
-type DeleteRoleButtonProps = {
-  disabled?: boolean;
-  roleId: string;
-};
-
-export default function DeleteRoleButton(props: DeleteRoleButtonProps) {
+export default function DeleteRoleButton(props) {
  const { disabled, roleId } = props;
  const [showConfirmation, setShowConfirmation] = React.useState(false);
  const [deleteRole] = useMutation(DELETE_ROLE, {
@@ -23,23 +16,20 @@ export default function DeleteRoleButton(props: DeleteRoleButtonProps) {
  });
  const formatMessage = useFormatMessage();
  const enqueueSnackbar = useEnqueueSnackbar();
-
  const handleConfirm = React.useCallback(async () => {
    try {
      await deleteRole();
-
      setShowConfirmation(false);
      enqueueSnackbar(formatMessage('deleteRoleButton.successfullyDeleted'), {
        variant: 'success',
        SnackbarProps: {
-          'data-test': 'snackbar-delete-role-success'
-        }
+          'data-test': 'snackbar-delete-role-success',
+        },
      });
    } catch (error) {
      throw new Error('Failed while deleting!');
    }
  }, [deleteRole]);
-
  return (
    <>
      <Can I="delete" a="Role" passThrough>
--- a/packages/web/src/components/DeleteUserButton/index.ee.jsx
+++ b/packages/web/src/components/DeleteUserButton/index.ee.jsx
@@ -3,16 +3,10 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import IconButton from '@mui/material/IconButton';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
-
 import ConfirmationDialog from 'components/ConfirmationDialog';
 import { DELETE_USER } from 'graphql/mutations/delete-user.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
-
-type DeleteUserButtonProps = {
-  userId: string;
-};
-
-export default function DeleteUserButton(props: DeleteUserButtonProps) {
+export default function DeleteUserButton(props) {
  const { userId } = props;
  const [showConfirmation, setShowConfirmation] = React.useState(false);
  const [deleteUser] = useMutation(DELETE_USER, {
@@ -21,26 +15,27 @@ export default function DeleteUserButton(props: DeleteUserButtonProps) {
  });
  const formatMessage = useFormatMessage();
  const enqueueSnackbar = useEnqueueSnackbar();
-
  const handleConfirm = React.useCallback(async () => {
    try {
      await deleteUser();
-
      setShowConfirmation(false);
      enqueueSnackbar(formatMessage('deleteUserButton.successfullyDeleted'), {
        variant: 'success',
        SnackbarProps: {
-          'data-test': 'snackbar-delete-user-success'
-        }
+          'data-test': 'snackbar-delete-user-success',
+        },
      });
    } catch (error) {
      throw new Error('Failed while deleting!');
    }
  }, [deleteUser]);
-
  return (
    <>
-      <IconButton data-test="delete-button" onClick={() => setShowConfirmation(true)} size="small">
+      <IconButton
+        data-test="delete-button"
+        onClick={() => setShowConfirmation(true)}
+        size="small"
+      >
        <DeleteIcon />
      </IconButton>

--- a/packages/web/src/components/Drawer/index.jsx
+++ b/packages/web/src/components/Drawer/index.jsx
@@ -1,46 +1,26 @@
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
-import { SwipeableDrawerProps } from '@mui/material/SwipeableDrawer';
 import Toolbar from '@mui/material/Toolbar';
 import List from '@mui/material/List';
 import Divider from '@mui/material/Divider';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Badge from '@mui/material/Badge';
-
 import ListItemLink from 'components/ListItemLink';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { Drawer as BaseDrawer } from './style';
-
 const iOS =
  typeof navigator !== 'undefined' &&
  /iPad|iPhone|iPod/.test(navigator.userAgent);
-
-type DrawerLink = {
-  Icon: React.ElementType;
-  primary: string;
-  to: string;
-  target?: '_blank';
-  badgeContent?: React.ReactNode;
-  dataTest?: string;
-};
-
-type DrawerProps = {
-  links: DrawerLink[];
-  bottomLinks?: DrawerLink[];
-} & SwipeableDrawerProps;
-
-export default function Drawer(props: DrawerProps): React.ReactElement {
+export default function Drawer(props) {
  const { links = [], bottomLinks = [], ...drawerProps } = props;
  const theme = useTheme();
  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'));
  const formatMessage = useFormatMessage();
-
-  const closeOnClick = (event: React.SyntheticEvent) => {
+  const closeOnClick = (event) => {
    if (matchSmallScreens) {
      props.onClose(event);
    }
  };
-
  return (
    <BaseDrawer
      {...drawerProps}
@@ -84,7 +64,7 @@ export default function Drawer(props: DrawerProps): React.ReactElement {
              target={target}
              data-test={dataTest}
            />
-          )
+          ),
        )}
      </List>
    </BaseDrawer>
--- a/packages/web/src/components/Drawer/style.js
+++ b/packages/web/src/components/Drawer/style.js
@@ -1,10 +1,8 @@
-import { styled, Theme, CSSObject } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import { drawerClasses } from '@mui/material/Drawer';
 import MuiSwipeableDrawer from '@mui/material/SwipeableDrawer';
-
 const drawerWidth = 300;
-
-const openedMixin = (theme: Theme): CSSObject => ({
+const openedMixin = (theme) => ({
  transition: theme.transitions.create('width', {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.enteringScreen,
@@ -15,8 +13,7 @@ const openedMixin = (theme: Theme): CSSObject => ({
    width: drawerWidth,
  },
 });
-
-const closedMixin = (theme: Theme): CSSObject => ({
+const closedMixin = (theme) => ({
  transition: theme.transitions.create('width', {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
@@ -27,7 +24,6 @@ const closedMixin = (theme: Theme): CSSObject => ({
    width: `calc(${theme.spacing(9)} + 1px)`,
  },
 });
-
 export const Drawer = styled(MuiSwipeableDrawer)(({ theme, open }) => ({
  width: drawerWidth,
  flexShrink: 0,
--- a/packages/web/src/components/DynamicField/index.jsx
+++ b/packages/web/src/components/DynamicField/index.jsx
@@ -7,35 +7,13 @@ import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import RemoveIcon from '@mui/icons-material/Remove';
 import AddIcon from '@mui/icons-material/Add';
-
-import { IFieldDynamic } from 'types';
 import InputCreator from 'components/InputCreator';
 import { EditorContext } from 'contexts/Editor';
-
-interface DynamicFieldProps {
-  onChange?: (value: string) => void;
-  onBlur?: (value: string) => void;
-  defaultValue?: Record<string, unknown>[];
-  name: string;
-  label: string;
-  type?: string;
-  required?: boolean;
-  readOnly?: boolean;
-  description?: string;
-  docUrl?: string;
-  clickToCopy?: boolean;
-  disabled?: boolean;
-  fields: IFieldDynamic['fields'];
-  shouldUnregister?: boolean;
-  stepId?: string;
-}
-
-function DynamicField(props: DynamicFieldProps): React.ReactElement {
+function DynamicField(props) {
  const { label, description, fields, name, defaultValue, stepId } = props;
  const { control, setValue, getValues } = useFormContext();
-  const fieldsValue = useWatch({ control, name }) as Record<string, unknown>[];
+  const fieldsValue = useWatch({ control, name });
  const editorContext = React.useContext(EditorContext);
-
  const createEmptyItem = React.useCallback(() => {
    return fields.reduce((previousValue, field) => {
      return {
@@ -45,43 +23,35 @@ function DynamicField(props: DynamicFieldProps): React.ReactElement {
      };
    }, {});
  }, [fields]);
-
  const addItem = React.useCallback(() => {
    const values = getValues(name);
-
    if (!values) {
      setValue(name, [createEmptyItem()]);
    } else {
      setValue(name, values.concat(createEmptyItem()));
    }
  }, [getValues, createEmptyItem]);
-
  const removeItem = React.useCallback(
    (index) => {
      if (fieldsValue.length === 1) return;
-
      const newFieldsValue = fieldsValue.filter(
-        (fieldValue, fieldIndex) => fieldIndex !== index
+        (fieldValue, fieldIndex) => fieldIndex !== index,
      );
-
      setValue(name, newFieldsValue);
    },
-    [fieldsValue]
+    [fieldsValue],
  );
-
  React.useEffect(
    function addInitialGroupWhenEmpty() {
      const fieldValues = getValues(name);
-
      if (!fieldValues && defaultValue) {
        setValue(name, defaultValue);
      } else if (!fieldValues) {
        setValue(name, [createEmptyItem()]);
      }
    },
-    [createEmptyItem, defaultValue]
+    [createEmptyItem, defaultValue],
  );
-
  return (
    <React.Fragment>
      <Typography variant="subtitle2">{label}</Typography>
@@ -137,5 +107,4 @@ function DynamicField(props: DynamicFieldProps): React.ReactElement {
    </React.Fragment>
  );
 }
-
 export default DynamicField;
--- a/packages/web/src/components/EditableTypography/index.jsx
+++ b/packages/web/src/components/EditableTypography/index.jsx
@@ -1,61 +1,40 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
-import type { TypographyProps } from '@mui/material/Typography';
 import EditIcon from '@mui/icons-material/Edit';
-
 import { Box, TextField } from './style';
-
-type EditableTypographyProps = TypographyProps & {
-  children: string;
-  onConfirm?: (value: string) => void;
-};
-
 const noop = () => null;
-
-function EditableTypography(props: EditableTypographyProps) {
+function EditableTypography(props) {
  const { children, onConfirm = noop, sx, ...typographyProps } = props;
  const [editing, setEditing] = React.useState(false);
-
  const handleClick = React.useCallback(() => {
    setEditing((editing) => !editing);
  }, []);
-
-  const handleTextFieldClick = React.useCallback(
-    (event: React.SyntheticEvent) => {
-      event.stopPropagation();
-    },
-    []
-  );
-
+  const handleTextFieldClick = React.useCallback((event) => {
+    event.stopPropagation();
+  }, []);
  const handleTextFieldKeyDown = React.useCallback(
-    async (event: React.KeyboardEvent<HTMLInputElement>) => {
-      const target = event.target as HTMLInputElement;
+    async (event) => {
+      const target = event.target;
      if (event.key === 'Enter') {
        if (target.value !== children) {
          await onConfirm(target.value);
        }
-
        setEditing(false);
      }
    },
-    [children]
+    [children],
  );
-
  const handleTextFieldBlur = React.useCallback(
-    async (event: React.FocusEvent<HTMLInputElement>) => {
+    async (event) => {
      const value = event.target.value;
-
      if (value !== children) {
        await onConfirm(value);
      }
-
      setEditing(false);
    },
-    [onConfirm, children]
+    [onConfirm, children],
  );
-
  let component = <Typography {...typographyProps}>{children}</Typography>;
-
  if (editing) {
    component = (
      <TextField
@@ -68,7 +47,6 @@ function EditableTypography(props: EditableTypographyProps) {
      />
    );
  }
-
  return (
    <Box sx={sx} onClick={handleClick} editing={editing}>
      <EditIcon sx={{ mr: 1 }} />
@@ -77,5 +55,4 @@ function EditableTypography(props: EditableTypographyProps) {
    </Box>
  );
 }
-
 export default EditableTypography;
--- a/packages/web/src/components/EditableTypography/style.js
+++ b/packages/web/src/components/EditableTypography/style.js
@@ -2,23 +2,17 @@ import { styled } from '@mui/material/styles';
 import MuiBox from '@mui/material/Box';
 import MuiTextField from '@mui/material/TextField';
 import { inputClasses } from '@mui/material/Input';
-
-type BoxProps = {
-  editing?: boolean;
-};
-
-const boxShouldForwardProp = (prop: string) => !['editing'].includes(prop);
+const boxShouldForwardProp = (prop) => !['editing'].includes(prop);
 export const Box = styled(MuiBox, {
  shouldForwardProp: boxShouldForwardProp,
-})<BoxProps>`
+})`
  display: flex;
  flex: 1;
  width: 300px;
  height: 33px;
  align-items: center;
-  ${({ editing }) => editing && `border-bottom: 1px dashed #000;`}
+  ${({ editing }) => editing && 'border-bottom: 1px dashed #000;'}
 `;
-
 export const TextField = styled(MuiTextField)({
  width: '100%',
  [`.${inputClasses.root}:before, .${inputClasses.root}:after, .${inputClasses.root}:hover`]:
--- a/packages/web/src/components/Editor/index.jsx
+++ b/packages/web/src/components/Editor/index.jsx
@@ -3,33 +3,24 @@ import { useMutation } from '@apollo/client';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import AddIcon from '@mui/icons-material/Add';
-import type { IFlow, IStep } from 'types';
-
 import { GET_FLOW } from 'graphql/queries/get-flow';
 import { CREATE_STEP } from 'graphql/mutations/create-step';
 import { UPDATE_STEP } from 'graphql/mutations/update-step';
 import FlowStep from 'components/FlowStep';
-
-type EditorProps = {
-  flow: IFlow;
-};
-
-function updateHandlerFactory(flowId: string, previousStepId: string) {
-  return function createStepUpdateHandler(cache: any, mutationResult: any) {
+function updateHandlerFactory(flowId, previousStepId) {
+  return function createStepUpdateHandler(cache, mutationResult) {
    const { data } = mutationResult;
    const { createStep: createdStep } = data;
    const { getFlow: flow } = cache.readQuery({
      query: GET_FLOW,
      variables: { id: flowId },
    });
-    const steps = flow.steps.reduce((steps: any[], currentStep: any) => {
+    const steps = flow.steps.reduce((steps, currentStep) => {
      if (currentStep.id === previousStepId) {
        return [...steps, currentStep, createdStep];
      }
-
      return [...steps, currentStep];
    }, []);
-
    cache.writeQuery({
      query: GET_FLOW,
      variables: { id: flowId },
@@ -37,26 +28,20 @@ function updateHandlerFactory(flowId: string, previousStepId: string) {
    });
  };
 }
-
-export default function Editor(props: EditorProps): React.ReactElement {
+export default function Editor(props) {
  const [updateStep] = useMutation(UPDATE_STEP);
  const [createStep, { loading: creationInProgress }] = useMutation(
    CREATE_STEP,
    {
      refetchQueries: ['GetFlow'],
-    }
+    },
  );
-
  const { flow } = props;
  const [triggerStep] = flow.steps;
-
-  const [currentStepId, setCurrentStepId] = React.useState<string | null>(
-    triggerStep.id
-  );
-
+  const [currentStepId, setCurrentStepId] = React.useState(triggerStep.id);
  const onStepChange = React.useCallback(
-    (step: any) => {
-      const mutationInput: Record<string, unknown> = {
+    (step) => {
+      const mutationInput = {
        id: step.id,
        key: step.key,
        parameters: step.parameters,
@@ -67,16 +52,13 @@ export default function Editor(props: EditorProps): React.ReactElement {
          id: flow.id,
        },
      };
-
      if (step.appKey) {
        mutationInput.appKey = step.appKey;
      }
-
      updateStep({ variables: { input: mutationInput } });
    },
-    [updateStep, flow.id]
+    [updateStep, flow.id],
  );
-
  const addStep = React.useCallback(
    async (previousStepId) => {
      const mutationInput = {
@@ -87,24 +69,20 @@ export default function Editor(props: EditorProps): React.ReactElement {
          id: flow.id,
        },
      };
-
      const createdStep = await createStep({
        variables: { input: mutationInput },
        update: updateHandlerFactory(flow.id, previousStepId),
      });
      const createdStepId = createdStep.data.createStep.id;
-
      setCurrentStepId(createdStepId);
    },
-    [createStep, flow.id]
+    [createStep, flow.id],
  );
-
-  const openNextStep = React.useCallback((nextStep: IStep) => {
+  const openNextStep = React.useCallback((nextStep) => {
    return () => {
      setCurrentStepId(nextStep?.id);
    };
  }, []);
-
  return (
    <Box
      display="flex"
--- a/packages/web/src/components/EditorLayout/index.jsx
+++ b/packages/web/src/components/EditorLayout/index.jsx
@@ -8,7 +8,6 @@ import Tooltip from '@mui/material/Tooltip';
 import IconButton from '@mui/material/IconButton';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 import Snackbar from '@mui/material/Snackbar';
-
 import { EditorProvider } from 'contexts/Editor';
 import EditableTypography from 'components/EditableTypography';
 import Container from 'components/Container';
@@ -17,19 +16,16 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import { UPDATE_FLOW_STATUS } from 'graphql/mutations/update-flow-status';
 import { UPDATE_FLOW } from 'graphql/mutations/update-flow';
 import { GET_FLOW } from 'graphql/queries/get-flow';
-import type { IFlow } from 'types';
 import * as URLS from 'config/urls';
-
-export default function EditorLayout(): React.ReactElement {
+export default function EditorLayout() {
  const { flowId } = useParams();
  const formatMessage = useFormatMessage();
  const [updateFlow] = useMutation(UPDATE_FLOW);
  const [updateFlowStatus] = useMutation(UPDATE_FLOW_STATUS);
  const { data, loading } = useQuery(GET_FLOW, { variables: { id: flowId } });
-  const flow: IFlow = data?.getFlow;
-
+  const flow = data?.getFlow;
  const onFlowNameUpdate = React.useCallback(
-    async (name: string) => {
+    async (name) => {
      await updateFlow({
        variables: {
          input: {
@@ -46,11 +42,10 @@ export default function EditorLayout(): React.ReactElement {
        },
      });
    },
-    [flow?.id]
+    [flow?.id],
  );
-
  const onFlowStatusUpdate = React.useCallback(
-    async (active: boolean) => {
+    async (active) => {
      await updateFlowStatus({
        variables: {
          input: {
@@ -67,9 +62,8 @@ export default function EditorLayout(): React.ReactElement {
        },
      });
    },
-    [flow?.id]
+    [flow?.id],
  );
-
  return (
    <>
      <Stack direction="column" height="100%">
--- a/packages/web/src/components/ExecutionHeader/index.jsx
+++ b/packages/web/src/components/ExecutionHeader/index.jsx
@@ -4,31 +4,21 @@ import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
-import type { IExecution } from 'types';
-
 import useFormatMessage from 'hooks/useFormatMessage';
-
-type ExecutionHeaderProps = {
-  execution: IExecution;
-};
-
-function ExecutionName(props: Pick<IExecution['flow'], 'name'>) {
+function ExecutionName(props) {
  return (
    <Typography variant="h3" gutterBottom>
      {props.name}
    </Typography>
  );
 }
-
-function ExecutionId(props: Pick<IExecution, 'id'>) {
+function ExecutionId(props) {
  const formatMessage = useFormatMessage();
-
  const id = (
    <Typography variant="body1" component="span">
      {props.id}
    </Typography>
  );
-
  return (
    <Box sx={{ display: 'flex' }}>
      <Typography variant="body2">
@@ -37,13 +27,9 @@ function ExecutionId(props: Pick<IExecution, 'id'>) {
    </Box>
  );
 }
-
-function ExecutionDate(props: Pick<IExecution, 'createdAt'>) {
-  const createdAt = DateTime.fromMillis(
-    parseInt(props.createdAt as string, 10)
-  );
+function ExecutionDate(props) {
+  const createdAt = DateTime.fromMillis(parseInt(props.createdAt, 10));
  const relativeCreatedAt = createdAt.toRelative();
-
  return (
    <Tooltip
      title={createdAt.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}
@@ -54,14 +40,9 @@ function ExecutionDate(props: Pick<IExecution, 'createdAt'>) {
    </Tooltip>
  );
 }
-
-export default function ExecutionHeader(
-  props: ExecutionHeaderProps
-): React.ReactElement {
+export default function ExecutionHeader(props) {
  const { execution } = props;
-
  if (!execution) return <React.Fragment />;
-
  return (
    <Stack direction="column">
      <Stack
--- a/packages/web/src/components/ExecutionRow/index.jsx
+++ b/packages/web/src/components/ExecutionRow/index.jsx
@@ -5,29 +5,16 @@ import CardActionArea from '@mui/material/CardActionArea';
 import Chip from '@mui/material/Chip';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 import { DateTime } from 'luxon';
-import type { IExecution } from 'types';
-
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
 import FlowAppIcons from 'components/FlowAppIcons';
 import { Apps, CardContent, ArrowContainer, Title, Typography } from './style';
-
-type ExecutionRowProps = {
-  execution: IExecution;
-};
-
-export default function ExecutionRow(
-  props: ExecutionRowProps
-): React.ReactElement {
+export default function ExecutionRow(props) {
  const formatMessage = useFormatMessage();
  const { execution } = props;
  const { flow } = execution;
-
-  const createdAt = DateTime.fromMillis(
-    parseInt(execution.createdAt as string, 10)
-  );
+  const createdAt = DateTime.fromMillis(parseInt(execution.createdAt, 10));
  const relativeCreatedAt = createdAt.toRelative();
-
  return (
    <Link to={URLS.EXECUTION(execution.id)} data-test="execution-row">
      <Card sx={{ mb: 1 }}>
@@ -65,7 +52,7 @@ export default function ExecutionRow(
                label={formatMessage(
                  execution.status === 'success'
                    ? 'execution.statusSuccess'
-                    : 'execution.statusFailure'
+                    : 'execution.statusFailure',
                )}
              />

--- a/packages/web/src/components/ExecutionRow/style.js
+++ b/packages/web/src/components/ExecutionRow/style.js
@@ -3,7 +3,6 @@ import MuiCardContent from '@mui/material/CardContent';
 import MuiBox from '@mui/material/Box';
 import MuiStack from '@mui/material/Stack';
 import MuiTypography from '@mui/material/Typography';
-
 export const CardContent = styled(MuiCardContent)(({ theme }) => ({
  display: 'grid',
  gridTemplateRows: 'auto',
@@ -22,14 +21,12 @@ export const CardContent = styled(MuiCardContent)(({ theme }) => ({
    gridTemplateRows: 'auto auto',
  },
 }));
-
 export const Apps = styled(MuiStack)(() => ({
  gridArea: 'apps',
 }));
 export const Title = styled(MuiStack)(() => ({
  gridArea: 'title',
 }));
-
 export const ArrowContainer = styled(MuiBox)(() => ({
  flexDirection: 'row',
  display: 'flex',
@@ -42,7 +39,6 @@ export const Typography = styled(MuiTypography)(() => ({
  width: '100%',
  maxWidth: '85%',
 }));
-
 export const DesktopOnlyBreakline = styled('br')(({ theme }) => ({
  [theme.breakpoints.down('sm')]: {
    display: 'none',
--- a/packages/web/src/components/ExecutionStep/index.jsx
+++ b/packages/web/src/components/ExecutionStep/index.jsx
@@ -8,14 +8,11 @@ import Tab from '@mui/material/Tab';
 import Typography from '@mui/material/Typography';
 import Tooltip from '@mui/material/Tooltip';
 import Box from '@mui/material/Box';
-import type { IApp, IExecutionStep, IStep } from 'types';
-
 import TabPanel from 'components/TabPanel';
 import SearchableJSONViewer from 'components/SearchableJSONViewer';
 import AppIcon from 'components/AppIcon';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useApps from 'hooks/useApps';
-
 import {
  AppIconWrapper,
  AppIconStatusIconWrapper,
@@ -24,23 +21,13 @@ import {
  Metadata,
  Wrapper,
 } from './style';
-
-type ExecutionStepProps = {
-  collapsed?: boolean;
-  step: IStep;
-  index?: number;
-  executionStep: IExecutionStep;
-};
-
-function ExecutionStepId(props: Pick<IExecutionStep, 'id'>) {
+function ExecutionStepId(props) {
  const formatMessage = useFormatMessage();
-
  const id = (
    <Typography variant="caption" component="span">
      {props.id}
    </Typography>
  );
-
  return (
    <Box sx={{ display: 'flex' }} gridArea="id">
      <Typography variant="caption" fontWeight="bold">
@@ -49,12 +36,10 @@ function ExecutionStepId(props: Pick<IExecutionStep, 'id'>) {
    </Box>
  );
 }
-
-function ExecutionStepDate(props: Pick<IExecutionStep, 'createdAt'>) {
+function ExecutionStepDate(props) {
  const formatMessage = useFormatMessage();
  const createdAt = DateTime.fromMillis(parseInt(props.createdAt, 10));
  const relativeCreatedAt = createdAt.toRelative();
-
  return (
    <Tooltip
      title={createdAt.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}
@@ -67,16 +52,12 @@ function ExecutionStepDate(props: Pick<IExecutionStep, 'createdAt'>) {
    </Tooltip>
  );
 }
-
 const validIcon = <CheckCircleIcon color="success" />;
 const errorIcon = <ErrorIcon color="error" />;
-
-export default function ExecutionStep(
-  props: ExecutionStepProps
-): React.ReactElement | null {
+export default function ExecutionStep(props) {
  const { executionStep } = props;
  const [activeTabIndex, setActiveTabIndex] = React.useState(0);
-  const step: IStep = executionStep.step;
+  const step = executionStep.step;
  const isTrigger = step.type === 'trigger';
  const isAction = step.type === 'action';
  const formatMessage = useFormatMessage();
@@ -84,14 +65,11 @@ export default function ExecutionStep(
    onlyWithTriggers: isTrigger,
    onlyWithActions: isAction,
  });
-  const app = apps?.find((currentApp: IApp) => currentApp.key === step.appKey);
-
+  const app = apps?.find((currentApp) => currentApp.key === step.appKey);
  if (!apps) return null;
-
  const validationStatusIcon =
    executionStep.status === 'success' ? validIcon : errorIcon;
  const hasError = !!executionStep.errorDetails;
-
  return (
    <Wrapper elevation={1} data-test="execution-step">
      <Header>
--- a/packages/web/src/components/ExecutionStep/style.js
+++ b/packages/web/src/components/ExecutionStep/style.js
@@ -1,13 +1,10 @@
 import { styled, alpha } from '@mui/material/styles';
 import Card from '@mui/material/Card';
 import Box from '@mui/material/Box';
-
 export const AppIconWrapper = styled('div')`
  display: flex;
  align-items: center;
 `;
-
-
 export const AppIconStatusIconWrapper = styled('span')`
  display: inline-flex;
  position: relative;
@@ -23,43 +20,35 @@ export const AppIconStatusIconWrapper = styled('span')`
    overflow: hidden;
  }
 `;
-
 export const Wrapper = styled(Card)`
  width: 100%;
  overflow: unset;
 `;
-
-type HeaderProps = {
-  collapsed?: boolean;
-};
-
 export const Header = styled('div', {
  shouldForwardProp: (prop) => prop !== 'collapsed',
-}) <HeaderProps>`
+})`
  padding: ${({ theme }) => theme.spacing(2)};
  cursor: ${({ collapsed }) => (collapsed ? 'pointer' : 'unset')};
 `;
-
 export const Content = styled('div')`
  border: 1px solid ${({ theme }) => alpha(theme.palette.divider, 0.8)};
  border-left: none;
  border-right: none;
  padding: ${({ theme }) => theme.spacing(2, 0)};
 `;
-
 export const Metadata = styled(Box)`
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
-    "step id"
-    "step date";
+    'step id'
+    'step date';

  ${({ theme }) => theme.breakpoints.down('sm')} {
    grid-template-rows: auto auto auto;
    grid-template-areas:
-    "id"
-    "step"
-    "date";
+      'id'
+      'step'
+      'date';
  }
-` as typeof Box;
+`;
--- a/packages/web/src/components/FlowAppIcons/index.jsx
+++ b/packages/web/src/components/FlowAppIcons/index.jsx
@@ -1,20 +1,12 @@
 import * as React from 'react';
-import type { IStep } from 'types';
-
 import AppIcon from 'components/AppIcon';
 import IntermediateStepCount from 'components/IntermediateStepCount';
-
-type FlowAppIconsProps = {
-  steps: Partial<IStep>[];
-};
-
-export default function FlowAppIcons(props: FlowAppIconsProps) {
+export default function FlowAppIcons(props) {
  const { steps } = props;
  const stepsCount = steps.length;
  const firstStep = steps[0];
  const lastStep = steps.length > 1 && steps[stepsCount - 1];
  const intermeaditeStepCount = stepsCount - 2;
-
  return (
    <>
      <AppIcon
--- a/packages/web/src/components/FlowContextMenu/index.jsx
+++ b/packages/web/src/components/FlowContextMenu/index.jsx
@@ -1,26 +1,15 @@
 import { useMutation } from '@apollo/client';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
-import type { PopoverProps } from '@mui/material/Popover';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-
 import Can from 'components/Can';
 import * as URLS from 'config/urls';
 import { DELETE_FLOW } from 'graphql/mutations/delete-flow';
 import { DUPLICATE_FLOW } from 'graphql/mutations/duplicate-flow';
 import useFormatMessage from 'hooks/useFormatMessage';
-
-type ContextMenuProps = {
-  flowId: string;
-  onClose: () => void;
-  anchorEl: PopoverProps['anchorEl'];
-};
-
-export default function ContextMenu(
-  props: ContextMenuProps
-): React.ReactElement {
+export default function ContextMenu(props) {
  const { flowId, onClose, anchorEl } = props;
  const enqueueSnackbar = useEnqueueSnackbar();
  const [deleteFlow] = useMutation(DELETE_FLOW);
@@ -28,22 +17,18 @@ export default function ContextMenu(
    refetchQueries: ['GetFlows'],
  });
  const formatMessage = useFormatMessage();
-
  const onFlowDuplicate = React.useCallback(async () => {
    await duplicateFlow({
      variables: { input: { id: flowId } },
    });
-
    enqueueSnackbar(formatMessage('flow.successfullyDuplicated'), {
      variant: 'success',
      SnackbarProps: {
-        'data-test': 'snackbar-duplicate-flow-success'
-      }
+        'data-test': 'snackbar-duplicate-flow-success',
+      },
    });
-
    onClose();
  }, [flowId, onClose, duplicateFlow]);
-
  const onFlowDelete = React.useCallback(async () => {
    await deleteFlow({
      variables: { input: { id: flowId } },
@@ -52,20 +37,16 @@ export default function ContextMenu(
          __typename: 'Flow',
          id: flowId,
        });
-
        cache.evict({
          id: flowCacheId,
        });
      },
    });
-
    enqueueSnackbar(formatMessage('flow.successfullyDeleted'), {
      variant: 'success',
    });
-
    onClose();
  }, [flowId, onClose, deleteFlow]);
-
  return (
    <Menu
      open={true}
--- a/packages/web/src/components/FlowRow/index.jsx
+++ b/packages/web/src/components/FlowRow/index.jsx
@@ -6,71 +6,46 @@ import CardActionArea from '@mui/material/CardActionArea';
 import Chip from '@mui/material/Chip';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import { DateTime } from 'luxon';
-
-import type { IFlow } from 'types';
 import FlowAppIcons from 'components/FlowAppIcons';
 import FlowContextMenu from 'components/FlowContextMenu';
 import useFormatMessage from 'hooks/useFormatMessage';
 import * as URLS from 'config/urls';
 import { Apps, CardContent, ContextMenu, Title, Typography } from './style';
-
-type FlowRowProps = {
-  flow: IFlow;
-};
-
-function getFlowStatusTranslationKey(status: IFlow['status']): string {
+function getFlowStatusTranslationKey(status) {
  if (status === 'published') {
    return 'flow.published';
  } else if (status === 'paused') {
    return 'flow.paused';
  }
-
  return 'flow.draft';
 }
-
-function getFlowStatusColor(
-  status: IFlow['status']
-):
-  | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'error'
-  | 'info'
-  | 'success'
-  | 'warning' {
+function getFlowStatusColor(status) {
  if (status === 'published') {
    return 'success';
  } else if (status === 'paused') {
    return 'error';
  }
-
  return 'info';
 }
-
-export default function FlowRow(props: FlowRowProps): React.ReactElement {
+export default function FlowRow(props) {
  const formatMessage = useFormatMessage();
-  const contextButtonRef = React.useRef<HTMLButtonElement | null>(null);
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
-    null
-  );
+  const contextButtonRef = React.useRef(null);
+  const [anchorEl, setAnchorEl] = React.useState(null);
  const { flow } = props;
-
  const handleClose = () => {
    setAnchorEl(null);
  };
-  const onContextMenuClick = (event: React.MouseEvent) => {
+  const onContextMenuClick = (event) => {
    event.preventDefault();
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
    setAnchorEl(contextButtonRef.current);
  };
-
-  const createdAt = DateTime.fromMillis(parseInt(flow.createdAt as string, 10));
-  const updatedAt = DateTime.fromMillis(parseInt(flow.updatedAt as string, 10));
+  const createdAt = DateTime.fromMillis(parseInt(flow.createdAt, 10));
+  const updatedAt = DateTime.fromMillis(parseInt(flow.updatedAt, 10));
  const isUpdated = updatedAt > createdAt;
  const relativeCreatedAt = createdAt.toRelative();
  const relativeUpdatedAt = updatedAt.toRelative();
-
  return (
    <>
      <Card sx={{ mb: 1 }} data-test="flow-row">
--- a/packages/web/src/components/FlowRow/style.js
+++ b/packages/web/src/components/FlowRow/style.js
@@ -3,7 +3,6 @@ import MuiStack from '@mui/material/Stack';
 import MuiBox from '@mui/material/Box';
 import MuiCardContent from '@mui/material/CardContent';
 import MuiTypography from '@mui/material/Typography';
-
 export const CardContent = styled(MuiCardContent)(({ theme }) => ({
  display: 'grid',
  gridTemplateRows: 'auto',
@@ -22,14 +21,12 @@ export const CardContent = styled(MuiCardContent)(({ theme }) => ({
    gridTemplateRows: 'auto auto',
  },
 }));
-
 export const Apps = styled(MuiStack)(() => ({
  gridArea: 'apps',
 }));
 export const Title = styled(MuiStack)(() => ({
  gridArea: 'title',
 }));
-
 export const ContextMenu = styled(MuiBox)(({ theme }) => ({
  flexDirection: 'row',
  display: 'flex',
@@ -42,7 +39,6 @@ export const Typography = styled(MuiTypography)(() => ({
  width: '100%',
  maxWidth: '85%',
 }));
-
 export const DesktopOnlyBreakline = styled('br')(({ theme }) => ({
  [theme.breakpoints.down('sm')]: {
    display: 'none',
--- a/packages/web/src/components/FlowStep/index.jsx
+++ b/packages/web/src/components/FlowStep/index.jsx
@@ -13,9 +13,6 @@ import CircularProgress from '@mui/material/CircularProgress';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
-import type { BaseSchema } from 'yup';
-import type { IApp, ITrigger, IAction, IStep, ISubstep } from 'types';
-
 import { EditorContext } from 'contexts/Editor';
 import { StepExecutionsProvider } from 'contexts/StepExecutions';
 import TestSubstep from 'components/TestSubstep';
@@ -36,35 +33,19 @@ import {
  Wrapper,
 } from './style';
 import isEmpty from 'helpers/isEmpty';
-
-type FlowStepProps = {
-  collapsed?: boolean;
-  step: IStep;
-  index?: number;
-  onOpen?: () => void;
-  onClose?: () => void;
-  onChange: (step: IStep) => void;
-  onContinue?: () => void;
-};
-
 const validIcon = <CheckCircleIcon color="success" />;
 const errorIcon = <ErrorIcon color="error" />;
-
-function generateValidationSchema(substeps: ISubstep[]) {
+function generateValidationSchema(substeps) {
  const fieldValidations = substeps?.reduce(
    (allValidations, { arguments: args }) => {
      if (!args || !Array.isArray(args)) return allValidations;
-
-      const substepArgumentValidations: Record<string, BaseSchema> = {};
-
+      const substepArgumentValidations = {};
      for (const arg of args) {
        const { key, required } = arg;
-
        // base validation for the field if not exists
        if (!substepArgumentValidations[key]) {
          substepArgumentValidations[key] = yup.mixed();
        }
-
        if (
          typeof substepArgumentValidations[key] === 'object' &&
          (arg.type === 'string' || arg.type === 'dropdown')
@@ -76,21 +57,19 @@ function generateValidationSchema(substeps: ISubstep[]) {
              .test(
                'empty-check',
                `${key} must be not empty`,
-                (value: any) => !isEmpty(value)
+                (value) => !isEmpty(value),
              );
          }
-
          // if the field depends on another field, add the dependsOn required validation
          if (Array.isArray(arg.dependsOn) && arg.dependsOn.length > 0) {
            for (const dependsOnKey of arg.dependsOn) {
              const missingDependencyValueMessage = `We're having trouble loading '${key}' data as required field '${dependsOnKey}' is missing.`;
-
              // TODO: make `dependsOnKey` agnostic to the field. However, nested validation schema is not supported.
              // So the fields under the `parameters` key are subject to their siblings only and thus, `parameters.` is removed.
              substepArgumentValidations[key] = substepArgumentValidations[
                key
              ].when(`${dependsOnKey.replace('parameters.', '')}`, {
-                is: (value: string) => Boolean(value) === false,
+                is: (value) => Boolean(value) === false,
                then: (schema) =>
                  schema
                    .notOneOf([''], missingDependencyValueMessage)
@@ -100,37 +79,28 @@ function generateValidationSchema(substeps: ISubstep[]) {
          }
        }
      }
-
      return {
        ...allValidations,
        ...substepArgumentValidations,
      };
    },
-    {}
+    {},
  );
-
  const validationSchema = yup.object({
    parameters: yup.object(fieldValidations),
  });
-
  return yupResolver(validationSchema);
 }
-
-export default function FlowStep(
-  props: FlowStepProps
-): React.ReactElement | null {
+export default function FlowStep(props) {
  const { collapsed, onChange, onContinue } = props;
  const editorContext = React.useContext(EditorContext);
-  const contextButtonRef = React.useRef<HTMLButtonElement | null>(null);
-  const step: IStep = props.step;
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
-    null
-  );
+  const contextButtonRef = React.useRef(null);
+  const step = props.step;
+  const [anchorEl, setAnchorEl] = React.useState(null);
  const isTrigger = step.type === 'trigger';
  const isAction = step.type === 'action';
  const formatMessage = useFormatMessage();
-  const [currentSubstep, setCurrentSubstep] = React.useState<number | null>(0);
-
+  const [currentSubstep, setCurrentSubstep] = React.useState(0);
  const { apps } = useApps({
    onlyWithTriggers: isTrigger,
    onlyWithActions: isAction,
@@ -141,7 +111,6 @@ export default function FlowStep(
  ] = useLazyQuery(GET_STEP_WITH_TEST_EXECUTIONS, {
    fetchPolicy: 'network-only',
  });
-
  React.useEffect(() => {
    if (!stepWithTestExecutionsCalled && !collapsed && !isTrigger) {
      getStepWithTestExecutions({
@@ -157,33 +126,25 @@ export default function FlowStep(
    step.id,
    isTrigger,
  ]);
-
-  const app = apps?.find((currentApp: IApp) => currentApp.key === step.appKey);
-
-  const actionsOrTriggers: Array<ITrigger | IAction> =
-    (isTrigger ? app?.triggers : app?.actions) || [];
+  const app = apps?.find((currentApp) => currentApp.key === step.appKey);
+  const actionsOrTriggers = (isTrigger ? app?.triggers : app?.actions) || [];
  const actionOrTrigger = actionsOrTriggers?.find(
-    ({ key }) => key === step.key
+    ({ key }) => key === step.key,
  );
  const substeps = actionOrTrigger?.substeps || [];
-
-  const handleChange = React.useCallback(({ step }: { step: IStep }) => {
+  const handleChange = React.useCallback(({ step }) => {
    onChange(step);
  }, []);
-
  const expandNextStep = React.useCallback(() => {
    setCurrentSubstep((currentSubstep) => (currentSubstep ?? 0) + 1);
  }, []);
-
-  const handleSubmit = (val: any) => {
-    handleChange({ step: val as IStep });
+  const handleSubmit = (val) => {
+    handleChange({ step: val });
  };
-
  const stepValidationSchema = React.useMemo(
    () => generateValidationSchema(substeps),
-    [substeps]
+    [substeps],
  );
-
  if (!apps) {
    return (
      <CircularProgress
@@ -192,26 +153,22 @@ export default function FlowStep(
      />
    );
  }
-
-  const onContextMenuClose = (event: React.SyntheticEvent) => {
+  const onContextMenuClose = (event) => {
    event.stopPropagation();
    setAnchorEl(null);
  };
-  const onContextMenuClick = (event: React.SyntheticEvent) => {
+  const onContextMenuClick = (event) => {
    event.stopPropagation();
    setAnchorEl(contextButtonRef.current);
  };
  const onOpen = () => collapsed && props.onOpen?.();
  const onClose = () => props.onClose?.();
-
-  const toggleSubstep = (substepIndex: number) =>
+  const toggleSubstep = (substepIndex) =>
    setCurrentSubstep((value) =>
-      value !== substepIndex ? substepIndex : null
+      value !== substepIndex ? substepIndex : null,
    );
-
  const validationStatusIcon =
    step.status === 'completed' ? validIcon : errorIcon;
-
  return (
    <Wrapper
      elevation={collapsed ? 1 : 4}
@@ -259,9 +216,7 @@ export default function FlowStep(
        <Content>
          <List>
            <StepExecutionsProvider
-              value={
-                stepWithTestExecutionsData?.getStepWithTestExecutions as IStep[]
-              }
+              value={stepWithTestExecutionsData?.getStepWithTestExecutions}
            >
              <Form
                defaultValues={step}
@@ -284,7 +239,7 @@ export default function FlowStep(

                {actionOrTrigger &&
                  substeps?.length > 0 &&
-                  substeps.map((substep: ISubstep, index: number) => (
+                  substeps.map((substep, index) => (
                    <React.Fragment key={`${substep?.name}-${index}`}>
                      {substep.key === 'chooseConnection' && app && (
                        <ChooseConnectionSubstep
@@ -319,7 +274,7 @@ export default function FlowStep(

                      {substep.key &&
                        ['chooseConnection', 'testStep'].includes(
-                          substep.key
+                          substep.key,
                        ) === false && (
                          <FlowSubstep
                            expanded={currentSubstep === index + 1}
--- a/packages/web/src/components/FlowStep/style.js
+++ b/packages/web/src/components/FlowStep/style.js
@@ -1,10 +1,8 @@
 import { styled, alpha } from '@mui/material/styles';
 import Card from '@mui/material/Card';
-
 export const AppIconWrapper = styled('div')`
  position: relative;
 `;
-
 export const AppIconStatusIconWrapper = styled('span')`
  position: absolute;
  right: 0;
@@ -19,23 +17,16 @@ export const AppIconStatusIconWrapper = styled('span')`
    overflow: hidden;
  }
 `;
-
 export const Wrapper = styled(Card)`
  width: 100%;
  overflow: unset;
 `;
-
-type HeaderProps = {
-  collapsed?: boolean;
-};
-
 export const Header = styled('div', {
  shouldForwardProp: (prop) => prop !== 'collapsed',
-})<HeaderProps>`
+})`
  padding: ${({ theme }) => theme.spacing(2)};
  cursor: ${({ collapsed }) => (collapsed ? 'pointer' : 'unset')};
 `;
-
 export const Content = styled('div')`
  border: 1px solid ${({ theme }) => alpha(theme.palette.divider, 0.8)};
  border-left: none;
--- a/packages/web/src/components/FlowStepContextMenu/index.jsx
+++ b/packages/web/src/components/FlowStepContextMenu/index.jsx
@@ -2,35 +2,21 @@ import * as React from 'react';
 import { useMutation } from '@apollo/client';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
-import type { PopoverProps } from '@mui/material/Popover';
-
 import { DELETE_STEP } from 'graphql/mutations/delete-step';
 import useFormatMessage from 'hooks/useFormatMessage';
-
-type FlowStepContextMenuProps = {
-  stepId: string;
-  onClose: PopoverProps['onClose'];
-  anchorEl: HTMLButtonElement;
-  deletable: boolean;
-};
-
-function FlowStepContextMenu(
-  props: FlowStepContextMenuProps
-): React.ReactElement {
+function FlowStepContextMenu(props) {
  const { stepId, onClose, anchorEl, deletable } = props;
  const [deleteStep] = useMutation(DELETE_STEP, {
    refetchQueries: ['GetFlow', 'GetStepWithTestExecutions'],
  });
  const formatMessage = useFormatMessage();
-
  const deleteActionHandler = React.useCallback(
-    async (event: React.SyntheticEvent) => {
+    async (event) => {
      event.stopPropagation();
      await deleteStep({ variables: { input: { id: stepId } } });
    },
-    [stepId]
+    [stepId],
  );
-
  return (
    <Menu
      open={true}
@@ -46,5 +32,4 @@ function FlowStepContextMenu(
    </Menu>
  );
 }
-
 export default FlowStepContextMenu;
--- a/packages/web/src/components/FlowSubstep/FilterConditions/index.jsx
+++ b/packages/web/src/components/FlowSubstep/FilterConditions/index.jsx
@@ -8,32 +8,18 @@ import Divider from '@mui/material/Divider';
 import IconButton from '@mui/material/IconButton';
 import RemoveIcon from '@mui/icons-material/Remove';
 import AddIcon from '@mui/icons-material/Add';
-import type { IField, IFieldText, IFieldDropdown } from 'types';
-
 import useFormatMessage from 'hooks/useFormatMessage';
 import InputCreator from 'components/InputCreator';
 import { EditorContext } from 'contexts/Editor';
-
-type TGroupItem = {
-  key: string;
-  operator: string;
-  value: string;
-  id: string;
-};
-
-type TGroup = Record<'and', TGroupItem[]>;
-
-const createGroupItem = (): TGroupItem => ({
+const createGroupItem = () => ({
  key: '',
  operator: operators[0].value,
  value: '',
  id: uuidv4(),
 });
-
-const createGroup = (): TGroup => ({
+const createGroup = () => ({
  and: [createGroupItem()],
 });
-
 const operators = [
  {
    label: 'Equal',
@@ -68,10 +54,7 @@ const operators = [
    value: 'not_contains',
  },
 ];
-
-const createStringArgument = (
-  argumentOptions: Omit<IFieldText, 'type' | 'required' | 'variables'>
-): IField => {
+const createStringArgument = (argumentOptions) => {
  return {
    ...argumentOptions,
    type: 'string',
@@ -79,69 +62,52 @@ const createStringArgument = (
    variables: true,
  };
 };
-
-const createDropdownArgument = (
-  argumentOptions: Omit<IFieldDropdown, 'type' | 'required'>
-): IField => {
+const createDropdownArgument = (argumentOptions) => {
  return {
    ...argumentOptions,
    required: true,
    type: 'dropdown',
  };
 };
-
-type FilterConditionsProps = {
-  stepId: string;
-};
-
-function FilterConditions(props: FilterConditionsProps): React.ReactElement {
+function FilterConditions(props) {
  const { stepId } = props;
  const formatMessage = useFormatMessage();
  const { control, setValue, getValues } = useFormContext();
  const groups = useWatch({ control, name: 'parameters.or' });
  const editorContext = React.useContext(EditorContext);
-
  React.useEffect(function addInitialGroupWhenEmpty() {
    const groups = getValues('parameters.or');
-
    if (!groups) {
      setValue('parameters.or', [createGroup()]);
    }
  }, []);
-
  const appendGroup = React.useCallback(() => {
    const values = getValues('parameters.or');
-
    setValue('parameters.or', values.concat(createGroup()));
  }, []);
-
  const appendGroupItem = React.useCallback((index) => {
    const group = getValues(`parameters.or.${index}.and`);
    setValue(`parameters.or.${index}.and`, group.concat(createGroupItem()));
  }, []);
-
  const removeGroupItem = React.useCallback((groupIndex, groupItemIndex) => {
-    const group: TGroupItem[] = getValues(`parameters.or.${groupIndex}.and`);
-
+    const group = getValues(`parameters.or.${groupIndex}.and`);
    if (group.length === 1) {
-      const groups: TGroup[] = getValues('parameters.or');
-
+      const groups = getValues('parameters.or');
      setValue(
        'parameters.or',
-        groups.filter((group, index) => index !== groupIndex)
+        groups.filter((group, index) => index !== groupIndex),
      );
    } else {
      setValue(
        `parameters.or.${groupIndex}.and`,
-        group.filter((groupItem, index) => index !== groupItemIndex)
+        group.filter((groupItem, index) => index !== groupItemIndex),
      );
    }
  }, []);
-
  return (
    <React.Fragment>
      <Stack sx={{ width: '100%' }} direction="column" spacing={2} mt={2}>
-        {groups?.map((group: TGroup, groupIndex: number) => (
+        {groups?.map((group, groupIndex) => (
          <>
            {groupIndex !== 0 && <Divider />}

@@ -152,81 +118,79 @@ function FilterConditions(props: FilterConditionsProps): React.ReactElement {
                formatMessage('filterConditions.orContinueIf')}
            </Typography>

-            {group?.and?.map(
-              (groupItem: TGroupItem, groupItemIndex: number) => (
-                <Stack direction="row" spacing={2} key={`item-${groupItem.id}`}>
-                  <Stack
-                    direction={{ xs: 'column', sm: 'row' }}
-                    spacing={{ xs: 2 }}
-                    sx={{ display: 'flex', flex: 1 }}
+            {group?.and?.map((groupItem, groupItemIndex) => (
+              <Stack direction="row" spacing={2} key={`item-${groupItem.id}`}>
+                <Stack
+                  direction={{ xs: 'column', sm: 'row' }}
+                  spacing={{ xs: 2 }}
+                  sx={{ display: 'flex', flex: 1 }}
+                >
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      flex: '1 0 0px',
+                      maxWidth: ['100%', '33%'],
+                    }}
                  >
-                    <Box
-                      sx={{
-                        display: 'flex',
-                        flex: '1 0 0px',
-                        maxWidth: ['100%', '33%'],
-                      }}
-                    >
-                      <InputCreator
-                        schema={createStringArgument({
-                          key: `or.${groupIndex}.and.${groupItemIndex}.key`,
-                          label: 'Choose field',
-                        })}
-                        namePrefix="parameters"
-                        stepId={stepId}
-                        disabled={editorContext.readOnly}
-                      />
-                    </Box>
+                    <InputCreator
+                      schema={createStringArgument({
+                        key: `or.${groupIndex}.and.${groupItemIndex}.key`,
+                        label: 'Choose field',
+                      })}
+                      namePrefix="parameters"
+                      stepId={stepId}
+                      disabled={editorContext.readOnly}
+                    />
+                  </Box>

-                    <Box
-                      sx={{
-                        display: 'flex',
-                        flex: '1 0 0px',
-                        maxWidth: ['100%', '33%'],
-                      }}
-                    >
-                      <InputCreator
-                        schema={createDropdownArgument({
-                          key: `or.${groupIndex}.and.${groupItemIndex}.operator`,
-                          options: operators,
-                          label: 'Choose condition',
-                        })}
-                        namePrefix="parameters"
-                        stepId={stepId}
-                        disabled={editorContext.readOnly}
-                      />
-                    </Box>
-
-                    <Box
-                      sx={{
-                        display: 'flex',
-                        flex: '1 0 0px',
-                        maxWidth: ['100%', '33%'],
-                      }}
-                    >
-                      <InputCreator
-                        schema={createStringArgument({
-                          key: `or.${groupIndex}.and.${groupItemIndex}.value`,
-                          label: 'Enter text',
-                        })}
-                        namePrefix="parameters"
-                        stepId={stepId}
-                        disabled={editorContext.readOnly}
-                      />
-                    </Box>
-                  </Stack>
-
-                  <IconButton
-                    size="small"
-                    edge="start"
-                    onClick={() => removeGroupItem(groupIndex, groupItemIndex)}
-                    sx={{ width: 61, height: 61 }}
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      flex: '1 0 0px',
+                      maxWidth: ['100%', '33%'],
+                    }}
                  >
-                    <RemoveIcon />
-                  </IconButton>
+                    <InputCreator
+                      schema={createDropdownArgument({
+                        key: `or.${groupIndex}.and.${groupItemIndex}.operator`,
+                        options: operators,
+                        label: 'Choose condition',
+                      })}
+                      namePrefix="parameters"
+                      stepId={stepId}
+                      disabled={editorContext.readOnly}
+                    />
+                  </Box>
+
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      flex: '1 0 0px',
+                      maxWidth: ['100%', '33%'],
+                    }}
+                  >
+                    <InputCreator
+                      schema={createStringArgument({
+                        key: `or.${groupIndex}.and.${groupItemIndex}.value`,
+                        label: 'Enter text',
+                      })}
+                      namePrefix="parameters"
+                      stepId={stepId}
+                      disabled={editorContext.readOnly}
+                    />
+                  </Box>
                </Stack>
-              )
-            )}
+
+                <IconButton
+                  size="small"
+                  edge="start"
+                  onClick={() => removeGroupItem(groupIndex, groupItemIndex)}
+                  sx={{ width: 61, height: 61 }}
+                >
+                  <RemoveIcon />
+                </IconButton>
+              </Stack>
+            ))}

            <Stack spacing={1} direction="row">
              <IconButton
@@ -255,5 +219,4 @@ function FilterConditions(props: FilterConditionsProps): React.ReactElement {
    </React.Fragment>
  );
 }
-
 export default FilterConditions;
--- a/packages/web/src/components/FlowSubstep/index.jsx
+++ b/packages/web/src/components/FlowSubstep/index.jsx
@@ -4,24 +4,11 @@ import Collapse from '@mui/material/Collapse';
 import ListItem from '@mui/material/ListItem';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
-import type { IStep, ISubstep } from 'types';
-
 import { EditorContext } from 'contexts/Editor';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
 import InputCreator from 'components/InputCreator';
 import FilterConditions from './FilterConditions';
-
-type FlowSubstepProps = {
-  substep: ISubstep;
-  expanded?: boolean;
-  onExpand: () => void;
-  onCollapse: () => void;
-  onChange: ({ step }: { step: IStep }) => void;
-  onSubmit: () => void;
-  step: IStep;
-};
-
-function FlowSubstep(props: FlowSubstepProps): React.ReactElement {
+function FlowSubstep(props) {
  const {
    substep,
    expanded = false,
@@ -30,15 +17,11 @@ function FlowSubstep(props: FlowSubstepProps): React.ReactElement {
    onSubmit,
    step,
  } = props;
-
  const { name, arguments: args } = substep;
-
  const editorContext = React.useContext(EditorContext);
  const formContext = useFormContext();
  const validationStatus = formContext.formState.isValid;
-
  const onToggle = expanded ? onCollapse : onExpand;
-
  return (
    <React.Fragment>
      <FlowSubstepTitle
@@ -90,5 +73,4 @@ function FlowSubstep(props: FlowSubstepProps): React.ReactElement {
    </React.Fragment>
  );
 }
-
 export default FlowSubstep;
--- a/packages/web/src/components/FlowSubstepTitle/index.jsx
+++ b/packages/web/src/components/FlowSubstepTitle/index.jsx
@@ -3,25 +3,13 @@ import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ErrorIcon from '@mui/icons-material/Error';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-
 import { ListItemButton, Typography } from './style';
-
-type FlowSubstepTitleProps = {
-  expanded?: boolean;
-  onClick: () => void;
-  title: string;
-  valid?: boolean | null;
-};
-
 const validIcon = <CheckCircleIcon color="success" />;
 const errorIcon = <ErrorIcon color="error" />;
-
-function FlowSubstepTitle(props: FlowSubstepTitleProps): React.ReactElement {
+function FlowSubstepTitle(props) {
  const { expanded = false, onClick = () => null, valid = null, title } = props;
-
  const hasValidation = valid !== null;
  const validationStatusIcon = valid ? validIcon : errorIcon;
-
  return (
    <ListItemButton onClick={onClick} selected={expanded} divider>
      <Typography variant="body2">
@@ -33,5 +21,4 @@ function FlowSubstepTitle(props: FlowSubstepTitleProps): React.ReactElement {
    </ListItemButton>
  );
 }
-
 export default FlowSubstepTitle;
--- a/packages/web/src/components/FlowSubstepTitle/style.jsx
+++ b/packages/web/src/components/FlowSubstepTitle/style.jsx
@@ -1,11 +1,9 @@
 import { styled } from '@mui/material/styles';
 import MuiListItemButton from '@mui/material/ListItemButton';
 import MuiTypography from '@mui/material/Typography';
-
 export const ListItemButton = styled(MuiListItemButton)`
  justify-content: space-between;
 `;
-
 export const Typography = styled(MuiTypography)`
  display: flex;
  align-items: center;
--- a/packages/web/src/components/ForgotPasswordForm/index.ee.jsx
+++ b/packages/web/src/components/ForgotPasswordForm/index.ee.jsx
@@ -3,24 +3,20 @@ import { useMutation } from '@apollo/client';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import LoadingButton from '@mui/lab/LoadingButton';
-
 import { FORGOT_PASSWORD } from 'graphql/mutations/forgot-password.ee';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
-
 export default function ForgotPasswordForm() {
  const formatMessage = useFormatMessage();
  const [forgotPassword, { data, loading }] = useMutation(FORGOT_PASSWORD);
-
-  const handleSubmit = async (values: any) => {
+  const handleSubmit = async (values) => {
    await forgotPassword({
      variables: {
        input: values,
      },
    });
  };
-
  return (
    <Paper sx={{ px: 2, py: 4 }}>
      <Typography
@@ -59,9 +55,14 @@ export default function ForgotPasswordForm() {
          {formatMessage('forgotPasswordForm.submit')}
        </LoadingButton>

-        {data && <Typography variant="body1" sx={{ color: (theme) => theme.palette.success.main }}>
-          {formatMessage('forgotPasswordForm.instructionsSent')}
-        </Typography>}
+        {data && (
+          <Typography
+            variant="body1"
+            sx={{ color: (theme) => theme.palette.success.main }}
+          >
+            {formatMessage('forgotPasswordForm.instructionsSent')}
+          </Typography>
+        )}
      </Form>
    </Paper>
  );
--- a/packages/web/src/components/Form/index.jsx
+++ b/packages/web/src/components/Form/index.jsx
@@ -1,26 +1,7 @@
 import * as React from 'react';
-import {
-  FormProvider,
-  useForm,
-  useWatch,
-  FieldValues,
-  SubmitHandler,
-  UseFormReturn,
-} from 'react-hook-form';
-import type { UseFormProps } from 'react-hook-form';
-
-type FormProps = {
-  children?: React.ReactNode;
-  defaultValues?: UseFormProps['defaultValues'];
-  onSubmit?: SubmitHandler<FieldValues>;
-  render?: (props: UseFormReturn) => React.ReactNode;
-  resolver?: UseFormProps['resolver'];
-  mode?: UseFormProps['mode'];
-};
-
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
 const noop = () => null;
-
-export default function Form(props: FormProps): React.ReactElement {
+export default function Form(props) {
  const {
    children,
    onSubmit = noop,
@@ -30,27 +11,22 @@ export default function Form(props: FormProps): React.ReactElement {
    mode = 'all',
    ...formProps
  } = props;
-
-  const methods: UseFormReturn = useForm({
+  const methods = useForm({
    defaultValues,
    reValidateMode: 'onBlur',
    resolver,
    mode,
  });
-
  const form = useWatch({ control: methods.control });
-
  /**
   * For fields having `dependsOn` fields, we need to re-validate the form.
   */
  React.useEffect(() => {
    methods.trigger();
  }, [methods.trigger, form]);
-
  React.useEffect(() => {
    methods.reset(defaultValues);
  }, [defaultValues]);
-
  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)} {...formProps}>
--- a/packages/web/src/components/HideOnScroll/index.jsx
+++ b/packages/web/src/components/HideOnScroll/index.jsx
@@ -1,9 +1,7 @@
 import * as React from 'react';
-import Slide, { SlideProps } from '@mui/material/Slide';
+import Slide from '@mui/material/Slide';
 import useScrollTrigger from '@mui/material/useScrollTrigger';
-
-export default function HideOnScroll(props: SlideProps): React.ReactElement {
+export default function HideOnScroll(props) {
  const trigger = useScrollTrigger();
-
  return <Slide appear={false} direction="down" in={!trigger} {...props} />;
 }
--- a/packages/web/src/components/InputCreator/index.jsx
+++ b/packages/web/src/components/InputCreator/index.jsx
@@ -1,8 +1,6 @@
 import * as React from 'react';
 import MuiTextField from '@mui/material/TextField';
 import CircularProgress from '@mui/material/CircularProgress';
-import type { IField, IFieldDropdownOption } from 'types';
-
 import useDynamicFields from 'hooks/useDynamicFields';
 import useDynamicData from 'hooks/useDynamicData';
 import PowerInput from 'components/PowerInput';
@@ -10,29 +8,9 @@ import TextField from 'components/TextField';
 import ControlledAutocomplete from 'components/ControlledAutocomplete';
 import ControlledCustomAutocomplete from 'components/ControlledCustomAutocomplete';
 import DynamicField from 'components/DynamicField';
-
-type InputCreatorProps = {
-  onChange?: React.ChangeEventHandler;
-  onBlur?: React.FocusEventHandler;
-  schema: IField;
-  namePrefix?: string;
-  stepId?: string;
-  disabled?: boolean;
-  showOptionValue?: boolean;
-  shouldUnregister?: boolean;
-};
-
-type RawOption = {
-  name: string;
-  value: string;
-};
-
-const optionGenerator = (options: RawOption[]): IFieldDropdownOption[] =>
-  options?.map(({ name, value }) => ({ label: name as string, value: value }));
-
-export default function InputCreator(
-  props: InputCreatorProps
-): React.ReactElement {
+const optionGenerator = (options) =>
+  options?.map(({ name, value }) => ({ label: name, value: value }));
+export default function InputCreator(props) {
  const {
    onChange,
    onBlur,
@@ -43,7 +21,6 @@ export default function InputCreator(
    showOptionValue,
    shouldUnregister,
  } = props;
-
  const {
    key: name,
    label,
@@ -53,13 +30,10 @@ export default function InputCreator(
    description,
    type,
  } = schema;
-
  const { data, loading } = useDynamicData(stepId, schema);
-
  const { data: additionalFields, loading: additionalFieldsLoading } =
    useDynamicFields(stepId, schema);
  const computedName = namePrefix ? `${namePrefix}.${name}` : name;
-
  if (type === 'dynamic') {
    return (
      <DynamicField
@@ -76,10 +50,8 @@ export default function InputCreator(
      />
    );
  }
-
  if (type === 'dropdown') {
    const preparedOptions = schema.options || optionGenerator(data);
-
    return (
      <React.Fragment>
        {!schema.variables && (
@@ -92,7 +64,7 @@ export default function InputCreator(
            disableClearable={required}
            options={preparedOptions}
            renderInput={(params) => <MuiTextField {...params} label={label} />}
-            defaultValue={value as string}
+            defaultValue={value}
            description={description}
            loading={loading}
            disabled={disabled}
@@ -112,7 +84,7 @@ export default function InputCreator(
            disableClearable={required}
            options={preparedOptions}
            renderInput={(params) => <MuiTextField {...params} label={label} />}
-            defaultValue={value as string}
+            defaultValue={value}
            description={description}
            loading={loading}
            disabled={disabled}
@@ -141,7 +113,6 @@ export default function InputCreator(
      </React.Fragment>
    );
  }
-
  if (type === 'string') {
    if (schema.variables) {
      return (
@@ -178,7 +149,6 @@ export default function InputCreator(
        </React.Fragment>
      );
    }
-
    return (
      <React.Fragment>
        <TextField
@@ -218,6 +188,5 @@ export default function InputCreator(
      </React.Fragment>
    );
  }
-
  return <React.Fragment />;
 }
--- a/packages/web/src/components/IntermediateStepCount/index.jsx
+++ b/packages/web/src/components/IntermediateStepCount/index.jsx
@@ -1,17 +1,8 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
-
 import { Container } from './style';
-
-type IntermediateStepCountProps = {
-  count: number;
-};
-
-export default function IntermediateStepCount(
-  props: IntermediateStepCountProps
-) {
+export default function IntermediateStepCount(props) {
  const { count } = props;
-
  return (
    <Container>
      <Typography variant="subtitle1" sx={{}}>
--- a/packages/web/src/components/IntermediateStepCount/style.js
+++ b/packages/web/src/components/IntermediateStepCount/style.js
@@ -1,5 +1,4 @@
 import { styled } from '@mui/material/styles';
-
 export const Container = styled('div')(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
--- a/packages/web/src/components/IntlProvider/index.jsx
+++ b/packages/web/src/components/IntlProvider/index.jsx
@@ -1,11 +1,6 @@
 import { IntlProvider as BaseIntlProvider } from 'react-intl';
 import englishMessages from 'locales/en.json';
-
-type IntlProviderProps = {
-  children: React.ReactNode;
-};
-
-const IntlProvider = ({ children }: IntlProviderProps): React.ReactElement => {
+const IntlProvider = ({ children }) => {
  return (
    <BaseIntlProvider
      locale={navigator.language}
@@ -16,5 +11,4 @@ const IntlProvider = ({ children }: IntlProviderProps): React.ReactElement => {
    </BaseIntlProvider>
  );
 };
-
 export default IntlProvider;
--- a/packages/web/src/components/Invoices/index.ee.jsx
+++ b/packages/web/src/components/Invoices/index.ee.jsx
@@ -7,16 +7,12 @@ import CardContent from '@mui/material/CardContent';
 import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
-
 import useInvoices from 'hooks/useInvoices.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
-
 export default function Invoices() {
  const formatMessage = useFormatMessage();
  const { invoices, loading } = useInvoices();
-
  if (loading || invoices.length === 0) return <React.Fragment />;
-
  return (
    <React.Fragment>
      <Card sx={{ mb: 3, p: 2 }}>
@@ -69,7 +65,9 @@ export default function Invoices() {
                    fontWeight="500"
                    sx={{ color: 'text.secondary' }}
                  >
-                    {DateTime.fromISO(invoice.payout_date).toFormat('LLL dd, yyyy')}
+                    {DateTime.fromISO(invoice.payout_date).toFormat(
+                      'LLL dd, yyyy',
+                    )}
                  </Typography>
                </Grid>

--- a/packages/web/src/components/JSONViewer/index.jsx
+++ b/packages/web/src/components/JSONViewer/index.jsx
@@ -1,11 +1,5 @@
 import * as React from 'react';
 import { JSONTree } from 'react-json-tree';
-import type { IJSONObject } from 'types';
-
-type JSONViewerProps = {
-  data: IJSONObject;
-};
-
 const theme = {
  scheme: 'inspector',
  author: 'Alexander Kuznetsov (alexkuz@gmail.com)',
@@ -36,16 +30,14 @@ const theme = {
  // base0C - Support, Regular Expressions, Escape Characters, Markup Quotes
  base0C: '#86c1b9',
  // base0D - Functions, Methods, Attribute IDs, Headings
-  base0D: '#d73a49', // key
+  base0D: '#d73a49',
  // base0E - Keywords, Storage, Selector, Markup Italic, Diff Changed
  base0E: '#EC31C0',
  // base0F - Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?>
  base0F: '#a16946',
 };
-
-function JSONViewer(props: JSONViewerProps) {
+function JSONViewer(props) {
  const { data } = props;
-
  return (
    <JSONTree
      hideRoot
@@ -56,5 +48,4 @@ function JSONViewer(props: JSONViewerProps) {
    />
  );
 }
-
 export default JSONViewer;
--- a/packages/web/src/components/JSONViewer/style.jsx
+++ b/packages/web/src/components/JSONViewer/style.jsx
@@ -1,5 +1,4 @@
 import GlobalStyles from '@mui/material/GlobalStyles';
-
 export const jsonViewerStyles = (
  <GlobalStyles
    styles={(theme) => ({
@@ -16,17 +15,14 @@ export const jsonViewerStyles = (
          'var(--indentguide-size) var(--indentguide-style) var(--indentguide-color)',
        '--indentguide-active':
          'var(--indentguide-size) var(--indentguide-style) var(--indentguide-color-active)',
-
        /* Types colors */
        '--string-color': theme.palette.text.secondary,
        '--number-color': theme.palette.text.primary,
        '--boolean-color': theme.palette.text.primary,
        '--null-color': theme.palette.text.primary,
        '--property-color': theme.palette.text.primary,
-
        /* Collapsed node preview */
        '--preview-color': theme.palette.text.primary,
-
        /* Search highlight color */
        '--highlight-color': '#6fb3d2',
      },
--- a/packages/web/src/components/Layout/index.jsx
+++ b/packages/web/src/components/Layout/index.jsx
@@ -9,18 +9,12 @@ import SwapCallsIcon from '@mui/icons-material/SwapCalls';
 import HistoryIcon from '@mui/icons-material/History';
 import NotificationsIcon from '@mui/icons-material/Notifications';
 import ArrowBackIosNew from '@mui/icons-material/ArrowBackIosNew';
-
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useVersion from 'hooks/useVersion';
 import AppBar from 'components/AppBar';
 import Drawer from 'components/Drawer';
 import useConfig from 'hooks/useConfig';
-
-type PublicLayoutProps = {
-  children: React.ReactNode;
-};
-
 const drawerLinks = [
  {
    Icon: SwapCallsIcon,
@@ -41,64 +35,37 @@ const drawerLinks = [
    dataTest: 'executions-page-drawer-link',
  },
 ];
-
-type GenerateDrawerBottomLinksOptions = {
-  disableNotificationsPage: boolean;
-  notificationBadgeContent: number;
-  additionalDrawerLink?: string;
-  additionalDrawerLinkText?: string;
-  additionalDrawerLinkIcon?: string;
-  formatMessage: ReturnType<typeof useFormatMessage>;
-};
-
 const generateDrawerBottomLinks = async ({
  disableNotificationsPage,
  notificationBadgeContent = 0,
  additionalDrawerLink,
  additionalDrawerLinkText,
  formatMessage,
-}: GenerateDrawerBottomLinksOptions) => {
+}) => {
  const notificationsPageLinkObject = {
    Icon: NotificationsIcon,
    primary: formatMessage('settingsDrawer.notifications'),
    to: URLS.UPDATES,
    badgeContent: notificationBadgeContent,
  };
-
  const hasAdditionalDrawerLink =
    additionalDrawerLink && additionalDrawerLinkText;
-
  const additionalDrawerLinkObject = {
    Icon: ArrowBackIosNew,
    primary: additionalDrawerLinkText || '',
    to: additionalDrawerLink || '',
-    target: '_blank' as const,
+    target: '_blank',
  };
-
  const links = [];
-
  if (!disableNotificationsPage) {
    links.push(notificationsPageLinkObject);
  }
-
  if (hasAdditionalDrawerLink) {
    links.push(additionalDrawerLinkObject);
  }
-
  return links;
 };
-
-type Link = {
-  Icon: React.ElementType;
-  primary: string;
-  target?: '_blank';
-  to: string;
-  badgeContent?: React.ReactNode;
-};
-
-export default function PublicLayout({
-  children,
-}: PublicLayoutProps): React.ReactElement {
+export default function PublicLayout({ children }) {
  const version = useVersion();
  const { config, loading } = useConfig([
    'disableNotificationsPage',
@@ -107,31 +74,25 @@ export default function PublicLayout({
  ]);
  const theme = useTheme();
  const formatMessage = useFormatMessage();
-  const [bottomLinks, setBottomLinks] = React.useState<Link[]>([]);
+  const [bottomLinks, setBottomLinks] = React.useState([]);
  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'));
  const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
-
  const openDrawer = () => setDrawerOpen(true);
  const closeDrawer = () => setDrawerOpen(false);
-
  React.useEffect(() => {
    async function perform() {
      const newBottomLinks = await generateDrawerBottomLinks({
        notificationBadgeContent: version.newVersionCount,
-        disableNotificationsPage: config?.disableNotificationsPage as boolean,
-        additionalDrawerLink: config?.additionalDrawerLink as string,
-        additionalDrawerLinkText: config?.additionalDrawerLinkText as string,
+        disableNotificationsPage: config?.disableNotificationsPage,
+        additionalDrawerLink: config?.additionalDrawerLink,
+        additionalDrawerLinkText: config?.additionalDrawerLinkText,
        formatMessage,
      });
-
      setBottomLinks(newBottomLinks);
    }
-
    if (loading) return;
-
    perform();
  }, [config, loading, version.newVersionCount]);
-
  return (
    <>
      <AppBar
--- a/packages/web/src/components/ListItemLink/index.jsx
+++ b/packages/web/src/components/ListItemLink/index.jsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { useMatch } from 'react-router-dom';
+import ListItem from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { Link } from 'react-router-dom';
+export default function ListItemLink(props) {
+  const { icon, primary, to, onClick, 'data-test': dataTest, target } = props;
+  const selected = useMatch({ path: to, end: true });
+  const CustomLink = React.useMemo(
+    () =>
+      React.forwardRef(function InLineLink(linkProps, ref) {
+        try {
+          // challenge the link to check if it's absolute URL
+          new URL(to); // should throw an error if it's not an absolute URL
+          return (
+            <a
+              {...linkProps}
+              ref={ref}
+              href={to}
+              target={target}
+              rel="noopener noreferrer"
+            />
+          );
+        } catch {
+          return <Link ref={ref} {...linkProps} to={to} />;
+        }
+      }),
+    [to],
+  );
+  return (
+    <li>
+      <ListItem
+        component={CustomLink}
+        sx={{ pl: { xs: 2, sm: 3 } }}
+        selected={!!selected}
+        onClick={onClick}
+        data-test={dataTest}
+        target={target}
+      >
+        <ListItemIcon sx={{ minWidth: 52 }}>{icon}</ListItemIcon>
+        <ListItemText
+          primary={primary}
+          primaryTypographyProps={{ variant: 'body1' }}
+        />
+      </ListItem>
+    </li>
+  );
+}
--- a/packages/web/src/components/ListItemLink/index.tsx
+++ b/packages/web/src/components/ListItemLink/index.tsx
@@ -1,66 +0,0 @@
-import * as React from 'react';
-import { useMatch } from 'react-router-dom';
-import ListItem from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import { Link, LinkProps } from 'react-router-dom';
-
-type ListItemLinkProps = {
-  icon: React.ReactNode;
-  primary: string;
-  to: string;
-  target?: '_blank';
-  onClick?: (event: React.SyntheticEvent) => void;
-  'data-test'?: string;
-};
-
-export default function ListItemLink(
-  props: ListItemLinkProps
-): React.ReactElement {
-  const { icon, primary, to, onClick, 'data-test': dataTest, target } = props;
-  const selected = useMatch({ path: to, end: true });
-
-  const CustomLink = React.useMemo(
-    () =>
-      React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(
-        function InLineLink(linkProps, ref) {
-          try {
-            // challenge the link to check if it's absolute URL
-            new URL(to); // should throw an error if it's not an absolute URL
-
-            return (
-              <a
-                {...linkProps}
-                ref={ref}
-                href={to}
-                target={target}
-                rel="noopener noreferrer"
-              />
-            );
-          } catch {
-            return <Link ref={ref} {...linkProps} to={to} />;
-          }
-        }
-      ),
-    [to]
-  );
-
-  return (
-    <li>
-      <ListItem
-        component={CustomLink}
-        sx={{ pl: { xs: 2, sm: 3 } }}
-        selected={!!selected}
-        onClick={onClick}
-        data-test={dataTest}
-        target={target}
-      >
-        <ListItemIcon sx={{ minWidth: 52 }}>{icon}</ListItemIcon>
-        <ListItemText
-          primary={primary}
-          primaryTypographyProps={{ variant: 'body1' }}
-        />
-      </ListItem>
-    </li>
-  );
-}
--- a/packages/web/src/components/ListLoader/index.jsx
+++ b/packages/web/src/components/ListLoader/index.jsx
@@ -7,18 +7,7 @@ import {
 } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
-
-type ListLoaderProps = {
-  rowsNumber: number;
-  columnsNumber: number;
-  'data-test'?: string;
-};
-
-const ListLoader = ({
-  rowsNumber,
-  columnsNumber,
-  'data-test': dataTest,
-}: ListLoaderProps) => {
+const ListLoader = ({ rowsNumber, columnsNumber, 'data-test': dataTest }) => {
  return (
    <>
      {[...Array(rowsNumber)].map((row, index) => (
@@ -49,5 +38,4 @@ const ListLoader = ({
    </>
  );
 };
-
 export default ListLoader;
--- a/packages/web/src/components/LiveChat/Chatwoot.ee.jsx
+++ b/packages/web/src/components/LiveChat/Chatwoot.ee.jsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import appConfig from 'config/app';
+import useCurrentUser from 'hooks/useCurrentUser';
+const Chatwoot = ({ ready }) => {
+  const theme = useTheme();
+  const currentUser = useCurrentUser();
+  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'));
+  React.useEffect(function initiateChatwoot() {
+    window.chatwootSDK.run({
+      websiteToken: 'EFyq5MTsvS7XwUrwSH36VskT',
+      baseUrl: appConfig.chatwootBaseUrl,
+    });
+    return function removeChatwoot() {
+      window.$chatwoot.reset();
+      window.$chatwoot.toggleBubbleVisibility('hide');
+    };
+  }, []);
+  React.useEffect(
+    function initiateUser() {
+      if (!currentUser?.id || !ready) return;
+      window.$chatwoot.setUser(currentUser.id, {
+        email: currentUser.email,
+        name: currentUser.fullName,
+      });
+      if (!matchSmallScreens) {
+        window.$chatwoot.toggleBubbleVisibility('show');
+      }
+    },
+    [currentUser, ready, matchSmallScreens],
+  );
+  React.useLayoutEffect(
+    function hideChatwoot() {
+      if (matchSmallScreens) {
+        window.$chatwoot?.toggleBubbleVisibility('hide');
+      } else {
+        window.$chatwoot?.toggleBubbleVisibility('show');
+      }
+    },
+    [matchSmallScreens],
+  );
+  return <React.Fragment />;
+};
+export default Chatwoot;
--- a/packages/web/src/components/LiveChat/Chatwoot.ee.tsx
+++ b/packages/web/src/components/LiveChat/Chatwoot.ee.tsx
@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
-
-import appConfig from 'config/app';
-import useCurrentUser from 'hooks/useCurrentUser';
-
-type ChatwootProps = {
-  ready: boolean;
-}
-
-const Chatwoot = ({ ready }: ChatwootProps) => {
-  const theme = useTheme();
-  const currentUser = useCurrentUser();
-  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'));
-
-  React.useEffect(function initiateChatwoot() {
-    window.chatwootSDK.run({
-      websiteToken: 'EFyq5MTsvS7XwUrwSH36VskT',
-      baseUrl: appConfig.chatwootBaseUrl,
-    });
-
-    return function removeChatwoot() {
-      window.$chatwoot.reset();
-      window.$chatwoot.toggleBubbleVisibility('hide');
-    };
-  }, []);
-
-  React.useEffect(function initiateUser() {
-    if (!currentUser?.id || !ready) return;
-
-    window.$chatwoot.setUser(currentUser.id, {
-      email: currentUser.email,
-      name: currentUser.fullName,
-    });
-
-    if (!matchSmallScreens) {
-      window.$chatwoot.toggleBubbleVisibility("show");
-    }
-  }, [currentUser, ready, matchSmallScreens]);
-
-  React.useLayoutEffect(function hideChatwoot() {
-    if (matchSmallScreens) {
-      window.$chatwoot?.toggleBubbleVisibility('hide');
-    } else {
-      window.$chatwoot?.toggleBubbleVisibility('show');
-    }
-  }, [matchSmallScreens])
-
-  return (
-    <React.Fragment />
-  );
-};
-
-export default Chatwoot;
--- a/Show More
+++ b/Show More