fix(studio): empty team drop downs (supabase#37537)

* fix: empty team drop downs

This fixes dropdowns returning empty on team invites when a user is signed in as a developer. For now it adds conditionals to show the option is not available for that role, but perhaps we can handle a little more gracefully.

* fix: change from inline to tooltips on dropdowns

This updates the members table dropdown to use the tooltip as opposed to inline message for disabled items.

* Tiny clean up

* Biiiit more nit

---------

Co-authored-by: kemal <[email protected]>
Co-authored-by: Joshen Lim <[email protected]>

Author: 3 people

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

@@ -5,6 +5,7 @@ import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
+import { DropdownMenuItemTooltip } from 'components/ui/DropdownMenuItemTooltip'
 import { useOrganizationCreateInvitationMutation } from 'data/organization-members/organization-invitation-create-mutation'
 import { useOrganizationDeleteInvitationMutation } from 'data/organization-members/organization-invitation-delete-mutation'
 import { useOrganizationRolesV2Query } from 'data/organization-members/organization-roles-query'
@@ -17,13 +18,12 @@ import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useProjectsQuery } from 'data/projects/projects-query'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
-import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
+import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useProfile } from 'lib/profile'
 import {
   Button,
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from 'ui'
@@ -43,7 +43,7 @@ export const MemberActions = ({ member }: MemberActionsProps) => {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
   const organizationMembersDeletionEnabled = useIsFeatureEnabled('organization_members:delete')
 
-  const selectedOrganization = useSelectedOrganization()
+  const { data: selectedOrganization } = useSelectedOrganizationQuery()
   const { data: permissions } = usePermissionsQuery()
   const { data: allProjects } = useProjectsQuery()
   const { data: members } = useOrganizationMembersQuery({ slug })
@@ -186,47 +186,54 @@ export const MemberActions = ({ member }: MemberActionsProps) => {
               icon={<MoreVertical />}
             />
           </DropdownMenuTrigger>
-          <DropdownMenuContent side="bottom" align="end" className="w-52">
+          <DropdownMenuContent side="bottom" align="end" className="w-40">
             <>
               {isPendingInviteAcceptance ? (
                 <>
-                  {canRevokeInvite && (
-                    <DropdownMenuItem onClick={() => handleRevokeInvitation(member)}>
-                      <div className="flex flex-col">
-                        <p>Cancel invitation</p>
-                        <p className="text-foreground-lighter">Revoke this invitation.</p>
-                      </div>
-                    </DropdownMenuItem>
-                  )}
-                  {canResendInvite && (
-                    <>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuItem onClick={() => handleResendInvite(member)}>
-                        <div className="flex flex-col">
-                          <p>Resend invitation</p>
-                          <p className="text-foreground-lighter">Invites expire after 24hrs.</p>
-                        </div>
-                      </DropdownMenuItem>
-                    </>
-                  )}
+                  <DropdownMenuItemTooltip
+                    className="gap-x-2"
+                    disabled={!canRevokeInvite}
+                    onClick={() => handleRevokeInvitation(member)}
+                    tooltip={{
+                      content: {
+                        side: 'left',
+                        text: 'Additional permissions required to cancel invitation',
+                      },
+                    }}
+                  >
+                    <p>Cancel invitation</p>
+                  </DropdownMenuItemTooltip>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItemTooltip
+                    className="gap-x-2"
+                    disabled={!canResendInvite}
+                    onClick={() => handleResendInvite(member)}
+                    tooltip={{
+                      content: {
+                        side: 'left',
+                        text: 'Additional permissions required to resend invitation',
+                      },
+                    }}
+                  >
+                    <p>Resend invitation</p>
+                  </DropdownMenuItemTooltip>
                 </>
               ) : (
                 organizationMembersDeletionEnabled && (
-                  <DropdownMenuItem
-                    className="space-x-2 items-start"
+                  <DropdownMenuItemTooltip
+                    className="gap-x-2"
                     disabled={!canRemoveMember}
-                    onClick={() => {
-                      setIsDeleteModalOpen(true)
+                    onClick={() => setIsDeleteModalOpen(true)}
+                    tooltip={{
+                      content: {
+                        side: 'left',
+                        text: 'Additional permissions required to remove member',
+                      },
                     }}
                   >
-                    <Trash size={16} />
-                    <div className="flex flex-col">
-                      <p>Remove member</p>
-                      {!canRemoveMember && (
-                        <p className="text-foreground-lighter">Additional permissions required</p>
-                      )}
-                    </div>
-                  </DropdownMenuItem>
+                    <Trash size={12} />
+                    <p>Remove member</p>
+                  </DropdownMenuItemTooltip>
                 )
               )}
             </>