Fix leave team button visibility (supabase#36480)

* Fix leave team button visibility

* Add button type

Author: joshenlim

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

@@ -8,17 +8,15 @@ import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useParams } from 'common'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import InformationBox from 'components/ui/InformationBox'
 import { useOrganizationCreateInvitationMutation } from 'data/organization-members/organization-invitation-create-mutation'
 import { useOrganizationRolesV2Query } from 'data/organization-members/organization-roles-query'
 import { useOrganizationMembersQuery } from 'data/organizations/organization-members-query'
 import { useProjectsQuery } from 'data/projects/projects-query'
 import { useHasAccessToProjectLevelPermissions } from 'data/subscriptions/org-subscription-query'
-import {
-  doPermissionsCheck,
-  useCheckPermissions,
-  useGetPermissions,
-} from 'hooks/misc/useCheckPermissions'
+import { doPermissionsCheck, useGetPermissions } from 'hooks/misc/useCheckPermissions'
+import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { useProfile } from 'lib/profile'
 import {
@@ -50,9 +48,6 @@ import {
   SelectTrigger_Shadcn_,
   Select_Shadcn_,
   Switch,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
   cn,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -64,6 +59,10 @@ export const InviteMemberButton = () => {
   const organization = useSelectedOrganization()
   const { permissions: permissions } = useGetPermissions()
 
+  const { organizationMembersCreate: organizationMembersCreationEnabled } = useIsFeatureEnabled([
+    'organization_members:create',
+  ])
+
   const [isOpen, setIsOpen] = useState(false)
   const [projectDropdownOpen, setProjectDropdownOpen] = useState(false)
 
@@ -75,10 +74,6 @@ export const InviteMemberButton = () => {
   const orgProjects = (projects ?? [])
     .filter((project) => project.organization_id === organization?.id)
     .sort((a, b) => a.name.localeCompare(b.name))
-  const canReadSubscriptions = useCheckPermissions(
-    PermissionAction.BILLING_READ,
-    'stripe.subscriptions'
-  )
 
   const currentPlan = organization?.plan
   const hasAccessToProjectLevelPermissions = useHasAccessToProjectLevelPermissions(slug as string)
@@ -96,6 +91,7 @@ export const InviteMemberButton = () => {
 
   const canInviteMembers =
     hasOrgRole &&
+    rolesAddable.length > 0 &&
     orgScopedRoles.some(({ id: role_id }) =>
       doPermissionsCheck(
         permissions,
@@ -182,22 +178,24 @@ export const InviteMemberButton = () => {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              disabled={!canInviteMembers}
-              className="pointer-events-auto flex-grow md:flex-grow-0"
-              onClick={() => setIsOpen(true)}
-            >
-              Invite member
-            </Button>
-          </TooltipTrigger>
-          {!canInviteMembers && (
-            <TooltipContent side="bottom">
-              You need additional permissions to invite a member to this organization
-            </TooltipContent>
-          )}
-        </Tooltip>
+        <ButtonTooltip
+          type="primary"
+          disabled={!canInviteMembers}
+          className="pointer-events-auto flex-grow md:flex-grow-0"
+          onClick={() => setIsOpen(true)}
+          tooltip={{
+            content: {
+              side: 'bottom',
+              text: !organizationMembersCreationEnabled
+                ? 'Inviting members is currently disabled'
+                : !canInviteMembers
+                  ? 'You need additional permissions to invite a member to this organization'
+                  : undefined,
+            },
+          }}
+        >
+          Invite member
+        </ButtonTooltip>
       </DialogTrigger>
       <DialogContent size="medium">
         <DialogHeader>

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

@@ -29,7 +29,7 @@ import {
 } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { LeaveTeamButton } from './LeaveTeamButton'
-import { hasMultipleOwners, useGetRolesManagementPermissions } from './TeamSettings.utils'
+import { useGetRolesManagementPermissions } from './TeamSettings.utils'
 import { UpdateRolesPanel } from './UpdateRolesPanel/UpdateRolesPanel'
 
 interface MemberActionsProps {
@@ -50,10 +50,6 @@ export const MemberActions = ({ member }: MemberActionsProps) => {
   const { data: allRoles } = useOrganizationRolesV2Query({ slug })
 
   const memberIsUser = member.gotrue_id == profile?.gotrue_id
-  const isOwner = selectedOrganization?.is_owner
-  const roles = allRoles?.org_scoped_roles ?? []
-  const canLeave = !isOwner || (isOwner && hasMultipleOwners(members, roles))
-
   const orgScopedRoles = allRoles?.org_scoped_roles ?? []
   const projectScopedRoles = allRoles?.project_scoped_roles ?? []
   const isPendingInviteAcceptance = !!member.invited_id
@@ -151,25 +147,6 @@ export const MemberActions = ({ member }: MemberActionsProps) => {
     )
   }
 
-  if (!canRemoveMember || (isPendingInviteAcceptance && !canResendInvite && !canRevokeInvite)) {
-    return (
-      <div className="flex items-center justify-end">
-        <ButtonTooltip
-          disabled
-          type="text"
-          className="px-1.5"
-          icon={<MoreVertical size={18} />}
-          tooltip={{
-            content: {
-              side: 'bottom',
-              text: 'You need additional permissions to manage this team member',
-            },
-          }}
-        />
-      </div>
-    )
-  }
-
   if (memberIsUser) {
     return (
       <div className="flex items-center justify-end">

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

@@ -1,7 +1,6 @@
 import { Search } from 'lucide-react'
 import { useState } from 'react'
 
-import { useParams } from 'common'
 import {
   ScaffoldActionsContainer,
   ScaffoldActionsGroup,
@@ -10,40 +9,13 @@ import {
   ScaffoldSectionContent,
   ScaffoldTitle,
 } from 'components/layouts/Scaffold'
-import { useOrganizationRolesV2Query } from 'data/organization-members/organization-roles-query'
-import { usePermissionsQuery } from 'data/permissions/permissions-query'
-import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
-import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
-import { useProfile } from 'lib/profile'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { InviteMemberButton } from './InviteMemberButton'
 import MembersView from './MembersView'
-import { useGetRolesManagementPermissions } from './TeamSettings.utils'
 
 export const TeamSettings = () => {
-  const { organizationMembersCreate: organizationMembersCreationEnabled } = useIsFeatureEnabled([
-    'organization_members:create',
-  ])
-
-  const { slug } = useParams()
-  const { profile } = useProfile()
-  const selectedOrganization = useSelectedOrganization()
-
-  const { data: permissions } = usePermissionsQuery()
-  const { data: rolesData } = useOrganizationRolesV2Query({ slug })
-
-  const roles = rolesData?.org_scoped_roles ?? []
-
-  const { rolesAddable } = useGetRolesManagementPermissions(
-    selectedOrganization?.slug,
-    roles,
-    permissions ?? []
-  )
-
   const [searchString, setSearchString] = useState('')
 
-  const canAddMembers = rolesAddable.length > 0
-
   return (
     <ScaffoldContainerLegacy>
       <ScaffoldTitle>Team</ScaffoldTitle>
@@ -60,10 +32,7 @@ export const TeamSettings = () => {
             placeholder="Filter members"
           />
           <ScaffoldActionsGroup className="w-full md:w-auto">
-            {organizationMembersCreationEnabled &&
-              canAddMembers &&
-              profile !== undefined &&
-              selectedOrganization !== undefined && <InviteMemberButton />}
+            <InviteMemberButton />
           </ScaffoldActionsGroup>
         </ScaffoldActionsContainer>
         <ScaffoldSectionContent className="w-full">