feat(orgAdmin): org admins can archive teams

packages/client/modules/teamDashboard/components/TaskColumn/ArchiveAllDoneTasksModal.tsx

@@ -11,7 +11,7 @@ type Props = {
   closeModal: () => void
 }
 
-const UserAvatarInput = (props: Props) => {
+const ArchiveAllDoneTasksModal = (props: Props) => {
   const {closeModal, taskIds} = props
   const {onCompleted, onError, submitMutation, submitting} = useMutationProps()
   const atmosphere = useAtmosphere()
@@ -54,4 +54,4 @@ const UserAvatarInput = (props: Props) => {
   )
 }
 
-export default UserAvatarInput
+export default ArchiveAllDoneTasksModal

packages/client/modules/userDashboard/components/OrgTeamMembers/OrgTeamMembers.tsx

@@ -1,4 +1,4 @@
-import {ArrowBack} from '@mui/icons-material'
+import {ArrowBack, MoreVert} from '@mui/icons-material'
 import graphql from 'babel-plugin-relay/macro'
 import React from 'react'
 import {PreloadedQuery, usePreloadedQuery} from 'react-relay'
@@ -21,13 +21,15 @@ const query = graphql`
   query OrgTeamMembersQuery($teamId: ID!) {
     viewer {
       team(teamId: $teamId) {
-        ...ArchiveTeam_team
         id
         billingTier
         isOrgAdmin
         isViewerLead
         name
         orgId
+        organization {
+          isBillingLeader
+        }
         teamMembers(sortBy: "preferredName") {
           id
           isNotRemoved
@@ -45,7 +47,7 @@ export const OrgTeamMembers = (props: Props) => {
   const data = usePreloadedQuery<OrgTeamMembersQuery>(query, queryRef)
   const {viewer} = data
   const {team} = viewer
-  const {menuPortal, menuProps} = useMenu(MenuPosition.UPPER_RIGHT)
+  const {togglePortal, menuPortal, menuProps, originRef} = useMenu(MenuPosition.UPPER_RIGHT)
 
   const {
     open: openDeleteTeamDialog,
@@ -54,18 +56,31 @@ export const OrgTeamMembers = (props: Props) => {
   } = useDialogState()
 
   if (!team) return null
-  const {isViewerLead, isOrgAdmin: isViewerOrgAdmin, teamMembers} = team
+  const {isViewerLead, isOrgAdmin: isViewerOrgAdmin, teamMembers, organization} = team
+  const {isBillingLeader} = organization
+  const showMenuButton = isViewerLead || isBillingLeader || isViewerOrgAdmin
 
   return (
     <div className='max-w-4xl pb-4'>
       <div className='flex items-center justify-center py-1'>
-        <div className='flex items-center'>
-          <Button size='md' shape='circle' variant='ghost' asChild>
-            <Link to={`/me/${ORGANIZATIONS}/${team.orgId}/teams`}>
-              <ArrowBack />
-            </Link>
-          </Button>
-          <h1 className='flex-1 text-2xl font-semibold leading-7'>{team.name}</h1>
+        <Button size='md' shape='circle' variant='ghost' asChild>
+          <Link to={`/me/${ORGANIZATIONS}/${team.orgId}/teams`}>
+            <ArrowBack />
+          </Link>
+        </Button>
+        <h1 className='flex-1 text-2xl font-semibold leading-7'>{team.name}</h1>
+        <div className='ml-auto'>
+          {showMenuButton && (
+            <Button
+              shape='circle'
+              variant='ghost'
+              onClick={togglePortal}
+              ref={originRef}
+              className='bg-slate-400'
+            >
+              <MoreVert />
+            </Button>
+          )}
         </div>
       </div>
 

packages/client/modules/userDashboard/components/OrgTeamMembers/OrgTeamMembersMenu.tsx

@@ -1,6 +1,8 @@
+import {MenuItem} from '@mui/material'
 import React from 'react'
+import IconLabel from '../../../../components/IconLabel'
+import LinkButton from '../../../../components/LinkButton'
 import Menu from '../../../../components/Menu'
-import MenuItem from '../../../../components/MenuItem'
 import {MenuProps} from '../../../../hooks/useMenu'
 
 interface OrgTeamMembersMenuProps {
@@ -14,13 +16,18 @@ export const OrgTeamMembersMenu = (props: OrgTeamMembersMenuProps) => {
 
   return (
     <Menu ariaLabel={'Select your action'} {...menuProps}>
-      <MenuItem
-        label='Delete team'
-        onClick={() => {
-          closePortal()
-          openDeleteTeamModal()
-        }}
-      />
+      <MenuItem>
+        <LinkButton
+          aria-label='Click to permanently delete this team.'
+          palette='red'
+          onClick={() => {
+            closePortal()
+            openDeleteTeamModal()
+          }}
+        >
+          <IconLabel icon='remove_circle' label='Delete Team' />
+        </LinkButton>
+      </MenuItem>
     </Menu>
   )
 }

packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx

@@ -46,9 +46,11 @@ const OrgTeams = (props: Props) => {
       <div className='flex items-center justify-center py-1'>
         <div>
           <h1 className='text-2xl font-semibold leading-7'>Teams</h1>
-          {!showAllTeams && (
-            <p className='text-gray-600 mb-2'>Only showing teams you're a member of</p>
-          )}
+          <p className='text-gray-600 mb-2'>
+            {!showAllTeams
+              ? "Only showing teams you're a member of"
+              : 'Showing all teams in the organization'}
+          </p>
         </div>
         <div className='ml-auto'>
           <Button

packages/client/modules/userDashboard/components/OrgTeams/OrgTeamsRow.tsx

@@ -19,18 +19,16 @@ const OrgTeamsRow = (props: Props) => {
         id
         name
         teamMembers {
-          id
-          isLead
-          isOrgAdmin
           isSelf
-          email
+          preferredName
         }
       }
     `,
     teamRef
   )
   const {id: teamId, teamMembers, name} = team
   const teamMembersCount = teamMembers.length
+  const viewerTeamMember = teamMembers.find((m) => m.isSelf)
 
   return (
     <Link
@@ -39,7 +37,14 @@ const OrgTeamsRow = (props: Props) => {
     >
       <div className='flex items-center p-4'>
         <div className='flex flex-1 flex-col py-1'>
-          <div className='text-gray-700 text-lg font-bold'>{name}</div>
+          <div className='text-gray-700 flex items-center text-lg font-bold'>
+            {name}
+            {!viewerTeamMember && (
+              <span className='ml-2 rounded-full bg-tomato-700 px-2 py-0.5 text-xs text-white'>
+                Other's Team
+              </span>
+            )}
+          </div>
           <div className='flex items-center justify-between'>
             <div className='text-gray-600'>
               {`${teamMembersCount} ${plural(teamMembersCount, 'member')}`}

packages/client/modules/userDashboard/components/Organization/OrgNav.tsx

@@ -54,7 +54,7 @@ const OrgNav = (props: Props) => {
     `,
     organizationRef
   )
-  const {name} = organization
+  const {name: orgName} = organization
 
   return (
     <Wrapper>
@@ -66,7 +66,7 @@ const OrgNav = (props: Props) => {
       <StyledIcon>
         <NavigateNextIcon />
       </StyledIcon>
-      <OrgLabel isCurrent>{`${name}'s Org`}</OrgLabel>
+      <OrgLabel isCurrent>{orgName}</OrgLabel>
     </Wrapper>
   )
 }