Merge pull request #2361 from Agenta-AI/AGE-1462/implement-global-con…

…fig-for-swr (frontend)[AGE-1462]: Global configuration setup for swr library
Agenta-AI · Dec 18, 2024 · 7cf02c2 · 7cf02c2
2 parents d5f1073 + cf05746
commit 7cf02c2
Show file tree

Hide file tree

Showing 15 changed files with 59 additions and 41 deletions.
diff --git a/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx b/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx
@@ -6,7 +6,7 @@ import {isDemo} from "@/lib/helpers/utils"
 import {Button, Col, Dropdown, MenuProps, Modal, ModalProps, Row, Spin, message} from "antd"
 import {getErrorMessage} from "@/lib/helpers/errorHandler"
 import {EvaluationType} from "@/lib/enums"
-import {PERMISSION_ERR_MSG} from "@/lib/helpers/axiosConfig"
+import {PERMISSION_ERR_MSG} from "@/lib/api/assets/axiosConfig"
 import {getAllVariantParameters} from "@/lib/helpers/variantHelper"
 import {useRouter} from "next/router"
 import {useAppTheme} from "../Layout/ThemeContextProvider"

diff --git a/agenta-web/src/contexts/app.context.tsx b/agenta-web/src/contexts/app.context.tsx
@@ -45,12 +45,9 @@ const useApps = () => {
     const isMockProjectId = projectId === DEFAULT_UUID
 
     const {selectedOrg, loading} = useOrgData()
+    const shouldFetch = !!user && (!isDemo() || !!selectedOrg?.id)
     const {data, error, isLoading, mutate} = useSWR(
-        !!user
-            ? `${getAgentaApiUrl()}/api/apps?` +
-                  (!isMockProjectId ? `project_id=${projectId}&` : "")
-            : null,
-        !!user ? (isDemo() ? (selectedOrg?.id ? axiosFetcher : () => {}) : axiosFetcher) : null,
+        shouldFetch ? `/api/apps?` + (!isMockProjectId ? `project_id=${projectId}&` : "") : null,
         {
             shouldRetryOnError: false,
         },

diff --git a/agenta-web/src/lib/api/SWRConfig.tsx b/agenta-web/src/lib/api/SWRConfig.tsx
@@ -0,0 +1,19 @@
+import {SWRConfig, type SWRConfiguration} from "swr"
+import axios from "@/lib/api/assets/axiosConfig"
+
+const config: SWRConfiguration = {
+    fetcher: (url: string) => axios.get(url).then((res) => res.data),
+}
+
+const AgSWRConfig = ({
+    children,
+    config: passedConfig = {},
+}: {
+    children: React.ReactNode
+    config?: Partial<SWRConfiguration>
+}) => {
+    const mergedConfig = {...config, ...passedConfig}
+    return <SWRConfig value={mergedConfig}>{children}</SWRConfig>
+}
+
+export default AgSWRConfig
diff --git a/agenta-web/src/lib/helpers/axiosConfig.ts → agenta-web/src/lib/api/assets/axiosConfig.ts b/agenta-web/src/lib/helpers/axiosConfig.ts → agenta-web/src/lib/api/assets/axiosConfig.ts
@@ -1,8 +1,8 @@
 import axiosApi from "axios"
-import {getErrorMessage, globalErrorHandler} from "./errorHandler"
+import {getErrorMessage, globalErrorHandler} from "../../helpers/errorHandler"
 import {signOut} from "supertokens-auth-react/recipe/session"
 import router from "next/router"
-import {getAgentaApiUrl} from "./utils"
+import {getAgentaApiUrl} from "../../helpers/utils"
 import isObject from "lodash/isObject"
 import AlertPopup from "@/components/AlertPopup/AlertPopup"
 

diff --git a/agenta-web/src/lib/hooks/useVariant.ts b/agenta-web/src/lib/hooks/useVariant.ts
@@ -1,7 +1,7 @@
 import {useState, useEffect, useRef} from "react"
 import {Variant, Parameter} from "@/lib/Types"
 import {getAllVariantParameters, updateInputParams} from "@/lib/helpers/variantHelper"
-import {PERMISSION_ERR_MSG} from "../helpers/axiosConfig"
+import {PERMISSION_ERR_MSG} from "../api/assets/axiosConfig"
 import {createNewVariant, fetchVariantLogs, updateVariantParams} from "@/services/playground/api"
 
 /**

diff --git a/agenta-web/src/pages/_app.tsx b/agenta-web/src/pages/_app.tsx
@@ -12,6 +12,7 @@ import ProjectContextProvider from "@/contexts/project.context"
 import "ag-grid-community/styles/ag-grid.css"
 import "ag-grid-community/styles/ag-theme-alpine.css"
 import {Inter} from "next/font/google"
+import AgSWRConfig from "@/lib/api/SWRConfig"
 
 const NoMobilePageWrapper = dynamicComponent("NoMobilePageWrapper/NoMobilePageWrapper")
 const CustomPosthogProvider = dynamic(() => import("@/lib/helpers/analytics/AgPosthogProvider"))
@@ -29,24 +30,26 @@ export default function App({Component, pageProps}: AppProps) {
                 <link rel="shortcut icon" href="/assets/favicon.ico" />
             </Head>
             <main className={`${inter.variable} font-sans`}>
-                <CustomPosthogProvider
-                    config={{
-                        persistence: "localStorage+cookie",
-                    }}
-                >
-                    <ThemeContextProvider>
-                        <ProfileContextProvider>
-                            <ProjectContextProvider>
-                                <AppContextProvider>
-                                    <Layout>
-                                        <Component {...pageProps} />
-                                        <NoMobilePageWrapper />
-                                    </Layout>
-                                </AppContextProvider>
-                            </ProjectContextProvider>
-                        </ProfileContextProvider>
-                    </ThemeContextProvider>
-                </CustomPosthogProvider>
+                <AgSWRConfig>
+                    <CustomPosthogProvider
+                        config={{
+                            persistence: "localStorage+cookie",
+                        }}
+                    >
+                        <ThemeContextProvider>
+                            <ProfileContextProvider>
+                                <ProjectContextProvider>
+                                    <AppContextProvider>
+                                        <Layout>
+                                            <Component {...pageProps} />
+                                            <NoMobilePageWrapper />
+                                        </Layout>
+                                    </AppContextProvider>
+                                </ProjectContextProvider>
+                            </ProfileContextProvider>
+                        </ThemeContextProvider>
+                    </CustomPosthogProvider>
+                </AgSWRConfig>
             </main>
         </>
     )

diff --git a/agenta-web/src/services/api.ts b/agenta-web/src/services/api.ts
@@ -1,5 +1,5 @@
 import {getCurrentProject} from "@/contexts/project.context"
-import axios from "@/lib//helpers/axiosConfig"
+import axios from "@/lib/api/assets/axiosConfig"
 import Session from "supertokens-auth-react/recipe/session"
 import {formatDay} from "@/lib/helpers/dateTimeHelper"
 import {

diff --git a/agenta-web/src/services/app-selector/api/index.ts b/agenta-web/src/services/app-selector/api/index.ts
@@ -1,6 +1,6 @@
 import {getCurrentProject} from "@/contexts/project.context"
 import {AppTemplate} from "@/lib/Types"
-import axios from "@/lib/helpers/axiosConfig"
+import axios from "@/lib/api/assets/axiosConfig"
 import {dynamicContext} from "@/lib/helpers/dynamic"
 import {LlmProvider} from "@/lib/helpers/llmProviders"
 import {getAgentaApiUrl} from "@/lib/helpers/utils"

diff --git a/agenta-web/src/services/deployment/api/index.ts b/agenta-web/src/services/deployment/api/index.ts
@@ -1,6 +1,6 @@
 import {getCurrentProject} from "@/contexts/project.context"
 import {Environment} from "@/lib/Types"
-import axios from "@/lib/helpers/axiosConfig"
+import axios from "@/lib/api/assets/axiosConfig"
 import {getAgentaApiUrl} from "@/lib/helpers/utils"
 
 //Prefix convention:

diff --git a/agenta-web/src/services/evaluations/api/index.ts b/agenta-web/src/services/evaluations/api/index.ts
@@ -1,4 +1,4 @@
-import axios from "@/lib//helpers/axiosConfig"
+import axios from "@/lib/api/assets/axiosConfig"
 import {
     ComparisonResultRow,
     Evaluator,

diff --git a/agenta-web/src/services/human-evaluations/api/index.ts b/agenta-web/src/services/human-evaluations/api/index.ts
@@ -1,4 +1,4 @@
-import axios from "@/lib//helpers/axiosConfig"
+import axios from "@/lib/api/assets/axiosConfig"
 import {
     EvaluationResponseType,
     Evaluation,

diff --git a/agenta-web/src/services/observability/core/index.ts b/agenta-web/src/services/observability/core/index.ts
@@ -1,6 +1,6 @@
 import {getAgentaApiUrl} from "@/lib/helpers/utils"
 import {_AgentaRootsResponse} from "../types"
-import axios from "@/lib/helpers/axiosConfig"
+import axios from "@/lib/api/assets/axiosConfig"
 import {getCurrentProject} from "@/contexts/project.context"
 
 //Prefix convention:

diff --git a/agenta-web/src/services/playground/api/index.ts b/agenta-web/src/services/playground/api/index.ts
@@ -1,6 +1,6 @@
 import {getCurrentProject} from "@/contexts/project.context"
 import {Parameter} from "@/lib/Types"
-import axios from "@/lib/helpers/axiosConfig"
+import axios from "@/lib/api/assets/axiosConfig"
 import {getAgentaApiUrl} from "@/lib/helpers/utils"
 
 //Prefix convention:

diff --git a/agenta-web/src/services/project/index.ts b/agenta-web/src/services/project/index.ts
@@ -1,4 +1,4 @@
-import axios from "@/lib/helpers/axiosConfig"
+import axios from "@/lib/api/assets/axiosConfig"
 import {getAgentaApiUrl} from "@/lib/helpers/utils"
 import {ProjectsResponse} from "./types"
 

diff --git a/agenta-web/src/services/testsets/api/index.ts b/agenta-web/src/services/testsets/api/index.ts
@@ -1,5 +1,5 @@
 import useSWR from "swr"
-import axios from "@/lib/helpers/axiosConfig"
+import axios from "@/lib/api/assets/axiosConfig"
 import {getAgentaApiUrl} from "@/lib/helpers/utils"
 import {axiosFetcher} from "@/services/api"
 import {getCurrentProject} from "@/contexts/project.context"
@@ -14,11 +14,10 @@ import {getCurrentProject} from "@/contexts/project.context"
 export const useLoadTestsetsList = () => {
     const {projectId} = getCurrentProject()
 
-    const {data, error, mutate, isLoading} = useSWR(
-        `${getAgentaApiUrl()}/api/testsets?project_id=${projectId}`,
-        axiosFetcher,
-        {revalidateOnFocus: false, shouldRetryOnError: false},
-    )
+    const {data, error, mutate, isLoading} = useSWR(`/api/testsets?project_id=${projectId}`, {
+        revalidateOnFocus: false,
+        shouldRetryOnError: false,
+    })
 
     return {
         testsets: data || [],