From be7cb44e01bfd0900a0993c4bc4aa48b0eb6b8c3 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Thu, 26 Feb 2026 16:27:53 +1100
Subject: [PATCH 1/5] feat(studio): invite multiple team members at once
 (#42637)

## What kind of change does this PR introduce?

- Feature
- Resolves DEPR-355

## What is the current behavior?

Only one email address can be invited to an organization at a time.

## What is the new behavior?

- Multiple email addresses can be invited (at a single scope) to an
organization at one time
	- List of email addresses detected via comma-separation
	- Pluralization on fields and labels
- Table and copywriting cleanup

| Before | After |
| --- | --- |
| <img width="808" height="691" alt="Supabase"
src="https://github.com/user-attachments/assets/f6450c26-968c-4ee8-bb7c-d6f6a3af1209"
/> | <img width="808" height="691" alt="8298"
src="https://github.com/user-attachments/assets/2d7e3869-b9d4-4a4f-89aa-ae55d67e794b"
/> |
| <img width="1024" height="560" alt="Supabase"
src="https://github.com/user-attachments/assets/9a255167-fcd3-4294-ba3a-9160bd500cff"
/> | <img width="1024" height="560" alt="Supabase"
src="https://github.com/user-attachments/assets/daba5bb8-eb12-43dc-86de-217e9baf0b72"
/> |

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Added support for inviting multiple team members simultaneously via
comma-separated emails.

* **Improvements**
* Enhanced member management interface with clearer status indicators
(You, Invited, SSO, MFA enabled/disabled).
* Improved feedback messages for invitation outcomes and member status
changes.
* Updated member table layout with summary footer displaying member
count.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../TeamSettings/InviteMemberButton.tsx       | 336 ++++++++++++------
 .../TeamSettings/MemberActions.tsx            |   4 +-
 .../Organization/TeamSettings/MemberRow.tsx   |  66 ++--
 .../Organization/TeamSettings/MembersView.tsx |  54 +--
 .../components/ExpandingTextArea/index.tsx    |  19 +-
 5 files changed, 301 insertions(+), 178 deletions(-)

diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
index 4e57195e7f1a6..dbd847a86b025 100644
--- a/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
+++ b/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
@@ -8,7 +8,6 @@ import * as z from 'zod'
 
 import { useParams } from 'common'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
-import InformationBox from 'components/ui/InformationBox'
 import { OrganizationProjectSelector } from 'components/ui/OrganizationProjectSelector'
 import { UpgradePlanButton } from 'components/ui/UpgradePlanButton'
 import { useOrganizationCreateInvitationMutation } from 'data/organization-members/organization-invitation-create-mutation'
@@ -21,6 +20,14 @@ import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization
 import { DOCS_URL } from 'lib/constants'
 import { useProfile } from 'lib/profile'
 import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
   Button,
   Dialog,
   DialogContent,
@@ -29,10 +36,11 @@ import {
   DialogSectionSeparator,
   DialogTitle,
   DialogTrigger,
+  ExpandingTextArea,
   FormControl_Shadcn_,
   FormField_Shadcn_,
+  DialogFooter,
   Form_Shadcn_,
-  Input_Shadcn_,
   SelectContent_Shadcn_,
   SelectGroup_Shadcn_,
   SelectItem_Shadcn_,
@@ -42,6 +50,15 @@ import {
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { useGetRolesManagementPermissions } from './TeamSettings.utils'
+import { UserPlus } from 'lucide-react'
+import { Admonition } from 'ui-patterns'
+
+function parseEmails(value: string): string[] {
+  return value
+    .split(',')
+    .map((e) => e.trim())
+    .filter(Boolean)
+}
 
 export const InviteMemberButton = () => {
   const { slug } = useParams()
@@ -54,6 +71,7 @@ export const InviteMemberButton = () => {
   ])
 
   const [isOpen, setIsOpen] = useState(false)
+  const [isDiscardConfirmOpen, setIsDiscardConfirmOpen] = useState(false)
   const [projectDropdownOpen, setProjectDropdownOpen] = useState(false)
 
   const { data: members } = useOrganizationMembersQuery({ slug })
@@ -61,6 +79,7 @@ export const InviteMemberButton = () => {
   const orgScopedRoles = allRoles?.org_scoped_roles ?? []
 
   const currentPlan = organization?.plan
+  const isFreeOrProPlan = currentPlan?.id === 'free' || currentPlan?.id === 'pro'
   const hasAccessToProjectLevelPermissions = useHasAccessToProjectLevelPermissions(slug as string)
 
   const userMemberData = members?.find((m) => m.gotrue_id === profile?.gotrue_id)
@@ -87,77 +106,183 @@ export const InviteMemberButton = () => {
       )
     )
 
-  const { mutate: inviteMember, isPending: isInviting } = useOrganizationCreateInvitationMutation()
+  const { mutateAsync: inviteMemberAsync, isPending: isInviting } =
+    useOrganizationCreateInvitationMutation()
+
+  const emailSchema = z
+    .string()
+    .min(1, 'At least one email address is required')
+    .refine(
+      (val) => {
+        const emails = parseEmails(val)
+        if (emails.length === 0) return false
+        return emails.every((e) => z.string().email().safeParse(e).success)
+      },
+      (val) => {
+        const emails = parseEmails(val)
+        const invalid = emails.find((e) => !z.string().email().safeParse(e).success)
+        return {
+          message: invalid
+            ? `Invalid email address: ${invalid}`
+            : 'At least one email address is required',
+        }
+      }
+    )
 
   const FormSchema = z.object({
-    email: z.string().email('Must be a valid email address').min(1, 'Email is required'),
+    email: emailSchema,
     role: z.string().min(1, 'Role is required'),
     applyToOrg: z.boolean(),
     projectRef: z.string(),
   })
 
   const form = useForm<z.infer<typeof FormSchema>>({
-    mode: 'onBlur',
-    reValidateMode: 'onBlur',
+    mode: 'onSubmit',
+    reValidateMode: 'onChange',
     resolver: zodResolver(FormSchema),
     defaultValues: { email: '', role: '', applyToOrg: true, projectRef: '' },
   })
 
-  const { applyToOrg, projectRef } = form.watch()
+  const { applyToOrg, projectRef, email } = form.watch()
+
+  const emailCount = parseEmails(email ?? '').length
 
   const onInviteMember = async (values: z.infer<typeof FormSchema>) => {
     if (!slug) return console.error('Slug is required')
     if (profile?.id === undefined) return console.error('Profile ID required')
 
     const developerRole = orgScopedRoles.find((role) => role.name === 'Developer')
-    const existingMember = (members ?? []).find(
-      (member) => member.primary_email === values.email.toLowerCase()
-    )
-    if (existingMember !== undefined) {
-      if (existingMember.invited_id) {
-        return toast('User has already been invited to this organization')
+    const emails = parseEmails(values.email).map((e) => e.toLowerCase())
+
+    const alreadyInvited: string[] = []
+    const alreadyMembers: string[] = []
+    const toInvite: string[] = []
+
+    for (const emailAddress of emails) {
+      const existingMember = (members ?? []).find((member) => member.primary_email === emailAddress)
+      if (existingMember !== undefined) {
+        if (existingMember.invited_id) {
+          alreadyInvited.push(emailAddress)
+        } else {
+          alreadyMembers.push(emailAddress)
+        }
       } else {
-        return toast('User is already in this organization')
+        toInvite.push(emailAddress)
       }
     }
 
-    inviteMember(
-      {
-        slug,
-        email: values.email.toLowerCase(),
-        roleId: Number(values.role),
-        ...(!values.applyToOrg && values.projectRef ? { projects: [values.projectRef] } : {}),
-      },
-      {
-        onSuccess: () => {
-          toast.success('Successfully sent invitation to new member')
-          setIsOpen(!isOpen)
+    if (alreadyInvited.length > 0) {
+      toast.error(
+        alreadyInvited.length === 1
+          ? `${alreadyInvited[0]} has already been invited to this organization`
+          : `${alreadyInvited.length} emails have already been invited to this organization`
+      )
+    }
+    if (alreadyMembers.length > 0) {
+      toast.error(
+        alreadyMembers.length === 1
+          ? `${alreadyMembers[0]} is already in this organization`
+          : `${alreadyMembers.length} emails are already in this organization`
+      )
+    }
+    if (alreadyInvited.length > 0 || alreadyMembers.length > 0) {
+      if (toInvite.length === 0) return
+    }
 
-          form.reset({
-            email: '',
-            role: developerRole?.id.toString() ?? '',
-            applyToOrg: true,
-            projectRef: '',
-          })
-        },
-      }
+    const projectPayload =
+      !values.applyToOrg && values.projectRef ? { projects: [values.projectRef] } : {}
+    const results = await Promise.allSettled(
+      toInvite.map((emailAddress) =>
+        inviteMemberAsync({
+          slug,
+          email: emailAddress,
+          roleId: Number(values.role),
+          ...projectPayload,
+        })
+      )
     )
+
+    const successCount = results.filter((r) => r.status === 'fulfilled').length
+    const failedEmails = toInvite.filter((_, i) => results[i].status === 'rejected')
+
+    if (successCount > 0) {
+      toast.success(
+        successCount === 1
+          ? 'Successfully sent invitation to new member'
+          : `Successfully sent invitations to ${successCount} new members`
+      )
+      setIsOpen(false)
+      form.reset({
+        email: '',
+        role: developerRole?.id.toString() ?? '',
+        applyToOrg: true,
+        projectRef: '',
+      })
+    }
+    if (failedEmails.length > 0) {
+      toast.error(
+        failedEmails.length === 1
+          ? `Failed to send invitation to ${failedEmails[0]}`
+          : `Failed to send invitations to ${failedEmails.length} emails`
+      )
+    }
   }
 
   useEffect(() => {
     if (isSuccess && isOpen) {
       const developerRole = orgScopedRoles.find((role) => role.name === 'Developer')
-      if (developerRole !== undefined) form.setValue('role', developerRole.id.toString())
+      if (developerRole !== undefined) {
+        form.reset({
+          ...form.getValues(),
+          role: developerRole.id.toString(),
+        })
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isSuccess, isOpen])
 
+  const hasUnsavedChanges = form.formState.isDirty
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open && hasUnsavedChanges) {
+      setIsDiscardConfirmOpen(true)
+    } else {
+      setIsOpen(open)
+    }
+  }
+
+  const handleCancel = () => {
+    if (hasUnsavedChanges) {
+      setIsDiscardConfirmOpen(true)
+    } else {
+      form.reset({
+        email: '',
+        role: '',
+        applyToOrg: true,
+        projectRef: '',
+      })
+      setIsOpen(false)
+    }
+  }
+
+  const handleDiscardConfirm = () => {
+    form.reset({
+      email: '',
+      role: '',
+      applyToOrg: true,
+      projectRef: '',
+    })
+    setIsDiscardConfirmOpen(false)
+    setIsOpen(false)
+  }
+
   return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
         <ButtonTooltip
           type="primary"
           disabled={!canInviteMembers}
+          icon={<UserPlus size={14} />}
           className="pointer-events-auto flex-grow md:flex-grow-0"
           onClick={() => setIsOpen(true)}
           tooltip={{
@@ -166,19 +291,43 @@ export const InviteMemberButton = () => {
               text: !organizationMembersCreationEnabled
                 ? 'Inviting members is currently disabled'
                 : !canInviteMembers
-                  ? 'You need additional permissions to invite a member to this organization'
+                  ? 'You need additional permissions to invite members to this organization'
                   : undefined,
             },
           }}
         >
-          Invite member
+          Invite members
         </ButtonTooltip>
       </DialogTrigger>
       <DialogContent size="medium">
         <DialogHeader>
-          <DialogTitle>Invite a member to this organization</DialogTitle>
+          <DialogTitle>Invite team members</DialogTitle>
         </DialogHeader>
         <DialogSectionSeparator />
+        <Admonition
+          type="note"
+          showIcon={false}
+          title="Single Sign-On (SSO) available"
+          layout={isFreeOrProPlan ? 'vertical' : 'horizontal'}
+          className="rounded-none border-t-0 border-x-0 px-5"
+          description="Enforce login via your company identity provider for added security and access control. Available on Team plan and above."
+          actions={
+            <>
+              <Button asChild type="default">
+                <Link href={`${DOCS_URL}/guides/platform/sso`} target="_blank" rel="noreferrer">
+                  Learn more
+                </Link>
+              </Button>
+              {isFreeOrProPlan ? (
+                <UpgradePlanButton
+                  plan="Team"
+                  source="inviteMemberSSO"
+                  featureProposition="enable Single Sign-on (SSO)"
+                />
+              ) : null}
+            </>
+          }
+        />
         <Form_Shadcn_ {...form}>
           <form
             id="organization-invitation"
@@ -186,30 +335,11 @@ export const InviteMemberButton = () => {
             onSubmit={form.handleSubmit(onInviteMember)}
           >
             <DialogSection className="flex flex-col gap-y-4 pb-2">
-              {hasAccessToProjectLevelPermissions && (
-                <FormField_Shadcn_
-                  name="applyToOrg"
-                  control={form.control}
-                  render={({ field }) => (
-                    <FormItemLayout
-                      layout="flex"
-                      label="Apply role to all projects in the organization"
-                    >
-                      <FormControl_Shadcn_>
-                        <Switch
-                          checked={field.value}
-                          onCheckedChange={(value) => form.setValue('applyToOrg', value)}
-                        />
-                      </FormControl_Shadcn_>
-                    </FormItemLayout>
-                  )}
-                />
-              )}
               <FormField_Shadcn_
                 name="role"
                 control={form.control}
                 render={({ field }) => (
-                  <FormItemLayout label="Member role">
+                  <FormItemLayout label="Role">
                     <FormControl_Shadcn_>
                       <Select_Shadcn_
                         value={field.value}
@@ -245,6 +375,22 @@ export const InviteMemberButton = () => {
                   </FormItemLayout>
                 )}
               />
+              {hasAccessToProjectLevelPermissions && (
+                <FormField_Shadcn_
+                  name="applyToOrg"
+                  control={form.control}
+                  render={({ field }) => (
+                    <FormItemLayout layout="flex" label="Grant this role on all projects">
+                      <FormControl_Shadcn_>
+                        <Switch
+                          checked={field.value}
+                          onCheckedChange={(value) => form.setValue('applyToOrg', value)}
+                        />
+                      </FormControl_Shadcn_>
+                    </FormItemLayout>
+                  )}
+                />
+              )}
               {!applyToOrg && (
                 <FormField_Shadcn_
                   name="projectRef"
@@ -252,7 +398,7 @@ export const InviteMemberButton = () => {
                   render={({ field }) => (
                     <FormItemLayout
                       label="Select a project"
-                      description="You can assign roles to multiple projects once the invite is accepted"
+                      description="Project access can be adjusted after the user joins"
                     >
                       <FormControl_Shadcn_>
                         <OrganizationProjectSelector
@@ -275,62 +421,52 @@ export const InviteMemberButton = () => {
                 name="email"
                 control={form.control}
                 render={({ field }) => (
-                  <FormItemLayout label="Email address">
+                  <FormItemLayout label="Email addresses">
                     <FormControl_Shadcn_>
-                      <Input_Shadcn_
+                      <ExpandingTextArea
                         autoFocus
                         {...field}
                         autoComplete="off"
                         disabled={isInviting}
-                        placeholder="Enter email address"
+                        placeholder="name@example.com, name2@example.com, ..."
+                        className="max-h-48"
+                        data-1p-ignore
+                        data-lpignore="true"
+                        data-form-type="other"
+                        data-bwignore
                       />
                     </FormControl_Shadcn_>
                   </FormItemLayout>
                 )}
               />
-              <InformationBox
-                defaultVisibility={false}
-                title="Single Sign-on (SSO) login option available"
-                hideCollapse={false}
-                description={
-                  <div className="space-y-4 mb-1">
-                    <p>
-                      Supabase offers single sign-on (SSO) as a login option to provide additional
-                      account security for your team. This allows company administrators to enforce
-                      the use of an identity provider when logging into Supabase.
-                    </p>
-                    <p>This is only available for organizations on Team Plan or above.</p>
-                    <div className="flex items-center space-x-2">
-                      <Button asChild type="default">
-                        <Link
-                          href={`${DOCS_URL}/guides/platform/sso`}
-                          target="_blank"
-                          rel="noreferrer"
-                        >
-                          Learn more
-                        </Link>
-                      </Button>
-                      {(currentPlan?.id === 'free' || currentPlan?.id === 'pro') && (
-                        <UpgradePlanButton
-                          plan="Team"
-                          source="inviteMemberSSO"
-                          featureProposition="enable Single Sign-on (SSO)"
-                        />
-                      )}
-                    </div>
-                  </div>
-                }
-              />
             </DialogSection>
-            <DialogSectionSeparator />
-            <DialogSection className="pt-0">
-              <Button block htmlType="submit" loading={isInviting}>
-                Send invitation
+            <DialogFooter className="!justify-between">
+              <Button type="default" onClick={handleCancel}>
+                Cancel
               </Button>
-            </DialogSection>
+              <Button type="primary" htmlType="submit" loading={isInviting}>
+                {emailCount >= 2 ? 'Send invitations' : 'Send invitation'}
+              </Button>
+            </DialogFooter>
           </form>
         </Form_Shadcn_>
       </DialogContent>
+      <AlertDialog open={isDiscardConfirmOpen} onOpenChange={setIsDiscardConfirmOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Discard changes?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to discard your changes? Your invitation will not be sent.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Keep editing</AlertDialogCancel>
+            <AlertDialogAction variant="danger" onClick={handleDiscardConfirm}>
+              Discard changes
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </Dialog>
   )
 }
diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
index 5b9c425d55f94..5daac9c1745ed 100644
--- a/apps/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
+++ b/apps/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
@@ -147,7 +147,7 @@ export const MemberActions = ({ member }: MemberActionsProps) => {
 
     deleteInvitation(
       { slug, id: invitedId },
-      { onSuccess: () => toast.success('Successfully revoked the invitation.') }
+      { onSuccess: () => toast.success('Successfully canceled the invitation') }
     )
   }
 
@@ -170,7 +170,7 @@ export const MemberActions = ({ member }: MemberActionsProps) => {
             content: {
               side: 'bottom',
               text: isPendingInviteAcceptance
-                ? 'Role can only be changed after the user has accepted the invite'
+                ? 'Access can be managed after the invite is accepted'
                 : !canRemoveMember
                   ? 'You need additional permissions to manage this team member'
                   : undefined,
diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/MemberRow.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/MemberRow.tsx
index 5dea2402437de..083253d99fc1f 100644
--- a/apps/studio/components/interfaces/Organization/TeamSettings/MemberRow.tsx
+++ b/apps/studio/components/interfaces/Organization/TeamSettings/MemberRow.tsx
@@ -1,4 +1,4 @@
-import { ArrowRight, Check, User, X } from 'lucide-react'
+import { ArrowRight, Check, User, X, ChevronRight } from 'lucide-react'
 import Link from 'next/link'
 import { useMemo } from 'react'
 
@@ -72,40 +72,44 @@ export const MemberRow = ({ member }: MemberRowProps) => {
               </div>
             }
           />
-          <div className="flex item-center gap-x-2">
+          <div className="flex item-center gap-x-3">
             <p className="text-foreground-light truncate">{member.primary_email}</p>
-            {member.gotrue_id === profile?.gotrue_id && <Badge>You</Badge>}
+            <div className="flex items-center gap-x-2">
+              {member.gotrue_id === profile?.gotrue_id && <Badge>You</Badge>}
+              {isInvitedUser && member.invited_at && (
+                <Badge variant={isInviteExpired(member.invited_at) ? 'destructive' : 'warning'}>
+                  {isInviteExpired(member.invited_at) ? 'Expired' : 'Invited'}
+                </Badge>
+              )}
+              {member.is_sso_user && <Badge variant="default">SSO</Badge>}
+              {(member.metadata as any)?.origin && (
+                <PartnerIcon
+                  organization={{
+                    managed_by:
+                      MEMBER_ORIGIN_TO_MANAGED_BY[
+                        (member.metadata as any).origin as keyof typeof MEMBER_ORIGIN_TO_MANAGED_BY
+                      ] ?? 'supabase',
+                  }}
+                  tooltipText="Managed by Vercel Marketplace."
+                />
+              )}
+            </div>
           </div>
-
-          {(member.metadata as any)?.origin && (
-            <PartnerIcon
-              organization={{
-                managed_by:
-                  MEMBER_ORIGIN_TO_MANAGED_BY[
-                    (member.metadata as any).origin as keyof typeof MEMBER_ORIGIN_TO_MANAGED_BY
-                  ] ?? 'supabase',
-              }}
-              tooltipText="This user is managed by Vercel Marketplace."
-            />
-          )}
         </div>
       </TableCell>
 
       <TableCell>
-        {isInvitedUser && member.invited_at && (
-          <Badge variant={isInviteExpired(member.invited_at) ? 'destructive' : 'warning'}>
-            {isInviteExpired(member.invited_at) ? 'Expired' : 'Invited'}
-          </Badge>
-        )}
-        {member.is_sso_user && <Badge variant="default">SSO</Badge>}
-      </TableCell>
-
-      <TableCell>
-        <div className="flex items-center justify-center">
+        <div className="flex items-center gap-x-1.5">
           {member.mfa_enabled ? (
-            <Check className="text-brand" strokeWidth={2} size={20} />
+            <>
+              <span className="text-foreground-lighter">Enabled</span>
+              <Check className="text-brand" strokeWidth={2} size={16} />
+            </>
           ) : (
-            <X className="text-foreground-light" strokeWidth={1.5} size={20} />
+            <>
+              <span className="text-foreground-lighter">Disabled</span>
+              <X className="text-foreground-muted" strokeWidth={1.5} size={16} />
+            </>
           )}
         </div>
       </TableCell>
@@ -130,18 +134,18 @@ export const MemberRow = ({ member }: MemberRowProps) => {
 
             return (
               <div key={`role-${id}`} className="flex items-center gap-x-2">
-                <p>{roleName}</p>
+                <p className="text-foreground-light">{roleName}</p>
                 {hasProjectScopedRoles && (
                   <>
-                    <span>•</span>
+                    <ChevronRight className="text-foreground-muted/50" size={14} />
                     {projectsApplied.length === 1 ? (
-                      <span className="text-foreground truncate" title={projectsApplied[0]}>
+                      <span className="text-foreground-light truncate" title={projectsApplied[0]}>
                         {projectsApplied[0]}
                       </span>
                     ) : (
                       <HoverCard_Shadcn_ openDelay={200}>
                         <HoverCardTrigger_Shadcn_ asChild>
-                          <span className="text-foreground">
+                          <span className="text-foreground-light">
                             {role?.projects.length === 0
                               ? 'Organization'
                               : `${projectsApplied.length} project${projectsApplied.length > 1 ? 's' : ''}`}
diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
index 97042788b4c0c..3ccf0d018b0dd 100644
--- a/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
+++ b/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
@@ -15,6 +15,7 @@ import {
   Table,
   TableBody,
   TableCell,
+  TableFooter,
   TableHead,
   TableHeader,
   TableRow,
@@ -62,6 +63,7 @@ const MembersView = ({ searchString }: MembersViewProps) => {
               member.username.includes(searchString) || member.primary_email?.includes(searchString)
             )
           }
+          return false
         })
   }, [members, searchString])
 
@@ -102,30 +104,9 @@ const MembersView = ({ searchString }: MembersViewProps) => {
               <Table>
                 <TableHeader>
                   <TableRow>
-                    <TableHead key="header-user">User</TableHead>
-                    <TableHead key="header-status" className="w-24" />
-                    <TableHead key="header-mfa" className="text-center w-32">
-                      Enabled MFA
-                    </TableHead>
-                    <TableHead key="header-role" className="flex items-center space-x-1">
-                      <span>Role</span>
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Button asChild type="text" className="px-1">
-                            <a
-                              target="_blank"
-                              rel="noreferrer"
-                              href={`${DOCS_URL}/guides/platform/access-control`}
-                            >
-                              <HelpCircle size={14} className="text-foreground-light" />
-                            </a>
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipContent side="bottom">
-                          How to configure access control?
-                        </TooltipContent>
-                      </Tooltip>
-                    </TableHead>
+                    <TableHead key="header-user">Member</TableHead>
+                    <TableHead key="header-mfa">MFA</TableHead>
+                    <TableHead key="header-role">Role</TableHead>
                     <TableHead key="header-action" />
                   </TableRow>
                 </TableHeader>
@@ -138,9 +119,9 @@ const MembersView = ({ searchString }: MembersViewProps) => {
                             <TableCell colSpan={12} className="!p-0">
                               <Admonition
                                 type="note"
-                                title="You are currently assigned with project scoped roles in this organization"
-                                description="All other members within the organization will not be visible to you"
-                                className="bg-alternative border-0 rounded-none"
+                                title="You have limited visibility in this organization"
+                                description="Your access is limited to specific projects, so you can’t see all members or settings."
+                                className="border-0 rounded-none"
                               />
                             </TableCell>
                           </TableRow>,
@@ -157,23 +138,24 @@ const MembersView = ({ searchString }: MembersViewProps) => {
                               <div className="flex items-center space-x-3 opacity-75">
                                 <AlertCircle size={16} strokeWidth={2} />
                                 <p className="text-foreground-light">
-                                  No users matched the search query "{searchString}"
+                                  No members matched the search query "{searchString}"
                                 </p>
                               </div>
                             </TableCell>
                           </TableRow>,
                         ]
                       : []),
-                    <TableRow key="footer" className="bg-panel-secondary-light">
-                      <TableCell colSpan={12}>
-                        <p className="text-foreground-light">
-                          {searchString ? `${filteredMembers.length} of ` : ''}
-                          {members.length || '0'} {members.length == 1 ? 'user' : 'users'}
-                        </p>
-                      </TableCell>
-                    </TableRow>,
                   ]}
                 </TableBody>
+                <TableFooter className="font-normal">
+                  <TableRow className="border-b-0 [&>td]:hover:bg-inherit">
+                    <TableCell colSpan={4} className="text-foreground-muted">
+                      {searchString
+                        ? `${filteredMembers.length} of ${members.length} ${members.length === 1 ? 'member' : 'members'}`
+                        : `${members.length || 0} ${members.length === 1 ? 'member' : 'members'}`}
+                    </TableCell>
+                  </TableRow>
+                </TableFooter>
               </Table>
             </Loading>
           </Card>
diff --git a/packages/ui/src/components/ExpandingTextArea/index.tsx b/packages/ui/src/components/ExpandingTextArea/index.tsx
index 03abc44338dcb..48b8755dd1ff2 100644
--- a/packages/ui/src/components/ExpandingTextArea/index.tsx
+++ b/packages/ui/src/components/ExpandingTextArea/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { forwardRef, useImperativeHandle, useRef } from 'react'
+import React, { forwardRef, useImperativeHandle, useLayoutEffect, useRef } from 'react'
 
 import { cn } from '../../lib/utils'
 import { TextArea } from '../shadcn/ui/text-area'
@@ -22,16 +22,17 @@ const ExpandingTextArea = forwardRef<HTMLTextAreaElement, ExpandingTextAreaProps
     const updateTextAreaHeight = (element: HTMLTextAreaElement | null) => {
       if (!element) return
 
-      // Update the height
-      if (!value) {
-        element.style.height = 'auto'
-        element.style.minHeight = '36px'
-      } else {
-        element.style.height = 'auto'
-        element.style.height = element.scrollHeight + 'px'
-      }
+      // Match single-line input height (h-10 = 40px) so we don't shrink when typing; grow only when content wraps
+      const singleLineHeightPx = 40
+      element.style.height = 'auto'
+      const contentHeight = element.scrollHeight
+      element.style.height = Math.max(singleLineHeightPx, contentHeight) + 'px'
     }
 
+    useLayoutEffect(() => {
+      updateTextAreaHeight(internalRef.current)
+    }, [value])
+
     return (
       <TextArea
         ref={(element) => {

From 8d811b9837eb667717dd9399690201688de5ca52 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 26 Feb 2026 15:06:09 +0800
Subject: [PATCH 2/5] Chore/advisor panel all should not show no project notice
 (#43169)

## Context

Adjust advisor panel to not show "Project required" UI for the "All"
panel since messages do not require to be in a specific project

<img width="434" height="251" alt="image"
src="https://github.com/user-attachments/assets/8a999ca7-1a81-4c63-a6f7-c73cbdd676e3"
/>

Also adjusts the red dot for advisor center button to show if there's
critical notifications
---
 apps/studio/components/layouts/AppLayout/AdvisorButton.tsx  | 6 +++++-
 apps/studio/components/ui/AdvisorPanel/AdvisorPanelBody.tsx | 6 +++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx b/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx
index 1b4787d0600f3..fa763f76209ac 100644
--- a/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx
+++ b/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx
@@ -12,7 +12,6 @@ export const AdvisorButton = ({ projectRef }: { projectRef?: string }) => {
   const { toggleSidebar, activeSidebar } = useSidebarManagerSnapshot()
 
   const { data: lints } = useProjectLintsQuery({ projectRef })
-  const hasCriticalIssues = Array.isArray(lints) && lints.some((lint) => lint.level === 'ERROR')
 
   const { data: notificationsData } = useNotificationsV2Query({
     status: 'new',
@@ -23,6 +22,11 @@ export const AdvisorButton = ({ projectRef }: { projectRef?: string }) => {
     return notificationsData?.pages.flatMap((page) => page) ?? []
   }, [notificationsData?.pages])
   const hasUnreadNotifications = notifications.some((x) => x.status === 'new')
+  const hasCriticalNotifications = notifications.some((x) => x.priority === 'Critical')
+
+  const hasCriticalIssues =
+    hasCriticalNotifications ||
+    (Array.isArray(lints) && lints.some((lint) => lint.level === 'ERROR'))
 
   const isOpen = activeSidebar?.id === SIDEBAR_KEYS.ADVISOR_PANEL
 
diff --git a/apps/studio/components/ui/AdvisorPanel/AdvisorPanelBody.tsx b/apps/studio/components/ui/AdvisorPanel/AdvisorPanelBody.tsx
index a12326e244782..3b7b80860d387 100644
--- a/apps/studio/components/ui/AdvisorPanel/AdvisorPanelBody.tsx
+++ b/apps/studio/components/ui/AdvisorPanel/AdvisorPanelBody.tsx
@@ -1,10 +1,10 @@
-import { AlertTriangle, ChevronRight, Inbox } from 'lucide-react'
-
 import { Lint } from 'data/lint/lint-query'
 import { Notification } from 'data/notifications/notifications-v2-query'
+import { AlertTriangle, ChevronRight, Inbox } from 'lucide-react'
 import { AdvisorSeverity, AdvisorTab } from 'state/advisor-state'
 import { Badge, Button, cn } from 'ui'
 import { GenericSkeletonLoader } from 'ui-patterns'
+
 import type { AdvisorItem } from './AdvisorPanel.types'
 import {
   formatItemDate,
@@ -57,7 +57,7 @@ export const AdvisorPanelBody = ({
   hasProjectRef = true,
 }: AdvisorPanelBodyProps) => {
   // Show notice if no project ref and trying to view project-specific tabs
-  if (!hasProjectRef && activeTab !== 'messages') {
+  if (!hasProjectRef && activeTab !== 'messages' && activeTab !== 'all') {
     return <NoProjectNotice />
   }
 

From ff4f58d725ce32ff0df505c375ef5c75dc30a57e Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 26 Feb 2026 15:31:18 +0800
Subject: [PATCH 3/5] chore(studio): Implement auto retry logic for renaming
 folders in Storage Explorer (#43086)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Context

Renaming folders on the Storage Explorer has a tendency to be flaky as
we're using the `POST /objects/move` storage API to move files to the
renamed folder which handles one file per request.

For a big folder (e.g 100+ files), users will easily hit rate limits and
run into 429s with the API, in which the current behaviour just shows
toast errors as the error handler, leaving an odd state upon running
through every file in the folder where some files are in the old folder,
and others in the new one

## Changes involved

Main solution is to implement an automatic retry logic for
`renameFolder`, but changes involved are:
- Remove batching logic for renaming folders (Which fires `n` requests
per batch)
- The batch logic was negligible anyways since our batch size was only 2
😅
  - Instead we now handle moving of files sequentially
- If a file runs into an error during the `POST` request, retry the
request after `n` seconds
- If the error was a 429, retry after 60 seconds, otherwise just 5
seconds
  - Will attempt the request for a total of 3 times
- Toast progress description will also be updated to show the message
(timer will also count down to keep the UI interactive and not look
stuck)
<img width="362" height="98" alt="image"
src="https://github.com/user-attachments/assets/52ba685a-2f35-42f1-8fcf-98351184fd56"
/>
- After the whole process is completed, if any file ran into an error,
toast description will add a CTA to retry the rename

## Demo


https://github.com/user-attachments/assets/d65b3c22-f9f8-4984-9521-6fc83a69f82e

## To test

Have a folder in your project's storage bucket with 100+ files (can
stress test with nested folders)
- [ ] Verify that you can rename the folder, and the dashboard
automatically handles errors
---
 apps/studio/state/storage-explorer.tsx        | 107 ++++++++++++------
 .../components/shadcn/ui/sonner-progress.tsx  |   4 +-
 2 files changed, 75 insertions(+), 36 deletions(-)

diff --git a/apps/studio/state/storage-explorer.tsx b/apps/studio/state/storage-explorer.tsx
index 4e98579275de5..fa1a9590e69e0 100644
--- a/apps/studio/state/storage-explorer.tsx
+++ b/apps/studio/state/storage-explorer.tsx
@@ -62,7 +62,8 @@ type UploadProgress = {
 
 const LIMIT = 200
 const OFFSET = 0
-const BATCH_SIZE = 2
+const DEFAULT_RETRY_SECONDS = 5
+const RATE_LIMIT_RETRY_SECONDS = 60
 
 const DEFAULT_PREFERENCES = {
   view: STORAGE_VIEWS.COLUMNS,
@@ -660,10 +661,10 @@ function createStorageExplorerState({
         const files = await state.getAllItemsAlongFolder(folder)
 
         let progress = 0
-        let hasErrors = false
+        let failedFiles = 0
+        let retrySeconds = DEFAULT_RETRY_SECONDS
 
-        // Make this batched promises into a reusable function for storage, i think this will be super helpful
-        const promises = files.map((file) => {
+        for (const file of files) {
           const fromPath = `${file.prefix}/${file.name}`
           const pathSegments = fromPath.split('/')
           const toPath = pathSegments
@@ -671,50 +672,86 @@ function createStorageExplorerState({
             .concat(newName)
             .concat(pathSegments.slice(columnIndex + 1))
             .join('/')
-          return () => {
-            return new Promise<void>(async (resolve) => {
-              progress = progress + 1 / files.length
-              try {
-                await moveStorageObject({
-                  projectRef: state.projectRef,
-                  bucketId: state.selectedBucket.id,
-                  from: fromPath,
-                  to: toPath,
+
+          let success = false
+          let isRateLimited = false
+
+          for (let attempt = 0; attempt < 3 && !success; attempt++) {
+            try {
+              if (attempt > 0) {
+                await new Promise<void>((resolve) => {
+                  let seconds = retrySeconds
+                  const interval = setInterval(() => {
+                    toast(
+                      <SonnerProgress
+                        progress={Math.min(progress * 100, 100)}
+                        message={`Renaming folder to ${newName}`}
+                        description={`${isRateLimited ? 'API rate limited' : 'Error moving file'} - retrying in ${seconds} seconds (${attempt}/3)`}
+                      />,
+                      { id: toastId, closeButton: false, position: 'top-right', duration: Infinity }
+                    )
+
+                    seconds--
+                    if (seconds <= 0) {
+                      clearInterval(interval)
+                      resolve()
+                    }
+                  }, 1000)
                 })
-              } catch (error) {
-                hasErrors = true
-                toast.error(`Failed to move ${fromPath} to the new folder`)
               }
-              resolve()
-            })
-          }
-        })
 
-        const batchedPromises = chunk(promises, BATCH_SIZE)
-        // [Joshen] I realised this can be simplified with just a vanilla for loop, no need for reduce
-        // Just take note, but if it's working fine, then it's okay
+              await moveStorageObject({
+                projectRef: state.projectRef,
+                bucketId: state.selectedBucket.id,
+                from: fromPath,
+                to: toPath,
+              })
+              success = true
+            } catch (error) {
+              if ((error as ResponseError).code === 429) {
+                isRateLimited = true
+                retrySeconds = RATE_LIMIT_RETRY_SECONDS
+              } else {
+                isRateLimited = false
+                retrySeconds = DEFAULT_RETRY_SECONDS
+              }
 
-        await batchedPromises.reduce(async (previousPromise, nextBatch) => {
-          await previousPromise
-          await Promise.all(nextBatch.map((batch) => batch()))
+              if (attempt === 2) failedFiles += 1
+            }
+          }
+
+          progress += 1 / files.length
           toast(
-            <SonnerProgress progress={progress * 100} message={`Renaming folder to ${newName}`} />,
-            { id: toastId, closeButton: false, position: 'top-right' }
+            <SonnerProgress
+              progress={Math.min(progress * 100, 100)}
+              message={`Renaming folder to ${newName}`}
+            />,
+            { id: toastId, closeButton: false, position: 'top-right', duration: Infinity }
           )
-        }, Promise.resolve())
+        }
 
-        if (!hasErrors) {
+        if (failedFiles === 0) {
           toast.success(`Successfully renamed folder to ${newName}`, {
             id: toastId,
             closeButton: true,
             duration: SONNER_DEFAULT_DURATION,
           })
         } else {
-          toast.error(`Renamed folder to ${newName} with some errors`, {
-            id: toastId,
-            closeButton: true,
-            duration: SONNER_DEFAULT_DURATION,
-          })
+          toast.error(
+            <div>
+              <p>
+                Renamed folder to {newName} with {failedFiles} error{failedFiles > 1 ? 's' : ''}
+              </p>
+              <p className="text-foreground-light">
+                You may try again to rename the folder {originalName} to {newName}
+              </p>
+            </div>,
+            {
+              id: toastId,
+              closeButton: true,
+              duration: Infinity,
+            }
+          )
         }
 
         if (state.openedFolders[columnIndex]?.name === folder.name) {
diff --git a/packages/ui/src/components/shadcn/ui/sonner-progress.tsx b/packages/ui/src/components/shadcn/ui/sonner-progress.tsx
index d349947ac0334..643d06f92f933 100644
--- a/packages/ui/src/components/shadcn/ui/sonner-progress.tsx
+++ b/packages/ui/src/components/shadcn/ui/sonner-progress.tsx
@@ -18,11 +18,13 @@ export const SonnerProgress = ({
   progressPrefix,
   action,
   message,
+  description = 'Please do not close the browser',
 }: {
   progress: number
   progressPrefix?: string
   action?: React.ReactNode
   message: string
+  description?: string
 }) => (
   <div className="flex gap-3 w-full">
     <Loader2 className="animate-spin text-foreground-muted mt-0.5" size={16} />
@@ -36,7 +38,7 @@ export const SonnerProgress = ({
       </div>
       <Progress value={progress} className="w-full" />
       <div className="flex flex-row gap-2 items-center justify-between">
-        <small className="text-foreground-lighter text-xs">Please do not close the browser</small>
+        <small className="text-foreground-lighter text-xs">{description}</small>
         {action}
       </div>
     </div>

From f3b6993de7c3efc2dd01fd2abd219f821cd38403 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 26 Feb 2026 15:59:41 +0800
Subject: [PATCH 4/5] New home page, show service status as coming up if
 service health is unhealthy + project status is coming up (#43117)

## Context

With the new home page, we have a stat to show the overall status of the
project + individual service health, both of which data is pulled from
an endpoint
<img width="283" height="400" alt="image"
src="https://github.com/user-attachments/assets/c7cbfdc6-b46b-41ce-9a89-59a3df98b586"
/>

At the time of project creation, some of the services start of as
UNHEALTHY, which results in the status stat here showing a label of
"Unhealthy" (while accurate in the sense that we're showing what's
coming from the API, its inaccurate as the services are still spinning
up)

## Changes involved

For each service, am opting to show their status as "COMING_UP" if the
service status is UNHEALTHY + the project's status is COMING_UP or
UNKNOWN. The overall status label should also show "Coming up" if the
project's status is COMING_UP or UNKNOWN as well
---
 .../interfaces/HomeNew/ServiceStatus.tsx      | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/apps/studio/components/interfaces/HomeNew/ServiceStatus.tsx b/apps/studio/components/interfaces/HomeNew/ServiceStatus.tsx
index ba4d114d0c4b4..fbdf0c87c493f 100644
--- a/apps/studio/components/interfaces/HomeNew/ServiceStatus.tsx
+++ b/apps/studio/components/interfaces/HomeNew/ServiceStatus.tsx
@@ -1,22 +1,22 @@
-import dayjs from 'dayjs'
-import { ChevronRight, Loader2 } from 'lucide-react'
-import Link from 'next/link'
-
 import { useParams } from 'common'
 import { InlineLink } from 'components/ui/InlineLink'
 import { SingleStat } from 'components/ui/SingleStat'
 import { useBranchesQuery } from 'data/branches/branches-query'
 import { useEdgeFunctionServiceStatusQuery } from 'data/service-status/edge-functions-status-query'
 import { useProjectServiceStatusQuery } from 'data/service-status/service-status-query'
+import dayjs from 'dayjs'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { DOCS_URL } from 'lib/constants'
-import { InfoIcon, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_, Popover_Shadcn_, cn } from 'ui'
+import { ChevronRight, Loader2 } from 'lucide-react'
+import Link from 'next/link'
+import { cn, InfoIcon, Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+
 import {
+  extractDbSchema,
   ProjectServiceStatus,
   StatusIcon,
   StatusMessage,
-  extractDbSchema,
 } from '../Home/ServiceStatus'
 
 const SERVICE_STATUS_THRESHOLD = 5 // minutes
@@ -224,10 +224,11 @@ export const ServiceStatus = () => {
         currentBranch?.status === 'RUNNING_MIGRATIONS' ||
         isMigrationLoading))
 
+  const isProjectComingUp = ['COMING_UP', 'UNKNOWN'].includes(project?.status ?? '')
+
   const anyUnhealthy = services.some((service) => service.status === 'UNHEALTHY')
-  const anyComingUp = services.some((service) => service.status === 'COMING_UP')
-  // Spinner only while the overall project is in COMING_UP; otherwise show 6-dot grid
-  const showSpinnerIcon = project?.status === 'COMING_UP'
+  const anyComingUp =
+    isProjectComingUp || services.some((service) => service.status === 'COMING_UP')
 
   const getOverallStatusLabel = (): string => {
     if (isLoadingChecks) return 'Checking...'
@@ -243,7 +244,8 @@ export const ServiceStatus = () => {
       <PopoverTrigger_Shadcn_>
         <SingleStat
           icon={
-            showSpinnerIcon ? (
+            // Spinner only while the overall project is in COMING_UP; otherwise show 6-dot grid
+            isProjectComingUp ? (
               <Loader2 className="animate-spin" size={18} />
             ) : (
               <div className="grid grid-cols-3 gap-1">
@@ -288,7 +290,11 @@ export const ServiceStatus = () => {
                   <StatusMessage
                     isLoading={service.isLoading}
                     isProjectNew={isProjectNew}
-                    status={service.status}
+                    status={
+                      isProjectComingUp && service.status === 'UNHEALTHY'
+                        ? 'COMING_UP'
+                        : service.status
+                    }
                   />
                 </p>
               </div>

From c159a2d964fbb241e3b16886fc830d4e54feb1ce Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 26 Feb 2026 16:02:27 +0800
Subject: [PATCH 5/5] Tiny fix for notifications red dot (#43204)

## Context

Should've removed the `status` prop when fetching notifications in
`AdvisorButton` for a more accurate indication of
`hasCriticalNotifications` as we should show that dot for read critical
notifications too (not just new)
---
 apps/studio/components/layouts/AppLayout/AdvisorButton.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx b/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx
index fa763f76209ac..f2c49386fefc5 100644
--- a/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx
+++ b/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx
@@ -14,7 +14,6 @@ export const AdvisorButton = ({ projectRef }: { projectRef?: string }) => {
   const { data: lints } = useProjectLintsQuery({ projectRef })
 
   const { data: notificationsData } = useNotificationsV2Query({
-    status: 'new',
     filters: {},
     limit: 20,
   })