From 0526a5db1f1cf01c037acc24e683b804f473163d Mon Sep 17 00:00:00 2001
From: Mish Ushakov <mishushakov@users.noreply.github.com>
Date: Fri, 6 Dec 2024 23:31:29 +0100
Subject: [PATCH] UX updates

---
 .../src/app/(dashboard)/dashboard/page.tsx    |  8 ++--
 .../components/Dashboard/AccountSelector.tsx  | 11 +----
 .../src/components/Dashboard/Developer.tsx    | 44 ++++++++++++++++---
 3 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/dashboard/page.tsx b/apps/web/src/app/(dashboard)/dashboard/page.tsx
index d11eed9aa..e8abf1e21 100644
--- a/apps/web/src/app/(dashboard)/dashboard/page.tsx
+++ b/apps/web/src/app/(dashboard)/dashboard/page.tsx
@@ -10,6 +10,7 @@ import {
   Key,
   LucideIcon,
   PackageIcon,
+  PencilRuler,
   Settings,
   Users,
 } from 'lucide-react'
@@ -46,6 +47,7 @@ const menuLabels = [
   'usage',
   'billing',
   'team',
+  'developer',
 ] as const
 type MenuLabel = (typeof menuLabels)[number]
 
@@ -189,9 +191,6 @@ const Sidebar = ({
       currentTeam={currentTeam}
       setCurrentTeam={setCurrentTeam}
       setTeams={setTeams}
-      openDevSettings={() => {
-        setSelectedItem('developer')
-      }}
     />
 
     <div className="flex flex-row justify-center space-x-4 md:space-x-0 md:space-y-2 md:flex-col">
@@ -216,6 +215,7 @@ const iconMap: { [key in MenuLabel]: LucideIcon } = {
   team: Users,
   templates: FileText,
   sandboxes: PackageIcon,
+  developer: PencilRuler,
 }
 
 const MenuItem = ({
@@ -303,7 +303,7 @@ function MainContent({
           billingUrl={billingUrlState[0]}
         />
       )
-    case 'developer' as string:
+    case 'developer':
       return (
         <DeveloperContent
           apiUrlState={apiUrlState}
diff --git a/apps/web/src/components/Dashboard/AccountSelector.tsx b/apps/web/src/components/Dashboard/AccountSelector.tsx
index cd8db8159..8d085a4b7 100644
--- a/apps/web/src/components/Dashboard/AccountSelector.tsx
+++ b/apps/web/src/components/Dashboard/AccountSelector.tsx
@@ -5,7 +5,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { ChevronRight, PencilRuler, PlusCircle } from 'lucide-react'
+import { ChevronRight, PlusCircle } from 'lucide-react'
 import { toast } from '../ui/use-toast'
 import {
   AlertDialog,
@@ -28,7 +28,6 @@ export const AccountSelector = ({
   currentTeam,
   setCurrentTeam,
   setTeams,
-  openDevSettings,
 }) => {
   const [isDialogOpen, setIsDialogOpen] = useState(false)
   const [teamName, setTeamName] = useState('')
@@ -93,14 +92,6 @@ export const AccountSelector = ({
             <PlusCircle width={15} height={15} />
             <span>Create Team</span>
           </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem
-            className="flex items-center space-x-1"
-            onClick={openDevSettings}
-          >
-            <PencilRuler width={15} height={15} />
-            <span>Developer</span>
-          </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
 
diff --git a/apps/web/src/components/Dashboard/Developer.tsx b/apps/web/src/components/Dashboard/Developer.tsx
index f23f61e4a..1dbb9ea0a 100644
--- a/apps/web/src/components/Dashboard/Developer.tsx
+++ b/apps/web/src/components/Dashboard/Developer.tsx
@@ -2,6 +2,9 @@
 
 import { Button } from '../Button'
 
+const defaultAPIUrl = process.env.NEXT_PUBLIC_API_URL || ''
+const defaultBillingUrl = process.env.NEXT_PUBLIC_BILLING_API_URL || ''
+
 export const DeveloperContent = ({
   apiUrlState,
   billingUrlState,
@@ -12,12 +15,42 @@ export const DeveloperContent = ({
   const [apiUrl, setApiUrl] = apiUrlState
   const [billingUrl, setBillingUrl] = billingUrlState
 
+  function isUrl(url: string) {
+    try {
+      new URL(url)
+      return true
+    } catch (e) {
+      return false
+    }
+  }
+
   return (
     <div className="flex flex-col w-full">
       <div className="flex flex-col h-full">
-        <h1 className="font-bold pb-10 text-xl">Developer settings</h1>
+        <h1 className="font-bold pb-10 text-xl">Dashboard settings</h1>
 
         <span className="font-bold text-neutral-300 pb-2">API URL</span>
+        <span className="text-sm text-neutral-300 pb-4">
+          Customize E2B Cluster API URL.
+        </span>
+
+        {apiUrl !== defaultAPIUrl && (
+          <div
+            className="bg-white/5 border-l-4 border-orange-500/20 text-gray-300 p-4 mb-4 w-1/2"
+            role="alert"
+          >
+            <h4 className="font-medium pb-2">
+              Setting custom API URL in the E2B SDK & CLI
+            </h4>
+            <div className="text-sm text-gray-400">
+              In your environment variables, set E2B_DOMAIN variable to your
+              custom domain:
+              <br />
+              E2B_DOMAIN={isUrl(apiUrl) ? new URL(apiUrl).host : 'Invalid URL'}
+            </div>
+          </div>
+        )}
+
         <div className="flex w-full items-center space-x-2 pb-4">
           <input
             type="text"
@@ -27,13 +60,16 @@ export const DeveloperContent = ({
           />
           <Button
             variant="desctructive"
-            onClick={() => setApiUrl(process.env.NEXT_PUBLIC_API_URL || '')}
+            onClick={() => setApiUrl(defaultAPIUrl)}
           >
             Reset to default
           </Button>
         </div>
 
         <span className="font-bold text-neutral-300 pb-2">Billing URL</span>
+        <span className="text-sm text-neutral-300 pb-4">
+          Customize E2B Billing API URL.
+        </span>
         <div className="flex w-full items-center space-x-2 pb-4">
           <input
             type="text"
@@ -43,9 +79,7 @@ export const DeveloperContent = ({
           />
           <Button
             variant="desctructive"
-            onClick={() =>
-              setBillingUrl(process.env.NEXT_PUBLIC_BILLING_API_URL || '')
-            }
+            onClick={() => setBillingUrl(defaultBillingUrl)}
           >
             Reset to default
           </Button>