@devtron-labs/devtron-fe-common-lib 0.0.7-beta-39 → 0.0.7-beta-42

package/dist/Common/DeleteComponentModal/DeleteComponent.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DeleteComponentProps } from './types';
+declare function DeleteComponent({ setDeleting, toggleConfirmation, deleteComponent, title, component, payload, confirmationDialogDescription, redirectTo, url, reload, configuration, closeCustomComponent, }: DeleteComponentProps): JSX.Element;
+export default DeleteComponent;

package/dist/Common/DeleteComponentModal/types.d.ts

@@ -0,0 +1,15 @@
+export interface DeleteComponentProps {
+    setDeleting: (boolean: any) => void;
+    toggleConfirmation: any;
+    deleteComponent: (any: any) => Promise<any>;
+    title: string;
+    component: string;
+    payload: any;
+    confirmationDialogDescription?: string;
+    redirectTo?: boolean;
+    url?: string;
+    reload?: () => void;
+    configuration?: string;
+    dataTestid?: string;
+    closeCustomComponent?: () => void;
+}

package/dist/Common/Helper.d.ts

@@ -17,4 +17,26 @@ export declare function not(e: any): boolean;
 export declare function useEffectAfterMount(cb: any, dependencies: any): void;
 export declare function getCookie(sKey: any): string;
 export declare function getLoginInfo(): any;
+export declare function useForm(stateSchema: any, validationSchema: {}, callback: any): {
+    state: any;
+    disable: boolean;
+    handleOnChange: (event: any) => void;
+    handleOnSubmit: (event: any) => void;
+};
+export declare function CustomInput({ name, value, error, onChange, onBlur, onFocus, label, type, disabled, autoComplete, labelClassName, placeholder, tabIndex, dataTestid, }: {
+    name: any;
+    value: any;
+    error: any;
+    onChange: any;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+    label: any;
+    type?: string;
+    disabled?: boolean;
+    autoComplete?: string;
+    labelClassName?: string;
+    placeholder?: string;
+    tabIndex?: number;
+    dataTestid?: string;
+}): JSX.Element;
 export {};

package/dist/index.js

