[FEATURE] Create global state object for async requests opensearch-pr…

…oject#491

Signed-off-by: Jovan Cvetkovic <[email protected]>

public/pages/Main/components/Callout.tsx

@@ -13,19 +13,18 @@ import {
   EuiLoadingSpinner,
 } from '@elastic/eui';
 
-export type TCalloutColor = 'primary' | 'success' | 'warning' | 'danger' | undefined;
-export type TCalloutIcon = 'iInCircle' | 'check' | 'help' | 'alert' | undefined;
+export type TCalloutColor = 'primary' | 'success' | 'warning' | 'danger';
+export type TCalloutIcon = 'iInCircle' | 'check' | 'help' | 'alert';
 
 interface ICalloutType {
   color: TCalloutColor;
   iconType: TCalloutIcon;
 }
 
 export interface ICalloutProps {
-  title: string;
+  title: string | JSX.Element;
   message?: string | JSX.Element;
   type?: ICalloutType | TCalloutColor;
-
   closable?: boolean;
   loading?: boolean;
   closeHandler?: (callout?: ICalloutProps) => void;
@@ -40,15 +39,15 @@ export const CallOut = ({
   closeHandler,
 }: ICalloutProps) => {
   const toastTypes: {
-    [Key in TCalloutColor]?: TCalloutIcon;
+    [Key in TCalloutColor]: TCalloutIcon;
   } = {
     primary: 'iInCircle',
     success: 'check',
     warning: 'help',
     danger: 'alert',
   };
 
-  const resolveType = (type?: ICalloutType | TCalloutColor | undefined): ICalloutType => {
+  const resolveType = (type?: ICalloutType | TCalloutColor): ICalloutType => {
     if (type === undefined) {
       return {
         color: 'primary',
@@ -66,8 +65,6 @@ export const CallOut = ({
     }
   };
 
-  const { color, iconType } = resolveType(type);
-
   const closeCallout = () => closeHandler && closeHandler(undefined);
 
   const getTitle = (): JSX.Element => {
@@ -88,6 +85,7 @@ export const CallOut = ({
     );
   };
 
+  const { color, iconType } = resolveType(type);
   return (
     <>
       <EuiCallOut