fix: refactor new meeting team dropdown

packages/client/components/ActivityLibrary/ActivityCardFavorite.tsx

@@ -46,7 +46,7 @@ const ActivityCardFavorite = (props: Props) => {
       <div
         className={clsx(
           className,
-          `z-10 flex h-10 w-10 items-center justify-center rounded-full bg-white`
+          `flex h-10 w-10 items-center justify-center rounded-full bg-white`
         )}
       >
         <TooltipTrigger asChild>

packages/client/components/ActivityLibrary/ActivityDetails/TemplateDetails.tsx

@@ -1,7 +1,7 @@
 import {ContentCopy} from '@mui/icons-material'
 import graphql from 'babel-plugin-relay/macro'
 import clsx from 'clsx'
-import React, {useCallback, useEffect} from 'react'
+import React, {useCallback, useEffect, useState} from 'react'
 import {useFragment} from 'react-relay'
 import {useHistory} from 'react-router'
 import {MeetingTypeEnum} from '~/__generated__/ActivityDetailsQuery.graphql'
@@ -175,13 +175,7 @@ export const TemplateDetails = (props: Props) => {
     removeTemplateMutation(atmosphere, {templateId: activityId}, mutationArgs)
   }, [activityId, submitting, submitMutation, onError, onCompleted])
 
-  const {
-    togglePortal: toggleTeamPickerPortal,
-    modalPortal: teamPickerModalPortal,
-    closePortal: closeTeamPickerPortal
-  } = useModal({
-    id: 'templateTeamPickerModal'
-  })
+  const [teamPickerOpen, setTeamPickerOpen] = useState(false)
 
   const {
     openPortal: openPokerTemplateScaleDetailsPortal,
@@ -250,7 +244,7 @@ export const TemplateDetails = (props: Props) => {
                       />
                     </div>
                     <div className='rounded-full border border-solid border-slate-400'>
-                      <CloneTemplate onClick={toggleTeamPickerPortal} />
+                      <CloneTemplate onClick={() => setTeamPickerOpen(true)} />
                     </div>
                   </>
                 )}
@@ -270,7 +264,7 @@ export const TemplateDetails = (props: Props) => {
                   <FlatButton
                     style={{padding: '8px 12px', border: '0'}}
                     className='flex cursor-pointer gap-1 px-12'
-                    onClick={toggleTeamPickerPortal}
+                    onClick={() => setTeamPickerOpen(true)}
                   >
                     <ContentCopy className='text-slate-600' />
                     <div className='font-semibold text-slate-700'>Clone & Edit</div>
@@ -323,16 +317,17 @@ export const TemplateDetails = (props: Props) => {
         </div>
       )}
 
