add backend tests to admin page

src/backend/accounts/meta.ts

@@ -1,6 +1,7 @@
 import { ofetch } from "ofetch";
 
 export interface MetaResponse {
+  version: string;
   name: string;
   description?: string;
   hasCaptcha: boolean;

src/pages/admin/AdminPage.tsx

@@ -5,6 +5,8 @@ import { ConfigValuesPart } from "@/pages/parts/admin/ConfigValuesPart";
 import { TMDBTestPart } from "@/pages/parts/admin/TMDBTestPart";
 import { WorkerTestPart } from "@/pages/parts/admin/WorkerTestPart";
 
+import { BackendTestPart } from "../parts/admin/BackendTestPart";
+
 export function AdminPage() {
   return (
     <SubPageLayout>
@@ -13,6 +15,7 @@ export function AdminPage() {
         <Paragraph>Useful tools to test out your current deployment</Paragraph>
 
         <ConfigValuesPart />
+        <BackendTestPart />
         <WorkerTestPart />
         <TMDBTestPart />
       </ThinContainer>

src/pages/parts/admin/BackendTestPart.tsx

@@ -0,0 +1,128 @@
+import { useState } from "react";
+import { useAsyncFn } from "react-use";
+
+import { MetaResponse, getBackendMeta } from "@/backend/accounts/meta";
+import { Button } from "@/components/Button";
+import { Icon, Icons } from "@/components/Icon";
+import { Box } from "@/components/layout/Box";
+import { Spinner } from "@/components/layout/Spinner";
+import { Divider } from "@/components/utils/Divider";
+import { Heading2 } from "@/components/utils/Text";
+import { conf } from "@/setup/config";
+
+export function BackendTestPart() {
+  const backendUrl = conf().BACKEND_URL;
+
+  const [status, setStatus] = useState<{
+    hasTested: boolean;
+    success: boolean;
+    errorText: string;
+    value: MetaResponse | null;
+  }>({
+    hasTested: false,
+    success: false,
+    errorText: "",
+    value: null,
+  });
+
+  const [testState, runTests] = useAsyncFn(async () => {
+    setStatus({
+      hasTested: false,
+      success: false,
+      errorText: "",
+      value: null,
+    });
+
+    try {
+      const backendData = await getBackendMeta(backendUrl);
+      return setStatus({
+        hasTested: true,
+        success: true,
+        errorText:
+          "Failed to call backend, double check the URL key and your internet connection",
+        value: backendData,
+      });
+    } catch (err) {
+      return setStatus({
+        hasTested: true,
+        success: false,
+        errorText:
+          "Failed to call backend, double check the URL key and your internet connection",
+        value: null,
+      });
+    }
+  }, [setStatus]);
+
+  return (
+    <>
+      <Heading2 className="mb-8 mt-12">Backend API test</Heading2>
+      <Box>
+        <div>
+          <div className="flex-1">
+            {status.hasTested && status.success ? (
+              <>
+                <p>
+                  <span className="inline-block w-36 text-white font-medium">
+                    Version:
+                  </span>
+                  {status.value?.version}
+                </p>
+                <p>
+                  <span className="inline-block w-36 text-white font-medium">
+                    Backend name:
+                  </span>
+                  {status.value?.name}
+                </p>
+                <p>
+                  <span className="inline-block w-36 text-white font-medium">
+                    Description:
+                  </span>
+                  {status.value?.description ?? "Not set"}
+                </p>
+                <p>
+                  <span className="inline-block w-36 text-white font-medium">
+                    Captcha enabled:
+                  </span>
+                  {status.value?.hasCaptcha ? "Yes" : "No"}
+                </p>
+                <Divider />
+              </>
+            ) : null}
+          </div>
+        </div>
+        <div className="w-full flex gap-6 justify-between items-center">
+          {!status.hasTested ? (
+            <p>Run the test to validate backend</p>
+          ) : status.success ? (
+            <p className="flex items-center text-md">
+              <Icon
+                icon={Icons.CIRCLE_CHECK}
+                className="text-video-scraping-success mr-2"
+              />
+              Backend is working as expected
+            </p>
+          ) : (
+            <div>
+              <p className="text-white font-bold w-full mb-3 flex items-center gap-1">
+                <Icon
+                  icon={Icons.CIRCLE_EXCLAMATION}
+                  className="text-video-scraping-error mr-2"
+                />
+                Backend is not working
+              </p>
+              <p>{status.errorText}</p>
+            </div>
+          )}
+          <Button
+            theme="purple"
+            className="whitespace-nowrap"
+            onClick={runTests}
+          >
+            {testState.loading ? <Spinner className="text-base mr-2" /> : null}
+            Test backend
+          </Button>
+        </div>
+      </Box>
+    </>
+  );
+}

src/pages/parts/admin/TMDBTestPart.tsx

@@ -77,7 +77,13 @@ export function TMDBTestPart() {
               </p>
             ) : (
               <>
-                <p className="text-white font-bold">TMDB is not working</p>
+                <p className="text-white font-bold w-full mb-3 flex items-center gap-1">
+                  <Icon
+                    icon={Icons.CIRCLE_EXCLAMATION}
+                    className="text-video-scraping-error mr-2"
+                  />
+                  TMDB is not working
+                </p>
                 <p>{status.errorText}</p>
               </>
             )}