From 750e26b65386161ab8e7ace2935d28b7a78ba375 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sat, 7 Dec 2024 20:40:49 +0100
Subject: [PATCH] enhancement(frontend): dynamically imported modals

---
 .../components/ApplicationManagementSection.tsx |  6 ++++--
 .../components/pages/app-management/index.tsx   | 17 +++++++++++------
 .../src/pages/apps/[app_id]/overview/index.tsx  |  4 ++--
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/agenta-web/src/components/pages/app-management/components/ApplicationManagementSection.tsx b/agenta-web/src/components/pages/app-management/components/ApplicationManagementSection.tsx
index bc1bb8c4fc..f24f6f35d4 100644
--- a/agenta-web/src/components/pages/app-management/components/ApplicationManagementSection.tsx
+++ b/agenta-web/src/components/pages/app-management/components/ApplicationManagementSection.tsx
@@ -11,8 +11,10 @@ import {createUseStyles} from "react-jss"
 import usePagination from "@/hooks/usePagination"
 import EmptyAppView from "./EmptyAppView"
 import NoResultsFound from "@/components/NoResultsFound/NoResultsFound"
-import DeleteAppModal from "../modals/DeleteAppModal"
-import EditAppModal from "../modals/EditAppModal"
+import {dynamicComponent} from "@/lib/helpers/dynamic"
+
+const DeleteAppModal: any = dynamicComponent("pages/app-management/modals/DeleteAppModal")
+const EditAppModal: any = dynamicComponent("pages/app-management/modals/EditAppModal")
 
 interface ApplicationManagementSectionProps {
     selectedOrg: any
diff --git a/agenta-web/src/components/pages/app-management/index.tsx b/agenta-web/src/components/pages/app-management/index.tsx
index ea449409b1..3accc281d2 100644
--- a/agenta-web/src/components/pages/app-management/index.tsx
+++ b/agenta-web/src/components/pages/app-management/index.tsx
@@ -4,13 +4,9 @@ import {Template, GenericObject, StyleProps, JSSTheme} from "@/lib/Types"
 import {isDemo, redirectIfNoLLMKeys} from "@/lib/helpers/utils"
 import {createAndStartTemplate, fetchAllTemplates, deleteApp} from "@/services/app-selector/api"
 import {waitForAppToStart} from "@/services/api"
-import AddAppFromTemplatedModal from "./modals/AddAppFromTemplateModal"
-import MaxAppModal from "./modals/MaxAppModal"
-import WriteOwnAppModal from "./modals/WriteOwnAppModal"
 import {createUseStyles} from "react-jss"
 import {useAppsData} from "@/contexts/app.context"
 import {useProfileData} from "@/contexts/profile.context"
-import CreateAppStatusModal from "./modals/CreateAppStatusModal"
 import {usePostHogAg} from "@/hooks/usePostHogAg"
 import {LlmProvider, getAllProviderLlmKeys} from "@/lib/helpers/llmProviders"
 import {dynamicComponent, dynamicContext} from "@/lib/helpers/dynamic"
@@ -19,10 +15,19 @@ import {useAppTheme} from "@/components/Layout/ThemeContextProvider"
 import HelpAndSupportSection from "./components/HelpAndSupportSection"
 import GetStartedSection from "./components/GetStartedSection"
 import ApplicationManagementSection from "./components/ApplicationManagementSection"
-import SetupTracingModal from "./modals/SetupTracingModal"
 import ResultComponent from "@/components/ResultComponent/ResultComponent"
 import {useProjectData} from "@/contexts/project.context"
 
+const CreateAppStatusModal: any = dynamicComponent(
+    "pages/app-management/modals/CreateAppStatusModal",
+)
+const AddAppFromTemplatedModal: any = dynamicComponent(
+    "pages/app-management/modals/AddAppFromTemplatedModal",
+)
+const MaxAppModal: any = dynamicComponent("pages/app-management/modals/MaxAppModal")
+const WriteOwnAppModal: any = dynamicComponent("pages/app-management/modals/WriteOwnAppModal")
+const SetupTracingModal: any = dynamicComponent("pages/app-management/modals/SetupTracingModal")
+
 const ObservabilityDashboardSection: any = dynamicComponent(
     "pages/app-management/components/ObservabilityDashboardSection",
 )
@@ -238,7 +243,7 @@ const AppManagement: React.FC = () => {
                 templateId={templateId}
                 appNameExist={appNameExist}
                 setNewApp={setNewApp}
-                onCardClick={(template) => {
+                onCardClick={(template: Template) => {
                     setTemplateId(template.id)
                 }}
                 handleTemplateCardClick={handleTemplateCardClick}
diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
index e297886191..edfb2f5951 100644
--- a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -16,12 +16,12 @@ import {Button, Dropdown, Space, Typography} from "antd"
 import {useRouter} from "next/router"
 import {useCallback, useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
-import DeleteAppModal from "@/components/pages/app-management/modals/DeleteAppModal"
-import EditAppModal from "@/components/pages/app-management/modals/EditAppModal"
 
 const ObservabilityOverview: any = dynamicComponent(
     "pages/overview/observability/ObservabilityOverview",
 )
+const DeleteAppModal: any = dynamicComponent("pages/app-management/modals/DeleteAppModal")
+const EditAppModal: any = dynamicComponent("pages/app-management/modals/EditAppModal")
 
 const {Title} = Typography