Merge pull request #1185 from Agenta-AI/issue-1175/-Loading-variants-…

…not-visible-in-dark-mode

Loading variants not visible in dark mode

agenta-web/src/components/AppSelector/AppSelector.tsx

@@ -1,11 +1,10 @@
 import {useState, useEffect, useMemo} from "react"
 import {useRouter} from "next/router"
 import {PlusOutlined} from "@ant-design/icons"
-import {Input, Modal, ConfigProvider, theme, Spin, Card, Button, notification, Divider} from "antd"
+import {Input, Modal, ConfigProvider, theme, Card, Button, notification, Divider} from "antd"
 import AppCard from "./AppCard"
 import {Template, GenericObject} from "@/lib/Types"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
-import {CloseCircleFilled} from "@ant-design/icons"
 import TipsAndFeatures from "./TipsAndFeatures"
 import Welcome from "./Welcome"
 import {getApikeys, isAppNameInputValid, isDemo, redirectIfNoLLMKeys} from "@/lib/helpers/utils"
@@ -24,6 +23,7 @@ import {useAppsData} from "@/contexts/app.context"
 import {useProfileData} from "@/contexts/profile.context"
 import CreateAppStatusModal from "./modals/CreateAppStatusModal"
 import {usePostHogAg} from "@/hooks/usePostHogAg"
+import ResultComponent from "../ResultComponent/ResultComponent"
 
 type StyleProps = {
     themeMode: "dark" | "light"
@@ -251,13 +251,11 @@ const AppSelector: React.FC = () => {
             <div className={classes.container}>
                 {isLoading ? (
                     <div>
-                        <Spin />
-                        <h1>loading...</h1>
+                        <ResultComponent status={"info"} title="Loading..." spinner={true} />
                     </div>
                 ) : error ? (
                     <div>
-                        <CloseCircleFilled className={classes.closeIcon} />
-                        <h1>failed to load</h1>
+                        <ResultComponent status={"error"} title="Failed to load" />
                     </div>
                 ) : Array.isArray(apps) && apps.length ? (
                     <>

agenta-web/src/components/Playground/Playground.tsx

@@ -15,6 +15,7 @@ import {arrayMove, SortableContext, horizontalListSortingStrategy} from "@dnd-ki
 import DraggableTabNode from "../DraggableTabNode/DraggableTabNode"
 import {useLocalStorage} from "usehooks-ts"
 import TestContextProvider from "./TestContextProvider"
+import ResultComponent from "../ResultComponent/ResultComponent"
 
 const Playground: React.FC = () => {
     const router = useRouter()
@@ -162,8 +163,16 @@ const Playground: React.FC = () => {
         (newRoute) => !newRoute.includes("playground"),
     )
 
-    if (isError) return <div>failed to load variants for app {appId}</div>
-    if (isLoading) return <div>loading variants...</div>
+    if (isError)
+        return (
+            <ResultComponent
+                status="error"
+                title={`Failed to load variants`}
+                subtitle={`App ID: ${appId}`}
+            />
+        )
+    if (isLoading)
+        return <ResultComponent status="info" title="Loading variants..." spinner={true} />
 
     /**
      * Called when the variant is saved for the first time to the backend

agenta-web/src/components/ResultComponent/ResultComponent.tsx

@@ -0,0 +1,16 @@
+import {Result, Spin} from "antd"
+import {ResultStatusType} from "antd/es/result"
+import React from "react"
+
+interface ResultComponentProps {
+    status: ResultStatusType
+    title: string
+    subtitle?: string
+    spinner?: boolean
+}
+
+const ResultComponent: React.FC<ResultComponentProps> = ({status, title, subtitle, spinner}) => {
+    return <Result status={status} title={title} subTitle={subtitle} extra={spinner && <Spin />} />
+}
+
+export default ResultComponent

agenta-web/src/pages/apps/[app_id]/endpoints/index.tsx

@@ -2,11 +2,12 @@ import cURLCode from "@/code_snippets/endpoints/curl"
 import pythonCode from "@/code_snippets/endpoints/python"
 import tsCode from "@/code_snippets/endpoints/typescript"
 import DynamicCodeBlock from "@/components/DynamicCodeBlock/DynamicCodeBlock"
+import ResultComponent from "@/components/ResultComponent/ResultComponent"
 import {Environment, GenericObject, Parameter, Variant} from "@/lib/Types"
 import {useVariant} from "@/lib/hooks/useVariant"
 import {fetchEnvironments, fetchVariants, getAppContainerURL} from "@/lib/services/api"
 import {ApiOutlined, DownOutlined} from "@ant-design/icons"
-import {Alert, Button, Dropdown, Space, Typography} from "antd"
+import {Alert, Button, Dropdown, Empty, Space, Typography} from "antd"
 import {useRouter} from "next/router"
 import {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
@@ -129,19 +130,21 @@ export default function VariantEndpoint() {
     }
 
     if (isVariantsError) {
-        return <div>Failed to load variants</div>
+        return <ResultComponent status={"error"} title="Failed to load variants" />
     }
     if (isVariantsLoading) {
-        return <div>Loading variants...</div>
+        return <ResultComponent status={"info"} title="Loading variants..." spinner={true} />
     }
     if (!variant) {
-        return <div>No variant available</div>
+        return <Empty style={{margin: "50px 0"}} description={"No variants available"} />
     }
     if (isLoading) {
-        return <div>Loading variant...</div>
+        return <ResultComponent status={"info"} title="Loading variants..." spinner={true} />
     }
     if (isError) {
-        return <div>{error?.message || "Error loading variant"}</div>
+        return (
+            <ResultComponent status={"error"} title={error?.message || "Error loading variant"} />
+        )
     }
 
     const params = createParams(inputParams, selectedEnvironment?.name || "none", "add_a_value")

agenta-web/src/pages/apps/[app_id]/testsets/new/upload/index.tsx

@@ -70,8 +70,8 @@ export default function AddANewTestset() {
                 router.push(`/apps/${appId}/testsets`)
             } catch (e: any) {
                 if (
-                    e?.response?.data?.detail?.find(
-                        (item: GenericObject) => item?.loc?.includes("csvdata"),
+                    e?.response?.data?.detail?.find((item: GenericObject) =>
+                        item?.loc?.includes("csvdata"),
                     )
                 )
                     message.error(malformedFileError)