-      {teamPickerModalPortal(
-        <TeamPickerModal
-          category={category}
-          teamsRef={teams}
-          closePortal={closeTeamPickerPortal}
-          parentTemplateId={activityId}
-          preferredTeamId={preferredTeamId}
-          type={type}
-        />
-      )}
+      <TeamPickerModal
+        category={category}
+        teamsRef={teams}
+        parentTemplateId={activityId}
+        preferredTeamId={preferredTeamId}
+        type={type}
+        isOpen={teamPickerOpen}
+        closeModal={() => {
+          setTeamPickerOpen(false)
+        }}
+      />
 
       {type === 'poker' &&
         editingScaleId &&

packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx

@@ -1,4 +1,3 @@
-import {LockOpen} from '@mui/icons-material'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
 import graphql from 'babel-plugin-relay/macro'
@@ -17,14 +16,10 @@ import {
   RecurrenceSettingsInput
 } from '../../__generated__/StartRetrospectiveMutation.graphql'
 import useAtmosphere from '../../hooks/useAtmosphere'
-import useBreakpoint from '../../hooks/useBreakpoint'
-import {MenuPosition} from '../../hooks/useCoords'
 import useMutationProps from '../../hooks/useMutationProps'
 import SelectTemplateMutation from '../../mutations/SelectTemplateMutation'
 import StartCheckInMutation from '../../mutations/StartCheckInMutation'
 import StartTeamPromptMutation from '../../mutations/StartTeamPromptMutation'
-import {PALETTE} from '../../styles/paletteV3'
-import {Breakpoint} from '../../types/constEnums'
 import sortByTier from '../../utils/sortByTier'
 import FlatPrimaryButton from '../FlatPrimaryButton'
 import NewMeetingActionsCurrentMeetings from '../NewMeetingActionsCurrentMeetings'
@@ -45,7 +40,6 @@ interface Props {
 const ActivityDetailsSidebar = (props: Props) => {
   const {selectedTemplateRef, teamsRef, type, preferredTeamId} = props
   const [isMinimized, setIsMinimized] = useState(false)
-  const isMobile = !useBreakpoint(Breakpoint.INVOICE)
   const selectedTemplate = useFragment(
     graphql`
       fragment ActivityDetailsSidebar_template on MeetingTemplate {
@@ -67,9 +61,6 @@ const ActivityDetailsSidebar = (props: Props) => {
         name
         tier
         orgId
-        organization {
-          name
-        }
         retroSettings: meetingSettings(meetingType: retrospective) {
           ...NewMeetingSettingsToggleCheckIn_settings
           ...NewMeetingSettingsToggleTeamHealth_settings
@@ -188,36 +179,17 @@ const ActivityDetailsSidebar = (props: Props) => {
     }
   }
 
-  const handleShareToOrg = () => {
-    selectedTemplate &&
-      UpdateReflectTemplateScopeMutation(
-        atmosphere,
-        {scope: 'ORGANIZATION', templateId: selectedTemplate.id},
-        {onError, onCompleted}
-      )
-  }
-
-  const teamScopePopover = templateTeam && selectedTemplate.scope === 'TEAM' && (
-    <div className='w-[352px] p-4'>
-      <div>
-        This custom activity is private to the <b>{templateTeam.name}</b> team.
-      </div>
-      <br />
-      <div>
-        As a member of the team you can share this activity with other teams at the{' '}
-        <b>{templateTeam.organization.name}</b> organization so that they can also use the activity.
-      </div>
-      <button
-        onClick={handleShareToOrg}
-        className={
-          'mt-4 flex w-max cursor-pointer items-center rounded-full border border-solid border-slate-400 bg-white px-3 py-2 text-center font-sans text-sm font-semibold text-slate-700 hover:bg-slate-100'
+  const handleShareToOrg =
+    templateTeam && selectedTemplate.scope === 'TEAM'
+      ? () => {
+          selectedTemplate &&
+            UpdateReflectTemplateScopeMutation(
+              atmosphere,
+              {scope: 'ORGANIZATION', templateId: selectedTemplate.id},
+              {onError, onCompleted}
+            )
         }
-      >
-        <LockOpen style={{marginRight: '8px', color: PALETTE.SLATE_600}} />
-        Allow other teams to use this activity
-      </button>
-    </div>
-  )
+      : undefined
 
   const meetingNamePlaceholder =
     type === 'retrospective'
@@ -255,11 +227,10 @@ const ActivityDetailsSidebar = (props: Props) => {
           >
             <div className='mt-6 flex grow flex-col gap-2'>
               <NewMeetingTeamPicker
-                positionOverride={isMobile ? MenuPosition.UPPER_RIGHT : MenuPosition.UPPER_LEFT} // refactor this: https://github.com/ParabolInc/parabol/issues/9274
                 onSelectTeam={onSelectTeam}
                 selectedTeamRef={selectedTeam}
                 teamsRef={availableTeams}
-                customPortal={teamScopePopover}
+                onShareToOrg={handleShareToOrg}
               />
               {type === 'retrospective' && (
                 <>

packages/client/components/ActivityLibrary/TeamPickerModal.tsx

@@ -9,10 +9,11 @@ import {TeamPickerModal_teams$key} from '~/__generated__/TeamPickerModal_teams.g
 import {MeetingTypeEnum} from '~/__generated__/TemplateDetails_activity.graphql'
 import {AddPokerTemplateMutation$data} from '../../__generated__/AddPokerTemplateMutation.graphql'
 import useAtmosphere from '../../hooks/useAtmosphere'
-import {MenuPosition} from '../../hooks/useCoords'
 import useMutationProps from '../../hooks/useMutationProps'
 import AddPokerTemplateMutation from '../../mutations/AddPokerTemplateMutation'
 import AddReflectTemplateMutation from '../../mutations/AddReflectTemplateMutation'
+import {Dialog} from '../../ui/Dialog/Dialog'
+import {DialogContent} from '../../ui/Dialog/DialogContent'
 import SendClientSideEvent from '../../utils/SendClientSideEvent'
 import sortByTier from '../../utils/sortByTier'
 import NewMeetingTeamPicker from '../NewMeetingTeamPicker'
@@ -23,14 +24,15 @@ const ACTION_BUTTON_CLASSES =
 interface Props {
   preferredTeamId: string | null
   teamsRef: TeamPickerModal_teams$key
-  closePortal: () => void
   category: string
   parentTemplateId: string
   type: MeetingTypeEnum
+  isOpen: boolean
+  closeModal: () => void
 }
 
 const TeamPickerModal = (props: Props) => {
-  const {teamsRef, closePortal, category, parentTemplateId, type, preferredTeamId} = props
+  const {teamsRef, category, parentTemplateId, type, preferredTeamId, isOpen, closeModal} = props
   const teams = useFragment(
     graphql`
       fragment TeamPickerModal_teams on Team @relay(plural: true) {
@@ -71,7 +73,7 @@ const TeamPickerModal = (props: Props) => {
         {
           onError,
           onCompleted: (res: AddReflectTemplateMutation$data) => {
-            closePortal()
+            closeModal()
             const templateId = res.addReflectTemplate?.reflectTemplate?.id
             if (templateId) {
               history.push(`/activity-library/details/${templateId}`, {
@@ -91,7 +93,7 @@ const TeamPickerModal = (props: Props) => {
         {
           onError,
           onCompleted: (res: AddPokerTemplateMutation$data) => {
-            closePortal()
+            closeModal()
             const templateId = res.addPokerTemplate?.pokerTemplate?.id
             if (templateId) {
               history.push(`/activity-library/details/${templateId}`, {
@@ -115,63 +117,64 @@ const TeamPickerModal = (props: Props) => {
   }
 
   return (
-    <div className='w-[440px] bg-white p-6'>
-      <div className='flex flex-col gap-4'>
-        <div>
-          <b>Select the team</b> to manage this cloned template
-        </div>
-        <NewMeetingTeamPicker
-          positionOverride={MenuPosition.UPPER_LEFT}
-          onSelectTeam={(teamId) => {
-            const newTeam = teams.find((team) => team.id === teamId)
-            newTeam && setSelectedTeam(newTeam)
-          }}
-          selectedTeamRef={selectedTeam}
-          teamsRef={teams}
-        />
-        {selectedTeam.tier === 'starter' && (
+    <Dialog isOpen={isOpen} onClose={closeModal}>
+      <DialogContent className='w-[440px] p-6'>
+        <div className='flex flex-col gap-4'>
           <div>
-            This team is on the <b>Starter</b> plan. <b>Upgrade</b> to clone and edit templates on
-            this team.
+            <b>Select the team</b> to manage this cloned template
           </div>
-        )}
-        {error?.message && <div className='w-full text-tomato-500'>{error.message}</div>}
-        <div className='flex gap-2.5 self-end'>
-          <button
-            className={clsx(
-              ACTION_BUTTON_CLASSES,
-              'border border-solid border-slate-400 bg-white text-slate-700 hover:bg-slate-200'
-            )}
-            onClick={closePortal}
-          >
-            Cancel
-          </button>
-          {selectedTeam.tier === 'starter' ? (
-            <button
-              className={clsx(
-                ACTION_BUTTON_CLASSES,
-                'bg-rose-500 px-4 py-2 text-white hover:bg-rose-600',
-                submitting && 'cursor-wait'
-              )}
-              onClick={handleUpgrade}
-            >
-              Upgrade Now
-            </button>
-          ) : (
+          <NewMeetingTeamPicker
+            onSelectTeam={(teamId) => {
+              const newTeam = teams.find((team) => team.id === teamId)
+              newTeam && setSelectedTeam(newTeam)
+            }}
+            selectedTeamRef={selectedTeam}
+            teamsRef={teams}
+          />
+          {selectedTeam.tier === 'starter' && (
+            <div>
+              This team is on the <b>Starter</b> plan. <b>Upgrade</b> to clone and edit templates on
+              this team.
+            </div>
+          )}
+          {error?.message && <div className='w-full text-tomato-500'>{error.message}</div>}
+          <div className='flex gap-2.5 self-end'>
             <button
               className={clsx(
                 ACTION_BUTTON_CLASSES,
-                'bg-sky-500 px-4 py-2 text-white hover:bg-sky-600',
-                submitting && 'cursor-wait'
+                'border border-solid border-slate-400 bg-white text-slate-700 hover:bg-slate-200'
               )}
-              onClick={handleSelectTeam}
+              onClick={closeModal}
             >
-              Clone Template
+              Cancel
             </button>
-          )}
+            {selectedTeam.tier === 'starter' ? (
+              <button
+                className={clsx(
+                  ACTION_BUTTON_CLASSES,
+                  'bg-rose-500 px-4 py-2 text-white hover:bg-rose-600',
+                  submitting && 'cursor-wait'
+                )}
+                onClick={handleUpgrade}
+              >
+                Upgrade Now
+              </button>
+            ) : (
+              <button
+                className={clsx(
+                  ACTION_BUTTON_CLASSES,
+                  'bg-sky-500 px-4 py-2 text-white hover:bg-sky-600',
+                  submitting && 'cursor-wait'
+                )}
+                onClick={handleSelectTeam}
+              >
+                Clone Template
+              </button>
+            )}
+          </div>
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   )
 }