feat(ad-hoc): Add create team dialog

packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx

@@ -1,7 +1,7 @@
 import {LockOpen} from '@mui/icons-material'
 import graphql from 'babel-plugin-relay/macro'
 import clsx from 'clsx'
-import React, {useState} from 'react'
+import React, {useState, useEffect, useRef} from 'react'
 import {useFragment} from 'react-relay'
 import StartSprintPokerMutation from '~/mutations/StartSprintPokerMutation'
 import {useHistory} from 'react-router'
@@ -132,12 +132,24 @@ const ActivityDetailsSidebar = (props: Props) => {
       : // it is a team-scoped template, templateTeam  must exist
         [templateTeam!]
 
+  const availableTeamsRef = useRef(availableTeams)
+
+  useEffect(() => {
+    availableTeamsRef.current = availableTeams
+  }, [availableTeams])
+
   const [selectedTeam, setSelectedTeam] = useState(
     () =>
       availableTeams.find((team) => team.id === preferredTeamId) ??
       templateTeam ??
       sortByTier(availableTeams)[0]!
   )
+
+  const onSelectTeam = (teamId: string) => {
+    const currentAvailableTeams = availableTeamsRef.current
+    const newTeam = currentAvailableTeams.find((team) => team.id === teamId)
+    newTeam && setSelectedTeam(newTeam)
+  }
   const mutationProps = useMutationProps()
   const {onError, onCompleted, submitting, submitMutation, error} = mutationProps
   const history = useHistory()
@@ -322,10 +334,7 @@ const ActivityDetailsSidebar = (props: Props) => {
           ) : (
             <NewMeetingTeamPicker
               positionOverride={MenuPosition.UPPER_LEFT}
-              onSelectTeam={(teamId) => {
-                const newTeam = availableTeams.find((team) => team.id === teamId)
-                newTeam && setSelectedTeam(newTeam)
-              }}
+              onSelectTeam={onSelectTeam}
               selectedTeamRef={selectedTeam}
               teamsRef={availableTeams}
               customPortal={teamScopePopover}

packages/client/components/AddTeamDialog.tsx

@@ -0,0 +1,201 @@
+import React, {useState} from 'react'
+import {PreloadedQuery, usePreloadedQuery, useFragment} from 'react-relay'
+import PrimaryButton from './PrimaryButton'
+import SecondaryButton from './SecondaryButton'
+import {Dialog} from '../ui/Dialog/Dialog'
+import {DialogContent} from '../ui/Dialog/DialogContent'
+import {DialogTitle} from '../ui/Dialog/DialogTitle'
+import {DialogActions} from '../ui/Dialog/DialogActions'
+import {Select} from '../ui/Select/Select'
+import {SelectItem} from '../ui/Select/SelectItem'
+import {SelectTrigger} from '../ui/Select/SelectTrigger'
+import {SelectGroup} from '../ui/Select/SelectGroup'
+import {SelectValue} from '../ui/Select/SelectValue'
+import {SelectContent} from '../ui/Select/SelectContent'
+import graphql from 'babel-plugin-relay/macro'
+import {AddTeamDialogQuery} from '../__generated__/AddTeamDialogQuery.graphql'
+import {AddTeamDialog_viewer$key} from '../__generated__/AddTeamDialog_viewer.graphql'
+import useMutationProps from '../hooks/useMutationProps'
+import useAtmosphere from '../hooks/useAtmosphere'
+import {AdhocTeamMultiSelect, Option} from '../components/AdhocTeamMultiSelect/AdhocTeamMultiSelect'
+import {Input} from '../ui/Input/Input'
+import AddTeamMutation from '~/mutations/AddTeamMutation'
+import useRouter from '~/hooks/useRouter'
+import getGraphQLError from '~/utils/relay/getGraphQLError'
+
+interface Props {
+  isOpen: boolean
+  onClose: () => void
+  onAddTeam: (teamId: string) => void
+  queryRef: PreloadedQuery<AddTeamDialogQuery>
+}
+
+const AddTeamDialogViewerFragment = graphql`
+  fragment AddTeamDialog_viewer on User {
+    ...AdhocTeamMultiSelect_viewer
+    organizations {
+      id
+      name
+    }
+  }
+`
+
+const query = graphql`
+  query AddTeamDialogQuery {
+    viewer {
+      ...AddTeamDialog_viewer
+    }
+  }
+`
+
+const AddTeamDialog = (props: Props) => {
+  const {isOpen, onClose, queryRef, onAddTeam} = props
+  const atmosphere = useAtmosphere()
+
+  const {submitting, onCompleted, onError, error, submitMutation} = useMutationProps()
+  const {history} = useRouter()
+
+  const data = usePreloadedQuery<AddTeamDialogQuery>(query, queryRef)
+  const viewer = useFragment<AddTeamDialog_viewer$key>(AddTeamDialogViewerFragment, data.viewer)
+  const {organizations: viewerOrganizations} = viewer
+
+  const labelStyles = `text-left text-sm font-semibold mb-3`
+  const fieldsetStyles = `mx-0 mb-6 flex flex-col w-full p-0`
+
+  const [selectedUsers, setSelectedUsers] = React.useState<Option[]>([])
+  const [mutualOrgsIds, setMutualOrgsIds] = React.useState<string[]>([])
+
+  const showOrgPicker = !!(
+    selectedUsers.length &&
+    (mutualOrgsIds.length > 1 || !mutualOrgsIds.length)
+  )
+
+  const defaultOrgId = mutualOrgsIds[0]
+  const [selectedOrgId, setSelectedOrgId] = useState(defaultOrgId)
+  const [teamName, setTeamName] = useState('')
+  const [teamNameManuallyEdited, setTeamNameManuallyEdited] = useState(false)
+
+  const MAX_TEAM_NAME_LENGTH = 50
+  const generateTeamName = (newUsers: Option[]) => {
+    return newUsers
+      .map((user) => (user.id ? user.label : user.email.split('@')[0]))
+      .join(', ')
+      .substring(0, MAX_TEAM_NAME_LENGTH)
+  }
+
+  const onSelectedUsersChange = (newUsers: Option[]) => {
+    setSelectedUsers(newUsers)
+    const selectedUsersOrganizationIds = new Set()
+    newUsers.forEach((user) => {
+      //add user.organizationIds to selectedUserOrganizationIds
+      user.organizationIds.forEach((organizationId) => {
+        selectedUsersOrganizationIds.add(organizationId)
+      })
+    })
+
+    const mutualOrgs = viewerOrganizations.filter((org) => selectedUsersOrganizationIds.has(org.id))
+
+    const mutualOrgsIds = mutualOrgs.map((org) => org.id)
+    setMutualOrgsIds(mutualOrgsIds)
+    setSelectedOrgId(mutualOrgsIds[0] ?? viewerOrganizations[0]?.id)
+
+    if (!teamNameManuallyEdited) {
+      setTeamName(generateTeamName(newUsers))
+    }
+  }
+
+  const handleAddTeam = () => {
+    const newTeam = {
+      name: teamName.substring(0, MAX_TEAM_NAME_LENGTH),
+      orgId: selectedOrgId
+    }
+    submitMutation()
+
+    AddTeamMutation(
+      atmosphere,
+      {newTeam, invitees: selectedUsers.map((user) => user.email)},
+      {
+        onError,
+        onCompleted: (res, errors) => {
+          onCompleted(res, errors)
+          const error = getGraphQLError(res, errors)
+          if (!error) {
+            onAddTeam(res.addTeam.team.id)
+          }
+        },
+        history,
+        showTeamCreatedToast: false
+      }
+    )
+  }
+
+  const isValid = selectedUsers.length && teamName.trim()
+
+  return (
+    <Dialog isOpen={isOpen} onClose={onClose}>
+      <DialogContent className='z-10'>
+        <DialogTitle className='mb-4'>Add team</DialogTitle>
+
+        <fieldset className={fieldsetStyles}>
+          <label className={labelStyles}>Add teammates</label>
+
+          <AdhocTeamMultiSelect
+            viewerRef={viewer}
+            value={selectedUsers}
+            onChange={onSelectedUsersChange}
+          />
+
+          {selectedUsers.some((user: Option) => !user.id) && (
+            <div className='mt-3 text-xs font-semibold text-slate-700'>
+              Email invitations expire in 30 days.
+            </div>
+          )}
+        </fieldset>
+
+        {showOrgPicker && (
+          <fieldset className={fieldsetStyles}>
+            <label className={labelStyles}>Organization</label>
+            <Select onValueChange={(orgId) => setSelectedOrgId(orgId)} value={selectedOrgId}>
+              <SelectTrigger className='bg-white'>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {viewerOrganizations
+                    .filter((org) => (mutualOrgsIds.length ? mutualOrgsIds.includes(org.id) : true))
+                    .map((org) => (
+                      <SelectItem value={org.id} key={org.id}>
+                        {org.name}
+                      </SelectItem>
+                    ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </fieldset>
+        )}
+
+        <fieldset className={fieldsetStyles}>
+          <label className={labelStyles}>Team name</label>
+          <Input
+            onChange={(e) => {
+              !teamNameManuallyEdited && setTeamNameManuallyEdited(true)
+              setTeamName(e.target.value)
+            }}
+            value={teamName}
+          />
+        </fieldset>
+        {error && <div className='mt-2 text-sm font-semibold text-tomato-500'>{error.message}</div>}
+        <DialogActions>
+          <SecondaryButton onClick={onClose} size='small'>
+            Cancel
+          </SecondaryButton>
+          <PrimaryButton size='small' onClick={handleAddTeam} disabled={submitting || !isValid}>
+            Add team
+          </PrimaryButton>
+        </DialogActions>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default AddTeamDialog

packages/client/components/AddTeamDialogRoot.tsx

@@ -0,0 +1,26 @@
+import React, {Suspense} from 'react'
+import AddTeamDialog from './AddTeamDialog'
+import {renderLoader} from '../utils/relay/renderLoader'
+import useQueryLoaderNow from '../hooks/useQueryLoaderNow'
+import addTeamDialogQuery, {AddTeamDialogQuery} from '../__generated__/AddTeamDialogQuery.graphql'
+
+interface Props {
+  onClose: () => void
+  onAddTeam: (teamId: string) => void
+}
+
+const AddTeamDialogRoot = (props: Props) => {
+  const {onClose, onAddTeam} = props
+
+  const queryRef = useQueryLoaderNow<AddTeamDialogQuery>(addTeamDialogQuery, {}, 'network-only')
+
+  return (
+    <Suspense fallback={renderLoader()}>
+      {queryRef && (
+        <AddTeamDialog onAddTeam={onAddTeam} isOpen={true} onClose={onClose} queryRef={queryRef} />
+      )}
+    </Suspense>
+  )
+}
+
+export default AddTeamDialogRoot

packages/client/components/AdhocTeamMultiSelect/AdhocTeamMultiSelect.tsx

@@ -184,7 +184,7 @@ export const AdhocTeamMultiSelect = (props: Props) => {
             className='m-0 box-border min-h-[36px] w-0 min-w-[30px] flex-grow border-0 bg-white pl-1 text-black outline-none'
           />
         </div>
-        <div className='mt-2 text-sm font-semibold text-tomato-500'>{error}</div>
+        {error && <div className='mt-2 text-sm font-semibold text-tomato-500'>{error}</div>}
       </div>
       {groupedOptions.length > 0 ? (
         <ul

packages/client/components/NewMeetingTeamPicker.tsx

@@ -11,6 +11,7 @@ import NewMeetingDropdown from './NewMeetingDropdown'
 import NewMeetingTeamPickerAvatars from './NewMeetingTeamPickerAvatars'
 import useAtmosphere from '../hooks/useAtmosphere'
 import setPreferredTeamId from '../utils/relay/setPreferredTeamId'
+import AddTeamDialogRoot from '~/components/AddTeamDialogRoot'
 
 const SelectTeamDropdown = lazyPreload(
   () =>
@@ -39,6 +40,8 @@ const NewMeetingTeamPicker = (props: Props) => {
     }
   )
 
+  const [addTeamDialogOpen, setAddTeamDialogOpen] = React.useState(false)
+
   const atmosphere = useAtmosphere()
 
   const handleSelectTeam = (teamId: string) => {
@@ -47,7 +50,7 @@ const NewMeetingTeamPicker = (props: Props) => {
   }
 
   const handleAddTeamClick = () => {
-    window.open(`/newteam/1`, '_blank', 'noreferrer')
+    setAddTeamDialogOpen(true)
   }
 
   const selectedTeam = useFragment(
@@ -96,6 +99,17 @@ const NewMeetingTeamPicker = (props: Props) => {
           />
         )
       )}
+      {addTeamDialogOpen && (
+        <AddTeamDialogRoot
+          onAddTeam={(teamId) => {
+            setAddTeamDialogOpen(false)
+            handleSelectTeam(teamId)
+          }}
+          onClose={() => {
+            setAddTeamDialogOpen(false)
+          }}
+        />
+      )}
     </>
   )
 }

packages/client/mutations/AddTeamMutation.ts

@@ -22,6 +22,7 @@ graphql`
       ...NewTeamForm_teams
       ...MeetingsDashActiveMeetings
       ...Team_team
+      ...ActivityDetailsSidebar_teams
     }
   }
 `
@@ -71,10 +72,13 @@ export const addTeamMutationNotificationUpdater: SharedUpdater<
   handleRemoveSuggestedActions(removedSuggestedActionId, store)
 }
 
-const AddTeamMutation: StandardMutation<TAddTeamMutation, HistoryLocalHandler> = (
+type ExtendedHistoryLocalHandler = HistoryLocalHandler & {
+  showTeamCreatedToast?: boolean
+}
+const AddTeamMutation: StandardMutation<TAddTeamMutation, ExtendedHistoryLocalHandler> = (
   atmosphere,
   variables,
-  {history, onError, onCompleted}
+  {history, onError, onCompleted, showTeamCreatedToast = true}
 ) => {
   return commitMutation<TAddTeamMutation>(atmosphere, {
     mutation,
@@ -91,7 +95,9 @@ const AddTeamMutation: StandardMutation<TAddTeamMutation, HistoryLocalHandler> =
       if (!error) {
         const {authToken} = addTeam
         atmosphere.setAuthToken(authToken)
-        popTeamCreatedToast(addTeam, {atmosphere, history})
+        if (showTeamCreatedToast) {
+          popTeamCreatedToast(addTeam, {atmosphere, history})
+        }
       }
     },
     onError

packages/client/ui/Input/Input.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import {twMerge} from 'tailwind-merge'
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({className, type, ...props}, ref) => {
+    return (
+      <input
+        type={type}
+        className={twMerge(
+          'flex h-11 w-full rounded border-2 border-slate-300 bg-transparent px-2 py-1 text-sm font-semibold focus:outline-none focus-visible:border-sky-500 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-slate-600',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)

packages/client/ui/Select/SelectTrigger.tsx

@@ -13,7 +13,7 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
     <RadixSelect.Trigger
       ref={ref}
       className={twMerge(
-        'flex h-10 w-full cursor-pointer items-center justify-between rounded border-2 border-slate-300 bg-transparent px-2 py-1 text-sm font-semibold focus:outline-none focus-visible:border-sky-500 disabled:cursor-not-allowed disabled:opacity-50 data-[state=open]:border-sky-500 data-[placeholder]:text-slate-600',
+        'flex h-11 w-full cursor-pointer items-center justify-between rounded border-2 border-slate-300 bg-transparent px-2 py-1 text-sm font-semibold focus:outline-none focus-visible:border-sky-500 disabled:cursor-not-allowed disabled:opacity-50 data-[state=open]:border-sky-500 data-[placeholder]:text-slate-600',
         className
       )}
       {...props}