From 8dc78ca2a42689241fb87b7e111e57c4d76e0731 Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 27 Jan 2024 19:22:18 -0800
Subject: [PATCH] (fix) proxy dashboard

---
 .../src/components/enter_proxy_url.tsx        | 92 +++++++++++--------
 .../src/components/user_dashboard.tsx         |  8 +-
 2 files changed, 58 insertions(+), 42 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/enter_proxy_url.tsx b/ui/litellm-dashboard/src/components/enter_proxy_url.tsx
index 7c8267cf5..1d7ae2a80 100644
--- a/ui/litellm-dashboard/src/components/enter_proxy_url.tsx
+++ b/ui/litellm-dashboard/src/components/enter_proxy_url.tsx
@@ -1,44 +1,58 @@
 "use client";
 
-import React, { use, useState } from "react";
+import React, { useState } from "react";
 import { Button, TextInput } from "@tremor/react";
+import { Card, Text } from "@tremor/react";
 
-import { Card, Metric, Text } from "@tremor/react";
-import { createKeyCall } from "./networking";
-// Define the props type
-interface EnterProxyUrlProps {
-    onUrlChange: (url: string) => void;
-  }
-  
-  const EnterProxyUrl: React.FC<EnterProxyUrlProps> = ({ onUrlChange }) => {
-    const [proxyUrl, setProxyUrl] = useState<string>('');
-  
-    const handleUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      setProxyUrl(event.target.value);
-    };
-  
-    const handleSaveClick = () => {
-      // You can perform any additional validation or actions here
-      // For now, let's just pass the entered URL to the parent component
-      onUrlChange(proxyUrl);
-    };
-  
-    return (
-      <div>
-        <Card decoration="top" decorationColor="blue" style={{ width: '100%' }}>
-            <Text>Admin Configuration</Text>
-            <label htmlFor="proxyUrl">Enter Proxy URL:</label>
-            <TextInput
-            type="text"
-            id="proxyUrl"
-            value={proxyUrl}
-            onChange={handleUrlChange}
-            placeholder="https://your-proxy-endpoint.com"
-            />
-            <Button onClick={handleSaveClick}>Save</Button>
-        </Card>
-      </div>
-    );
+const EnterProxyUrl: React.FC = () => {
+  const [proxyUrl, setProxyUrl] = useState<string>("");
+  const [isUrlSaved, setIsUrlSaved] = useState<boolean>(false);
+
+  const handleUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setProxyUrl(event.target.value);
+    // Reset the saved status when the URL changes
+    setIsUrlSaved(false);
   };
-  
-export default EnterProxyUrl;
\ No newline at end of file
+
+  const handleSaveClick = () => {
+    // You can perform any additional validation or actions here
+    // For now, let's just display the message
+    setIsUrlSaved(true);
+  };
+
+  return (
+    <div>
+      <Card decoration="top" decorationColor="blue" style={{ width: '1000px' }}>
+        <Text>Admin Configuration</Text>
+        <label htmlFor="proxyUrl">Enter Proxy URL:</label>
+        <TextInput
+          type="text"
+          id="proxyUrl"
+          value={proxyUrl}
+          onChange={handleUrlChange}
+          placeholder="https://your-proxy-endpoint.com"
+        />
+        <Button onClick={handleSaveClick}>Save</Button>
+        {/* Display message if the URL is saved */}
+        {isUrlSaved && (
+        <div>
+
+            <p>
+            Save this URL: {window.location.href + "?proxyBaseUrl=" + proxyUrl}
+            </p>
+            <p>
+            Go here 👉 
+            <a href={window.location.href + "?proxyBaseUrl=" + proxyUrl} target="_blank" rel="noopener noreferrer">
+            {window.location.href + "?proxyBaseUrl=" + proxyUrl}
+            </a>
+            </p>
+
+        </div>
+        )}
+
+      </Card>
+    </div>
+  );
+};
+
+export default EnterProxyUrl;
diff --git a/ui/litellm-dashboard/src/components/user_dashboard.tsx b/ui/litellm-dashboard/src/components/user_dashboard.tsx
index 178f577ab..fadad17b5 100644
--- a/ui/litellm-dashboard/src/components/user_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/user_dashboard.tsx
@@ -44,10 +44,12 @@ const UserDashboard = () => {
   }
   else if (userID == null || accessToken == null) {
     // redirect to page: ProxyBaseUrl/google-login/key/generate
-    sessionStorage.setItem('returnUrl', window.location.href);
+    const baseUrl = proxyBaseUrl.endsWith('/') ? proxyBaseUrl : proxyBaseUrl + '/';
+  
+    // Now you can construct the full URL
+    const url = `${baseUrl}google-login/key/generate`;
 
-    
-    window.location.href = `${proxyBaseUrl}/google-login/key/generate`;
+    window.location.href = url;
     
 
     return null;