chore: suit eslint rules

packages/backend/src/apps/discord/authentication.ts

@@ -1,5 +1,4 @@
 import { URLSearchParams } from 'url';
-import DiscordApi from 'discord.js';
 import axios, { AxiosInstance } from 'axios';
 import App from '../../models/app';
 import Field from '../../types/field';

packages/backend/src/apps/firebase/authentication.ts

@@ -1,4 +1,4 @@
-import { google, google as GoogleApi } from 'googleapis';
+import { google as GoogleApi } from 'googleapis';
 import App from '../../models/app';
 import Field from '../../types/field';
 

packages/backend/src/apps/github/authentication.ts

@@ -16,11 +16,11 @@ export default class Authentication {
     this.appData = App.findOneByKey('github');
   }
 
-  get oauthRedirectUrl() {
+  get oauthRedirectUrl(): string {
     return this.appData.fields.find((field: Field) => field.key == 'oAuthRedirectUrl').value;
   }
 
-  async createAuthData() {
+  async createAuthData(): { url: string } {
     const { url } = await getWebFlowAuthorizationUrl({
       clientType: "oauth-app",
       clientId: this.connectionData.consumerKey,
@@ -33,8 +33,8 @@ export default class Authentication {
     };
   }
 
-  async verifyCredentials() {
+  async verifyCredentials(): any {
-    const { data, authentication } = await exchangeWebFlowCode({
+    const { data } = await exchangeWebFlowCode({
       clientType: "oauth-app",
       clientId: this.connectionData.consumerKey,
       clientSecret: this.connectionData.consumerSecret,
@@ -65,7 +65,7 @@ export default class Authentication {
     });
   }
 
-  async isStillVerified() {
+  async isStillVerified(): boolean {
     try {
       await this.getTokenInfo();
 

packages/backend/src/apps/twitch/authentication.ts

@@ -1,4 +1,4 @@
-import TwitchApi, { ApiVersions } from 'twitch-js';
+import TwitchApi from 'twitch-js';
 import fetchUtil from 'twitch-js/lib/utils/fetch';
 import App from '../../models/app';
 import Field from '../../types/field';

packages/backend/src/graphql/mutations/execute-step.ts

@@ -1,20 +1,18 @@
 import { GraphQLInt, GraphQLNonNull } from 'graphql';
-import App from '../../models/app';
 import Connection from '../../models/connection';
 import Step from '../../models/step';
 import stepType from '../types/step';
-import RequestWithCurrentUser from '../../types/express/request-with-current-user';
 
 type Params = {
   id: number,
-  data: object
+  data: Record<string, unknown>
 }
-const executeStepResolver = async (params: Params, req: RequestWithCurrentUser) => {
+const executeStepResolver = async (params: Params): Promise<any> => {
-  let step = await Step.query().findOne({
+  const step = await Step.query().findOne({
     id: params.id
   }).throwIfNotFound();
 
-  let connection = await Connection.query().findOne({
+  const connection = await Connection.query().findOne({
     id: step.connectionId
   }).throwIfNotFound();
 
@@ -30,7 +28,7 @@ const executeStep = {
   args: {
     id: { type: GraphQLNonNull(GraphQLInt) }
   },
-  resolve: (_: any, params: Params, req: RequestWithCurrentUser) => executeStepResolver(params, req)
+  resolve: (_: any, params: Params) => executeStepResolver(params)
 };
 
 export default executeStep;

packages/backend/src/graphql/mutations/update-step.ts

@@ -1,7 +1,6 @@
 import { GraphQLInt, GraphQLString, GraphQLNonNull } from 'graphql';
 import Flow from '../../models/flow';
 import Step from '../../models/step';
-import flowType from '../types/flow';
 import stepType from '../types/step';
 import availableAppsEnumType from '../types/available-apps-enum-type';
 import RequestWithCurrentUser from '../../types/express/request-with-current-user';

packages/backend/src/graphql/queries/get-flows.ts

@@ -1,9 +1,9 @@
-import { GraphQLList, GraphQLString } from 'graphql';
+import { GraphQLList } from 'graphql';
 import Flow from '../../models/flow';
 import RequestWithCurrentUser from '../../types/express/request-with-current-user';
 import flowType from '../types/flow';
 
-const getFlowsResolver = async (req: RequestWithCurrentUser) => {
+const getFlowsResolver = async (req: RequestWithCurrentUser): Promise<any[]> => {
   const flows = await Flow.query()
     .withGraphJoined('[steps.[connection]]')
     .where({'flows.user_id': req.currentUser.id});

packages/backend/src/graphql/queries/test-connection.ts

@@ -1,4 +1,4 @@
-import { GraphQLString, GraphQLNonNull, GraphQLBoolean } from 'graphql';
+import { GraphQLString, GraphQLNonNull } from 'graphql';
 import Connection from '../../models/connection';
 import RequestWithCurrentUser from '../../types/express/request-with-current-user';
 import connectionType from '../types/connection'

packages/backend/src/graphql/types/action.ts

@@ -1,4 +1,4 @@
-import { GraphQLObjectType, GraphQLString, GraphQLList, GraphQLInt, GraphQLBoolean } from 'graphql';
+import { GraphQLObjectType, GraphQLString, GraphQLList, GraphQLBoolean } from 'graphql';
 
 const actionType = new GraphQLObjectType({
   name: 'Action',
@@ -6,13 +6,13 @@ const actionType = new GraphQLObjectType({
     name: { type: GraphQLString },
     key: { type: GraphQLString },
     description: { type: GraphQLString },
-    subSteps: { 
+    subSteps: {
       type: GraphQLList(
         new GraphQLObjectType({
           name: 'ActionSubStep',
           fields: {
             name: { type: GraphQLString },
-            arguments: {  
+            arguments: {
               type: GraphQLList(
                 new GraphQLObjectType({
                   name: 'ActionSubStepArgument',

packages/backend/src/graphql/types/app.ts

@@ -8,6 +8,7 @@ import actionType from './action';
 const appType = new GraphQLObjectType({
   name: 'App',
   fields: () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
     const connectionType = require('./connection').default;
 
     return {

packages/backend/src/graphql/types/connection.ts

@@ -4,6 +4,7 @@ import connectionDataType from './connection-data';
 const connectionType = new GraphQLObjectType({
   name: 'Connection',
   fields: () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
     const appType = require('./app').default;
 
     return {

packages/backend/src/graphql/types/step.ts

@@ -1,4 +1,4 @@
-import { GraphQLObjectType, GraphQLString, GraphQLNonNull, GraphQLEnumType, GraphQLInt } from 'graphql';
+import { GraphQLObjectType, GraphQLString, GraphQLEnumType, GraphQLInt } from 'graphql';
 import ConnectionType from './connection';
 
 const stepType = new GraphQLObjectType({

packages/backend/src/graphql/types/trigger.ts

@@ -1,4 +1,4 @@
-import { GraphQLObjectType, GraphQLString, GraphQLList, GraphQLInt, GraphQLBoolean } from 'graphql';
+import { GraphQLObjectType, GraphQLString, GraphQLList, GraphQLBoolean } from 'graphql';
 
 const triggerType = new GraphQLObjectType({
   name: 'Trigger',
@@ -6,13 +6,13 @@ const triggerType = new GraphQLObjectType({
     name: { type: GraphQLString },
     key: { type: GraphQLString },
     description: { type: GraphQLString },
-    subSteps: { 
+    subSteps: {
       type: GraphQLList(
         new GraphQLObjectType({
           name: 'TriggerSubStep',
           fields: {
             name: { type: GraphQLString },
-            arguments: {  
+            arguments: {
               type: GraphQLList(
                 new GraphQLObjectType({
                   name: 'TriggerSubStepArgument',

packages/backend/src/helpers/authentication.ts

@@ -1,8 +1,8 @@
-import { Request, Response, NextFunction } from 'express';
+import { Response, NextFunction } from 'express';
 import User from '../models/user';
 import RequestWithCurrentUser from '../types/express/request-with-current-user';
 
-const authentication = async (req: RequestWithCurrentUser, _res: Response, next: NextFunction) => {
+const authentication = async (req: RequestWithCurrentUser, _res: Response, next: NextFunction): Promise<void> => {
   // We set authentication to use the sample user we created temporarily.
   req.currentUser = await User.query().findOne({
     email: 'user@automatisch.com'

packages/backend/src/helpers/error-handler.ts

@@ -1,7 +1,11 @@
-import { Request, Response, NextFunction } from 'express';
+import { Request, Response } from 'express';
 import logger from './logger';
 
-const errorHandler = (err: any, req: Request, res: Response, _next: NextFunction) => {
+type Error = {
+  message: string;
+}
+
+const errorHandler = (err: Error, req: Request, res: Response): void => {
   if(err.message === 'Not Found') {
     res.status(404).end()
   } else {

packages/backend/src/models/base.ts

@@ -1,5 +1,5 @@
 import { Model, snakeCaseMappers } from 'objection';
-import type { Constructor, TransactionOrKnex, QueryBuilderType, QueryContext, ModelOptions, ColumnNameMappers } from 'objection';
+import type { QueryContext, ModelOptions, ColumnNameMappers } from 'objection';
 
 class Base extends Model {
   createdAt!: string;
@@ -9,14 +9,14 @@ class Base extends Model {
     return snakeCaseMappers();
   }
 
-  async $beforeInsert(queryContext: QueryContext) {
+  async $beforeInsert(queryContext: QueryContext): Promise<void> {
     await super.$beforeInsert(queryContext);
 
     this.createdAt = new Date().toISOString();
     this.updatedAt = new Date().toISOString();
   }
 
-  async $beforeUpdate(opt: ModelOptions, queryContext: QueryContext) {
+  async $beforeUpdate(opt: ModelOptions, queryContext: QueryContext): Promise<void> {
     await super.$beforeUpdate(opt, queryContext);
 
     this.updatedAt = new Date().toISOString();

packages/backend/src/models/connection.ts

@@ -1,4 +1,5 @@
 import { QueryContext, ModelOptions } from 'objection';
+import type { RelationMappings } from 'objection';
 import { AES, enc } from 'crypto-js';
 import Base from './base'
 import User from './user'
@@ -27,7 +28,7 @@ class Connection extends Base {
     }
   }
 
-  static relationMappings = () => ({
+  static relationMappings = (): RelationMappings => ({
     user: {
       relation: Base.BelongsToOneRelation,
       modelClass: User,
@@ -38,33 +39,33 @@ class Connection extends Base {
     }
   })
 
-  encryptData() {
+  encryptData(): void {
     if(!this.eligibleForEncryption()) return;
     this.data = AES.encrypt(JSON.stringify(this.data), appConfig.encryptionKey).toString();
   }
 
-  decryptData() {
+  decryptData(): void {
     if(!this.eligibleForEncryption()) return;
     this.data = JSON.parse(AES.decrypt(this.data, appConfig.encryptionKey).toString(enc.Utf8));
   }
 
-  eligibleForEncryption() {
+  eligibleForEncryption(): boolean {
     return this.data ? true : false
   }
 
   // TODO: Make another abstraction like beforeSave instead of using
   // beforeInsert and beforeUpdate separately for the same operation.
-  async $beforeInsert(queryContext: QueryContext) {
+  async $beforeInsert(queryContext: QueryContext): Promise<void> {
     await super.$beforeInsert(queryContext);
     this.encryptData();
   }
 
-  async $beforeUpdate(opt: ModelOptions, queryContext: QueryContext) {
+  async $beforeUpdate(opt: ModelOptions, queryContext: QueryContext): Promise<void> {
     await super.$beforeUpdate(opt, queryContext);
     this.encryptData();
   }
 
-  async $afterFind(queryContext: QueryContext) {
+  async $afterFind(): Promise<void> {
     this.decryptData();
   }
 }

packages/cli/__tests__/cli.test.js

@@ -1,7 +0,0 @@
-'use strict';
-
-const cli = require('..');
-
-describe('cli', () => {
-    it('needs tests');
-});

packages/cli/src/cli.js

@@ -1,7 +1,8 @@
 'use strict';
 
+// eslint-disable-next-line no-undef
 module.exports = cli;
 
 function cli() {
-    // TODO
+  // TODO
 }

packages/web/src/components/AddAppConnection/index.tsx

@@ -23,7 +23,7 @@ type Response = {
   [key: string]: any;
 }
 
-export default function AddAppConnection(props: AddAppConnectionProps){
+export default function AddAppConnection(props: AddAppConnectionProps): React.ReactElement {
   const { application, connectionId, onClose } = props;
   const { key, fields, authenticationSteps, reconnectionSteps } = application;
   const formatMessage = useFormatMessage();

packages/web/src/components/AddNewAppConnection/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import * as React from 'react';
 import { useQuery } from '@apollo/client';
 import { Link } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
@@ -27,12 +27,12 @@ type AddNewAppConnectionProps = {
   onClose: () => void;
 };
 
-export default function AddNewAppConnection(props: AddNewAppConnectionProps){
+export default function AddNewAppConnection(props: AddNewAppConnectionProps): React.ReactElement {
   const { onClose } = props;
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('sm'));
   const formatMessage = useFormatMessage();
-  const [appName, setAppName] = useState<string | null>(null);
+  const [appName, setAppName] = React.useState<string | null>(null);
   const { data } = useQuery(GET_APPS, { variables: {name: appName } });
 
   return (

packages/web/src/components/ApolloProvider/index.tsx

@@ -7,7 +7,7 @@ type ApolloProviderProps = {
   children: React.ReactNode;
 };
 
-const ApolloProvider = (props: ApolloProviderProps) => {
+const ApolloProvider = (props: ApolloProviderProps): React.ReactElement => {
   const { enqueueSnackbar } = useSnackbar();
 
   const onError = React.useCallback((message) => {

packages/web/src/components/AppBar/index.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import MuiAppBar from '@mui/material/AppBar';
@@ -18,7 +19,7 @@ type AppBarProps = {
   onDrawerClose: () => void;
 };
 
-export default function AppBar({ drawerOpen, onDrawerOpen, onDrawerClose }: AppBarProps) {
+export default function AppBar({ drawerOpen, onDrawerOpen, onDrawerClose }: AppBarProps): React.ReactElement {
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { noSsr: true });
 

packages/web/src/components/AppConnectionContextMenu/index.tsx

@@ -19,7 +19,7 @@ type ContextMenuProps = {
   anchorEl: PopoverProps['anchorEl'];
 };
 
-export default function ContextMenu(props: ContextMenuProps) {
+export default function ContextMenu(props: ContextMenuProps): React.ReactElement {
   const { appKey, connectionId, onClose, onMenuItemClick, anchorEl } = props;
   const formatMessage = useFormatMessage();
 

packages/web/src/components/AppConnectionRow/index.tsx

@@ -31,7 +31,7 @@ const countTranslation = (value: React.ReactNode) => (
   </>
 );
 
-function AppConnectionRow(props: AppConnectionRowProps) {
+function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
   const { enqueueSnackbar } = useSnackbar();
   const [verificationVisible, setVerificationVisible] = React.useState(false);
   const [testConnection, { called: testCalled, loading: testLoading }] = useLazyQuery(TEST_CONNECTION, {
@@ -51,12 +51,12 @@ function AppConnectionRow(props: AppConnectionRowProps) {
     setAnchorEl(null);
   };
 
-  const onContextMenuClick = (event: React.MouseEvent<HTMLButtonElement>) => setAnchorEl(contextButtonRef.current);
+  const onContextMenuClick = () => setAnchorEl(contextButtonRef.current);
   const onContextMenuAction = React.useCallback(async (event, action: { [key: string]: string }) => {
     if (action.type === 'delete') {
       await deleteConnection({
         variables: { id },
-        update: (cache, mutationResult) => {
+        update: (cache) => {
           const connectionCacheId = cache.identify({
             __typename: 'Connection',
             id,

packages/web/src/components/AppConnectionRow/style.ts

@@ -11,7 +11,7 @@ export const CardContent = styled(MuiCardContent)(({ theme }) => ({
 }));
 
 
-export const Typography = styled(MuiTypography)(({ theme }) => ({
+export const Typography = styled(MuiTypography)(() => ({
   textAlign: 'center',
   display: 'inline-block',
 }));

packages/web/src/components/AppConnections/index.tsx

@@ -12,7 +12,7 @@ type AppConnectionsProps = {
   appKey: string;
 }
 
-export default function AppConnections(props: AppConnectionsProps) {
+export default function AppConnections(props: AppConnectionsProps): React.ReactElement {
   const { appKey } = props;
   const formatMessage = useFormatMessage();
   const { data } = useQuery(GET_APP_CONNECTIONS, { variables: { key: appKey } });

packages/web/src/components/AppFlowRow/index.tsx

@@ -12,7 +12,7 @@ type AppFlowRowProps = {
   flow: any;
 }
 
-function AppFlowRow(props: AppFlowRowProps) {
+function AppFlowRow(props: AppFlowRowProps): React.ReactElement {
   const { flow } = props;
 
   return (

packages/web/src/components/AppFlowRow/style.ts

@@ -11,7 +11,7 @@ export const CardContent = styled(MuiCardContent)(({ theme }) => ({
 }));
 
 
-export const Typography = styled(MuiTypography)(({ theme }) => ({
+export const Typography = styled(MuiTypography)(() => ({
   display: 'inline-block',
   width: 300,
   maxWidth: '50%',

packages/web/src/components/AppFlows/index.tsx

@@ -4,11 +4,7 @@ import { GET_FLOWS } from 'graphql/queries/get-flows';
 import AppFlowRow from 'components/AppFlowRow';
 import type { Flow } from 'types/flow';
 
-type AppFlowsProps = {
+export default function AppFlows(): React.ReactElement {
-  appKey: String;
-}
-
-export default function AppFlows(props: AppFlowsProps) {
   const { data } = useQuery(GET_FLOWS);
   const appFlows: Flow[] = data?.getFlows || [];
 

packages/web/src/components/AppIcon/index.tsx

@@ -12,7 +12,7 @@ const inlineImgStyle: React.CSSProperties = {
   objectFit: 'contain',
 };
 
-export default function AppIcon(props: AppIconProps & AvatarProps) {
+export default function AppIcon(props: AppIconProps & AvatarProps): React.ReactElement {
   const { name, url, color, sx = {}, ...restProps } = props;
 
   return (

packages/web/src/components/AppRow/index.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Link } from 'react-router-dom';
 import Card from '@mui/material/Card';
 import Box from '@mui/material/Box';
@@ -23,7 +24,7 @@ const countTranslation = (value: React.ReactNode) => (
   </>
 );
 
-function AppRow(props: AppRowProps) {
+function AppRow(props: AppRowProps): React.ReactElement {
   const formatMessage = useFormatMessage();
   const { name, primaryColor, iconUrl, connectionCount } = props.application;
 

packages/web/src/components/AppRow/style.ts

@@ -11,7 +11,7 @@ export const CardContent = styled(MuiCardContent)(({ theme }) => ({
 }));
 
 
-export const Typography = styled(MuiTypography)(({ theme }) => ({
+export const Typography = styled(MuiTypography)(() => ({
   '&.MuiTypography-h6': {
     textTransform: 'capitalize',
   },

packages/web/src/components/ConditionalIconButton/index.tsx

@@ -2,10 +2,12 @@ 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';
 
-export default function ConditionalIconButton(props: any) {
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export default function ConditionalIconButton(props: any): React.ReactElement {
   const { icon, ...buttonProps } = props;
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { noSsr: true });
@@ -24,6 +26,6 @@ export default function ConditionalIconButton(props: any) {
   }
 
   return (
-    <Button {...buttonProps} />
+    <Button {...(buttonProps as ButtonProps)} />
   );
 }

packages/web/src/components/Container/index.tsx

@@ -1,6 +1,7 @@
+import * as React from 'react';
 import MuiContainer, { ContainerProps } from '@mui/material/Container';
 
-export default function Container(props: ContainerProps) {
+export default function Container(props: ContainerProps): React.ReactElement {
   return (
     <MuiContainer {...props} />
   );

packages/web/src/components/Drawer/index.tsx

@@ -17,7 +17,7 @@ import { Drawer as BaseDrawer } from './style';
 
 const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
 
-export default function Drawer(props: SwipeableDrawerProps) {
+export default function Drawer(props: SwipeableDrawerProps): React.ReactElement {
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { noSsr: true });
   const formatMessage = useFormatMessage();

packages/web/src/components/Editor/index.tsx

@@ -8,7 +8,7 @@ type EditorProps = {
   flow: Flow;
 }
 
-export default function Editor(props: EditorProps) {
+export default function Editor(props: EditorProps): React.ReactElement {
   const [currentStep, setCurrentStep] = React.useState<number | null>(null);
   const { flow } = props;
 

packages/web/src/components/EditorLayout/index.tsx

@@ -15,11 +15,7 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import { GET_FLOW } from 'graphql/queries/get-flow';
 import type { Flow } from 'types/flow';
 
-type EditorLayoutProps = {
+export default function EditorLayout(): React.ReactElement {
-  children?: React.ReactNode;
-}
-
-export default function EditorLayout(props: EditorLayoutProps) {
   const { flowId } = useParams();
   const formatMessage = useFormatMessage();
   const { data } = useQuery(GET_FLOW, { variables: { id: Number(flowId) }});

packages/web/src/components/FlowRow/index.tsx

@@ -13,7 +13,7 @@ type FlowRowProps = {
   flow: Flow;
 }
 
-export default function FlowRow(props: FlowRowProps) {
+export default function FlowRow(props: FlowRowProps): React.ReactElement {
   const { flow } = props;
 
   return (

packages/web/src/components/FlowRow/style.ts

@@ -11,7 +11,7 @@ export const CardContent = styled(MuiCardContent)(({ theme }) => ({
 }));
 
 
-export const Typography = styled(MuiTypography)(({ theme }) => ({
+export const Typography = styled(MuiTypography)(() => ({
   '&.MuiTypography-h6': {
     textTransform: 'capitalize',
   },

packages/web/src/components/FlowStep/index.tsx

@@ -19,7 +19,7 @@ type FlowStepProps = {
   onClose?: () => void;
 }
 
-export default function FlowStep(props: FlowStepProps) {
+export default function FlowStep(props: FlowStepProps): React.ReactElement | null {
   const { collapsed, index, step } = props;
   const formatMessage = useFormatMessage();
   const { data } = useQuery(GET_APP, { variables: { key: step?.appKey }})

packages/web/src/components/Form/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { FormProvider, useForm, FieldValues, SubmitHandler, UseFormReturn } from 'react-hook-form';
 
 type FormProps = {
@@ -6,7 +6,7 @@ type FormProps = {
   onSubmit: SubmitHandler<FieldValues>;
 }
 
-export default function Form(props: FormProps) {
+export default function Form(props: FormProps): React.ReactElement {
   const { children, onSubmit, ...formProps } = props;
   const methods: UseFormReturn = useForm();
 

packages/web/src/components/HideOnScroll/index.tsx

@@ -1,7 +1,8 @@
+import * as React from 'react';
 import Slide, { SlideProps } from '@mui/material/Slide';
 import useScrollTrigger from '@mui/material/useScrollTrigger';
 
-export default function HideOnScroll(props: SlideProps) {
+export default function HideOnScroll(props: SlideProps): React.ReactElement {
   const trigger = useScrollTrigger();
 
   return (

packages/web/src/components/InputCreator/index.tsx

@@ -1,5 +1,6 @@
-import type { AppFields } from 'types/app';
+import * as React from 'react';
 import { useFormContext } from 'react-hook-form';
+import type { AppFields } from 'types/app';
 
 import TextField from 'components/TextField';
 
@@ -8,7 +9,7 @@ type InputCreatorProps = {
   schema: AppFields;
 };
 
-export default function InputCreator(props: InputCreatorProps) {
+export default function InputCreator(props: InputCreatorProps): React.ReactElement {
   const {
     onChange,
     schema,

packages/web/src/components/IntlProvider/index.tsx

@@ -5,7 +5,7 @@ type IntlProviderProps = {
   children: React.ReactNode;
 };
 
-const IntlProvider = ({ children }: IntlProviderProps) => {
+const IntlProvider = ({ children }: IntlProviderProps): React.ReactElement => {
   return (
     <BaseIntlProvider locale={navigator.language} defaultLocale="en" messages={englishMessages}>
       {children}

packages/web/src/components/Layout/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
@@ -11,10 +11,10 @@ type LayoutProps = {
   children: React.ReactNode;
 }
 
-export default function Layout({ children }: LayoutProps) {
+export default function Layout({ children }: LayoutProps): React.ReactElement {
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'), { noSsr: true });
-  const [isDrawerOpen, setDrawerOpen] = useState(!matchSmallScreens);
+  const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
 
   const openDrawer = () => setDrawerOpen(true);
   const closeDrawer = () => setDrawerOpen(false);

packages/web/src/components/ListItemLink/index.tsx

@@ -12,7 +12,7 @@ type ListItemLinkProps = {
   onClick?: (event: React.SyntheticEvent) => void;
 }
 
-export default function ListItemLink(props: ListItemLinkProps) {
+export default function ListItemLink(props: ListItemLinkProps): React.ReactElement {
   const { icon, primary, to, onClick } = props;
   const selected = useMatch({ path: to, end: false });
 

packages/web/src/components/NoResultFound/index.tsx

@@ -12,7 +12,7 @@ type NoResultFoundProps = {
   to: string;
 }
 
-export default function NoResultFound(props: NoResultFoundProps) {
+export default function NoResultFound(props: NoResultFoundProps): React.ReactElement {
   const { text, to } = props;
 
   const ActionAreaLink = React.useMemo(

packages/web/src/components/PageTitle/index.tsx

@@ -1,10 +1,11 @@
+import * as React from 'react';
 import Typography from '@mui/material/Typography';
 
 type PageTitleProps = {
   children: React.ReactNode;
 };
 
-export default function PageTitle(props: PageTitleProps) {
+export default function PageTitle(props: PageTitleProps): React.ReactElement {
   const { children } = props;
 
   return (

packages/web/src/components/SearchInput/index.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import InputLabel from '@mui/material/InputLabel';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import InputAdornment from '@mui/material/InputAdornment';
@@ -10,7 +11,7 @@ type SearchInputProps = {
   onChange?: (event: React.ChangeEvent) => void;
 };
 
-export default function SearchInput({ onChange }: SearchInputProps) {
+export default function SearchInput({ onChange }: SearchInputProps): React.ReactElement {
   const formatMessage = useFormatMessage();
 
   return (

packages/web/src/components/SnackbarProvider/index.tsx

@@ -1,6 +1,7 @@
+import * as React from 'react';
 import { SnackbarProvider as BaseSnackbarProvider, SnackbarProviderProps } from 'notistack';
 
-const SnackbarProvider = (props: SnackbarProviderProps) => {
+const SnackbarProvider = (props: SnackbarProviderProps): React.ReactElement => {
   return (
     <BaseSnackbarProvider
       {...props}

packages/web/src/components/TabPanel/index.tsx

@@ -1,10 +1,12 @@
+import * as React from 'react';
+
 interface TabPanelProps {
   children?: React.ReactNode;
   index: number;
   value: number;
 }
 
-export default function TabPanel(props: TabPanelProps) {
+export default function TabPanel(props: TabPanelProps): React.ReactElement {
   const { children, value, index, ...other } = props;
 
   return (

packages/web/src/components/TextField/index.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import * as React from 'react';
 import { Controller, Control, FieldValues } from 'react-hook-form';
 import MuiTextField, { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
 import IconButton from '@mui/material/IconButton';
@@ -15,7 +15,7 @@ type TextFieldProps = {
   readOnly?: boolean;
 } & MuiTextFieldProps;
 
-const createCopyAdornment = (ref: React.RefObject<HTMLInputElement | null>) => {
+const createCopyAdornment = (ref: React.RefObject<HTMLInputElement | null>): React.ReactElement => {
   return (
   <InputAdornment position="end">
     <IconButton
@@ -28,8 +28,8 @@ const createCopyAdornment = (ref: React.RefObject<HTMLInputElement | null>) => {
 );
 }
 
-export default function TextField(props: TextFieldProps) {
+export default function TextField(props: TextFieldProps): React.ReactElement {
-  const inputRef = useRef<HTMLInputElement | null>(null);
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
   const {
     control,
     required,

packages/web/src/components/ThemeProvider/index.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ThemeProvider as BaseThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import theme from 'styles/theme';
@@ -6,7 +7,7 @@ type ThemeProviderProps = {
   children: React.ReactNode;
 };
 
-const ThemeProvider = ({ children, ...props }: ThemeProviderProps) => {
+const ThemeProvider = ({ children, ...props }: ThemeProviderProps): React.ReactElement => {
   return (
     <BaseThemeProvider theme={theme} {...props}>
       <CssBaseline />

packages/web/src/config/urls.ts

@@ -4,21 +4,21 @@ export const EXPLORE = '/explore';
 
 export const APPS = '/apps';
 export const NEW_APP_CONNECTION = '/apps/new';
-export const APP = (appKey: string) => `/app/${appKey}`;
+export const APP = (appKey: string): string => `/app/${appKey}`;
 export const APP_PATTERN = '/app/:appKey';
-export const APP_CONNECTIONS = (appKey: string) => `/app/${appKey}/connections`;
+export const APP_CONNECTIONS = (appKey: string): string => `/app/${appKey}/connections`;
 export const APP_CONNECTIONS_PATTERN = '/app/:appKey/connections';
-export const APP_ADD_CONNECTION = (appKey: string) => `/app/${appKey}/connections/add`;
+export const APP_ADD_CONNECTION = (appKey: string): string => `/app/${appKey}/connections/add`;
 export const APP_ADD_CONNECTION_PATTERN = '/app/:appKey/connections/add';
-export const APP_RECONNECT_CONNECTION = (appKey: string, connectionId: string) => `/app/${appKey}/connections/${connectionId}/reconnect`;
+export const APP_RECONNECT_CONNECTION = (appKey: string, connectionId: string): string => `/app/${appKey}/connections/${connectionId}/reconnect`;
 export const APP_RECONNECT_CONNECTION_PATTERN = '/app/:appKey/connections/:connectionId/reconnect';
-export const APP_FLOWS = (appKey: string) => `/app/${appKey}/flows`;
+export const APP_FLOWS = (appKey: string): string => `/app/${appKey}/flows`;
 export const APP_FLOWS_PATTERN = '/app/:appKey/flows';
 
 export const EDITOR = '/editor';
 export const CREATE_FLOW = '/editor/create';
-export const FLOW_EDITOR = (flowId: string) => `/editor/${flowId}`;
+export const FLOW_EDITOR = (flowId: string): string => `/editor/${flowId}`;
 
 export const FLOWS = '/flows';
-export const FLOW = (flowId: string) => `/flows/${flowId}`;
+export const FLOW = (flowId: string): string => `/flows/${flowId}`;
 export const FLOW_PATTERN = '/flows/:flowId';

packages/web/src/graphql/cache.ts

@@ -9,7 +9,7 @@ const cache = new InMemoryCache({
       mutationType: true,
       fields: {
         createConnection: {
-          merge(existing, newConnection, { args, readField, cache }) {
+          merge(existing, newConnection, { readField, cache }) {
             const appKey = readField('key', newConnection);
             const appCacheId = cache.identify({
               __typename: 'App',

packages/web/src/graphql/client.ts

@@ -12,7 +12,7 @@ const client = new ApolloClient({
   link: createLink({ uri: appConfig.graphqlUrl })
 });
 
-export function setLink({ onError }: CreateClientOptions) {
+export function setLink({ onError }: CreateClientOptions): typeof client {
   const link = createLink({ uri: appConfig.graphqlUrl, onError });
 
   client.setLink(link);

packages/web/src/graphql/link.ts

@@ -1,4 +1,5 @@
 import { HttpLink, from } from '@apollo/client';
+import type { ApolloLink } from '@apollo/client';
 import { onError } from '@apollo/client/link/error';
 
 type CreateLinkOptions = {
@@ -6,9 +7,9 @@ type CreateLinkOptions = {
   onError?: (message: string) => void;
 };
 
-const createHttpLink = (uri: CreateLinkOptions['uri']) => new HttpLink({ uri });
+const createHttpLink = (uri: CreateLinkOptions['uri']): ApolloLink => new HttpLink({ uri });
 
-const createErrorLink = (callback: CreateLinkOptions['onError']) => onError(({ graphQLErrors, networkError }) => {
+const createErrorLink = (callback: CreateLinkOptions['onError']): ApolloLink => onError(({ graphQLErrors, networkError }) => {
   if (graphQLErrors)
     graphQLErrors.forEach(({ message, locations, path }) => {
       callback?.(message);
@@ -24,7 +25,10 @@ const createErrorLink = (callback: CreateLinkOptions['onError']) => onError(({ g
   }
 });
 
-const createLink = ({ uri, onError = function() {} }: CreateLinkOptions) => {
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
+const createLink = ({ uri, onError = noop }: CreateLinkOptions): ApolloLink => {
   return from([createErrorLink(onError), createHttpLink(uri)]);
 };
 

packages/web/src/helpers/authenticationSteps.ts

@@ -7,7 +7,14 @@ enum AuthenticationSteps {
   OpenWithPopup = 'openWithPopup',
 }
 
-const processMutation = async (step: any, variables: any) => {
+type Step = {
+  name: string;
+  variables: Record<string, unknown>;
+  process: (step: any, variables: Record<string, unknown>) => Promise<any>;
+  type: AuthenticationSteps.Mutation | AuthenticationSteps.OpenWithPopup;
+};
+
+const processMutation = async (step: Step, variables: Record<string, unknown>) => {
   const mutation = MUTATIONS[step.name];
   const mutationResponse = await apolloClient.mutate({ mutation, variables });
   const responseData = mutationResponse.data[step.name];
@@ -31,8 +38,8 @@ function getObjectOfEntries(iterator: any) {
   return result;
 }
 
-const processOpenWithPopup = (step: any, variables: any) => {
+const processOpenWithPopup = (step: Step, variables: Record<string, string>) => {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve) => {
     const windowFeatures = 'toolbar=no, menubar=no, width=600, height=700, top=100, left=100';
     const url = variables.url;
 
@@ -55,16 +62,10 @@ const processOpenWithPopup = (step: any, variables: any) => {
   });
 };
 
-export const processStep = (step: any, variables: any) => {
+export const processStep = async (step: Step, variables: Record<string, string>): Promise<any> => {
-  return new Promise(async (resolve, reject) => {
+  if (step.type === AuthenticationSteps.Mutation) {
-    let response;
+    return processMutation(step, variables);
-
+  } else if (step.type === AuthenticationSteps.OpenWithPopup) {
-    if (step.type === AuthenticationSteps.Mutation) {
+    return processOpenWithPopup(step, variables);
-      response = await processMutation(step, variables);
+  }
-    } else if (step.type === AuthenticationSteps.OpenWithPopup) {
-      response = await processOpenWithPopup(step, variables);
-    }
-
-    resolve(response);
-  });
 };

packages/web/src/helpers/computeAuthStepVariables.ts

@@ -2,12 +2,23 @@ import template from 'lodash.template';
 
 const interpolate = /{([\s\S]+?)}/g;
 
-type VARIABLES = {
+type Variables = {
   [key: string]: any
 }
 
-const computeAuthStepVariables = (variableSchema: any, aggregatedData: any) => {
+type VariableSchema = {
-  const variables: VARIABLES = {};
+  properties: VariableSchema[];
+  name: string;
+  type: 'string' | 'integer';
+  value: string;
+}
+
+type AggregatedData = {
+  [key: string]: Record<string, unknown> | string;
+}
+
+const computeAuthStepVariables = (variableSchema: VariableSchema[], aggregatedData: AggregatedData): Variables => {
+  const variables: Variables = {};
 
   for (const variable of variableSchema) {
     if (variable.properties) {

packages/web/src/helpers/copyInputValue.ts

@@ -1,4 +1,5 @@
 import copy from 'clipboard-copy';
-export default function copyInputValue(element: HTMLInputElement) {
+
+export default function copyInputValue(element: HTMLInputElement): void {
   copy(element.value);
 };

packages/web/src/hooks/useFormatMessage.tsx

@@ -4,7 +4,7 @@ type Values = {
   [key: string]: any,
 }
 
-export default function useFormatMessage() {
+export default function useFormatMessage(): (id: string, values?: Values) => string {
   const { formatMessage } = useIntl();
 
   return (id: string, values: Values = {}) => formatMessage({ id }, values);

packages/web/src/pages/Application/index.tsx

@@ -27,7 +27,7 @@ type ApplicationParams = {
   connectionId?: string;
 };
 
-const ReconnectConnection = (props: any) => {
+const ReconnectConnection = (props: any): React.ReactElement => {
   const { application, onClose } = props;
   const { connectionId } = useParams() as ApplicationParams;
 
@@ -40,7 +40,7 @@ const ReconnectConnection = (props: any) => {
   );
 }
 
-export default function Application() {
+export default function Application(): React.ReactElement {
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { noSsr: true });
   const formatMessage = useFormatMessage();
@@ -155,7 +155,7 @@ export default function Application() {
               </Box>
 
               <Routes>
-                <Route path={`${URLS.FLOWS}/*`} element={<AppFlows appKey={appKey} />} />
+                <Route path={`${URLS.FLOWS}/*`} element={<AppFlows />} />
 
                 <Route path={`${URLS.CONNECTIONS}/*`} element={<AppConnections appKey={appKey} />} />
 

packages/web/src/pages/Applications/index.tsx

@@ -17,7 +17,7 @@ import { GET_CONNECTED_APPS } from 'graphql/queries/get-connected-apps';
 import * as URLS from 'config/urls';
 import type { App } from 'types/app';
 
-export default function Applications() {
+export default function Applications(): React.ReactElement {
   const navigate = useNavigate();
   const formatMessage = useFormatMessage();
   const [appName, setAppName] = React.useState(null);

packages/web/src/pages/Editor/create.tsx

@@ -10,7 +10,7 @@ import { CREATE_FLOW } from 'graphql/mutations/create-flow';
 
 import Box from '@mui/material/Box';
 
-export default function CreateFlow() {
+export default function CreateFlow(): React.ReactElement {
   const navigate = useNavigate();
   const formatMessage = useFormatMessage();
   const [createFlow] = useMutation(CREATE_FLOW);

packages/web/src/pages/Editor/index.tsx

@@ -1,6 +1,7 @@
+import * as React from 'react';
 import EditorLayout from 'components/EditorLayout';
 
-export default function FlowEditor() {
+export default function FlowEditor(): React.ReactElement {
   return (
     <EditorLayout />
   )

packages/web/src/pages/Editor/routes.tsx

@@ -3,7 +3,7 @@ import { Routes, Route } from 'react-router-dom';
 import CreateFlowPage from './create';
 import EditorPage from './index';
 
-export default function EditorRoutes() {
+export default function EditorRoutes(): React.ReactElement {
   return (
     <Routes>
       <Route path="/create" element={<CreateFlowPage />} />

packages/web/src/pages/Explore/index.tsx

@@ -1,7 +1,8 @@
+import * as React from 'react';
 import Box from '@mui/material/Box';
 import Container from 'components/Container';
 
-export default function Explore() {
+export default function Explore(): React.ReactElement {
   return (
     <Box sx={{ py: 3 }}>
       <Container>

packages/web/src/pages/Flow/index.tsx

@@ -1,32 +1,15 @@
 import * as React from 'react';
-import { useQuery } from '@apollo/client';
+import {  useParams, } from 'react-router-dom';
-import { Link, Route, Navigate, Routes, useParams, useMatch, useNavigate } from 'react-router-dom';
-import type { LinkProps } from 'react-router-dom';
-import { useTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import AddIcon from '@mui/icons-material/Add';
 
-import useFormatMessage from 'hooks/useFormatMessage';
-import { GET_APP } from 'graphql/queries/get-app';
-import * as URLS from 'config/urls';
-
-import ConditionalIconButton from 'components/ConditionalIconButton';
-import AppConnections from 'components/AppConnections';
-import AppFlows from 'components/AppFlows';
-import AddAppConnection from 'components/AddAppConnection';
-import AppIcon from 'components/AppIcon';
 import Container from 'components/Container';
-import PageTitle from 'components/PageTitle';
 
 type ApplicationParams = {
   flowId: string;
 };
 
-export default function Flow() {
+export default function Flow(): React.ReactElement {
   const { flowId } = useParams() as ApplicationParams;
 
   return (

packages/web/src/pages/Flows/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link, Routes, Route, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import type { LinkProps } from 'react-router-dom';
 import { useQuery } from '@apollo/client';
 import Box from '@mui/material/Box';
@@ -16,7 +16,7 @@ import { GET_FLOWS } from 'graphql/queries/get-flows';
 import * as URLS from 'config/urls';
 import type { Flow } from 'types/flow';
 
-export default function Flows() {
+export default function Flows(): React.ReactElement {
   const formatMessage = useFormatMessage();
   const [flowName, setFlowName] = React.useState('');
   const { data } = useQuery(GET_FLOWS);

packages/web/src/reportWebVitals.ts

@@ -1,6 +1,6 @@
 import { ReportHandler } from 'web-vitals';
 
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+const reportWebVitals = (onPerfEntry?: ReportHandler): void => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);

packages/web/src/types/step.ts

@@ -6,6 +6,7 @@ export enum StepType {
 export type Step = {
   id: string;
   key: string;
+  name: string;
   appKey: string;
   type: StepType;
   connectionId: number;