From 9d607956f55faf8d7a1ca8c9b17be84b6e75c567 Mon Sep 17 00:00:00 2001
From: Meng Zhang <meng@tabbyml.com>
Date: Sun, 10 Dec 2023 01:11:14 +0800
Subject: [PATCH] feat(tabby-ui): add endpoint url to home page

---
 .../cluster/components/cluster.tsx            | 22 +++++
 ee/tabby-ui/app/(dashboard)/page.tsx          | 88 ++++++++++---------
 2 files changed, 69 insertions(+), 41 deletions(-)

diff --git a/ee/tabby-ui/app/(dashboard)/cluster/components/cluster.tsx b/ee/tabby-ui/app/(dashboard)/cluster/components/cluster.tsx
index c1a37a1..919e9b2 100644
--- a/ee/tabby-ui/app/(dashboard)/cluster/components/cluster.tsx
+++ b/ee/tabby-ui/app/(dashboard)/cluster/components/cluster.tsx
@@ -7,6 +7,7 @@ import { useWorkers } from '@/lib/hooks/use-workers'
 import { useAuthenticatedGraphQLQuery, useGraphQLForm } from '@/lib/tabby/gql'
 import { Button } from '@/components/ui/button'
 import { IconRefresh } from '@/components/ui/icons'
+import { Separator } from '@/components/ui/separator'
 import { CopyButton } from '@/components/copy-button'
 
 import WorkerCard from './worker-card'
@@ -23,6 +24,10 @@ const resetRegistrationTokenDocument = graphql(/* GraphQL */ `
   }
 `)
 
+function toBadgeString(str: string) {
+  return encodeURIComponent(str.replaceAll('-', '--'))
+}
+
 export default function Workers() {
   const { data: healthInfo } = useHealth()
   const workers = useWorkers()
@@ -41,6 +46,23 @@ export default function Workers() {
 
   return (
     <div className="flex w-full flex-col gap-3 p-4 lg:p-16">
+      <h1>
+        <span className="font-bold">Congratulations</span>, your tabby instance
+        is up!
+      </h1>
+      <span className="flex flex-wrap gap-1">
+        <a
+          target="_blank"
+          href={`https://github.com/TabbyML/tabby/releases/tag/${healthInfo.version.git_describe}`}
+        >
+          <img
+            src={`https://img.shields.io/badge/version-${toBadgeString(
+              healthInfo.version.git_describe
+            )}-green`}
+          />
+        </a>
+      </span>
+      <Separator />
       {!!registrationTokenRes?.registrationToken && (
         <div className="flex items-center gap-1">
           Registeration token:
diff --git a/ee/tabby-ui/app/(dashboard)/page.tsx b/ee/tabby-ui/app/(dashboard)/page.tsx
index b54e1a6..82d9e5a 100644
--- a/ee/tabby-ui/app/(dashboard)/page.tsx
+++ b/ee/tabby-ui/app/(dashboard)/page.tsx
@@ -1,9 +1,17 @@
 'use client'
 
+import { useEffect, useState } from 'react'
+
 import { graphql } from '@/lib/gql/generates'
 import { useHealth } from '@/lib/hooks/use-health'
 import { useAuthenticatedGraphQLQuery } from '@/lib/tabby/gql'
-import { Separator } from '@/components/ui/separator'
+import {
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
 import { CopyButton } from '@/components/copy-button'
 import SlackDialog from '@/components/slack-dialog'
 
@@ -16,10 +24,6 @@ export default function Home() {
   )
 }
 
-function toBadgeString(str: string) {
-  return encodeURIComponent(str.replaceAll('-', '--'))
-}
-
 const meQuery = graphql(/* GraphQL */ `
   query MeQuery {
     me {
@@ -31,46 +35,48 @@ const meQuery = graphql(/* GraphQL */ `
 function MainPanel() {
   const { data: healthInfo } = useHealth()
   const { data } = useAuthenticatedGraphQLQuery(meQuery)
+  const [origin, setOrigin] = useState('')
+  useEffect(() => {
+    setOrigin(new URL(window.location.href).origin)
+  }, [])
 
   if (!healthInfo || !data) return
 
   return (
-    <div className="flex w-full flex-col gap-3">
-      <h1>
-        <span className="font-bold">Congratulations</span>, your tabby instance
-        is up!
-      </h1>
-      <span className="flex flex-wrap gap-1">
-        <a
-          target="_blank"
-          href={`https://github.com/TabbyML/tabby/releases/tag/${healthInfo.version.git_describe}`}
-        >
-          <img
-            src={`https://img.shields.io/badge/version-${toBadgeString(
-              healthInfo.version.git_describe
-            )}-green`}
-          />
-        </a>
-      </span>
-      <Separator />
-      <div className="flex items-center">
-        <span className="mr-2">Token:</span>
-        <code className="rounded-lg text-sm text-red-600">
-          {data.me.authToken}
-        </code>
-        <CopyButton value={data.me.authToken} />
-      </div>
-      <p>
-        Use credentials above for IDE extensions / plugins authentication, see{' '}
-        <a
-          className="underline"
-          target="_blank"
-          href="https://tabby.tabbyml.com/docs/extensions/configurations#server"
-        >
-          configurations
-        </a>{' '}
-        for details
-      </p>
+    <div>
+      <CardHeader>
+        <CardTitle>Getting Started</CardTitle>
+      </CardHeader>
+      <CardContent className="flex max-w-[420px] flex-col gap-2">
+        <span className="flex items-center justify-between gap-2">
+          <span>Endpoint URL</span>
+          <span className="flex items-center">
+            <Input value={origin} />
+            <CopyButton value={origin} />
+          </span>
+        </span>
+
+        <span className="flex items-center justify-between gap-2">
+          <span>Token</span>
+          <span className="flex items-center">
+            <Input value={data.me.authToken} />
+            <CopyButton value={data.me.authToken} />
+          </span>
+        </span>
+      </CardContent>
+      <CardFooter>
+        <span>
+          Use informations above for IDE extensions / plugins configuration, see{' '}
+          <a
+            className="underline"
+            target="_blank"
+            href="https://tabby.tabbyml.com/docs/extensions/configurations#server"
+          >
+            documentation website
+          </a>{' '}
+          for details
+        </span>
+      </CardFooter>
     </div>
   )
 }