From 3a7b84aed86ed6bffb55447a3c372a2636e5b3a5 Mon Sep 17 00:00:00 2001
From: Venkata Raviteja Gullapudi <venkataravitejagullapudi@gmail.com>
Date: Sat, 16 Mar 2024 12:35:17 +0530
Subject: [PATCH] fix: modal instance fallback and respective types

---
 agenta-web/src/components/AlertPopup/AlertPopup.tsx | 7 +++++--
 agenta-web/src/contexts/app.context.tsx             | 6 +++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/agenta-web/src/components/AlertPopup/AlertPopup.tsx b/agenta-web/src/components/AlertPopup/AlertPopup.tsx
index fc352416b6..679340b135 100644
--- a/agenta-web/src/components/AlertPopup/AlertPopup.tsx
+++ b/agenta-web/src/components/AlertPopup/AlertPopup.tsx
@@ -1,8 +1,9 @@
 import React, {ReactNode} from "react"
-import {ModalFuncProps} from "antd"
+import {Modal, ModalFuncProps} from "antd"
 import {ExclamationCircleOutlined} from "@ant-design/icons"
 import {globalErrorHandler} from "@/lib/helpers/errorHandler"
 import {getAppValues, useAppsData} from "@/contexts/app.context"
+import {HookAPI} from "antd/es/modal/useModal"
 
 function handleCb(cb: AlertPopupProps["onOk"]) {
     if (typeof cb !== "function") return cb
@@ -20,6 +21,7 @@ function handleCb(cb: AlertPopupProps["onOk"]) {
 export type AlertPopupProps = ModalFuncProps & {
     message: ReactNode
     cancellable?: boolean
+    type?: keyof HookAPI
 }
 
 export default function AlertPopup({
@@ -34,8 +36,9 @@ export default function AlertPopup({
     ...ModalProps
 }: AlertPopupProps) {
     const {modalInstance} = getAppValues()
+    const modal = modalInstance || Modal
 
-    return modalInstance[type || "confirm"]({
+    return modal[type || "confirm"]({
         title,
         content: message,
         okText,
diff --git a/agenta-web/src/contexts/app.context.tsx b/agenta-web/src/contexts/app.context.tsx
index 12f3d8089d..7cf2990e8d 100644
--- a/agenta-web/src/contexts/app.context.tsx
+++ b/agenta-web/src/contexts/app.context.tsx
@@ -5,6 +5,7 @@ import {useRouter} from "next/router"
 import {PropsWithChildren, createContext, useContext, useEffect, useMemo, useState} from "react"
 import useSWR from "swr"
 import {dynamicContext} from "@/lib/helpers/dynamic"
+import {HookAPI} from "antd/es/modal/useModal"
 
 type AppContextType = {
     currentApp: ListAppsItem | null
@@ -13,7 +14,7 @@ type AppContextType = {
     isLoading: boolean
     mutate: () => void
 
-    modalInstance: any
+    modalInstance?: HookAPI
     setModalInstance: (context: any) => void
 }
 
@@ -24,7 +25,6 @@ const initialValues: AppContextType = {
     isLoading: false,
     mutate: () => {},
 
-    modalInstance: null,
     setModalInstance: (context) => {},
 }
 
@@ -74,7 +74,7 @@ const AppContextProvider: React.FC<PropsWithChildren> = ({children}) => {
         [apps, appId],
     )
 
-    const [modalInstance, setModalInstance] = useState(null)
+    const [modalInstance, setModalInstance] = useState()
 
     appContextValues.currentApp = currentApp
     appContextValues.apps = apps