@@ -503,15 +503,15 @@ function styleInject(css, ref) {
 var css_248z$6 = ".empty-state {\n  height: 100%;\n}\n.empty-state img {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n  max-width: 250px;\n}\n.empty-state svg {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n}\n.empty-state h1,\n.empty-state h2,\n.empty-state h3,\n.empty-state h4,\n.empty-state h5,\n.empty-state h6 {\n  color: var(--N900);\n}\n.empty-state .subtitle {\n  font-size: 13px;\n  width: 300px;\n  font-weight: 400;\n  text-align: center;\n  line-height: 1.5;\n  margin-bottom: 20px;\n}\n.empty-state .cta {\n  height: 36px;\n}\n.empty-state p {\n  width: 300px;\n  text-align: center;\n  font-size: 13px;\n  color: var(--N700);\n}\n.empty-state strong {\n  font-size: 16px;\n  margin-bottom: 4px;\n  color: var(--N900);\n  font-weight: normal;\n}\n.empty-state .select-popup {\n  height: min-content;\n  max-height: 250px;\n  overflow: auto;\n  padding: 8px 0;\n}\n.empty-state .empty-state__loader {\n  width: 34px;\n  height: 34px;\n  margin-bottom: 16px;\n}\n.empty-state .empty-state__loading-text {\n  font-size: 12px;\n  width: 200px;\n  font-weight: normal;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: 1.5;\n  letter-spacing: normal;\n  text-align: center;\n  color: var(--N900);\n}\n.empty-state .button__icon {\n  width: 16px;\n  height: 16px;\n  margin-left: 8px;\n}";
 styleInject(css_248z$6);
 
-var _g$2;
-function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
+var _g$3;
+function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
 var SvgIcProgressing = function SvgIcProgressing(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     width: "1em",
     height: "1em"
-  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none"
   }, /*#__PURE__*/React__namespace.createElement("animateTransform", {
     attributeName: "transform",
@@ -558,8 +558,8 @@ EmptyState.Loading = Loading;
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-function _extends$9() {
-  _extends$9 = Object.assign || function (target) {
+function _extends$a() {
+  _extends$a = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -573,7 +573,7 @@ function _extends$9() {
     return target;
   };
 
-  return _extends$9.apply(this, arguments);
+  return _extends$a.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose$2(source, excluded) {
@@ -1299,7 +1299,7 @@ function ProgressBar(_ref) {
       isIn = _ref.isIn,
       theme = _ref.theme;
 
-  var style = _extends$9({}, userStyle, {
+  var style = _extends$a({}, userStyle, {
     animationDuration: delay + "ms",
     animationPlayState: isRunning ? 'running' : 'paused',
     opacity: hide ? 0 : 1
@@ -1576,9 +1576,9 @@ var ToastContainer = function ToastContainer(props) {
     ,
     id: containerId
   }, getToastToRender(function (position, toastList) {
-    var containerStyle = !toastList.length ? _extends$9({}, style, {
+    var containerStyle = !toastList.length ? _extends$a({}, style, {
       pointerEvents: 'none'
-    }) : _extends$9({}, style);
+    }) : _extends$a({}, style);
     return React.createElement("div", {
       className: getClassName(position),
       style: containerStyle,
@@ -1685,7 +1685,7 @@ function dispatchToast(content, options) {
 
 
 function mergeOptions(type, options) {
-  return _extends$9({}, options, {
+  return _extends$a({}, options, {
     type: options && options.type || type,
     toastId: getToastId(options)
   });
@@ -1702,7 +1702,7 @@ function toast(content, options) {
 }
 
 toast.loading = function (content, options) {
-  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$9({
+  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$a({
     isLoading: true,
     autoClose: false,
     closeOnClick: false,
@@ -1718,7 +1718,7 @@ function handlePromise(promise, _ref2, options) {
   var id;
 
   if (pending) {
-    id = isStr(pending) ? toast.loading(pending, options) : toast.loading(pending.render, _extends$9({}, options, pending));
+    id = isStr(pending) ? toast.loading(pending, options) : toast.loading(pending.render, _extends$a({}, options, pending));
   }
 
   var resetParams = {
@@ -1737,7 +1737,7 @@ function handlePromise(promise, _ref2, options) {
       return;
     }
 
-    var baseParams = _extends$9({
+    var baseParams = _extends$a({
       type: type
     }, resetParams, options, {
       data: result
@@ -1748,10 +1748,10 @@ function handlePromise(promise, _ref2, options) {
     } : input; // if the id is set we know that it's an update
 
     if (id) {
-      toast.update(id, _extends$9({}, baseParams, params));
+      toast.update(id, _extends$a({}, baseParams, params));
     } else {
       // using toast.promise without loading
-      toast(params.render, _extends$9({}, baseParams, params));
+      toast(params.render, _extends$a({}, baseParams, params));
     }
 
     return result;
@@ -1775,7 +1775,7 @@ toast.warning = /*#__PURE__*/createToastByType(TYPE.WARNING);
 toast.warn = toast.warning;
 
 toast.dark = function (content, options) {
-  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$9({
+  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$a({
     theme: 'dark'
   }, options)));
 };
@@ -1832,7 +1832,7 @@ toast.update = function (toastId, options) {
       var oldOptions = toast.props,
           oldContent = toast.content;
 
-      var nextOptions = _extends$9({}, oldOptions, options, {
+      var nextOptions = _extends$a({}, oldOptions, options, {
         toastId: options.toastId || toastId,
         updateId: generateToastId()
       });
@@ -3927,6 +3927,28 @@ function captureException(exception, captureContext) {
   return getCurrentHub().captureException(exception, { captureContext });
 }
 
+var _g$2;
+function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+var SvgIcWarning = function SvgIcWarning(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 32 32"
+  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M0 0h32v32H0z"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#FFCB5D",
+    d: "M18.315 5.052 29.72 25.01A2.667 2.667 0 0 1 27.405 29H4.595a2.667 2.667 0 0 1-2.315-3.99L13.685 5.052a2.667 2.667 0 0 1 4.63 0z"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#FFF",
+    d: "M16 22.667a1.333 1.333 0 1 1 0 2.666 1.333 1.333 0 0 1 0-2.666zM16 12c.736 0 1.333.597 1.333 1.333v6.334a1.333 1.333 0 1 1-2.666 0v-6.334c0-.736.597-1.333 1.333-1.333z"
+  }))));
+};
+
 toast.configure({
     autoClose: 3000,
     hideProgressBar: true,
@@ -4065,6 +4087,110 @@ function getLoginInfo() {
             return null;
         }
     }
+}
+function useForm(stateSchema, validationSchema, callback) {
+    if (validationSchema === void 0) { validationSchema = {}; }
+    var _a = __read(React.useState(stateSchema), 2), state = _a[0], setState = _a[1];
+    var _b = __read(React.useState(true), 2), disable = _b[0], setDisable = _b[1];
+    var _c = __read(React.useState(false), 2), isDirty = _c[0], setIsDirty = _c[1];
+    // Disable button in initial render.
+    React.useEffect(function () {
+        setDisable(true);
+    }, []);
+    // For every changed in our state this will be fired
+    // To be able to disable the button
+    React.useEffect(function () {
+        if (isDirty) {
+            setDisable(validateState(state));
+        }
+    }, [state, isDirty]);
+    // Used to disable submit button if there's an error in state
+    // or the required field in state has no value.
+    // Wrapped in useCallback to cached the function to avoid intensive memory leaked
+    // in every re-render in component
+    var validateState = React.useCallback(function (state) {
+        //check errors in all fields
+        var hasErrorInState = Object.keys(validationSchema).some(function (key) {
+            var isInputFieldRequired = validationSchema[key].required;
+            var stateValue = state[key].value; // state value
+            var stateError = state[key].error; // state error
+            return (isInputFieldRequired && !stateValue) || stateError;
+        });
+        return hasErrorInState;
+    }, [state, validationSchema]);
+    function validateField(name, value) {
+        if (validationSchema[name].required) {
+            if (!value) {
+                return 'This is a required field.';
+            }
+        }
+        function _validateSingleValidator(validator, value) {
+            if (value && !validator.regex.test(value)) {
+                return false;
+            }
+            return true;
+        }
+        // single validator
+        var _validator = validationSchema[name].validator;
+        if (_validator && typeof _validator === 'object') {
+            if (!_validateSingleValidator(_validator, value)) {
+                return _validator.error;
+            }
+        }
+        // multiple validators
+        var _validators = validationSchema[name].validators;
+        if (_validators && typeof _validators === 'object' && Array.isArray(_validators)) {
+            var errors_1 = [];
+            _validators.forEach(function (_validator) {
+                if (!_validateSingleValidator(_validator, value)) {
+                    errors_1.push(_validator.error);
+                }
+            });
+            if (errors_1.length > 0) {
+                return errors_1;
+            }
+        }
+        return '';
+    }
+    var handleOnChange = React.useCallback(function (event) {
+        setIsDirty(true);
+        var _a = event.target, name = _a.name, value = _a.value;
+        var error = validateField(name, value);
+        setState(function (prevState) {
+            var _a;
+            return (__assign(__assign({}, prevState), (_a = {}, _a[name] = { value: value, error: error }, _a)));
+        });
+    }, [validationSchema]);
+    var handleOnSubmit = function (event) {
+        event.preventDefault();
+        var newState = Object.keys(validationSchema).reduce(function (agg, curr) {
+            agg[curr] = __assign(__assign({}, state[curr]), { error: validateField(curr, state[curr].value) });
+            return agg;
+        }, state);
+        if (!validateState(newState)) {
+            callback(state);
+        }
+        else {
+            setState(__assign({}, newState));
+        }
+    };
+    return { state: state, disable: disable, handleOnChange: handleOnChange, handleOnSubmit: handleOnSubmit };
+}
+function handleError(error) {
+    if (!error) {
+        return [];
+    }
+    if (!Array.isArray(error)) {
+        return [error];
+    }
+    return error;
+}
+function CustomInput(_a) {
+    var name = _a.name, value = _a.value, error = _a.error, onChange = _a.onChange, _b = _a.onBlur, onBlur = _b === void 0 ? function (e) { } : _b, _c = _a.onFocus, onFocus = _c === void 0 ? function (e) { } : _c, label = _a.label, _d = _a.type, type = _d === void 0 ? 'text' : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e; _a.autoComplete; var _g = _a.labelClassName, labelClassName = _g === void 0 ? '' : _g, _h = _a.placeholder, placeholder = _h === void 0 ? '' : _h, _j = _a.tabIndex, tabIndex = _j === void 0 ? 1 : _j, _k = _a.dataTestid, dataTestid = _k === void 0 ? '' : _k;
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex column left top" }, { children: [jsxRuntime.jsx("label", __assign({ className: "form__label ".concat(labelClassName) }, { children: label })), jsxRuntime.jsx("input", { "data-testid": dataTestid, type: type, name: name, autoComplete: "off", className: "form__input", onChange: function (e) {
+                    e.persist();
+                    onChange(e);
+                }, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, value: value, disabled: disabled, tabIndex: tabIndex }), handleError(error).map(function (err) { return (jsxRuntime.jsxs("div", __assign({ className: "form__error" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), err] }))); })] })));
 }
 
 function Progressing(_a) {
@@ -16585,6 +16711,7 @@ exports.Checkbox = Checkbox;
 exports.ClearIndicator = ClearIndicator;
 exports.ConditionalWrap = ConditionalWrap;
 exports.ConfirmationDialog = ConfirmationDialog;
+exports.CustomInput = CustomInput;
 exports.CustomSelect = CustomSelect;
 exports.DEFAULT_TAG_DATA = DEFAULT_TAG_DATA;
 exports.DOCUMENTATION = DOCUMENTATION;
@@ -16656,4 +16783,5 @@ exports.toastAccessDenied = toastAccessDenied;
 exports.trash = trash;
 exports.useBreadcrumb = useBreadcrumb;
 exports.useEffectAfterMount = useEffectAfterMount;
+exports.useForm = useForm;
 exports.useThrottledEffect = useThrottledEffect;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.7-beta-39",
+    "version": "0.0.7-beta-42",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Assets/Icon/ic-warning.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h32v32H0z"/>
+        <path fill="#FFCB5D" d="M18.315 5.052L29.72 25.01A2.667 2.667 0 0 1 27.405 29H4.595a2.667 2.667 0 0 1-2.315-3.99L13.685 5.052a2.667 2.667 0 0 1 4.63 0z"/>
+        <path fill="#FFF" d="M16 22.667a1.333 1.333 0 1 1 0 2.666 1.333 1.333 0 0 1 0-2.666zM16 12c.736 0 1.333.597 1.333 1.333v6.334a1.333 1.333 0 1 1-2.666 0v-6.334c0-.736.597-1.333 1.333-1.333z"/>
+    </g>
+</svg>

package/src/Common/DeleteComponentModal/DeleteComponent.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react'
+import { toast } from 'react-toastify'
+import { useHistory } from 'react-router'
+import info from '../assets/icons/ic-info-filled.svg'
+import ConfirmationDialog from '../Dialogs/ConfirmationDialog'
+import { DeleteDialog } from '../Dialogs'
+import { ServerErrors } from '../ServerError'
+import { DeleteComponentProps } from './types'
+
+function DeleteComponent({
+    setDeleting,
+    toggleConfirmation,
+    deleteComponent,
+    title,
+    component,
+    payload,
+    confirmationDialogDescription = '',
+    redirectTo = false,
+    url = '',
+    reload,
+    configuration = '',
+    closeCustomComponent,
+}: DeleteComponentProps) {
+    const [showCannotDeleteDialogModal, setCannotDeleteDialogModal] = useState(false)
+    const { push } = useHistory()
+
+    async function handleDelete() {
+        setDeleting(true)
+        try {
+            await deleteComponent(payload)
+            toast.success('Successfully deleted')
+            toggleConfirmation(false)
+            if (redirectTo) {
+                push(url)
+            } else {
+                reload()
+            }
+            if (typeof closeCustomComponent === 'function') {
+                closeCustomComponent()
+            }
+        } catch (serverError) {
+            if (serverError instanceof ServerErrors && serverError.code === 500) {
+                setCannotDeleteDialogModal(true)
+            }
+        } finally {
+            setDeleting(false)
+        }
+    }
+
+    const handleConfirmation = () => {
+        setCannotDeleteDialogModal(false)
+        toggleConfirmation(false)
+        if (typeof closeCustomComponent === 'function') {
+            closeCustomComponent()
+        }
+    }
+
+    const renderCannotDeleteDialogModal = () => {
+        return (
+            <ConfirmationDialog className="confirmation-dialog__body--w-360">
+                <ConfirmationDialog.Icon src={info} />
+                <ConfirmationDialog.Body title={`Cannot delete ${component} '${title}'`} />
+                <p className="fs-13 cn-7 ">{confirmationDialogDescription}</p>
+                <ConfirmationDialog.ButtonGroup>
+                    <button type="button" className="cta" onClick={handleConfirmation}>
+                        Okay
+                    </button>
+                </ConfirmationDialog.ButtonGroup>
+            </ConfirmationDialog>
+        )
+    }
+
+    const renderDeleteDialog = () => {
+        return (
+            <DeleteDialog
+                title={`Delete ${component} '${title}'`}
+                delete={handleDelete}
+                closeDelete={() => toggleConfirmation(false)}
+                dataTestId="delete-dialog"
+            >
+                <DeleteDialog.Description>
+                    <p>Are you sure you want to delete this {configuration ? configuration : component}? </p>
+                </DeleteDialog.Description>
+            </DeleteDialog>
+        )
+    }
+    return (
+        <div>
+            {!showCannotDeleteDialogModal && renderDeleteDialog()}
+            {showCannotDeleteDialogModal && renderCannotDeleteDialogModal()}
+        </div>
+    )
+}
+
+export default DeleteComponent

package/src/Common/DeleteComponentModal/types.ts

@@ -0,0 +1,15 @@
+export interface DeleteComponentProps {
+    setDeleting: (boolean) => void
+    toggleConfirmation: any
+    deleteComponent: (any) => Promise<any>
+    title: string
+    component: string
+    payload: any
+    confirmationDialogDescription?: string
+    redirectTo?: boolean
+    url?: string
+    reload?: () => void
+    configuration?: string
+    dataTestid?: string
+    closeCustomComponent?: () => void
+}

package/src/Common/Helper.tsx

@@ -1,48 +1,49 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { ServerErrors } from './ServerError'
 import { toast } from 'react-toastify'
 import * as Sentry from '@sentry/browser'
 import { toastAccessDenied } from './ToastBody'
 import { ERROR_EMPTY_SCREEN, TOKEN_COOKIE_NAME } from './Constants'
+import { ReactComponent as FormError } from '../Assets/Icon/ic-warning.svg'
 
 toast.configure({
-  autoClose: 3000,
-  hideProgressBar: true,
-  pauseOnHover: true,
-  pauseOnFocusLoss: true,
-  closeOnClick: false,
-  newestOnTop: true,
-  toastClassName: 'devtron-toast',
-  bodyClassName: 'devtron-toast__body',
+    autoClose: 3000,
+    hideProgressBar: true,
+    pauseOnHover: true,
+    pauseOnFocusLoss: true,
+    closeOnClick: false,
+    newestOnTop: true,
+    toastClassName: 'devtron-toast',
+    bodyClassName: 'devtron-toast__body',
 })
 
 export function showError(serverError, showToastOnUnknownError = true, hideAccessError = false) {
-  if (serverError instanceof ServerErrors && Array.isArray(serverError.errors)) {
-      serverError.errors.map(({ userMessage, internalMessage }) => {
-          if (
-              serverError.code === 403 &&
-              (userMessage === ERROR_EMPTY_SCREEN.UNAUTHORIZED || userMessage === ERROR_EMPTY_SCREEN.FORBIDDEN)
-          ) {
-              if (!hideAccessError) {
-                  toastAccessDenied()
-              }
-          } else {
-              toast.error(userMessage || internalMessage)
-          }
-      })
-  } else {
-      if (serverError.code !== 403 && serverError.code !== 408) {
-          Sentry.captureException(serverError)
-      }
-
-      if (showToastOnUnknownError) {
-          if (serverError.message) {
-              toast.error(serverError.message)
-          } else {
-              toast.error('Some Error Occurred')
-          }
-      }
-  }
+    if (serverError instanceof ServerErrors && Array.isArray(serverError.errors)) {
+        serverError.errors.map(({ userMessage, internalMessage }) => {
+            if (
+                serverError.code === 403 &&
+                (userMessage === ERROR_EMPTY_SCREEN.UNAUTHORIZED || userMessage === ERROR_EMPTY_SCREEN.FORBIDDEN)
+            ) {
+                if (!hideAccessError) {
+                    toastAccessDenied()
+                }
+            } else {
+                toast.error(userMessage || internalMessage)
+            }
+        })
+    } else {
+        if (serverError.code !== 403 && serverError.code !== 408) {
+            Sentry.captureException(serverError)
+        }
+
+        if (showToastOnUnknownError) {
+            if (serverError.message) {
+                toast.error(serverError.message)
+            } else {
+                toast.error('Some Error Occurred')
+            }
+        }
+    }
 }
 
 interface ConditionalWrapper<T> {
@@ -167,4 +168,166 @@ export function getLoginInfo() {
             return null
         }
     }
-}
+}
+
+export function useForm(stateSchema, validationSchema = {}, callback) {
+    const [state, setState] = useState(stateSchema)
+    const [disable, setDisable] = useState(true)
+    const [isDirty, setIsDirty] = useState(false)
+
+    // Disable button in initial render.
+    useEffect(() => {
+        setDisable(true)
+    }, [])
+
+    // For every changed in our state this will be fired
+    // To be able to disable the button
+    useEffect(() => {
+        if (isDirty) {
+            setDisable(validateState(state))
+        }
+    }, [state, isDirty])
+
+    // Used to disable submit button if there's an error in state
+    // or the required field in state has no value.
+    // Wrapped in useCallback to cached the function to avoid intensive memory leaked
+    // in every re-render in component
+    const validateState = useCallback(
+        (state) => {
+            //check errors in all fields
+            const hasErrorInState = Object.keys(validationSchema).some((key) => {
+                const isInputFieldRequired = validationSchema[key].required
+                const stateValue = state[key].value // state value
+                const stateError = state[key].error // state error
+                return (isInputFieldRequired && !stateValue) || stateError
+            })
+            return hasErrorInState
+        },
+        [state, validationSchema],
+    )
+
+    function validateField(name, value): string | string[] {
+        if (validationSchema[name].required) {
+            if (!value) {
+                return 'This is a required field.'
+            }
+        }
+
+        function _validateSingleValidator(validator, value) {
+            if (value && !validator.regex.test(value)) {
+                return false
+            }
+            return true
+        }
+
+        // single validator
+        let _validator = validationSchema[name].validator
+        if (_validator && typeof _validator === 'object') {
+            if (!_validateSingleValidator(_validator, value)) {
+                return _validator.error
+            }
+        }
+
+        // multiple validators
+        let _validators = validationSchema[name].validators
+        if (_validators && typeof _validators === 'object' && Array.isArray(_validators)) {
+            let errors = []
+            _validators.forEach((_validator) => {
+                if (!_validateSingleValidator(_validator, value)) {
+                    errors.push(_validator.error)
+                }
+            })
+            if (errors.length > 0) {
+                return errors
+            }
+        }
+
+        return ''
+    }
+
+    const handleOnChange = useCallback(
+        (event) => {
+            setIsDirty(true)
+
+            const { name, value } = event.target
+            let error = validateField(name, value)
+            setState((prevState) => ({
+                ...prevState,
+                [name]: { value, error },
+            }))
+        },
+        [validationSchema],
+    )
+
+    const handleOnSubmit = (event) => {
+        event.preventDefault()
+        const newState = Object.keys(validationSchema).reduce((agg, curr) => {
+            agg[curr] = { ...state[curr], error: validateField(curr, state[curr].value) }
+            return agg
+        }, state)
+        if (!validateState(newState)) {
+            callback(state)
+        } else {
+            setState({ ...newState })
+        }
+    }
+    return { state, disable, handleOnChange, handleOnSubmit }
+}
+
+function handleError(error: any): any[] {
+    if (!error) {
+        return []
+    }
+
+    if (!Array.isArray(error)) {
+        return [error]
+    }
+
+    return error
+}
+
+export function CustomInput({
+    name,
+    value,
+    error,
+    onChange,
+    onBlur = (e) => {},
+    onFocus = (e) => {},
+    label,
+    type = 'text',
+    disabled = false,
+    autoComplete = 'off',
+    labelClassName = '',
+    placeholder = '',
+    tabIndex = 1,
+    dataTestid = '',
+}) {
+    return (
+        <div className="flex column left top">
+            <label className={`form__label ${labelClassName}`}>{label}</label>
+            <input
+                data-testid={dataTestid}
+                type={type}
+                name={name}
+                autoComplete="off"
+                className="form__input"
+                onChange={(e) => {
+                    e.persist()
+                    onChange(e)
+                }}
+                onBlur={onBlur}
+                onFocus={onFocus}
+                placeholder={placeholder}
+                value={value}
+                disabled={disabled}
+                tabIndex={tabIndex}
+            />
+            {handleError(error).map((err) => (
+                <div className="form__error">
+                    <FormError className="form__icon form__icon--error" />
+                    {err}
+                </div>
+            ))}
+        </div>
+    )
+}