From 5a7558e3c6b1a3d3392af8c440b0e7ad50c25041 Mon Sep 17 00:00:00 2001
From: aliang <jueliang@tabbyml.com>
Date: Tue, 21 Jan 2025 16:17:47 +0800
Subject: [PATCH] chore(ui): adjust SSO credential form styling (#3742)

---
 .../sso/components/ldap-credential-form.tsx   | 114 +++++++++---------
 .../sso/components/oauth-credential-form.tsx  |  11 +-
 2 files changed, 64 insertions(+), 61 deletions(-)

diff --git a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/ldap-credential-form.tsx b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/ldap-credential-form.tsx
index d8579011404d..b699f9dde69c 100644
--- a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/ldap-credential-form.tsx
+++ b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/ldap-credential-form.tsx
@@ -453,7 +453,8 @@ export function LDAPCredentialForm({
               </FormItem>
             )}
           />
-          <div className="mt-4">
+          <Separator className="my-2" />
+          <div className="flex flex-col gap-4 sm:flex-row sm:justify-between">
             <Button
               onClick={onTestLdapCredential}
               type="button"
@@ -465,66 +466,63 @@ export function LDAPCredentialForm({
                 <IconSpinner className="mr-2 h-4 w-4 animate-spin" />
               )}
             </Button>
-          </div>
-
-          <Separator />
-
-          <div className="flex justify-end gap-4">
-            <Button
-              type="button"
-              variant="ghost"
-              onClick={navigateToSSOSettings}
-            >
-              Back
-            </Button>
-            {!isNew && (
-              <AlertDialog
-                open={deleteAlertVisible}
-                onOpenChange={setDeleteAlertVisible}
+            <div className="flex items-center justify-end gap-4 sm:justify-start">
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={navigateToSSOSettings}
               >
-                <AlertDialogTrigger asChild>
-                  <Button variant="hover-destructive">Delete</Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent>
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>
-                      Are you absolutely sure?
-                    </AlertDialogTitle>
-                    <AlertDialogDescription>
-                      This action cannot be undone. It will permanently delete
-                      the current credential.
-                    </AlertDialogDescription>
-                  </AlertDialogHeader>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel>Cancel</AlertDialogCancel>
-                    <AlertDialogAction
-                      className={buttonVariants({ variant: 'destructive' })}
-                      onClick={onDelete}
-                    >
-                      {isDeleting && (
-                        <IconSpinner className="mr-2 h-4 w-4 animate-spin" />
-                      )}
-                      Yes, delete it
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-            )}
-            <LicenseGuard licenses={[LicenseType.Enterprise]}>
-              {({ hasValidLicense }) => (
-                <Button
-                  type="submit"
-                  disabled={
-                    !hasValidLicense || isSubmitting || (!isNew && !isDirty)
-                  }
+                Back
+              </Button>
+              {!isNew && (
+                <AlertDialog
+                  open={deleteAlertVisible}
+                  onOpenChange={setDeleteAlertVisible}
                 >
-                  {isSubmitting && (
-                    <IconSpinner className="mr-2 h-4 w-4 animate-spin" />
-                  )}
-                  {isNew ? 'Create' : 'Update'}
-                </Button>
+                  <AlertDialogTrigger asChild>
+                    <Button variant="hover-destructive">Delete</Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>
+                        Are you absolutely sure?
+                      </AlertDialogTitle>
+                      <AlertDialogDescription>
+                        This action cannot be undone. It will permanently delete
+                        the current credential.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Cancel</AlertDialogCancel>
+                      <AlertDialogAction
+                        className={buttonVariants({ variant: 'destructive' })}
+                        onClick={onDelete}
+                      >
+                        {isDeleting && (
+                          <IconSpinner className="mr-2 h-4 w-4 animate-spin" />
+                        )}
+                        Yes, delete it
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
               )}
-            </LicenseGuard>
+              <LicenseGuard licenses={[LicenseType.Enterprise]}>
+                {({ hasValidLicense }) => (
+                  <Button
+                    type="submit"
+                    disabled={
+                      !hasValidLicense || isSubmitting || (!isNew && !isDirty)
+                    }
+                  >
+                    {isSubmitting && (
+                      <IconSpinner className="mr-2 h-4 w-4 animate-spin" />
+                    )}
+                    {isNew ? 'Create' : 'Update'}
+                  </Button>
+                )}
+              </LicenseGuard>
+            </div>
           </div>
         </form>
         <FormMessage className="text-center" />
diff --git a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/oauth-credential-form.tsx b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/oauth-credential-form.tsx
index f0c6b0cfaa44..7750d925ca7f 100644
--- a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/oauth-credential-form.tsx
+++ b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/oauth-credential-form.tsx
@@ -44,6 +44,7 @@ import {
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import { Separator } from '@/components/ui/separator'
 import { CopyButton } from '@/components/copy-button'
 import { LicenseGuard } from '@/components/license-guard'
 
@@ -276,17 +277,20 @@ export default function OAuthCredentialForm({
 
           {oauthRedirectUrlData && (
             <FormItem className="mt-4">
-              <div className="flex flex-col gap-2 rounded-lg border px-3 py-2">
+              <div className="flex flex-col gap-2 overflow-hidden rounded-lg border px-3 py-2">
                 <div className="text-sm text-muted-foreground">
                   Create your OAuth2 application with the following information
                 </div>
-                <div className="flex items-center justify-between">
+                <div className="flex flex-col justify-between sm:flex-row sm:items-center">
                   <div className="text-sm font-medium">
                     Authorization callback URL
                   </div>
                   <span className="flex items-center text-sm">
-                    {oauthRedirectUrlData.oauthCallbackUrl}
+                    <span className="truncate">
+                      {oauthRedirectUrlData.oauthCallbackUrl}
+                    </span>
                     <CopyButton
+                      className="shrink-0"
                       type="button"
                       value={oauthRedirectUrlData.oauthCallbackUrl!}
                     />
@@ -345,6 +349,7 @@ export default function OAuthCredentialForm({
               </FormItem>
             )}
           />
+          <Separator className="my-2" />
           <div className="flex justify-end gap-4">
             <Button
               type="button"