-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Improved MemberSelect with search (#19439)
- Loading branch information
1 parent
d9429ff
commit 10f251c
Showing
7 changed files
with
161 additions
and
74 deletions.
There are no files selected for viewing
Binary file modified
BIN
+607 Bytes
(100%)
frontend/__snapshots__/scenes-app-saved-insights--card-view.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| import { LemonButton, LemonButtonProps, LemonDropdown, LemonInput, ProfilePicture } from '@posthog/lemon-ui' | ||
| import { useValues } from 'kea' | ||
| import { useMemo, useState } from 'react' | ||
| import { membersLogic } from 'scenes/organization/membersLogic' | ||
|
|
||
| import { UserBasicType } from '~/types' | ||
|
|
||
| export type MemberSelectProps = Pick<LemonButtonProps, 'size' | 'type'> & { | ||
| defaultLabel?: string | ||
| // NOTE: Trying to cover a lot of different cases - if string we assume uuid, if number we assume id | ||
| value: UserBasicType | string | number | null | ||
| onChange: (value: UserBasicType | null) => void | ||
| } | ||
|
|
||
| export function MemberSelect({ | ||
| defaultLabel = 'All users', | ||
| value, | ||
| onChange, | ||
| ...buttonProps | ||
| }: MemberSelectProps): JSX.Element { | ||
| const { meFirstMembers, membersFuse } = useValues(membersLogic) | ||
| const [showPopover, setShowPopover] = useState(false) | ||
| const [searchTerm, setSearchTerm] = useState('') | ||
|
|
||
| const filteredMembers = useMemo(() => { | ||
| return searchTerm ? membersFuse.search(searchTerm).map((result) => result.item) : meFirstMembers | ||
| }, [searchTerm, meFirstMembers]) | ||
|
|
||
| const selectedMember = useMemo(() => { | ||
| if (!value) { | ||
| return null | ||
| } | ||
| if (typeof value === 'string' || typeof value === 'number') { | ||
| const propToCompare = typeof value === 'string' ? 'uuid' : 'id' | ||
| return meFirstMembers.find((member) => member.user[propToCompare] === value)?.user ?? `${value}` | ||
| } | ||
| return value | ||
| }, [value, meFirstMembers]) | ||
|
|
||
| const _onChange = (value: UserBasicType | null): void => { | ||
| setShowPopover(false) | ||
| onChange(value) | ||
| } | ||
|
|
||
| return ( | ||
| <LemonDropdown | ||
| closeOnClickInside={false} | ||
| visible={showPopover} | ||
| sameWidth={false} | ||
| actionable | ||
| onVisibilityChange={(visible) => setShowPopover(visible)} | ||
| overlay={ | ||
| <div className="max-w-100 space-y-2 overflow-hidden"> | ||
| <LemonInput | ||
| type="search" | ||
| placeholder="Search" | ||
| autoFocus | ||
| value={searchTerm} | ||
| onChange={setSearchTerm} | ||
| fullWidth | ||
| /> | ||
| <ul className="space-y-px"> | ||
| <li> | ||
| <LemonButton | ||
| status="stealth" | ||
| fullWidth | ||
| role="menuitem" | ||
| size="small" | ||
| onClick={() => _onChange(null)} | ||
| > | ||
| {defaultLabel} | ||
| </LemonButton> | ||
| </li> | ||
|
|
||
| {filteredMembers.map((member) => ( | ||
| <li key={member.user.uuid}> | ||
| <LemonButton | ||
| status="stealth" | ||
| fullWidth | ||
| role="menuitem" | ||
| size="small" | ||
| icon={ | ||
| <ProfilePicture | ||
| size="md" | ||
| name={member.user.first_name} | ||
| email={member.user.email} | ||
| /> | ||
| } | ||
| onClick={() => _onChange(member.user)} | ||
| > | ||
| <span className="flex items-center justify-between gap-2 flex-1"> | ||
| <span>{member.user.first_name}</span> | ||
| <span className="text-muted-alt"> | ||
| {meFirstMembers[0] === member && `(you)`} | ||
| </span> | ||
| </span> | ||
| </LemonButton> | ||
| </li> | ||
| ))} | ||
|
|
||
| {filteredMembers.length === 0 ? ( | ||
| <div className="p-2 text-muted-alt italic truncate border-t"> | ||
| {searchTerm ? <span>No matches</span> : <span>No users</span>} | ||
| </div> | ||
| ) : null} | ||
| </ul> | ||
| </div> | ||
| } | ||
| > | ||
| <LemonButton {...buttonProps}> | ||
| {typeof selectedMember === 'string' ? ( | ||
| selectedMember | ||
| ) : selectedMember ? ( | ||
| <span> | ||
| {selectedMember.first_name} | ||
| {meFirstMembers[0].user.uuid === selectedMember.uuid ? ` (you)` : ''} | ||
| </span> | ||
| ) : ( | ||
| defaultLabel | ||
| )} | ||
| </LemonButton> | ||
| </LemonDropdown> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters