Extract isOwnerAndCanLeaveOrg into utils file instead of store and refactor

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

@@ -8,7 +8,7 @@ import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
 import InviteMemberButton from './InviteMemberButton'
 import MembersView from './MembersView'
-import { getRolesManagementPermissions } from './TeamSettings.utils'
+import { getRolesManagementPermissions, hasMultipleOwners } from './TeamSettings.utils'
 import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
 
 import { PageContext } from 'pages/org/[slug]/settings'
@@ -25,7 +25,7 @@ const TeamSettings = observer(() => {
   const [isLeaving, setIsLeaving] = useState(false)
   const canAddMembers = rolesAddable.length > 0
 
-  const canLeave = !isOwner || ui.isOwnerAndCanLeaveOrg(members)
+  const canLeave = !isOwner || (isOwner && hasMultipleOwners(members, roles))
 
   function onFilterMemberChange(e: any) {
     PageState.membersFilterString = e.target.value

studio/components/interfaces/Organization/TeamSettings/TeamSettings.utils.ts

@@ -1,4 +1,4 @@
-import { Role } from 'types'
+import { Member, Role } from 'types'
 import { checkPermissions } from 'hooks'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
@@ -23,3 +23,12 @@ export const getRolesManagementPermissions = (
 
   return { rolesAddable, rolesRemovable }
 }
+
+export const hasMultipleOwners = (members: Member[], roles: Role[]) => {
+  const membersWhoAreOwners = members.filter((member) => {
+    const [memberRoleId] = member.role_ids ?? []
+    const role = roles.find((role: Role) => role.id === memberRoleId)
+    return role?.name === 'Owner' && !member.invited_at
+  })
+  return membersWhoAreOwners.length > 1
+}

studio/stores/UiStore.ts

@@ -1,18 +1,8 @@
 import { uuidv4 } from 'lib/helpers'
 import { action, makeAutoObservable } from 'mobx'
-import {
-  Project,
-  Notification,
-  User,
-  Organization,
-  ProjectBase,
-  Permission,
-  Member,
-  Role,
-} from 'types'
+import { Project, Notification, User, Organization, ProjectBase, Permission } from 'types'
 import { IRootStore } from './RootStore'
 import Telemetry from 'lib/telemetry'
-import { useOrganizationRoles } from 'hooks'
 
 export interface IUiStore {
   language: 'en_US'
@@ -36,7 +26,6 @@ export interface IUiStore {
   setNotification: (notification: Notification) => string
   setProfile: (value?: User) => void
   setPermissions: (permissions?: Permission[]) => void
-  isOwnerAndCanLeaveOrg: (members: Member[]) => boolean
 }
 export default class UiStore implements IUiStore {
   rootStore: IRootStore
@@ -168,23 +157,4 @@ export default class UiStore implements IUiStore {
   setPermissions(permissions?: any) {
     this.permissions = permissions
   }
-
-  /*
-   * Check whether the owner is allowed to leave a project
-   * the conditions for this is that they are an owner, and there is also 1 other owner in the org.
-   */
-  isOwnerAndCanLeaveOrg(members: Member[]) {
-    const selectedOrg = this.selectedOrganization
-    if (!selectedOrg?.is_owner) return false
-
-    const roles: { roles: Role[] } = useOrganizationRoles(this.selectedOrganization?.slug)
-
-    const membersWhoAreOwners = members.filter((member) => {
-      const [memberRoleId] = member.role_ids ?? []
-      const role = (roles.roles || []).find((role: Role) => role.id === memberRoleId)
-      return role?.name === 'Owner' && !member.invited_at
-    })
-
-    return membersWhoAreOwners.length > 1
-  }
 }