Merge pull request #15215 from ARajan1084/prettier-support

Added prettier to autoformat frontend

Author: krrishdholakia

ui/litellm-dashboard/.prettierignore

@@ -0,0 +1,11 @@
+node_modules
+.next
+.out
+dist
+build
+.coverage
+.vercel
+.turbo
+.next-static
+*.min.js
+coverage/

ui/litellm-dashboard/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "printWidth": 120,
+  "trailingComma": "all"
+}

ui/litellm-dashboard/.prettierrc.json

@@ -1,12 +1,12 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: 'export',
-    basePath: '',
-    assetPrefix: '/litellm-asset-prefix',  // If a server_root_path is set, this will be overridden by runtime injection
+  output: "export",
+  basePath: "",
+  assetPrefix: "/litellm-asset-prefix", // If a server_root_path is set, this will be overridden by runtime injection
 };
 
 nextConfig.experimental = {
-    missingSuspenseWithCSRBailout: false
-}
+  missingSuspenseWithCSRBailout: false,
+};
 
 export default nextConfig;

ui/litellm-dashboard/next.config.mjs

@@ -8,7 +8,9 @@
     "start": "next start",
     "lint": "next lint",
     "test": "vitest",
-    "test:watch": "vitest -w"
+    "test:watch": "vitest -w",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "dependencies": {
     "@anthropic-ai/sdk": "^0.54.0",

ui/litellm-dashboard/package-lock.json

@@ -19,12 +19,7 @@
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
 }
 
 @layer utilities {

ui/litellm-dashboard/package.json

@@ -19,7 +19,5 @@ export default function PublicModelHub() {
    * populate navbar
    *
    */
-  return (
-    <PublicModelHubPage accessToken={accessToken} />
-  );
+  return <PublicModelHubPage accessToken={accessToken} />;
 }

ui/litellm-dashboard/src/app/globals.css

@@ -19,7 +19,5 @@ export default function PublicModelHubTable() {
    * populate navbar
    *
    */
-  return (
-    <ModelHubTable accessToken={accessToken} publicPage={true} premiumUser={false} userRole={null}/>
-  );
-} 
+  return <ModelHubTable accessToken={accessToken} publicPage={true} premiumUser={false} userRole={null} />;
+}

ui/litellm-dashboard/src/app/model_hub/page.tsx

@@ -1,24 +1,15 @@
 "use client";
 import React, { Suspense, useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
-import {
-  Card,
-  Title,
-  Text,
-  TextInput,
-  Callout,
-  Button,
-  Grid,
-  Col,
-} from "@tremor/react";
+import { Card, Title, Text, TextInput, Callout, Button, Grid, Col } from "@tremor/react";
 import { RiAlarmWarningLine, RiCheckboxCircleLine } from "@remixicon/react";
 import {
   invitationClaimCall,
   userUpdateUserCall,
   getOnboardingCredentials,
   claimOnboardingToken,
   getUiConfig,
-  getProxyBaseUrl
+  getProxyBaseUrl,
 } from "@/components/networking";
 import { jwtDecode } from "jwt-decode";
 import { Form, Button as Button2, message } from "antd";
@@ -27,7 +18,7 @@ import { getCookie } from "@/utils/cookieUtils";
 export default function Onboarding() {
   const [form] = Form.useForm();
   const searchParams = useSearchParams()!;
-  const token = getCookie('token');
+  const token = getCookie("token");
   const inviteID = searchParams.get("invitation_id");
   const action = searchParams.get("action");
   const [accessToken, setAccessToken] = useState<string | null>(null);
@@ -39,14 +30,16 @@ export default function Onboarding() {
   const [getUiConfigLoading, setGetUiConfigLoading] = useState<boolean>(true);
 
   useEffect(() => {
-    getUiConfig().then((data) => { // get the information for constructing the proxy base url, and then set the token and auth loading
+    getUiConfig().then((data) => {
+      // get the information for constructing the proxy base url, and then set the token and auth loading
       console.log("ui config in onboarding.tsx:", data);
       setGetUiConfigLoading(false);
     });
   }, []);
 
   useEffect(() => {
-    if (!inviteID || getUiConfigLoading) { // wait for the ui config to be loaded
+    if (!inviteID || getUiConfigLoading) {
+      // wait for the ui config to be loaded
       return;
     }
 
@@ -72,14 +65,7 @@ export default function Onboarding() {
   }, [inviteID, getUiConfigLoading]);
 
   const handleSubmit = (formValues: Record<string, any>) => {
-    console.log(
-      "in handle submit. accessToken:",
-      accessToken,
-      "token:",
-      jwtToken,
-      "formValues:",
-      formValues
-    );
+    console.log("in handle submit. accessToken:", accessToken, "token:", jwtToken, "formValues:", formValues);
     if (!accessToken || !jwtToken) {
       return;
     }
@@ -89,12 +75,7 @@ export default function Onboarding() {
     if (!userID || !inviteID) {
       return;
     }
-    claimOnboardingToken(
-      accessToken,
-      inviteID,
-      userID,
-      formValues.password
-    ).then((data) => {
+    claimOnboardingToken(accessToken, inviteID, userID, formValues.password).then((data) => {
       let litellm_dashboard_ui = "/ui/";
       litellm_dashboard_ui += "?login=success";
 
@@ -119,15 +100,14 @@ export default function Onboarding() {
       <Card>
         <Title className="text-sm mb-5 text-center">🚅 LiteLLM</Title>
         <Title className="text-xl">{action === "reset_password" ? "Reset Password" : "Sign up"}</Title>
-        <Text>{action === "reset_password" ? "Reset your password to access Admin UI." : "Claim your user account to login to Admin UI."}</Text>
+        <Text>
+          {action === "reset_password"
+            ? "Reset your password to access Admin UI."
+            : "Claim your user account to login to Admin UI."}
+        </Text>
 
         {action !== "reset_password" && (
-          <Callout
-            className="mt-4"
-            title="SSO"
-            icon={RiCheckboxCircleLine}
-            color="sky"
-          >
+          <Callout className="mt-4" title="SSO" icon={RiCheckboxCircleLine} color="sky">
             <Grid numItems={2} className="flex justify-between items-center">
               <Col>SSO is under the Enterprise Tier.</Col>
 
@@ -142,28 +122,16 @@ export default function Onboarding() {
           </Callout>
         )}
 
-        <Form
-          className="mt-10 mb-5 mx-auto"
-          layout="vertical"
-          onFinish={handleSubmit}
-        >
+        <Form className="mt-10 mb-5 mx-auto" layout="vertical" onFinish={handleSubmit}>
           <>
             <Form.Item label="Email Address" name="user_email">
-              <TextInput
-                type="email"
-                disabled={true}
-                value={userEmail}
-                defaultValue={userEmail}
-                className="max-w-md"
-              />
+              <TextInput type="email" disabled={true} value={userEmail} defaultValue={userEmail} className="max-w-md" />
             </Form.Item>
 
             <Form.Item
               label="Password"
               name="password"
-              rules={[
-                { required: true, message: "password required to sign up" },
-              ]}
+              rules={[{ required: true, message: "password required to sign up" }]}
               help={action === "reset_password" ? "Enter your new password" : "Create a password for your account"}
             >
               <TextInput placeholder="" type="password" className="max-w-md" />