fix: refactor new meeting team dropdown

ParabolInc · Apr 29, 2024 · f48d877 · f48d877
1 parent 15450bd
commit f48d877
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 240 deletions.
diff --git a/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx b/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
@@ -17,14 +17,11 @@ 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 +42,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 {
@@ -188,37 +184,6 @@ 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'
-        }
-      >
-        <LockOpen style={{marginRight: '8px', color: PALETTE.SLATE_600}} />
-        Allow other teams to use this activity
-      </button>
-    </div>
-  )
-
   const meetingNamePlaceholder =
     type === 'retrospective'
       ? 'Retro'
@@ -255,11 +220,9 @@ 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}
               />
               {type === 'retrospective' && (
                 <>

diff --git a/packages/client/components/DropdownToggleInner.tsx b/packages/client/components/DropdownToggleInner.tsx
diff --git a/packages/client/components/DropdownToggleV2.tsx b/packages/client/components/DropdownToggleV2.tsx
diff --git a/packages/client/components/NewMeetingDropdown.tsx b/packages/client/components/NewMeetingDropdown.tsx
diff --git a/packages/client/components/NewMeetingTeamPicker.tsx b/packages/client/components/NewMeetingTeamPicker.tsx
@@ -1,41 +1,23 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import {ExpandMore} from '@mui/icons-material'
 import graphql from 'babel-plugin-relay/macro'
 import React from 'react'
 import {useFragment} from 'react-relay'
 import {NewMeetingTeamPicker_selectedTeam$key} from '~/__generated__/NewMeetingTeamPicker_selectedTeam.graphql'
 import {NewMeetingTeamPicker_teams$key} from '~/__generated__/NewMeetingTeamPicker_teams.graphql'
 import useAtmosphere from '../hooks/useAtmosphere'
-import {MenuPosition} from '../hooks/useCoords'
-import useMenu from '../hooks/useMenu'
-import {PortalStatus} from '../hooks/usePortal'
-import lazyPreload from '../utils/lazyPreload'
+import {Menu} from '../ui/Menu/Menu'
 import setPreferredTeamId from '../utils/relay/setPreferredTeamId'
-import NewMeetingDropdown from './NewMeetingDropdown'
 import NewMeetingTeamPickerAvatars from './NewMeetingTeamPickerAvatars'
 
-const SelectTeamDropdown = lazyPreload(
-  () =>
-    import(
-      /* webpackChunkName: 'SelectTeamDropdown' */
-      './SelectTeamDropdown'
-    )
-)
-
 interface Props {
   selectedTeamRef: NewMeetingTeamPicker_selectedTeam$key
   teamsRef: NewMeetingTeamPicker_teams$key
   onSelectTeam: (teamId: string) => void
-  positionOverride?: MenuPosition
-  customPortal?: React.ReactNode
 }
 
 const NewMeetingTeamPicker = (props: Props) => {
-  const {selectedTeamRef, teamsRef, onSelectTeam, positionOverride, customPortal} = props
-  const {togglePortal, menuPortal, originRef, menuProps, portalStatus} = useMenu<HTMLDivElement>(
-    positionOverride ?? MenuPosition.LOWER_RIGHT,
-    {
-      isDropdown: true
-    }
-  )
+  const {selectedTeamRef, teamsRef, onSelectTeam} = props
 
   const atmosphere = useAtmosphere()
 
@@ -66,29 +48,48 @@ const NewMeetingTeamPicker = (props: Props) => {
   )
 
   const {name} = selectedTeam
+
   return (
     <>
-      <NewMeetingDropdown
-        icon={<NewMeetingTeamPickerAvatars teamRef={selectedTeam} />}
-        label={name}
-        onClick={togglePortal}
-        onMouseEnter={SelectTeamDropdown.preload}
-        disabled={teams.length === 0}
-        ref={originRef}
-        title={'Team'}
-        opened={[PortalStatus.Entering, PortalStatus.Entered].includes(portalStatus)}
-      />
-      {menuPortal(
-        customPortal ? (
-          customPortal
-        ) : (
-          <SelectTeamDropdown
-            menuProps={menuProps}
-            teams={teams}
-            teamHandleClick={handleSelectTeam}
-          />
-        )
-      )}
+      <Menu
+        className='data-[side=top]:animate-slideUp data-[side=bottom]:animate-slideDown'
+        trigger={
+          <div className='group flex cursor-pointer items-center rounded-md bg-slate-200 p-2 hover:bg-slate-300'>
+            <div className='p-2'>
+              <NewMeetingTeamPickerAvatars teamRef={selectedTeam} />
+            </div>
+            <div className='grow pl-2'>
+              <div className='text-sm leading-4'>Team</div>
+              <div className='text-xl font-semibold leading-5'>{name}</div>
+            </div>
+            <div className='s-6 p-2 pl-0'>
+              <ExpandMore className='text-4xl text-slate-600 transition-transform group-data-[state=open]:rotate-180' />
+            </div>
+          </div>
+        }
+      >
+        <div
+          className='w-[var(--radix-dropdown-menu-trigger-width)]'
+        >
+          <DropdownMenu.Label className='text-base px-3 py-2 font-semibold'>Select Team:</DropdownMenu.Label>
+          <DropdownMenu.Separator className='border-b border-slate-300' />
+          <div className='py-2'>
+            {teams.map((team) => {
+              return (
+                <DropdownMenu.Item
+                  key={team.id}
+                  className='text-base px-3 py-1 hover:bg-slate-200 outline-none'
+                  onClick={() => {
+                    handleSelectTeam(team.id)
+                  }}
+                >
+                  {team.name}
+                </DropdownMenu.Item>
+              )
+            })}
+          </div>
+        </div>
+      </Menu>
     </>
   )
 }

diff --git a/packages/client/package.json b/packages/client/package.json
@@ -76,7 +76,7 @@
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",
-    "@radix-ui/react-dropdown-menu": "^2.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-radio-group": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.0.3",
     "@radix-ui/react-select": "^1.2.2",

diff --git a/packages/client/tailwindTheme.ts b/packages/client/tailwindTheme.ts
@@ -168,12 +168,34 @@ export default {
           opacity: 0,
           transform: 'scale(0)'
         }
+      },
+      slideUp: {
+        from: {
+          opacity: 0,
+          transform: 'translateY(10px)',
+        },
+        to: {
+          opacity: 1,
+          transform: 'translateY(0)',
+        }
+      },
+      slideDown: {
+        from: {
+          opacity: 0,
+          transform: 'translateY(-10px)',
+        },
+        to: {
+          opacity: 1,
+          transform: 'translateY(0)',
+        }
       }
     },
     animation: {
       overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
       contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-      scaleIn: 'scaleIn 150ms cubic-bezier(0, 0, .2, 1)'
+      scaleIn: 'scaleIn 150ms cubic-bezier(0, 0, .2, 1)',
+      slideUp: 'slideUp 200ms cubic-bezier(0, 0, 0.2, 1)',
+      slideDown: 'slideDown 200ms cubic-bezier(0, 0, 0.2, 1)',
     }
   }
 } as const