From fd04e6dab0fb6032a48a4e3b1cc79665c67b7590 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 23 Sep 2024 16:10:46 +0800
Subject: [PATCH] Address some feedback around redirect urls (#29449)

* Address some feedback around redirect urls

* Remove unused code
---
 .../Auth/RedirectUrls/RedirectUrlList.tsx     |  8 ++++--
 .../Auth/RedirectUrls/RedirectUrls.tsx        | 25 ++++++++++++-------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrlList.tsx b/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrlList.tsx
index e34d9195ff6..8ee007d54b4 100644
--- a/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrlList.tsx
+++ b/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrlList.tsx
@@ -60,8 +60,7 @@ export const RedirectUrlList = ({
 
   return (
     <div className="-space-y-px">
-      <ValueContainer className="py-3 flex items-center justify-between">
-        <p className="text-foreground-light text-sm">Total URLs: {allowList.length}</p>
+      <ValueContainer className="py-3 flex items-center justify-end">
         {selectedUrls.length > 0 ? (
           <div className="flex items-center gap-x-2">
             <Button type="default" onClick={() => onSelectClearSelection()}>
@@ -127,6 +126,11 @@ export const RedirectUrlList = ({
           />
         </div>
       )}
+      {allowList.length > 0 && (
+        <ValueContainer className="py-3 flex items-center justify-between">
+          <p className="pl-9 text-foreground-muted text-sm">Total URLs: {allowList.length}</p>
+        </ValueContainer>
+      )}
     </div>
   )
 }
diff --git a/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx b/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx
index fb5d458f8d2..aeedde4b7c1 100644
--- a/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx
+++ b/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx
@@ -14,7 +14,9 @@ import {
   Alert_Shadcn_,
   Button,
   Modal,
+  ScrollArea,
   WarningIcon,
+  cn,
 } from 'ui'
 import { AddNewURLModal } from './AddNewURLModal'
 import { RedirectUrlList } from './RedirectUrlList'
@@ -130,17 +132,22 @@ export const RedirectUrls = () => {
           setOpenRemoveSelected(false)
         }}
       >
-        <Modal.Content>
+        <Modal.Content className="flex flex-col gap-y-2">
           <p className="mb-2 text-sm text-foreground-light">
-            Are you sure you want to remove the following URLs?
+            Are you sure you want to remove the following {selectedUrls.length} URL
+            {selectedUrls.length > 1 ? 's' : ''}?
           </p>
-          <ul className="list-disc pl-4 mb-2">
-            {selectedUrls.map((url, index) => (
-              <li key={index} className="text-foreground-light text-sm">
-                {url}
-              </li>
-            ))}
-          </ul>
+          <ScrollArea className={cn(selectedUrls.length > 4 ? 'h-[250px]' : '')}>
+            <div className="flex flex-col -space-y-1">
+              {selectedUrls.map((url) => {
+                return (
+                  <ValueContainer key={url} className="px-4 py-3 hover:bg-surface-100">
+                    {url}
+                  </ValueContainer>
+                )
+              })}
+            </div>
+          </ScrollArea>
           <p className="text-foreground-light text-sm">
             These URLs will no longer work with your authentication configuration.
           </p>