Update remove member modal (#29410)

* Update remove member modal

* Add same warning for leaving an org

* Update modal

* Update warning

* Grammar and spacing edits

---------

Co-authored-by: Terry Sutton <saltcod@gmail.com>

apps/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx

@@ -232,7 +232,7 @@ export const MemberActions = ({ member }: MemberActionsProps) => {
               icon={<MoreVertical />}
             />
           </DropdownMenuTrigger>
-          <DropdownMenuContent side="bottom" align="end">
+          <DropdownMenuContent side="bottom" align="end" className="w-52">
             <>
               {isPendingInviteAcceptance ? (
                 <>
@@ -281,17 +281,45 @@ export const MemberActions = ({ member }: MemberActionsProps) => {
       </div>
 
       <ConfirmationModal
+        size="large"
         visible={isDeleteModalOpen}
         loading={isDeletingMember}
-        title="Confirm to remove"
+        title="Confirm to remove member"
         confirmLabel="Remove"
+        variant="warning"
+        alert={{
+          title: 'All user content from this member will be permanently removed.',
+          description: (
+            <div>
+              Removing a member will delete all of the user's saved content in all projects of this
+              organization, which includes:
+              <ul className="list-disc pl-4 my-2">
+                <li>
+                  SQL snippets{' '}
+                  <span className="text-foreground">
+                    (both <span className="underline">private</span> and{' '}
+                    <span className="underline">shared</span> snippets)
+                  </span>
+                </li>
+                <li>Custom reports</li>
+                <li>Log Explorer queries</li>
+              </ul>
+              <p className="mt-4 text-foreground-lighter">
+                If you'd like to retain the member's shared SQL snippets, right click on them and
+                "Duplicate personal copy" in the SQL Editor before removing this member.
+              </p>
+            </div>
+          ),
+        }}
         onCancel={() => setIsDeleteModalOpen(false)}
         onConfirm={() => {
           handleMemberDelete()
         }}
       >
         <p className="text-sm text-foreground-light">
-          This is permanent! Are you sure you want to remove {member.primary_email}
+          Are you sure you want to remove{' '}
+          <span className="text-foreground">{member.primary_email}</span> from{' '}
+          <span className="text-foreground">{selectedOrganization?.name}</span>?
         </p>
       </ConfirmationModal>
 

apps/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx

@@ -122,13 +122,31 @@ const TeamSettings = () => {
       </ScaffoldContainerLegacy>
 
       <ConfirmationModal
+        size="medium"
         visible={isLeaveTeamModalOpen}
-        title="Are you sure?"
+        title="Confirm to leave organization"
         confirmLabel="Leave"
-        onCancel={() => setIsLeaveTeamModalOpen(false)}
-        onConfirm={() => {
-          leaveTeam()
+        variant="warning"
+        alert={{
+          title: 'All of your user content will be permanently removed.',
+          description: (
+            <div>
+              <p>
+                Leaving the organization will delete all of your saved content in the projects of
+                the organization, which includes:
+              </p>
+              <ul className="list-disc pl-4">
+                <li>
+                  SQL snippets <span className="text-foreground">(both private and shared)</span>
+                </li>
+                <li>Custom reports</li>
+                <li>Log Explorer queries</li>
+              </ul>
+            </div>
+          ),
         }}
+        onCancel={() => setIsLeaveTeamModalOpen(false)}
+        onConfirm={() => leaveTeam()}
       >
         <p className="text-sm text-foreground-light">
           Are you sure you want to leave this organization? This is permanent.