Fixes based on comments

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

@@ -95,6 +95,7 @@ const MembersView = () => {
                 const memberIsPendingInvite = !!x.invited_id
                 const canRemoveRole = rolesRemovable.includes(memberRoleId)
                 const disableRoleEdit = !canRemoveRole || memberIsUser || memberIsPendingInvite
+                const isEmailUser = x.username === x.primary_email
 
                 const validateSelectedRoleToChange = (roleId: any) => {
                   if (!role || role.id === roleId) return
@@ -126,17 +127,17 @@ const MembersView = () => {
                               <span className="flex rounded-full border-2 border-border-secondary-light p-2 dark:border-border-secondary-dark">
                                 <IconUser size={20} strokeWidth={2} />
                               </span>
-                            ) : !x?.username?.includes('@') ? (
+                            ) : isEmailUser ? (
+                              <div className="w-[40px] h-[40px] bg-scale-300 border border-scale-400 rounded-full text-scale-900 flex items-center justify-center">
+                                <IconUser strokeWidth={1.5} />
+                              </div>
+                            ) : (
                               <Image
                                 src={`https://github.com/${x.username}.png?size=80`}
                                 width="40"
                                 height="40"
                                 className="rounded-full border"
                               />
-                            ) : (
-                              <div className="w-[40px] h-[40px] bg-scale-300 border border-scale-400 rounded-full text-scale-900 flex items-center justify-center">
-                                <IconUser strokeWidth={1.5} />
-                              </div>
                             )}
                           </div>
                           <div>

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

@@ -1,6 +1,7 @@
 import { useState, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
 import { Button, Input, IconSearch } from 'ui'
+import * as Tooltip from '@radix-ui/react-tooltip'
 
 import { useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
@@ -24,10 +25,7 @@ const TeamSettings = observer(() => {
   const [isLeaving, setIsLeaving] = useState(false)
   const canAddMembers = rolesAddable.length > 0
 
-  const canLeave = (isOwner && ui.isOwnerAndCanLeaveOrg(members)) || !isOwner
-
-  console.log(rolesAddable)
-  console.log(PageState)
+  const canLeave = !isOwner || ui.isOwnerAndCanLeaveOrg(members)
 
   function onFilterMemberChange(e: any) {
     PageState.membersFilterString = e.target.value
@@ -82,13 +80,35 @@ const TeamSettings = observer(() => {
                 />
               </div>
             )}
-            {canLeave && (
-              <div>
-                <Button type="default" onClick={() => leaveTeam()} loading={isLeaving}>
-                  Leave team
-                </Button>
-              </div>
-            )}
+            <div>
+              <Tooltip.Root delayDuration={0}>
+                <Tooltip.Trigger>
+                  <Button
+                    type="default"
+                    disabled={!canLeave}
+                    onClick={() => leaveTeam()}
+                    loading={isLeaving}
+                  >
+                    Leave team
+                  </Button>
+                </Tooltip.Trigger>
+                {!canLeave && (
+                  <Tooltip.Content side="bottom">
+                    <Tooltip.Arrow className="radix-tooltip-arrow" />
+                    <div
+                      className={[
+                        'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                        'border border-scale-200',
+                      ].join(' ')}
+                    >
+                      <span className="text-xs text-scale-1200">
+                        An organization requires at least 1 owner
+                      </span>
+                    </div>
+                  </Tooltip.Content>
+                )}
+              </Tooltip.Root>
+            </div>
           </div>
         </div>
       </div>

studio/stores/UiStore.ts

@@ -36,7 +36,7 @@ export interface IUiStore {
   setNotification: (notification: Notification) => string
   setProfile: (value?: User) => void
   setPermissions: (permissions?: Permission[]) => void
-  isOwnerAndCanLeaveOrg: (members: Member[]) => void
+  isOwnerAndCanLeaveOrg: (members: Member[]) => boolean
 }
 export default class UiStore implements IUiStore {
   rootStore: IRootStore
@@ -170,27 +170,21 @@ export default class UiStore implements IUiStore {
   }
 
   /*
-   * Check wether the owner is allowed to leave a project
+   * 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)
-      // dangerous use of string here
-      // to do, refactor so that changing the role name does not fail this check
-      // if role name does change, then user will simply not be able to leave project as a 'owner' regardless
-      return role && role.name === 'Owner' && !member.invited_at
+      return role?.name === 'Owner' && !member.invited_at
     })
 
-    console.log('membersWhoAreOwners', membersWhoAreOwners)
-
-    return selectedOrg?.is_owner && membersWhoAreOwners && membersWhoAreOwners.length > 1
-      ? true
-      : false
+    return membersWhoAreOwners.length > 1
   }
 }