convert component utils and couple of components

console/.eslintrc

@@ -171,7 +171,8 @@
         "no-restricted-properties": "off",
         "react/no-danger": "off",
         "react/no-array-index-key": "off",
-        "no-case-declarations": 0
+        "no-case-declarations": 0,
+        "spaced-comment": "off"
       }
     }
   ]

console/src/components/Common/InputChecker/InputChecker.js → console/src/components/Common/InputChecker/InputChecker.tsx

@@ -1,19 +1,30 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 
 import { inputChecker } from './utils';
 
-class InputChecker extends Component {
-  constructor() {
-    super();
-    this.state = {
-      isError: false,
-      errorMessage: '',
-    };
+type Props = {
+  type: string;
+  value: string;
+  placeholder: string;
+  disabled: boolean;
+  title: string;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  'data-test': string;
+};
 
-    this.onBlur = this.onBlur.bind(this);
-  }
-  onBlur(e) {
+type State = {
+  isError: boolean;
+  errorMessage: string;
+};
+
+class InputChecker extends Component<Props, State> {
+  state = {
+    isError: false,
+    errorMessage: '',
+  };
+
+  onBlur = (e: React.FocusEvent<HTMLInputElement>) => {
     const val = e.target.value;
     if (!val) {
       this.setState({
@@ -35,7 +46,7 @@ class InputChecker extends Component {
           errorMessage: r.message,
         });
       });
-  }
+  };
   render() {
     const { value, onChange, placeholder, disabled, title } = this.props;
 
@@ -46,7 +57,7 @@ class InputChecker extends Component {
     return (
       <input
         {...this.props}
-        className={'input-sm form-control'}
+        className="input-sm form-control"
         style={this.state.isError ? style : {}}
         placeholder={placeholder || 'new input'}
         value={value}
@@ -60,13 +71,4 @@ class InputChecker extends Component {
   }
 }
 
-InputChecker.propTypes = {
-  type: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onBlur: PropTypes.func.isRequired,
-  placeholder: PropTypes.string,
-  disabled: PropTypes.bool,
-};
-
 export default InputChecker;

console/src/components/Common/InputChecker/utils.js → console/src/components/Common/InputChecker/utils.ts

@@ -1,16 +1,17 @@
-const intChecker = val => {
+const intChecker = (val: string) => {
   const rVal = parseInt(val, 10);
 
   if (!rVal) {
     throw new Error('Invalid input for type integer');
   }
   return rVal;
 };
-const boolChecker = val => {
-  let rVal = '';
+
+const boolChecker = (val: string) => {
+  let rVal: boolean | null;
   if (val === 'true') {
     rVal = true;
-  } else if (rVal === 'false') {
+  } else if (val === 'false') {
     rVal = false;
   } else {
     rVal = null;
@@ -22,7 +23,7 @@ const boolChecker = val => {
   return rVal;
 };
 
-const jsonChecker = val => {
+const jsonChecker = (val: string) => {
   try {
     JSON.parse(val);
   } catch (e) {
@@ -40,13 +41,16 @@ const typeChecker = {
   jsonb: jsonChecker,
 };
 
-const inputChecker = (type, value) => {
+type InputType = keyof typeof typeChecker;
+const inputChecker = (type: string, value: string) => {
   // Checks the input against the intended type
   // and returns the value or error
   return new Promise((resolve, reject) => {
     try {
       if (type in typeChecker) {
-        resolve(typeChecker[type](value));
+        // as it's available in the object, the type can be added here explicitly without issues
+        const inputType = type as InputType;
+        resolve(typeChecker[inputType](value));
         return;
       }
       resolve(value);

console/src/components/Common/KnowMoreLink/KnowMoreLink.js → console/src/components/Common/KnowMoreLink/KnowMoreLink.tsx

@@ -1,7 +1,15 @@
 import React from 'react';
 // import styles from './KnowMoreLink.scss';
 
-const KnowMoreLink = ({ href, text = 'Know more' }) => (
+type KnowMoreLinkProps = {
+  href: string;
+  text?: string;
+};
+
+const KnowMoreLink: React.FC<KnowMoreLinkProps> = ({
+  href,
+  text = 'Know more',
+}) => (
   <a href={href} target="_blank" rel="noopener noreferrer">
     <small>
       <i>({text})</i>

console/src/components/Common/utils/localStorageUtils.js → console/src/components/Common/utils/localStorageUtils.ts

@@ -1,8 +1,8 @@
-export const getLocalStorageItem = key => {
+export const getLocalStorageItem = (key: string) => {
   return window.localStorage.getItem(key);
 };
 
-export const setLocalStorageItem = (key, value) => {
+export const setLocalStorageItem = (key: string, value: string) => {
   window.localStorage.setItem(key, value);
 };
 

console/src/components/Common/utils/routesUtils.js → console/src/components/Common/utils/routesUtils.ts

@@ -2,60 +2,97 @@
 
 /*** DATA ROUTES ***/
 
-export const getSchemaBaseRoute = schemaName => {
+export const getSchemaBaseRoute = (schemaName: string) => {
   // return `${globals.urlPrefix}/data/schema/${schemaName}`;
   return `/data/schema/${encodeURIComponent(schemaName)}`;
 };
 
-export const getSchemaAddTableRoute = schemaName => {
+export const getSchemaAddTableRoute = (schemaName: string) => {
   return `${getSchemaBaseRoute(schemaName)}/table/add`;
 };
 
-export const getSchemaPermissionsRoute = schemaName => {
+export const getSchemaPermissionsRoute = (schemaName: string) => {
   return `${getSchemaBaseRoute(schemaName)}/permissions`;
 };
 
-const getTableBaseRoute = (schemaName, tableName, isTable) => {
+const getTableBaseRoute = (
+  schemaName: string,
+  tableName: string,
+  isTable: boolean
+) => {
   return `${getSchemaBaseRoute(schemaName)}/${
     isTable ? 'tables' : 'views'
   }/${encodeURIComponent(tableName)}`;
 };
 
-export const getTableBrowseRoute = (schemaName, tableName, isTable) => {
+export const getTableBrowseRoute = (
+  schemaName: string,
+  tableName: string,
+  isTable: boolean
+) => {
   return `${getTableBaseRoute(schemaName, tableName, isTable)}/browse`;
 };
 
-export const getTableInsertRowRoute = (schemaName, tableName, isTable) => {
+export const getTableInsertRowRoute = (
+  schemaName: string,
+  tableName: string,
+  isTable: boolean
+) => {
   return `${getTableBaseRoute(schemaName, tableName, isTable)}/insert`;
 };
 
-export const getTableEditRowRoute = (schemaName, tableName, isTable) => {
+export const getTableEditRowRoute = (
+  schemaName: string,
+  tableName: string,
+  isTable: boolean
+) => {
   return `${getTableBaseRoute(schemaName, tableName, isTable)}/edit`;
 };
 
-export const getTableModifyRoute = (schemaName, tableName, isTable) => {
+export const getTableModifyRoute = (
+  schemaName: string,
+  tableName: string,
+  isTable: boolean
+) => {
   return `${getTableBaseRoute(schemaName, tableName, isTable)}/modify`;
 };
 
-export const getTableRelationshipsRoute = (schemaName, tableName, isTable) => {
+export const getTableRelationshipsRoute = (
+  schemaName: string,
+  tableName: string,
+  isTable: boolean
+) => {
   return `${getTableBaseRoute(schemaName, tableName, isTable)}/relationships`;
 };
 
-export const getTablePermissionsRoute = (schemaName, tableName, isTable) => {
+export const getTablePermissionsRoute = (
+  schemaName: string,
+  tableName: string,
+  isTable: boolean
+) => {
   return `${getTableBaseRoute(schemaName, tableName, isTable)}/permissions`;
 };
 
-export const getFunctionBaseRoute = (schemaName, functionName) => {
+export const getFunctionBaseRoute = (
+  schemaName: string,
+  functionName: string
+) => {
   return `${getSchemaBaseRoute(schemaName)}/functions/${encodeURIComponent(
     functionName
   )}`;
 };
 
-export const getFunctionModifyRoute = (schemaName, functionName) => {
+export const getFunctionModifyRoute = (
+  schemaName: string,
+  functionName: string
+) => {
   return `${getFunctionBaseRoute(schemaName, functionName)}/modify`;
 };
 
-export const getFunctionPermissionsRoute = (schemaName, functionName) => {
+export const getFunctionPermissionsRoute = (
+  schemaName: string,
+  functionName: string
+) => {
   return `${getFunctionBaseRoute(schemaName, functionName)}/permissions`;
 };
 
@@ -75,84 +112,96 @@ export const eventsPrefix = 'events';
 export const scheduledEventsPrefix = 'cron';
 export const adhocEventsPrefix = 'one-off-scheduled-events';
 export const dataEventsPrefix = 'data';
-export const routeType = 'absolute' | 'relative';
+export type RouteType = 'absolute' | 'relative';
 
-export const getSTRoute = (type, relativeRoute) => {
+export const getSTRoute = (
+  type: RouteType = 'absolute',
+  relativeRoute: string
+) => {
   if (type === 'relative') {
     return `${relativeRoute}`;
   }
   return `/${eventsPrefix}/${scheduledEventsPrefix}/${relativeRoute}`;
 };
-export const getETRoute = (type, relativeRoute) => {
+export const getETRoute = (
+  type: RouteType = 'absolute',
+  relativeRoute: string
+) => {
   if (type === 'relative') {
     return `${relativeRoute}`;
   }
   return `/${eventsPrefix}/${dataEventsPrefix}/${relativeRoute}`;
 };
-export const getAdhocEventsRoute = (type, relativeRoute) => {
+export const getAdhocEventsRoute = (
+  type: RouteType = 'absolute',
+  relativeRoute = ''
+) => {
   if (type === 'relative') {
     return `${relativeRoute}`;
   }
   return `/${eventsPrefix}/${adhocEventsPrefix}/${relativeRoute}`;
 };
 
-export const isDataEventsRoute = route => {
+export const isDataEventsRoute = (route: string) => {
   return route.includes(`/${eventsPrefix}/${dataEventsPrefix}`);
 };
-export const isScheduledEventsRoute = route => {
+export const isScheduledEventsRoute = (route: string) => {
   return route.includes(`/${eventsPrefix}/${scheduledEventsPrefix}`);
 };
-export const isAdhocScheduledEventRoute = route => {
+export const isAdhocScheduledEventRoute = (route: string) => {
   return route.includes(`/${eventsPrefix}/${adhocEventsPrefix}`);
 };
-export const getAddSTRoute = type => {
+
+export const getAddSTRoute = (type?: RouteType) => {
   return getSTRoute(type, 'add');
 };
-export const getScheduledEventsLandingRoute = type => {
+export const getScheduledEventsLandingRoute = (type?: RouteType) => {
   return getSTRoute(type, 'manage');
 };
-export const getSTModifyRoute = (stName, type) => {
+export const getSTModifyRoute = (stName: string, type?: RouteType) => {
   return getSTRoute(type, `${stName}/modify`);
 };
-export const getSTPendingEventsRoute = (stName, type) => {
+export const getSTPendingEventsRoute = (stName: string, type?: RouteType) => {
   return getSTRoute(type, `${stName}/pending`);
 };
-export const getSTProcessedEventsRoute = (stName, type) => {
+export const getSTProcessedEventsRoute = (stName: string, type?: RouteType) => {
   return getSTRoute(type, `${stName}/processed`);
 };
-export const getSTInvocationLogsRoute = (stName, type) => {
+export const getSTInvocationLogsRoute = (stName: string, type?: RouteType) => {
   return getSTRoute(type, `${stName}/logs`);
 };
-export const getAddETRoute = type => {
+export const getAddETRoute = (type?: any) => {
   return getETRoute(type, 'add');
 };
-export const getDataEventsLandingRoute = type => {
+
+export const getDataEventsLandingRoute = (type?: RouteType) => {
   return getETRoute(type, 'manage');
 };
-export const getETModifyRoute = (etName, type) => {
+export const getETModifyRoute = (etName: string, type?: RouteType) => {
   return getETRoute(type, `${etName}/modify`);
 };
-export const getETPendingEventsRoute = (etName, type) => {
+export const getETPendingEventsRoute = (etName: string, type?: RouteType) => {
   return getETRoute(type, `${etName}/pending`);
 };
-export const getETProcessedEventsRoute = (etName, type) => {
+export const getETProcessedEventsRoute = (etName: string, type?: RouteType) => {
   return getETRoute(type, `${etName}/processed`);
 };
-export const getETInvocationLogsRoute = (etName, type) => {
+export const getETInvocationLogsRoute = (etName: string, type?: RouteType) => {
   return getETRoute(type, `${etName}/logs`);
 };
-export const getAddAdhocEventRoute = type => {
+
+export const getAddAdhocEventRoute = (type: RouteType) => {
   return getAdhocEventsRoute(type, 'add');
 };
-export const getAdhocEventsLogsRoute = type => {
+export const getAdhocEventsLogsRoute = (type: RouteType) => {
   return getAdhocEventsRoute(type, 'logs');
 };
-export const getAdhocPendingEventsRoute = type => {
+export const getAdhocPendingEventsRoute = (type: RouteType) => {
   return getAdhocEventsRoute(type, 'pending');
 };
-export const getAdhocProcessedEventsRoute = type => {
+export const getAdhocProcessedEventsRoute = (type: RouteType) => {
   return getAdhocEventsRoute(type, 'processed');
 };
-export const getAdhocEventsInfoRoute = type => {
+export const getAdhocEventsInfoRoute = (type: RouteType) => {
   return getAdhocEventsRoute(type, 'info');
 };